/* public/css/style.css */

body {
    padding-top: 5rem; /* Espace pour la navbar fixe */
    background-color: #f8f9fa;
}

.container {
    max-width: 960px;
}

/* Styles spécifiques pour le formulaire de personnalisation */
.badge-customization-form .form-group {
    margin-bottom: 1.5rem;
}

.badge-preview {
    border: 1px solid #dee2e6;
    padding: 1rem;
    margin-top: 1rem;
    min-height: 150px; /* Pour visualiser l'espace */
    background-color: #ffffff;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    body {
        padding-top: 0; /* Ajuster si navbar n'est pas fixe sur mobile */
    }
}

/* Style pour les messages d'erreur/succès */
.alert {
    margin-top: 1rem;
}

/* --- Styles pour Hamburger Animé et Overlay Mobile --- */
@media (max-width: 991.98px) {
    /* Masquer l'icône Bootstrap par défaut si elle réapparaît */
    .navbar-toggler-icon {
        display: none;
    }

    /* Style du bouton conteneur */
    .navbar-toggler {
        border: none; /* Supprimer la bordure par défaut */
        padding: 0.5rem; /* Ajouter un peu de padding */
         z-index: 1100; /* S'assurer qu'il est au-dessus de l'overlay */
         position: relative; /* Pour le positionnement des barres */
    }
    .navbar-toggler:focus {
        box-shadow: none; /* Supprimer l'ombre au focus */
    }

    /* Style de l'icône hamburger personnalisée */
    .hamburger-icon {
        width: 28px;
        height: 22px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .hamburger-icon span {
        display: block;
        height: 3px;
        width: 100%;
        /* Couleur des barres - Assurez-vous qu'elle contraste avec le fond de la navbar */
        /* Utilisons la couleur blanche comme dans header.php */
        background-color: rgba(255, 255, 255, 0.75); 
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
        transform-origin: center;
    }

    /* Animation de l'icône en croix (état ouvert) */
    .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
    }

    .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
    }

    /* Style de l'Overlay */
    #navbarNav {
        position: fixed !important; /* !important pour surcharger Bootstrap */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.9); /* Fond noir semi-transparent */
        z-index: 1050; /* En dessous du bouton mais au-dessus du reste */
        display: flex !important; /* !important pour surcharger Bootstrap */
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
        overflow-y: auto; /* Permettre le scroll si le contenu est long */

        /* Assurer que les styles Bootstrap pour .collapse ne gênent pas */
        height: 100vh !important; 
        border: none !important;
        padding: 0 !important;
    }

    /* Style de l'Overlay quand il est visible */
    #navbarNav.show {
        opacity: 1;
        visibility: visible;
    }

    /* Styles pour la liste dans l'overlay */
    #navbarNav .navbar-nav {
        flex-direction: column !important; /* !important pour surcharger Bootstrap */
        align-items: center;
        width: 100%;
        padding: 2rem 0;
         margin: 0 !important; /* Override Bootstrap margins */
         /* Réinitialiser la hauteur auto de Bootstrap si nécessaire */
         height: auto !important; 
    }

    #navbarNav .nav-item {
        margin-bottom: 1.5rem; /* Espacement entre les liens */
    }

    #navbarNav .nav-link {
        font-size: 1.5rem; /* Taille de police plus grande */
        color: #ffffff !important; /* Liens en blanc */
        opacity: 0.8;
        transition: opacity 0.2s ease;
    }

    #navbarNav .nav-link:hover,
    #navbarNav .nav-link.active {
        opacity: 1;
    }

    /* Annuler l'expansion sur les écrans larges (déjà géré par Bootstrap mais on peut le garder pour clarté) */
    .navbar-expand-lg .navbar-nav {
         flex-direction: row;
     }
}

/* Assurer que l'overlay n'affecte pas le layout desktop */
@media (min-width: 992px) {
     #navbarNav {
         /* Réinitialiser explicitement les styles d'overlay */
         position: static !important;
         width: auto !important;
         height: auto !important;
         background-color: transparent !important;
         opacity: 1 !important;
         visibility: visible !important;
         display: block !important; /* Ou la valeur par défaut de Bootstrap */
         overflow-y: visible !important;
         z-index: auto !important;
         border: none !important;
         padding: 0 !important;
     }
     #navbarNav .navbar-nav {
         flex-direction: row !important;
         padding: 0;
         align-items: center; /* Alignement par défaut de Bootstrap */
         height: auto !important; 
         margin: 0; /* Réinitialiser le margin auto de ms-auto */
     }
      #navbarNav .nav-item {
         margin-bottom: 0;
     }
     #navbarNav .nav-link {
         font-size: 1rem; /* Taille par défaut */
         /* La couleur est héritée de la règle nav[style*=...] dans header.php, pas besoin de la forcer ici */
         /* color: #ffffff !important; */ 
         opacity: 1;
     }
     /* Cacher l'icône perso sur desktop */
     .hamburger-icon {
         display: none !important;
     }
}

/* Statut spécifique pour badge commande livrée */
.badge-livree {
  background-color: #0dcaf0 !important; /* Couleur info Bootstrap - correspond à la couleur utilisée dans manage_orders.php */
  color: #000 !important; /* Forcer le texte en noir pour le contraste avec le fond clair */
}

/* Style pour le badge de quantité totale */
.list-group-item .badge-total-qty {
  background-color: #5499de !important; /* Nouvelle couleur demandée */
  min-width: 55px; /* Largeur minimale pour alignement (ajuster si besoin) */
  display: inline-block; /* Assurer que min-width s'applique */
  text-align: center; /* Centrer le texte si min-width le rend large */
  color: white !important; /* Texte en blanc pour contraste */
}