: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);
}

/* =================================================================
   CRITICAL: Global Responsive Protection
================================================================= */
html {
    overflow-x: hidden;
    max-width: 100%;
}

/* Prevent text overflow globally */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

* {
    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;
    max-width: 100vw;
    padding-top: 40px; /* Pour compenser la navbar fixe */
}

/* Global responsive images and media */
img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

.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
================================================================= */

/* =================================================================
   CRITICAL: iPhone SE and Very Small Devices (320px - 375px)
================================================================= */
@media (max-width: 375px) {
    body {
        padding-top: 55px;
    }

    .navbar {
        padding: 8px 0;
    }

    .logo-img {
        max-height: 32px;
        width: 110px;
    }

    .mobile-menu-container {
        padding: 70px 12px 12px;
    }

    .mobile-nav .nav-link {
        padding: 10px 0;
        font-size: 1rem;
    }

    .close-menu-btn {
        top: 15px;
        right: 15px;
        font-size: 1.6rem;
    }

    /* Hero adjustments for very small screens */
    .hero h1 {
        font-size: 1.9rem !important;
    }

    .hero .lead {
        font-size: 0.95rem;
    }

    .hero {
        padding: 80px 0 60px;
    }

    /* Cart items smaller on tiny screens */
    .cart-item-image {
        width: 50px !important;
        height: 50px !important;
    }

    /* Floating cart adjustment */
    .floating-cart {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 15px;
        font-size: 1.2rem;
    }

    .cart-count {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    /* Auth container */
    .auth-container {
        padding: 25px 20px;
        margin: 50px auto;
    }

    /* Product cards */
    .variant-card {
        margin-bottom: 15px;
    }

    .feature-card {
        padding: 20px;
    }
}

/* Extra Small Devices (Phones, 320px - 480px) */
@media (max-width: 480px) {
    body {
        padding-top: 60px;
    }

    .navbar {
        padding: 10px 0;
    }

    .logo-img {
        max-height: 35px;
        width: 120px;
    }

    .mobile-menu-container {
        padding: 80px 15px 15px;
    }

    .mobile-nav .nav-link {
        padding: 12px 0;
        font-size: 1.1rem;
    }

    .close-menu-btn {
        top: 20px;
        right: 20px;
        font-size: 1.8rem;
    }
}

/* Small Devices (Small Tablets and large Phones, 481px - 767px) */
@media (min-width: 481px) and (max-width: 767.98px) {
    body {
        padding-top: 65px;
    }

    .navbar {
        padding: 15px 0;
    }

    .logo-img {
        max-height: 40px;
        width: 130px;
    }

    .hero h1 {
        font-size: 2.3rem;
    }

    .hero .lead {
        font-size: 1.05rem;
    }

    .hero {
        padding: 100px 0 70px;
    }

    /* Product cards in 2 columns */
    .variant-card {
        margin-bottom: 20px;
    }

    /* Better spacing for forms */
    .form-control {
        font-size: 1rem;
    }
}

/* Medium Devices (Tablets, 768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    body {
        padding-top: 70px;
    }

    .navbar {
        padding: 18px 0;
    }

    .logo-img {
        max-height: 45px;
        width: 140px;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .hero {
        padding: 110px 0 80px;
    }

    /* 2-3 column layouts */
    .feature-card {
        min-height: 280px;
    }

    /* Improve table layouts */
    .table {
        font-size: 0.95rem;
    }

    /* Cart popup better positioned */
    .cart-popup {
        max-width: 380px;
    }
}

/* Tablets and Below - Hide desktop cart */
@media (max-width: 991.98px) {
    .cart-link-desktop {
        display: none !important;
    }
}

/* Desktop and Above - Hide mobile elements */
@media (min-width: 992px) {
    .cart-icon-mobile {
        display: none !important;
    }
    .mobile-menu-container {
        display: none !important;
    }
}

/* Large Desktops (1200px and above) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .hero h1 {
        font-size: 3.8rem;
    }

    .hero {
        padding: 130px 0 90px;
    }

    /* Larger feature icons */
    .feature-icon {
        width: 90px;
        height: 90px;
        font-size: 35px;
    }

    .feature-card {
        padding: 35px;
    }
}

/* Extra Large Desktops (1400px and above) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

    .hero h1 {
        font-size: 4rem;
    }
}

/* Landscape orientation for phones */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        padding-top: 50px;
    }

    .mobile-menu-container {
        padding: 60px 15px 15px;
    }

    .close-menu-btn {
        top: 15px;
        right: 15px;
    }

    .mobile-nav .nav-link {
        padding: 8px 0;
        font-size: 1rem;
    }

    .hero {
        padding: 60px 0 40px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero .lead {
        font-size: 0.95rem;
    }

    .navbar {
        padding: 8px 0;
    }

    .logo-img {
        max-height: 35px;
    }

    /* Compact feature cards */
    .feature-card {
        padding: 15px;
    }

    /* Smaller floating cart */
    .floating-cart {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
}

/* High DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 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(
        --secondary
    ) !important; /* Use secondary color for loading state */
    border-color: var(--secondary) !important;
    opacity: 0.9;
}

.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;
}

.hero-image img {
    max-width: 100%;
    height: auto;
}

@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: 2.5rem;
    height: 2.5rem;
    min-width: 40px;
    min-height: 40px;
    max-width: 48px;
    max-height: 48px;
    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;
}

@media (max-width: 575.98px) {
    .social-icon {
        width: 44px;
        height: 44px;
        margin-right: 8px;
    }
}

.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;
    justify-content: flex-start;
}

.quantity-btn {
    min-width: 40px;
    width: 2.5rem;
    height: 2.5rem;
    max-width: 44px;
    border: 1px solid #ddd;
    background: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quantity-btn:active {
    transform: scale(0.95);
}

.quantity-input {
    width: 3.5rem;
    max-width: 70px;
    min-width: 50px;
    height: 2.5rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-size: 1.1rem;
}

/* Mobile adjustments for quantity controls */
@media (max-width: 575.98px) {
    .quantity-btn {
        min-width: 44px;
        height: 44px;
        width: 44px;
    }

    .quantity-input {
        width: 60px;
        height: 44px;
    }
}

/* Authentification */

.auth-container {
    width: 90%;
    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);
}

@media (max-width: 575.98px) {
    .auth-container {
        width: 95%;
        padding: 30px 20px;
        margin: 50px auto;
    }
}

.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 */

/* Standard Mobile Devices (up to 768px) */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

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

    /* Ensure containers don't overflow */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Responsive feature cards */
    .feature-card {
        margin-bottom: 20px;
    }

    /* Responsive Typography */
    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    .lead {
        font-size: 1.1rem;
    }

    /* Better button sizing */
    .btn-lg {
        padding: 12px 24px;
        font-size: 1.1rem;
    }

    /* Improve cards spacing */
    .card {
        margin-bottom: 20px;
    }

    /* Responsive images in content */
    .feature-highlight img,
    .ingredients img {
        margin-bottom: 30px;
    }
}

.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: 3.75rem;
    height: 3.75rem;
    min-width: 56px;
    min-height: 56px;
    max-width: 70px;
    max-height: 70px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(80, 136, 26, 0.4);
    z-index: 1000;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (max-width: 575.98px) {
    .floating-cart {
        width: 56px;
        height: 56px;
        bottom: 20px;
        right: 20px;
    }
}

.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: 90%;
    max-width: 350px;
    max-height: calc(100vh - 140px); /* Prevent overflow beyond viewport */
    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;
    will-change: transform, opacity; /* Performance optimization */
    display: flex;
    flex-direction: column; /* Ensure proper layout for internal scrolling */
}

/* Mobile adjustments for cart popup */
@media (max-width: 575.98px) {
    .cart-popup {
        width: calc(100% - 20px);
        right: 10px;
        left: 10px;
        bottom: 80px;
        max-height: calc(100vh - 120px); /* Adjust for mobile */
    }
}

.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;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.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;
    flex-grow: 1; /* Allow cart items to grow and be scrollable */
    flex-shrink: 1; /* Allow shrinking if needed */
}

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

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

.cart-item-image {
    width: 3.75rem;
    height: 3.75rem;
    min-width: 50px;
    min-height: 50px;
    max-width: 70px;
    max-height: 70px;
    border-radius: 10px;
    margin-right: 15px;
    background: #fffaf5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.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: 2.5rem;
    min-width: 40px;
    max-width: 50px;
    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;
    flex-shrink: 0; /* Prevent footer from shrinking */
}

.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: 13.75rem;
    max-width: 220px;
    min-width: 200px;
    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: 5.625rem;
    height: 4.375rem;
    max-width: 90px;
    max-height: 70px;
    min-width: 60px;
    min-height: 48px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    border-radius: 8px;
    background-color: #f8f8f8;
    padding: 3px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile thumbnail adjustments */
@media (max-width: 575.98px) {
    .thumbnail-gallery img.img-thumbnail {
        width: 4.375rem;
        height: 3.5rem;
        max-width: 70px;
        max-height: 55px;
    }
}

.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: 2.5rem;
    height: 2.5rem;
    min-width: 40px;
    min-height: 40px;
    max-width: 48px;
    max-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .quantity-control .btn {
        width: 44px;
        height: 44px;
    }
}

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

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

@media (max-width: 575.98px) {
    .quantity-control .product-quantity {
        width: 60px;
        height: 44px;
    }
}

.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: 6.25rem;
    height: 6.25rem;
    max-width: 120px;
    max-height: 120px;
    min-width: 80px;
    min-height: 80px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .profile-avatar {
        width: 5rem;
        height: 5rem;
        max-width: 90px;
        max-height: 90px;
    }
}

.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(var(--primary-rgb), 0.1);
    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(var(--primary-rgb));
}

.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.pending {
    background-color: #ff9800; /* Orange for pending */
}
.profile-container .badge-status.processing {
    background-color: #0dcaf0; /* Info Blue for processing */
}
.profile-container .badge-status.shipped {
    background-color: #0d6efd; /* Darker Blue for shipped */
}
.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: 9.375rem;
    height: 9.375rem;
    max-width: 180px;
    max-height: 180px;
    min-width: 120px;
    min-height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .profile-picture-uploader .avatar-preview {
        width: 120px;
        height: 120px;
    }
}

/* 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;
}

/* =================================================================
   Product Detail Page Styles
================================================================= */
.product-detail-page {
    padding: 40px 0;
}

/* Image Gallery */
.product-gallery {
    position: sticky;
    top: 100px;
}

.main-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--light);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.main-image-container:hover img {
    transform: scale(1.05);
}

.thumbnail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.thumbnail-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.thumbnail-gallery img:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.thumbnail-gallery img.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(80, 136, 26, 0.2);
}

/* Product Info */
.product-brand {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

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

.prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 15px;
}

.selling-price {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.original-price {
    font-size: 1.8rem;
    color: #999;
}

.saving-badge {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--success) 0%, #48b93f 100%);
    color: white;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Spice Level Modern Design */
.spice-level-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 0;
}

.spice-indicator {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.spice-indicator.active {
    background: linear-gradient(
        135deg,
        var(--primary) 0%,
        var(--secondary) 100%
    );
    box-shadow: 0 4px 10px rgba(80, 136, 26, 0.3);
}

.spice-indicator.active i {
    color: white;
}

.spice-indicator i {
    color: #ccc;
}

/* Product Attributes Grid */
.product-attributes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.attribute-item {
    padding: 20px;
    background: var(--light);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(163, 198, 140, 0.2);
}

.attribute-item:hover {
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.attribute-icon {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.attribute-label {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.attribute-value {
    font-size: 1.1rem;
    color: var(--dark);
}

/* Quantity Control */
.quantity-control {
    border-radius: 10px;
    overflow: hidden;
}

.quantity-control .btn {
    border-radius: 0;
    min-width: 45px;
    font-weight: bold;
}

.quantity-control .form-control {
    border-radius: 0;
    border-left: none;
    border-right: none;
    font-size: 1.1rem;
}

/* Action Buttons - Consistent with Product Carousel */
/* Action Buttons - Consistent with Product Carousel */
.add-to-cart-btn-lg {
    background: var(--primary);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 10px; /* Aligned with carousel btn */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(80, 136, 26, 0.2);
}

.add-to-cart-btn-lg:hover {
    background: var(--secondary); /* Requested Secondary Green */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(80, 136, 26, 0.3);
    color: white;
}

.checkout-btn {
    width: 100%;
    background: var(--primary);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(80, 136, 26, 0.2);
}

.checkout-btn:hover {
    background: var(--secondary); /* Requested Secondary Green */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(80, 136, 26, 0.3);
    color: white;
}

/* Quantity Buttons Custom Style */
.quantity-control .btn-quantity {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
    transition: all 0.2s ease;
}

.quantity-control .btn-quantity:hover,
.quantity-control .btn-quantity:focus,
.quantity-control .btn-quantity:active {
    background-color: var(--secondary) !important;
    color: white !important;
    border-color: var(--secondary) !important;
}

.buy-now-btn-lg {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.buy-now-btn-lg:hover {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
}

/* Floating Cart Quantity Buttons */
.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cart-item-quantity button {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}

.cart-item-quantity button:hover,
.cart-item-quantity button:active,
.cart-item-quantity button:focus {
    background-color: var(--secondary) !important;
    color: white !important;
    border-color: var(--secondary) !important;
}

.cart-item-quantity input {
    width: 30px;
    text-align: center;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark);
    background: transparent;
}

.remove-item {
    background: transparent;
    border: none;
    color: #999;
    transition: color 0.2s;
    margin-left: 8px;
    padding: 0 4px;
}

.remove-item:hover {
    color: var(--danger);
}

/* Unified Focus State for all Green Theme Buttons */
.add-to-cart-btn-lg:focus,
.checkout-btn:focus,
.btn-quantity:focus,
.cart-item-quantity button:focus,
.btn-add-cart-modern:focus,
.buy-now-btn-lg:focus,
.variant-label:focus-within {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(163, 198, 140, 0.5); /* Secondary Green Focus Ring */
    border-color: var(--secondary);
}

/* Ensure active/pressed state doesn't override focus ring visibility negatively or clash */
.add-to-cart-btn-lg:active:focus,
.checkout-btn:active:focus,
.btn-add-cart-modern:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(163, 198, 140, 0.5),
        inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-add-cart-modern:hover:not(:disabled) {
    background: var(--secondary); /* Requested Secondary Green */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(80, 136, 26, 0.3);
}

/* Trust Badges */
.trust-badges i {
    transition: all 0.3s ease;
}

.trust-badges .col-4:hover i {
    transform: scale(1.2);
}

/* Product Tabs */
.product-tabs {
    border-bottom: 2px solid var(--light);
    margin: 40px 0 30px;
}

.product-tabs .nav-link {
    border: none;
    color: var(--dark);
    font-weight: 600;
    padding: 15px 25px;
    position: relative;
    transition: all 0.3s ease;
    background: transparent;
}

.product-tabs .nav-link:hover {
    color: var(--primary);
}

.product-tabs .nav-link.active {
    color: var(--primary);
    background: transparent;
}

.product-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
}

/* Review Cards */
.review-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(163, 198, 140, 0.2);
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.avatar-circle {
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* Similar Products Section - Consistent Hover */
.similar-products-section .variant-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.similar-products-section .variant-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(80, 136, 26, 0.15); /* Aligned with modern card shadow */
}

/* Product Variants Section */
.product-variants {
    padding: 20px;
    background: var(--light);
    border-radius: 15px;
    border: 1px solid rgba(163, 198, 140, 0.2);
}

.variants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

.variant-option {
    position: relative;
}

.variant-label {
    width: 100%;
    padding: 15px;
    text-align: center;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
    justify-content: center;
    background: white;
    border: 2px solid #a3c68c; /* Stronger green border */
    color: var(--dark);
}

/* Nutrition Facts Label Style */
.nutrition-label {
    border: 2px solid #000;
    padding: 10px;
    font-family: "Arial", Helvetica, sans-serif;
    background: white;
    max-width: 400px;
    margin: 0 auto;
}

.nutrition-header {
    border-bottom: 10px solid #000;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.nutrition-title {
    font-weight: 900;
    font-size: 2rem;
    margin: 0;
    line-height: 1;
}

.nutrition-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #000;
    padding: 3px 0;
    font-size: 0.95rem;
}

.nutrition-row.thick-border {
    border-bottom: 5px solid #000;
}

.nutrition-row.medium-border {
    border-bottom: 2px solid #000;
}

.nutrition-row .label {
    font-weight: 700;
}
/* Global Modern Product Card Styles */
.product-card-modern {
    position: relative;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(80, 136, 26, 0.15);
}

/* Badge */
.product-badge-modern {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(80, 136, 26, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Image wrapper */
.product-image-wrapper-modern {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.product-image-modern {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card-modern:hover .product-image-modern {
    transform: scale(1.1);
}

/* Overlay */
.product-overlay-modern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(42, 45, 52, 0.03) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-card-modern:hover .product-overlay-modern {
    opacity: 1;
}

/* Content */
.product-content-modern {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Links */
.product-title-link,
.product-image-link {
    text-decoration: none;
    color: inherit;
}

.product-title-modern {
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.product-title-link:hover .product-title-modern {
    color: var(--primary);
}

/* Price */
.product-price-wrapper {
    margin-bottom: 14px;
}

.product-price-modern {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    font-family: "Montserrat", sans-serif;
}

/* Button */
.btn-add-cart-modern {
    width: 100%;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    box-shadow: 0 4px 12px rgba(80, 136, 26, 0.2);
}

.btn-add-cart-modern:hover:not(:disabled) {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(80, 136, 26, 0.3);
}

.btn-add-cart-modern:active:not(:disabled) {
    transform: translateY(0);
}

.btn-add-cart-modern:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-add-cart-modern i {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 767.98px) {
    .product-title-modern {
        font-size: 0.95rem;
        min-height: 2.8em;
    }

    .product-price-modern {
        font-size: 1.25rem;
    }

    .product-content-modern {
        padding: 16px;
    }

    .btn-add-cart-modern {
        padding: 12px 16px;
        font-size: 0.9rem;
    }

    .btn-text {
        display: none;
    }

    .btn-add-cart-modern i {
        margin: 0;
    }
}

@media (min-width: 768px) {
    .btn-text {
        display: inline;
    }
}

/* Similar Products Section - Consistent Hover */
.similar-products-section .variant-card {
    display: none; /* Hide old card style */
}

.nutrition-row .value {
    font-weight: 400;
}

.nutrition-sub-row {
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.9rem;
}

.variant-name {
    font-weight: 600;
    font-size: 1rem;
}

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

/* Checked State - Solid Green */
.btn-check:checked + .variant-label {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(80, 136, 26, 0.3);
}

.btn-check:checked + .variant-label .variant-price {
    color: white;
}

.btn-check:checked + .variant-label small {
    color: white !important;
}

/* Hover State - No Blue! */
.variant-label:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(80, 136, 26, 0.2);
    border-color: var(--primary);
    background: rgba(80, 136, 26, 0.05); /* Very light green tint */
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .product-gallery {
        position: relative;
        top: 0;
        margin-bottom: 40px;
    }

    .product-title {
        font-size: 2rem;
    }

    .selling-price {
        font-size: 2.2rem;
    }

    .product-tabs .nav-link {
        padding: 12px 18px;
        font-size: 0.95rem;
    }
}

@media (max-width: 767.98px) {
    .product-detail-page {
        padding: 20px 0;
    }

    .product-attributes {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-badges .col-4 {
        font-size: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .product-title {
        font-size: 1.6rem;
    }

    .selling-price {
        font-size: 1.8rem;
    }

    .original-price {
        font-size: 1.2rem;
    }

    .thumbnail-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .spice-indicator {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .add-to-cart-btn-lg,
    .buy-now-btn-lg {
        font-size: 1rem;
        padding: 12px 20px;
    }

    .product-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
    }

    .product-tabs .nav {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .product-tabs .nav-link {
        padding: 10px 15px;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .product-attributes {
        grid-template-columns: 1fr;
    }

    .attribute-item {
        padding: 15px;
    }
}

/* Animation for loading states */
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

[wire\:loading] {
    animation: pulse 1.5s ease-in-out infinite;
}

/* =================================================================
   MODERN PROFILE PAGE STYLES
================================================================= */

/* Profile Container */
.profile-container {
    background: var(--light);
    min-height: calc(100vh - 80px);
}

/* Modern Sidebar */
.profile-sidebar-modern {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(42, 45, 52, 0.08);
    overflow: hidden;
    position: sticky;
    top: 90px;
    transition: all 0.3s ease;
}

/* User Profile Header in Sidebar */
.profile-user-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    padding: 35px 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.profile-user-header::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
    );
    animation: float 6s ease-in-out infinite;
}

/* Avatar Wrapper */
.profile-avatar-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.profile-avatar,
.profile-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.profile-avatar {
    object-fit: cover;
}

.profile-avatar-placeholder {
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
}

.profile-status-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: var(--success);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* User Info */
.profile-user-info {
    position: relative;
    z-index: 2;
}

.profile-user-name {
    color: white;
    font-family: "Montserrat", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-user-email {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.profile-user-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-user-badge i {
    color: #ffd700;
}

/* Sidebar Component Integration */
.profile-sidebar-component {
    padding: 0;
    margin: 0;
}

/* Modern Navigation */
.profile-nav-modern {
    padding: 15px;
}

.profile-nav-link {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 8px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.profile-nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.profile-nav-link i:first-child {
    width: 22px;
    margin-right: 14px;
    font-size: 1.1rem;
    color: var(--primary);
    transition: all 0.3s ease;
}

.profile-nav-link i.fa-chevron-right {
    font-size: 0.75rem;
    color: #adb5bd;
    transition: all 0.3s ease;
}

.profile-nav-link span {
    flex: 1;
}

.profile-nav-link:hover {
    background: rgba(80, 136, 26, 0.05);
    color: var(--primary);
    transform: translateX(5px);
}

.profile-nav-link:hover i.fa-chevron-right {
    transform: translateX(4px);
    color: var(--primary);
}

.profile-nav-link.active {
    background: linear-gradient(
        135deg,
        rgba(80, 136, 26, 0.1) 0%,
        rgba(163, 198, 140, 0.1) 100%
    );
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(80, 136, 26, 0.1);
}

.profile-nav-link.active::before {
    transform: scaleY(1);
}

.profile-nav-link.active i.fa-chevron-right {
    color: var(--primary);
}

.profile-nav-divider {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #e9ecef 50%,
        transparent 100%
    );
    margin: 15px 0;
}

.profile-nav-logout {
    padding: 8px 0;
}

/* Content Sections */
.profile-content-section {
    display: none;
    animation: fadeInContent 0.4s ease;
}

.profile-content-section.active {
    display: block;
}

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

/* Modern Cards */
.profile-modern-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(42, 45, 52, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 25px;
}

.profile-modern-card:hover {
    box-shadow: 0 15px 50px rgba(42, 45, 52, 0.12);
    transform: translateY(-2px);
}

/* Card Header */
.profile-modern-card-header {
    display: flex;
    align-items: center;
    padding: 28px 32px;
    background: linear-gradient(
        135deg,
        rgba(80, 136, 26, 0.03) 0%,
        rgba(163, 198, 140, 0.03) 100%
    );
    border-bottom: 2px solid rgba(80, 136, 26, 0.1);
    position: relative;
}

.profile-modern-card-header::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 32px;
    width: 60px;
    height: 2px;
    background: var(--primary);
}

.profile-section-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    box-shadow: 0 6px 20px rgba(80, 136, 26, 0.25);
}

.profile-section-icon i {
    font-size: 1.4rem;
    color: white;
}

.profile-section-title h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.profile-section-title p {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

.profile-section-action {
    margin-left: auto;
}

/* Card Body */
.profile-modern-card-body {
    padding: 32px;
}

/* Settings Sections */
.settings-section {
    margin-bottom: 30px;
}

.settings-subsection-title {
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(80, 136, 26, 0.1);
}

.settings-divider {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #e9ecef 50%,
        transparent 100%
    );
    margin: 35px 0;
}

.settings-danger-zone {
    background: rgba(231, 76, 60, 0.03);
    padding: 25px;
    border-radius: 12px;
    border: 2px dashed rgba(231, 76, 60, 0.2);
}

.settings-danger-zone .settings-subsection-title {
    border-bottom-color: rgba(231, 76, 60, 0.2);
}

/* Responsive Design */

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .profile-sidebar-modern {
        position: relative;
        top: 0;
        margin-bottom: 30px;
    }

    .profile-user-header {
        padding: 30px 20px;
    }

    .profile-avatar,
    .profile-avatar-placeholder {
        width: 80px;
        height: 80px;
    }

    .profile-user-name {
        font-size: 1.2rem;
    }

    .profile-modern-card-header {
        padding: 22px 25px;
    }

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

    .profile-section-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .profile-section-icon i {
        font-size: 1.2rem;
    }

    .profile-section-title h3 {
        font-size: 1.3rem;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
    .profile-container {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .profile-sidebar-modern {
        position: relative;
        top: 0;
        margin-bottom: 25px;
        border-radius: 15px;
    }

    .profile-user-header {
        padding: 25px 15px;
    }

    .profile-avatar,
    .profile-avatar-placeholder {
        width: 70px;
        height: 70px;
        border-width: 3px;
    }

    .profile-avatar-placeholder i {
        font-size: 2rem;
    }

    .profile-status-indicator {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

    .profile-user-name {
        font-size: 1.1rem;
    }

    .profile-user-email {
        font-size: 0.85rem;
    }

    .profile-user-badge {
        font-size: 0.8rem;
        padding: 5px 12px;
    }

    .profile-nav-modern {
        padding: 10px;
    }

    .profile-nav-link {
        padding: 12px 15px;
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .profile-nav-link i:first-child {
        width: 20px;
        margin-right: 12px;
        font-size: 1rem;
    }

    .profile-modern-card {
        border-radius: 15px;
        margin-bottom: 20px;
    }

    .profile-modern-card-header {
        padding: 20px;
        flex-wrap: wrap;
    }

    .profile-modern-card-header::after {
        left: 20px;
        width: 50px;
    }

    .profile-section-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        margin-right: 15px;
        border-radius: 12px;
    }

    .profile-section-icon i {
        font-size: 1.1rem;
    }

    .profile-section-title h3 {
        font-size: 1.2rem;
    }

    .profile-section-title p {
        font-size: 0.85rem;
    }

    .profile-section-action {
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
    }

    .profile-modern-card-body {
        padding: 20px;
    }

    .settings-section {
        margin-bottom: 25px;
    }

    .settings-subsection-title {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .settings-divider {
        margin: 25px 0;
    }

    .settings-danger-zone {
        padding: 20px;
    }
}

/* Very Small Mobile (< 480px) */
@media (max-width: 479.98px) {
    .profile-user-header {
        padding: 20px 12px;
    }

    .profile-avatar,
    .profile-avatar-placeholder {
        width: 60px;
        height: 60px;
    }

    .profile-avatar-placeholder i {
        font-size: 1.8rem;
    }

    .profile-user-name {
        font-size: 1rem;
    }

    .profile-user-email {
        font-size: 0.8rem;
    }

    .profile-nav-link {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .profile-modern-card-header {
        padding: 16px;
    }

    .profile-section-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin-right: 12px;
    }

    .profile-section-icon i {
        font-size: 1rem;
    }

    .profile-section-title h3 {
        font-size: 1.1rem;
    }

    .profile-section-title p {
        font-size: 0.8rem;
    }

    .profile-modern-card-body {
        padding: 16px;
    }

    .settings-subsection-title {
        font-size: 0.95rem;
    }
}

/* Smooth Transitions for Interactive Elements */
.profile-nav-link,
.profile-modern-card,
.profile-section-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add subtle pulse animation to active section */
@keyframes subtlePulse {
    0%,
    100% {
        box-shadow: 0 10px 40px rgba(42, 45, 52, 0.08);
    }
    50% {
        box-shadow: 0 15px 50px rgba(80, 136, 26, 0.12);
    }
}

.profile-content-section.active .profile-modern-card:first-child {
    animation: fadeInContent 0.4s ease, subtlePulse 2s ease-in-out;
}

/* =================================================================
   LIVEWIRE COMPONENTS - PROFILE PAGE PHASE 2
================================================================= */

/* Hide old profile-sidebar component (replaced by new header) */
.profile-sidebar-component {
    display: none !important;
}

/* ============================================
   USER PROFILE COMPONENT
============================================ */

.profile-avatar-uploader {
    padding: 30px 20px;
    text-align: center;
    background: linear-gradient(
        135deg,
        rgba(80, 136, 26, 0.03) 0%,
        rgba(163, 198, 140, 0.03) 100%
    );
    border-radius: 15px;
    border: 2px dashed rgba(80, 136, 26, 0.2);
    transition: all 0.3s ease;
}

.profile-avatar-uploader:hover {
    background: linear-gradient(
        135deg,
        rgba(80, 136, 26, 0.05) 0%,
        rgba(163, 198, 140, 0.05) 100%
    );
    border-color: var(--primary);
}

.avatar-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.avatar-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(80, 136, 26, 0.25);
}

/* Email verification alert */
.alert-warning.d-flex {
    background: rgba(255, 179, 71, 0.1);
    border-left: 4px solid var(--warning);
    border-radius: 12px;
    padding: 20px;
}

/* ============================================
 ORDERS & TRANSACTIONS TABLES
============================================ */

.table-profile {
    margin-bottom: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.table-profile thead {
    background: linear-gradient(
        135deg,
        rgba(80, 136, 26, 0.05) 0%,
        rgba(163, 198, 140, 0.05) 100%
    );
}

.table-profile thead th {
    border-bottom: 2px solid rgba(80, 136, 26, 0.1);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark);
    padding: 18px 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.table-profile thead th:hover {
    background: rgba(80, 136, 26, 0.08);
    color: var(--primary);
}

.table-profile tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.table-profile tbody tr:hover {
    background: rgba(80, 136, 26, 0.03);
    transform: sca le(1.01);
}

.table-profile tbody td {
    padding: 16px;
    vertical-align: middle;
}

/* Status Badges */
.badge-status {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: capitalize;
}

.badge-status.delivered,
.badge-status.completed {
    background: #5cbf4d;
    color: #fff;
    border: 1px solid #5cbf4d;
}

.badge-status.shipped,
.badge-status.processing,
.badge-status.pending {
    background: #ffb347;
    color: #fff;
    border: 1px solid #ffb347;
}

.badge-status.cancelled,
.badge-status.failed {
    background: #e74c3c;
    color: #fff;
    border: 1px solid #e74c3c;
}

.badge-status.refunded {
    background: #4da3b7;
    color: #fff;
    border: 1px solid #4da3b7;
}

/* Empty State */
.table-profile tbody tr td[colspan] {
    padding: 60px 30px !important;
}

.table-profile .fa-shopping-bag,
.table-profile .fa-exchange-alt {
    color: var(--secondary);
}

/* ============================================
   REVIEW COMPONENTS
============================================ */

.review-card-modern {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(42, 45, 52, 0.06);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.review-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(80, 136, 26, 0.12);
    border-color: var(--secondary);
}

.review-product-image {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid rgba(80, 136, 26, 0.1);
}

.review-stars {
    color: #ffc107;
    font-size: 1.1rem;
    margin: 10px 0;
}

.review-stars i {
    transition: all 0.2s ease;
    cursor: pointer;
}

.review-stars i:hover {
    transform: scale(1.2);
}

.review-comment-text {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 15px 0;
}

.review-date-badge {
    background: rgba(80, 136, 26, 0.08);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Review Empty State */
.review-empty-state {
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(
        135deg,
        rgba(80, 136, 26, 0.03) 0%,
        rgba(163, 198, 140, 0.03) 100%
    );
    border-radius: 15px;
}

.review-empty-state i {
    font-size: 4rem;
    color: var(--secondary);
    margin-bottom: 20px;
}

/* ============================================
   NOTIFICATION PREFERENCES
============================================ */

.preference-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 2px solid rgba(80, 136, 26, 0.1);
    transition: all 0.3s ease;
}

.preference-card:hover {
    border-color: var(--secondary);
    box-shadow: 0 5px 15px rgba(80, 136, 26, 0.08);
}

/* Modern Toggle Switches */
.form-check-input {
    width: 50px;
    height: 26px;
    cursor: pointer;
    border: 2px solid #ddd;
    background-color: #e9ecef;
    transition: all 0.3s ease;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

.form-check-label .fw-medium {
    color: var(--dark);
    font-size: 0.95rem;
    margin-bottom: 4px;
    display: block;
}

.form-check-label .form-text {
    font-size: 0.82rem;
    color: #6c757d;
    margin-top: 4px;
}

/* ============================================
   DELETE ACCOUNT
============================================ */

.account-deletion {
    background: rgba(231, 76, 60, 0.03);
    padding: 30px;
    border-radius: 15px;
    border: 2px solid rgba(231, 76, 60, 0.2);
}

.account-deletion h4 {
    font-family: "Montserrat", sans-serif;
    margin-bottom: 20px;
}

.account-deletion .alert-danger {
    background: rgba(231, 76, 60, 0.08);
    border-left: 4px solid var(--danger);
    border-radius: 10px;
}

.account-deletion .alert-danger ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.account-deletion .alert-danger li {
    margin-bottom: 8px;
    color: #5a1f1a;
}

/* ============================================
   MODAL IMPROVEMENTS
============================================ */

.modal-modern .modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-modern .modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    border-radius: 20px 20px 0 0;
    padding: 25px 30px;
    border: none;
}

.modal-modern .modal-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

.modal-modern .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.modal-modern .btn-close:hover {
    opacity: 1;
}

.modal-modern .modal-body {
    padding: 30px;
}

.modal-modern .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 20px 30px;
}

/* Star Rating in Modal */
.star-rating button {
    background: none;
    border: none;
    padding: 0;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.star-rating button:hover {
    transform: scale(1.15);
}

.star-rating i {
    font-size: 2.5rem;
    transition: all 0.2s ease;
}

/* Transaction Modal Specific Styles */
.transaction-info-card {
    background: rgba(80, 136, 26, 0.02);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(80, 136, 26, 0.1);
}

.transaction-section-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(80, 136, 26, 0.15);
}

.transaction-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.transaction-detail-item .detail-label {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.9rem;
    min-width: 120px;
}

.transaction-detail-item .detail-value {
    text-align: right;
    color: var(--dark);
    font-size: 0.95rem;
}

.metadata-display {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
    margin: 0;
    overflow-x: auto;
}

/* ============================================
   BUTTONS & FORMS
============================================ */

.btn-outline-dark {
    border-width: 2px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-dark:hover {
    background: var(--dark);
    border-color: var(--dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(42, 45, 52, 0.2);
}

.btn.btn-primary {
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3);
}

.btn.btn-danger {
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 10px;
    background: var(--danger);
    border-color: var(--danger);
}

.btn.btn-danger:hover {
    background: #c0392b;
    border-color: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3);
}

.form-control {
    border-radius: 10px;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.1);
}

.form-label {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dark);
    font-size: 0.9rem;
}

.form-select {
    border-radius: 10px;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* ============================================
   RESPONSIVE FOR LIVEWIRE COMPONENTS
============================================ */

@media (max-width: 991.98px) {
    .table-responsive {
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }

    .table-profile thead th {
        font-size: 0.85rem;
        padding: 14px 12px;
    }

    .table-profile tbody td {
        padding: 14px 12px;
        font-size: 0.9rem;
    }
}

@media (max-width: 767.98px) {
    .profile-avatar-uploader {
        padding: 25px 15px;
    }

    .avatar-preview {
        width: 120px;
        height: 120px;
    }

    .table-profile thead th {
        font-size: 0.8rem;
        padding: 12px 10px;
    }

    .table-profile tbody td {
        padding: 12px 10px;
        font-size: 0.85rem;
    }

    .badge-status {
        font-size: 0.75rem;
        padding: 4px 12px;
    }

    .review-card-modern {
        padding: 20px;
    }

    .review-product-image {
        width: 50px;
        height: 50px;
    }

    .preference-card {
        padding: 16px;
    }

    .form-check-input {
        width: 44px;
        height: 24px;
    }

    .account-deletion {
        padding: 20px;
    }

    .modal-modern .modal-body {
        padding: 20px;
    }

    .modal-modern .modal-header {
        padding: 20px;
    }

    .star-rating i {
        font-size: 2rem;
    }
}

@media (max-width: 575.98px) {
    .avatar-preview {
        width: 100px;
        height: 100px;
    }

    .table-profile thead {
        display: none;
    }

    .table-profile tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 15px;
    }

    .table-profile tbody td {
        display: block;
        text-align: left;
        padding: 8px 0;
        border: none;
    }

    .table-profile tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--dark);
        display: block;
        margin-bottom: 5px;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

    .review-card-modern {
        padding: 16px;
    }

    .modal-modern .modal-dialog {
        margin: 10px;
    }

    .star-rating i {
        font-size: 1.8rem;
        margin: 0 2px;
    }
}

/* Loading States */
.spinner-border-sm {
    margin-right: 8px;
}

/* Focus States */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================ 
   MODERN PAGINATION 
============================================ */

.page-item {
    margin: 0 4px;
}

.page-link {
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.page-link:hover {
    background-color: var(--secondary-light);
    color: var(--primary);
    border-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(80, 136, 26, 0.15);
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 5px 15px rgba(80, 136, 26, 0.25);
    transform: scale(1.05);
}

.page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    opacity: 0.6;
}

/* Custom Explore Button for Review Empty State */
.btn-explore {
    transition: all 0.3s ease;
}

.btn-explore:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(63, 107, 20, 0.3);
}

/* Custom Submit Review Button */
.btn-submit-review:hover,
.btn-submit-review:focus {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

/* Modern Delete Modal */
.modal-modern .modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.modal-modern .modal-body {
    background: #fff;
}

.smile-icon-container {
    width: 80px;
    height: 80px;
    background: #fff5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: float 3s ease-in-out infinite;
}

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

/* Remove Modal Backdrop Blur/Overlay */
.modal-backdrop.show {
    opacity: 0.1 !important;
    backdrop-filter: none !important;
}

.btn-submit-review:disabled,
.btn-submit-review[disabled] {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    opacity: 1 !important; /* Optional: remove transparency if desired, or keep generic opacity */
}

/* Custom Secondary Select Focus */
.custom-select-secondary:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 0.25rem rgba(163, 198, 140, 0.25) !important; /* using secondary-rgb equivalent */
}

.custom-select-secondary option:checked,
.custom-select-secondary option:hover {
    background-color: var(--secondary) !important;
    color: #fff !important;
}

/* =================================================================
   Login Page Styling Overrides
================================================================= */

/* Checkbox Styling */
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem var(--shadow-secondary);
    border-color: var(--secondary);
}

/* Reduced size for 'Remember Me' checkbox */
.auth-container .form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.35em; /* Alignment adjustment */
}

/* Login Button Styling */
.btn-login {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
    transition: all 0.3s ease;
}

.btn-login:hover,
.btn-login:focus,
.btn-login:active {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: white !important;
}

/* Loading State for Login Button */
.btn-login[disabled],
.btn-loading {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    opacity: 0.8;
}

/* Logout Link Specific Items */
.logout-link {
    color: var(--danger) !important;
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: none;
    padding: 10px 15px; /* Match account-menu spacing */
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: left;
}

.logout-link:hover {
    background-color: rgba(
        231,
        76,
        60,
        0.1
    ) !important; /* Light red background */
    color: var(--danger) !important;
}

/* Mobile specifique adjustments if needed */
.mobile-profile-menu .logout-link {
    padding: 12px 0;
    font-size: 1.1rem;
}

/* Register/Change Password Button Styling */
.btn-register {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
    transition: all 0.3s ease;
}

.btn-register:hover,
.btn-register:focus,
.btn-register:active {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: white !important;
}

/* Loading State for Register Button */
.btn-register[disabled],
.btn-register.btn-loading {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    opacity: 0.8;
}