/* Personnalisation du modal panier - Prix total aligné à droite */

/* ========== FOND BLANC ÉLÉGANT POUR LE MODAL BODY ========== */
.modal#cartModal .modal-body {
    background: #ffffff !important; /* Fond blanc pur */
    overflow-y: auto !important;
    scrollbar-width: thin !important; /* Firefox - barre fine */
    scrollbar-color: rgba(0, 78, 137, 0.3) rgba(0, 0, 0, 0.05) !important; /* Firefox - couleur thumb et track */
}

/* BARRE DE DÉFILEMENT VISIBLE ET STYLÉE POUR LE MODAL PANIER */

/* Barre de défilement personnalisée pour Chrome, Safari et Edge */
.modal#cartModal .modal-body::-webkit-scrollbar {
    width: 8px !important; /* Largeur de la barre */
    display: block !important;
}

.modal#cartModal .modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important; /* Fond de la piste */
    border-radius: 10px !important;
    margin: 4px 0 !important;
}

.modal#cartModal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 78, 137, 0.3) !important; /* Couleur du curseur */
    border-radius: 10px !important;
    transition: background 0.2s ease !important;
}

.modal#cartModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 78, 137, 0.5) !important; /* Couleur au survol */
}

/* ========== FOOTER DU MODAL PANIER - GRIS ACCENTUÉ ET COMPACT ========== */
.modal#cartModal .modal-footer {
    background: #e0e0e0 !important; /* ✅ Gris plus foncé et accentué */
    padding: 0.35rem 1rem !important; /* ✅ RÉDUIT: Hauteur très compacte */
    border-top: 1px solid #d0d0d0 !important;
}

/* Style pour le total du panier dans le modal */
.modal-footer .cart-total {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.35rem !important;
    position: relative !important;
}

.modal-footer .cart-total > span:first-child {
    color: var(--dark) !important;
    font-weight: 700 !important; /* ✅ AJOUTÉ: Label "TOTAL" en gras aussi */
}

.modal-footer .cart-total #totalAmount {
    color: #FF6B35 !important;
    text-align: right !important;
    position: absolute !important;
    right: 0 !important;
    margin-left: 0 !important;
}

/* Centrer le bouton Commandez dans le modal panier */
.modal-footer #checkoutBtn {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important;
    text-align: center !important;
}

/* Uniformiser TOUS les prix dans le modal panier - orange comme le badge panier et le total */
.cart-item-price,
.cart-item-price .price,
.product-price-text,
.modal-body .cart-item-price,
.modal-body .price,
#cartItems .price,
#cartItems .cart-item-price {
    color: #FF6B35 !important;
    font-weight: 700 !important; /* ✅ AJOUTÉ: Prix en gras */
}

/* ✅ NOUVEAU: Total du panier en gras */
.modal-footer .cart-total #totalAmount {
    color: #FF6B35 !important;
    text-align: right !important;
    position: absolute !important;
    right: 0 !important;
    margin-left: 0 !important;
    font-weight: 700 !important; /* Total en gras */
}

/* Augmenter l'épaisseur des traits de séparation entre les produits dans le modal */
.cart-item {
    border-bottom: 2px solid var(--border-color) !important;
}

/* Rendre le champ de quantité en lecture seule dans le modal panier */
.cart-quantity-input {
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
}

/* Style pour griser les méthodes de paiement (Wave et Orange Money) sur desktop */
@media (min-width: 769px) {
    .payment-method.disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
        filter: grayscale(1) !important;
        background-color: #f5f5f5 !important;
        border-color: #ddd !important;
    }
    
    .payment-method.disabled:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .modal-footer .cart-total {
        font-size: 1.1rem !important;
    }
    
    /* Barre de défilement plus visible sur mobile */
    .modal#cartModal .modal-body::-webkit-scrollbar {
        width: 6px !important;
    }
}

/* ========== ALIGNEMENT DES ÉLÉMENTS D'UNE LIGNE DU PANIER ========== */
/* Ces classes (cart-item-header / cart-item-footer / etc.) sont générées
   par renderCartModal() dans cart.js mais n'avaient aucun style associé,
   ce qui cassait l'alignement (image, nom, quantité, prix, bouton retirer). */

.cart-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .6rem !important;
}

.cart-item-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    width: 100%;
}

.cart-item-info h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.remove-item-btn {
    flex-shrink: 0;
    white-space: nowrap;
    color: #fff;
    margin-top: .1rem;
}

.cart-item-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    width: 100%;
}

.cart-item-quantity-selector {
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
    background: #f5f5f5;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: .2rem;
    flex-shrink: 0;
}

.cart-qty-btn {
    width: 26px;
    height: 26px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: #fff;
    color: #004E89;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: .15s;
}

.cart-qty-btn:hover {
    background: #004E89;
    color: #fff;
}

.cart-quantity-input {
    width: 32px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: .9rem;
    color: #1A1A2E;
}

.cart-item-footer .price {
    font-weight: 700;
    color: #FF6B35 !important;
    font-size: 1rem;
    white-space: nowrap;
    margin-left: auto;
}

/* Mobile : composants un peu plus compacts */
@media (max-width: 480px) {
    .cart-qty-btn { width: 24px; height: 24px; font-size: .9rem; }
    .cart-quantity-input { width: 28px; font-size: .85rem; }
    .remove-item-btn { padding: .3rem .55rem !important; font-size: .75rem !important; }
}