/* ==========================================================================
   flight.css — airport picker + flight results
   Extends style.css rather than replacing anything in it. Navy and gold stay
   as accents; the results list itself is deliberately plain so the price and
   the phone number are what stand out.
   Deploy to: /var/www/punjabtravel.co.uk/html/assets/css/flight.css
   ========================================================================== */

:root {
    --pt-navy: #1c3560;
    --pt-gold: #d4a836;
    --pt-ink: #1d2430;
    --pt-muted: #6b7280;
    --pt-line: #e3e7ee;
    --pt-surface: #ffffff;
    --pt-shade: #f6f7f9;
    --pt-error: #b42318;
}

/* ---------- Airport autocomplete ---------- */

.search-field {
    position: relative;
}

.airport-suggestions {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(28, 53, 96, 0.14);
    max-height: 300px;
    overflow-y: auto;
}

.airport-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.airport-suggestion.is-active,
.airport-suggestion:hover {
    background: var(--pt-shade);
}

.airport-suggestion__code {
    flex: 0 0 auto;
    min-width: 40px;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--pt-navy);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

.airport-suggestion__place {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.airport-suggestion__place strong {
    font-size: 0.9rem;
    color: var(--pt-ink);
}

.airport-suggestion__place small {
    font-size: 0.76rem;
    color: var(--pt-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Field errors ---------- */

.search-field--error input,
.search-field--error select {
    border-color: var(--pt-error) !important;
}

.search-field__error {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 3px;
    font-size: 0.74rem;
    color: var(--pt-error);
    line-height: 1.3;
}

.search-btn.is-loading {
    opacity: 0.65;
    cursor: progress;
}

/* ---------- Results page shell ---------- */

.results {
    padding: 2.5rem 0 4rem;
}

.results-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.results-head h1 {
    margin: 0.2rem 0 0;
    font-size: 1.75rem;
    color: var(--pt-navy);
}

.results-status {
    margin: 0 0 1.5rem;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    background: var(--pt-shade);
    border-left: 3px solid var(--pt-gold);
    font-size: 0.9rem;
    color: var(--pt-muted);
}

.results-status[data-state="done"] {
    border-left-color: var(--pt-navy);
    color: var(--pt-ink);
}

.results-status:empty {
    display: none;
}

/* ---------- Result card ---------- */

.results-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.result-card {
    display: grid;
    grid-template-columns: 1fr 210px;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: 10px;
    overflow: hidden;
}

.result-card__legs {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.leg-divider {
    border: 0;
    border-top: 1px dashed var(--pt-line);
    margin: 0;
}

.leg {
    display: grid;
    grid-template-columns: 90px 1fr 1.4fr 1fr;
    align-items: center;
    gap: 0.75rem;
}

.leg__airline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.leg__airline img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.leg__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pt-muted);
}

.leg__endpoint {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.leg__endpoint--end {
    text-align: right;
}

.leg__endpoint strong {
    font-size: 1.2rem;
    color: var(--pt-ink);
}

.leg__code {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pt-navy);
}

.leg__endpoint small {
    font-size: 0.74rem;
    color: var(--pt-muted);
}

.leg__path {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.leg__line {
    width: 100%;
    height: 1px;
    background: var(--pt-line);
    position: relative;
}

.leg__line::after {
    content: "";
    position: absolute;
    right: 0;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pt-gold);
}

.leg__stops,
.leg__duration {
    font-size: 0.74rem;
    color: var(--pt-muted);
}

/* ---------- Price / call column ---------- */

.result-card__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.1rem 1rem;
    background: var(--pt-shade);
    border-left: 1px solid var(--pt-line);
    text-align: center;
}

.result-card__price {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--pt-navy);
    line-height: 1.1;
}

.result-card__price-note {
    font-size: 0.7rem;
    color: var(--pt-muted);
}

.result-card__call {
    margin-top: 0.45rem;
    width: 100%;
}

.result-card__phone {
    font-size: 0.74rem;
    color: var(--pt-muted);
}

/* ---------- Load more / messages ---------- */

.results-more {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.results-message {
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--pt-shade);
    border-radius: 10px;
}

.results-message h2 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    color: var(--pt-navy);
}

.results-message p {
    margin: 0 0 1.1rem;
    color: var(--pt-muted);
}

.results-callout {
    margin-top: 2.5rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
    border: 1px solid var(--pt-line);
    border-top: 3px solid var(--pt-gold);
    border-radius: 10px;
}

.results-callout h2 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    color: var(--pt-navy);
}

.results-callout p {
    margin: 0 0 1.1rem;
    color: var(--pt-muted);
    font-size: 0.92rem;
}

/* ---------- Mobile ---------- */

@media (max-width: 780px) {
    .result-card {
        grid-template-columns: 1fr;
    }

    .result-card__action {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        text-align: left;
        border-left: 0;
        border-top: 1px solid var(--pt-line);
    }

    .result-card__price-note,
    .result-card__phone {
        display: none;
    }

    .result-card__call {
        margin-top: 0;
        width: auto;
    }

    .leg {
        grid-template-columns: 52px 1fr 1fr 1fr;
        gap: 0.5rem;
    }

    .leg__airline img {
        width: 26px;
        height: 26px;
    }

    .leg__label {
        display: none;
    }

    .leg__endpoint strong {
        font-size: 1.05rem;
    }
}

/* ---------- Trip type toggle ---------- */

/* Spans the full width of the search box above the fields. The three
   properties cover both a grid and a flex .search-box, since style.css owns
   that layout — drop whichever one doesn't apply. */
.trip-type {
    grid-column: 1 / -1;
    flex-basis: 100%;
    width: 100%;
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.35rem;
}

.trip-type__option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--pt-ink);
}

.trip-type__option input {
    accent-color: var(--pt-navy);
    margin: 0;
}

/* ---------- Disabled return date ---------- */

.search-field--disabled {
    opacity: 0.5;
}

.search-field--disabled input {
    cursor: not-allowed;
    background: var(--pt-shade);
}

/* ---------- Travellers & cabin ---------- */

.search-field--travellers {
    position: relative;
}

/* Matches the 44px the other search inputs use, so the row stays level. */
.traveller-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    height: 44px;
    padding: 0 0.75rem;
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: 6px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--pt-ink);
    text-align: left;
    cursor: pointer;
}

.traveller-toggle:focus-visible {
    outline: 2px solid var(--pt-navy);
    outline-offset: 1px;
}

.traveller-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    min-width: 270px;
    padding: 0.85rem;
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(28, 53, 96, 0.16);
}

.traveller-panel[hidden] {
    display: none;
}

.traveller-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
}

.traveller-row__label strong {
    display: block;
    font-size: 0.88rem;
    color: var(--pt-ink);
    font-weight: 600;
}

.traveller-row__label small {
    font-size: 0.74rem;
    color: var(--pt-muted);
}

.traveller-row__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.traveller-step {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--pt-line);
    border-radius: 50%;
    background: #fff;
    font-size: 1rem;
    line-height: 1;
    color: var(--pt-navy);
    cursor: pointer;
}

.traveller-step:hover:not(:disabled) {
    border-color: var(--pt-navy);
}

.traveller-step:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.traveller-count {
    min-width: 18px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.traveller-cabin {
    margin-top: 0.6rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--pt-line);
}

.traveller-cabin label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pt-muted);
}

/* Custom arrow, matching the other selects in the search box. */
.traveller-cabin select {
    width: 100%;
    height: 40px;
    padding: 0 2rem 0 0.7rem;
    border: 1px solid var(--pt-line);
    border-radius: 6px;
    background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c3560' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
    font: inherit;
    font-size: 0.88rem;
    color: var(--pt-ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.traveller-note {
    margin: 0.55rem 0 0;
    font-size: 0.74rem;
    color: var(--pt-muted);
    line-height: 1.35;
}

.traveller-note:empty {
    display: none;
}

.traveller-done {
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.5rem;
    border: 0;
    border-radius: 6px;
    background: var(--pt-navy);
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 640px) {
    .traveller-panel {
        left: auto;
        right: 0;
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Overrides for style.css
   ========================================================================== */

/* The hero clips its own overflow to contain the diagonal motif, which also
   clipped the autocomplete and traveller panels at the hero's bottom edge.
   Confining the motif to its own box means the hero no longer needs to clip. */
.hero {
    overflow: visible;
}

.hero::before {
    inset: 0;
}

/* Wider card, and more room for the travellers column — "2 Travellers,
   Premium Economy" needs noticeably more space than a plain count did. */
.search-box {
    max-width: 1280px;
    grid-template-columns: 1.05fr 1.05fr 0.8fr 0.8fr 1.3fr auto;
}

/* Grows leftward from the field's right edge so it can't spill past the
   card on a column this far right. */
.traveller-panel {
    left: auto;
    right: 0;
}

@media (max-width: 960px) {
    .search-box {
        max-width: calc(1280px - 40px);
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 720px) {

    /* One field per row. The two-column arrangement paired From/To and
     Depart/Return, which squeezed date inputs below their natural width and
     left the row edges ragged. */
    .search-box {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px;
        align-items: stretch;
    }

    .search-field:nth-of-type(5),
    .search-field--travellers,
    .search-btn {
        grid-column: auto;
    }

    .trip-type {
        width: auto;
        flex-basis: auto;
        margin-bottom: 0;
        padding-bottom: 14px;
        border-bottom: 1px solid #e7e9f0;
    }

    /* Full width now there is a whole row to sit in. */
    .search-btn {
        width: 100%;
        height: 48px;
        margin-top: 4px;
    }

    .traveller-panel {
        left: 0;
        right: 0;
    }
}

/* ==========================================================================
   Results page — full width, spinner, skeletons
   ========================================================================== */

/* The results page is often short — a handful of fares, or an error message.
   Without this the footer sits wherever the content happens to end, leaving a
   band of white below it. Scoped to the results page body class so the other
   pages keep style.css's normal flow. */
.page-results {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Flex items shrink by default; these should keep their natural height. */
.page-results>* {
    flex-shrink: 0;
}

.page-results .results {
    flex: 1 0 auto;
}

.page-results .site-footer {
    margin-top: auto;
}

/* ---------- Status bar ---------- */

.results-status {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.results-status[hidden] {
    display: none;
}

.results-spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(28, 53, 96, 0.18);
    border-top-color: var(--pt-gold);
    border-radius: 50%;
    animation: pt-spin 0.7s linear infinite;
}

/* Once the search is finished there is nothing left to wait for. */
.results-status[data-state="done"] .results-spinner {
    display: none;
}

@keyframes pt-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Skeleton cards ---------- */

.skeleton-card {
    display: grid;
    grid-template-columns: 1fr 210px;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: 10px;
    overflow: hidden;
}

.skeleton-card__legs {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.skeleton-card__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.1rem 1rem;
    background: var(--pt-shade);
    border-left: 1px solid var(--pt-line);
}

.skeleton-row {
    display: grid;
    grid-template-columns: 90px 1fr 1.4fr 1fr;
    align-items: center;
    gap: 0.75rem;
}

.skeleton-block {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg, #eceff4 25%, #f6f8fa 37%, #eceff4 63%);
    background-size: 400% 100%;
    animation: pt-shimmer 1.4s ease-in-out infinite;
}

.skeleton-block--logo {
    width: 34px;
    height: 34px;
    border-radius: 6px;
}

.skeleton-block--time {
    height: 34px;
}

.skeleton-block--path {
    height: 12px;
}

.skeleton-block--price {
    width: 80px;
    height: 26px;
}

.skeleton-block--btn {
    width: 100%;
    height: 38px;
    border-radius: 6px;
}

@keyframes pt-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* style.css already flattens animations under prefers-reduced-motion, which
   would leave both of these twitching. Stop them properly instead. */
@media (prefers-reduced-motion: reduce) {
    .results-spinner {
        animation: none;
        border-top-color: var(--pt-navy);
    }

    .skeleton-block {
        animation: none;
        background: #eceff4;
    }
}

@media (max-width: 780px) {
    .skeleton-card {
        grid-template-columns: 1fr;
    }

    .skeleton-card__action {
        flex-direction: row;
        justify-content: space-between;
        border-left: 0;
        border-top: 1px solid var(--pt-line);
    }

    .skeleton-block--btn {
        width: 110px;
    }

    .skeleton-row {
        grid-template-columns: 52px 1fr 1fr 1fr;
        gap: 0.5rem;
    }
}