/* Flight product: search, results, passengers, confirmation.
   Builds on hotel.css (hero, search box, summary, confirmation) and only adds what
   is specific to flights. */

/* ------------------------------------------------------------ search box */

/* Trip type as a slim radio row above the fields, the way airline sites do it:
   it reads at a glance and adds a single line to the card, not a pill bar. */
/* The row lives in the card's top padding: the card opens 10px from the edge
   instead of 24px, so it ends up the same height as the hotel and transfer
   boxes (which get 8px more top padding in hotel.css to meet it). */
.hotel-searchbox.flight-searchbox { padding-top: 9px; }
.flight-trip-toggle { display: flex; gap: 1.4rem; align-items: center; margin: 0 0 .4rem; }
.flight-trip-toggle label {
    position: relative; display: inline-flex; align-items: center; gap: .45rem; margin: 0; cursor: pointer;
    font-size: .9rem; font-weight: 600; color: var(--hotel-muted); line-height: 1;
    text-transform: none; letter-spacing: 0; /* the card's field-label rule uppercases labels */
}
.flight-trip-toggle label::before {
    content: ""; width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box;
    border: 2px solid #b9c6bf; background: #fff; transition: border .15s;
}
.flight-trip-toggle label:hover::before { border-color: var(--brand); }
.flight-trip-toggle label.active { color: var(--hotel-ink); }
.flight-trip-toggle label.active::before { border: 5px solid var(--brand); }
.flight-trip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.flight-trip-toggle input:focus-visible + * { outline: 2px solid var(--brand); }

.flight-swap {
    position: absolute; right: -14px; bottom: 7px; z-index: 5;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--hotel-line); background: #fff; color: var(--brand);
    display: flex; align-items: center; justify-content: center;
}
.flight-swap:hover { background: #f2f7f4; }
/* Stacked fields: the swap sits centred in the 29px gap between the two inputs,
   at their right edge, rather than hanging off the bottom of the first one. */
@media (max-width: 991.98px) { .flight-swap { right: 10px; bottom: -29px; transform: rotate(90deg); box-shadow: 0 2px 6px rgba(0,0,0,.12); } }

.flight-searchbox .suggest-item small { font-size: .75rem; }

/* Desktop: every field and the button on one line. Bootstrap's twelve columns
   cannot seat six boxes evenly, so the row becomes a proportional grid here;
   below 992px the col-* classes take over again. */
@media (min-width: 992px) {
    .flight-searchbox .flight-fields {
        display: grid;
        grid-template-columns: 1.45fr 1.45fr 1.25fr .95fr 1fr;   /* from, to, departure, passengers, button */
        gap: .5rem;
        align-items: end;
        margin-top: 0; /* .g-2 pulls the row up by the column padding this grid no longer has */
    }
    .flight-searchbox.is-round .flight-fields {
        grid-template-columns: 1.3fr 1.3fr .95fr .95fr .95fr 1fr; /* + return */
    }
    .flight-searchbox .flight-fields > * { width: auto; max-width: none; flex: none; padding: 0; margin: 0; }
    .flight-searchbox .flight-fields > [hidden] { display: none; }
    .flight-searchbox .flight-fields .btn-hotel-search { width: 100%; white-space: nowrap; }
}

/* --------------------------------------------------------------- filters */

.flight-filters {
    background: #fff; border: 1px solid var(--hotel-line); border-radius: 14px; padding: 0 1.1rem 1rem;
    position: sticky; top: 1rem;
}
.flight-filters-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0 .6rem; border-bottom: 1px solid #f1f3f2; }
.flight-filters-head .bx { color: var(--brand); vertical-align: -2px; }
.flight-filters-clear { background: none; border: 0; padding: 0; color: #c0392b; font-size: .8rem; font-weight: 700; }
.flight-filter-group { border: 0; margin: 0; padding: .8rem 0 .2rem; border-bottom: 1px solid #f1f3f2; }
.flight-filter-group:last-of-type { border-bottom: 0; }
.flight-filter-group legend { float: left; width: 100%; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hotel-muted); margin-bottom: .45rem; }
.flight-filter-option {
    display: flex; align-items: center; gap: .55rem; margin: 0 0 .45rem; font-size: .9rem; color: var(--hotel-ink); cursor: pointer; clear: both;
}
.flight-filter-option .form-check-input { margin: 0; flex: 0 0 auto; }
.flight-filter-option span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flight-filter-option em { font-style: normal; color: var(--hotel-muted); font-size: .78rem; margin-left: .25rem; }
.flight-filter-option small { color: var(--hotel-muted); font-size: .78rem; }

.flight-filters-close {
    border: 0; background: none; padding: 0; line-height: 1;
    font-size: 1.6rem; color: var(--hotel-muted);
}

.flight-filters-toggle {
    display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1.5px solid var(--hotel-line);
    border-radius: 999px; padding: .4rem .9rem; font-size: .88rem; font-weight: 700; color: var(--hotel-ink);
}
.flight-filters-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 .35rem;
    border-radius: 999px; background: var(--brand); color: #fff; font-size: .72rem;
}

.flight-more {
    display: block; width: 100%; margin: .25rem 0 .5rem; padding: .7rem 1rem; border-radius: 12px;
    border: 1.5px dashed #b9d3c4; background: #f5fbfd; color: var(--brand-dark); font-weight: 700; font-size: .9rem;
}
.flight-more:hover { background: #e6f2f7; border-style: solid; }

@media (max-width: 991.98px) {
    /* The panel becomes a bottom sheet under the Filters button. */
    .flight-filters {
        position: fixed; inset: auto 0 0 0; z-index: 1050; max-height: 82vh; overflow-y: auto;
        border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.18);
        transform: translateY(105%); transition: transform .25s ease;
    }
    .flight-filters.is-open { transform: none; }

    /* The sheet has the whole width of the phone; the desktop sidebar's small type was
       being read at arm's length. */
    .flight-filters { padding-bottom: 1rem; }
    .flight-filters-head h2 { font-size: 1.05rem; }
    .flight-filter-group legend { font-size: .85rem; }
    .flight-filter-option { font-size: 1rem; margin-bottom: .7rem; gap: .7rem; }
    .flight-filter-option em, .flight-filter-option small { font-size: .88rem; }
    .flight-filter-option .form-check-input { width: 1.25rem; height: 1.25rem; }
    .flight-filters-clear { font-size: .9rem; }
    body.flight-filters-open { overflow: hidden; }
    body.flight-filters-open .whatsapp-float { display: none; } /* it sat over "Clear all" */
    body.flight-filters-open::after { content: ""; position: fixed; inset: 0; background: rgba(15,42,63,.45); z-index: 1040; }
}

/* --------------------------------------------------------------- results */

/* The search box was designed to sit on a photo; on the results page it sat on
   grey and pushed the list off the screen. It folds into this bar. */
.flight-summary-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--hotel-line); border-radius: 14px; padding: .8rem 1.1rem;
}
.flight-summary-route { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.02rem; color: var(--hotel-ink); }
.flight-summary-route .bx { font-size: 1.2rem; }
.flight-summary-plane { color: var(--brand); }
.flight-summary-arrow { color: var(--brand); }
.flight-summary-divider { color: #cfd8d3; }
.flight-summary-meta { color: var(--hotel-muted); font-size: .92rem; font-weight: 500; display: inline-flex; flex-wrap: wrap; gap: .25rem 1rem; }
.flight-summary-meta > span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.flight-summary-meta .bx { font-size: 1.05rem; color: var(--brand); }
.flight-summary-edit {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    background: #fff; border: 1.5px solid #d8e8df; color: var(--brand); font-weight: 700; font-size: .9rem;
    border-radius: 999px; padding: .45rem 1rem; transition: background .15s, color .15s, border-color .15s;
}
.flight-summary-edit:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* When the box is open here it is on a light ground, so the hero's deep shadow
   would only make it float over the list again. */
.flight-search-panel .hotel-searchbox {
    border-color: var(--hotel-line);
    box-shadow: 0 4px 16px rgba(16, 42, 34, .06);
}

.flight-toolbar { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.flight-toolbar-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.flight-toggle { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; font-weight: 600; color: var(--hotel-ink); cursor: pointer; }
.flight-toggle .form-check-input { margin: 0; }
.flight-sort { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .85rem; color: var(--hotel-muted); font-weight: 600; }
.flight-sort .form-select { width: auto; font-weight: 600; color: var(--hotel-ink); border-color: var(--hotel-line); }

.flight-card {
    display: flex; align-items: stretch; gap: 1rem;
    background: #fff; border: 1px solid var(--hotel-line); border-radius: 14px;
    padding: 1rem 1.15rem; margin-bottom: .85rem;
    box-shadow: 0 2px 8px rgba(16, 42, 34, .05);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.flight-card:hover { box-shadow: 0 10px 26px rgba(16, 42, 34, .10); border-color: #cfe0d6; transform: translateY(-1px); }
.flight-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0, 114, 150,.18); }
.flight-card[hidden] { display: none; }

.flight-card-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }

.flight-airline { flex: 0 0 120px; display: flex; flex-direction: column; gap: .15rem; }
/* The logo sits over the code badge; when the image is missing it removes
   itself and the badge shows through. */
/* Airline logos are wordmarks, so the mark is a wide box rather than a square. */
.flight-airline-mark { position: relative; display: block; width: 84px; height: 40px; }
.flight-airline-code {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; background: #eef6f2;
    color: var(--brand-dark); font-weight: 800; font-size: .85rem;
}
.flight-airline-logo {
    position: absolute; inset: 0; width: 84px; height: 40px; object-fit: contain; object-position: left center;
    background: #fff; z-index: 1;
}
.flight-airline-name { font-size: .8rem; color: var(--hotel-muted); line-height: 1.2; }
.flight-chip { font-size: .7rem; background: #fff4d6; color: #8a6200; border-radius: 6px; padding: 0 .35rem; width: fit-content; }

.flight-times { flex: 1 1 280px; display: flex; align-items: center; gap: .75rem; }
.flight-time { display: flex; flex-direction: column; min-width: 58px; }
.flight-time strong { font-size: 1.25rem; color: var(--hotel-ink); line-height: 1.1; }
.flight-time span { font-size: .8rem; color: var(--hotel-muted); font-weight: 600; }

.flight-path { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 90px; }
.flight-duration, .flight-stops { font-size: .75rem; color: var(--hotel-muted); }
.flight-line { position: relative; width: 100%; height: 2px; background: #cfd8d3; }
.flight-line::after { content: ""; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #f6a609; transform: translateX(-50%); }
.flight-line.direct { background: var(--brand); }
.flight-line.direct::after { display: none; }

/* A dot at each end, where the flight leaves and lands, and on a direct flight a
   plane heading for the far end — clear of the duration and "Direct", which sit
   over and under the middle of the line. */
.flight-line::before {
    content: "";
    position: absolute;
    inset: -3px 0 auto 0;
    height: 8px;
    background:
        radial-gradient(circle, currentColor 3.5px, transparent 4px) left center / 8px 8px no-repeat,
        radial-gradient(circle, currentColor 3.5px, transparent 4px) right center / 8px 8px no-repeat;
    color: #b7c3bd;
}
.flight-line.direct::before { color: var(--brand); }
.flight-line-plane {
    position: absolute;
    left: 82%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    font-size: .95rem;
    color: var(--brand);
    background: #fff;
    padding: 0 .2rem;
}

.flight-meta { flex: 1 1 100%; font-size: .78rem; color: var(--hotel-muted); }

.flight-card-price {
    flex: 0 0 160px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    border-left: 1px dashed var(--hotel-line); padding-left: 1rem; text-align: right;
}
.flight-card-price .hotel-price { font-size: 1.45rem; }
.flight-card-price .btn { margin-top: .5rem; min-width: 110px; padding: .45rem 1rem; font-size: .85rem; letter-spacing: .02em; }
.flight-card.is-selected .flight-pick { background: var(--brand); color: #fff; }

@media (max-width: 575.98px) {
    .flight-card { flex-direction: column; gap: .5rem; }
    /* flex-basis 150px is the column's width on desktop; once the card stacks it
       became a 150px-tall price row with the price floating in empty space. */
    .flight-card-price { flex: 0 0 auto; border-left: 0; border-top: 1px dashed var(--hotel-line); padding: .6rem 0 0; flex-direction: row; justify-content: space-between; align-items: center; gap: .5rem; }
    .flight-card-price .btn { margin-top: 0; }
    .flight-airline { flex-basis: 100%; flex-direction: row; align-items: center; gap: .5rem; }
}

.flight-select-bar {
    position: sticky; bottom: 0; z-index: 20; margin: 1rem calc(50% - 50vw) 0;
    background: #fff; border-top: 1px solid var(--hotel-line); box-shadow: 0 -6px 18px rgba(0,0,0,.06); padding: .7rem 0;
}

/* ------------------------------------------------------------ passengers */

.flight-offer {
    position: relative; display: flex; flex-direction: column; gap: .55rem;
    border: 1.5px solid var(--hotel-line); border-top-width: 4px; border-radius: 12px;
    padding: .8rem .95rem .85rem; cursor: pointer; height: 100%; background: #fff;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-weight: 400; /* the card is a <label>; the form's bold-label rule must not reach the text inside */
}
.flight-offer-head { display: flex; flex-direction: column; gap: .15rem; padding-right: 2rem; }
.flight-offer-name { font-size: 1.02rem; font-weight: 700; color: var(--hotel-ink); }
.flight-offer-refund { font-size: .78rem; font-weight: 600; color: var(--brand-dark); display: inline-flex; align-items: center; gap: .25rem; }
.flight-offer-refund.is-no { color: #b23b3b; }
/* The groups tile two-up inside a card, so the right half is not left empty. */
.flight-offer-groups { display: flex; flex-direction: column; gap: 1.1rem; }
.flight-offer-col { display: contents; }
@media (min-width: 576px) {
    .flight-offer-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; align-items: start; }
    .flight-offer-col { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
}
.flight-offer-group { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.flight-offer-line.is-no::before { content: "\2715"; color: #b23b3b; font-size: .8em; top: .1em; }
.flight-offer-line.is-no { color: var(--hotel-muted); }
.flight-offer-group-title { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--hotel-muted); display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .15rem; }
.flight-offer-group-title .bx { font-size: .95rem; color: var(--brand); }
.flight-offer-line { font-size: .86rem; font-weight: 400; color: #2b3532; line-height: 1.45; padding-left: 1.3rem; position: relative; }
.flight-offer-line::before { content: "\2713"; position: absolute; left: .15rem; top: .05em; color: var(--brand); font-weight: 700; font-size: .95em; }
.flight-offer-line.is-fee::before { content: "\20AC"; content: "$"; color: #b58900; }
.flight-offer-line small { display: inline-block; margin-left: .35rem; font-size: .7rem; font-weight: 600; color: #8a6200; background: #fff4d6; border-radius: 5px; padding: 0 .35rem; vertical-align: 1px; }
.flight-offer-price { margin-top: auto; padding-top: .55rem; border-top: 1px dashed var(--hotel-line); display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.flight-offer-price strong { font-size: 1.15rem; color: var(--brand-dark); margin-left: auto; }
.flight-offer-price small { font-size: .78rem; color: var(--hotel-muted); }
.flight-offer:hover { border-color: #9fc9b3; }
.flight-offer input { position: absolute; opacity: 0; pointer-events: none; }
/* The tick sits where a radio would; it is the only cue a guest has that a card is picked. */
.flight-offer::after {
    content: ""; position: absolute; top: .7rem; right: .75rem; width: 20px; height: 20px;
    border-radius: 50%; border: 1.5px solid #c9d3cd; background: #fff;
}
.flight-offer.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 114, 150,.16); background: #f4fbf7; }
.flight-offer.is-selected::after {
    border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/12px no-repeat;
}

.flight-leg { padding: .45rem 0; border-bottom: 1px solid #f1f3f2; display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; }
.flight-leg > *:not(.flight-leg-logo) { grid-column: 2; }
.flight-leg-logo { grid-row: 1 / span 2; width: 56px; height: 28px; object-fit: contain; object-position: left center; background: #fff; }
.flight-leg:last-child { border-bottom: 0; }
.flight-leg-times { font-size: .92rem; }
.flight-leg-times .bx { color: var(--brand); vertical-align: middle; }

/* The passengers box carries the cabin too ("1 adult · Economy"), and on a phone it shares
   its row with the date. Without this the cabin wrapped onto a second line and spilled out
   of the box. */
#flightPaxSummary {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    #flightPaxButton { font-size: .92rem; }
}