/**
 * CORRECTIONS CRITIQUES POUR LE PANIER
 * Rend le panier et les modales scrollables et utilisables
 */

/* FIX 1: Panier scrollable avec hauteur maximale */
.cart-panel {
    max-height: 90vh !important; /* Au lieu de 600px fixe */
    overflow: visible !important; /* Permettre le contenu de déborder */
    display: flex !important;
    flex-direction: column !important;
}

/* FIX 2: Zone items scrollable avec hauteur flexible */
.cart-items {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 400px) !important; /* Garde de l'espace pour header + summary + actions */
    min-height: 150px !important;
    scrollbar-width: thin;
    scrollbar-color: #FFB703 #F7F3ED;
}

/* Scrollbar personnalisée pour WebKit */
.cart-items::-webkit-scrollbar {
    width: 8px;
}

.cart-items::-webkit-scrollbar-track {
    background: #F7F3ED;
    border-radius: 4px;
}

.cart-items::-webkit-scrollbar-thumb {
    background: #FFB703;
    border-radius: 4px;
}

.cart-items::-webkit-scrollbar-thumb:hover {
    background: #D86B45;
}

/* FIX 3: Boutons d'action toujours visibles en bas */
.cart-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: #F7F3ED !important;
    border-top: 2px solid #E5E5E5 !important;
    padding: 1rem !important;
    z-index: 10 !important;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1) !important;
}

/* FIX 4: Summary section reste visible */
.cart-summary {
    background: white !important;
    position: relative !important;
    z-index: 5 !important;
    border-top: 2px solid #E5E5E5 !important;
    padding: 1rem !important;
}

/* FIX 5: Modal de commande scrollable */
.payment-modal .modal-content,
.order-modal .modal-content,
#paymentModal .modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* FIX 6: Formulaire dans modal scrollable */
.order-form,
#orderForm {
    max-height: calc(90vh - 200px) !important;
    overflow-y: auto !important;
    padding-right: 10px !important;
}

/* FIX 7: Bouton submit toujours visible dans modal */
.order-form button[type="submit"],
#orderForm button[type="submit"] {
    position: sticky !important;
    bottom: 0 !important;
    width: 100% !important;
    margin-top: 1rem !important;
    background: linear-gradient(135deg, #FFB703, #FFA500) !important;
    padding: 1rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 20px rgba(255, 183, 3, 0.4) !important;
    z-index: 20 !important;
}

/* FIX 8: Mobile - Panier plein écran */
@media (max-width: 768px) {
    .cart-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        transform: translateX(100%) !important;
    }
    
    .cart-panel.open {
        transform: translateX(0) !important;
    }
    
    .cart-items {
        max-height: calc(100vh - 350px) !important;
    }
    
    /* Header fixe en haut sur mobile */
    .cart-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 15 !important;
    }
    
    /* Modal plein écran sur mobile */
    .payment-modal .modal-content,
    .order-modal .modal-content {
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
}

/* FIX 9: Livraison gratuite >= 20 CHF */
.delivery-fee-line .free-delivery {
    color: #10B981 !important;
    font-weight: 600 !important;
}

.delivery-fee-line .free-delivery::after {
    content: " 🎉" !important;
}

/* FIX 10: Indicateur de scroll si nécessaire */
.cart-items.has-scroll::after {
    content: "↓ Défiler pour voir plus ↓";
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: linear-gradient(to bottom, transparent, #F7F3ED);
    padding: 1rem;
    font-size: 0.85rem;
    color: #666;
    pointer-events: none;
}

/* FIX 11: Backdrop pour modal */
.modal-backdrop,
.payment-modal,
.order-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FIX 12: Bouton fermer modal toujours visible */
.modal-content .close,
.cart-close {
    position: sticky !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}

/* FIX 13: Améliorer la visibilité du total */
.cart-summary .total {
    background: linear-gradient(135deg, #FFB703, #FFA500) !important;
    color: #111111 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    margin-top: 0.5rem !important;
    font-size: 1.3rem !important;
}

/* FIX 14: État hover pour boutons */
.cart-actions button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(255, 183, 3, 0.5) !important;
}

/* FIX 15: Validation des champs */
.order-form input:invalid,
.order-form select:invalid {
    border-color: #EF4444 !important;
    background: #FEF2F2 !important;
}

.order-form input:valid,
.order-form select:valid {
    border-color: #10B981 !important;
    background: #F0FDF4 !important;
}

/* FIX 16: Message d'erreur/succès */
.cart-message {
    padding: 1rem;
    margin: 1rem;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
}

.cart-message.success {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #10B981;
}

.cart-message.error {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #EF4444;
}

/* FIX 17: Empêcher le scroll de la page principale quand panier ouvert */
body.cart-open {
    overflow: hidden !important;
}

/* FIX 18: Animation d'ouverture fluide */
.cart-panel {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* FIX 19: Z-index pour éviter les conflits */
.awwwards-cart {
    z-index: 10000 !important;
}

.cart-panel {
    z-index: 10001 !important;
}

.modal-backdrop {
    z-index: 10002 !important;
}

.modal-content {
    z-index: 10003 !important;
}