/* Styles pour le panier flottant sur mobile */

/* Conteneur pour le panier flottant - toujours visible sur mobile, caché sur desktop */
.floating-cart-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999; /* Valeur très élevée pour être au-dessus de tout */
    display: none; /* Caché par défaut */
    transition: all 0.3s ease;
}

/* Ajustement quand le menu mobile est ouvert */
.floating-cart-container.menu-open {
    left: 300px; /* Décaler le panier quand le menu est ouvert */
    opacity: 0; /* Cacher le panier quand le menu est ouvert */
    visibility: hidden; /* Masquer complètement le panier */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Assurer que le panier reste visible même quand le menu est ouvert */
body.menu-open .floating-cart-container {
    z-index: 1002; /* Au-dessus du menu mobile */
}

/* Styles spécifiques pour mobile */
@media (max-width: 1023px) {
    /* Afficher le panier flottant sur mobile */
    .floating-cart-container {
        display: block !important;
    }

    /* Cacher le panier dans la navbar sur mobile */
    .navbar-right-section .attr-nav {
        display: none !important;
    }

    /* Style du bouton du panier flottant */
    .floating-cart-button {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        background-color: var(--color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        animation: pulse 2s infinite;
    }

    /* Animation de pulsation pour attirer l'attention */
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(73, 167, 96, 0.7);
            transform: scale(1);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(73, 167, 96, 0);
            transform: scale(1.05);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(73, 167, 96, 0);
            transform: scale(1);
        }
    }

    .floating-cart-button:hover {
        background-color: var(--color-secondary);
        transform: scale(1.05);
    }

    /* Icône du panier */
    .floating-cart-button i {
        color: white;
        font-size: 20px;
    }

    /* Badge pour le nombre d'articles */
    .floating-cart-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background-color: var(--color-secondary);
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: bold;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        border: 2px solid white;
        animation: bounce 1s ease infinite;
        transition: all 0.3s ease;
    }

    /* Style pour indiquer que le panier est en cours de mise à jour */
    .floating-cart-badge.updating {
        animation: updating 0.8s ease infinite;
        background-color: #ffc107; /* Couleur d'avertissement */
    }

    /* Animation pour indiquer que le panier est en cours de mise à jour */
    @keyframes updating {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.2);
            opacity: 0.7;
        }
    }

    /* Animation de rebond pour le badge */
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3px);
        }
    }

    /* Afficher le panier flottant uniquement sur mobile */
    .floating-cart-container {
        display: block;
    }

    /* Cacher le panier dans la navbar sur mobile quand on scroll */
    .navbar-scrolled .navbar-right-section .attr-nav {
        display: none;
    }
}

/* Ajustements pour les petits écrans */
@media (max-width: 480px) {
    .floating-cart-container {
        bottom: 15px;
        left: 15px;
    }

    .floating-cart-button {
        width: 45px;
        height: 45px;
    }

    /* Ajustement pour les petits écrans quand le menu est ouvert */
    .floating-cart-container.menu-open {
        left: 15px; /* Ne pas décaler sur les très petits écrans */
        bottom: 70px; /* Décaler vers le haut plutôt que sur le côté */
        opacity: 0; /* Cacher le panier quand le menu est ouvert */
        visibility: hidden; /* Masquer complètement le panier */
    }
}