/* ==========================================================================
   Results page standalone search bar (rsb-*)
   --------------------------------------------------------------------------
   Deliberately independent of share/flight_search.php's #flight_form /
   .fsw-* / .plcetogo styling and flight_modify_search.css -- this component
   owns its own namespace end to end so changes here can't leak onto (or be
   fought by) the homepage search widget or other pages that still embed the
   shared component. It still reuses the *global* JS hooks that are true
   site-wide infrastructure, not page markup (airport autocomplete's
   .fromflight/.departflight/.loc_id_holder/.airport_loc bindings, the
   #OWT_adult/#OWT_child/#OWT_infant ids pax_count.js and
   manage_infant_count() hardcode, .btn-number/.pax-count-wrapper,
   .choose_airline_class/#class, and futureDatepickerMonthDisabled()) --
   those are documented, stable contracts, not the thing this is decoupling
   from.
   ========================================================================== */

.rsb-wrap {
    background: var(--momo-white);
    border-radius: var(--radius-card-lg);
    box-shadow: 0 4px 20px var(--momo-shadow);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
    position: relative;
    z-index: 20;
}

/* .splmodify (search_panel_summary.php's wrapper around this component) has
   a plain, non-!important `background: #d8e3ef` from the legacy
   theme_style.css (:13914) -- previously cancelled out by
   flight_modify_search.css's own `.splmodify { background: none !important }`,
   which only loaded because that shared component was on the page. This
   form replaces it, so that neutralizing rule needs to move here too,
   otherwise a pale blue-grey band shows behind this white card. */
.splmodify {
    background: none !important;
}

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

.rsb-trip-pill {
    margin: 0;
    padding: var(--space-1) var(--space-4);
    border-radius: 10px;
    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;
}

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

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

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

.rsb-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;
}

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

.rsb-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;
}

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

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

/* The date inputs' own raw value ("17-09-2026") and the formatted caption
   ("Thursday 17 Sep 2026") below it were both rendering at once. Keeping
   the raw dd-mm-yyyy value as the visible date (matches what's actually
   submitted) and hiding the caption instead -- it's still rendered (still
   server-pre-populated by rsb_date_caption() and still kept in sync by
   the datepicker's onClose handler) so nothing has to change there, it
   just isn't shown. */
.rsb-date-caption {
    display: none;
}

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

.rsb-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;
}

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

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

.rsb-field--pax {
    flex: 1.1 1 0;
}

.rsb-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;
}

.rsb-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;
}

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

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

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

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

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

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

.rsb-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;
}

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

.rsb-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;
}

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

.rsb-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);
}

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

.rsb-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;
}

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

.rsb-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 -- this stylesheet is registered via
   Js_Loader::$css[], which this template dumps into an early <head> slot
   regardless of when during page rendering it was pushed; theme_style.css/
   media.css/momo-design-system.css are hardcoded later in the template and
   win any equal-specificity tie without it (same reason
   momo-design-system.css itself is full of !important -- it's fighting the
   exact same load-order problem against theme_style.css). Confirmed via
   the rendered <head>'s actual <link> order, not assumed. */
.rsb-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;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap;
    opacity: 1 !important;
    box-shadow: none !important;
    transition: background .15s ease;
}

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

/* Shared bottom row (Travellers/Class + Search) -- sits under either the
   single-route fields or the multicity leg rows, never duplicated between
   the two modes. */
.rsb-fields--bottom {
    margin-top: var(--space-2);
    justify-content: flex-end;
}

.rsb-fields--bottom .rsb-field--pax {
    flex: 0 1 260px;
}

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

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

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

.rsb-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;
}

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

.rsb-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;
}

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

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

/* jQuery UI autocomplete dropdown, scoped so it doesn't inherit
   theme_style.css's generic .ui-autocomplete overrides meant for the
   homepage widget's layout. */
.rsb-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 -- it can't be scoped as a descendant of .rsb-field the
   way the autocomplete dropdown is, so this targets #ui-datepicker-div
   directly. momo-design-system.css already has *intended* branded styles
   for `.ui-datepicker` (blue header, rounded card), but theme_style.css's
   `div#ui-datepicker-div.ui-datepicker` (:13769) is an ID selector, which
   beats a plain class selector on specificity alone regardless of load
   order -- so the calendar has actually been rendering with
   theme_style.css's old flat-white/no-padding look this whole time. The
   old shared form likely had its own even-more-specific scoped overrides
   masking this; this form doesn't, which is why it became visible now.
   !important here to win regardless of specificity, matching the pattern
   already used throughout this file for the same category of conflict. */
#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;
}

@media (max-width: 991px) {
    .rsb-fields {
        flex-wrap: wrap;
    }
    .rsb-field, .rsb-field--from, .rsb-field--to, .rsb-field--pax {
        flex: 1 1 45%;
    }
    .rsb-swap {
        display: none;
    }
    .rsb-submit {
        flex: 1 1 100%;
        padding: var(--space-3);
    }
    .rsb-pax-panel {
        right: auto;
        left: 0;
        width: 100%;
    }
    .rsb-multi-row {
        flex-wrap: wrap;
    }
    .rsb-multi-row .rsb-field--from,
    .rsb-multi-row .rsb-field--to,
    .rsb-multi-row .rsb-field--depart {
        flex: 1 1 45%;
    }
    .rsb-fields--bottom {
        justify-content: stretch;
    }
    .rsb-fields--bottom .rsb-field--pax {
        flex: 1 1 100%;
    }
}