body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) { --accent: var(--brand-emerald-strong); --accent-dark: var(--brand-emerald-pressed); --blue-soft: var(--brand-emerald-soft); --text: #111827; --text-secondary: #596579; --muted: #596579; --line: #d1d5db; --success: var(--brand-emerald-strong); --service-nav-accent: var(--brand-emerald-strong); --generator-content-gutter: 24px; --generator-column-gap: 12px; --generator-location-menu-width: 390px; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.hidden, [hidden]) { display: none !important; } #generatorCatalogShell:has([data-generator-category]) { padding: var(--generator-content-gutter); gap: 20px; border: 1px solid #e5e7eb; border-radius: 12px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #111827; box-shadow: 0 4px 18px rgb(17 24 39 / 5%); } #generatorCatalogShell:has([data-generator-category]) .section-head { margin: 0; } #generatorCatalogShell:has([data-generator-category]) h1 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.2px; } #generatorCatalogShell:has([data-generator-category]) h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; } #generatorCatalogShell:has([data-generator-category]) .eyebrow { margin-bottom: 4px; color: var(--brand-emerald-strong); font-size: 11px; font-weight: 600; letter-spacing: .06em; } #generatorCatalogShell:has([data-generator-category]) :is(.generator-catalog, .generator-documents) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--generator-column-gap); max-width: none; } #generatorCatalogShell:has([data-generator-category]) .generator-documents-section { gap: 12px; } #generatorCatalogShell:has([data-generator-category]) .generator-empty:empty { display: none; } #generatorCatalogShell:has([data-generator-category]) .generator-option { min-height: 72px; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; font: inherit; } #generatorCatalogShell:has([data-generator-category]) .generator-option strong { font-size: 15px; font-weight: 600; line-height: 1.4; } #generatorCatalogShell:has([data-generator-category]) .generator-option small { margin-top: 3px; color: #596579; font-size: 13px; font-weight: 400; line-height: 1.45; } #generatorCatalogShell:has([data-generator-category]) .generator-option > span { min-width: 0; overflow-wrap: anywhere; } #generatorCatalogShell:has([data-generator-category]) .generator-option.active { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } #generatorCatalogShell:has([data-generator-category]) .generator-option:hover:not(:disabled) { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-soft); } #generatorCatalogShell:has([data-generator-category]) .generator-option:focus-visible { outline: 2px solid var(--brand-emerald-strong); outline-offset: 3px; } #generatorCatalogShell:has([data-generator-category]) .generator-option > svg:first-child { width: 24px; height: 24px; color: var(--brand-emerald-strong); } #generatorCatalogShell:has([data-generator-category]) .generator-option:disabled { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) { --accent: var(--brand-emerald-strong); --accent-dark: var(--brand-emerald-pressed); --blue-soft: var(--brand-emerald-soft); --line: #d1d5db; --text: #111827; --muted: #596579; --form-accent: var(--brand-emerald-strong); --form-text: #111827; --form-secondary: #596579; --form-line: #d1d5db; color: #111827; font-size: 14px; font-weight: 400; line-height: 1.5; } #japanVisaShell { --form-accent-dark: var(--brand-emerald-pressed); --form-accent-soft: var(--brand-emerald-soft); } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(h1, h2, h3, h4, strong, b, summary) { font-weight: 600; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.3px; margin-bottom: 6px; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) h3 { font-size: 16px; line-height: 1.4; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) h4 { font-size: 14px; line-height: 1.4; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(.capacity-note, .muted, .cashflow-template-note, .form-note, .form-hint, .visa-section-help) { color: #596579; font-size: 13px; font-weight: 400; line-height: 1.6; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(.panel, .result, .cashflow-section, .visa-section, .visa-form-group) { min-width: 0; border-color: #e5e7eb; border-radius: 12px; box-shadow: 0 4px 18px rgb(17 24 39 / 4%); } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(.panel, .cashflow-section) { padding: 24px; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell) .panel, body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) #japanVisaShell :is(.visa-step-shell, .visa-step-actions, .visa-form > .visa-form-group), body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) #travelCombinedShell :is(.travel-combined-step-shell, .travel-combined-step) { padding-inline: var(--generator-content-gutter); } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(#cashflowShell, #cashflowAShell) .cashflow-section { padding-inline: 0; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(#japanVisaShell, #travelCombinedShell) .applicant-step-track { gap: var(--generator-column-gap); } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) label { min-width: 0; color: #111827; font-size: 13px; font-weight: 500; line-height: 20px; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) { min-width: 0; min-height: 44px; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 12px; color: #111827; background: #fff; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; accent-color: var(--brand-emerald-strong); } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(input, textarea)::placeholder { color: #737e8e; font-weight: 400; opacity: 1; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(input, select, textarea):disabled { color: #6b7280; background: #f3f4f6; cursor: not-allowed; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(input, textarea)[readonly] { color: #596579; background: #f9fafb; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(input, select, textarea)[aria-invalid="true"] { border-color: #b91c1c; background: #fff7f7; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--brand-emerald-strong); } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--brand-emerald-strong); outline-offset: 3px; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.35; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) .button.primary { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-strong); color: #fff; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) .button.primary:hover:not(:disabled) { background: var(--brand-emerald-pressed); border-color: var(--brand-emerald-pressed); } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) .button.primary:active:not(:disabled) { background: var(--brand-emerald-active); border-color: var(--brand-emerald-active); } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) .button.ghost { color: var(--brand-emerald-strong); background: #fff; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) .button.ghost:hover:not(:disabled) { background: var(--brand-emerald-soft); border-color: var(--brand-emerald-line); } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) .button:disabled { opacity: 1; background: #e5e7eb; border-color: #e5e7eb; color: #6b7280; cursor: not-allowed; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) .text-action { min-height: 44px; color: var(--brand-emerald-strong); font-size: 14px; font-weight: 600; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.steps, .cashflow-steps, .accommodation-steps) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--generator-column-gap); padding: var(--generator-content-gutter); margin: 16px 0; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 4px 18px rgb(17 24 39 / 5%); } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.steps, .cashflow-steps, .accommodation-steps) .step-pill { min-width: 0; min-height: 58px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; color: #596579; font-size: 13px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; text-align: left; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.steps, .cashflow-steps, .accommodation-steps) .step-pill.active { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.steps, .cashflow-steps, .accommodation-steps) :is(.step-pill.complete, .step-pill.completed):not(.active) { border-color: var(--brand-emerald-line); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.steps, .cashflow-steps, .accommodation-steps) .step-pill:focus-visible { outline: 2px solid var(--brand-emerald-strong); outline-offset: 3px; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .accommodation-steps > button { min-width: 0; min-height: 58px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; color: #596579; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal; overflow-wrap: anywhere; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .accommodation-steps > button:is(.active, .complete) { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-suggestions button[aria-selected="true"] { background: var(--brand-emerald-soft); } :is(#cashflowShell, #cashflowAShell) :is(.cashflow-template-option, .cashflow-repeat-card, .cashflow-category-group, .cashflow-overrides, .cashflow-result-card) { border-color: #d1d5db; border-radius: 8px; background: #fff; } :is(#cashflowShell, #cashflowAShell) .cashflow-template-option { padding: 16px; gap: 12px; } :is(#cashflowShell, #cashflowAShell) .cashflow-template-option:has(input:checked) { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-soft); box-shadow: inset 0 0 0 1px var(--brand-emerald-strong); } :is(#cashflowShell, #cashflowAShell) .cashflow-template-option :is(strong, span) { font-weight: 600; } :is(#cashflowShell, #cashflowAShell) .cashflow-template-option small { color: #596579; font-size: 13px; font-weight: 400; line-height: 1.5; } :is(#cashflowShell, #cashflowAShell) .fields { gap: 16px; align-items: start; } :is(#cashflowShell, #cashflowAShell) .cashflow-errors:not(.hidden) { padding: 12px 16px; border: 1px solid #f0b8b8; border-radius: 8px; background: #fff7f7; color: #991b1b; font-size: 13px; font-weight: 400; } :is(#cashflowShell, #cashflowAShell) .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; } #bookingForm .flight-search-panel { --flight-search-gap: 10px; padding: 0; } #bookingForm .flight-search-row { gap: var(--flight-search-gap); align-items: end; } #bookingForm :is(.complex-routes, .complex-route-row, .complex-controls) { gap: var(--flight-search-gap); align-items: end; } #bookingForm .flight-cell { border: 0; padding: 0; background: transparent; color: #111827; font-size: 13px; font-weight: 500; } #bookingForm :is(.flight-search-row, .complex-route-row, .complex-controls) > .flight-cell { display: grid; grid-template-rows: 20px 48px; align-content: end; gap: 8px; min-height: 0; line-height: 20px; } #bookingForm :is(.flight-search-row, .complex-route-row, .complex-controls) > :is(.swap-route, .search-submit, .complex-remove, .complex-add) { align-self: end; margin: 0; } #bookingForm :is(.flight-search-row, .complex-controls) .field-caption { display: block; height: 20px; line-height: 20px; color: #111827; } #bookingForm .swap-route svg { width: 20px; height: 20px; vertical-align: middle; } #bookingForm .flight-cell > input:not([type="hidden"]), #bookingForm .passenger-picker-button { height: 48px; min-height: 48px; border: 1px solid #d1d5db; border-radius: 8px; padding: 11px 12px; color: #111827; background: #fff; font-size: 14px; font-weight: 500; } #bookingForm :is(.swap-route, .complex-remove, .complex-add, .search-submit) { min-height: 48px; height: 48px; border-radius: 8px; font-size: 14px; font-weight: 600; } #bookingForm .swap-route { border: 0; background: var(--brand-emerald-soft); color: var(--brand-emerald-strong); } #bookingForm .flight-filter-panel { border-radius: 10px; box-shadow: none; } :is(#bookingForm, #travelCombinedShell) .flight-option { min-width: 0; border: 1px solid #d1d5db; border-radius: 12px; box-shadow: 0 4px 18px rgb(17 24 39 / 4%); } :is(#bookingForm, #travelCombinedShell) .flight-option:is(:hover, .selected) { border-color: var(--brand-emerald-strong); } :is(#bookingForm, #travelCombinedShell) .flight-card-actions { display: flex; justify-content: flex-end; } :is(#bookingForm, #travelCombinedShell) .option-price strong { color: #111827; font-size: 26px; font-weight: 600; line-height: 1.3; } :is(#bookingForm, #travelCombinedShell) :is(.tag-row span, .route-time span, .route-time small, .result-timeline p, .result-timeline span, .class-summary, .results-list-head p, .flight-summary p, .filter-section-toggle) { font-weight: 500; } :is(#bookingForm, #travelCombinedShell) .tag-row span { font-size: 12px; } :is(#bookingForm, #travelCombinedShell) .result-route-line { grid-template-columns: 40px minmax(80px, 1fr) minmax(130px, 1.5fr) minmax(80px, 1fr); gap: 12px; } :is(#bookingForm, #travelCombinedShell) .airline-logo { width: 38px; height: 38px; } #bookingForm .passenger-cell .field-caption { color: #111827; font-size: 13px; font-weight: 500; } #bookingForm :is(.toggle-button, .passenger-picker-button, .search-date-button) { font-weight: 600; } #bookingForm .toggle-button.active { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } #bookingForm :is(.passenger, .selected-flight, .passenger-route-summary, .flight-card) { border-color: #d1d5db; border-radius: 10px; box-shadow: none; } #bookingForm .passenger { background: #f9fafb; padding: 20px; } #bookingForm .passenger .fields { gap: 16px; align-items: start; } #bookingForm .passenger { --form-control-height: 50px; --form-control-radius: 8px; --form-accent-dark: var(--brand-emerald-pressed); --form-accent-soft: var(--brand-emerald-soft); } #bookingForm .passenger .visa-date-control > input:not(.visa-native-date) { height: 48px; min-height: 0; border: 0; border-radius: 0; padding: 0 12px; background: transparent; } #bookingForm .passenger :is(.form-search-menu, .form-date-popover) { border-color: #d1d5db; border-radius: 8px; box-shadow: 0 12px 36px rgb(17 24 39 / 12%); } #bookingForm .passenger [data-search-canonical] { display: none; } body:has(#generatorCatalogShell:not(.hidden)) #flightModal .direction-plane { display: inline-grid; width: 28px; height: 28px; place-items: center; color: var(--brand-emerald-strong); transform: none; } body:has(#generatorCatalogShell:not(.hidden)) #flightModal .direction-plane::before { content: none; } body:has(#generatorCatalogShell:not(.hidden)) #flightModal .direction-plane svg { width: 24px; height: 24px; stroke-width: 2; } #bookingForm .airport-menu { top: calc(100% + 8px); width: min(var(--generator-location-menu-width, 390px), calc(100vw - 32px)); border: 1px solid #d1d5db; border-radius: 10px; box-shadow: 0 12px 36px rgb(17 24 39 / 12%); } #bookingForm .airport-option { width: 100%; min-height: 54px; gap: 12px; border-radius: 6px; font-weight: 400; } #bookingForm .airport-option :is(strong, small, em) { display: block; font-size: 13px; font-weight: 400; line-height: 1.4; } #bookingForm .airport-option strong { color: #111827; font-size: 14px; font-weight: 600; } #bookingForm .airport-option[aria-selected="true"] { background: var(--brand-emerald-soft); } #bookingForm .airport-option svg, #bookingForm .airport-code { color: var(--brand-emerald-strong); } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.date-picker-popover, .passenger-picker, .stay-calendar-popover, .stay-suggestions, .stay-property-type-picker, .field-help-popover) { border: 1px solid #d1d5db; border-radius: 10px; color: #111827; background: #fff; box-shadow: 0 12px 36px rgb(17 24 39 / 12%); font-size: 14px; font-weight: 400; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.date-picker-popover, .stay-calendar-popover, .passenger-picker) :is(h3, strong) { font-size: 15px; font-weight: 600; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) .field-help-popover :is(h3, h4) { font-weight: 600; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) .field-help-popover p { color: #596579; font-size: 13px; font-weight: 400; line-height: 1.6; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.date-picker-day, .stay-calendar-day) { font-size: 13px; font-weight: 500; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.date-picker-day.selected, .date-picker-day.range-start, .date-picker-day.range-end, .stay-calendar-day.range-start, .stay-calendar-day.range-end) { background: var(--brand-emerald-strong); color: #fff; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.date-picker-day.range-preview, .stay-calendar-day.in-range) { background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel { position: relative; top: auto; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) repeat(2, minmax(0, .9fr)) minmax(0, 1fr) 100px; gap: 12px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel > .stay-field { min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: #111827; font-size: 13px; font-weight: 500; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel .stay-field > :is(input, button, select) { height: 48px; min-height: 48px; padding: 11px 12px; border: 1px solid #d1d5db; border-radius: 8px; color: #111827; background: #fff; font-size: 14px; font-weight: 500; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel .stay-field > span { position: static; display: block; width: auto; height: auto; margin-bottom: 7px; color: #111827; font-size: 13px; font-weight: 500; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel .stay-search-button { align-self: end; min-height: 48px; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel.is-stuck { position: relative; top: auto; width: auto; box-shadow: none; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel > .stay-field { line-height: 20px; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel .stay-field > :is(input, button, select):focus-visible { outline: 2px solid var(--brand-emerald-strong); outline-offset: 3px; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel .stay-field > [aria-invalid="true"] { border-color: #b91c1c; background: #fff7f7; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell input[type="range"] { accent-color: var(--brand-emerald-strong); } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-button { margin-left: 0; } body:has(#generatorCatalogShell:not(.hidden)) :is(#bookingForm, #accommodationShell, #travelCombinedShell) :is(.flight-search-body, .complex-panel, .stay-search-panel, .travel-combined-search-grid, .travel-combined-route-editor) { padding: 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb; } body:has(#generatorCatalogShell:not(.hidden)) #travelCombinedShell .travel-combined-route-editor .travel-combined-route-row { padding: 0; border: 0; border-radius: 0; background: transparent; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell :is(.stay-card, .stay-filters, .stay-selected-summary, .stay-resident, .stay-template-card) { border-color: #d1d5db; border-radius: 10px; box-shadow: none; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell :is(.stay-resident, .stay-selected-summary) { padding: 20px; background: #f9fafb; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-suggestions { top: calc(100% + 8px); } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-suggestion-copy { font-size: 14px; font-weight: 400; line-height: 1.45; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-suggestion-copy strong { font-weight: 600; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-template-card.selected { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-card-info { min-width: 0; } #japanVisaShell :is(.visa-step-shell, .questionnaire-progress) { padding: 16px 20px; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 4px 18px rgb(17 24 39 / 5%); background: #fff; } #japanVisaShell .visa-step-track { gap: var(--generator-column-gap); } #japanVisaShell .visa-step-track button { min-height: 58px; border-radius: 8px; border-color: #e5e7eb; background: #f9fafb; color: #596579; font-size: 13px; font-weight: 500; } #japanVisaShell .visa-step-track button.active { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } #japanVisaShell .visa-step-track button.active > span { background: var(--brand-emerald-strong); color: #fff; } #japanVisaShell .visa-step-track button.status-complete { border-color: var(--brand-emerald-line); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } #japanVisaShell .visa-step-track button small { font-size: 12px; font-weight: 500; } #japanVisaShell .visa-step-track button small em { font-size: 11px; font-weight: 400; } #japanVisaShell :is(.visa-section, .visa-form-group, .form-section) { background: #fff; } #japanVisaShell :is(.form-field-label, .question-row-label, .field-caption) { color: #111827; font-size: 13px; font-weight: 500; } #japanVisaShell :is(.search-select-options, .searchable-select-options, .form-search-options) { border-color: #d1d5db; border-radius: 10px; box-shadow: 0 12px 36px rgb(17 24 39 / 12%); } #japanVisaShell .applicant-step-track { gap: var(--generator-column-gap); } #japanVisaShell .applicant-step-track button { min-width: 0; min-height: 58px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; background: #f9fafb; color: #596579; font-size: 13px; font-weight: 500; } #japanVisaShell .applicant-step-track button.active { border-color: var(--brand-emerald-strong); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } #japanVisaShell .applicant-step-track button.active > span { background: var(--brand-emerald-strong); color: #fff; } #japanVisaShell .applicant-step-track button.status-complete:not(.active) { border-color: var(--brand-emerald-line); background: var(--brand-emerald-soft); color: var(--brand-emerald-pressed); } #japanVisaShell .applicant-step-track button.status-invalid:not(.active) { border-color: #dc9b96; background: #fff7f7; color: #991b1b; } #japanVisaShell .applicant-step-track small { font-weight: 500; } #japanVisaShell .form-field .visa-date-control > input:not(.visa-native-date) { min-height: 0; border: 0; border-radius: 0; padding: 0 12px; background: transparent; } #japanVisaShell :is(.form-search-menu, .form-date-popover) { border-color: #d1d5db; border-radius: 8px; box-shadow: 0 12px 36px rgb(17 24 39 / 12%); } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(#flightModal, #generatorSwitchModal, #seriousErrorDialog) .modal-card { border-radius: 12px; font-size: 14px; font-weight: 400; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(#flightModal, #generatorSwitchModal, #seriousErrorDialog) :is(h2, h3, strong) { font-weight: 600; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(#flightModal, #generatorSwitchModal, #seriousErrorDialog) .button { min-height: 44px; border-radius: 8px; font-size: 14px; font-weight: 600; } @media (min-width: 981px) and (max-width: 1160px) { #bookingForm .flight-search-row { grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) repeat(2, 116px); } #bookingForm .flight-search-row > .passenger-cell { grid-column: 1 / 4; } #bookingForm .flight-search-row > .search-submit { grid-column: 4 / -1; } } @media (max-width: 980px) { #bookingForm :is(.airport-menu, .passenger-picker) { left: 50%; right: auto; max-width: calc(100vw - 32px); transform: translateX(-50%); } } @media (max-width: 1080px) { body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel { grid-template-columns: repeat(6, minmax(0, 1fr)); } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel > .stay-field { grid-column: span 2; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel > .stay-location-field { grid-column: span 4; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel > .stay-search-button { grid-column: span 6; } } @media (max-width: 760px) { #generatorCatalogShell:has([data-generator-category]) :is(.generator-catalog, .generator-documents) { grid-template-columns: 1fr; } } @media (max-width: 620px) { body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) { --generator-content-gutter: 16px; } #generatorCatalogShell:has([data-generator-category]) { gap: 16px; } #generatorCatalogShell:has([data-generator-category]) .generator-option { padding: 12px; } body:has(#generatorCatalogShell:not(.hidden)) :is(#bookingForm, #accommodationShell, #travelCombinedShell) :is(.flight-search-body, .complex-panel, .stay-search-panel, .travel-combined-search-grid, .travel-combined-route-editor) { padding: 12px; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) :where(.panel, .cashflow-section) { padding: 16px; } :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) h2 { font-size: 22px; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) .cashflow-steps { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) :is(.steps, .cashflow-steps) > .step-pill, body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) #accommodationShell .accommodation-steps > button { padding-inline: 8px; font-size: 12px; text-wrap: balance; } body:has(#generatorCatalogShell:not(.hidden) [data-generator-category]) .cashflow-steps > button:last-child { grid-column: auto; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel > .stay-field { grid-column: span 1; } body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel > .stay-location-field, body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel > .stay-property-type-field, body:has(#generatorCatalogShell:not(.hidden)) #accommodationShell .stay-search-panel > .stay-search-button { grid-column: 1 / -1; } #japanVisaShell :is(.visa-step-shell, .questionnaire-progress) { padding: 12px; } #japanVisaShell .applicant-step-track { gap: var(--generator-column-gap); } #japanVisaShell .applicant-step-track button { flex-direction: column; padding: 8px 2px; } :is(#bookingForm, #travelCombinedShell) .flight-option { padding: 16px; } :is(#bookingForm, #travelCombinedShell) .flight-option .favorite-button { top: 12px; right: 12px; width: 36px; height: 36px; } :is(#bookingForm, #travelCombinedShell) .option-price { min-width: 0; padding-right: 36px; } :is(#bookingForm, #travelCombinedShell) .option-price strong { font-size: 22px; } :is(#bookingForm, #travelCombinedShell) .result-route-line { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } :is(#bookingForm, #travelCombinedShell) .result-timeline { grid-column: 2 / -1; grid-row: 2; } :is(#bookingForm, #travelCombinedShell) .route-time.end { grid-column: 3; grid-row: 1; } :is(#bookingForm, #travelCombinedShell) .route-time strong { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { :is(#bookingForm, #accommodationShell, #cashflowShell, #cashflowAShell, #japanVisaShell) * { scroll-behavior: auto !important; transition: none !important; } } /* Flight: one search panel, with currency and route mode sharing its footer. */ #bookingForm .flight-search-footer{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:16px;padding-top:16px;border-top:1px solid #dbe2e8} #bookingForm .flight-search-footer .flight-currency-row{margin:0;padding:0;border:0} #bookingForm .flight-search-footer .confirmation-currency{display:block} #bookingForm .flight-search-footer .confirmation-currency legend{float:none;margin:0 0 8px;line-height:20px} #bookingForm .flight-search-footer .complex-route-link{border-left:1px solid #dbe2e8;border-radius:0;padding:12px 0 12px 24px;min-height:56px;margin:0} #bookingForm .flight-search-footer:has(.complex-route-link:only-child){margin-top:16px} @media(max-width:600px){#bookingForm .flight-search-footer{gap:12px}#bookingForm .flight-search-footer .complex-route-link{width:100%;border-left:0;border-top:1px solid #dbe2e8;padding:12px 0 0;min-height:40px;text-align:left;font-size:14px}}