/* ✅ VARIABLES JASCSTORE */
:root {
    --azul-hermoso: #1a237e; 
    --blanco: #ffffff;
}

/* 🚀 CONTENEDOR PRINCIPAL DEL CARRITO */
/* Usamos el ID que veo en tu consola: #carritoModal */
#carritoModal {
    z-index: 9999 !important; /* ✅ Máxima prioridad para ganarle al Navbar sticky */
}

.modal-dialog {
    position: fixed !important;
    margin: 0 !important;
    top: 0 !important;
    right: 0 !important;
    width: 450px !important;
    height: 100vh !important;
    max-width: 100% !important;
}

.modal-content {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    border-left: 5px solid var(--azul-hermoso) !important;
    position: relative !important;
}

/* ❌ EL BOTÓN DE CIERRE (Usando tu clase real: .cerrar-carrito) */
.cerrar-carrito {
    position: fixed !important; /* ✅ Lo volvemos independiente */
    top: 85px !important;      /* ✅ BAJA para no quedar detrás del Navbar */
    right: 20px !important;    /* ✅ Se mantiene a la derecha */
    width: 50px !important;
    height: 50px !important;
    background-color: var(--azul-hermoso) !important;
    color: white !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    z-index: 10000 !important; /* ✅ Por encima de ABSOLUTAMENTE TODO */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
}

/* Dibujamos la X blanca dentro del botón azul */
.cerrar-carrito::before {
    content: "✕" !important;
    font-size: 24px !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
}

/* 1. ESPACIO EN LA CABECERA PARA EL NAVBAR */
.modal-header {
    padding-top: 70px !important; /* ✅ Evita que el texto choque con el Navbar */
    background: white !important;
}

/* 2. CUERPO CON SCROLL OPERATIVO */
.modal-body {
    flex-grow: 1 !important;
    overflow-y: auto !important; /* ✅ HABILITA EL SCROLL */
    padding: 20px !important;
    -webkit-overflow-scrolling: touch;
}

/* 3. FOOTER FIJO (Botón Agregar) */
.modal-footer {
    flex-shrink: 0 !important;
    background: white !important;
    padding: 15px !important;
    border-top: 1px solid #eee;
}

/* AJUSTES PARA MÓVIL */
@media (max-width: 576px) {
    .modal-dialog { width: 100% !important; }
    .cerrar-carrito {
        top: 90px !important; /* Un poco más abajo en móvil */
        right: 15px !important;
    }
}

/* 🚀 AJUSTE FINAL PARA BOTÓN DE CIERRE (AZUL HERMOSO) */