:root {
  --primary: #50881a;           /* Vert principal */
    --secondary: #a3c68c; 
  --primary-rgb: 80, 136, 26;
  --secondary-rgb: 163, 198, 140;        /* Vert clair pour secondaire */
    --accent: #3f6b14;            /* Vert plus foncé pour accent */
    --light: #f8f9fa;             /* Couleur claire inchangée */
    --dark: #2a2d34;              /* Couleur sombre inchangée */
    --success: #5cbf4d;           /* Vert succès plus saturé */
    --warning: #ffb347;           /* Orange clair pour avertissements */
    --danger: #e74c3c;            /* Rouge pour erreurs */
    --info: #4da3b7;              /* Bleu pour infos */
    --shadow-primary: 0 0 0 0.25rem rgba(80, 136, 26, 0.25);
    --shadow-secondary: 0 0 0 0.25rem rgba(163, 198, 140, 0.25);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body { 
    font-family: "Poppins", sans-serif;
    color: var(--dark);
    background-color: var(--light); /* Utilisation de la variable light */
    overflow-x: hidden;
    padding-top: 40px; /* Pour compenser la navbar fixe */
}

.bg-principal {
    background: var(--primary);
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    padding: 12px 28px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 0 0 0.25rem rgba(163, 198, 140, 0.25);

}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    color: white;
}

/* =================================================================
   Navigation améliorée
================================================================= */
.navbar {
    padding: 20px 0;
    transition: all 0.4s ease;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Style for the scrolled state of the navbar */
.navbar.navbar-scrolled {
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    padding: 0; /* Remove default padding to fit the image */
    margin-right: 20px;
}

/* Logo Image Styling */
.logo-img {
    max-height: 60px; /* Default height for the logo */
    width: 160px; /* Maintain aspect ratio */
    transition: max-height 0.4s ease; /* Smooth transition on scroll */
}

/* Logo size when navbar is scrolled */
.navbar.navbar-scrolled .logo-img {
    max-height: 40px;
}

.nav-link {
    font-weight: 500;
    margin: 0 10px;
    position: relative;
}

.nav-link:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s ease;
}

.nav-link:hover:after {
    width: 100%;
}

/* =================================================================
   Cart Badge & Icon Styling
================================================================= */
.cart-badge-desktop,
.cart-badge-mobile {
    position: absolute;
    font-size: 0.7em;
    padding: 0.2em 0.5em;
    border-radius: 50%;
    transform: translate(50%, -50%);
}

.cart-icon-mobile {
    position: relative;
    margin-right: 15px;
    color: var(--dark);
}

.cart-link-desktop {
    position: relative;
    display: flex;
    align-items: center;
}

.cart-link-desktop .badge {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
}

/* =================================================================
   Desktop Account & Language Dropdowns
================================================================= */

.account-dropdown,
.language-dropdown {
    position: relative;
    margin-left: 10px;
}

.account-btn,
.language-btn {
    background: none;
    border: 1px solid rgba(42, 45, 52, 0.2); /* gris doux basé sur --dark */
    color: var(--dark);                        /* texte foncé */
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.account-btn:hover,
.language-btn:hover {
    background: var(--secondary);
    color: white;       /* vert principal léger au hover */
    border-color: var(--primary);              /* bordure verte au hover pour plus de cohérence */
}

.account-menu,
.language-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--light); /* fond clair */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(42, 45, 52, 0.1); /* ombre douce basée sur dark */
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.account-menu {
    width: 220px;
    padding: 15px;
}

.language-menu {
    width: 150px;
    padding: 10px;
}

.account-menu.active,
.language-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-menu a,
.account-menu > form > button,
.language-menu a {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: none;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--dark); /* texte foncé */
    text-align: left;
}

.account-menu a:hover,
.account-menu > form > button:hover,
.language-menu a:hover {
    background: rgba(80, 136, 26, 0.05); /* léger vert au survol */
}


.account-menu a,
.account-menu > form > button {
    padding: 10px 15px;
    margin-bottom: 8px;
}

.language-menu a {
    padding: 8px 12px;
}

.account-menu a i {
    margin-right: 10px;
    width: 20px;
}

.account-menu a:hover,
.account-menu > form > button:hover,
.language-menu a:hover {
    background: #f8f9fa;
}

.login-btn {
     background: white;
     color: var(--primary);
}

.register-btn {
    background: white;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.form-link {
    color: #007BFF;
    text-decoration: none;
}
.form-link:hover {
    text-decoration: underline;
    color: #0056b3;
}
.policy-link {
    color: #4a6fa5;;
    text-decoration: underline; /* garder souligné si tu veux la lisibilité */
}
.policy-link:hover {
    color: #2a4a7a;;
}


/* =================================================================
   Mobile Menu
================================================================= */
.mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 2000;
    display: none;
    padding: 100px 20px 20px;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
}

.mobile-menu-container.active {
    display: block;
    transform: translateY(0);
}

.close-menu-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--primary);
}

.mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.mobile-nav .nav-link {
    padding: 15px 0;
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
    color: var(--dark);
    text-decoration: none;
    display: block;
}
.mobile-account-btn,
.mobile-language-btn {
    display: flex;
    align-items: center;
    padding: 15px 0;
    font-size: 1.2rem;
    color: var(--dark);           /* texte foncé */
    background: none;
    border: none;
    border-bottom: 1px solid rgba(42, 45, 52, 0.1); /* gris doux basé sur dark */
    width: 100%;
    text-align: left;
}

.mobile-account-btn i,
.mobile-language-btn i {
    margin-right: 10px;
    font-size: 1.4rem;
}

.account-menu-mobile,
.language-menu-mobile {
    display: none;
    padding-left: 20px;
    border-bottom: 1px solid rgba(42, 45, 52, 0.1); /* gris doux */
}

.language-menu-mobile {
    padding: 10px 0 20px 20px;
}

.account-menu-mobile.active,
.language-menu-mobile.active {
    display: block;
}

.account-menu-mobile a,
.account-menu-mobile > form > button,
.language-menu-mobile a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    margin-bottom: 0;
    border: none;
    background: none;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--dark);       /* texte foncé */
    font-size: 1.1rem;
}

.account-menu-mobile a:hover,
.account-menu-mobile > form > button:hover,
.language-menu-mobile a:hover {
    background: rgba(80, 136, 26, 0.05); /* léger vert au hover */
}

.login-btn-mobile,
.register-btn-mobile {
    color: white !important;
    padding: 12px 15px !important;
    margin: 5px 0;
    border-radius: 8px;
    text-decoration: none;
}

.login-btn-mobile {
    background: var(--primary) !important;
    border: none;
}

.register-btn-mobile {
    background: white !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
}

.mobile-nav .btn {
    margin-top: 20px;
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}

/* =================================================================
   Media Queries
================================================================= */
@media (max-width: 991.98px) {
    .cart-link-desktop {
        display: none !important;
    }

    .logo-img {
        max-height: 45px;
         width: 140px; /* Maintain aspect ratio */
    }
}

@media (min-width: 992px) {
    .cart-icon-mobile {
        display: none !important;
    }
    .mobile-menu-container {
        display: none !important;
    }
}

/* Section Hero */

.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.text-dark {
    color: var(--dark) !important;
}



.hero {
    padding: 120px 0 80px;
    background: whitesmoke; /* Dégradé basé sur la couleur claire */
    position: relative;
    overflow: hidden;
}

.hero:before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(80, 136, 26, 0.15) 0%, /* Utilisation du vert principal pour le halo */
        transparent 70%
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero h1 span {
    color: var(--primary); /* Vert principal */
    position: relative;
}

.hero h1 span:after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 15px;
    background-color: rgba(80, 136, 26, 0.2); /* Vert principal léger */
    z-index: -1;
}
.btn-lg:hover{
    outline: none;
    border: none;
}
.btn-lg:focus,.btn:active {
     background-color: var(--primary) !important; /* Utilisez votre couleur primaire */
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25) !important;
    color: white !important;
    outline: none;

}

.btn-newsletter:focus,
.btn-newsletter:active {
    background-color: var(--primary) !important; /* Utilisez votre couleur primaire */
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25) !important;
}

.btn-loading {
    background-color: var(--primary) !important; /* Utilisez votre couleur primaire */
    border-color: var(--primary) !important;
    opacity: 0.8; /* Optionnel : réduit légèrement l'opacité pour indiquer l'état de chargement */
}

.btn-loading:focus,
.btn-loading:active {
    box-shadow: none !important; /* Supprime l'ombre de focus pendant le chargement */
}

.hero-image {
    position: relative;
    animation: float 6s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

.hero-image:before {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    filter: blur(10px);
    z-index: -1;
}

.features {
    padding: 100px 0;
    background-color: white;
}
.feature-card {
    background: var(--light); /* Utilisation du light au lieu de blanc */
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(42, 45, 52, 0.05); /* léger ombrage basé sur dark */
    height: 100%;
    border: 1px solid rgba(163, 198, 140, 0.2); /* couleur secondaire plus douce */
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(163, 198, 140, 0.25); /* ombre plus visible au hover */
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(
        135deg,
        rgba(80, 136, 26, 0.1) 0%,  /* vert principal léger */
        rgba(163, 198, 140, 0.1) 100% /* vert secondaire léger */
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 30px;
    color: var(--primary); /* couleur du texte icône en vert principal */
}


.ingredients {
    padding: 100px 0;
    background: linear-gradient(to right, #fffaf5 0%, #ffffff 100%);
    position: relative;
}

.ingredient-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ingredient-item:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 25px rgba(244, 162, 97, 0.15);
}

.ingredient-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--secondary) 0%,
        var(--accent) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-right: 20px;
    flex-shrink: 0;
}

.testimonials {
    padding: 100px 0;
    background-color: #f8f9fa;
}

.testimonial-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    margin-top: 40px;
}

.testimonial-card:before {
    content: '"';
    position: absolute;
    top: -30px;
    left: 20px;
    font-size: 100px;
    color: var(--secondary);
    font-family: serif;
    line-height: 1;
}

.client-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--secondary);
}

.stars {
    color: #ffc107;
    margin-bottom: 15px;
}

.cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.3;
}

.price-tag {
    background: white;
    color: var(--primary);
    padding: 8px 25px;
    border-radius: 30px;
    display: inline-block;
    font-weight: 700;
    font-size: 1.8rem;
    margin: 20px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.footer {
    background-color: var(--dark);
    color: white;
    padding: 70px 0 30px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-5px);
}

.product-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.quantity-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    background: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.quantity-input {
    width: 60px;
    height: 40px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-size: 1.1rem;
}

/* Authentification */

.auth-container {
    max-width: 500px;
    margin: 70px auto;
    padding: 40px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.auth-container h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 30px;
    text-align: center;
}

.form-label {
    font-weight: 500;
    color: var(--dark);
}

.form-control {
    border-radius: 8px;
    padding: 12px 15px;
    border: 1px solid #ddd;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary);
   box-shadow: 0 0 0 0.25rem rgba(120, 171, 89, 0.25);

}

.btn-register {
    background-color: var(--primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none; /* Ensure no default button border */
}

.btn-register:hover {
    background-color: #696969; 
    color:white;
    transform: translateY(-2px);
}

.btn-login {
    background-color: var(--primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none; /* Ensure no default button border */
}

.btn-login:hover {
    background-color: #696969;
    color:white;
    transform: translateY(-2px);
}

.text-center a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.text-center a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Styles for the Google button */
.btn-google {
    background-color: #4285f4; /* Google Blue */
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    margin-top: 20px; /* Space above Google button */
}

.btn-google:hover {
    background-color: #357ae8; /* Darker Google Blue on hover */
    transform: translateY(-2px);
}

.btn-google i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 25px 0;
    color: #888;
}

.separator::before,
.separator::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #eee;
}

.separator:not(:empty)::before {
    margin-right: 0.25em;
}

.separator:not(:empty)::after {
    margin-left: 0.25em;
}

/* Responsive */

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-image {
        margin-top: 40px;
    }
}

.spice-level {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.spice-dot {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 5px;
    background: #e9ecef;
}

.spice-dot.active {
    background: var(--primary);
}
.floating-cart {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary); /* vert principal */
    color: var(--light);        /* texte blanc clair */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(80, 136, 26, 0.4); /* vert principal semi-transparent */
    z-index: 1000;
    cursor: pointer;
    transition: all 0.3s ease;
}

.floating-cart:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(80, 136, 26, 0.6); /* intensité de l'ombre au hover */
}


.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--secondary);
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Nouvelle section variantes */
.variants-section {
    padding: 80px 0;
    background: linear-gradient(to bottom, #fffaf5 0%, #ffffff 100%);
}

.variant-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(244, 162, 97, 0.2);
    position: relative;
}

.variant-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(244, 162, 97, 0.2);
}

/* --- Product Link in Carousel Card --- */
.variant-card .product-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.variant-card .product-link:hover .variant-content .variant-title {
    color: var(--primary);
}

.variant-image {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #fffaf5;
    overflow: hidden;
}

.variant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.variant-card:hover .variant-image img {
    transform: scale(1.05);
}

.variant-content {
    padding: 25px;
    display: block;
}

.variant-title {
    font-family: "Montserrat", sans-serif;
    /* Réduit la marge après le titre */
    color: var(--dark);
    font-size: 1.25rem;
}

.variant-description {
    color: #6c757d;
    font-size: 0.95rem;
}

.variant-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.variant-spice {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.spice-label {
    margin-right: 10px;
    font-weight: 500;
}

.variant-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--secondary);
    color: white;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10;
}

.add-to-cart-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 0;
    border-radius: 0 0 15px 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

.add-to-cart-btn:hover {
    background: #696969;
    transform: translateY(-2px);
    box-shadow: var(--shadow-secondary);
}

.add-to-cart-btn i {
    margin-right: 8px;
}

.add-to-cart-btn.btn-success {
    background-color: #28a745;
}
.add-to-cart-btn.btn-success:hover {
    background-color: #218838;
}

.section-title {
    position: relative;
    margin-bottom: 50px;
    text-align: center;
}

.section-title:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--primary);
    border-radius: 2px;
}

.feature-highlight {
/* background: linear-gradient(
    135deg,
    #ffffff 0%,
    #cccccc 100%
); */
  background: whitesmoke;

    padding: 80px 0;
}

/* Cart Popup Styles */
.cart-popup {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 350px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cart-popup.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cart-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
}

.close-cart {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-cart:hover {
    color: var(--primary);
}

.cart-items {
    max-height: 300px;
    overflow-y: auto;
    padding: 0 20px;
}

.cart-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #f1f1f1;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin-right: 15px;
    background: #fffaf5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-image img {
    max-height: 45px;
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.cart-item-price {
    color: var(--primary);
    font-weight: 700;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.cart-item-quantity button {
    width: 25px;
    height: 25px;
    border: 1px solid #ddd;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cart-item-quantity input {
    width: 40px;
    height: 25px;
    text-align: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.remove-item {
    color: #dc3545;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.remove-item:hover {
    color: #bd2130;
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid #eee;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.checkout-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 0;
    border-radius: 8px;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s ease;
}

.checkout-btn:hover {
    background-color: #696969;
    color:white;
    transform: translateY(-2px);
}

/* Account Dropdown */
.account-dropdown {
    position: relative;
}


.account-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.account-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-menu button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 8px;
    text-align: left;
    border: none;
    background: none;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.account-menu button i {
    margin-right: 10px;
    width: 20px;
}

.account-menu button:hover {
    background: #f8f9fa;
}

.login-btn {
    color: var(--secondary);
}

.register-btn {
    color: var(--secondary);
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease forwards;
}

.container.my-5 {
    /* Ensures consistent spacing with your existing layout */
    padding-top: 20px;
    padding-bottom: 20px;
}

.card {
    border-radius: 0.5rem;
    border: none;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Consistent with your dashboard-card shadow */
}

.card-header {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
    font-weight: bold;
    /* Using your defined primary color */
    background-color: var(--primary);
    color: white;
}

/* Table Specifics for Cart Items */
.table-responsive {
    overflow-x: auto;
}

.table th,
.table td {
    white-space: nowrap;
    padding: 1rem;
    vertical-align: middle;
}

.table thead th {
    background-color: var(
        --light
    ); /* Using your light variable for header background */
    color: var(--dark); /* Using your dark variable for header text */
    border-bottom: 2px solid #dee2e6;
}

.img-thumbnail {
    border: 1px solid #dee2e6;
    border-radius: 0.3rem;
}

/* Quantity Control Input Group */
.input-group-sm .form-control {
    height: calc(1.8125rem + 2px);
}

.input-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    /* Ensure these match your general btn-outline-secondary if applicable */
    border-color: #ced4da;
    color: #6c757d;
    background-color: #fff;
}

.input-group-sm .btn:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
    color: #5a6268;
}

/* Remove Item Button */
.remove-item {
    /* Changed from .remove-item-btn to .remove-item as per HTML */
    border: none;
    background: none;
    color: #dc3545; /* Standard danger color for removal */
    font-size: 1.1rem;
    transition: color 0.2s ease-in-out;
}

.remove-item:hover {
    color: white;
}

/* Cart Summary List Group */
.list-group-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0.75rem 0;
}

.list-group-item:last-child {
    border-bottom: none;
}

/* Buttons (Leveraging your existing .btn-primary, .btn-warning, .btn-secondary) */
/*
The existing .btn-primary, .btn-warning, and .btn-secondary styles you provided
in your main CSS are sufficient. The cart page HTML uses these classes, so they
will automatically adopt your site's primary, warning, and secondary button styles.
No need to re-define them here.
*/

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .card-header {
        font-size: 1.1rem;
        text-align: center;
    }

    .table th,
    .table td {
        font-size: 0.9rem;
        padding: 0.75rem;
    }

    .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
    }

    .d-flex.align-items-center img {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }

    .input-group-sm {
        width: 100px !important;
        margin: auto;
    }

    .remove-item {
        /* Applies to the remove button in table */
        width: 100%;
        margin-top: 0.5rem;
    }

    .list-group-item span {
        font-size: 1rem;
    }
}

/* --- Product Detail Page Styles --- */

.product-detail-page {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Image Gallery Styles */
.product-gallery {
    /* Optional: add some padding if you want space around the images */
    padding: 10px;
    background-color: white; /* Match your card backgrounds */
    border-radius: 15px; /* Match your card border-radius */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Match your card shadow */
}

.main-image-container {
    border-radius: 10px; /* Slight rounder corners for the main image */
    overflow: hidden; /* Ensures image corners match container */
    background-color: var(--light); /* A light background for image container */
    display: flex; /* For centering the image if it's smaller */
    align-items: center;
    justify-content: center;
    padding: 15px; /* Internal padding for the image within its container */
}

.main-image-container img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below image */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.thumbnail-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between thumbnails */
    justify-content: center; /* Center thumbnails below main image */
    padding-top: 10px;
}

.thumbnail-gallery img.img-thumbnail {
    width: 90px; /* Fixed width for thumbnails */
    height: 70px; /* Fixed height for thumbnails */
    object-fit: cover; /* Cover the area, cropping if necessary */
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    border-radius: 8px; /* Slightly rounded thumbnails */
    background-color: #f8f8f8; /* Light background for thumbnails */
    padding: 3px; /* Small padding inside thumbnail border */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}


.thumbnail-gallery img.img-thumbnail:hover {
    border-color: var(--secondary); /* Highlight on hover */
    transform: translateY(-2px);
     transform: scale(1.05);
    z-index: 1;
}

.thumbnail-gallery img.img-thumbnail.active {
    border-color: var(--primary); /* Highlight active thumbnail */
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2); /* Soft shadow around active */
}

/* Product Info Styles */
.product-info {
    padding: 20px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.product-title {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 15px;
}

.product-brand {
    font-size: 1.1rem;
    color: #6c757d;
}

.prices .selling-price {
    color: var(--primary);
    font-weight: 700;
}

.prices .original-price {
    color: #6c757d;
    font-weight: 500;
}

.product-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--dark);
}

/* Quantity Control */
.quantity-control .btn {
    border-color: #ced4da;
    color: #6c757d;
    background-color: #fff;
    font-size: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-control .btn:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.quantity-control .product-quantity {
    width: 60px;
    height: 40px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-size: 1.1rem;
    border-radius: 0;
}

.stock-status {
    font-size: 1.1rem;
}

.stock-status .text-success {
    color: var(--success) !important;
}

.stock-status .text-danger {
    color: #dc3545 !important;
}

/* Action Buttons (Add to Cart, Buy Now) */
.add-to-cart-btn-lg,
.buy-now-btn-lg {
    padding: 15px 25px;
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.add-to-cart-btn-lg {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

.add-to-cart-btn-lg:hover {
    background-color: #696969; /* Darker primary */
    border-color: #696969;
    transform: translateY(-2px);
    box-shadow: var(--shadow-secondary);
}

/* .add-to-cart-btn-lg:focus,.add-to-cart-btn-lg:active{
    background-color: var(--primary);
    background: var(--primary);
    border-color: 3px solid var(--secondary);
    color: white;
    outline: none;
} */

.buy-now-btn-lg {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.buy-now-btn-lg:hover {
    background-color: var(--primary);
    color: white;
    transform: translateY(-2px);
    
}

.trending-badge-container {
    min-height: 40px; /* Give it space even when hidden */
}
.trending-badge {
    background-color: var(--secondary);
    color: white;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(var(--secondary-rgb), 0.3);
}
/* Ensure --secondary-rgb is defined in your root, e.g.:
:root {
    --primary: #e63946;
    --primary-rgb: 230, 57, 70;
    --secondary: #f4a261;
    --secondary-rgb: 244, 162, 97;
    ...
}
*/

/* Long Description Section */
.long-description-section h4 {
    color: var(--dark);
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

.long-description-section p {
    line-height: 1.8;
    color: #495057;
}

.long-description-section ul {
    list-style: none;
    padding-left: 0;
}

.long-description-section ul li {
    margin-bottom: 10px;
    color: var(--dark);
    display: flex;
    align-items: center;
    font-weight: 500;
}

.long-description-section ul li i {
    color: var(--success); /* Checkmark icon color */
    margin-right: 10px;
    font-size: 1.1rem;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .product-title {
        font-size: 2rem;
        text-align: center;
    }
    .product-brand {
        text-align: center;
    }
    .prices {
        text-align: center;
    }
    .product-description {
        text-align: center;
    }
    .product-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .quantity-control {
        margin-bottom: 15px;
    }
    .trending-badge-container {
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .product-detail-page {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .product-gallery,
    .product-info {
        padding: 15px;
    }
    .product-title {
        font-size: 1.8rem;
    }
    .prices .selling-price {
        font-size: 2.2rem;
    }
    .prices .original-price {
        font-size: 1.2rem;
    }
    .add-to-cart-btn-lg,
    .buy-now-btn-lg {
        font-size: 1.1rem;
        padding: 12px 20px;
    }
    .main-image-container {
        padding: 10px;
    }
    .thumbnail-gallery img.img-thumbnail {
        width: 70px;
        height: 55px;
    }
}

/* --- Reviews and Comments Section Styles (No major changes needed from previous version) --- */

.reviews-section {
    padding-top: 30px;
    padding-bottom: 50px;
}

.reviews-list-card {
    border-radius: 15px; /* Match existing card styles */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Match existing card styles */
}

/* Individual Review Item */
.reviews-container {
    max-height: 700px; /* Limit height for scrollability */
    overflow-y: auto; /* Enable scrolling for many reviews */
    padding-right: 15px; /* Space for scrollbar */
}

.review-item {
    border-bottom: 1px solid #eee; /* Light separator between reviews */
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.review-item:last-child {
    border-bottom: none; /* No border for the last review */
}

.review-author {
    font-weight: 600;
    color: var(--dark);
}

.review-date {
    font-size: 0.9rem;
    color: #6c757d;
}

.review-rating.stars {
    font-size: 1.2rem;
    color: #ffc107; /* Star color */
}

.review-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    margin-top: 10px;
    color: var(--dark);
}

.review-comment {
    line-height: 1.6;
    color: #495057;
}

/* Comments within a review */
.comments-section {
    background-color: #f8f9fa; /* Light background for comment block */
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.comment-item {
    border-left: 3px solid var(--secondary); /* Accent border for comments */
    padding-left: 15px;
    margin-bottom: 10px;
}

.comment-item:last-child {
    margin-bottom: 0;
}

.comment-author {
    font-weight: 500;
    color: var(--dark);
    font-size: 0.95rem;
}

.comment-date {
    font-size: 0.8rem;
    color: #888;
}

.comment-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .reviews-container {
        max-height: 500px; /* Adjust height for tablets */
    }
}

@media (max-width: 767.98px) {
    .reviews-container {
        max-height: 400px; /* Adjust height for mobiles */
        padding-right: 0; /* Remove padding if scrollbar isn't an issue */
    }
    .review-item,
    .comment-item {
        padding-left: 10px; /* Adjust padding for smaller screens */
    }
}

/* Diplay profil user or buyer */

.profile-container {
    background-color: #f8f9fa;
}

/* Sidebar */
.profile-sidebar {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--primary);
}

.profile-name {
    font-family: "Montserrat", sans-serif;
    color: var(--dark);
}

.profile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-nav li a,
.profile-nav li .logout-button {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 5px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1rem;
}

.profile-nav li a i,
.profile-nav li .logout-button i {
    margin-right: 15px;
    width: 20px;
    color: #6c757d;
    transition: all 0.3s ease;
}

.profile-nav li a:hover,
.profile-nav li .logout-button:hover {
    background-color: rgba(230, 57, 70, 0.08);
    color: var(--primary);
}

.profile-nav li a:hover i,
.profile-nav li .logout-button:hover i {
    color: var(--primary);
}

.profile-nav li a.active {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 10px rgba(230, 57, 70, 0.3);
}

.profile-nav li a.active i {
    color: white;
}

/* Contenu Principal */
.profile-content {
    display: none;
}
.profile-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.profile-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    padding: 20px;
    color: white;
}

/* 
.profile-card .card-header {

} */

.profile-card .card-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.profile-card .card-body {
    padding: 25px;
}

/* Table */
.table-profile {
    vertical-align: middle;
}
.table-profile thead {
    color: var(--primary);
}
.table-profile tbody tr:hover {
    background-color: #f8f9fa;
}

/* Badges de Statut */
.profile-container .badge-status {
    padding: 0.4em 0.7em;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}
.profile-container .badge-status.shipped {
    background-color: #ffc107;
}
.profile-container .badge-status.delivered {
    background-color: var(--success);
}
.profile-container .badge-status.cancelled {
    background-color: #6c757d;
}

/* Avis */
.profile-container .review-item {
    position: relative; /* Nécessaire pour positionner les actions */
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}
.profile-container .review-item:first-child {
    padding-top: 0;
}
.profile-container .review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.profile-container .review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.profile-container .review-product {
    font-family: "Montserrat", sans-serif;
    margin: 0;
}
.profile-container .review-text {
    font-style: italic;
    color: #555;
}

/* Boutons d'action pour Modifier/Supprimer */
.profile-container .review-actions {
    position: absolute;
    top: 20px;
    right: 0;
}
.profile-container .btn-icon {
    background: transparent;
    border: none;
    color: #adb5bd;
    padding: 5px 10px;
}
.profile-container .btn-icon:hover {
    color: var(--dark);
    background-color: #f8f9fa;
}
.profile-container .dropdown-menu i {
    width: 20px;
}

/* Étoiles interactives dans la modale */
.profile-container .star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.profile-container .star-rating input[type="radio"] {
    display: none;
}
.profile-container .star-rating label {
    color: #ccc;
    cursor: pointer;
    font-size: 2rem;
    transition: color 0.2s;
}
.profile-container .star-rating label:hover,
.profile-container .star-rating label:hover ~ label,
.profile-container .star-rating input[type="radio"]:checked ~ label {
    color: #ffc107;
}

/* Responsive */
@media (max-width: 991.98px) {
    .profile-sidebar {
        margin-bottom: 30px;
    }
}

/* Alerte de vérification d'e-mail */
.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #664d03;
    border-radius: 8px; /* Assorti au reste du design */
}
.alert-warning .btn-link {
    color: #664d03;
}

/* Section pour la photo de profil */
.profile-picture-uploader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    height: 100%;
}
.profile-picture-uploader .avatar-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    object-fit: cover;
}

/* S'assurer que le formulaire a un peu d'espace */
@media (min-width: 992px) {
    .profile-picture-uploader + .col-lg-8 form {
        border-left: 1px solid #eee;
        padding-left: 25px;
    }
}

.address-card {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.address-card.default {
    border-left: 4px solid var(--primary);
}

.address-card:hover {
    border-color: #ced4da;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.address-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.address-card-header h5 {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
}

.address-card-body {
    flex-grow: 1; /* Permet au contenu de pousser le footer en bas */
}

.address-card-body p {
    margin: 0;
    line-height: 1.6;
    color: #495057;
}

.address-card-footer {
    margin-top: 15px;
}

.btn-link-address {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary);
    margin-right: 15px;
}
.btn-link-address:hover {
    text-decoration: underline;
}
.btn-link-address.text-danger {
    color: var(--primary) !important; /* Pour surcharger la classe text-danger */
}
.btn-link-address.text-danger:hover {
    color: #c1121f !important;
}

/* assets/css/index.css */
.spinner-border-sm {
    width: 0.8rem;
    height: 0.8rem;
    border-width: 0.15em;
}

.btn:disabled {
    opacity: 0.7;
}

/* Badges de statut */
.badge-status {
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-status.shipped {
    background-color: #e8f4ff;
    color: var(--primary);
}

.badge-status.delivered {
    background-color: #e6f7ee;
    color: #198754;
}

.badge-status.cancelled {
    background-color: #fdf0f0;
    color: #dc3545;
}

/* Pagination Livewire */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
}

.page-item .page-link {
    padding: 0.375rem 0.75rem;
    margin: 0 2px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    color: var(--primary);
    text-decoration: none;
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
}