/**
 * Cart drawer — slide-in latéral droit.
 *
 * Le composant CartDrawer.razor reste monté en permanence dans MainLayout (rendu vide
 * tant que isOpen=false), pour permettre l'animation slide. Sans .is-open : panneau caché
 * en off-screen (translateX) + overlay invisible (pointer-events:none).
 */

.cart-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}

.cart-drawer-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(17, 24, 39, 0);
    transition: background-color 0.25s ease-out;
    pointer-events: none;
}

.cart-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background-color: #fff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.36, 1);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.cart-drawer-root.is-open {
    pointer-events: auto;
}

.cart-drawer-root.is-open .cart-drawer-overlay {
    background-color: rgba(17, 24, 39, 0.5);
    pointer-events: auto;
}

.cart-drawer-root.is-open .cart-drawer-panel {
    transform: translateX(0);
}

/* Pendant l'ouverture du drawer, bloquer le scroll de la page pour que la roulette agisse
   uniquement à l'intérieur du panneau (UX standard des modals). */
body.cart-drawer-open {
    overflow: hidden;
}

/* Plein écran sur mobile (≤ 480px) : le drawer occupe toute la largeur disponible. */
@media (max-width: 480px) {
    .cart-drawer-panel {
        max-width: 100%;
    }
}