/**
 * Travellin Elementor — base styles.
 * Section 30 "Style Architecture": every widget reads from these CSS
 * variables; Elementor style controls override them per-widget via
 * `--travellin-*` selectors (see e.g. SearchFormWidget's form_background
 * control), never by writing hard-coded global CSS or `!important`.
 */
:root {
    --travellin-primary: #0866ff;
    --travellin-secondary: #102542;
    --travellin-accent: #ff7a45;
    --travellin-accent-dark: #a34825;
    --travellin-text: #1a1a1a;
    --travellin-border: #dce3ec;
    --travellin-radius: 10px;
    --travellin-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --travellin-success: #1a7f37;
    --travellin-warning: #b98900;
    --travellin-error: #b32d2e;
    --travellin-grid-columns: 3;
    --travellin-grid-gap: 20px;
    --travellin-form-bg: #ffffff;
    --travellin-light-bg: #f5f8fc;
    --travellin-input-height: 52px;
}

/**
 * Travellin Search Form UI Design Audit & Specification — exact values
 * from the reference design, scoped to .travellin-search-form only via
 * CSS custom property override. Every existing rule elsewhere in this
 * file/travellin-app.css that reads var(--travellin-primary) etc. picks
 * these up automatically for anything inside the search form, while
 * results/checkout/single-trip pages (which share the same variable
 * names) keep their own already-tested values — this redesign is
 * explicitly scoped to "Tabs and Search Form" only, not a site-wide
 * palette change.
 */
.travellin-search-form {
    --travellin-primary: #2563eb;
    --travellin-secondary: #0f172a;
    --travellin-text: #334155;
    --travellin-border: #e2e8f0;
    --travellin-muted-text: #64748b;
    --travellin-inactive-icon: #475569;
    --travellin-radius: 16px;
    --travellin-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    --travellin-input-height: 56px;
    background: var(--travellin-form-bg);
    border: 1.5px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    box-shadow: var(--travellin-shadow);
    padding: 24px;
    color: var(--travellin-text);
    font-family: 'Inter', -apple-system, 'system-ui', 'Segoe UI', Roboto, sans-serif;
}

/* Form controls (input/button/select) don't inherit font-family from
 * their ancestors by default in most browsers — each has its own
 * UA-default font stack regardless of what's set above. Without this,
 * labels/divs would correctly show Inter while every actual input/
 * button stayed on the system font — an inconsistent result. */
.travellin-search-form input,
.travellin-search-form button,
.travellin-search-form select,
.travellin-search-form textarea {
    font-family: inherit;
}

.travellin-search-form form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.travellin-fields-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

/* Design Standard v1.0 section 3: Desktop shows the search fields on a
 * single horizontal row with the Search button at the end. The trip
 * type tab strip stays on its own row above them (every real OTA —
 * Booking.com, Expedia — does this too). Previously achieved via a CSS
 * Grid trick (tabs grid-column:1/-1) because flexbox couldn't give tabs
 * their own row while sharing a container with nowrap field siblings.
 * Now unnecessary — .travellin-fields-row is a separate element from
 * the tabs (template change, tabs are a sibling, not sharing this flex
 * context at all), so plain flexbox works safely here.
 *
 * Per-field flex-grow weights, not equal 1fr columns: matches the
 * reference's proportions, where the location field is visibly wider
 * than Dates/Travellers and the Search button stays compact rather than
 * stretching — equal-width columns (the previous approach) don't
 * reflect that each field's actual content needs a different amount of
 * room (a destination name vs. "2 travellers, 1 room" vs a date range). */
@media (min-width: 1025px) {
    .travellin-fields-row {
        flex-wrap: nowrap;
    }

    .travellin-fields-row > .travellin-origin,
    .travellin-fields-row > .travellin-destination {
        flex: 1.2 1 0;
        min-width: 0;
    }

    .travellin-fields-row > .travellin-dates {
        flex: 1.6 1 0;
        min-width: 0;
    }

    .travellin-fields-row > .travellin-travellers-field {
        flex: 1.3 1 0;
        min-width: 0;
    }

    .travellin-fields-row > .travellin-more-filters {
        flex: 0 0 140px;
        min-width: 0;
    }

    .travellin-fields-row > .travellin-search-submit {
        flex: 0 0 auto;
        align-self: flex-start;
        margin-top: 20px;
    }
}

.travellin-search-submit {
    background: var(--travellin-primary);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 10px 24px;
    min-height: var(--travellin-input-height, 52px);
    cursor: pointer;
    transition: background-color 220ms ease, opacity 220ms ease;
    position: relative;
}

.travellin-search-submit:hover:not(:disabled) {
    background: #0552cc;
    background: color-mix(in srgb, var(--travellin-primary) 88%, #000);
}

.travellin-search-submit:active:not(:disabled) {
    background: #043e9e;
    background: color-mix(in srgb, var(--travellin-primary) 75%, #000);
    transform: translateY(1px);
}

.travellin-search-submit:focus-visible {
    outline: 2px solid var(--travellin-primary);
    outline-offset: 2px;
}

.travellin-search-submit:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.travellin-search-submit.is-loading {
    color: transparent;
}

.travellin-search-submit.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: travellin-spin 700ms linear infinite;
}

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

.travellin-result-cards {
    display: grid;
    grid-template-columns: repeat(var(--travellin-grid-columns), 1fr);
    gap: var(--travellin-grid-gap);
}

/* Skeleton loaders (Enterprise Audit Part 2, section 1: "Implement
 * skeleton loaders instead of empty content flashes") — deliberately
 * reuses .travellin-result-cards' own grid so the skeleton occupies
 * exactly the space the real cards will, and .travellin-card-media's
 * own 200px height (assets/css/travellin-app.css) so there's no layout
 * shift when real cards replace these. */
.travellin-skeleton-card {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    overflow: hidden;
}

.travellin-skeleton-media {
    height: 200px;
    background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 37%, #eef0f3 63%);
    background-size: 400% 100%;
    animation: travellin-skeleton-shimmer 1.4s ease infinite;
}

.travellin-skeleton-line {
    height: 12px;
    margin: 12px 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 37%, #eef0f3 63%);
    background-size: 400% 100%;
    animation: travellin-skeleton-shimmer 1.4s ease infinite;
}

.travellin-skeleton-line--title {
    width: 70%;
    height: 16px;
}

.travellin-skeleton-line--stars {
    width: 40%;
}

.travellin-skeleton-line--price {
    width: 35%;
    height: 20px;
    margin-bottom: 16px;
}

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

@media (prefers-reduced-motion: reduce) {
    .travellin-skeleton-media,
    .travellin-skeleton-line {
        animation: none;
    }
}

.travellin-result-card {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    overflow: hidden;
    box-shadow: var(--travellin-shadow);
}

/* Compact single-row flight layout — matches Travelpayouts' own
   flight-price-list widget pattern (airline, route, dates, price on
   one line) rather than the full card format. */
.travellin-flight-row {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(120px, 1.2fr) minmax(110px, 1fr) 80px auto minmax(90px, auto) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    background: #fff;
    margin-bottom: 8px;
}

.travellin-flight-row-baggage {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--travellin-muted-text, #666);
    padding-top: 4px;
    border-top: 1px dashed var(--travellin-border);
}

.travellin-flight-row-airline-name {
    font-weight: 600;
    font-size: 14px;
}

.travellin-flight-row-route {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
}

.travellin-flight-row-arrow {
    color: var(--travellin-muted-text, #888);
}

.travellin-flight-row-dates {
    display: flex;
    gap: 4px;
    font-size: 13px;
    color: var(--travellin-muted-text, #666);
}

.travellin-flight-row-stops {
    font-size: 12px;
    color: var(--travellin-muted-text, #666);
    white-space: nowrap;
}

.travellin-flight-row-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.travellin-flight-row-price {
    text-align: right;
    font-size: 16px;
    white-space: nowrap;
}

.travellin-flight-row-price strong {
    font-size: 18px;
}

.travellin-flight-row-currency {
    font-size: 12px;
    color: var(--travellin-muted-text, #666);
}

.travellin-flight-row-view {
    background: var(--travellin-primary, #00A991);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.travellin-flight-row-view:hover {
    opacity: 0.9;
}

@media (max-width: 782px) {
    .travellin-flight-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "airline price"
            "route route"
            "dates stops"
            "badges view";
    }
    .travellin-flight-row-airline { grid-area: airline; }
    .travellin-flight-row-price { grid-area: price; }
    .travellin-flight-row-route { grid-area: route; }
    .travellin-flight-row-dates { grid-area: dates; }
    .travellin-flight-row-stops { grid-area: stops; }
    .travellin-flight-row-badges { grid-area: badges; }
    .travellin-flight-row-view { grid-area: view; }
}

.travellin-result-card .travellin-card-body {
    padding: 12px 16px;
}

.travellin-price-box {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 16px;
}

.travellin-price-box--sticky {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.travellin-price-box-total {
    font-size: 24px;
    font-weight: 700;
    color: var(--travellin-secondary);
}

.travellin-select-package-sticky {
    background: var(--travellin-accent-dark);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 12px 20px;
    width: 100%;
    cursor: pointer;
}

.travellin-booking-progress ol {
    display: flex;
    list-style: none;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.travellin-booking-progress--vertical ol {
    flex-direction: column;
}

.travellin-booking-progress li.is-current {
    font-weight: 700;
    color: var(--travellin-primary);
}

.travellin-editor-notice {
    margin: 8px 0;
}

@media (max-width: 768px) {
    .travellin-search-form form {
        flex-direction: column;
        align-items: stretch;
    }

    .travellin-search-submit {
        width: 100%;
    }

    .travellin-result-cards {
        grid-template-columns: 1fr;
    }

    .travellin-price-box--sticky {
        position: static;
    }
}