/* ============================================================
   JetSet Flight Search v2.7 — Premium Aviation UI
   Dark theme · Gold accent · Elegant typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:wght@300;400;500&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {

    /* Core colors */
    --jfs-black: #0a0a0c;
    --jfs-dark: #111114;
    --jfs-surface: #18181d;
    --jfs-surface-2: #202028;

    /* Gold system */
    --jfs-gold: #D5A14B;
    --jfs-gold-dark: #c0913e;
    --jfs-gold-light: #e8c97a;

    /* Borders */
    --jfs-border: rgba(255,255,255,0.08);
    --jfs-border-gold: rgba(213,161,75,0.4);
    --jfs-border-gold-hover: rgba(213,161,75,0.45);

    /* Text */
    --jfs-text: #f0ece4;
    --jfs-text-muted: rgba(240,236,228,0.5);
    --jfs-text-dim: rgba(240,236,228,0.3);
    --jfs-white: #ffffff;

    /* Status */
    --jfs-success: #4ade80;
    --jfs-error: #f87171;

    /* Radius */
    --jfs-radius: 12px;
    --jfs-radius-sm: 8px;

    /* Shadows */
    --jfs-shadow: 0 20px 60px rgba(0,0,0,0.6);
    --jfs-shadow-gold: 0 0 30px rgba(213,161,75,0.12);

    /* Fonts */
    --jfs-font-serif: 'Cormorant Garamond', Georgia, serif;
    --jfs-font-sans: 'DM Sans', system-ui, sans-serif;

    /* Motion */
    --jfs-transition: cubic-bezier(0.25,0.46,0.45,0.94);

    /* ── Unified field token (single source of truth) ── */
    --jfs-field-bg:     var(--jfs-black);
    --jfs-field-border: 1px solid var(--jfs-border);
    --jfs-field-radius: var(--jfs-radius-sm);          /* 8px */
    --jfs-field-focus-shadow: 0 0 0 3px rgba(213,161,75,0.15);
}

/* ── Reset & Base ─────────────────────────────────────────── */
.jfs-widget *,
.jfs-results-page * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hidden { display: none !important; }

/* ── Widget Container ─────────────────────────────────────── */
.jfs-widget {
    background: linear-gradient(145deg, var(--jfs-surface) 0%, var(--jfs-dark) 100%);
    border: 1px solid var(--jfs-border-gold);
    border-radius: var(--jfs-radius);
    padding: 32px;
    font-family: var(--jfs-font-sans);
    color: var(--jfs-text);
    position: relative;
    overflow: visible;
    box-shadow: var(--jfs-shadow), var(--jfs-shadow-gold);
    max-width: 1100px;
    margin: 0 auto;
}

.jfs-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(196,160,80,0.06) 0%, transparent 60%);
    border-radius: var(--jfs-radius);
    pointer-events: none;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.jfs-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
    background: transparent;
    border-radius: 8px;
    padding: 4px;
    width: fit-content;
}

.jfs-tab {
    background: transparent !important;
    border: none !important;
    border-radius: var(--jfs-field-radius) !important;
    color: var(--jfs-text-muted);
    font-family: var(--jfs-font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 9px 20px;
    cursor: pointer;
    transition: all 0.2s var(--jfs-transition);
    white-space: nowrap;
}

.jfs-tab:hover {
    color: var(--jfs-text) !important;
    background: var(--jfs-field-bg) !important;
    border-color: transparent !important;
}

.jfs-tab.active {
    background: linear-gradient(135deg, var(--jfs-gold) 0%, #a8863a 100%) !important;
    border-color: transparent !important;
    border-radius: var(--jfs-field-radius) !important;
    color: var(--jfs-black) !important;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(196,160,80,0.35) !important;
}

/* ── Form Fields ──────────────────────────────────────────── */
.jfs-fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr 160px 120px 130px auto;
    gap: 12px;
    align-items: end;
}

@media (max-width: 1100px) {
    .jfs-fields {
        grid-template-columns: 1fr 1fr;
    }
    .jfs-swap-btn { display: none; }
    .jfs-submit-btn { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .jfs-fields { grid-template-columns: 1fr; }
    .jfs-widget { padding: 20px 16px; }
}

.jfs-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.jfs-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jfs-gold);
}

.jfs-field-icon {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   UNIFIED FIELD STYLES
   .jfs-input · .jfs-time-select · .jfs-select · .jfs-tabs-dropdown
   All share identical background, border, border-radius, hover.
   ══════════════════════════════════════════════════════════════ */

/* ── Strip OS chrome universally ───────────────────────────── */
.jfs-input,
.jfs-time-select,
.jfs-select,
.jfs-tabs-dropdown,
input[type="date"].jfs-input {
    -webkit-appearance: none !important;
    -moz-appearance:    none !important;
    appearance:         none !important;
    box-sizing: border-box !important;
}

/* ── Shared base ─────────────────────────────────────────── */
.jfs-input,
.jfs-time-select,
.jfs-select,
.jfs-tabs-dropdown {
    background:    var(--jfs-field-bg) !important;
    border:        var(--jfs-field-border) !important;
    border-radius: var(--jfs-field-radius) !important;
    color:         var(--jfs-text) !important;
    font-family:   var(--jfs-font-sans) !important;
    font-size:     14px !important;
    font-weight:   400 !important;
    width:         100% !important;
    padding:       12px 14px !important;
    cursor:        pointer;
    transition:    border-color 0.2s, box-shadow 0.2s !important;
}

/* ── Shared hover ────────────────────────────────────────── */
.jfs-input:hover:not(:focus),
.jfs-time-select:hover:not(:focus),
.jfs-select:hover:not(:focus),
.jfs-tabs-dropdown:hover:not(:focus) {
    border-color: var(--jfs-border-gold-hover) !important;
}

/* ── Shared focus ────────────────────────────────────────── */
.jfs-input:focus,
.jfs-time-select:focus,
.jfs-select:focus,
.jfs-tabs-dropdown:focus {
    outline:      none !important;
    border-color: var(--jfs-gold) !important;
    box-shadow:   var(--jfs-field-focus-shadow) !important;
}

/* ── Placeholder ─────────────────────────────────────────── */
.jfs-input::placeholder { color: var(--jfs-text-dim); }

/* ── Native date chrome: hidden (Flatpickr takes over) v2.15 ── */
input[type="date"].jfs-input::-webkit-calendar-picker-indicator { display: none !important; }
input[type="date"].jfs-input::-webkit-inner-spin-button,
input[type="date"].jfs-input::-webkit-outer-spin-button { -webkit-appearance: none !important; }

/* ══════════════════════════════════════════════════════════════
   FLATPICKR — JETSET PREMIUM DATE PICKER THEME  (v2.15)
   Dark surface · Gold accent · Matches JetSet design system.
   ══════════════════════════════════════════════════════════════ */

.flatpickr-calendar {
    background:    #111114 !important;
    border:        1px solid rgba(213,161,75,0.4) !important;
    border-radius: 12px !important;
    box-shadow:    0 20px 60px rgba(0,0,0,0.7), 0 0 30px rgba(213,161,75,0.08) !important;
    font-family:   'DM Sans', system-ui, sans-serif !important;
    color:         #f0ece4 !important;
    width:         308px !important;
    padding:       6px !important;
}

/* Remove default Flatpickr triangle arrow */
.flatpickr-calendar::before,
.flatpickr-calendar::after { display: none !important; }

/* ── Flatpickr header — centered Month ∨  Year ∨ layout ─────── */

/* Outer months strip: flex row, prev · [center] · next */
.flatpickr-months {
    display:        flex !important;
    align-items:    center !important;
    justify-content: space-between !important;
    background:     transparent !important;
    padding:        6px 4px 4px !important;
    gap:            0 !important;
}

/* The invisible .flatpickr-month wrapper that holds .flatpickr-current-month */
.flatpickr-month {
    background:  transparent !important;
    color:       #f0ece4 !important;
    height:      auto !important;
    flex:        1 !important;               /* takes all space between the arrows */
    display:     flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Inner row: "August ∨   2026 ∨" centered together */
.flatpickr-current-month {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             12px !important;
    position:        static !important;
    padding:         0 !important;
    width:           auto !important;
    left:            auto !important;
    font-size:       15px !important;
    font-weight:     500 !important;
    color:           #f0ece4 !important;
}

/* Month dropdown: inline, no native chrome, gold chevron appended */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    -webkit-appearance: none !important;
    -moz-appearance:    none !important;
    appearance:         none !important;
    background-color:   transparent !important;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1L5 6L9 1' stroke='%23D5A14B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 2px center !important;
    background-size:     10px 7px !important;
    border:      none !important;
    color:       #f0ece4 !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size:   15px !important;
    font-weight: 500 !important;
    padding:     0 18px 0 0 !important;
    cursor:      pointer !important;
    outline:     none !important;
    margin:      0 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    color: #D5A14B !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #18181d !important;
    color:      #f0ece4 !important;
}

/* Year wrapper — hosts the injected .jfs-fp-year-select
   inline-flex keeps it vertically centred in the header row  */
.flatpickr-current-month .numInputWrapper {
    position:    static !important;
    display:     inline-flex !important;
    align-items: center !important;
    width:       auto !important;
}

/* ── Original <input type="number"> — permanently hidden ──────
   The JS _buildYearSelect() also sets display:none inline as a
   belt-and-suspenders guard across all browsers.                */
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .numInputWrapper span,
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button {
    display:            none !important;
    -webkit-appearance: none !important;
}

/* ── Custom year <select> injected by _buildYearSelect() ──────
   Rules follow the exact same pattern as .flatpickr-monthDropdown-months
   so both dropdowns are visually identical siblings.           */
.flatpickr-current-month .jfs-fp-year-select {
    -webkit-appearance:  none !important;
    -moz-appearance:     none !important;
    appearance:          none !important;

    /* Transparent field, inherits calendar surface */
    background-color:    transparent !important;

    /* Gold down-chevron — same SVG as the month dropdown */
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1L5 6L9 1' stroke='%23D5A14B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 2px center !important;
    background-size:     10px 7px !important;

    border:      none !important;
    outline:     none !important;
    color:       #f0ece4 !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size:   15px !important;
    font-weight: 500 !important;

    /* Right-pad clears the chevron; min-width guarantees full 4-digit year */
    padding:     0 20px 0 0 !important;
    min-width:   52px !important;
    width:       auto !important;
    cursor:      pointer !important;
    line-height: normal !important;
    vertical-align: middle !important;
}

/* Hover state — gold tint matching month dropdown hover */
.flatpickr-current-month .jfs-fp-year-select:hover { color: #D5A14B !important; }

/* Option elements rendered by the OS dropdown overlay */
.flatpickr-current-month .jfs-fp-year-select option {
    background: #18181d !important;
    color:      #f0ece4 !important;
    font-size:  15px !important;
}

/* Prev / next nav arrows — sit flush on each side */
.flatpickr-prev-month,
.flatpickr-next-month {
    position:    static !important;
    display:     flex !important;
    align-items: center !important;
    justify-content: center !important;
    width:       32px !important;
    height:      32px !important;
    padding:     0 !important;
    border-radius: 6px !important;
    fill:        rgba(213,161,75,0.65) !important;
    color:       rgba(213,161,75,0.65) !important;
    flex-shrink: 0 !important;
    transition:  background 0.15s !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(213,161,75,0.12) !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: #D5A14B !important; }
.flatpickr-prev-month svg,
.flatpickr-next-month svg { width: 14px !important; height: 14px !important; }

/* Weekday headers */
.flatpickr-weekdays                 { background: transparent !important; padding: 0 4px !important; }
span.flatpickr-weekday {
    background:     transparent !important;
    color:          rgba(213,161,75,0.55) !important;
    font-size:      10px !important;
    font-weight:    700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* Day grid */
.flatpickr-days   { border: none !important; }
.dayContainer     { min-width: 292px !important; max-width: 292px !important; padding: 4px !important; }

.flatpickr-day {
    background:   transparent !important;
    border:       1px solid transparent !important;
    border-radius: 6px !important;
    color:         #f0ece4 !important;
    font-size:     13px !important;
    height:        36px !important;
    line-height:   36px !important;
    max-width:     36px !important;
    margin:        2px !important;
    transition:    background 0.15s, border-color 0.15s !important;
}

/* Hover — available day */
.flatpickr-day:hover:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
    background:   rgba(213,161,75,0.13) !important;
    border-color: rgba(213,161,75,0.35) !important;
    color:        #f0ece4 !important;
}

/* Today indicator */
.flatpickr-day.today {
    border-color: rgba(213,161,75,0.55) !important;
    color:        #D5A14B !important;
    font-weight:  600 !important;
}
.flatpickr-day.today:hover {
    background:   rgba(213,161,75,0.13) !important;
    border-color: rgba(213,161,75,0.55) !important;
    color:        #D5A14B !important;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:focus {
    background:   #D5A14B !important;
    border-color: #D5A14B !important;
    color:        #0a0a0c !important;
    font-weight:  700 !important;
}
.flatpickr-day.selected:hover {
    background:   #c0913e !important;
    border-color: #c0913e !important;
}

/* Disabled / out-of-month days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color:          rgba(240,236,228,0.2) !important;
    cursor:         default !important;
    pointer-events: none !important;
}
.flatpickr-day.flatpickr-disabled:hover {
    background:   transparent !important;
    border-color: transparent !important;
}

/* Input cursor */
.flatpickr-input { cursor: pointer !important; }
.flatpickr-input.active {
    outline:      none !important;
    border-color: var(--jfs-gold) !important;
    box-shadow:   var(--jfs-field-focus-shadow) !important;
}

/* Mobile: ensure the popup sits above form elements */
.flatpickr-calendar.open { z-index: 99999 !important; }

/* ── Select/dropdown: right-padding for chevron ─────────────
   Override the base 12px 14px for elements that carry a bg chevron icon */
.jfs-time-select,
.jfs-select,
.jfs-tabs-dropdown {
    padding: 12px 40px 12px 14px !important;

    /* Gold chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23D5A14B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 14px center !important;
    background-size:     12px 8px !important;
}

/* ── Option elements ────────────────────────────────────── */
.jfs-time-select option,
.jfs-select option,
.jfs-tabs-dropdown option {
    background: var(--jfs-surface) !important;
    color:      var(--jfs-text) !important;
    font-size:  14px !important;
}

/* ── Firefox: suppress dotted focus ring on select ─────── */
.jfs-time-select:-moz-focusring,
.jfs-select:-moz-focusring,
.jfs-tabs-dropdown:-moz-focusring {
    color:       transparent !important;
    text-shadow: 0 0 0 var(--jfs-text) !important;
}

/* ── IE/Edge: hide native arrow ─────────────────────────── */
.jfs-time-select::-ms-expand,
.jfs-select::-ms-expand,
.jfs-tabs-dropdown::-ms-expand { display: none !important; }

/* ── Validation error state ─────────────────────────────── */
.jfs-input.error,
.jfs-time-select.error,
.jfs-select.error,
.jfs-tabs-dropdown.error {
    border-color: var(--jfs-error) !important;
    box-shadow:   0 0 0 3px rgba(248,113,113,0.15) !important;
}

/* ── Swap Button ──────────────────────────────────────────── */
.jfs-swap-btn {
    background: transparent !important;
    border: 1px solid #D5A14B !important;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #D5A14B !important;
    margin-bottom: 2px;
    flex-shrink: 0;
    align-self: end;
    padding: 0;
}

.jfs-swap-btn svg {
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
	border-color: #D5A14B !important;
    color:        #D5A14B !important;
}

.jfs-swap-btn:hover {
    background:   transparent !important;
    border-color: var(--jfs-gold) !important;
    color:        var(--jfs-gold) !important;
    box-shadow:   none !important;
}

.jfs-swap-btn:active svg {
    color: var(--jfs-gold) !important;
}

.jfs-swap-btn:hover svg {
    transform: rotate(180deg) scale(1.05);
    color: var(--jfs-gold) !important;
}

.jfs-swap-btn:active,
.jfs-swap-btn:focus {
    color:      black !important;
    box-shadow: none !important;
}

/* ── Submit Button ────────────────────────────────────────── */
.jfs-submit-btn {
    background:    var(--jfs-gold) !important;
    border:        none !important;
    border-radius: var(--jfs-field-radius) !important;
    color:         #000 !important;
    font-family:   var(--jfs-font-sans) !important;
    font-size:     13px !important;
    font-weight:   600 !important;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 13px 24px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.jfs-submit-btn:hover {
    background: var(--jfs-gold-dark) !important;
    border-color: transparent !important;
    color: #000 !important;
}

.jfs-submit-btn:active { opacity: 0.9; }

.jfs-btn-icon { font-size: 15px; }

/* ── Autocomplete Dropdown ────────────────────────────────── */
.jfs-autocomplete { position: relative; }

.jfs-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    min-width: 100%;
    right: 0;
    background:    var(--jfs-surface) !important;
    border:        1px solid var(--jfs-border-gold) !important;
    border-radius: var(--jfs-field-radius) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.7);
    z-index: 9999;
    max-height: 280px;
    overflow-y: auto;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: var(--jfs-gold) transparent;
}

.jfs-dropdown.open { display: block; animation: jfsDropdown 0.15s ease; }

@keyframes jfsDropdown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.jfs-dropdown-item {
    padding: 11px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--jfs-border);
    transition: background 0.15s;
    grid-template-columns: auto auto auto;
    width: max-content;
    align-items: center;
    gap: 10px;
}

.jfs-dropdown-item:last-child { border-bottom: none; }

.jfs-dropdown-item:hover,
.jfs-dropdown-item.highlighted {
    background: rgba(213,161,75,0.08) !important;
}

.jfs-dd-icao {
    font-family: var(--jfs-font-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--jfs-gold);
    min-width: 48px;
}

.jfs-dd-name {
    font-size: 13px;
    color: var(--jfs-text);
}

.jfs-dd-city {
    font-size: 11px;
    color: var(--jfs-text-muted);
    white-space: nowrap;
}

.jfs-dropdown-loading,
.jfs-dropdown-empty {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--jfs-text-muted);
}

/* ── Multi-City ───────────────────────────────────────────── */
.jfs-mc-trip {
    background:    var(--jfs-field-bg) !important;
    border:        var(--jfs-field-border) !important;
    border-radius: var(--jfs-field-radius) !important;
    padding: 20px;
    margin-bottom: 12px;
    position: relative;
    animation: jfsFadeIn 0.2s ease;
}

@keyframes jfsFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.jfs-mc-trip:hover {
    border-color: var(--jfs-border-gold-hover) !important;
}

.jfs-mc-trip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.jfs-mc-trip-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jfs-gold);
}

.jfs-remove-trip {
    background:    transparent !important;
    border:        1px solid rgba(248,113,113,0.3) !important;
    border-radius: var(--jfs-field-radius) !important;
    color: var(--jfs-error);
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.jfs-remove-trip:hover {
    background:   rgba(248,113,113,0.1) !important;
    border-color: rgba(248,113,113,0.5) !important;
}

.jfs-mc-trip .jfs-fields {
    grid-template-columns: 1fr 1fr 160px 120px 130px;
}

/* TASK 3: Multi-City Responsive Stacking ─────────────────────── */
/* Tablet (1024px and below): 2-column layout */
@media (max-width: 1024px) {
    .jfs-mc-trip .jfs-fields {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Swap button stays visible but repositions */
    .jfs-mc-trip .jfs-swap-btn {
        grid-column: 1 / 3;
        width: auto;
        justify-self: start;
        margin-top: 4px;
    }
    
    /* Date/Time fields stack below */
    .jfs-mc-trip .jfs-field--date,
    .jfs-mc-trip .jfs-field--time {
        grid-column: 1;
    }
}

/* Tablet/Mobile (768px and below): Fully vertical stack */
@media (max-width: 768px) {
    .jfs-mc-trip {
        padding: 16px;
        margin-bottom: 12px;
    }
    
    .jfs-mc-trip-header {
        margin-bottom: 12px;
    }
    
    .jfs-mc-trip .jfs-fields {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    /* All fields full width */
    .jfs-mc-trip .jfs-field {
        grid-column: 1;
    }
    
    /* Swap button full width */
    .jfs-mc-trip .jfs-swap-btn {
        width: 100%;
        margin-top: 0;
    }
    
    /* Input fields full width */
    .jfs-mc-trip .jfs-input,
    .jfs-mc-trip .jfs-time-select,
    .jfs-mc-trip .jfs-select {
        width: 100% !important;
    }
    
    /* Labels remain properly styled */
    .jfs-mc-trip .jfs-label {
        font-size: 10px;
        margin-bottom: 4px;
    }
    
    .jfs-mc-trip-label {
        font-size: 10px;
    }
}

/* Mobile (640px and below): Further optimizations */
@media (max-width: 640px) {
    .jfs-mc-trip {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .jfs-mc-trip-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .jfs-remove-trip {
        font-size: 10px;
        padding: 2px 6px;
        align-self: flex-start;
    }
    
    .jfs-mc-trip .jfs-fields {
        gap: 8px;
    }
    
    .jfs-mc-actions {
        gap: 8px;
        margin-top: 8px;
    }
    
    .jfs-add-trip-btn {
        padding: 8px 16px;
        font-size: 12px;
        width: 100%;
        justify-content: center;
    }
    
    .jfs-mc-trip .jfs-submit-btn {
        width: 100%;
        margin-top: 4px;
    }
}

/* Small mobile (480px and below): Max compression */
@media (max-width: 480px) {
    .jfs-mc-trip {
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .jfs-mc-trip-label {
        font-size: 9px;
    }
    
    .jfs-label {
        font-size: 9px;
        margin-bottom: 2px;
    }
    
    .jfs-mc-trip .jfs-fields {
        gap: 6px;
    }
    
    .jfs-input,
    .jfs-time-select,
    .jfs-select {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

.jfs-mc-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.jfs-add-trip-btn {
    background:    transparent !important;
    border:        1px dashed var(--jfs-border-gold) !important;
    border-radius: var(--jfs-field-radius) !important;
    color: var(--jfs-gold) !important;
    font-family: var(--jfs-font-sans) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.jfs-add-trip-btn:hover {
    background:   rgba(213,161,75,0.08) !important;
    border-style: solid !important;
    border-color: var(--jfs-border-gold) !important;
}

/* ── Results Page ─────────────────────────────────────────── */
.jfs-results-page {
    font-family: var(--jfs-font-sans);
    color: var(--jfs-text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

.jfs-results-searchbar {
    background: transparent;
    border-bottom: 1px solid var(--jfs-border);
    padding: 24px 0 32px;
    margin-bottom: 32px;
}

/* ── Results Controls ─────────────────────────────────────── */
.jfs-results-controls {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    padding: 20px;
    background:    var(--jfs-surface) !important;
    border:        1px solid var(--jfs-border) !important;
    border-radius: var(--jfs-field-radius) !important;
}

.jfs-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jfs-results-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--jfs-text-muted);
}

/* ── Section Title ────────────────────────────────────────── */
.jfs-section-title {
    font-family: var(--jfs-font-serif);
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0.03em;
    color: var(--jfs-text);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--jfs-border);
}

.jfs-section-title span {
    color: var(--jfs-gold);
    font-style: italic;
}

/* ── Results Grid ─────────────────────────────────────────── */
.jfs-results-grid {
    display: grid;
    gap: 16px;
}

/* ── Flight Card ──────────────────────────────────────────── */
.jfs-card {
    background:    linear-gradient(135deg, var(--jfs-surface) 0%, var(--jfs-dark) 100%) !important;
    border:        1px solid var(--jfs-border) !important;
    border-radius: var(--jfs-radius) !important;
    overflow: hidden;
    transition: all 0.3s var(--jfs-transition);
    display: grid;
    grid-template-columns: 1fr auto;
    position: relative;
    animation: jfsFadeIn 0.3s ease;
}

.jfs-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--jfs-gold), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.jfs-card:hover {
    border-color: var(--jfs-border-gold) !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 20px rgba(196,160,80,0.08) !important;
}

.jfs-card:hover::before { opacity: 1; }

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

/* Card Main — header, meta, route, thumbnail strip */
.jfs-card-main {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 480px) {
    .jfs-card-main { padding: 16px; }
}

.jfs-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.jfs-card-aircraft-bar {
    display: inline-block;
    width: 3px;
    height: 18px;
    background: var(--jfs-gold);
    border-radius: 2px;
    flex-shrink: 0;
}

.jfs-card-aircraft-name {
    font-family: var(--jfs-font-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--jfs-text);
    letter-spacing: 0.02em;
}

.jfs-card-header-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--jfs-gold);
    opacity: 0.75;
}

.jfs-card-manufacturer {
    font-size: 12px;
    color: var(--jfs-text-muted);
}

/* Card Meta — seats / manufacture year / refurbishment year */
.jfs-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.jfs-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--jfs-text-muted);
}

.jfs-meta-icon { font-size: 13px; }

/* Flight Route */
.jfs-card-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.jfs-airport-iata {
    font-family: var(--jfs-font-serif);
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--jfs-text);
    line-height: 1;
}

.jfs-airport-time {
    font-size: 18px;
    font-weight: 500;
    color: var(--jfs-gold-light);
    margin-top: 4px;
}

.jfs-airport-name {
    font-size: 11px;
    color: var(--jfs-text-muted);
    margin-top: 4px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jfs-route-middle {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.jfs-route-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--jfs-gold), transparent);
    position: relative;
}

.jfs-route-line::after {
    content: '✈';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: var(--jfs-gold);
}

.jfs-route-duration {
    font-size: 11px;
    color: var(--jfs-text-muted);
    margin-top: 10px;
    letter-spacing: 0.05em;
}

/* Inline photo display + "Aircraft image" link
   ─────────────────────────────────────────────
   .jfs-card-photos wraps two alternate photo displays that are
   always both in the DOM — CSS decides which is visible at the
   current width, so there's no re-render needed on resize:
     - .jfs-card-thumbs--desktop : static thumbnails, >1024px
     - .jfs-card-thumbs--mobile  : auto-advancing slider, ≤1024px
       (CardSlider in app.js swaps the active slide every 5s) */
.jfs-card-photos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.jfs-card-thumbs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jfs-card-thumbs--mobile { display: none; }

.jfs-card-thumb {
    width: 72px;
    height: 54px;
    border-radius: var(--jfs-field-radius);
    overflow: hidden;
    background: var(--jfs-field-bg);
    border: 1px solid var(--jfs-border);
    flex-shrink: 0;
}

.jfs-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s;
}

.jfs-card-thumb img.loaded { opacity: 1; }

.jfs-card-thumb--placeholder {
    opacity: 0.7;
}

/* Mobile/tablet auto-slider */
.jfs-card-slider {
    position: relative;
    width: 96px;
    height: 64px;
    border-radius: var(--jfs-field-radius);
    overflow: hidden;
    background: var(--jfs-field-bg);
    border: 1px solid var(--jfs-border);
    flex-shrink: 0;
}

.jfs-card-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.jfs-card-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.jfs-card-slide--active {
    opacity: 1;
}

.jfs-card-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s;
}

.jfs-card-slide img.loaded { opacity: 1; }

.jfs-details-link {
    background: transparent !important;
    border: none !important;
    color: var(--jfs-gold-light) !important;
    font-family: var(--jfs-font-sans);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px 4px !important;
    white-space: nowrap;
}

.jfs-details-link:hover {
    color: var(--jfs-gold) !important;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .jfs-card-thumbs--desktop { display: none; }
    .jfs-card-thumbs--mobile  { display: flex; }
}

@media (max-width: 480px) {
    .jfs-card-thumb  { width: 56px; height: 42px; }
    .jfs-card-slider { width: 84px; height: 58px; }
}

/* Card Action — price + Book Now, right column */
.jfs-card-action {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-left: 1px solid var(--jfs-border);
    min-width: 180px;
    box-sizing: border-box;
}

.jfs-card-price {
    text-align: left;
    width: 100%;
}

/* ── Mode Dropdown — tablet & mobile ─────────────────────── */
.jfs-tabs-dropdown {
    display: none;
    margin-bottom: 20px;
}

/* Desktop: dropdown hidden, tabs visible */
@media (min-width: 1025px) {
    .jfs-tabs          { display: flex; }
    .jfs-tabs-dropdown { display: none !important; }
}

/* Tablet + Mobile: tabs hidden, dropdown visible */
@media (max-width: 1024px) {
    .jfs-tabs          { display: none !important; }
    .jfs-tabs-dropdown { display: block !important; }
}

@media (max-width: 1024px) {
    .jfs-card-action {
        padding: 20px;
        min-width: 160px;
    }
}

@media (max-width: 768px) {
    .jfs-card-action {
        border-left: none !important;
        border-top: 1px solid var(--jfs-border) !important;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 20px;
        gap: 10px;
        width: 100%;
    }
    .jfs-card-price { width: 100%; margin-bottom: 2px; }
    .jfs-book-btn   { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
    .jfs-card-action { padding: 14px 16px; }
}

.jfs-price-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jfs-text-muted);
    margin-bottom: 4px;
}

.jfs-price-amount {
    font-family: var(--jfs-font-serif);
    font-size: 28px;
    font-weight: 300;
    color: var(--jfs-text);
    letter-spacing: 0.02em;
}

.jfs-price-currency {
    font-size: 14px;
    color: var(--jfs-gold);
    vertical-align: super;
    font-weight: 600;
}

.jfs-ask-price-badge {
    display: inline-block;
    background:    rgba(213,161,75,0.08) !important;
    border:        1px solid var(--jfs-border-gold) !important;
    border-radius: var(--jfs-field-radius) !important;
    color: var(--jfs-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
}

/* ── Leon Live Pricing — loading shimmer ─────────────────────────────────
   Applied to .jfs-card-price while the background /get-leon-pricing
   request is in flight.  Matches the dark-gold palette of the UI.
   Children are hidden (opacity:0) so the DB price doesn't flash
   through; the shimmer fills the same footprint.  Removed immediately
   once the response arrives (success or failure).
───────────────────────────────────────────────────────────────────────── */
.jfs-price-loading {
    position:       relative;
    overflow:       hidden;
    pointer-events: none;
    min-height:     52px;               /* holds space while content is hidden */
    border-radius:  var(--jfs-radius-sm);
}

.jfs-price-loading > * {
    opacity:    0;
    transition: opacity 0.25s ease;
}

.jfs-price-loading::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        90deg,
        transparent                      0%,
        rgba(213, 161, 75, 0.06)        35%,
        rgba(213, 161, 75, 0.16)        50%,
        rgba(213, 161, 75, 0.06)        65%,
        transparent                     100%
    );
    background-size: 220% 100%;
    animation:       jfsPriceShimmer 1.4s ease-in-out infinite;
    border-radius:   var(--jfs-radius-sm);
}

@keyframes jfsPriceShimmer {
    0%   { background-position:  220% center; }
    100% { background-position: -220% center; }
}

.jfs-book-btn {
    background:    var(--jfs-gold) !important;
    border:        none !important;
    border-radius: var(--jfs-field-radius) !important;
    color:         black !important;
    font-family:   var(--jfs-font-sans);
    font-size:     12px;
    font-weight:   600;
    letter-spacing: 0.04em;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.jfs-book-btn:hover {
    background: var(--jfs-gold-dark) !important;
    color:      #ffffff !important;
}

/* ── Skeleton Loaders ─────────────────────────────────────── */
.jfs-skeleton {
    background:    var(--jfs-surface) !important;
    border:        1px solid var(--jfs-border) !important;
    border-radius: var(--jfs-radius) !important;
    display: grid;
    grid-template-columns: 200px 1fr 180px;
    height: 160px;
    overflow: hidden;
}

.jfs-skeleton-block {
    background: linear-gradient(90deg, var(--jfs-surface) 0%, var(--jfs-surface-2) 50%, var(--jfs-surface) 100%);
    background-size: 200% 100%;
    animation: jfsSkeleton 1.5s ease-in-out infinite;
}

@keyframes jfsSkeleton {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ── Empty & Error States ─────────────────────────────────── */
.jfs-empty-state,
.jfs-error-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--jfs-text-muted);
}

.jfs-empty-icon {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 20px;
    animation: jfsFloat 3s ease-in-out infinite;
}

@keyframes jfsFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.jfs-empty-state h3,
.jfs-error-state h3 {
    font-family: var(--jfs-font-serif);
    font-size: 24px;
    font-weight: 300;
    color: var(--jfs-text);
    margin-bottom: 12px;
}

.jfs-empty-state p,
.jfs-error-state p {
    font-size: 15px;
    margin-bottom: 28px;
    max-width: 400px;
    margin-inline: auto;
}

.jfs-contact-btn,
.jfs-retry-btn {
    display:       inline-block;
    background:    transparent !important;
    border:        1px solid var(--jfs-border-gold) !important;
    border-radius: var(--jfs-field-radius) !important;
    color:         var(--jfs-gold);
    font-family:   var(--jfs-font-sans);
    font-size:     13px;
    font-weight:   600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 28px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.jfs-contact-btn:hover,
.jfs-retry-btn:hover {
    background:   rgba(213,161,75,0.08) !important;
    border-color: var(--jfs-gold) !important;
}

/* ── Pagination ───────────────────────────────────────────── */
.jfs-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.jfs-page-btn {
    background:    var(--jfs-surface) !important;
    border:        1px solid var(--jfs-border) !important;
    border-radius: var(--jfs-field-radius) !important;
    color: var(--jfs-text-muted);
    font-family: var(--jfs-font-sans);
    font-size: 13px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.jfs-page-btn:hover {
    border-color: var(--jfs-gold) !important;
    color:        var(--jfs-gold) !important;
    background:   var(--jfs-surface) !important;
}

.jfs-page-btn.active {
    background:   var(--jfs-gold) !important;
    border-color: var(--jfs-gold) !important;
    color:        var(--jfs-black) !important;
    font-weight: 700;
}

/* ── Loading Spinner ──────────────────────────────────────── */
.jfs-spinner-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 20px;
    color: var(--jfs-text-muted);
    font-size: 14px;
}

.jfs-spinner {
    width: 36px;
    height: 36px;
    border: 2px solid var(--jfs-border);
    border-top-color: var(--jfs-gold);
    border-radius: 50%;
    animation: jfsSpin 0.7s linear infinite;
}

@keyframes jfsSpin {
    to { transform: rotate(360deg); }
}

/* ── Field error text ─────────────────────────────────────── */
.jfs-field-error {
    font-size: 11px;
    color: var(--jfs-error);
    margin-top: -2px;
}

/* ── Results section spacing ──────────────────────────────── */
.jfs-results-section { margin-bottom: 48px; }

/* ── Airport city ─────────────────────────────────────────── */
.jfs-airport-city {
    font-size: 11px;
    color: var(--jfs-text-muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.jfs-card-airport--right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
}

.jfs-card-airport--right .jfs-airport-iata,
.jfs-card-airport--right .jfs-airport-time,
.jfs-card-airport--right .jfs-airport-city {
    text-align: right;
    width: 100%;
}

/* ── Card header ─────────────────────────────────────────────── */
.jfs-card-header { margin-bottom: 4px; }

/* ── Meta divider ────────────────────────────────────────────── */
.jfs-meta-divider {
    color: var(--jfs-border-gold);
    font-size: 14px;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   BOOKING MODAL & BAR — v2.8.1
   ─────────────────────────────────────────────────────────
   FIX Issue 2: All modal and booking CSS uses !important to
   guarantee override of Elementor / WordPress theme styles.
   Scope: #jfs-booking-modal, .jfs-booking-bar, .jfs-book-btn
   and all child selectors.
═══════════════════════════════════════════════════════════ */

/* ── Body lock ──────────────────────────────────────────── */
body.jfs-modal-open {
    overflow: hidden !important;
}

/* ── Modal wrapper ──────────────────────────────────────── */
#jfs-booking-modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 24px 16px !important;
    overflow-y: auto !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

#jfs-booking-modal[hidden] {
    display: none !important;
}

/* ── Overlay ────────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    cursor: pointer !important;
    z-index: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Container ──────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-container {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 640px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: auto !important;
    animation: jfsModalIn 0.22s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
    border: none !important;
    padding: 0 !important;
}

@keyframes jfsModalIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Header ─────────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 24px 24px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
    margin: 0 !important;
}

#jfs-booking-modal .jfs-modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 0 4px !important;
    line-height: 1.25 !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#jfs-booking-modal .jfs-modal-subtitle {
    font-size: 13px !important;
    color: #888888 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

#jfs-booking-modal .jfs-modal-close {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: none !important;
    background: #f4f4f4 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #555555 !important;
    transition: background 0.15s, color 0.15s !important;
    margin-top: 2px !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

#jfs-booking-modal .jfs-modal-close:hover {
    background: #e8e8e8 !important;
    color: #111111 !important;
}

/* ── Body ───────────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-body {
    padding: 0 24px !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
    flex: 1 !important;
    background: #ffffff !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ── Sections ───────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-section {
    padding: 20px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#jfs-booking-modal .jfs-modal-section:last-child {
    border-bottom: none !important;
}

#jfs-booking-modal .jfs-modal-section-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #aaaaaa !important;
    margin-bottom: 12px !important;
    display: block !important;
}

#jfs-booking-modal .jfs-modal-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

#jfs-booking-modal .jfs-modal-section-header .jfs-modal-section-label {
    margin-bottom: 0 !important;
}

/* ── Trip badge ─────────────────────────────────────────── */
#jfs-booking-modal .jfs-trip-badge {
    display: inline-block !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: #e8f4fd !important;
    color: #1a6fa8 !important;
    border: 1px solid #b3d9f2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#jfs-booking-modal .jfs-trip-badge[data-type="round-trip"] {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    border-color: #a5d6a7 !important;
}

#jfs-booking-modal .jfs-trip-badge[data-type="multi-city"] {
    background: #fef3e2 !important;
    color: #b25e00 !important;
    border-color: #f5c07a !important;
}

/* ── Segments ───────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-segments {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#jfs-booking-modal .jfs-modal-segment {
    background: #fafafa !important;
    border: 1px solid #ebebeb !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
}

#jfs-booking-modal .jfs-modal-segment-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #aaaaaa !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 4px !important;
    display: block !important;
}

#jfs-booking-modal .jfs-modal-segment-route {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
}

#jfs-booking-modal .jfs-modal-segment-city {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

#jfs-booking-modal .jfs-modal-segment-city--dest {
    color: #1a6fa8 !important;
}

#jfs-booking-modal .jfs-modal-segment-arrow {
    color: #aaaaaa !important;
    flex-shrink: 0 !important;
}

#jfs-booking-modal .jfs-modal-segment-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #888888 !important;
}

/* ── Aircraft card ──────────────────────────────────────── */

/* ✅ Container for aircraft cards (supports single or multiple) */
#jfs-booking-modal #jfs-modal-aircraft-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* ✅ Label for multi-leg aircraft (e.g., "Outbound", "Leg 1") */
#jfs-booking-modal .jfs-modal-aircraft-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #999999 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

#jfs-booking-modal .jfs-modal-aircraft-card {
    background: #fafafa !important;
    border: 1px solid #ebebeb !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
}

#jfs-booking-modal .jfs-modal-aircraft-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#jfs-booking-modal .jfs-modal-aircraft-bar {
    width: 4px !important;
    height: 36px !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #c4a050 0%, #e8c97a 100%) !important;
    flex-shrink: 0 !important;
}

#jfs-booking-modal .jfs-modal-aircraft-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-bottom: 2px !important;
    display: block !important;
}

#jfs-booking-modal .jfs-modal-aircraft-meta {
    font-size: 12px !important;
    color: #888888 !important;
    display: block !important;
}

#jfs-booking-modal .jfs-modal-aircraft-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ── Form fields ─────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-fields {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#jfs-booking-modal .jfs-modal-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #444444 !important;
    margin-bottom: 6px !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#jfs-booking-modal .jfs-required {
    color: #e53935 !important;
    margin-left: 2px !important;
}

#jfs-booking-modal .jfs-optional {
    font-weight: 400 !important;
    color: #aaaaaa !important;
    font-size: 12px !important;
}

#jfs-booking-modal .jfs-modal-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border: 1.5px solid #dddddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #111111 !important;
    background: #ffffff !important;
    font-family: inherit !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    -webkit-appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

#jfs-booking-modal .jfs-modal-input:focus {
    border-color: #c4a050 !important;
    box-shadow: 0 0 0 3px rgba(196, 160, 80, 0.15) !important;
    outline: none !important;
    background: #ffffff !important;
}

#jfs-booking-modal .jfs-modal-input::placeholder {
    color: #bbbbbb !important;
    opacity: 1 !important;
}

/* Read-only section wrapper */
#jfs-booking-modal .jfs-modal-fields--readonly {
    background: #fafafa !important;
    border: 1px solid #ebebeb !important;
    border-radius: 10px !important;
    padding: 12px !important;
    gap: 10px !important;
}

/* Read-only inputs */
#jfs-booking-modal .jfs-modal-input--readonly {
    background: #f4f4f4 !important;
    color: #555555 !important;
    border-color: transparent !important;
    cursor: default !important;
}

#jfs-booking-modal .jfs-modal-input--readonly:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ✅ FIX BUG 1: Dynamic Flight Details Container */
#jfs-booking-modal #jfs-modal-flight-details-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Flight detail set (one per segment) */
#jfs-booking-modal .jfs-modal-flight-detail-set {
    background: #fafafa !important;
    border: 1px solid #ebebeb !important;
    border-radius: 10px !important;
    padding: 12px !important;
}

/* Label for multi-segment flight details (e.g., "Outbound Flight", "Leg 1") */
#jfs-booking-modal .jfs-flight-detail-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #999999 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Group of related flight detail fields */
#jfs-booking-modal .jfs-flight-detail-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

#jfs-booking-modal .jfs-flight-detail-group:last-child {
    margin-bottom: 0 !important;
}

/* Single flight detail field */
#jfs-booking-modal .jfs-flight-detail-field {
    display: flex !important;
    flex-direction: column !important;
}

#jfs-booking-modal .jfs-flight-detail-field label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    margin-bottom: 4px !important;
}

/* Two-column layout */
@media (min-width: 480px) {
    #jfs-booking-modal .jfs-modal-fields {
        grid-template-columns: 1fr 1fr !important;
    }
    #jfs-booking-modal .jfs-modal-field:not(.jfs-modal-field--half) {
        grid-column: 1 / -1 !important;
    }
}

/* ── Consent ─────────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-section--consent {
    padding: 16px 0 !important;
}

#jfs-booking-modal .jfs-modal-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #555555 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#jfs-booking-modal .jfs-modal-checkbox input[type="checkbox"] {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #c4a050 !important;
    cursor: pointer !important;
}

/* ── Messages ────────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-message {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#jfs-booking-modal .jfs-modal-message[hidden] {
    display: none !important;
}

#jfs-booking-modal .jfs-modal-message--error {
    background: #fdecea !important;
    color: #c62828 !important;
    border: 1px solid #ffcdd2 !important;
}

#jfs-booking-modal .jfs-modal-message--success {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    border: 1px solid #a5d6a7 !important;
}

/* ── Footer ──────────────────────────────────────────────── */
#jfs-booking-modal .jfs-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 16px 24px !important;
    border-top: 1px solid #f0f0f0 !important;
    background: #fafafa !important;
    margin: 0 !important;
}

#jfs-booking-modal .jfs-modal-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-width: 120px !important;
    font-family: inherit !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background 0.15s, color 0.15s, opacity 0.15s, transform 0.1s !important;
    box-shadow: none !important;
    outline: none !important;
}

#jfs-booking-modal .jfs-modal-btn--ghost {
    background: transparent !important;
    border: 1.5px solid #dddddd !important;
    color: #555555 !important;
}

#jfs-booking-modal .jfs-modal-btn--ghost:hover {
    background: #f4f4f4 !important;
    border-color: #bbbbbb !important;
    color: #333333 !important;
}

#jfs-booking-modal .jfs-modal-btn--primary {
    background: #111111 !important;
    color: #ffffff !important;
    border: none !important;
}

#jfs-booking-modal .jfs-modal-btn--primary:hover:not(:disabled) {
    background: #333333 !important;
    transform: translateY(-1px) !important;
}

#jfs-booking-modal .jfs-modal-btn--primary:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ── Spinner ─────────────────────────────────────────────── */
#jfs-booking-modal .jfs-spin {
    animation: jfsSpin 0.75s linear infinite !important;
    display: inline-block !important;
}

@keyframes jfsSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Book button: selected state ─────────────────────────── */
.jfs-book-btn {
    background: #D5A14B !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background 0.15s, transform 0.1s !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    display: inline-block !important;
}

.jfs-book-btn:hover {
    background: #c49040 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
}

.jfs-book-btn--selected {
    background: #2e7d32 !important;
    color: #ffffff !important;
    cursor: default !important;
    transform: none !important;
}

.jfs-book-btn--selected:hover {
    background: #2e7d32 !important;
    color: #ffffff !important;
    transform: none !important;
}

/* ═══════════════════════════════════════════════════════════
   BOOKING SELECTION BAR (Round Trip / Multi City)
   FIX Issue 2: All !important to override theme styles.
═══════════════════════════════════════════════════════════ */
#jfs-booking-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #111111 !important;
    color: #ffffff !important;
    padding: 14px 20px 16px !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25) !important;
    animation: jfsBarIn 0.25s ease both !important;
    margin: 0 !important;
    border: none !important;
    border-top: none !important;
    box-sizing: border-box !important;
}

#jfs-booking-bar[hidden] {
    display: none !important;
}

@keyframes jfsBarIn {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

#jfs-booking-bar .jfs-booking-bar-inner {
    max-width: 960px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

#jfs-booking-bar .jfs-booking-bar-slots {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
}

#jfs-booking-bar .jfs-bar-slot {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    min-width: 160px !important;
    background: transparent !important;
    color: #ffffff !important;
}

#jfs-booking-bar .jfs-bar-slot--empty {
    opacity: 0.5 !important;
}

#jfs-booking-bar .jfs-bar-slot--filled {
    border-color: #c4a050 !important;
    background: rgba(196, 160, 80, 0.1) !important;
}

#jfs-booking-bar .jfs-bar-slot-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #aaaaaa !important;
    flex-shrink: 0 !important;
}

#jfs-booking-bar .jfs-bar-slot-route {
    font-weight: 600 !important;
    color: #ffffff !important;
    font-size: 13px !important;
}

#jfs-booking-bar .jfs-bar-slot-empty-text {
    color: #666666 !important;
    font-size: 12px !important;
}

#jfs-booking-bar .jfs-bar-slot--filled svg {
    color: #c4a050 !important;
    flex-shrink: 0 !important;
}

#jfs-booking-bar .jfs-booking-bar-btn,
.jfs-booking-bar-btn {
    padding: 12px 28px !important;
    background: #c4a050 !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-family: inherit !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: background 0.15s, transform 0.1s !important;
}

#jfs-booking-bar .jfs-booking-bar-btn:disabled,
.jfs-booking-bar-btn:disabled {
    background: #333333 !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

#jfs-booking-bar .jfs-booking-bar-btn:not(:disabled):hover,
.jfs-booking-bar-btn:not(:disabled):hover {
    background: #d4b060 !important;
    transform: translateY(-1px) !important;
}

#jfs-booking-bar .jfs-booking-bar-hint {
    text-align: center !important;
    font-size: 12px !important;
    color: #888888 !important;
    margin: 6px auto 0 !important;
    max-width: 960px !important;
    padding: 0 !important;
}

/* ── Multi-city leg section labels (Issue 3) ─────────────── */
.jfs-mc-leg-section .jfs-section-title,
.jfs-mc-leg-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.jfs-mc-leg-status {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #888888 !important;
    font-style: italic !important;
    transition: color 0.2s !important;
}

.jfs-mc-no-flights {
    color: #888888 !important;
    font-size: 14px !important;
    padding: 20px 0 !important;
    margin: 0 !important;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    #jfs-booking-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    #jfs-booking-modal .jfs-modal-container {
        max-width: 100% !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        max-height: 92vh !important;
        width: 100% !important;
    }

    #jfs-booking-modal .jfs-modal-body {
        max-height: calc(92vh - 180px) !important;
    }

    #jfs-booking-modal .jfs-modal-header {
        padding: 18px 18px 14px !important;
    }

    #jfs-booking-modal .jfs-modal-body {
        padding: 0 18px !important;
    }

    #jfs-booking-modal .jfs-modal-footer {
        padding: 14px 18px !important;
    }

    #jfs-booking-modal .jfs-modal-btn {
        flex: 1 !important;
        min-width: unset !important;
    }

    #jfs-booking-bar .jfs-booking-bar-inner {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #jfs-booking-bar .jfs-booking-bar-slots {
        justify-content: center !important;
    }

    #jfs-booking-bar .jfs-booking-bar-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* ✅ Responsive aircraft cards for mobile */
    #jfs-booking-modal #jfs-modal-aircraft-container {
        gap: 10px !important;
    }

    #jfs-booking-modal .jfs-modal-aircraft-card {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    #jfs-booking-modal .jfs-modal-aircraft-label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    #jfs-booking-modal .jfs-modal-aircraft-bar {
        width: 3px !important;
        height: 32px !important;
    }

    #jfs-booking-modal .jfs-modal-aircraft-name {
        font-size: 14px !important;
    }

    #jfs-booking-modal .jfs-modal-aircraft-meta {
        font-size: 11px !important;
    }

    /* ✅ Responsive flight details for mobile */
    #jfs-booking-modal #jfs-modal-flight-details-container {
        gap: 12px !important;
    }

    #jfs-booking-modal .jfs-modal-flight-detail-set {
        padding: 10px !important;
    }

    #jfs-booking-modal .jfs-flight-detail-label {
        font-size: 10px !important;
        margin-bottom: 8px !important;
    }

    #jfs-booking-modal .jfs-flight-detail-group {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    #jfs-booking-modal .jfs-flight-detail-field label {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   AIRCRAFT DETAILS MODAL
   ─────────────────────────────────────────────────────────
   FIX: this modal was reusing the generic .jfs-modal-* class
   names, but every positioning/overlay rule for those classes
   was scoped to #jfs-booking-modal only — so #jfs-details-modal
   had no fixed-position/overlay/[hidden] behavior at all and
   rendered as a plain block in the page flow, at full image
   size. This block gives the details modal its own shell,
   mirroring the booking modal's mechanics but in Jetset's dark
   theme (the booking modal is a deliberately light checkout
   form; this is a read-only info panel over the dark site).
═══════════════════════════════════════════════════════════ */

/* ── Modal wrapper ──────────────────────────────────────── */
#jfs-details-modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 24px 16px !important;
    overflow-y: auto !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

#jfs-details-modal[hidden] {
    display: none !important;
}

/* ── Overlay ────────────────────────────────────────────── */
#jfs-details-modal .jfs-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    cursor: pointer !important;
    z-index: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Container ──────────────────────────────────────────── */
#jfs-details-modal .jfs-modal-container {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 640px !important;
    background: linear-gradient(135deg, var(--jfs-surface) 0%, var(--jfs-dark) 100%) !important;
    border: 1px solid var(--jfs-border-gold) !important;
    border-radius: var(--jfs-radius) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: auto !important;
    animation: jfsModalIn 0.22s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
    padding: 0 !important;
    outline: none !important;
}

/* ── Header ─────────────────────────────────────────────── */
#jfs-details-modal .jfs-modal-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 24px 24px 16px !important;
    border-bottom: 1px solid var(--jfs-border) !important;
    background: transparent !important;
    margin: 0 !important;
}

#jfs-details-modal .jfs-modal-title {
    font-family: var(--jfs-font-serif) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--jfs-text) !important;
    margin: 0 0 4px !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}

#jfs-details-modal .jfs-modal-subtitle {
    font-size: 13px !important;
    color: var(--jfs-text-muted) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

#jfs-details-modal .jfs-modal-close {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--jfs-border) !important;
    background: transparent !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--jfs-text-muted) !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
    margin-top: 2px !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

#jfs-details-modal .jfs-modal-close:hover {
    background: var(--jfs-surface-2) !important;
    color: var(--jfs-gold) !important;
    border-color: var(--jfs-border-gold) !important;
}

/* ── Body ───────────────────────────────────────────────── */
#jfs-details-modal .jfs-modal-body {
    padding: 20px 24px !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
    flex: 1 !important;
    background: transparent !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ── Sections ───────────────────────────────────────────── */
#jfs-details-modal .jfs-modal-section {
    padding: 16px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#jfs-details-modal .jfs-modal-section-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--jfs-text-muted) !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* ── Footer ─────────────────────────────────────────────── */
#jfs-details-modal .jfs-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 16px 24px 24px !important;
    background: transparent !important;
    margin: 0 !important;
}

#jfs-details-modal .jfs-modal-btn {
    font-family: var(--jfs-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 10px 20px !important;
    border-radius: var(--jfs-field-radius) !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

#jfs-details-modal .jfs-modal-btn--ghost {
    background: transparent !important;
    border: 1px solid var(--jfs-border) !important;
    color: var(--jfs-text-muted) !important;
}

#jfs-details-modal .jfs-modal-btn--ghost:hover {
    border-color: var(--jfs-border-gold) !important;
    color: var(--jfs-gold) !important;
}

@media (max-width: 640px) {
    #jfs-details-modal { padding: 0 !important; align-items: stretch !important; }
    #jfs-details-modal .jfs-modal-container {
        max-width: 100% !important;
        min-height: 100% !important;
        border-radius: 0 !important;
    }
}

/*
 * FIX: on the live site (WordPress + Elementor + theme), the thumb
 * buttons rendered as full-width bars instead of 64×48px tiles, and
 * the modal overflowed horizontally. Reproducing this in isolation
 * with just our own CSS did NOT show the bug — it only appears
 * where a theme/Elementor global rule (a generic `button { width:
 * 100%; display:block }` reset, or similar on the <img>) has higher
 * specificity or wins by cascade order over our un-flagged rules
 * below. Every sizing-critical declaration here now carries
 * !important, matching the rest of this modal's CSS, and the
 * gallery/body containers explicitly clip horizontal overflow so a
 * still-wider-than-expected element can no longer blow out the
 * modal's width.
 */
#jfs-details-modal .jfs-modal-body {
    overflow-x: hidden !important;
}

.jfs-details-gallery {
    margin-bottom: 24px;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.jfs-details-gallery-main {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    border-radius: var(--jfs-radius);
    overflow: hidden !important;
    background: var(--jfs-surface);
    border: 1px solid var(--jfs-border);
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
}

.jfs-details-gallery-main img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    display: block !important;
}

.jfs-details-gallery-empty {
    color: var(--jfs-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px;
}

.jfs-details-gallery-thumbs {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.jfs-details-thumb {
    display: block !important;
    width: 64px !important;
    height: 48px !important;
    max-width: 64px !important;
    min-width: 64px !important;
    border-radius: var(--jfs-field-radius);
    overflow: hidden !important;
    border: 2px solid transparent;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    background: var(--jfs-surface);
    flex: 0 0 64px !important;
    box-sizing: border-box !important;
}

.jfs-details-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    display: block !important;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.jfs-details-thumb:hover img {
    opacity: 1;
}

.jfs-details-thumb--active {
    border-color: var(--jfs-gold);
}

.jfs-details-thumb--active img {
    opacity: 1;
}

.jfs-details-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.jfs-details-spec {
    padding: 12px 14px;
    background: var(--jfs-surface);
    border: 1px solid var(--jfs-border);
    border-radius: var(--jfs-field-radius);
}

.jfs-details-spec-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jfs-text-muted);
    margin-bottom: 4px;
}

.jfs-details-spec-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--jfs-gold-light);
}

@media (max-width: 480px) {
    .jfs-details-specs { grid-template-columns: 1fr; }
    .jfs-details-gallery-main { aspect-ratio: 4 / 3; }
}