/**
 * CHECKOUT DARK PREMIUM — Identidad de la página principal + cards blancas
 * Paleta: fondo #080d1a (ink-900) + blobs brand-500/indigo + cards blancas flotando
 * Inter font · mismo lenguaje visual que el diseño Moderno
 * Carga DESPUÉS de checkout-tech.css — gana la cascada.
 */

/* ================================================================
   FUENTE — Inter como en la página principal
   ================================================================ */
body,
input, textarea, select, button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ================================================================
   VARIABLES
   ================================================================ */
:root {
    /* Brand (idéntico a moderno.css) */
    --co-brand:        #3b82f6;
    --co-brand-hover:  #2563eb;
    --co-brand-d:      #1d4ed8;
    --co-brand-dd:     #1e3a8a;
    --co-brand-light:  #60a5fa;
    --co-purple:       #2563eb;
    --co-teal:         #0e9899;
    --co-glow:         59 130 246;

    /* Fondos */
    --co-bg:           #080d1a;
    --co-bg-mid:       #0c1426;

    /* Cards blancas (formularios — legibilidad) */
    --co-card-bg:      #ffffff;
    --co-card-border:  rgba(255, 255, 255, 0.10);
    --co-card-shadow:  0 4px 32px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.25);

    /* Dark glass (sidebar, stepper, breadcrumb) */
    --co-glass-bg:     rgba(255,255,255,0.04);
    --co-glass-border: rgba(255,255,255,0.08);
    --co-glass-shadow: 0 8px 32px rgba(0,0,0,0.5);

    /* Texto sobre fondos oscuros */
    --co-text-on-dark:   rgba(255,255,255,0.95);
    --co-text-on-dark-2: rgba(255,255,255,0.60);

    /* Texto sobre cards blancas */
    --co-text-on-light:   #0f172a;
    --co-text-on-light-2: #475569;

    /* Reutilizados por los selectores del tema original */
    --checkout-accent:       var(--co-brand);
    --checkout-accent-hover: var(--co-brand-hover);
    --checkout-accent-light: var(--co-brand-light);
    --checkout-purple:       var(--co-purple);
    --checkout-bg:           var(--co-bg);
    --checkout-bg-card:      var(--co-card-bg);
    --checkout-bg-section:   rgba(255,255,255,0.03);
    --checkout-border:       var(--co-glass-border);
    --checkout-border-light: var(--co-glass-border);
    --checkout-shadow-sm:    0 2px 8px rgba(0,0,0,0.35);
    --checkout-shadow-md:    var(--co-card-shadow);
    --checkout-shadow-lg:    0 12px 40px rgba(0,0,0,0.5);
    --checkout-shadow-xl:    0 20px 60px rgba(0,0,0,0.6);
    --checkout-text:         var(--co-text-on-light);
}

/* ================================================================
   BODY — fondo oscuro ink-900 con blobs de color flotando
   ================================================================ */
body {
    background: var(--co-bg) !important;
    color-scheme: dark;
    position: relative;
    min-height: 100vh;
}

/* Blob 1 — brand azul, arriba-derecha */
body::before {
    content: '';
    position: fixed;
    top: -240px;
    right: -200px;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.22) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Blob 2 — indigo/púrpura, abajo-izquierda */
body::after {
    content: '';
    position: fixed;
    bottom: -180px;
    left: -160px;
    width: 750px;
    height: 750px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Grano sutil sobre el fondo */
#checkout-grain-overlay,
.checkout-grain {
    display: none; /* si el PHP lo genera, lo ocultamos; ya lo hacemos con CSS */
}

/* ================================================================
   HEADER — dark premium con texto blanco + degradé de marca
   ================================================================ */
.checkout-header-premium {
    background: linear-gradient(
        160deg,
        rgba(8,13,26,1) 0%,
        rgba(15,30,66,0.95) 50%,
        rgba(8,13,26,1) 100%
    ) !important;
    border-bottom: 1px solid rgba(59,130,246,0.15) !important;
    box-shadow:
        0 1px 0 rgba(59,130,246,0.20),
        0 4px 40px rgba(0,0,0,0.6) !important;
    min-height: auto;
    padding: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Línea glow superior del header */
.checkout-header-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--co-brand-d), var(--co-brand), var(--co-purple), var(--co-brand));
    background-size: 200% 100%;
    animation: headerGlowShift 6s linear infinite;
}

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

/* Blob decorativo dentro del header */
.checkout-header-premium::after {
    content: '';
    position: absolute;
    top: -80px; right: -100px;
    width: 450px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.checkout-header-content {
    padding: 2.75rem 1.5rem 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Título — efecto titanio igual que en la página principal */
.checkout-titulo-principal {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    text-shadow: none !important;
    margin: 0 0 0.5rem 0 !important;
    /* Degradé animado igual al texto titanio del moderno */
    background: linear-gradient(100deg,
        #fff 10%,
        #c7d8f5 28%,
        #fff 50%,
        var(--co-brand-light),
        #fff 90%
    ) 0 0 / 250% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: 8s linear infinite checkoutTitleShine;
}

@keyframes checkoutTitleShine {
    to { background-position: 250%; }
}

.checkout-subtitulo {
    font-size: 1rem !important;
    color: rgba(255,255,255,0.55) !important;
    opacity: 1 !important;
    font-weight: 400 !important;
    max-width: 440px;
    margin: 0 auto !important;
}

/* Línea decorativa bajo el subtítulo */
.checkout-header-content::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--co-brand), var(--co-purple));
    margin: 1.25rem auto 0;
    box-shadow: 0 0 12px rgba(59,130,246,0.5);
}

/* Badge de modo invitado / autenticado */
.checkout-badge-invitado,
.checkout-badge-usuario {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.75) !important;
}

/* ================================================================
   ÁREA PRINCIPAL — z-index para que quede sobre los blobs
   ================================================================ */
#checkout-premium-wrapper,
.checkout-wrapper,
.checkout-premium-layout {
    position: relative;
    z-index: 1;
}

/* ================================================================
   BREADCRUMB — dark glass
   ================================================================ */
.checkout-breadcrumb-premium {
    background: var(--co-glass-bg) !important;
    border-radius: 14px !important;
    border: 1px solid var(--co-glass-border) !important;
    box-shadow: var(--co-glass-shadow) !important;
    color: var(--co-text-on-dark-2) !important;
}

.checkout-breadcrumb-premium a,
.checkout-breadcrumb-premium span {
    color: var(--co-text-on-dark-2) !important;
}

.checkout-breadcrumb-premium .active,
.checkout-breadcrumb-premium .text-checkout {
    color: var(--co-brand-light) !important;
}

.checkout-breadcrumb-premium i {
    color: var(--co-text-on-dark-2) !important;
}

/* ================================================================
   STEPPER — dark glass con pasos de marca
   ================================================================ */
.checkout-pasos {
    background: var(--co-glass-bg) !important;
    border: 1px solid var(--co-glass-border) !important;
    box-shadow: var(--co-glass-shadow) !important;
    border-radius: 20px !important;
}

/* Paso activo */
.checkout-paso.activo .checkout-paso-icono {
    background: linear-gradient(135deg, var(--co-brand) 0%, var(--co-purple) 100%) !important;
    box-shadow:
        0 4px 18px rgba(var(--co-glow), 0.55),
        0 0 0 4px rgba(var(--co-glow), 0.12) !important;
}

/* Paso completado */
.checkout-paso.completado .checkout-paso-icono {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow:
        0 4px 14px rgba(16,185,129,0.35),
        0 0 0 4px rgba(16,185,129,0.10) !important;
}

/* Paso pendiente */
.checkout-paso.pendiente .checkout-paso-icono {
    background: rgba(255,255,255,0.08) !important;
    border: 2px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.30) !important;
}

/* Celdas individuales del stepper — transparente para no romper el glass */
.checkout-paso,
.checkout-paso-item {
    background: transparent !important;
}

/* Labels de paso */
.checkout-paso-label,
.checkout-paso-texto {
    color: rgba(255,255,255,0.55) !important;
}

.checkout-paso.activo .checkout-paso-label,
.checkout-paso.activo .checkout-paso-texto {
    color: var(--co-brand-light) !important;
    font-weight: 600 !important;
}

.checkout-paso.completado .checkout-paso-label,
.checkout-paso.completado .checkout-paso-texto {
    color: rgba(255,255,255,0.70) !important;
}

/* Línea entre pasos */
.checkout-paso:not(:last-child)::after {
    background: rgba(255,255,255,0.10) !important;
    height: 2px !important;
}

.checkout-paso.completado:not(:last-child)::after {
    background: linear-gradient(90deg, #10b981 0%, var(--co-brand) 100%) !important;
}

/* ================================================================
   CARDS FORMULARIO — blancas flotando sobre el oscuro
   La clave del diseño: contraste máximo = premium
   ================================================================ */
.checkout-card-premium {
    background: var(--co-card-bg) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: var(--co-card-shadow) !important;
    border-radius: 20px !important;
    animation: checkoutCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.checkout-col-sidebar .checkout-card-premium {
    animation-delay: 0.08s;
}

@keyframes checkoutCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card header — blanco con acento lateral brand (sidebar) */
.checkout-card-header-premium {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    padding: 1.375rem 1.75rem !important;
    position: relative !important;
    border-radius: 20px 20px 0 0 !important;
}

/* Firma de diseño: borde lateral degradé */
.checkout-card-header-premium::before {
    content: '';
    position: absolute;
    left: 0; top: 1rem; bottom: 1rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--co-brand) 0%, var(--co-purple) 100%);
    box-shadow: 2px 0 8px rgba(59,130,246,0.25);
}

.checkout-card-header-premium::after {
    display: none;
}

.checkout-card-header-premium h4,
.checkout-card-header-premium h3 {
    color: #0f172a !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

/* ================================================================
   CARD FORMULARIO (columna izquierda) — identidad brand
   Header oscuro con degradé + cuerpo con tinte azul suave
   ================================================================ */

/* Fondo del card: off-white azulado en lugar de blanco puro */
.checkout-col-main .checkout-card-premium {
    background: #f4f7ff !important;
    border: 1px solid rgba(59,130,246,0.18) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(59,130,246,0.06) !important;
}

/* Header oscuro — mismo lenguaje visual que el sidebar */
.checkout-col-main .checkout-card-header-premium {
    background: linear-gradient(135deg, #0d1b38 0%, #0f2050 55%, #0e1c3d 100%) !important;
    border-bottom: 1px solid rgba(59,130,246,0.25) !important;
    border-radius: 20px 20px 0 0 !important;
}

/* Borde lateral: sobre fondo oscuro, usar glow en lugar de sombra */
.checkout-col-main .checkout-card-header-premium::before {
    background: linear-gradient(180deg, #60a5fa 0%, #818cf8 100%);
    box-shadow: 2px 0 12px rgba(96,165,250,0.45);
}

/* Título del header: blanco sobre oscuro */
.checkout-col-main .checkout-card-header-premium h4,
.checkout-col-main .checkout-card-header-premium h3,
.checkout-col-main .checkout-card-header-premium .checkout-card-titulo {
    color: rgba(255,255,255,0.95) !important;
}

/* Ícono del header: más brillante sobre fondo oscuro */
.checkout-col-main .checkout-card-header-icono {
    background: rgba(59,130,246,0.20) !important;
    border: 1px solid rgba(96,165,250,0.35) !important;
    color: #60a5fa !important;
}

/* Body del card: tinte azul suave */
.checkout-col-main .checkout-card-body-premium {
    background: #f4f7ff !important;
    border-radius: 0 0 20px 20px !important;
}

/* ================================================================
   SECCIONES INTERNAS — títulos con acento brand
   ================================================================ */

/* Accordion header: tinte brand + borde izquierdo acento */
.checkout-col-main .checkout-accordion-header {
    background: rgba(59,130,246,0.04) !important;
    border-left: 3px solid var(--co-brand) !important;
    border-radius: 0 8px 8px 0 !important;
    padding-left: 1rem !important;
    transition: background 0.2s ease !important;
}

.checkout-col-main .checkout-accordion-header:hover {
    background: rgba(59,130,246,0.09) !important;
}

/* Títulos de sección: azul navy profundo */
.checkout-col-main .checkout-seccion-titulo {
    color: #1e40af !important;
    font-weight: 700 !important;
}

/* Separadores entre secciones: degradé brand */
.checkout-col-main .checkout-seccion-formulario {
    border-bottom: 1px solid transparent !important;
    border-image: linear-gradient(90deg, rgba(59,130,246,0.30) 0%, rgba(99,102,241,0.15) 50%, transparent 100%) 1 !important;
}

/* Ícono de sección en formulario: más visible sobre fondo azulado */
.checkout-col-main .checkout-seccion-icono {
    background: linear-gradient(135deg,
        rgba(59,130,246,0.14) 0%,
        rgba(99,102,241,0.12) 100%
    ) !important;
    border: 1px solid rgba(59,130,246,0.22) !important;
}

/* Body del card */
.checkout-card-body-premium {
    background: #ffffff !important;
    border-radius: 0 0 20px 20px !important;
}

/* ================================================================
   SECCIONES INTERNAS (dentro de cards blancas)
   ================================================================ */
.checkout-seccion-formulario {
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

.checkout-seccion-titulo {
    font-size: 1rem !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    margin-bottom: 1.25rem !important;
}

.checkout-seccion-icono {
    width: 36px; height: 36px;
    background: linear-gradient(135deg,
        rgba(59,130,246,0.08) 0%,
        rgba(99,102,241,0.08) 100%
    ) !important;
    border: 1px solid rgba(59,130,246,0.14) !important;
    border-radius: 10px !important;
    color: var(--co-brand) !important;
}

.checkout-accordion-header {
    background: transparent !important;
    border: none !important;
    color: #1e293b !important;
}

.checkout-accordion-header:hover {
    background: rgba(59,130,246,0.03) !important;
}

/* ================================================================
   INPUTS — light sobre fondo blanco de card
   ================================================================ */
.checkout-input-premium {
    background: #f5f8ff !important;
    border: 2px solid #7eb3f7 !important;
    color: #0f172a !important;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.checkout-input-premium:hover {
    background: #eef4ff !important;
    border-color: #4e95f5 !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.12) !important;
}

.checkout-input-premium:focus {
    background: #ffffff !important;
    border-color: var(--co-brand) !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.20), 0 2px 8px rgba(59,130,246,0.12) !important;
}

/* Estado inválido */
.field-invalid .checkout-input-premium {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.14) !important;
}

/* Estado válido */
.field-valid .checkout-input-premium {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 3px rgba(52,211,153,0.14) !important;
}

/* ================================================================
   INPUT BUSCAR MAPA — mismo estilo que los inputs premium
   ================================================================ */
.map-search-input {
    background: #f5f8ff !important;
    border: 2px solid #7eb3f7 !important;
    color: #0f172a !important;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.map-search-input:hover {
    border-color: #4e95f5 !important;
    background: #eef4ff !important;
}

.map-search-input:focus {
    background: #ffffff !important;
    border-color: var(--co-brand) !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.20) !important;
}

/* ================================================================
   BOTÓN BUSCAR — fondo sólido brand, texto blanco visible
   ================================================================ */
.map-search-btn,
.checkout-col-main .map-search-btn,
.map-search-container .map-search-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(59,130,246,0.40) !important;
}

.map-search-btn:hover,
.checkout-col-main .map-search-btn:hover,
.map-search-container .map-search-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    box-shadow: 0 6px 18px rgba(59,130,246,0.55) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.map-search-btn span,
.map-search-btn i,
.map-search-container .map-search-btn span,
.map-search-container .map-search-btn i {
    color: #ffffff !important;
}

/* Span visible por defecto; se oculta en ≤480px dentro del @media */

/* ================================================================
   ETIQUETA OPENSTREETMAP — contraste legible sobre fondo oscuro
   ================================================================ */
#map-provider-info {
    background: rgba(59,130,246,0.12) !important;
    border: 1px solid rgba(59,130,246,0.30) !important;
    color: #93c5fd !important;
}

#map-provider-info i {
    color: #60a5fa !important;
}

.checkout-label-premium {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.02em !important;
}

/* ================================================================
   MÉTODOS DE PAGO — dentro de card blanca
   ================================================================ */
.checkout-metodo-card {
    background: #f8faff !important;
    border: 2px solid rgba(59,130,246,0.10) !important;
    border-radius: 14px !important;
    color: #1e293b !important;
}

.checkout-metodo-card:hover {
    background: #f0f4ff !important;
    border-color: rgba(59,130,246,0.25) !important;
}

.checkout-metodo-pago input:checked + .checkout-metodo-card {
    background: linear-gradient(135deg,
        rgba(59,130,246,0.07) 0%,
        rgba(99,102,241,0.04) 100%
    ) !important;
    border-color: var(--co-brand) !important;
    box-shadow:
        0 0 0 3px rgba(59,130,246,0.10),
        0 2px 8px rgba(59,130,246,0.15) !important;
}

/* ================================================================
   MAPA — instrucciones en azul suave sobre blanco
   ================================================================ */
.map-hint-overlay {
    background: linear-gradient(
        0deg,
        rgba(255,255,255,0.92) 0%,
        rgba(255,255,255,0.72) 60%,
        transparent 100%
    ) !important;
    color: #1e293b !important;
}

.map-hint-overlay i { color: var(--co-brand) !important; }

.checkout-map-container {
    border: 1.5px solid rgba(59,130,246,0.18) !important;
    border-radius: 14px !important;
}

.map-instructions {
    background: #f8faff !important;
    border: 1px solid rgba(59,130,246,0.10) !important;
    color: #1e293b !important;
}

/* ================================================================
   SIDEBAR — dark glass premium (mismo lenguaje que el moderno)
   ================================================================ */
.checkout-col-sidebar .checkout-card-premium {
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px !important;
}

/* Header del sidebar */
.checkout-col-sidebar .checkout-card-header-premium {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 20px 20px 0 0 !important;
}

.checkout-col-sidebar .checkout-card-header-premium h4,
.checkout-col-sidebar .checkout-card-header-premium h3,
.checkout-col-sidebar .checkout-resumen-header h4 {
    color: rgba(255,255,255,0.95) !important;
}

.checkout-col-sidebar .checkout-card-header-icono {
    background: rgba(59,130,246,0.15) !important;
    border: 1px solid rgba(59,130,246,0.25) !important;
    color: var(--co-brand-light) !important;
}

/* Body del sidebar */
.checkout-col-sidebar .checkout-card-body-premium,
.checkout-col-sidebar .checkout-resumen-body {
    background: transparent !important;
}

/* Items del resumen */
.checkout-resumen-item {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
}

.checkout-resumen-item:hover {
    background: rgba(255,255,255,0.07) !important;
}

.checkout-resumen-nombre,
.checkout-resumen-variante,
.checkout-resumen-precio {
    color: rgba(255,255,255,0.9) !important;
}

.checkout-resumen-precio-original {
    color: rgba(255,255,255,0.35) !important;
}

.checkout-resumen-precio-descuento,
.checkout-items-count {
    color: var(--co-brand-light) !important;
}

/* Contador de ítems */
.checkout-items-count {
    background: rgba(59,130,246,0.20) !important;
    border: 1px solid rgba(59,130,246,0.30) !important;
    border-radius: 9999px !important;
    color: var(--co-brand-light) !important;
    font-weight: 700 !important;
}

/* Totales */
.checkout-totales {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
}

.checkout-total-label,
.checkout-total-fila {
    color: rgba(255,255,255,0.70) !important;
}

.checkout-total-valor {
    color: rgba(255,255,255,0.90) !important;
}

.checkout-total-fila.total-final {
    border-top: 1px solid rgba(255,255,255,0.10) !important;
}

.checkout-total-fila.total-final .checkout-total-label,
.checkout-total-fila.total-final .checkout-total-valor {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Precio final grande */
.checkout-precio-total,
.checkout-total-precio {
    color: var(--co-brand-light) !important;
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(96,165,250,0.35);
}

/* Subtotal, envío, descuento */
.checkout-subtotal-valor   { color: rgba(255,255,255,0.80) !important; }
.checkout-envio-valor      { color: #34d399 !important; }
.checkout-descuento-valor  { color: #34d399 !important; }

/* Garantías en sidebar */
.checkout-col-sidebar .checkout-politicas,
.checkout-col-sidebar .checkout-garantias {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
}

.checkout-col-sidebar .checkout-politicas *,
.checkout-col-sidebar .checkout-garantias * {
    color: rgba(255,255,255,0.70) !important;
}

.checkout-col-sidebar .checkout-garantias i,
.checkout-col-sidebar .checkout-politicas i {
    color: var(--co-brand-light) !important;
}

/* Trust badges en sidebar */
.checkout-col-sidebar .checkout-trust-badges {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
}

.checkout-trust-badge-item {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
}

.checkout-trust-badge-item strong,
.checkout-trust-badge-item span,
.checkout-trust-badge-item p {
    color: rgba(255,255,255,0.85) !important;
}

.checkout-trust-badge-item .badge-icon {
    background: rgba(59,130,246,0.15) !important;
    border: 1px solid rgba(59,130,246,0.20) !important;
    color: var(--co-brand-light) !important;
    border-radius: 10px !important;
}

/* ================================================================
   BOTÓN FINALIZAR — CTA con glow idéntico al main page
   ================================================================ */
.checkout-btn-finalizar {
    background: linear-gradient(135deg,
        var(--co-brand-d) 0%,
        var(--co-brand-hover) 45%,
        var(--co-brand) 100%
    ) !important;
    box-shadow:
        0 4px 20px rgba(var(--co-glow), 0.45),
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -2px 4px rgba(30,58,138,0.35) !important;
    border-radius: 16px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 1.1rem 2rem !important;
    color: #fff !important;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efecto shine sobre el botón — igual que cta-shine del moderno */
.checkout-btn-finalizar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(255,255,255,0.18) 48%,
        rgba(255,255,255,0.25) 50%,
        rgba(255,255,255,0.18) 52%,
        transparent 70%
    );
    transform: translateX(-150%);
    animation: ctaShineIdle 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ctaShineIdle {
    0%, 85%   { transform: translateX(-150%); opacity: 0.6; }
    92%        { transform: translateX(150%);  opacity: 0.6; }
    to         { transform: translateX(150%);  opacity: 0; }
}

.checkout-btn-finalizar:hover:not(:disabled) {
    background: linear-gradient(135deg,
        #1e3a8a 0%,
        var(--co-brand-d) 45%,
        var(--co-brand-hover) 100%
    ) !important;
    box-shadow:
        0 8px 32px rgba(var(--co-glow), 0.65),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 4px rgba(30,58,138,0.40) !important;
    transform: translateY(-2px) !important;
}

.checkout-btn-finalizar:disabled {
    background: linear-gradient(135deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.05) 100%
    ) !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.30) !important;
    cursor: not-allowed !important;
}

/* Botones secundarios */
.checkout-btn-premium.btn-secondary {
    background: rgba(59,130,246,0.10) !important;
    border: 1px solid rgba(59,130,246,0.25) !important;
    color: var(--co-brand-light) !important;
}

.checkout-btn-premium.btn-secondary:hover {
    background: rgba(59,130,246,0.18) !important;
    border-color: var(--co-brand) !important;
}

/* ================================================================
   SECCIONES POLÍTICAS Y TRUST (fuera de sidebar)
   ================================================================ */
.checkout-politicas {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: var(--co-glass-shadow) !important;
    border-radius: 14px !important;
    color: rgba(255,255,255,0.70) !important;
}

.checkout-trust-badges {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: var(--co-glass-shadow) !important;
    border-radius: 14px !important;
}

/* ================================================================
   BARRA FLOTANTE MOBILE — dark glass con CTA azul
   ================================================================ */
.checkout-floating-bar {
    background: rgba(8,13,26,0.92) !important;
    border-top: 1px solid rgba(59,130,246,0.20) !important;
    box-shadow:
        0 -4px 24px rgba(0,0,0,0.6),
        0 -1px 0 rgba(59,130,246,0.15) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.checkout-floating-bar .checkout-btn-finalizar {
    box-shadow:
        0 4px 16px rgba(var(--co-glow), 0.40),
        inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.checkout-floating-bar-total,
.checkout-floating-bar-label {
    color: rgba(255,255,255,0.75) !important;
}

.checkout-floating-bar-precio {
    color: var(--co-brand-light) !important;
    font-weight: 800 !important;
}

/* ================================================================
   MODAL LOGIN/REGISTRO — dark premium
   ================================================================ */
.login-modal-overlay {
    background: rgba(5,8,16,0.85) !important;
    backdrop-filter: blur(20px) !important;
}

.login-modal-container {
    background: #0c1426 !important;
    border: 1px solid rgba(59,130,246,0.18) !important;
    box-shadow:
        0 24px 80px rgba(0,0,0,0.7),
        0 0 0 1px rgba(255,255,255,0.04) !important;
}

.login-modal-header {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    position: relative !important;
}

/* Línea de acento en el header del modal */
.login-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--co-brand), var(--co-purple)
    );
    box-shadow: 0 0 12px rgba(59,130,246,0.45);
}

.login-modal-close {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.60) !important;
}

.login-modal-close:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
}

.login-modal-logo-icon {
    background: rgba(59,130,246,0.12) !important;
    border: 1px solid rgba(59,130,246,0.22) !important;
    color: var(--co-brand-light) !important;
}

.login-modal-title {
    color: rgba(255,255,255,0.95) !important;
}

.login-modal-subtitle {
    color: rgba(255,255,255,0.50) !important;
}

.modal-swipe-indicator {
    background: rgba(255,255,255,0.18) !important;
}

/* ================================================================
   MODAL TÉRMINOS Y CONDICIONES — dark premium
   ================================================================ */
.checkout-modal-overlay {
    background: rgba(5,8,16,0.85) !important;
    backdrop-filter: blur(20px) !important;
}

.checkout-modal-header {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    position: relative !important;
}

.checkout-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--co-brand), var(--co-purple));
}

.checkout-modal-titulo {
    color: rgba(255,255,255,0.95) !important;
}

.checkout-modal-close {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.60) !important;
}

/* ================================================================
   AUTOSAVE / NOTIFICACIÓN
   ================================================================ */
.checkout-autosave-notification {
    background: rgba(59,130,246,0.10) !important;
    border: 1px solid rgba(59,130,246,0.20) !important;
    color: var(--co-brand-light) !important;
}

/* ================================================================
   BARRA DE PROGRESO MOBILE — dark
   ================================================================ */
.checkout-progress-bar-mobile {
    background: rgba(8,13,26,0.95) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: var(--co-glass-shadow) !important;
}

.checkout-progress-track {
    background: rgba(255,255,255,0.10) !important;
}

.checkout-progress-fill {
    background: linear-gradient(90deg, var(--co-brand) 0%, var(--co-purple) 100%) !important;
    box-shadow: 0 0 8px rgba(59,130,246,0.40);
}

/* ================================================================
   DATOS BANCARIOS
   ================================================================ */
.checkout-datos-bancarios {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
}

.checkout-dato-bancario {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,0.85) !important;
}

.checkout-dato-bancario:hover {
    background: rgba(59,130,246,0.10) !important;
    border-color: rgba(59,130,246,0.25) !important;
}

/* ================================================================
   FOTO DE REFERENCIA DEL DOMICILIO
   ================================================================ */
.foto-direccion-container {
    background: rgba(255,255,255,0.03) !important;
    border: 1px dashed rgba(255,255,255,0.15) !important;
    border-radius: 12px !important;
}

.foto-direccion-btn {
    background: rgba(59,130,246,0.08) !important;
    border: 2px dashed rgba(59,130,246,0.25) !important;
    color: var(--co-brand-light) !important;
}

.foto-direccion-btn:hover {
    background: rgba(59,130,246,0.15) !important;
    border-color: var(--co-brand) !important;
}

/* ================================================================
   ALERTAS (dentro de cards blancas)
   ================================================================ */
.alert {
    border-radius: 14px !important;
}

.alert-danger {
    background: rgba(239,68,68,0.06) !important;
    border-color: rgba(239,68,68,0.22) !important;
    color: #fca5a5 !important;
}

.alert-success {
    background: rgba(16,185,129,0.06) !important;
    border-color: rgba(16,185,129,0.22) !important;
    color: #6ee7b7 !important;
}

/* ================================================================
   SEGURIDAD / TEXTO DE CONFIANZA
   ================================================================ */
.checkout-seguro-texto {
    color: rgba(255,255,255,0.45) !important;
}

.checkout-seguro-texto i {
    color: var(--co-brand-light) !important;
}

/* ================================================================
   TÉRMINOS Y CONDICIONES — hint box (inline style override)
   ================================================================ */
#terminos-info-note {
    background: rgba(59,130,246,0.08) !important;
    border: 2px solid rgba(59,130,246,0.30) !important;
    border-radius: 12px !important;
    color: var(--co-brand-light) !important;
}

#terminos-info-note .fa-info-circle,
#terminos-info-note i {
    color: var(--co-brand-light) !important;
}

/* ================================================================
   SCROLLBAR — dark elegante
   ================================================================ */
::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03) !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(59,130,246,0.50) 0%,
        rgba(99,102,241,0.50) 100%
    ) !important;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        var(--co-brand) 0%,
        var(--co-purple) 100%
    ) !important;
}

/* ================================================================
   SKIP LINK
   ================================================================ */
.checkout-skip-link:focus {
    background: var(--co-brand) !important;
    color: #fff !important;
}

/* ================================================================
   RESPONSIVE MÓVIL — Dark Premium Brand
   Breakpoints: 991 → stack layout | 768 → tablet | 576 → phone | 480 → small
   ================================================================ */

/* ─── ≤991px: Layout apilado, floating bar, accordion mobile ─── */
@media (max-width: 991px) {

    /* Sidebar va debajo del form — separación clara */
    .checkout-col-sidebar {
        margin-top: 1.25rem !important;
    }

    /* ── Barra flotante inferior (reemplaza el CTA del sidebar) ── */
    .checkout-floating-bar {
        background: rgba(8,13,26,0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(59,130,246,0.22) !important;
        box-shadow: 0 -6px 32px rgba(0,0,0,0.55),
                    0 -1px 0 rgba(59,130,246,0.12) !important;
        padding: 0.875rem 1.25rem !important;
    }

    .checkout-floating-bar-inner {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    /* Total en floating bar */
    .checkout-floating-bar-total {
        flex: 1 !important;
    }

    .checkout-floating-bar-total-label {
        color: rgba(255,255,255,0.55) !important;
        font-size: 0.72rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .checkout-floating-bar-total-value {
        color: #ffffff !important;
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        margin-top: 0.15rem !important;
    }

    /* Botón CTA en floating bar — mismo estilo que el de escritorio */
    .checkout-floating-bar-btn {
        background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #3b82f6 100%) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 14px !important;
        padding: 0.875rem 1.5rem !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        letter-spacing: 0.02em !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        box-shadow: 0 4px 16px rgba(59,130,246,0.45) !important;
        transition: all 0.2s ease !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .checkout-floating-bar-btn:active {
        transform: scale(0.97) !important;
        box-shadow: 0 2px 8px rgba(59,130,246,0.35) !important;
    }

    /* ── Progress bar mobile (reemplaza stepper en ≤991px) ── */
    .checkout-progress-bar-mobile {
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 12px !important;
        padding: 0.75rem 1.25rem !important;
    }

    .checkout-progress-title-mobile {
        color: rgba(255,255,255,0.82) !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .checkout-progress-title-mobile i {
        color: var(--co-brand-light) !important;
    }

    /* ── Accordion mobile headers: acento brand ── */
    .checkout-col-main .checkout-accordion-header {
        background: rgba(59,130,246,0.06) !important;
        border-left: 3px solid var(--co-brand) !important;
        border-radius: 0 10px 10px 0 !important;
        padding: 0.875rem 1rem 0.875rem 0.875rem !important;
        min-height: 52px !important;
        color: #1e40af !important;
    }

    .checkout-col-main .checkout-accordion-header .checkout-seccion-titulo,
    .checkout-col-main .checkout-accordion-header h5,
    .checkout-col-main .checkout-accordion-header span {
        color: #1e40af !important;
        font-weight: 700 !important;
    }

    .checkout-col-main .checkout-accordion-header .checkout-seccion-icono {
        background: rgba(59,130,246,0.12) !important;
        border: 1px solid rgba(59,130,246,0.25) !important;
    }

    /* Badge de progreso (3/5) */
    .checkout-accordion-header .checkout-progreso-badge {
        background: rgba(59,130,246,0.15) !important;
        color: var(--co-brand-light) !important;
        border: 1px solid rgba(59,130,246,0.25) !important;
    }

    /* Flecha del accordion */
    .checkout-accordion-arrow {
        color: var(--co-brand) !important;
    }

    /* ── Badges semánticos: conservar color aunque la regla de span
       los fuerce a azul — necesitan mayor especificidad ── */
    .checkout-col-main .checkout-accordion-header .checkout-seccion-badge.badge-incomplete {
        color: #ef4444 !important;
        background: rgba(239,68,68,0.12) !important;
        border-color: rgba(239,68,68,0.30) !important;
        font-weight: 600 !important;
    }

    .checkout-col-main .checkout-accordion-header .checkout-seccion-badge.badge-partial {
        color: #f59e0b !important;
        background: rgba(245,158,11,0.12) !important;
        border-color: rgba(245,158,11,0.30) !important;
        font-weight: 600 !important;
    }

    .checkout-col-main .checkout-accordion-header .checkout-seccion-badge.badge-complete {
        color: #10b981 !important;
        background: rgba(16,185,129,0.12) !important;
        border-color: rgba(16,185,129,0.30) !important;
        font-weight: 600 !important;
    }
}

/* ─── ≤768px: Tablet / teléfono landscape ─── */
@media (max-width: 768px) {

    /* Blobs más pequeños en móvil */
    body::before {
        width: 480px; height: 480px;
        top: -120px; right: -100px;
    }

    body::after {
        width: 380px; height: 380px;
        bottom: -100px; left: -80px;
    }

    .checkout-header-content {
        padding: 2rem 1.25rem 1.5rem;
    }

    .checkout-titulo-principal {
        font-size: 1.75rem !important;
    }

    .checkout-card-header-premium {
        padding: 1.125rem 1.25rem !important;
    }

    /* GPS + Buscar buttons: 48px mínimo touch target */
    .map-search-btn,
    .map-gps-btn {
        min-height: 48px !important;
        border-radius: 12px !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }

    /* GPS button siempre visible con color brand */
    .map-gps-btn {
        background: rgba(59,130,246,0.16) !important;
        border: 1.5px solid rgba(59,130,246,0.38) !important;
        color: #60a5fa !important;
    }

    /* Mapa: altura más cómoda en tablet */
    #mapa-direccion {
        height: 230px !important;
        border-radius: 12px !important;
    }

    /* Input de dirección: 48px, sin zoom en iOS */
    .map-search-input,
    #buscar-direccion {
        min-height: 48px !important;
        font-size: 16px !important;
    }

    .login-modal-header {
        padding: 1rem 1.25rem !important;
    }
}

/* ─── ≤576px: Teléfono portrait ─── */
@media (max-width: 576px) {

    /* Título hero */
    .checkout-titulo-principal {
        font-size: 1.6rem !important;
        line-height: 1.15 !important;
    }

    /* Card formulario */
    .checkout-col-main .checkout-card-premium {
        border-radius: 16px !important;
    }

    .checkout-col-main .checkout-card-header-premium {
        border-radius: 16px 16px 0 0 !important;
        padding: 1rem 1.125rem !important;
    }

    .checkout-col-main .checkout-card-body-premium {
        padding: 1.25rem 1rem !important;
    }

    /* CRÍTICO: font-size 16px en todos los inputs para evitar
       el zoom automático de Safari/iOS al enfocar un campo */
    .checkout-input-premium,
    .checkout-col-main input[type="text"],
    .checkout-col-main input[type="email"],
    .checkout-col-main input[type="tel"],
    .checkout-col-main input[type="number"],
    .checkout-col-main textarea,
    .checkout-col-main select,
    .map-search-input,
    #buscar-direccion {
        font-size: 16px !important;
        min-height: 48px !important;
    }

    /* GPS button: ícono prominente, siempre visible */
    .map-gps-btn {
        background: rgba(59,130,246,0.18) !important;
        border: 1.5px solid rgba(59,130,246,0.42) !important;
        color: #60a5fa !important;
        min-width: 50px !important;
        min-height: 48px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
    }

    /* Botón buscar */
    .map-search-btn {
        min-height: 48px !important;
        min-width: 50px !important;
        border-radius: 12px !important;
    }

    /* Mapa en phone portrait */
    #mapa-direccion {
        height: 200px !important;
        border-radius: 10px !important;
    }

    /* Cards de método de pago: compactas */
    .checkout-metodo-pago {
        padding: 0.875rem !important;
    }

    .checkout-metodo-pago h6 {
        font-size: 0.9rem !important;
    }

    .checkout-metodo-pago p {
        font-size: 0.8rem !important;
    }

    /* Floating bar más compacto */
    .checkout-floating-bar {
        padding: 0.75rem 1rem !important;
    }

    .checkout-floating-bar-btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
    }

    .checkout-floating-bar-total-value {
        font-size: 1.1rem !important;
    }
}

/* ─── ≤480px: Teléfonos muy pequeños ─── */
@media (max-width: 480px) {

    .checkout-titulo-principal {
        font-size: 1.45rem !important;
    }

    .checkout-header-content::after {
        margin-top: 1rem;
    }

    /* Contenedor: volver a row para que input+buscar estén en fila 1
       y GPS ocupe fila 2 completa (≤768px lo pone en column) */
    .map-search-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .map-search-input {
        flex: 1 1 calc(100% - 60px) !important;
        min-width: 0 !important;
    }

    /* GPS: full-width con texto descriptivo — nunca icon-only */
    .map-gps-btn {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: unset !important;
        flex-shrink: 1 !important;
        min-height: 50px !important;
        background: rgba(59,130,246,0.20) !important;
        border: 2px solid rgba(59,130,246,0.48) !important;
        color: #93c5fd !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        padding: 0.875rem 1.25rem !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
    }

    /* Buscar: icon-only — ocultar span */
    .map-search-btn span {
        display: none !important;
    }

    /* Search button: compacto, solo ícono */
    .map-search-btn {
        min-width: 52px !important;
        min-height: 50px !important;
        flex-shrink: 0 !important;
        flex: 0 0 52px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    /* Card body padding mínimo */
    .checkout-col-main .checkout-card-body-premium {
        padding: 1rem 0.875rem !important;
    }

    /* Floating bar muy compacto */
    .checkout-floating-bar {
        padding: 0.625rem 0.875rem !important;
    }

    .checkout-floating-bar-total-label {
        font-size: 0.65rem !important;
    }

    .checkout-floating-bar-total-value {
        font-size: 1rem !important;
    }

    .checkout-floating-bar-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.8rem !important;
        min-height: 46px !important;
        border-radius: 10px !important;
    }
}

/* ================================================================
   CONTRASTE GLOBAL — SIDEBAR DARK GLASS
   Todos los textos sin clase específica dentro de las cards
   dark-glass del sidebar heredan color oscuro del tema original;
   se fuerzan a blanco con la opacidad correcta según jerarquía.
   ================================================================ */

/* Base: todo texto dentro del sidebar → legible sobre dark glass */
.checkout-col-sidebar .checkout-card-premium span,
.checkout-col-sidebar .checkout-card-premium p,
.checkout-col-sidebar .checkout-card-premium small,
.checkout-col-sidebar .checkout-card-premium label,
.checkout-col-sidebar .checkout-card-premium li {
    color: rgba(255,255,255,0.72) !important;
}

/* Nombre del producto — contraste máximo */
.checkout-col-sidebar .checkout-producto-nombre,
.checkout-col-sidebar .checkout-resumen-nombre,
.checkout-col-sidebar h4,
.checkout-col-sidebar h5,
.checkout-col-sidebar h6 {
    color: rgba(255,255,255,0.95) !important;
}

/* Hover del item de producto — fondo oscuro brand, NO blanco */
.checkout-col-sidebar .checkout-producto-item:hover {
    background: rgba(59,130,246,0.10) !important;
    border-color: rgba(59,130,246,0.20) !important;
}

/* Asegurar que el texto sigue visible en hover */
.checkout-col-sidebar .checkout-producto-item:hover .checkout-producto-nombre,
.checkout-col-sidebar .checkout-producto-item:hover h4,
.checkout-col-sidebar .checkout-producto-item:hover h5,
.checkout-col-sidebar .checkout-producto-item:hover h6 {
    color: #ffffff !important;
}

.checkout-col-sidebar .checkout-producto-item:hover span,
.checkout-col-sidebar .checkout-producto-item:hover p,
.checkout-col-sidebar .checkout-producto-item:hover small {
    color: rgba(255,255,255,0.85) !important;
}

/* Precio original tachado — tenue intencional */
.checkout-col-sidebar s,
.checkout-col-sidebar del,
.checkout-col-sidebar .precio-original {
    color: rgba(255,255,255,0.32) !important;
    text-decoration-color: rgba(255,255,255,0.25) !important;
}

/* Precio con descuento — verde */
.checkout-col-sidebar .checkout-producto-precio,
.checkout-col-sidebar .checkout-precio-descuento {
    color: #34d399 !important;
}

/* Botones de cantidad en sidebar */
.checkout-col-sidebar .checkout-qty-control {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
}
.checkout-col-sidebar .checkout-qty-btn,
.checkout-col-sidebar button:not(.checkout-btn-finalizar) {
    color: rgba(255,255,255,0.80) !important;
    border-color: rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.07) !important;
}

.checkout-col-sidebar .checkout-qty-value {
    color: rgba(255,255,255,0.95) !important;
}

/* Labels de totales (Subtotal, Envío, IGV) — sin clase específica */
.checkout-col-sidebar .checkout-totales span:not(.checkout-total-precio):not(#descuento-valor),
.checkout-col-sidebar .checkout-total-fila > span:first-child,
.checkout-col-sidebar #igv-label,
.checkout-col-sidebar .checkout-total-label {
    color: rgba(255,255,255,0.62) !important;
}

/* Valores de totales */
.checkout-col-sidebar .checkout-total-precio {
    color: var(--co-brand-light) !important;
    font-weight: 600 !important;
}

/* Total final — grande y brillante */
.checkout-col-sidebar .checkout-total-fila.total-final span,
.checkout-col-sidebar #total-final,
.checkout-col-sidebar .precio-total-final {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Descuento — verde */
.checkout-col-sidebar #descuento-valor {
    color: #34d399 !important;
}

/* Nota de proveedor y textos secundarios */
.checkout-col-sidebar p {
    color: rgba(255,255,255,0.50) !important;
}

/* Garantías — texto legible */
.checkout-col-sidebar .checkout-politicas span,
.checkout-col-sidebar .checkout-politicas p,
.checkout-col-sidebar .checkout-politicas li,
.checkout-col-sidebar .checkout-garantias span,
.checkout-col-sidebar .checkout-garantias p,
.checkout-col-sidebar .checkout-garantias li,
.checkout-col-sidebar .checkout-politicas a {
    color: rgba(255,255,255,0.72) !important;
}

/* Trust badges texto */
.checkout-col-sidebar .checkout-trust-badges span,
.checkout-col-sidebar .checkout-trust-badges p,
.checkout-col-sidebar .checkout-trust-badges strong {
    color: rgba(255,255,255,0.82) !important;
}

/* ================================================================
   CONTRASTE — BREADCRUMB (todos los links y separadores)
   ================================================================ */
.checkout-breadcrumb-premium,
.checkout-breadcrumb-premium a,
.checkout-breadcrumb-premium span,
.checkout-breadcrumb-premium i,
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.62) !important;
}

.checkout-breadcrumb-premium .breadcrumb-item.active,
.checkout-breadcrumb-premium .active,
.checkout-breadcrumb-premium a[href*="checkout"],
.breadcrumb-item.active {
    color: var(--co-brand-light) !important;
    font-weight: 600 !important;
}

/* ================================================================
   CONTRASTE — STEPPER labels y textos pendientes
   ================================================================ */
.checkout-paso span,
.checkout-paso p,
.checkout-paso .checkout-paso-texto,
.checkout-paso .checkout-paso-label {
    color: rgba(255,255,255,0.55) !important;
}

.checkout-paso.completado .checkout-paso-texto,
.checkout-paso.completado .checkout-paso-label {
    color: rgba(255,255,255,0.78) !important;
}

.checkout-paso.activo .checkout-paso-texto,
.checkout-paso.activo .checkout-paso-label {
    color: var(--co-brand-light) !important;
    font-weight: 600 !important;
}

/* ================================================================
   CONTRASTE — INPUT DE BÚSQUEDA DE DIRECCIÓN
   Checkout-tech lo estiliza en negro; en card blanca debe ser claro
   ================================================================ */
#direccion-buscar,
.checkout-buscar-input,
input[placeholder*="Calle"],
input[placeholder*="dirección"] {
    background: #f8faff !important;
    color: #0f172a !important;
    border: 1.5px solid rgba(59,130,246,0.18) !important;
    border-radius: 12px !important;
}

#direccion-buscar::placeholder,
.checkout-buscar-input::placeholder {
    color: #94a3b8 !important;
}

/* Botón GPS — azul suave con texto descriptivo */
#btn-mi-ubicacion,
.btn-mi-ubicacion,
.map-gps-btn {
    background: rgba(59,130,246,0.14) !important;
    border: 1.5px solid rgba(59,130,246,0.38) !important;
    color: var(--co-brand-light) !important;
    border-radius: 12px !important;
    transition: background 0.2s cubic-bezier(0.4,0,0.2,1),
                border-color 0.2s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}

.map-gps-btn:hover,
.map-search-container .map-gps-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(59,130,246,0.40) !important;
    transform: translateY(-1px) !important;
}

.map-gps-btn .map-gps-titulo {
    color: var(--co-brand-light) !important;
    font-weight: 700 !important;
}

.map-gps-btn .map-gps-subtitulo {
    color: rgba(96,165,250,0.80) !important;
    font-weight: 400 !important;
}

.map-gps-btn:hover .map-gps-titulo,
.map-gps-btn:hover .map-gps-subtitulo {
    color: #ffffff !important;
    opacity: 1 !important;
}

.map-gps-btn:hover i {
    color: #ffffff !important;
}

/* ================================================================
   CONTRASTE — SECCIÓN "INSTRUCCIONES" EN CARD BLANCA
   ================================================================ */
.checkout-seccion-formulario span,
.checkout-seccion-formulario p:not(.checkout-seccion-titulo),
.checkout-seccion-formulario small {
    color: #475569 !important;
}

/* Badges semánticos — mayor especificidad que la regla de span anterior
   para que conserven rojo/amber/verde tanto en desktop como en móvil */
.checkout-col-main .checkout-seccion-badge.badge-incomplete {
    color: #ef4444 !important;
    background: rgba(239,68,68,0.10) !important;
    border-color: rgba(239,68,68,0.25) !important;
}

.checkout-col-main .checkout-seccion-badge.badge-partial {
    color: #f59e0b !important;
    background: rgba(245,158,11,0.10) !important;
    border-color: rgba(245,158,11,0.25) !important;
}

.checkout-col-main .checkout-seccion-badge.badge-complete {
    color: #10b981 !important;
    background: rgba(16,185,129,0.10) !important;
    border-color: rgba(16,185,129,0.25) !important;
}

/* ================================================================
   CONTRASTE — MODAL EMPTY STATE (carrito vacío en sidebar)
   ================================================================ */
.checkout-col-sidebar h5,
.checkout-col-sidebar .checkout-carrito-vacio h5,
.checkout-col-sidebar .checkout-carrito-vacio p {
    color: rgba(255,255,255,0.72) !important;
}

/* ================================================================
   CONTRASTE — OFERTA PERSONAL BADGE
   ================================================================ */
.checkout-col-sidebar .checkout-oferta-badge,
.checkout-col-sidebar .oferta-badge,
.checkout-col-sidebar [class*="oferta"] {
    color: #34d399 !important;
}

/* ================================================================
   CONTRASTE — CARD DE INSTRUCCIONES DE PAGO (fondo ink-900)
   .checkout-pago-instrucciones tiene bg #080d1a — todo texto debe
   ser claro. Checkout-tech hereda dark-on-light defaults que aquí
   son invisibles.
   ================================================================ */
.checkout-pago-instrucciones {
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Título y subtítulo del método de pago */
.checkout-pago-instrucciones h6,
.checkout-pago-instrucciones h5,
.checkout-pago-instrucciones h4,
.checkout-pago-instrucciones .checkout-cod-titulo,
.checkout-pago-instrucciones [class*="titulo"] {
    color: rgba(255,255,255,0.95) !important;
}

.checkout-pago-instrucciones > p,
.checkout-pago-instrucciones .checkout-cod-subtitle,
.checkout-pago-instrucciones [class*="subtitle"] {
    color: rgba(255,255,255,0.60) !important;
}

/* Pasos de proceso (números y descripciones) */
.checkout-pago-instrucciones .checkout-paso,
.checkout-pago-instrucciones .checkout-paso-num,
.checkout-pago-instrucciones .checkout-paso span,
.checkout-pago-instrucciones .checkout-paso p,
.checkout-pago-instrucciones .checkout-pasos-lista span,
.checkout-pago-instrucciones .checkout-pasos-lista p {
    color: rgba(255,255,255,0.72) !important;
}

/* Nota azul dentro de la card de instrucciones */
.checkout-pago-nota {
    background: rgba(59,130,246,0.12) !important;
    border: 1px solid rgba(59,130,246,0.25) !important;
    border-radius: 10px !important;
}

.checkout-pago-nota p,
.checkout-pago-nota span,
.checkout-pago-nota small {
    color: rgba(255,255,255,0.80) !important;
}

/* Nota amber "Importante" */
.checkout-pago-importante {
    background: rgba(245,158,11,0.12) !important;
    border: 1px solid rgba(245,158,11,0.25) !important;
    border-radius: 10px !important;
}

.checkout-pago-importante,
.checkout-pago-importante p,
.checkout-pago-importante span,
.checkout-pago-importante strong {
    color: rgba(255,255,255,0.85) !important;
}

.checkout-pago-importante strong {
    color: #fbbf24 !important;
}

/* Métodos de pago aceptados (chips) — solo el sub-panel oscuro, no las cards selector */
.checkout-metodos-pago .checkout-pago-instrucciones span,
.checkout-metodos-pago .checkout-pago-instrucciones p {
    color: rgba(255,255,255,0.80) !important;
}

/* Cards selector de método (Pago Contra Entrega / Transferencia) — fondo claro */
.checkout-metodo-pago h6,
.checkout-metodo-pago .checkout-metodo-nombre {
    color: #1e293b !important;
}

.checkout-metodo-pago p,
.checkout-metodo-pago small,
.checkout-metodo-pago .checkout-metodo-desc {
    color: #475569 !important;
}

/* .checkout-metodos-aceptados = dark ink-900 sub-panel — all text light */
.checkout-metodos-aceptados p,
.checkout-metodos-aceptados h6,
.checkout-metodos-aceptados small {
    color: rgba(255,255,255,0.78) !important;
}

/* Chips de método de pago: dark glass en lugar de blanco */
.checkout-metodo-mini {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 8px !important;
}

.checkout-metodo-mini span {
    color: rgba(255,255,255,0.85) !important;
}

/* "Paga cuando recibas tu pedido" subtitle inside dark card */
.checkout-pago-instrucciones > p,
.checkout-pago-instrucciones .checkout-cod-subtitle {
    color: rgba(255,255,255,0.60) !important;
}

/* ================================================================
   CONTRASTE — SECCIÓN DE NOTAS / INSTRUCCIONES ESPECIALES
   ================================================================ */
.checkout-notas-section label,
.checkout-notas-section p,
.checkout-notas-section span,
[class*="notas"] label,
[class*="notas"] p {
    color: #334155 !important;
}

/* ================================================================
   MOBILE FORM FIX (≤767px)
   — Deshabilita el floating-label y normaliza inputs/autofill
   ================================================================ */
@media (max-width: 767px) {

    /* 1. Labels estáticos: siempre encima del input, nunca flotando */
    .floating-label .checkout-label-premium,
    .floating-textarea .checkout-label-premium {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        background: transparent !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        color: #475569 !important;
        margin-bottom: 0.45rem !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    /* Icono de la label */
    .floating-label .checkout-label-premium i,
    .floating-textarea .checkout-label-premium i {
        color: #3b82f6 !important;
        font-size: 0.75rem !important;
    }

    /* 2. Padding normal sin espacio extra para label flotante */
    .floating-label .checkout-input-premium,
    .floating-textarea .checkout-input-premium {
        padding: 0.875rem 1rem !important;
    }

    /* 3. Placeholder visible (antes se ocultaba para el efecto flotante) */
    .floating-label .checkout-input-premium::placeholder,
    .floating-textarea .checkout-input-premium::placeholder {
        opacity: 0.45 !important;
    }

    /* 4. Fix autofill: el navegador pone fondo gris/azul al autocompletar.
       El truco box-shadow inset lo neutraliza sin usar !important en background */
    .checkout-input-premium:-webkit-autofill,
    .checkout-input-premium:-webkit-autofill:hover,
    .checkout-input-premium:-webkit-autofill:focus,
    .checkout-col-main input:-webkit-autofill,
    .checkout-col-main input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
        -webkit-text-fill-color: #1e293b !important;
        caret-color: #1e293b !important;
    }

    /* 5. Inputs: aspecto limpio y consistente */
    .checkout-input-premium {
        background: #ffffff !important;
        color: #1e293b !important;
        border: 1.5px solid #bfdbfe !important;
        border-radius: 12px !important;
        font-size: 16px !important; /* evita zoom iOS */
        min-height: 50px !important;
    }

    .checkout-input-premium:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
    }

    /* Campo válido */
    .field-valid .checkout-input-premium,
    .checkout-input-premium.has-value:not(:invalid) {
        border-color: #10b981 !important;
        background: #f0fdf4 !important;
    }

    /* 6. Espaciado entre campos */
    .checkout-input-group {
        margin-bottom: 1rem !important;
    }

    /* 7. Columnas siempre al 100% en móvil */
    .col-md-6, .col-md-4, .col-md-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }

    /* 8. Card body con padding cómodo */
    .checkout-col-main .checkout-card-body-premium {
        padding: 1.25rem 1rem !important;
    }

    /* 9. Accordion header más compacto */
    .checkout-accordion-header {
        padding: 0.875rem 1rem !important;
        font-size: 0.9rem !important;
    }
}