/* ==========================================================================
   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 12px 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: 12px;
}
.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", after "Return Date", and after "Passenger(s)". */
.flight-search__field--divider {
    border-right: 1px solid #ccc;
}
/* mainstyleS.css's legacy .engine-form .input_wrrapper .dw-form-control rule
   force-adds its own border-right to every date input regardless of which
   column it's in. Inside this component the column divider above is the
   only border-right we want, so cancel the legacy one — otherwise it sits
   1px next to the divider (after Departure Date) or draws a stray line
   where none belongs (after Return Date), rendering as a thicker/darker
   line. */
.flight-search .input_wrrapper .dw-form-control {
    border-right: 0 !important;
}

/* 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;
}

/* 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: 12px;
}
.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 6px 8px 0;
    float: none;
    text-align: right;
}
/* mainstyleS.css's .border-line rule draws a full 1px border around the
   Promo Code input (all 4 sides, !important) once it's toggled visible.
   Nationality sits flush against it with its own full border (.form-nation),
   so the two right-next-to-each-other borders double up into one thick
   line — cancel the promo input's right edge, Nationality's left edge
   already closes the box. */
.flight-search__field--promo .promocode-form input.form-control {
    border-right: 0 !important;
}
.flight-search__field--nationality {
    grid-column: 5 / 6;
}
/* Row 2's height auto-sizes to the tallest cell, which is the "+ Add promo
   code" toggle label once it wraps to 2 lines at narrower widths. The
   Nationality field's .form-group has height:100% (from the shared
   .flight-search__field rule) so it was stretching to match, making its
   bordered box visibly taller than the Search button next to it. Let it
   size to its own content instead so it stays the same height as Search. */
.flight-search__field--nationality .form-group {
    height: auto;
}
.flight-search__field--submit {
    grid-column: 6 / 8;
    margin-left: 8px;
}

/* Groups fields that should become their own bordered 2-column card on
   mobile (see the media query below). display:contents makes the wrapper
   invisible to the grid above 992px, so it doesn't disturb the column
   numbers (grid-column) the desktop rules rely on. */
.flight-search__mrow {
    display: contents;
}

@media screen and (max-width: 992px) {
    .flight-search__row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* Each mrow card below draws its own border now, so the outer row
           no longer needs one — without this reset it doubles up as a
           frame around the whole stack (visible in the gaps + corners). */
        border: 0;
        background: transparent;
    }
    .flight-search__field--divider {
        border-right: 0;
    }
    .flight-search__field--promo,
    .flight-search__field--nationality,
    .flight-search__field--submit {
        margin: 0;
    }
    .flight-search__spacer {
        display: none;
    }

    /* Each mrow becomes its own bordered 2-column row, stacked with a gap
       (from .flight-search__row's gap above) between rows. */
    .flight-search__mrow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #fff;
        border: 1px solid #ccc;
    }
    .flight-search__mrow > .flight-search__field:first-child {
        border-right: 1px solid #ccc;
    }
    /* Promo/Nationality keep their desktop grid-column (4/5, 5/6), which
       only made sense on the old 7-track row. Inside the 2-column mrow
       grid those line numbers are out of range and force extra implicit
       columns, breaking the 1fr/1fr split — reset them. */
    .flight-search__field--promo,
    .flight-search__field--nationality {
        grid-column: auto;
    }
    /* "+ Add promo code" isn't a bordered field like the others — it's a
       plain toggle label, only Nationality has its own box (.form-nation).
       So this row shouldn't get the card border/divider the other rows
       get, or it looks like two fields boxed together. */
    .flight-search__mrow--promonation {
        background: transparent;
        border: 0;
    }
    .flight-search__mrow--promonation > .flight-search__field:first-child {
        border-right: 0;
    }

    /* From/To: swap icon floats centered on the column divider instead of
       taking up a grid track, so From and To still split the row evenly. */
    .flight-search__mrow--fromto {
        position: relative;
    }
    /* The icon is only 28px tall but the row is ~45px, so the divider line
       still peeked out above/below it. The icon is the only separator this
       row needs — drop the line entirely. */
    .flight-search__mrow--fromto > .flight-search__field:first-child {
        border-right: 0;
    }
    .flight-search__mrow--fromto .flight-search__swap {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 28px;
        height: 28px;
        transform: translate(-50%, -50%);
        background: #fff;
        z-index: 2;
    }
    /* The floating swap icon straddles the column divider (14px into each
       side) — without clearance it sits on top of and hides the "To"
       label/value, which otherwise starts flush against that divider. */
    .flight-search__mrow--fromto > .flight-search__field:first-child .form-group {
        padding-right: 20px;
    }
    .flight-search__mrow--fromto > .flight-search__field--divider .form-group {
        padding-left: 20px;
    }
}