/**
 * Flighta homepage hero — Figma "Filghta" › Home-Flight › hero section (1440 × 594.45)
 *
 * Presentation only. The search form markup is shared with Zaflight
 * (b2b/flights/home_searh.blade.php), so nothing here changes fields, names or ids —
 * every rule is scoped to `#flighta-hero`, which only exists on the Flighta homepage.
 * Existing form styles lean on !important, hence the !important below.
 *
 * Vertical offsets are derived from font metrics so cap tops land where the design puts them:
 *   Titillium Web  capTop = boxTop + lineHeight/2 - 0.3075 × size
 *   Heebo          capTop = boxTop + lineHeight/2 - 0.3974 × size
 */
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&family=Heebo:wght@100..900&display=swap");

#flighta-hero {
    --fh-maroon: #5C1A2A;
    --fh-maroon-dark: #4A1522;
    --fh-kicker: #E8820C;
    --fh-radio: #FF6900;
    --fh-radio-off: #767676;
    --fh-text: #364153;
    --fh-value: #314158;
    --fh-label: #8E8E8E;
    --fh-border: #E5E7EB;
    --fh-divider: #F3F4F6;
    --fh-field-w: 186px;
    --fh-gap: 13px;
    --fh-display: "Titillium Web", "Cairo", "Segoe UI", sans-serif;
    --fh-ui: "Heebo", "Segoe UI", system-ui, sans-serif;
}

/* ── Section ─────────────────────────────────────────────── */
.b2c-flighta #flighta-hero,
#flighta-hero {
    display: block !important;
    min-height: 520px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 55.8px 24px 56px !important;
    border-radius: 0 !important;
    background-color: #3D0F1C;
    background-image: url('../img/home/sky-wing.jpg') !important;
    background-size: cover !important;
    background-position: center 62% !important;
    overflow: visible !important;
    position: relative;
    z-index: 300;
    isolation: isolate;
}

.b2c-flighta #flighta-hero .banner_overlay,
#flighta-hero .banner_overlay {
    position: absolute;
    inset: 0;
    border-radius: 0 !important;
    background: linear-gradient(90deg,
        rgba(61, 15, 28, 0.933) 0%,
        rgba(92, 26, 42, 0.80) 20%,
        rgba(79, 22, 36, 0.70) 40%,
        rgba(61, 17, 28, 0.60) 60%,
        rgba(37, 10, 17, 0.50) 80%,
        rgba(0, 0, 0, 0.40) 100%) !important;
    z-index: 1;
    pointer-events: none;
}

.b2c-flighta #flighta-hero .banner_content.flighta-hero__content,
#flighta-hero .banner_content.flighta-hero__content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left !important;
    z-index: 2;
}

/* Results page banner: same card, photo only (no gradient, no copy) — Figma "Flight search" */
#flighta-hero.flighta-hero--results {
    min-height: 486px !important;
    padding: 144px 24px 104px !important;
    margin-bottom: 0 !important;
    background-position: center 62% !important;
}

#flighta-hero.flighta-hero--results .banner_overlay {
    display: none !important;
}

#flighta-hero.flighta-hero--results .flighta-hero__card {
    margin-top: 0;
}

/* ── Copy ────────────────────────────────────────────────── */
#flighta-hero .flighta-hero__kicker {
    display: block;
    margin: 0;
    font-family: var(--fh-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--fh-kicker);
}

#flighta-hero .banner_content h1.flighta-hero__title {
    max-width: 640px;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    font-family: var(--fh-display) !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 61.5px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
}

#flighta-hero .flighta-hero__lead {
    max-width: 530px;
    margin: 13.45px 0 0;
    font-family: var(--fh-display);
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #F4F4F4;
}

/* ── Card ────────────────────────────────────────────────── */
#flighta-hero .flighta-hero__card {
    margin-top: 30.75px;
    background: #FFFFFF;
    border-radius: 18px;
    text-align: left;
    position: relative;
}

#flighta-hero .flighta-hero__services {
    display: flex;
    align-items: stretch;
    height: 50px;
    padding: 0;
    border-bottom: 1px solid var(--fh-divider);
}

/* Private Jets / Hotels / Transport are static placeholders until those services are wired up */
#flighta-hero .flighta-hero__service {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 20.5px 0 18px;
    margin-bottom: -1px;
    font-family: var(--fh-ui);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    color: var(--fh-text);
    border-bottom: 1.5px solid transparent;
    cursor: default;
    white-space: nowrap;
}

#flighta-hero .flighta-hero__service.is-active {
    padding-left: 17.5px;
    padding-right: 21px;
    font-weight: 700;
    color: var(--fh-maroon);
    border-bottom-color: var(--fh-maroon);
    border-top-left-radius: 18px;
}

#flighta-hero .flighta-hero__service-icon {
    font-size: 14px;
    line-height: 1;
}

/* The shared form's own card becomes transparent — the white card above wraps it */
#flighta-hero #search-form,
#flighta-hero .search-form {
    /* the results page nudges the form up (top:-60px) for its old banner */
    top: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    font-family: var(--fh-ui);
}

#flighta-hero .search-form > .card,
#flighta-hero .search-form .card.tab-shadow {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* legacy blur samples the hero outside the rounded card and smears grey into its corners */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#flighta-hero .search-form .card-body {
    padding: 20.25px 47px 20px 48px !important;
    background: transparent !important;
}

/* ── Trip type (the existing tabs, styled as radios) ─────── */
#flighta-hero .search-form ul.nav.tab-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: auto !important;
    margin: 0 0 15.75px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    transform: none !important;
}

#flighta-hero .search-form ul.nav.tab-nav .nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Design order: Round Trip, One Way (Multi City keeps its place after them) */
#flighta-hero .search-form ul.nav.tab-nav .nav-item:nth-child(2) { order: 1; }
#flighta-hero .search-form ul.nav.tab-nav .nav-item:nth-child(1) { order: 2; }
#flighta-hero .search-form ul.nav.tab-nav .nav-item:nth-child(3) { order: 3; }

#flighta-hero .search-form ul.nav.tab-nav .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 20px !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--fh-text) !important;
    cursor: pointer;
}

#flighta-hero .search-form ul.nav.tab-nav .nav-link::after {
    display: none !important;
}

#flighta-hero .search-form ul.nav.tab-nav .nav-link::before {
    content: "";
    flex: 0 0 13.5px;
    width: 13.5px;
    height: 13.5px;
    border: 1.5px solid var(--fh-radio-off);
    border-radius: 50%;
    background: #FFFFFF;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#flighta-hero .search-form ul.nav.tab-nav .nav-link.active::before {
    border-color: var(--fh-radio);
    background: var(--fh-radio);
    box-shadow: inset 0 0 0 2px #FFFFFF;
}

#flighta-hero .search-form ul.nav.tab-nav .nav-link > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    color: inherit !important;
}

#flighta-hero .search-form ul.nav.tab-nav .tabicon {
    display: none !important;
}

#flighta-hero .search-form ul.nav.tab-nav .tabtext {
    margin: 0 !important;
    font-family: var(--fh-ui) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: var(--fh-text) !important;
    white-space: nowrap;
}

/* ── Pane layout: route fields first (as in the design), then additional options, then the button ── */
#flighta-hero .tab-content.hero-tab-pane {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#flighta-hero .tab-content .tab-pane,
#flighta-hero .tab-content > .tab-pane {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#flighta-hero .tab-content .tab-pane.active > form {
    display: flex !important;
    flex-direction: column;
    gap: 13px;
}

/* stray <br> between the round-trip route block and the button row */
#flighta-hero .tab-content .tab-pane > form > br {
    display: none !important;
}

#flighta-hero .tab-content .tab-pane > form > .route_row,
#flighta-hero .tab-content .tab-pane > form > .scrollable-form-area {
    order: 1;
}

#flighta-hero .tab-content .tab-pane > form > .row:not(.nav-select) {
    order: 2;
}

#flighta-hero .tab-content .tab-pane > form > .row.nav-select {
    order: 3;
}

#flighta-hero .tab-content .tab-pane > form > .row {
    margin: 0 !important;
    padding: 0 !important;
}

#flighta-hero .tab-content .tab-pane > form > .scrollable-form-area {
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Route rows */
#flighta-hero .route_row {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#flighta-hero .route_row + .route_row {
    margin-top: 13px !important;
}

#flighta-hero .route_row > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: var(--fh-gap) !important;
    margin: 0 !important;
}

#flighta-hero .route_row > .row > [class*="col"] {
    flex: 0 0 var(--fh-field-w) !important;
    width: var(--fh-field-w) !important;
    max-width: var(--fh-field-w) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The desktop swap-button column: zero-width, icon floats over the From/To seam */
#flighta-hero .route_row > .row > .col-auto:has(> .ex_icon) {
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    margin: 0 calc(var(--fh-gap) / -2) !important;
    padding: 0 !important;
    position: relative;
    z-index: 3;
    overflow: visible !important;
}

#flighta-hero .route_row .col-auto > .ex_icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    color: var(--fh-maroon) !important;
    font-size: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

#flighta-hero .route_row .col-auto > .ex_icon i {
    color: var(--fh-maroon) !important;
    font-size: 12px !important;
}

#flighta-hero .route_row .route-swap-icon-mobile {
    display: none !important;
}

/* "More Options" button sits in the row like a field */
#flighta-hero .route_row > .row > .col-lg-auto.col-md-12 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

#flighta-hero .route_row .more-options-btn {
    height: 52px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: var(--fh-text) !important;
    font-family: var(--fh-ui) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

#flighta-hero .route_row .more-options-btn:hover,
#flighta-hero .route_row .more-options-btn:focus {
    border-color: var(--fh-maroon) !important;
    color: var(--fh-maroon) !important;
}

#flighta-hero .more-options-section {
    margin-top: 13px !important;
    padding: 13px 0 0 !important;
    border-top: 1px solid var(--fh-divider) !important;
}

#flighta-hero .more-options-section > .d-flex {
    gap: var(--fh-gap) !important;
    align-items: flex-start !important;
    margin: 0 !important;
}

#flighta-hero .more-options-section .outlined-input-group {
    width: auto !important;
    min-width: var(--fh-field-w) !important;
    height: auto !important;
    min-height: 52px !important;
}

#flighta-hero .more-options-section .outlined-input-group > input {
    width: 100% !important;
}

/* Class (select2 chips) and Bags stepper sit under the label like a value */
#flighta-hero .more-options-section .outlined-input-group > .select2-container,
#flighta-hero .more-options-section .outlined-input-group > .zf-bag-control {
    display: flex !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    margin: 22px 12px 5px 13px !important;
}

#flighta-hero .more-options-section .outlined-input-group > .zf-bag-control {
    margin-top: 21px !important;
    box-shadow: none !important;
}

#flighta-hero .more-options-section .outlined-input-group > .select2-container .select2-selection {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#flighta-hero .more-options-section .form-check-label {
    font-family: var(--fh-ui) !important;
    color: var(--fh-text) !important;
}

/* ── Field boxes (every outlined input in the hero) ──────── */
#flighta-hero .outlined-input-group {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

#flighta-hero .outlined-input-group:focus-within {
    border-color: var(--fh-maroon) !important;
}

#flighta-hero .outlined-input-group > .outlined-label {
    position: absolute !important;
    top: 5.2px !important;
    left: 17px !important;
    right: 12px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-family: var(--fh-ui) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    color: var(--fh-label) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none !important;
    pointer-events: none;
    z-index: 1;
}

#flighta-hero .outlined-input-group > .outlined-label i {
    display: none !important;
}

#flighta-hero .outlined-input-group > .form-control,
#flighta-hero .outlined-input-group > input,
#flighta-hero .outlined-input-group > select {
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 23.7px 12px 6.3px 17px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: var(--fh-ui) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: var(--fh-value) !important;
}

#flighta-hero .outlined-input-group > .form-control::placeholder,
#flighta-hero .outlined-input-group > input::placeholder {
    color: var(--fh-value) !important;
    opacity: 1 !important;
}

#flighta-hero .outlined-input-group > select {
    padding-top: 20px !important;
    padding-bottom: 2px !important;
    padding-left: 13px !important;
    cursor: pointer;
}

/* Calendar icon on date fields — these are native date inputs, so restyle the browser's own
   picker indicator (design: 20 × 22, 17.5px from the right edge) instead of adding a second icon */
#flighta-hero input[type="date"],
#flighta-hero input[id^="departure_date_"],
#flighta-hero input[id^="arrival_date_"] {
    padding-right: 14px !important;
    background-image: none !important;
    cursor: pointer;
}

#flighta-hero input[type="date"]::-webkit-calendar-picker-indicator {
    width: 20px;
    height: 22px;
    margin: 0 2.5px 0 8px;
    padding: 0;
    opacity: 1;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2722%27 viewBox=%270 0 20 22%27 fill=%27none%27 stroke=%27%231E1E1E%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%271.3%27 y=%273.3%27 width=%2717.4%27 height=%2717.4%27 rx=%272.6%27/%3E%3Cpath d=%27M1.3 8.6h17.4M6 1.3v4M14 1.3v4%27/%3E%3C/svg%3E") center / 20px 22px no-repeat;
}

/* ── Additional options ──────────────────────────────────── */
#flighta-hero .options-dropdown-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: var(--fh-ui) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--fh-maroon) !important;
    cursor: pointer;
}

#flighta-hero .options-dropdown-btn span,
#flighta-hero .options-dropdown-btn i {
    color: var(--fh-maroon) !important;
    font-size: 13px !important;
}

#flighta-hero .flow_input {
    display: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
    gap: var(--fh-gap) !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#flighta-hero .flow_input.show {
    display: flex !important;
}

#flighta-hero .flow_input > .flow-field-item {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 var(--fh-field-w) !important;
    width: var(--fh-field-w) !important;
    min-width: 0 !important;
    max-width: var(--fh-field-w) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#flighta-hero .flow_input > .flow-field-item.passengers {
    flex-basis: calc(var(--fh-field-w) + var(--fh-field-w) / 2) !important;
    width: auto !important;
    max-width: none !important;
}

#flighta-hero .flow_input > br {
    display: none;
}

#flighta-hero .flow_input .counter_section {
    width: 100% !important;
    margin: 0 !important;
}

#flighta-hero .flow_input .passenger-dropdown-toggle {
    min-width: 0 !important;
    cursor: pointer !important;
}

/* ── Search button ───────────────────────────────────────── */
#flighta-hero .row.nav-select {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 3.5px !important;
}

#flighta-hero .row.nav-select > [class*="col"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

#flighta-hero .search_btn,
#flighta-hero .search-form .search_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    min-width: 153.5px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--fh-maroon) !important;
    box-shadow: none !important;
    font-family: var(--fh-ui) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #FFFFFF !important;
    transform: none !important;
    transition: background 0.15s ease !important;
}

#flighta-hero .search_btn:hover,
#flighta-hero .search_btn:focus {
    background: var(--fh-maroon-dark) !important;
    color: #FFFFFF !important;
    transform: none !important;
    box-shadow: none !important;
}

#flighta-hero .search_btn i {
    margin: 0 !important;
    font-size: 12px !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1199px) {
    #flighta-hero {
        --fh-field-w: 170px;
    }

    #flighta-hero .search-form .card-body {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    #flighta-hero .route_row > .row > [class*="col"],
    #flighta-hero .flow_input > .flow-field-item {
        flex: 1 1 var(--fh-field-w) !important;
        width: auto !important;
        max-width: none !important;
    }
}

@media (max-width: 767px) {
    .b2c-flighta #flighta-hero,
    #flighta-hero {
        min-height: 0 !important;
        padding: 36px 16px 40px !important;
    }

    #flighta-hero .banner_overlay {
        background: linear-gradient(180deg,
            rgba(61, 15, 28, 0.933) 0%,
            rgba(79, 22, 36, 0.80) 50%,
            rgba(37, 10, 17, 0.70) 100%) !important;
    }

    #flighta-hero .flighta-hero__kicker {
        font-size: 12px;
        letter-spacing: 1.1px;
    }

    #flighta-hero .banner_content h1.flighta-hero__title {
        margin-top: 6px !important;
        font-size: 34px !important;
        line-height: 42px !important;
    }

    #flighta-hero .flighta-hero__lead {
        margin-top: 12px;
        font-size: 15px;
        line-height: 23px;
    }

    #flighta-hero .flighta-hero__card {
        margin-top: 24px;
        border-radius: 14px;
    }

    #flighta-hero .flighta-hero__services {
        overflow-x: auto;
        scrollbar-width: none;
    }

    #flighta-hero .flighta-hero__services::-webkit-scrollbar {
        display: none;
    }

    #flighta-hero .flighta-hero__service {
        padding: 0 14px;
        font-size: 14px;
    }

    #flighta-hero .flighta-hero__service.is-active {
        padding: 0 14px;
        border-top-left-radius: 14px;
    }

    #flighta-hero .search-form .card-body {
        padding: 16px !important;
    }

    #flighta-hero .search-form ul.nav.tab-nav {
        gap: 16px !important;
        margin-bottom: 14px !important;
    }

    /* Two fields per row, full-width swap/"More options"/button */
    #flighta-hero .route_row > .row > [class*="col"],
    #flighta-hero .flow_input > .flow-field-item,
    #flighta-hero .flow_input > .flow-field-item.passengers {
        flex: 1 1 calc(50% - var(--fh-gap)) !important;
        width: auto !important;
        max-width: none !important;
    }

    #flighta-hero .route_row > .row > .col-auto:has(> .ex_icon) {
        display: none !important;
    }

    #flighta-hero .route_row .route-swap-icon-mobile {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        right: calc(var(--fh-gap) / -2) !important;
        width: 26px !important;
        height: 26px !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translate(50%, -50%) !important;
        border: 1px solid var(--fh-border) !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        color: var(--fh-maroon) !important;
        font-size: 11px !important;
        z-index: 3;
    }

    #flighta-hero .route_row > .row > .col-lg-auto.col-md-12,
    #flighta-hero .route_row .more-options-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    #flighta-hero .flow_input > .flow-field-item.passengers {
        flex-basis: 100% !important;
    }

    /* More Options: Departure Time + Class side by side; Bags and the checkboxes get their own row */
    #flighta-hero .more-options-section > .d-flex {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    #flighta-hero .more-options-section > .d-flex > .outlined-input-group {
        flex: 1 1 calc(50% - var(--fh-gap) / 2) !important;
        width: auto !important;
        min-width: 0 !important;
    }

    #flighta-hero .more-options-section > .d-flex > .outlined-input-group:has(.zf-bag-control),
    #flighta-hero .more-options-section > .d-flex > .d-flex {
        flex-basis: 100% !important;
    }

    #flighta-hero .more-options-section .outlined-input-group > .select2-container {
        max-width: calc(100% - 20px) !important;
    }

    #flighta-hero .row.nav-select > [class*="col"],
    #flighta-hero .search_btn,
    #flighta-hero .search-form .search_btn {
        width: 100% !important;
    }

    #flighta-hero .search_btn,
    #flighta-hero .search-form .search_btn {
        height: 46px !important;
    }
}

/* ── Contact shortcuts (Figma: 47px white circles, 16px apart, 22.5px from the right edge,
      first one 441px from the top of the hero). Absolute, so they scroll away with the hero. ── */
#flighta-hero .flighta-fab {
    position: absolute;
    top: 441px;
    right: 22.5px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#flighta-hero .flighta-fab .flighta-fab__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #5C1A2A;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#flighta-hero .flighta-fab .flighta-fab__btn:hover,
#flighta-hero .flighta-fab .flighta-fab__btn:focus {
    color: #5C1A2A;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
    text-decoration: none;
}

#flighta-hero .flighta-fab .flighta-fab__btn svg {
    display: block;
    width: 25px;
    height: 25px;
}

/* WhatsApp mark: green speech bubble with a white handset */
#flighta-hero .flighta-fab .flighta-fab__wa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: linear-gradient(180deg, #5FFC7B 0%, #28D146 100%);
    color: #FFFFFF;
    font-size: 13px;
}

#flighta-hero .flighta-fab .flighta-fab__wa::after {
    content: "";
    position: absolute;
    left: -2px;
    bottom: -2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 0 9px;
    border-color: transparent transparent transparent #28D146;
    transform: rotate(8deg);
}

#flighta-hero .flighta-fab .flighta-fab__wa i {
    position: relative;
    z-index: 1;
    transform: scaleX(-1);
}

@media (max-width: 767px) {
    #flighta-hero .flighta-fab {
        top: 36px;
        bottom: auto;
        right: 14px;
        gap: 12px;
    }

    #flighta-hero .flighta-fab .flighta-fab__btn {
        width: 44px;
        height: 44px;
    }
}

/* ── Services bar (Figma: 1440 × 126.5, 9 equal items across 1200px, 8px apart) ──
   Only Flights is live; the others are static placeholders until those services exist. */
#flighta-services {
    background: #FFFFFF;
    border-bottom: 1px solid #F3F4F6;
    padding: 20px 24px 20.5px;
    position: relative;
    z-index: 2;
}

#flighta-services .flighta-services__inner {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
}

#flighta-services .flighta-services__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 85px;
    padding-top: 15.5px;
    border-radius: 12px;
    color: #6B7280;
    text-decoration: none;
    cursor: default;
    user-select: none;
}

#flighta-services .flighta-services__item.is-active {
    background: #FDF0E8;
    color: #5C1A2A;
    cursor: pointer;
}

#flighta-services a.flighta-services__item:hover,
#flighta-services a.flighta-services__item:focus {
    color: #5C1A2A;
    text-decoration: none;
}

#flighta-services .flighta-services__icon {
    display: block;
    height: 24px;
    font-size: 23px;
    line-height: 24px;
}

#flighta-services .flighta-services__label {
    display: block;
    margin-top: 9.7px;
    font-family: "Titillium Web", "Cairo", "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

#flighta-services .flighta-services__item.is-active .flighta-services__label::after {
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    margin: 5.8px auto 0;
    border-radius: 2px;
    background: #E8820C;
}

/* Narrower screens: keep the items full size and let the bar scroll sideways */
@media (max-width: 1199px) {
    #flighta-services {
        padding-left: 0;
        padding-right: 0;
    }

    #flighta-services .flighta-services__inner {
        display: flex;
        gap: 8px;
        max-width: none;
        padding: 0 24px;
        scroll-padding-inline: 24px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    #flighta-services .flighta-services__inner::-webkit-scrollbar {
        display: none;
    }

    #flighta-services .flighta-services__item {
        flex: 0 0 112px;
        scroll-snap-align: start;
    }
}

@media (max-width: 767px) {
    #flighta-services {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    #flighta-services .flighta-services__inner {
        padding: 0 16px;
        scroll-padding-inline: 16px;
        gap: 6px;
    }

    #flighta-services .flighta-services__item {
        flex-basis: 92px;
        height: 76px;
        padding-top: 12px;
    }

    #flighta-services .flighta-services__label {
        margin-top: 8px;
    }
}

/* results banner: shortcuts sit at the lower right of the photo */
#flighta-hero.flighta-hero--results .flighta-fab {
    top: auto;
    bottom: 54px;
}

@media (max-width: 767px) {
    #flighta-hero.flighta-hero--results {
        min-height: 0 !important;
        padding: 76px 16px 32px !important;
    }

    #flighta-hero.flighta-hero--results .flighta-fab {
        top: 14px;
        bottom: auto;
        flex-direction: row;
    }
}

/* Airport / airline suggestions (jQuery UI, appended to <body>).
   Without a max-height the list grows taller than the screen and `collision: "fit"`
   (scripts.js) shoves it away from the field — Zaflight's own style caps it the same way.
   The menu is a child of <body>, not of the hero, so there is no #flighta-hero to scope it with.
   `.b2c-flighta` (set on <html> by b2c/head.blade.php) stands in for that: this sheet is now
   loaded by the agency portal's hotel pages too, and Zaflight has its own menu styling — these
   rules must not reach it. The B2B flavour lives in public/b2b/css/b2b_hotels.css. */
.b2c-flighta .ui-autocomplete.ui-menu {
    max-height: 320px;
    max-width: calc(100vw - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
    font-family: "Heebo", "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    z-index: 9999 !important;
}

.b2c-flighta .ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper {
    padding: 8px 14px;
    margin: 0;
    border: 0 !important;
    color: #314158;
}

.b2c-flighta .ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    margin: 0;
    background: #FDF0E8 !important;
    color: #5C1A2A !important;
}

/* Hotel destination suggestions: a City / Hotel tag before each name. */
.ui-autocomplete.ui-menu .fh-dest-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ui-autocomplete.ui-menu .fh-dest-option__tag {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ui-autocomplete.ui-menu .fh-dest-option__tag--city {
    background: #FDF0E8;
    color: #5C1A2A;
}

.ui-autocomplete.ui-menu .fh-dest-option__tag--hotel {
    background: #EEF2F7;
    color: #314158;
}

.ui-autocomplete.ui-menu .fh-dest-option__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#flighta-services .flighta-services__item--link {
    cursor: pointer;
}

#flighta-services .flighta-services__item--link:hover,
#flighta-services .flighta-services__item--link:focus {
    background: #FDF0E8;
    color: #5C1A2A;
    text-decoration: none;
}

/* selectable service tabs / bar items are <button>s — reset the browser look */
#flighta-hero button.flighta-hero__service,
#flighta-services button.flighta-services__item {
    margin: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background-color: transparent;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}

#flighta-hero button.flighta-hero__service {
    border-radius: 0;
    margin-bottom: -1px;
}

#flighta-hero button.flighta-hero__service.is-active {
    border-top-left-radius: 0;
}

#flighta-hero button.flighta-hero__service:first-child.is-active {
    border-top-left-radius: 18px;
}

#flighta-hero button.flighta-hero__service:hover:not(.is-active) {
    color: var(--fh-maroon);
}

#flighta-services button.flighta-services__item {
    border-bottom: 0;
    width: 100%;
}

#flighta-services button.flighta-services__item.is-active {
    background: #FDF0E8;
    color: #5C1A2A;
}

#flighta-services button.flighta-services__item:hover:not(.is-active) {
    color: #5C1A2A;
}

/* only the selected item shows the orange underline */
#flighta-services .flighta-services__item:not(.is-active) .flighta-services__label::after {
    display: none !important;
}

/* ── Hotels tab: static hotel search form (Figma "Hotels" search card) ── */
#flighta-hero .flighta-hero__card.is-hotels .flighta-hero__form { display: none !important; }
#flighta-hero .fh-hotel-form { padding: 36px 48px 41px 47.5px; font-family: "Titillium Web", "Cairo", "Segoe UI", sans-serif; }
#flighta-hero .fh-hotel-form[hidden] { display: none !important; }
#flighta-hero .fh-hotel-form *, #flighta-hero .fh-hotel-form *::before, #flighta-hero .fh-hotel-form *::after { box-sizing: border-box; }
#flighta-hero .fh-hotel-form__row { display: flex; gap: 13px; }
#flighta-hero .fh-hf { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 0 1 186px; min-width: 0; height: 52px; margin: 0; padding: 0 16px; border: 1px solid #E5E7EB; border-radius: 8px; background: #FFFFFF; font-weight: 400; cursor: pointer; }
#flighta-hero .fh-hf--dest { flex: 0 1 386px; }
#flighta-hero .fh-hf__label { display: block; font-size: 13.5px; line-height: 17px; color: #6A7282; }
#flighta-hero .fh-hf input, #flighta-hero .fh-hf select { display: block; width: 100%; height: 20px; margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-family: inherit; font-size: 14.5px; font-weight: 400; line-height: 20px; color: #1E2939; }
#flighta-hero .fh-hf input::placeholder { color: #1E2939; opacity: 1; }
#flighta-hero .fh-hf input[type="date"] { position: static; padding: 0 !important; }
#flighta-hero .fh-hf input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; right: 16px; top: 50%; margin: -11px 0 0; }
#flighta-hero .fh-hf select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' stroke='%231E1E1E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") right 2px center / 14px 8px no-repeat; }
#flighta-hero .fh-hf:focus-within { border-color: #531724; }
#flighta-hero .fh-hotel-form__actions { display: flex; justify-content: flex-end; margin-top: 17px; }
#flighta-hero .fh-hotel-form__btn, #flighta-hero .fh-hotel-form__btn:hover, #flighta-hero .fh-hotel-form__btn:focus { min-width: 153.5px; height: 40px; margin: 0 !important; padding: 0 24px; border: 0; border-radius: 12px; background: var(--fh-maroon, #5C1A2A) !important; box-shadow: none; font-family: inherit; font-size: 14px; font-weight: 700; color: #FFFFFF !important; cursor: pointer; }
#flighta-hero .fh-hotel-form__btn:hover { background: var(--fh-maroon-dark, #43101C) !important; }

@media (max-width: 991px) {
    #flighta-hero .fh-hotel-form { padding: 24px; }
    #flighta-hero .fh-hotel-form__row { flex-wrap: wrap; }
    #flighta-hero .fh-hf--dest { flex: 1 1 100%; }
    #flighta-hero .fh-hf { flex: 1 1 calc(33.333% - 9px); }
}

/* phone — same field style as the mobile search card export */
@media (max-width: 767px) {
    #flighta-hero .fh-hotel-form { padding: 12px 12px 14px; }
    #flighta-hero .fh-hotel-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #flighta-hero .fh-hf, #flighta-hero .fh-hf--dest { height: 41.5px; padding: 0 16px; border-radius: 10px; }
    #flighta-hero .fh-hf--dest, #flighta-hero .fh-hf--select { grid-column: 1 / -1; }
    #flighta-hero .fh-hf__label { font-size: 11px; line-height: 14px; color: #8A8F98; }
    #flighta-hero .fh-hf input, #flighta-hero .fh-hf select { height: 18px; margin-top: 1px; font-size: 13px; line-height: 18px; }
    #flighta-hero .fh-hf input[type="date"]::-webkit-calendar-picker-indicator { right: 12px; }
    #flighta-hero .fh-hotel-form__actions { margin-top: 9px; }
    #flighta-hero .fh-hotel-form__btn, #flighta-hero .fh-hotel-form__btn:hover, #flighta-hero .fh-hotel-form__btn:focus { width: 100%; height: 40px; border-radius: 14px; }
}

/* hotel date fields: text inputs + flatpickr, calendar icon drawn on the field */
#flighta-hero .fh-hf--date { padding-right: 50px; }
#flighta-hero .fh-hf--date::after { content: ""; position: absolute; right: 16px; top: 50%; width: 20px; height: 22px; margin-top: -11px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2722%27 viewBox=%270 0 20 22%27 fill=%27none%27 stroke=%27%231E1E1E%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%271.3%27 y=%273.3%27 width=%2717.4%27 height=%2717.4%27 rx=%272.6%27/%3E%3Cpath d=%27M1.3 8.6h17.4M6 1.3v4M14 1.3v4%27/%3E%3C/svg%3E") center / 20px 22px no-repeat; }
#flighta-hero .fh-hf input.fh-hf__date { cursor: pointer; }
@media (max-width: 767px) {
    #flighta-hero .fh-hf--date { padding-right: 40px; }
    #flighta-hero .fh-hf--date::after { right: 12px; width: 18px; height: 20px; margin-top: -10px; background-size: 18px 20px; }
}

/* flatpickr calendar, site theme (maroon selection, orange today) */
.flatpickr-calendar.fh-cal { padding: 12px 0 8px; border: 1px solid #F0E6E8; border-radius: 14px; background: #FFFFFF; box-shadow: 0 18px 40px rgba(83, 23, 36, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05); font-family: "Titillium Web", "Cairo", "Segoe UI", sans-serif; }
.flatpickr-calendar.fh-cal::before, .flatpickr-calendar.fh-cal::after { display: none; }
.fh-cal .flatpickr-months { align-items: center; margin-bottom: 8px; }
.fh-cal .flatpickr-months .flatpickr-month { height: 34px; color: #1E2939; fill: #1E2939; }
.fh-cal .flatpickr-current-month { left: 0; width: 100%; padding: 6px 0 0; font-size: 15px; font-weight: 700; color: #1E2939; }
.fh-cal .flatpickr-current-month .cur-month { margin-left: 0; font-weight: 700; }
.fh-cal .flatpickr-current-month input.cur-year { font-weight: 700; }
.fh-cal .flatpickr-months .flatpickr-prev-month, .fh-cal .flatpickr-months .flatpickr-next-month { top: 14px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; color: #531724; transition: background 0.15s ease; }
.fh-cal .flatpickr-months .flatpickr-prev-month { left: 14px; }
.fh-cal .flatpickr-months .flatpickr-next-month { right: 14px; }
.fh-cal .flatpickr-months .flatpickr-prev-month:hover, .fh-cal .flatpickr-months .flatpickr-next-month:hover { background: #F5EEF0; color: #531724; }
.fh-cal .flatpickr-months .flatpickr-prev-month svg, .fh-cal .flatpickr-months .flatpickr-next-month svg { width: 16px; height: 16px; fill: none; }
.fh-cal .flatpickr-months .flatpickr-disabled { opacity: 0.3; }
.fh-cal .flatpickr-weekdays { height: 30px; }
.fh-cal span.flatpickr-weekday { font-size: 12px; font-weight: 600; color: #99A1AF; }
.fh-cal .flatpickr-day { height: 38px; margin: 1px 0; border: 1px solid transparent; border-radius: 10px; font-size: 14px; line-height: 36px; color: #1E2939; }
.fh-cal .flatpickr-day:hover, .fh-cal .flatpickr-day:focus { border-color: #F5EEF0; background: #F5EEF0; color: #531724; }
.fh-cal .flatpickr-day.today { border-color: #F3AD59; color: #E8820C; font-weight: 700; }
.fh-cal .flatpickr-day.today:hover { background: #FEF5EA; border-color: #F3AD59; color: #E8820C; }
.fh-cal .flatpickr-day.selected, .fh-cal .flatpickr-day.selected:hover, .fh-cal .flatpickr-day.selected:focus { border-color: #531724; background: #531724; color: #FFFFFF; font-weight: 700; box-shadow: none; }
.fh-cal .flatpickr-day.prevMonthDay, .fh-cal .flatpickr-day.nextMonthDay { color: #D1D5DC; }
.fh-cal .flatpickr-day.flatpickr-disabled, .fh-cal .flatpickr-day.flatpickr-disabled:hover { border-color: transparent; background: none; color: #D1D5DC; cursor: not-allowed; }
.flatpickr-calendar.fh-cal { box-sizing: content-box; }
.fh-cal .flatpickr-months .flatpickr-prev-month { left: 10px; }
.fh-cal .flatpickr-months .flatpickr-next-month { right: 10px; }
.fh-cal .flatpickr-months .flatpickr-prev-month, .fh-cal .flatpickr-months .flatpickr-next-month { top: 12px; }

/* phone: the tab row scrolls sideways, so keep the active underline inside it (it was clipped) */
@media (max-width: 767px) {
    #flighta-hero .flighta-hero__service, #flighta-hero button.flighta-hero__service { margin-bottom: 0; }
}
.flatpickr-calendar.fh-cal { width: 308px !important; max-width: none !important; }
.fh-cal .flatpickr-innerContainer, .fh-cal .flatpickr-rContainer { display: block; width: 308px !important; }
.fh-cal .flatpickr-weekdays, .fh-cal .flatpickr-days { width: 308px !important; }
.fh-cal .dayContainer { width: 308px !important; min-width: 308px !important; max-width: 308px !important; padding: 0 6px; }
.fh-cal .flatpickr-weekdaycontainer { padding: 0 6px; }

/* ── hotel form v2: two rows (+ Residence, Currency, Rooms & Guests) ── */
#flighta-hero .fh-hotel-form__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
#flighta-hero .fh-hotel-form__row--2 { margin-top: 13px; }
#flighta-hero .fh-hf, #flighta-hero .fh-hf--dest { flex: none; }
#flighta-hero .fh-hf--dest { grid-column: span 2; }
#flighta-hero .fh-hotel-form__row--2 .fh-hotel-form__actions { grid-column: span 2; align-items: center; margin-top: 0; }

/* Rooms & Guests toggle (a button styled like the other fields) */
#flighta-hero button.fh-hf--guests { width: 100%; padding-right: 40px; border: 1px solid #E5E7EB !important; background: #FFFFFF !important; box-shadow: none !important; text-align: left; font-family: inherit; color: inherit; margin: 0 !important; }
#flighta-hero button.fh-hf--guests::after { content: ""; position: absolute; right: 16px; top: 50%; width: 14px; height: 8px; margin-top: -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' stroke='%231E1E1E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") center / 14px 8px no-repeat; transition: transform 0.15s ease; }
#flighta-hero button.fh-hf--guests.is-open { border-color: #531724 !important; }
#flighta-hero button.fh-hf--guests.is-open::after { transform: rotate(180deg); }
#flighta-hero .fh-hf__value { display: block; overflow: hidden; margin-top: 2px; font-size: 14.5px; font-weight: 600; line-height: 20px; color: #1E2939; white-space: nowrap; text-overflow: ellipsis; }

/* rooms panel */
#flighta-hero .fh-rooms { margin-top: 16px; padding: 6px 16px 14px; border: 1px solid #F0E6E8; border-radius: 12px; background: #FFFCFA; }
#flighta-hero .fh-rooms[hidden] { display: none !important; }
#flighta-hero .fh-room { display: flex; align-items: center; gap: 28px; padding: 12px 0; border-bottom: 1px solid #F0E6E8; }
#flighta-hero .fh-room__name { display: flex; align-items: center; gap: 8px; flex: 0 0 150px; font-size: 15px; font-weight: 700; color: #531724; }
#flighta-hero .fh-room__name svg { color: #531724; }
#flighta-hero .fh-room__remove, #flighta-hero .fh-room__remove:hover, #flighta-hero .fh-room__remove:focus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 0 0 4px !important; padding: 0; border: 0; border-radius: 50%; background: #FCE8EB !important; box-shadow: none; font-size: 16px; line-height: 1; color: #B4233C !important; cursor: pointer; }
#flighta-hero .fh-room__remove:hover { background: #F8D3D9 !important; }
#flighta-hero .fh-room__count { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #4A5565; }
#flighta-hero .fh-stepper { display: inline-flex; align-items: center; gap: 6px; }
#flighta-hero .fh-stepper button, #flighta-hero .fh-stepper button:hover, #flighta-hero .fh-stepper button:focus { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 !important; padding: 0; border: 1px solid #E5E7EB; border-radius: 50%; background: #FFFFFF !important; box-shadow: none; font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1; color: #531724 !important; cursor: pointer; }
#flighta-hero .fh-stepper button:hover:not(:disabled) { border-color: #531724; background: #F5EEF0 !important; }
#flighta-hero .fh-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
#flighta-hero .fh-stepper output { min-width: 22px; font-size: 15px; font-weight: 700; text-align: center; color: #1E2939; }
#flighta-hero .fh-room { flex-wrap: wrap; }
#flighta-hero .fh-room__ages { display: flex; flex-wrap: wrap; gap: 10px 14px; flex: 1 1 100%; padding-left: 158px; }
#flighta-hero .fh-room__age { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #4A5565; }
#flighta-hero .fh-room__age select { height: 32px; padding: 0 8px; border: 1px solid #E5E7EB; border-radius: 8px; background: #FFFFFF; font-family: inherit; font-size: 13.5px; color: #1E2939; }
#flighta-hero .fh-room__age select:invalid { border-color: #D9A0A8; }
@media (max-width: 767px) {
    #flighta-hero .fh-room__ages { padding-left: 0; }
}
#flighta-hero .fh-rooms__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
#flighta-hero .fh-rooms__add, #flighta-hero .fh-rooms__add:hover, #flighta-hero .fh-rooms__add:focus { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0 !important; padding: 0 16px; border: 1px dashed #531724; border-radius: 10px; background: transparent !important; box-shadow: none; font-family: inherit; font-size: 14px; font-weight: 700; color: #531724 !important; cursor: pointer; }
#flighta-hero .fh-rooms__add:hover:not(:disabled) { background: #F5EEF0 !important; }
#flighta-hero .fh-rooms__add:disabled { opacity: 0.4; cursor: not-allowed; }
#flighta-hero .fh-rooms__add span { font-size: 18px; line-height: 1; }
#flighta-hero .fh-rooms__done, #flighta-hero .fh-rooms__done:hover, #flighta-hero .fh-rooms__done:focus { height: 36px; margin: 0 !important; padding: 0 22px; border: 0; border-radius: 10px; background: #531724 !important; box-shadow: none; font-family: inherit; font-size: 14px; font-weight: 700; color: #FFFFFF !important; cursor: pointer; }

@media (max-width: 991px) {
    #flighta-hero .fh-hotel-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #flighta-hero .fh-hf--dest, #flighta-hero .fh-hf--guests, #flighta-hero .fh-hotel-form__row--2 .fh-hotel-form__actions { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    #flighta-hero .fh-hotel-form__row { gap: 8px; }
    #flighta-hero .fh-hotel-form__row--2 { margin-top: 8px; }
    #flighta-hero .fh-hf--select { grid-column: auto; }
    #flighta-hero .fh-hf--currency { grid-column: 1 / -1; }
    #flighta-hero .fh-hotel-form__row--2 .fh-hotel-form__actions { margin-top: 1px; }
    #flighta-hero button.fh-hf--guests { padding-right: 36px; border-radius: 10px; }
    #flighta-hero button.fh-hf--guests::after { right: 12px; }
    #flighta-hero .fh-hf__value { margin-top: 1px; font-size: 13px; line-height: 18px; }
    #flighta-hero .fh-rooms { margin-top: 10px; padding: 4px 12px 12px; }
    #flighta-hero .fh-room { flex-wrap: wrap; gap: 10px 18px; }
    #flighta-hero .fh-room__name { flex: 1 0 100%; font-size: 14px; }
    #flighta-hero .fh-room__count { gap: 8px; font-size: 13px; }
    #flighta-hero .fh-stepper button { width: 30px; height: 30px; }
}
#flighta-hero .fh-hf__value { font-size: 14px; font-weight: 500; }
#flighta-hero button.fh-hf--guests { padding-right: 36px; }
#flighta-hero button.fh-hf--guests::after { right: 14px; }
/* phone: open the rooms panel right under its field, before the rest of the form */
@media (max-width: 767px) {
    #flighta-hero .fh-hotel-form:not([hidden]) { display: flex; flex-direction: column; }
    #flighta-hero .fh-hotel-form__row { order: 1; }
    #flighta-hero .fh-rooms { order: 2; margin: 8px 0 0; }
    #flighta-hero .fh-hotel-form__row--2 { order: 3; }
    #flighta-hero .fh-hf__value { font-size: 13px; }
}
@media (min-width: 992px) {
    #flighta-hero .fh-hotel-form__row { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    #flighta-hero .fh-hf--dest { grid-column: span 3; }
    #flighta-hero .fh-hf--date, #flighta-hero .fh-hf--select { grid-column: span 2; }
    #flighta-hero .fh-hf--guests { grid-column: span 3; }
    #flighta-hero .fh-hotel-form__row--2 .fh-hotel-form__actions { grid-column: span 4; }
}

/* =====================================================================
   RIGHT-TO-LEFT (Arabic) corrections — appended.
   Loaded on home + flight result/details + hotels result + transport result,
   so these mirror the hero + search card on all five pages. The rules above
   are authored left-to-right with physical properties (text-align:left,
   padding-left/right, carets pinned right) which do not auto-mirror under
   dir="rtl".
   ===================================================================== */

/* ── Hero copy: mirror alignment ─────────────────────────── */
html[dir="rtl"] #flighta-hero .banner_content.flighta-hero__content,
html[dir="rtl"] #flighta-hero .banner_content h1.flighta-hero__title,
html[dir="rtl"] #flighta-hero .flighta-hero__card {
    text-align: right !important;
}
/* plaintext: each line follows its own language, so Arabic reads right-to-left
   and the English fallback keeps its comma / full-stop in the correct place
   instead of ",Your World" / ".transport…". */
html[dir="rtl"] #flighta-hero .flighta-hero__kicker,
html[dir="rtl"] #flighta-hero .flighta-hero__title,
html[dir="rtl"] #flighta-hero .flighta-hero__lead {
    unicode-bidi: plaintext;
}

/* ── Service tabs: flex already reverses the order; flip the physical padding ── */
html[dir="rtl"] #flighta-hero .flighta-hero__service {
    padding-left: 20.5px;
    padding-right: 18px;
}
html[dir="rtl"] #flighta-hero .flighta-hero__service.is-active {
    padding-left: 21px !important;
    padding-right: 17.5px !important;
}

/* ── Search form fields ──────────────────────────────────── */
html[dir="rtl"] #flighta-hero .fh-hf,
html[dir="rtl"] #flighta-hero .fh-hf__label,
html[dir="rtl"] #flighta-hero button.fh-hf--guests {
    text-align: right !important;
}
/* English placeholders / airport codes stay readable (LTR) inside the RTL field. */
html[dir="rtl"] #flighta-hero .fh-hf input,
html[dir="rtl"] #flighta-hero .fh-hf select {
    unicode-bidi: plaintext;
}
/* Select caret → left edge. */
html[dir="rtl"] #flighta-hero .fh-hf select {
    padding-right: 14px;
    padding-left: 26px;
    background-position: left 2px center;
}
/* Date field: calendar glyph + its padding → left edge. */
html[dir="rtl"] #flighta-hero .fh-hf--date { padding-right: 14px; padding-left: 50px; }
html[dir="rtl"] #flighta-hero .fh-hf--date::after { right: auto; left: 16px; }
html[dir="rtl"] #flighta-hero .fh-hf input[type="date"]::-webkit-calendar-picker-indicator { right: auto; left: 16px; }
/* Guests field: caret → left edge. */
html[dir="rtl"] #flighta-hero button.fh-hf--guests { padding-right: 14px; padding-left: 40px; }
html[dir="rtl"] #flighta-hero button.fh-hf--guests::after { right: auto; left: 16px; }
/* Rooms & guests: the child-age block reserves space on the opposite side in RTL. */
html[dir="rtl"] #flighta-hero .fh-room__ages { padding-left: 0; padding-right: 158px; }