/* ==========================================================================
   Homepage standalone search bar (hsb-*)
   --------------------------------------------------------------------------
   Sits inside the existing .secndblak.momo-card.momo-card--lg / #flight
   tab-pane already rendered by general/index.php -- that wrapper already
   provides the white card/radius/shadow, this only styles its own
   contents. Deliberately independent of share/flight_search.php (own
   namespace end to end), same reasoning as the results-page bar
   (flight/results_search_bar.php's rsb-* namespace): page-specific
   changes here can't leak onto or be fought by the shared file other
   (non-live) templates still embed.

   Field/button sizing, spacing and colors below are a deliberate 1:1 port
   of results_search_bar.css's rsb-* rules (same component, same look on
   both pages) -- only the outer card chrome differs, since this sits
   inside an existing .momo-card wrapper instead of providing its own.
   ========================================================================== */

.hsb-wrap {
    padding: var(--space-1) 0 0;
}

/* Travellers & Class visually sits inline with the Flights/Hotels/Bus tab
   row (general/index.php's .commonNavTabCls), above Return -- but the field
   itself has to stay physically inside #hsb_form (and inside
   div.pax_count_div specifically) or pax_count.js's shared total_pax_count()
   stops finding the adult/child/infant inputs
   ($("input.pax_count_value", "form#hsb_form div.pax_count_div"), a DOM
   descendant selector, not just "somewhere on the page"). Positioned instead
   of moved: .secndblak.momo-card--lg is the shared ancestor of both the tab
   row and this form, so anchoring here reaches the tab row visually without
   touching the DOM. */
.secndblak.momo-card--lg {
    position: relative;
}

#hsb_pax_field {
    /* position: absolute;
    top: var(--space-4);
    right: var(--space-4); */
    width: 220px;
    z-index: 5;
}

@media (max-width: 991px) {
    #hsb_pax_field {
        /* position: static; */
        width: auto;
    }
}

/* pax_count.js's global click-to-open-panel handler binds to .totlall
   site-wide (real shared JS infrastructure, kept on .hsb-pax-trigger for
   that reason -- see the file header) -- but momo-design-system.css also
   has a homepage-only ".searcharea .secndblak .totlall" rule sizing the
   OLD share/flight_search.php field boxes (grey fill, 64px min-height),
   which this element inherits purely because it happens to share that
   class. Specificity-matching override (4 classes beats that rule's 3)
   so the trigger stays a plain inline label, not a second nested box. */
.searcharea .secndblak .hsb-pax-trigger.totlall {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
}

.hsb-trip-toggle {
    display: inline-flex;
    background: var(--momo-grey-4);
    /* border-radius: var(--radius-card); */
    padding: 3px;
    margin-bottom: var(--space-3);
    gap: 2px;
    border-radius: 999px;
}

.hsb-trip-pill {
    margin: 0;
    /* padding: var(--space-1) var(--space-4); */
    border-radius: 999px;
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--momo-grey-1);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    user-select: none;
    padding: 8px 16px;
}

.hsb-trip-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.hsb-trip-pill.active {
    background: var(--momo-blue);
    color: var(--momo-white);
}

.hsb-fields {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.hsb-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--momo-grey-3);
    border-radius: var(--radius-card);
    padding: 6px var(--space-3);
    transition: border-color .15s ease;
    background: var(--momo-white);
    padding-bottom: 0px !important;
}

.hsb-field:focus-within {
    border-color: var(--momo-blue);
}

.hsb-field label {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: var(--fw-medium);
    color: var(--momo-grey-1);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.hsb-input {
    width: 100%;
    border: none !important;
    outline: none;
    padding: 0;
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--momo-blue-dark);
    background: transparent;
    cursor: pointer;
    border-bottom: none !important;
    margin: 0px !important;
}

.hsb-input::placeholder {
    color: var(--momo-grey-2);
    font-weight: var(--fw-regular);
}

.hsb-field--from,
.hsb-field--to {
    flex: 1.3 1 0;
}

.hsb-date-caption {
    display: none;
}

.hsb-field--return.disabled {
    opacity: .5;
    pointer-events: none;
}

.hsb-swap {
    flex: 0 0 auto;
    align-self: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--momo-grey-3);
    background: var(--momo-white);
    color: var(--momo-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background .15s ease, transform .2s ease;

    position: absolute;
    right: -20px;
    top: 30%;
    z-index: 1;
}

.hsb-swap:hover {
    background: var(--momo-blue-xlight);
}

.hsb-swap.spun {
    transform: rotate(180deg);
}

.hsb-fields--bottom {
    margin-top: var(--space-2);
    justify-content: flex-end;
}

/* Travellers & Class stacked directly above Return (moved out of
   .hsb-fields--bottom, which is just the submit button now) -- shares one
   slot in the row with Return instead of taking a slot of its own. */
.hsb-field-stack {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hsb-field-stack .hsb-field {
    flex: 0 0 auto;
}

.hsb-pax-trigger {
    cursor: pointer;
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--momo-blue-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    padding-right: 18px;
}

/* theme_style.css's shared .totlall::after chevron (pax_count.js's
   click-to-open indicator, used site-wide) only declares
   font-family: "Font Awesome 5 Pro" with no fallback -- that tier isn't
   actually loaded anywhere on this site, only Free is (same reason
   momo-design-system.css's own icon rules always list a Pro/Free/legacy
   fallback chain), so the glyph silently rendered as nothing. Overridden
   here rather than in the shared rule itself, which many unrelated
   pages/components also use -- also repositioned since .hsb-pax-trigger
   is now position:relative (anchors the arrow to just this line instead
   of the whole field box, which includes the label above it). */
.hsb-pax-trigger.totlall::after {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    color: var(--momo-grey-1);
    top: 50%;
    bottom: auto;
    right: 0;
    width: 16px;
    line-height: 1;
    transform: translateY(-50%);
}

.hsb-pax-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    background: var(--momo-white);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 30px var(--momo-shadow);
    padding: var(--space-4);
    z-index: 30;
}

.hsb-pax-panel.fadeinn {
    display: block;
}

.hsb-pax-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--momo-grey-3);
}

.hsb-pax-row:last-of-type {
    border-bottom: none;
}

.hsb-pax-row-label strong {
    display: block;
    font-size: 13px;
    color: var(--momo-blue-dark);
}

.hsb-pax-row-label span {
    font-size: 11px;
    color: var(--momo-grey-1);
}

.hsb-pax-stepper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hsb-pax-stepper .btn-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--momo-grey-3);
    background: var(--momo-white);
    color: var(--momo-blue);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.hsb-pax-stepper .btn-number:disabled {
    opacity: .4;
    cursor: default;
}

.hsb-pax-stepper .input-number {
    width: 22px;
    text-align: center;
    border: none;
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--momo-blue-dark);
    background: transparent;
}

.hsb-cabin-list {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--momo-grey-3);
}

.hsb-cabin-list-label {
    font-size: 11px;
    font-weight: var(--fw-medium);
    color: var(--momo-grey-1);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: var(--space-2);
}

.hsb-cabin-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hsb-cabin-options a {
    padding: 4px var(--space-3);
    border-radius: 999px;
    border: 1px solid var(--momo-grey-3);
    font-size: 12px;
    color: var(--momo-grey-1);
    cursor: pointer;
}

.hsb-cabin-options a.active {
    background: var(--momo-blue-xlight);
    border-color: var(--momo-blue);
    color: var(--momo-blue-dark);
    font-weight: var(--fw-medium);
}

.hsb-pax-done {
    margin-top: var(--space-3);
    width: 100%;
    border: none;
    border-radius: var(--radius-card);
    background: var(--momo-blue);
    color: var(--momo-white);
    padding: var(--space-2);
    font-size: 13px;
    font-weight: var(--fw-medium);
    cursor: pointer;
}

/* !important throughout -- matches results_search_bar.css's own rsb-submit
   rule (same reasoning: this stylesheet is registered via Js_Loader::$css[],
   which lands in an early <head> slot regardless of push order, while
   theme_style.css/media.css/momo-design-system.css are hardcoded later and
   win any equal-specificity tie without it). */
.hsb-submit {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2);
    border: none !important;
    border-radius: var(--radius-card) !important;
    background: var(--momo-yellow) !important;
    color: var(--momo-blue-dark) !important;
    padding: 0 var(--space-6) !important;
    min-height: 52px !important;
    min-width: 160px !important;
    /* Buttons don't inherit font-family from the page by default in most
       browsers -- without this it was rendering in the browser's default UI
       font instead of the brand font every other element on the page uses. */
    font-family: var(--font-family-base) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    white-space: nowrap;
    opacity: 1 !important;
    box-shadow: none !important;
    transition: background .15s ease;
}

.hsb-submit:hover {
    background: var(--momo-orange-70) !important;
}

.hsb-field .ui-autocomplete {
    border-radius: var(--radius-card) !important;
    box-shadow: 0 8px 30px var(--momo-shadow) !important;
    border: 1px solid var(--momo-grey-3) !important;
    padding: var(--space-2) 0 !important;
    max-height: 320px;
    overflow-y: auto;
}

/* jQuery UI's datepicker popup is a single instance jQuery appends to
   document.body -- same #ui-datepicker-div fix as results_search_bar.css
   (theme_style.css's ID selector beats momo-design-system.css's plain
   class selector regardless of load order), duplicated here rather than
   shared since this stylesheet only loads on pages that embed this
   component. */
#ui-datepicker-div.ui-datepicker {
    background: var(--momo-white) !important;
    border: 1px solid var(--momo-grey-3) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 8px 30px var(--momo-shadow) !important;
    padding: var(--space-3) !important;
    font-family: var(--font-family-base);
}

#ui-datepicker-div .ui-datepicker-header {
    background: var(--momo-blue) !important;
    color: var(--momo-white) !important;
    border-radius: var(--space-2) !important;
    border: none !important;
}

#ui-datepicker-div .ui-datepicker-title,
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    color: var(--momo-white) !important;
}

#ui-datepicker-div td .ui-state-default {
    background: var(--momo-white) !important;
    border: none !important;
    border-radius: var(--space-1);
    color: var(--momo-blue-dark);
}

#ui-datepicker-div td .ui-state-active,
#ui-datepicker-div td .ui-state-hover {
    background: var(--momo-blue) !important;
    border-color: var(--momo-blue) !important;
    color: var(--momo-white) !important;
}

#ui-datepicker-div td.ui-datepicker-today .ui-state-default {
    border: 1px solid var(--momo-blue) !important;
}

/* Multi-city legs */
.hsb-multi-fields {
    margin-bottom: var(--space-2);
}

.hsb-multi-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.hsb-multi-row .hsb-field--from,
.hsb-multi-row .hsb-field--to,
.hsb-multi-row .hsb-field--depart {
    flex: 1 1 0;
}

.hsb-multi-remove {
    flex: 0 0 auto;
    align-self: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--momo-grey-3);
    background: var(--momo-white);
    color: var(--momo-red-100);
    cursor: pointer;
}

.hsb-multi-remove:hover {
    background: var(--momo-red-30);
}

.hsb-multi-add {
    border: 1px dashed var(--momo-blue);
    background: var(--momo-white);
    color: var(--momo-blue);
    border-radius: var(--radius-card);
    padding: var(--space-2) var(--space-4);
    font-size: 13px;
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.hsb-multi-add:hover {
    background: var(--momo-blue-xlight);
}

.hsb-multi-add[disabled] {
    opacity: .4;
    cursor: default;
}

@media (max-width: 991px) {
    .hsb-fields {
        flex-wrap: wrap;
    }

    .hsb-field,
    .hsb-field--from,
    .hsb-field--to,
    .hsb-field-stack {
        flex: 1 1 45%;
    }

    .hsb-swap {
        display: none;
    }

    .hsb-submit {
        flex: 1 1 100%;
        padding: var(--space-3);
    }

    .hsb-pax-panel {
        right: auto;
        left: 0;
        width: 100%;
    }

    .hsb-multi-row {
        flex-wrap: wrap;
    }

    .hsb-multi-row .hsb-field--from,
    .hsb-multi-row .hsb-field--to,
    .hsb-multi-row .hsb-field--depart {
        flex: 1 1 45%;
    }

    .hsb-fields--bottom {
        justify-content: stretch;
    }
}


.ui-datepicker-title .ui-datepicker-month,
.ui-datepicker-year {
    color: #fff !important;
}