/* JeranJets — WEB styles
 * Capa marketing/chrome: reset/tipografía global, container, header del sitio,
 * footer, hero del home, page-head, FAQ accordion, language switcher legacy,
 * mobile nav bar, botones base, tokens :root, dark theme global, print global.
 * Cárgalo PRIMERO (antes de core.css y drawer.css). */

/* JeranJets /jets/ — minimal stylesheet */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #0b1f3a; background: #f7f5f0; }
a { color: #1152d4; text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #f3f4f6; padding: 1px 6px; border-radius: 4px; font-size: 13px; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }


/* Header */
.site-header { background: #0b1f3a; color: #fff; }
.site-header .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.site-header .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .01em; text-decoration: none; }
.site-header .brand:hover { text-decoration: none; opacity: 0.9; }
.site-header .brand-logo { width: 26px; height: 26px; color: #3b82f6; flex-shrink: 0; }
.site-header .nav { display: flex; align-items: center; }
.site-header .nav a { color: #fff; margin-left: 24px; font-size: 14px; }
.site-header .nav a:hover { text-decoration: underline; }


/* Footer */
.site-footer { padding: 30px 0; text-align: center; color: #6b7280; }

/* Main */
.main { padding: 40px 0 60px; }


/* Headings & hero */
.hero { text-align: center; margin: 40px 0 30px; }
.hero h1 { font-size: 36px; font-weight: 700; margin: 0 0 10px; }
.hero .lead { color: #6b7280; font-size: 16px; }
.page-head { margin: 0 0 24px; }
.page-head h1 { font-size: 28px; font-weight: 700; margin: 8px 0 6px; }
.page-head .meta, .meta { color: #6b7280; font-size: 13px; }


/* Buttons */
.btn { display: inline-block; padding: 11px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: all .15s; }
.btn-primary { background: #0b1f3a; color: #fff; }
.btn-primary:hover { background: #1a2f54; text-decoration: none; }
.btn-outline { background: #fff; color: #0b1f3a; border-color: #d1d5db; }
.btn-outline:hover { background: #f9fafb; text-decoration: none; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { display: block; width: 100%; }


/* ------------------------------------------------------------------ */
/*  Language switcher (header)                                         */
/* ------------------------------------------------------------------ */
.lang-switch { position: relative; margin-left: 20px; }
.lang-switch summary {
    list-style: none;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { background: rgba(255,255,255,.16); }
.lang-globe { font-size: 14px; }
.lang-code { font-weight: 700; letter-spacing: .05em; }
.lang-menu {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    list-style: none; padding: 6px; margin: 0;
    min-width: 200px;
    z-index: 200;
}
.lang-menu li { margin: 0; }
.lang-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    color: #0b1f3a;
    font-size: 14px;
    text-decoration: none;
}
.lang-menu a:hover { background: #f3f4f6; }
.lang-menu a.is-active { background: #eff6ff; color: #1152d4; font-weight: 600; }
.lang-tag { font-weight: 700; font-size: 11px; min-width: 22px; color: #6b7280; letter-spacing: .05em; }
.lang-menu a.is-active .lang-tag { color: #1152d4; }

/* RTL adjustments (Arabic) */
html[dir="rtl"] .lang-switch { margin-left: 0; margin-right: 20px; }
html[dir="rtl"] .lang-menu   { right: auto; left: 0; }

/* ------------------------------------------------------------------ */
/*  Mobile Navigation Bar (Fixed Bottom)                              */
/* ------------------------------------------------------------------ */
.mobile-nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #0b1f3a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: none; /* Hidden on desktop */
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}
.mobile-nav-item {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    flex: 1;
    height: 100%;
    transition: color 0.2s ease;
}
.mobile-nav-item:hover, .mobile-nav-item.is-active {
    color: #fff;
    text-decoration: none;
}
.mobile-nav-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

@media (max-width: 900px) {
    .mobile-nav-bar {
        display: flex;
    }
    /* Add padding bottom to body and footer so content isn't cut off by the fixed bar */
    body {
        padding-bottom: 64px;
    }
}

/* ------------------------------------------------------------------ */
/*  FAQ Accordion (details/summary style)                             */
/* ------------------------------------------------------------------ */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafbfc;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.faq-item[open] {
    border-color: #1152d4;
    background: #fff;
}
.faq-item summary {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #0b1f3a;
    cursor: pointer;
    outline: none;
    user-select: none;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '+';
    font-size: 18px;
    font-weight: 400;
    color: #6b7280;
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
    content: '−';
    color: #1152d4;
}
.faq-item p {
    margin: 0;
    padding: 0 16px 14px 16px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    border-top: 1px solid transparent;
}
.faq-item[open] p {
    border-top-color: #f3f4f6;
}

/* =================================================================== */
/*  RESTYLE ZARA v9 — Minimal B/W/Pink                                 */
/*  Override layer. To revert: delete this entire block to the EOF.    */
/* =================================================================== */
:root {
    /* Tokens */
    --jj-bg:        #ffffff;
    --jj-bg-soft:   #fafafa;
    --jj-ink:       #000000;
    --jj-ink-soft:  #6b6b6b;
    --jj-line:      #e8e8e8;
    --jj-line-soft: #f0f0f0;
    --jj-accent:    #ff7eab;   /* sutil rosa Zara — solo para foco/active */
    --jj-accent-2:  #fde2ec;   /* fondo accent suave */
    --jj-success:   #1a8754;
    --jj-warn:      #b45309;
    --jj-error:     #b91c1c;

    --jj-fs-xs: 10px;
    --jj-fs-sm: 12px;
    --jj-fs-md: 13px;
    --jj-fs-lg: 15px;
    --jj-fs-xl: 20px;
    --jj-fs-hero: 32px;

    --jj-radius: 0;            /* esquinas duras estilo Zara */
    --jj-radius-soft: 2px;
    --jj-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --jj-trans: 250ms var(--jj-ease);

    --jj-font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --jj-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

/* ---- Reset visual ---- */
html, body {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
    font-family: var(--jj-font-sans) !important;
    font-size: var(--jj-fs-md) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--jj-ink); }
a:hover { color: var(--jj-ink); text-decoration: underline; text-underline-offset: 3px; }

code {
    background: var(--jj-line-soft) !important;
    color: var(--jj-ink) !important;
    font-family: var(--jj-font-mono);
    font-size: 11px !important;
    padding: 1px 5px !important;
    border-radius: 0 !important;
}

/* ---- Header ---- */
.site-header {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
    border-bottom: 1px solid var(--jj-line);
}
.site-header .header-inner { padding: 14px 0 !important; }
.site-header .brand {
    color: var(--jj-ink) !important;
    font-family: var(--jj-font-mono) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    gap: 8px !important;
}
.site-header .brand-logo { width: 16px !important; height: 16px !important; color: var(--jj-ink) !important; }
.site-header .nav a {
    color: var(--jj-ink) !important;
    font-family: var(--jj-font-mono);
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-left: 20px !important;
    text-decoration: none !important;
}
.site-header .nav a:hover { opacity: 0.5; }

/* Lang switcher (rediseño) */
.lang-switch summary {
    background: transparent !important;
    color: var(--jj-ink) !important;
    border: 1px solid var(--jj-line) !important;
    border-radius: 0 !important;
    padding: 5px 10px !important;
    font-family: var(--jj-font-mono);
    font-size: 10px !important;
    letter-spacing: 0.1em;
}
.lang-switch summary:hover { background: var(--jj-bg-soft) !important; }
.lang-globe { display: none !important; }
.lang-menu {
    border: 1px solid var(--jj-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.lang-menu a {
    border-radius: 0 !important;
    font-family: var(--jj-font-mono);
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 14px !important;
}
.lang-menu a:hover { background: var(--jj-bg-soft) !important; }
.lang-menu a.is-active { background: var(--jj-ink) !important; color: var(--jj-bg) !important; }
.lang-tag { color: inherit !important; }

/* ---- Footer ---- */
.site-footer {
    border-top: 1px solid var(--jj-line);
    padding: 24px 0 !important;
    color: var(--jj-ink-soft) !important;
    font-family: var(--jj-font-mono);
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---- Hero ---- */
.hero { margin: 30px 0 24px !important; text-align: left; }
.hero h1 {
    font-size: var(--jj-fs-hero) !important;
    font-weight: 300 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
    color: var(--jj-ink) !important;
    margin: 0 0 10px !important;
}
.hero .lead {
    color: var(--jj-ink-soft) !important;
    font-size: var(--jj-fs-md) !important;
    line-height: 1.5;
    max-width: 480px;
}
.page-head h1 {
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em;
}

/* ---- Buttons (Zara: pixel font, uppercase, square) ---- */
.btn {
    font-family: var(--jj-font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    border-radius: var(--jj-radius) !important;
    padding: 10px 18px !important;
    border: 1px solid var(--jj-ink) !important;
    transition: all var(--jj-trans) !important;
    box-shadow: none !important;
}
.btn-primary {
    background: var(--jj-ink) !important;
    color: var(--jj-bg) !important;
}
.btn-primary:hover {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
}
.btn-outline {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
    border-color: var(--jj-ink) !important;
}
.btn-outline:hover { background: var(--jj-ink) !important; color: var(--jj-bg) !important; }
.btn-sm { padding: 7px 13px !important; font-size: 10px !important; letter-spacing: 0.12em !important; }
.btn-lg { padding: 14px 22px !important; font-size: 12px !important; letter-spacing: 0.16em !important; }
.btn-block { width: 100%; display: block !important; }

/* Submit button morphs from primary (search) to secondary (view all results)
   once the live preview shows real flights. Keep the transition gentle so the
   user notices the change without it feeling jarring. */
.btn { transition: background-color .18s ease, color .18s ease, border-color .18s ease, padding .18s ease, font-size .18s ease; }
.btn-lg.is-secondary { padding: 11px 18px !important; font-size: 11px !important; }

/* ---- Mobile nav bar (bottom on mobile only) ----
   El border-top antes era negro puro (var(--jj-ink)) y quedaba demasiado
   marcado al contrastar con el fondo blanco de la página. Ahora usamos la
   línea suave del sistema + una sombra superior muy ligera para que la barra
   "flote" sin agresividad. */
.mobile-nav-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid var(--jj-line) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.mobile-nav-item {
    color: var(--jj-ink-soft) !important;
    font-family: var(--jj-font-mono);
    font-size: 9px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.mobile-nav-item:hover,
.mobile-nav-item.is-active {
    color: var(--jj-ink) !important;
}
.mobile-nav-icon { font-size: 16px !important; }

.faq-item summary { font-size: var(--jj-fs-md) !important; padding: 14px 0; border-bottom: 1px solid var(--jj-line); }
.faq-item p { font-size: 12px !important; color: var(--jj-ink-soft); }

/* ---- Hero demo button ---- */
.hero .btn-outline {
    font-family: var(--jj-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    padding: 8px 14px !important;
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
    border: 1px solid var(--jj-ink) !important;
}
.hero .btn-outline:hover { background: var(--jj-accent-2) !important; border-color: var(--jj-accent) !important; }

/* ---- Animaciones suaves globales ---- */
a, button, input, .btn, .card, .ac-item, .flights-preview-card, .mobile-nav-item, .lang-switch summary, .chat-bubble {
    transition: all var(--jj-trans) !important;
}
*[hidden] { display: none !important; }

/* ---- Print clean (boarding pass) ---- */
@media print {
    .site-header, .site-footer, .mobile-nav-bar, .debug-console-widget,
    .lang-switch, .chat-container, .stepper, .nav { display: none !important; }
    body, .card { background: white !important; }
    .boarding-pass { border: 1px solid #000 !important; }
}

/* =================================================================== */
/*  NEW HEADER + DRAWERS (Zara restyle v10)                            */
/* =================================================================== */
.site-header .container.header-inner {
    padding: 16px 24px !important;       /* aire visible a los lados */
}
.header-actions { display: flex !important; align-items: center; gap: 4px; }
.header-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--jj-ink);
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0;
    cursor: pointer;
    transition: all var(--jj-trans);
    padding: 0;
}
.header-icon-btn:hover {
    border-color: var(--jj-ink);
    background: var(--jj-bg);
}
.header-icon-btn i {
    font-size: 18px;
    line-height: 1;
}
.header-icon-btn .bi-person { font-size: 19px; }
.header-icon-btn .bi-list   { font-size: 22px; }

/* Hide the previous lang-switch (replaced by drawer) */
.lang-switch { display: none !important; }


/* ─────────────────────────────────────────────────────────────────────
 *  TEMA DARK — overrides de variables cuando html[data-theme="dark"]
 *  Drawer.js aplica el atributo. localStorage 'jj-theme' lo persiste.
 *  Acepta `prefers-color-scheme: dark` si no hay preferencia explícita.
 * ───────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
    --jj-bg:        #0a0a0a;
    --jj-bg-soft:   #161616;
    --jj-ink:       #f5f5f5;
    --jj-ink-soft:  #9b9b9b;
    --jj-line:      #2a2a2a;
    --jj-line-soft: #1c1c1c;
    --jj-accent:    #ff7eab;     /* el rosa sigue siendo rosa */
    --jj-accent-2:  #3b1726;
    color-scheme: dark;
}
html[data-theme="dark"] body {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .drawer-header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .form-card {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .drawer-footer { background: var(--jj-bg-soft) !important; }
html[data-theme="dark"] .form-search .field-airport input,
html[data-theme="dark"] .form-search .grid-2 .field input {
    background-color: var(--jj-bg-soft) !important;
    border-color: var(--jj-line) !important;
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .btn-outline {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
    border-color: var(--jj-ink) !important;
}
html[data-theme="dark"] .btn-primary {
    background: var(--jj-ink) !important;
    color: var(--jj-bg) !important;
}
/* Mapa Positron en dark queda muy claro — añadimos un invert sutil con filter
   en vez de cambiar las tiles (más simple y reversible). */
html[data-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

/* ---- Mobile fine-tuning (header-only — el resto de reglas de
   este media query están en drawer.css con su contraparte) ---- */
@media (max-width: 600px) {
    .site-header .container.header-inner { padding: 12px 16px !important; }
    .header-icon-btn { width: 34px; height: 34px; }
    .header-icon-btn i { font-size: 16px; }
}

/* ============================================================
   WELCOME MODAL — primer load del home, sin cookie jj_welcomed.
   ============================================================ */
.welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: welcome-fade-in 0.35s ease-out;
}
@keyframes welcome-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.welcome-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 58, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.welcome-modal__card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    /* Antes box-shadow blur 80px provocaba un halo degradado visible a los
       lados del card (especialmente con backdrop translúcido). Lo redujimos
       a algo más contenido y vertical para que NO derrame lateralmente. */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 480px;
    padding: 32px 28px 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    animation: welcome-pop 0.4s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes welcome-pop {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.welcome-modal__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--jj-ink, #000);
    margin-bottom: 18px;
}
.welcome-modal__brand-name {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.welcome-modal__title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.2;
    color: var(--jj-ink, #0b1f3a);
}
.welcome-modal__claim {
    font-size: 15px;
    color: var(--jj-ink-soft, #6b6b6b);
    margin: 0 0 22px;
    line-height: 1.45;
}
/* Combobox minimal estilo Zara: label uppercase pequeño, select sin caja,
   solo línea inferior fina, chevron a la derecha, monospace en el value.
   La línea cambia a negra al hover/focus, sin animaciones llamativas. */
.welcome-modal__select-group {
    margin-bottom: 22px;
}
.welcome-modal__select-label {
    display: block;
    font: 700 10px ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--jj-ink-soft, #6b6b6b);
    margin-bottom: 6px;
}
.welcome-modal__select-wrap {
    position: relative;
    border-bottom: 1px solid var(--jj-ink, #000);
    padding: 0;
    transition: border-color 0.15s ease;
}
.welcome-modal__select-wrap:hover,
.welcome-modal__select-wrap:focus-within {
    border-bottom-color: var(--jj-ink, #000);
}
.welcome-modal__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    padding: 8px 26px 8px 0;
    font: 500 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--jj-ink, #000);
    cursor: pointer;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.welcome-modal__select::-ms-expand { display: none; }
.welcome-modal__select-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jj-ink, #000);
    pointer-events: none;
    transition: transform 0.15s ease;
}
.welcome-modal__select-wrap:hover .welcome-modal__select-chevron {
    transform: translateY(calc(-50% + 1px));
}
.welcome-modal__cta {
    width: 100%;
    background: var(--jj-ink, #0b1f3a);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.15s ease, background 0.15s ease;
}
.welcome-modal__cta:hover {
    background: #000;
    transform: translateY(-1px);
}
.welcome-modal__cta:active {
    transform: translateY(0);
}

/* Bloquea scroll del body cuando el modal está abierto */
body.welcome-modal-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .welcome-modal__card {
        padding: 24px 20px 20px;
        border-radius: 14px;
    }
    .welcome-modal__title { font-size: 22px; }
    .welcome-modal__claim { font-size: 14px; margin-bottom: 18px; }
    .welcome-modal__grid--lang { grid-template-columns: repeat(3, 1fr); }
}

/* RTL: ajusta la flecha del CTA */
html[dir="rtl"] .welcome-modal__cta svg {
    transform: scaleX(-1);
}

/* ============================================================
   Mobile (<=900px): ocultar .header-actions del site-header.
   Los iconos (corazón, cuenta, menú) están duplicados en la
   mobile-nav-bar inferior, así que en mobile solo se ven abajo
   y arriba queda únicamente el brand de JeranJets.
   ============================================================ */
@media (max-width: 900px) {
    .site-header .header-actions { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   DARK MODE — patch final de contraste y bordes.
   Regla absoluta: ningún texto claro sobre fondo claro. Si un
   card tiene background hardcoded (#fff), forzamos su fondo a
   var(--jj-bg) en dark para que el text (también claro) tenga
   contraste alto sobre fondo oscuro.
   ════════════════════════════════════════════════════════════ */

/* ── Drawer borders más suaves, integrados con el fondo dark ── */
html[data-theme="dark"] .drawer-left {
    border-right: 1px solid var(--jj-line) !important;
}
html[data-theme="dark"] .drawer-right {
    border-left: 1px solid var(--jj-line) !important;
}
html[data-theme="dark"] .drawer-header {
    border-bottom: 1px solid var(--jj-line) !important;
}
html[data-theme="dark"] .drawer-section {
    border-bottom: 1px solid var(--jj-line-soft) !important;
}

/* ── Stepper en dark ─────────────────────────────────────────
   El stepper-step NO debe tener background propio en ningún
   tema: es solo el wrapper (anchor o div); el visual va al
   .stepper-circle interior. Antes este bloque le metía
   background: var(--jj-ink), que en dark resolvía a BLANCO y
   tapaba todo el step. Lo dejamos transparente y solo coloreamos
   la línea base + el progreso. El círculo activo se pinta desde
   core.css con el accent rosa.
   ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .stepper::before {
    background: var(--jj-line) !important;
}
html[data-theme="dark"] .stepper-progress {
    background: var(--jj-accent) !important;
}
html[data-theme="dark"] .stepper-step,
html[data-theme="dark"] .stepper-step.is-active,
html[data-theme="dark"] .stepper-step.is-done,
html[data-theme="dark"] .stepper-step.is-completed {
    background: transparent !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .stepper-label,
html[data-theme="dark"] .stepper-step-label {
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .stepper-step.is-active + .stepper-label,
html[data-theme="dark"] .stepper-step.is-active .stepper-step-label,
html[data-theme="dark"] .stepper-step.is-active .stepper-label {
    color: var(--jj-ink) !important;
}

/* ── Compare items dentro del drawer: card con fondo dark ── */
html[data-theme="dark"] .compare-item {
    background: var(--jj-bg) !important;
    border-color: var(--jj-line) !important;
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .compare-item__model,
html[data-theme="dark"] .compare-item__code,
html[data-theme="dark"] .compare-item__price {
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .compare-item__category,
html[data-theme="dark"] .compare-item__city,
html[data-theme="dark"] .compare-item__meta,
html[data-theme="dark"] .compare-item__arrow {
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .compare-item__footer {
    border-top-color: var(--jj-line-soft) !important;
}
html[data-theme="dark"] .compare-item__remove {
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .compare-item__remove:hover {
    background: rgba(255, 126, 171, 0.10) !important;
}
html[data-theme="dark"] .compare-empty,
html[data-theme="dark"] .compare-empty__hint {
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .compare-empty__title {
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .compare-footer {
    background: var(--jj-bg-soft) !important;
    border-top-color: var(--jj-line) !important;
}

/* ── Step3 summary (confirm) con fondo dark coherente ── */
html[data-theme="dark"] .step3-summary {
    background: var(--jj-bg) !important;
    border-color: var(--jj-line) !important;
}
html[data-theme="dark"] .step3-summary__head {
    border-bottom-color: var(--jj-line-soft) !important;
}
html[data-theme="dark"] .step3-summary__title,
html[data-theme="dark"] .step3-summary__label,
html[data-theme="dark"] .step3-summary__note {
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .step3-summary__value,
html[data-theme="dark"] .step3-summary__route-value,
html[data-theme="dark"] .step3-summary__brand {
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .step3-summary__item--span {
    border-top-color: var(--jj-line-soft) !important;
}

/* ── Step3 info modal (números en círculos) en dark ── */
html[data-theme="dark"] .step3-info-list li::before {
    background: var(--jj-bg-soft) !important;
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .step3-info-list__title {
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .step3-info-list__desc,
html[data-theme="dark"] .step3-info-list li {
    color: var(--jj-ink-soft) !important;
}

/* ── Welcome modal en dark ── */
html[data-theme="dark"] .welcome-modal__card {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .welcome-modal__title,
html[data-theme="dark"] .welcome-modal__brand-name {
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .welcome-modal__claim,
html[data-theme="dark"] .welcome-modal__select-label {
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .welcome-modal__select-wrap {
    border-bottom-color: var(--jj-ink) !important;
}
html[data-theme="dark"] .welcome-modal__select {
    color: var(--jj-ink) !important;
    background: transparent !important;
}
html[data-theme="dark"] .welcome-modal__select option {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
}

/* ── Flight cards (results) en dark ── */
html[data-theme="dark"] .flight-card,
html[data-theme="dark"] .trip-row {
    background: var(--jj-bg) !important;
    border-color: var(--jj-line) !important;
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .flight-model,
html[data-theme="dark"] .price-value,
html[data-theme="dark"] .flight-stat__value {
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .flight-category,
html[data-theme="dark"] .flight-stat__label,
html[data-theme="dark"] .flight-airport {
    color: var(--jj-ink-soft) !important;
}

/* ── Heart btn light en dark: el gris #d1d5db se ve casi
   invisible sobre fondo dark — subimos a un gris medio ── */
html[data-theme="dark"] .heart-btn--light {
    color: var(--jj-line) !important;
}
html[data-theme="dark"] .heart-btn--light.is-saved {
    color: var(--jj-accent) !important;
}

/* ── Drawer info blocks (contact, legal) ── */
html[data-theme="dark"] .drawer-info-block {
    border-bottom-color: var(--jj-line-soft) !important;
}
html[data-theme="dark"] .drawer-info-title {
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .drawer-info-text,
html[data-theme="dark"] .drawer-info-kv dd {
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .drawer-info-kv dt,
html[data-theme="dark"] .drawer-info-muted {
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .drawer-info-kv dd a,
html[data-theme="dark"] .drawer-info-text a {
    color: var(--jj-ink) !important;
}

/* ── Mobile nav bar — bg dark, no blanco ── */
html[data-theme="dark"] .mobile-nav-bar {
    background: rgba(10, 10, 10, 0.96) !important;
    border-top-color: var(--jj-line) !important;
}
html[data-theme="dark"] .mobile-nav-item {
    color: var(--jj-ink-soft) !important;
}
html[data-theme="dark"] .mobile-nav-item:hover,
html[data-theme="dark"] .mobile-nav-item.is-active {
    color: var(--jj-ink) !important;
}

/* ── Site header en dark: border-bottom y nav links ── */
html[data-theme="dark"] .site-header {
    border-bottom: 1px solid var(--jj-line);
}
html[data-theme="dark"] .site-header .nav a {
    color: var(--jj-ink) !important;
}

/* ── Backdrop más oscuro en dark theme ── */
html[data-theme="dark"] .drawer-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* ── Welcome modal backdrop en dark ── */
html[data-theme="dark"] .welcome-modal__backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
}