/* ==========================================================================
   Flight search engine ("Book a Flight" tab on the Home Page Hitit template,
   index-hitit.php + ibe-forms/book-flight.php) — CSS Grid layout.
   Row 1 (From/To/Dates/Passengers/Cabin) and row 2 (Promo/Nationality/Search)
   share the same 7-track grid (6 field columns + 1 fixed column for the
   swap icon) so both rows line up in exact pixel columns: Promo Code sits
   under Departure Date, Nationality sits under Return Date, Search spans
   the Passenger(s)+Cabin Classes columns.
   Replaces the old cssleft/cssright/css-border/no-border/linetop column
   soup — dozens of classes with duplicated !important overrides across
   several @media blocks.
   Field-level look (label position, input border/height, select style)
   still comes from the shared .form-group/.input_wrrapper/.dw-form-control/
   .custom-select/.border-line rules in mainstyleS.css — untouched.
   ========================================================================== */
.flight-search__triptype {
    display: flex;
    align-items: center;
    margin: 8px 0 14px 4px;
}

.flight-search__row {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 1fr 1fr 1fr 1fr;
    align-items: stretch;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    margin-bottom: 14px;
}
.flight-search__row--multicity {
    margin-bottom: 0;
}
.flight-search__field {
    min-width: 0;
}
.flight-search__field .form-group {
    height: 100%;
}
/* Divider lines: after "To", after "Departure Date", and after "Passenger(s)". */
.flight-search__field--divider {
    border-right: 1px solid #ccc;
}

/* Bootstrap's .dropdown defaults to display:inline-block, which shrinks the
   passenger dropdown to its text width instead of filling the column —
   leaving a dead zone on the right of the field that doesn't respond to
   clicks. Force it to fill the field so the whole column is clickable. */
.flight-search__field--pax .dropdown {
    display: block;
    width: 100%;
}
.flight-search__field--wide {
    grid-column: 4 / 8;
}
.flight-search__swap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22326e;
    font-size: 14px;
    cursor: pointer;
}
/* Swapping empty From/To fields does nothing useful - footer-homedrk.php toggles this class
   once both fields have a value. */
.flight-search__swap.disabled {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

/* Bootstrap's .dropdown-toggle::after caret renders inline right after the button's text
   ("1 Passengers ▾"), so on this full-width button it sits mid-field instead of at the field's
   right edge like a real dropdown indicator. Pin it to the right edge instead. Cabin Classes is
   a plain <select class="custom-select"> with appearance:none (mainstyleS.css) and no arrow at
   all - draw a matching one so both dropdown-style fields look consistent. */
.flight-search__field--pax .form-control.dropdown-toggle {
    position: relative;
    padding-right: 28px !important;
}
.flight-search__field--pax .form-control.dropdown-toggle::after {
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -2px;
}
#cabinClasses {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2322326e' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 28px !important;
}

/* Row 2: spacer mirrors the From+swap+To columns above, Promo Code sits
   under Departure Date, Nationality sits under Return Date, Search spans
   the Passenger(s)+Cabin Classes columns — each its own separate box. */
.flight-search__row--actions {
    background: transparent;
    border: 0;
    margin-bottom: 0;
}
.flight-search__spacer {
    grid-column: 1 / 4;
}
.flight-search__field--promo {
    grid-column: 4 / 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.flight-search__field--promo .togle {
    margin: 0 8px 8px 6px;
    float: none;
    text-align: right;
}
.flight-search__field--nationality {
    grid-column: 5 / 6;
}
.flight-search__field--submit {
    grid-column: 6 / 8;
    margin-left: 8px;
}

@media screen and (max-width: 992px) {
    /* Below this width the full 7-track grid no longer fits, but the old
       fallback (flex-direction:column) stacked every field one-per-row,
       full width, with no visual pairing - a wall of full-width inputs
       instead of the compact 2-column layout the pre-rewrite markup used.
       Re-pair fields into a 2-column grid (From+To / Departure+Return /
       Passenger+Cabin) by explicit child position instead, matching the
       prior layout. The swap icon is overlaid centered on the row rather
       than kept as its own track, since a fixed-width middle column would
       make the From/To columns uneven. */
    .flight-search__row:not(.flight-search__row--actions) {
        display: grid;
        /* minmax(0, 1fr), not plain 1fr: a bare `fr` track still has an
           automatic minimum size based on its content (the "To" placeholder
           text, the swap icon spanning both columns), which can force the
           row - and the page - wider than the viewport. minmax(0, 1fr) lets
           the column shrink below that content size instead of overflowing. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0;
        width: 100%;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field {
        padding: 10px 0;
        min-width: 0;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__swap {
        min-width: 0;
    }
    /* The date/passenger inputs carry their own permanent border-right
       (.engine-form .input_wrrapper .dw-form-control in mainstyleS.css),
       which sits at the input's own edge - now inside the field's padding
       rather than flush with it. Combined with the divider border-right
       added below on the field itself, that reads as two parallel lines.
       Suppress the input-level one so only the field-level divider shows. */
    .flight-search__row:not(.flight-search__row--actions) .flight-search__field .dw-form-control {
        border-right: 0 !important;
    }
    /* Column 1 fields get right padding, column 2 fields get left padding,
       so text doesn't touch the vertical divider drawn below. */
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(1),
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(4),
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(6) {
        padding-right: 12px;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(3),
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(5),
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(7) {
        padding-left: 12px;
    }
    /* Horizontal dividers under row 1 (From/To) and row 2 (Departure/Return). */
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(1),
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(3),
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(4),
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(5) {
        border-bottom: 1px solid #ccc;
    }
    /* Vertical divider between the two columns for rows 2-3 - row 1 uses the
       swap icon on the seam instead of a plain line. */
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(4),
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(6) {
        border-right: 1px solid #ccc;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__swap {
        grid-column: 1 / 3;
        grid-row: 1;
        justify-self: center;
        align-self: center;
        position: relative;
        z-index: 1;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(6) {
        grid-column: 1;
        grid-row: 3;
    }
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field:nth-child(7) {
        grid-column: 2;
        grid-row: 3;
    }
    /* Multi-city's Departure field has no Return field beside it - let it
       span both columns instead of following the nth-child(4) pairing above. */
    .flight-search__row:not(.flight-search__row--actions) > .flight-search__field.flight-search__field--wide {
        grid-column: 1 / 3;
        border-right: 0;
        padding-right: 0;
    }
    .flight-search__field--divider {
        border-right: 0;
    }
    .flight-search__row--actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .flight-search__field--promo,
    .flight-search__field--nationality,
    .flight-search__field--submit {
        margin: 0;
    }
    .flight-search__spacer {
        display: none;
    }
}