/* ============================================================
   STEP 3 — Confirmación / Reserva  ·  CSS aislado
   ============================================================
   Reglas DURAS para que el paso 3 sea independiente:

   1. TODAS las clases de este archivo empiezan por `.step3-`.
      Ejemplos: .step3-summary, .step3-passenger-form, .step3-payment-card.
      NO usar nombres genéricos (.card, .field, .summary) que ya existen
      en core.css — colisión asegurada.

   2. NO modificar variables globales (--jj-*). Si necesitas tokens
      específicos del paso 3, defínelos como `--step3-*`.

   3. NO usar !important salvo para anular un estilo legacy concreto y
      documentado — comentar siempre el motivo encima.

   4. Cada bloque de UI nueva → su propia sección con título y comentario.

   5. Mobile-first dentro de este archivo. Media queries solo aquí, no
      en core.css.

   6. Si añades un componente que vas a reusar en otros pasos, MUÉVELO
      a core.css. Si solo es para paso 3, vive aquí.

   Cargado desde views/layout.php SIEMPRE (es ligero); las clases
   step3-* solo aplican en views/confirm.php así que no afecta a
   otras páginas aunque esté en el bundle global.
   ============================================================ */


/* ── Tokens locales del paso 3 (opcionales) ───────────────── */
:root {
    /* Acento del paso 3: si quieres un highlight distinto al rosa
       de la bible, defínelo aquí (no pisas --jj-accent global). */
    --step3-accent: var(--jj-accent, #ff7eab);
    --step3-section-gap: 24px;
}


/* ── Layout base de la página ─────────────────────────────── */
/* (vacío — empieza a escribir aquí mañana) */


/* ── Resumen del vuelo ────────────────────────────────────── */
/* (vacío) */


/* ── Formulario de pasajero / contacto ────────────────────── */
/* (vacío) */


/* ── Pago / Términos ──────────────────────────────────────── */
/* (vacío) */


/* ── Estados de carga / éxito / error ─────────────────────── */
/* (vacío) */


/* ── Responsive mobile ────────────────────────────────────── */
@media (max-width: 600px) {
    /* (vacío) */
}

/* ════════════════════════════════════════════════════════════
   TRIP SUMMARY  ·  Paso 3 (confirm)
   ──────────────────────────────────────────────────────────
   Estructura:
     ┌───────────────────────────────────────────────┐
     │ ✈  TRIP SUMMARY                              │
     ├───────────────────────────────────────────────┤
     │ ROUTE                                         │
     │ 📍 Madrid → 📍 London (fila completa)         │
     ├───────────────────┬───────────────────────────┤
     │ DATE              │ PAX                       │
     │ 2026-05-29        │ 4                         │
     ├───────────────────┼───────────────────────────┤
     │ FLIGHT TIME       │ AIRCRAFT                  │
     │ 2h 15m            │ Falcon 900C               │
     ├───────────────────┴───────────────────────────┤
     │ ESTIMATE                                      │
     │ €99,109 (full row con énfasis)                │
     └───────────────────────────────────────────────┘
   ════════════════════════════════════════════════════════════ */

.step3-summary {
    /* Usa var(--jj-bg) para que el card flippe en dark mode (de #fff a #0a0a0a).
       El texto interno usa var(--jj-ink) — flippe consistente. */
    background: var(--jj-bg, #fff);
    color: var(--jj-ink, #0b1f3a);
    border: 1px solid var(--jj-line, #e8e8e8);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 18px;
}

/* ── Header con brand-logo SVG + título ── */
.step3-summary__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--jj-line-soft, #f0f0f0);
}
.step3-summary__brand {
    width: 20px;
    height: 20px;
    color: var(--jj-ink, #000);
    flex-shrink: 0;
}
.step3-summary__title {
    margin: 0;
    font: 700 11px ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--jj-ink-soft, #6b6b6b);
}

/* ── Labels de cada campo ── */
.step3-summary__label {
    font: 700 9.5px ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--jj-ink-soft, #6b6b6b);
    margin-bottom: 4px;
}

/* ── Valor por defecto ── */
.step3-summary__value {
    font: 600 14px -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--jj-ink, #0b1f3a);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
.step3-summary__value--ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.step3-summary__value--strong {
    font-size: 18px;
    font-weight: 700;
}
.step3-summary__note {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--jj-ink-soft, #6b6b6b);
    margin-top: 2px;
}

/* ── Route: fila full-width arriba ── */
.step3-summary__route {
    margin-bottom: 18px;
}
.step3-summary__route-value {
    /* Reutiliza .kv-route + .route-leg de core.css para los pins y la flecha */
    font: 600 14px -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--jj-ink, #0b1f3a);
    line-height: 1.4;
}

/* ── Grid 2 columnas para el resto ── */
.step3-summary__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 22px;
}
.step3-summary__item--span {
    grid-column: 1 / -1; /* ocupa las dos columnas */
    padding-top: 14px;
    border-top: 1px solid var(--jj-line-soft, #f0f0f0);
}

/* ── Responsive mobile: una sola columna para legibilidad ── */
@media (max-width: 600px) {
    .step3-summary {
        padding: 18px 18px;
    }
    .step3-summary__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ════════════════════════════════════════════════════════════
   INFO MODAL · lista de pasos con números en círculos suaves
   ──────────────────────────────────────────────────────────
   Se ve en el modal "What's next?" del confirm. Sustituye el
   <ol> con list-style decimal por un counter custom que pinta
   cada número dentro de un círculo gris claro a la izquierda.
   ════════════════════════════════════════════════════════════ */
.step3-info-list {
    counter-reset: step3-step;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.step3-info-list li {
    counter-increment: step3-step;
    position: relative;
    padding-left: 44px;
    min-height: 30px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.55;
}
.step3-info-list li::before {
    content: counter(step3-step);
    position: absolute;
    left: 0;
    top: -1px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--jj-line-soft, #f0f0f0);
    color: var(--jj-ink-soft, #6b6b6b);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12px ui-monospace, "SF Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
}
.step3-info-list__title {
    display: block;
    color: var(--jj-ink, #0b1f3a);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}
.step3-info-list__desc {
    color: var(--jj-ink-soft, #6b7280);
    font-size: 13px;
    line-height: 1.5;
}

/* RTL: el círculo va a la derecha */
html[dir="rtl"] .step3-info-list li {
    padding-left: 0;
    padding-right: 44px;
}
html[dir="rtl"] .step3-info-list li::before {
    left: auto;
    right: 0;
}