:root {
    /* Futuristic color palette */
    --bg-1: #0f1724; /* deep navy */
    --bg-2: #071029; /* darker */
    --neon-cyan: #00f0ff;
    --neon-magenta: #ff4dd2;
    --soft-red: #ff6b6b;
    --accent: linear-gradient(90deg, #00f0ff 0%, #6a00ff 50%, #ff4dd2 100%);
    --muted: rgba(255,255,255,0.06);
    --glass: rgba(255,255,255,0.04);
    --border-glow: rgba(102,126,234,0.12);
    --shadow: 0 10px 30px rgba(2,6,23,0.6);
    --shadow-soft: 0 6px 20px rgba(2,6,23,0.45);
}

/* Root dropdown injected into body to overlay nav without affecting layout */
#team-dropdown-root {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 3000;
}
#team-dropdown-root .team-dropdown-inner {
    position: absolute;
    min-width: 220px;
    max-width: 420px;
    background: var(--netflix-gray);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    padding: 8px;
    border-radius: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#team-dropdown-root .team-item { padding: 8px 10px; cursor: pointer; color: var(--netflix-white); white-space: nowrap; }
#team-dropdown-root .team-item:hover { background: rgba(255,255,255,0.03); }

/* Bottom credit card: hidden by default, shown on mobile/tablet
   We keep the top-bar image on desktop but on smaller viewports
   hide the top icon and display this bottom icon instead. */
.bottom-creditcard {
    display: none;
}

@media (max-width: 1024px) {
    /* On tablet and mobile: hide top icon in the top bar */
    /* Strongly hide any credit-card / top icon inside the top bar on mobile/tablet */
    .top-bar .top-icon,
    .top-bar img[src*="creditcard"],
    .top-bar img[src*="credit-card"],
    .top-bar img[src*="credit_card"],
    img[src$="creditcard.png"] {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Show bottom creditcard fixed at viewport bottom on tablet/mobile */
    .bottom-creditcard {
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 6px 10px;
        background: transparent;
        position: fixed !important;
        left: 50% !important;
        bottom: 12px !important;
        transform: translateX(-50%) !important;
        z-index: 9999 !important;
        pointer-events: none !important; /* non-interactive */
    }
    .bottom-creditcard img {
        max-height: 36px;
        width: auto;
        object-fit: contain;
        display: block;
    }
}

/* Adjust top-bar text sizing so the message fits nicely on tablet and mobile */
@media (max-width: 1024px) {
    .top-bar {
        font-size: 13px !important; /* slightly smaller on tablets */
        padding: 8px 10px !important;
        letter-spacing: 0.6px !important;
        white-space: nowrap !important; /* keep in one line but smaller */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 480px) {
    .top-bar {
        font-size: 12px !important; /* compact on small phones */
        padding: 6px 8px !important;
        letter-spacing: 0.4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .bottom-creditcard img {
        max-height: 32px !important;
    }
}

/* Ensure bottom-creditcard is hidden on desktop explicitly */
@media (min-width: 1025px) {
    .bottom-creditcard { display: none !important; }
}

/* Responsive navigation: hamburger menu for small screens */
.hamburger {
    display: none !important;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 22px;
    padding: 8px;
    cursor: pointer;
}

/* Mobile / tablet nav behavior */
@media (max-width: 768px) {
    nav {
        position: relative;
    }

    .hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Hide the horizontal nav links and show them as a vertical panel when nav has .nav-open */
    /* Keep nav-links visible on mobile as a horizontal scrollable bar so categories remain accessible */
.nav-links {
        display: flex !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        background: transparent !important;
        padding: 8px 6px !important;
        flex-direction: row !important;
        gap: 8px !important;
        z-index: 1000 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        /* allow horizontal scrolling while permitting vertical overflow for dropdown overlays */
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

/* Make each nav link a positioning context so dropdowns can overlay */
.nav-links li {
    position: relative;
    z-index: 1200; /* ensure links sit below dropdown which has higher z-index */
}

/* Team dropdown should overlay content and not push layout — absolute positioned */
.team-dropdown {
    position: absolute !important;
    /* place dropdown centered under its parent link and overlay outside the nav */
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 220px !important;
    max-width: 420px !important;
    background: var(--netflix-gray) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55) !important;
    z-index: 2500 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Dropdown items styling */
.team-dropdown > div {
    padding: 8px 10px !important;
    color: var(--netflix-white) !important;
    cursor: pointer !important;
}
.team-dropdown > div:hover { background: rgba(255,255,255,0.03) !important; }

    nav.nav-open .nav-links {
        display: flex !important;
    }

    /* Ensure search bar sits under the logo and does not overlap nav items */
    .nav-center {
        order: 3;
        width: 100%;
        padding: 8px 12px;
    }

    .nav-left { order: 1; }
    .nav-icons { order: 2; }
}

/* Ensure logo remains visible on small screens */
@media (max-width: 768px) {
    .logo {
        display: flex !important;
        align-items: center !important;
        z-index: 2000 !important;
    }
    .logo img {
        display: block !important;
        max-height: 64px !important; /* restore larger logo on mobile */
        height: auto !important;
        width: auto !important;
        margin-top: 0 !important;
    }
    /* Keep the decorative fifa logo visible on mobile as before */
    .fifa-logo {
        display: block !important;
        max-height: 56px !important;
        height: auto !important;
        width: auto !important;
    }

    /* Hide the injected hamburger if present — we don't want the 3-bar icon left of the logo */
    .hamburger { display: none !important; }
}

/* Ensure logo and fifa logo remain visible and correctly sized on tablet devices */
@media (min-width: 481px) and (max-width: 1024px) {
    .logo {
        display: flex !important;
        align-items: center !important;
        z-index: 2000 !important;
        flex: 0 0 auto !important;
        margin-right: 8px !important;
    }
    .logo img {
        max-height: 84px !important; /* slightly larger on tablets */
        height: auto !important;
        width: auto !important;
    }
    .fifa-logo {
        display: block !important;
        max-height: 72px !important;
        height: auto !important;
        width: auto !important;
        margin-left: 6px !important;
    }
    /* Ensure nav-left doesn't collapse and hide the logo */
    .nav-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
    }
    /* Make sure center area can shrink before logo */
    .nav-center { flex: 1 1 auto !important; min-width: 0 !important; }
}

/* ====================== BOUTONS JERSEYS & TRACKSUITS ====================== */
.category-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px; /* un peu d'espace sous la barre de recherche */
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.category-btn {
    background: #ffffff;
    color: #111111; /* texte noir par défaut */
    border: none;
    padding: 14px 32px;
    font-size: 15.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: all 0.35s ease;
    min-width: 180px;
}

    .category-btn:hover,
    .category-btn:focus,
    .category-btn:active,
    .category-btn.active {
        background: #ff6b6b; /* rouge */
        color: #ffffff; /* texte blanc */
        box-shadow: 0 10px 28px rgba(255, 107, 107, 0.4);
        transform: translateY(-2px);
    }

.category-btn {
    background: #ffffff !important;
    color: #111111 !important;
}

    .category-btn.active,
    .category-btn:hover,
    .category-btn:focus {
        background: #ff6b6b !important;
        color: #ffffff !important;
    }

/* Pour les petits écrans */
@media (max-width: 768px) {
    .category-buttons {
        gap: 12px;
        margin-top: 10px;
    }

    .category-btn {
        padding: 12px 26px;
        font-size: 14.5px;
        min-width: 160px;
    }
}


/* ===== Responsive fixes for product modal ===== */
/* Ensure modal adapts fluidly to viewport and stays harmonious on all devices */
@media (max-width: 768px) {
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 95vh !important;
        border-radius: 12px !important;
        padding: 12px !important;
        overflow-y: auto !important; /* allow page scrolling inside modal on small screens */       
    }

    .modal-grid {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .modal-left, .modal-right {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 10px !important;
    }

    .main-view {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important; /* keep product image reasonable height on mobile */
        object-fit: contain !important;
    }

    .thumb-grid { margin-top: 10px !important; }

    .modal-right {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Make interactive controls fit viewport width */
    .size-grid { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)) !important; gap: 8px !important; }
    .qty-actions { gap: 8px !important; }
    .qty-input { width: 100% !important; max-width: none !important; }
    .add-btn { width: 100% !important; padding: 14px !important; }

    /* Reviews and extras should stack and not overflow horizontally */
    .modal-extras { padding: 14px !important; }
    .modal-extras .reviews-column, .modal-extras .similar-column { width: 100% !important; }
}

@media (max-width: 420px) {
    /* Extra small screens: reduce paddings and font sizes slightly */
    .modal-content { padding: 8px !important; }
    .modal-left, .modal-right { padding: 8px !important; }
    .main-view { max-height: 42vh !important; }
    .size-grid button { padding: 8px !important; font-size: 13px !important; }
    .product-desc { font-size: 14px !important; }
}

/* Ensure the ACTIVE li itself also carries the same thick black contour
   (covers cases where the link text is not a direct child or selectors differ) */
.nav-links li.active-link,
.nav-links li.active-link a {
    color: var(--red) !important;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
                 -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
    -webkit-text-stroke: 0.9px #000 !important;
}

/* Restore red background + white text for focused/active nav items (Account volet) */
.nav-links li.active-link,
.nav-links li.active-link a,
.nav-links li a:focus,
.nav-links li a:active,
.nav-links li a:focus-visible {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Ensure Jerseys and Tracksuits nav labels are black by default */
.nav-links li a.cat-jerseys,
.nav-links li a.cat-tracksuits {
    color: #111 !important;
    font-weight: 800 !important;
}

/* Focus/active state: show a red pill/button for accessibility */
.nav-links li a:focus,
.nav-links li a:focus-visible,
.nav-links li a.active-link {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
    outline: none !important;
}

/* If a Jerseys/Tracksuits item is active, ensure the text remains white on red background */
.nav-links li a.cat-jerseys.active-link,
.nav-links li a.cat-tracksuits.active-link {
    color: #fff !important;
}
/*fuck*/
/* Ensure dropdown links inside nav keep readable text when their parent is active */
.nav-links li.active-link .dropdown-menu a {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Ensure the account button (user-btn) shows red background and white text when active/open */
/* No-op context for future rules insertion */
.user-menu-logged .user-btn {
    background: transparent;
    color: inherit;
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

/* Normalize Account button (logged in / not logged in) to exactly match CART button
   - same padding, display and icon sizing
   - ensure icon vertical offset matches CART (tops aligned)
   This avoids accidental size/position differences introduced earlier. */
.user-menu .user-btn,
.user-menu-logged .user-btn,
.cart-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
}
.user-menu .user-btn i,
.user-menu-logged .user-btn i,
.cart-icon i {
    font-size: 1em !important;
    line-height: 1 !important;
    display: inline-block !important;
    transform: translateY(-2px) !important; /* lift icons so their tops align */
    margin: 0 !important;
}

/* Triple the visual size of the navbar Account and Cart icons */
.nav-icons .user-menu .user-btn i,
.nav-icons .user-menu-logged .user-btn i,
.nav-icons .cart-icon i {
    /* Use an explicit pixel size so different FA glyphs render visually identical */
    font-size: 34px !important;
    line-height: 34px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important; /* fine-tune to align tops with CART */
}

/* Ensure unauthenticated account button matches logged-in button height/alignment */
.user-menu .user-btn,
.user-menu > div.user-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: inherit !important;
}
.user-menu .user-btn i,
.user-menu > div.user-btn i {
    font-size: 1em !important;
    line-height: 1 !important;
    transform: translateY(-2px) !important; /* lift icon to match logged-in state */
}
.user-menu-logged .user-btn.active,
.user-menu-logged .user-btn[aria-expanded="true"],
.user-menu-logged .user-btn:focus,
.user-menu-logged .user-btn:active {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%) !important;
    color: #ffffff !important;
    outline: none !important;
}
.user-menu-logged .user-btn.active i,
.user-menu-logged .user-btn[aria-expanded="true"] i,
.user-menu-logged .user-btn:focus i {
    color: #ffffff !important;
}

/* Restore account dropdown positioning to its original behavior (absolute inside .user-menu-logged) */
.user-menu-logged { position: relative; }
.user-menu-logged .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 200px !important;
    background: rgba(0,0,0,0.72) !important; /* semi-transparent dark like original */
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important;
    padding: 6px 0 !important;
    z-index: 5000 !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
}
.user-menu-logged .dropdown-menu a {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 14px !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.user-menu-logged .dropdown-menu a:hover { background: rgba(255,255,255,0.03) !important; }

/* Ensure cart icon matches account button vertical alignment */
.cart-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
    background: transparent;
}
.cart-icon i { /* icon sizing consistent with user icon */
    font-size: initial !important; /* restore original icon size */
    line-height: 1;
    display: inline-block;
}
.cart-label { font-weight: 700; }
.cart-badge { margin-left: 6px; }

/* Fine tune vertical alignment: lift cart icon slightly to match ACCOUNT visually */
.cart-icon i {
    position: relative !important;
    top: -2px !important;
}

/* Make Jersey dropdown match Account dropdown appearance and overlay behavior */
.nav-links li .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 220px !important;
    background: rgba(0,0,0,0.72) !important; /* same semi-transparent dark */
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important;
    padding: 6px 0 !important;
    z-index: 5000 !important;
}
.nav-links li .dropdown-menu a {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 14px !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.nav-links li .dropdown-menu a:hover { background: rgba(255,255,255,0.03) !important; }

/* Estimate delivery styling under thumbnails */
.estimate-delivery {
    color: #ffffff !important;
    font-weight: 700;
    margin-top: 10px;
    font-size: 14px;
}

/* Toast notifications (top-right) */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    min-width: 240px;
}
.toast.success { border-left: 4px solid #28a745; }
.toast.error { border-left: 4px solid #dc3545; }
.toast.warning { border-left: 4px solid #ffc107; color: #111; background: #f8d36b; }
.toast.info { border-left: 4px solid #17a2b8; }
.toast-icon { font-size: 18px; }
.toast-title { font-weight: 800; font-size: 13px; }
.toast-message { font-size: 12px; opacity: 0.95; }
.toast-close { margin-left: auto; cursor: pointer; opacity: 0.7; }
.toast-close:hover { opacity: 1; }
.toast.hiding { opacity: 0; transform: translateX(20px); transition: opacity 200ms ease, transform 200ms ease; }



/* Cart overrides moved/centralized further down to avoid duplicates. */

/* Bouton 'Boutique' dans le panier : rouge visible */
.btn-boutique,
.cart-empty a.boutique-btn,
.empty-state a.boutique-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* Icônes dans le panier en gris foncé */
.cart-item i,
.cart-item .fa,
.cart-summary i,
.cart-container i,
.cart-empty i {
    color: #444444 !important;
}

/* Assurer que les éléments de prix gardent leur couleur rouge pour la priorité */
.cart-item .price,
.line-total,
.total-row.grand-total {
    color: var(--red) !important;
    text-shadow: none !important;
}

/* Si la page de panier utilise .empty-state */
.cart-empty .empty-state h3,
.cart-empty .empty-state p {
    color: #111 !important;
}

/* Uniformise cart page background and ensure dialog/text is white for readability */
.cart-page {
    /* subtle darker shade of main background to separate cart area */
    background: linear-gradient(180deg, rgba(11,18,32,0.55), rgba(7,16,25,0.6));
    padding: 28px 20px;
}

.cart-page, .cart-page h2, .cart-page .cart-container, .cart-page .cart-summary, .cart-page .cart-item-info {
    color: #ffffff !important;
}

/* Ensure cart item name and size are white for readability */
.cart-page .cart-item-info h3,
.cart-page .cart-item-info p,
.cart-page .cart-item-info p strong {
    color: #ffffff !important;
}

.cart-container {
    background: rgba(255,255,255,0.03); /* slight panel contrast */
    border-radius: 12px;
    padding: 18px;
}

.cart-summary {
    background: rgba(0,0,0,0.32);
    border-radius: 10px;
    padding: 12px;
}

.cart-item {
    background: transparent;
}

.cart-item img { filter: none; }

/* Keep important buttons readable */
.cart-summary .btn-boutique, .cart-summary .payment-btn, .cart-summary .secondary-btn {
    color: #fff !important;
}

/* Remove button styling in cart: white icon and darker background to match cart summary */
.btn-remove {
    background: rgba(0,0,0,0.32) !important; /* darker to match cart-summary */
    border: none !important;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.btn-remove i {
    color: #ffffff !important; /* icon should be white */
    font-size: 16px;
    line-height: 1;
}
.btn-remove:hover {
    background: rgba(0,0,0,0.45) !important;
}

/* petite amélioration responsive */
@media (max-width: 600px) {
    .cart-item { flex-direction: row; gap: 12px; }
}

/* Layout helpers for nav: left (logo+fifa), center (search), right (icons) */
.nav-left {
    display: flex;
    align-items: center;
    gap: 3px; /* ensure small gap but fifa-logo already has margin if needed */
}

/* Ensure logo and fifa logo do not overlap: keep them inline, static positioned and with proper gap */
.nav-left, .nav-left .logo, .nav-left .fifa-logo {
    display: flex !important;
    align-items: center !important;
    position: static !important;
}
.nav-left { gap: 12px !important; }
.logo { flex: 0 0 auto !important; z-index: 3 !important; }
.logo img { display: block !important; max-height: 96px !important; height: auto !important; width: auto !important; }
.fifa-logo { flex: 0 0 auto !important; z-index: 2 !important; max-height: 88px !important; height: auto !important; width: auto !important; }

.nav-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto; /* push icons to the right */
    justify-content: flex-end;
}

/* Force icons to the right edge of nav so they remain visible on all viewports */
nav { position: relative; }
.nav-icons {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

@media (max-width: 768px) {
    /* On small screens keep icons at top-right but slightly closer to edge */
    .nav-icons {
        right: 10px !important;
    }
}

/* ensure search-bar inside center stays responsive */
.nav-center .search-bar {
    position: static;
    transform: none;
    width: min(520px, 70%);
    max-width: 90vw;
}

/* Center the search bar inside the nav horizontally and vertically */
nav {
    position: sticky; /* ensure nav is positioned for absolute children */
}

nav .search-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 70%);
    max-width: 90vw;
    z-index: 1002; /* above other nav elements */
}

@media (max-width: 768px) {
    /* On small screens keep search in normal flow (use mobile search wrapper) */
    nav .search-bar { position: static; transform: none; width: 100%; max-width: 520px; margin: 0 auto; }
}

/* Ensure main content on dark background uses light text by default.
   Do NOT force this on individual cards or components that may have
   a light background (avoids white-on-white text when cards are light).
*/
main, .container, .category-section, .product-grid, .info, .section-title {
    color: #e6eef8;
}

/* But keep specific light-background components with dark text (listed) */
.banner-card, .banner-card h3, .banner-info, .recommendations, .file-input-label, .selected-file, .dropdown-menu, .upload-form {
    color: #0b1220 !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Orbitron', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: radial-gradient(1200px 800px at 10% 10%, rgba(0,240,255,0.04), transparent),
                radial-gradient(900px 600px at 90% 90%, rgba(255,77,210,0.03), transparent),
                linear-gradient(180deg, var(--bg-1), var(--bg-2));
    color: #e6eef8;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Strong override: ensure cart item titles and size text are white (highest specificity) */
.cart-page .cart-item-info h3,
.cart-page .cart-item-info p,
.cart-page .cart-item-info p strong {
    color: #ffffff !important;
}

/* Final cart polish: high-specificity rules to ensure uniform look and contrast */
.cart-page {
    background: linear-gradient(180deg, rgba(11,18,32,0.66), rgba(7,16,25,0.66)) !important;
}
.cart-page .cart-container {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
}
.cart-page .cart-item {
    background: rgba(255,255,255,0.02) !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}
.cart-page .cart-item-info,
.cart-page .cart-item-info h3,
.cart-page .cart-item-info p,
.cart-page .cart-item-info strong {
    color: #ffffff !important;
}
.cart-page .cart-item .price,
.cart-page .cart-item .line-total {
    color: var(--red) !important;
}

/* Override: make per-item line total white (keep grand total red) */
.cart-page .cart-item .line-total {
    color: #ffffff !important;
}
.cart-page .btn-remove {
    background: rgba(255,255,255,0.04) !important; /* slightly lighter to be visible */
    border: 1px solid rgba(255,255,255,0.06) !important;
}
.cart-page .btn-remove i { color: #ffffff !important; }

/* Ensure trash icon in remove button is always white (override any generic icon color rules) */
.cart-page .cart-item .btn-remove i,
.cart-page .cart-item .btn-remove .fa,
.cart-page .cart-item .btn-remove svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Ensure buttons in summary remain prominent */
.cart-page .cart-summary .payment-btn,
.cart-page .cart-summary .secondary-btn,
.cart-page .cart-summary .btn-boutique {
    color: #ffffff !important;
}

/* Make the "Continue Shopping" (.secondary-btn) red with white text and arrow to match site buttons */
.cart-page .cart-summary .secondary-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.cart-page .cart-summary .secondary-btn i {
    color: #ffffff !important;
}

/* Ensure credit-card icon inside cart summary is white */
.cart-page .payment-title i,
.cart-page .payment-methods i,
.cart-page .cart-container i.fa-credit-card,
.cart-page .cart-container i.fas.fa-credit-card,
.cart-page .cart-container i.far.fa-credit-card {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Mobile adjustments: keep text readable */
@media (max-width: 600px) {
    /* no forced font-size here to preserve original design */
}

/* Ensure empty cart message is visible (white) */
.cart-page .empty-cart h3,
.cart-page .empty-cart p,
.cart-page .empty-cart i {
    color: #ffffff !important;
}


/* === NOTIFICATIONS TOAST === */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-success {
    background: #2b5b34; /* darker green background for contrast */
    color: #fff !important;
    border-left: 4px solid #28a745;
}

.toast-warning {
    background: #7a5a00; /* darker yellow/brown for contrast */
    color: #fff !important;
    border-left: 4px solid #ffc107;
}

.toast-error {
    background: #7a1f20; /* darker red for contrast */
    color: #fff !important;
    border-left: 4px solid #dc3545;
}

.toast-info {
    background: #13575e; /* darker cyan/teal */
    color: #fff !important;
    border-left: 4px solid #17a2b8;
}

/* === LOADER === */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--border);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === HEADER === */
.top-bar {
    background: linear-gradient(90deg, rgba(0,240,255,0.04), rgba(106,0,255,0.03));
    color: #ffffff; /* text en blanc */
    display: flex;
    align-items: center;
    justify-content: center; /* centré */
    padding: 10px 16px;
    font-size: 16px; /* réglé à 16px comme demandé */
    font-weight: 800;
    letter-spacing: 1px;
    /* White 1px horizontal line across full width under the top-bar */
    border-bottom: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 4px 18px rgba(2,6,23,0.5), 0 0 18px rgba(0,240,255,0.04);
    position: relative;
}

/* Icon placed in the top bar (left of text) — size matches current text height */
.top-bar .top-icon {
    display: inline-block;
    /* augmenter encore légèrement la taille pour une meilleure visibilité */
    height: 2.0em; /* environ 32px si font-size est 16px */
    width: auto;
    margin-right: 14px;
    vertical-align: middle;
    filter: none;
}

.top-bar::after {
    /* subtle neon border line under the text to make it more visible */
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6px;
    width: 70%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0,240,255,0.6), rgba(106,0,255,0.45), rgba(255,77,210,0.5));
    border-radius: 2px;
    filter: blur(6px);
    opacity: 0.9;
}

nav {
    background: transparent;
    padding: 12px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* remove heavy blur on nav so header background stays sharp */
    backdrop-filter: saturate(120%);
    box-shadow: 0 6px 18px rgba(2,6,23,0.45);
    gap: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    overflow: visible; /* allow logo to show fully if slightly larger than nav */
}

/* Banner behind the nav only: full viewport width, does not cover the section selection below */
/* remove nav::before banner; header background removed per request */
nav::before { display: none; }

/* Remove header-bg-img rules if present */
.header-bg-img { display: none !important; }

.logo {
    position: relative;
    display: flex;
    align-items: center;
    width: auto; /* logo container adapts */
    margin-right: 20px;
}

/* FIFA image placed to the right of the logo */
.fifa-logo {
    display: block;
    margin-left: 3px; /* 3px gap to the right of logo */
    width: auto;
    height: auto;
    max-height: clamp(56px, 10vw, 140px) !important; /* same responsive sizing as logo */
    object-fit: contain;
    filter: none !important;
    align-self: center;
}

.logo img {
    height: auto !important;
    width: auto;
    /* allow the logo to be fully visible inside the larger header area */
    max-height: clamp(56px, 10vw, 140px) !important; /* larger max so logo is not cut */
    max-width: 100%;
    display: block;
    position: relative;
    transform: none;
    z-index: 1001;
    transition: transform 140ms ease, max-height 140ms ease;
    /* explicit no-filter for crisp rendering */
    filter: none !important;
    object-fit: contain;
    margin-top: 6px; /* small offset to keep it vertically centered visually */
}

/* Header banner next to logo: responsive background image (FIFA 2026) */
/* Header background banner: full-width background image for the header */
header {
    background: var(--theme-bg); /* use theme background for consistency */
    position: relative;
    z-index: 1;
}

/* Ensure header content remains readable: subtle overlay */
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    /* Make overlay extremely subtle so the banner stays crisp but text remains readable */
    background: linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0.06));
    z-index: 0;
}

/* Responsive background image element inside header */
.header-bg-img {
    display: none !important;
}

/* Ensure header keeps natural height based on nav; do not force large min-height */
@media (min-width: 900px) {
    header { /* small top padding so img has some space */
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* Make header positioned relative to contain the pseudo element */
header { position: relative; z-index: 1; }

/* Optionnel : réduit un peu la taille sur mobile pour ne pas tout cacher */
@media (max-width: 768px) {
    .logo img {
        max-height: 60px !important;
    }
    .logo {
        margin-right: 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .logo img {
        max-height: 72px !important;
    }
}

@media (max-width: 420px) {
    .logo img {
        max-height: 46px !important;
        max-width: 140px;
    }
    .logo {
        margin-right: 8px;
    }
}

/* FINAL OVERRIDES: force dark surfaces for dialogs/dropdowns and ensure readable text
   These high-specificity rules neutralize accidental white backgrounds and white-on-white issues. */
.dropdown-menu, .modal-content, .card, .banner-card, .product-grid .card, .similar-grid > div, .recommendations, .toast, .cart-container, .cart-summary {
    background: linear-gradient(180deg, rgba(18,24,30,0.95), rgba(23,30,38,0.95)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
}

/* Ensure text inside these components is white and links/buttons visible */
.dropdown-menu a, .modal-content h2, .modal-content p, .modal-content .price, .card h3, .card p {
    color: #ffffff !important;
}

/* Keep form controls white with dark text for contrast inside modals */
.modal-content input, .modal-content textarea, .modal-content select {
    background: #ffffff !important;
    color: #0b1220 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}

/* If any element still forces a pure white bg, override inside cart specifically */
.cart-page * { background-color: transparent !important; }
/* Final override: ensure cart item titles and size text are white (highest specificity) */
/* Very high-specificity rule to force the 'Size:' label and its text to white in cart items */
.cart-page .cart-container .cart-item .cart-item-info > p {
    color: #ffffff !important;
}
.cart-page .cart-container .cart-item .cart-item-info > p::first-line {
    color: #ffffff !important;
}

/* Also ensure any small labels inside the p (not in strong) are white */
.cart-page .cart-container .cart-item .cart-item-info > p span,
.cart-page .cart-container .cart-item .cart-item-info > p em {
    color: #ffffff !important;
}

/* Force product name in cart to white, including links/children, with highest specificity */
body .cart-page .cart-container .cart-item .cart-item-info h3,
body .cart-page .cart-container .cart-item .cart-item-info h3 a,
body .cart-page .cart-container .cart-item .cart-item-info h3 * {
    color: #ffffff !important;
}

/* Force empty-cart block and all its contents to white (strongest override) */
.cart-page .cart-container .empty-cart,
.cart-page .cart-container .empty-cart * {
    color: #ffffff !important;
}
.cart-page .cart-container .empty-cart i {
    color: #ffffff !important;
}
.cart-page .cart-container .empty-cart .btn-shop {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%) !important;
    color: #ffffff !important;
    border: none !important;
}


.cart-page .cart-item-info h3,
.cart-page .cart-item-info p,
.cart-page .cart-item-info p strong {
    color: #ffffff !important;
}


/* ==========================
   GLOBAL DARK THEME OVERRIDES
   Harmonize colors across the site: dark grey background, white text,
   consistent dark surfaces and strong subtle black shadows.
   Textboxes remain white with black text as requested.
   ========================== */

:root {
    --theme-bg: #0b1116; /* main page background */
    --surface: rgba(18,24,30,0.9); /* cards, panels */
    --surface-2: rgba(23,30,38,0.95);
    --muted-surface: rgba(255,255,255,0.03);
    --text-on-dark: #ffffff;
    --text-muted: #b7c0cb;
    --shadow-dark: 0 10px 30px rgba(0,0,0,0.7);
    /* Brand colors */
    --red: #ff6b6b;
    --dark-red: #cc4747;
    --border: rgba(255,255,255,0.06);
    --black: #0b1220;
}

/* Page background and default text */
body, main, .container {
    background: var(--theme-bg) !important;
    color: var(--text-on-dark) !important;
}

/* Make headings and general text readable with a subtle white highlight instead of a heavy black contour */
h1, h2, h3, h4, h5, h6, p, span, a, li, label {
    color: var(--text-on-dark) !important;
    /* subtle white highlight to lift text from dark backgrounds without looking heavy */
    text-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* Surfaces: cards, banners, modals and dropdowns */
.card, .banner-card, .banner-preview, .modal-content, .dropdown-menu, .recommendations, .product-grid .card, .similar-grid > div, .info, .cart-item, .toast {
    background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
    color: var(--text-on-dark) !important;
    box-shadow: var(--shadow-dark) !important;
    border: 1px solid var(--muted-surface) !important;
}

/* Nav, header, top bar */
header, nav, .top-bar {
    background: #000 !important; /* solid black header */
    color: var(--text-on-dark) !important;
    box-shadow: 0 6px 22px rgba(0,0,0,0.75) !important;
}

/* Top bar: keep small informative text and the credit card icon inline without breaking layout */
.top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.top-bar .top-icon,
.top-bar img.top-icon {
    display: inline-block !important;
    max-height: 22px !important;
    width: auto !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}

/* Ensure the inline text next to the icon remains on one line and doesn't wrap into header */
.top-bar > * { display: inline-flex !important; align-items: center !important; }

/* Nav links color handled per-state (active / hover / default) further below; removed global !important override */

/* Buttons: keep existing gradients but ensure text is white and shadows coherent */
button, .btn-upload, .add-btn, .payment-btn, .secondary-btn, .promo-button {
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7) !important;
}

/* Textboxes / inputs must remain white with black text */
input[type="text"], input[type="email"], input[type="password"], textarea, select, .search-bar input, .promo-input, .qty-input {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 6px !important;
}

/* File input label kept light but with dark text */
.file-input-label, .selected-file {
    background: #ffffff !important;
    color: #000 !important;
    border: 1px dashed rgba(0,0,0,0.08) !important;
}

/* Links inside light boxes should be dark for contrast */
.banner-card a, .dropdown-menu a, .recommendations a {
    color: #0b1220 !important;
}

/* Ensure icons follow currentColor (already set) but force white on dark areas */
.nav-icons i, .user-btn i, .cart-icon i, .toast .toast-icon i {
    color: var(--text-on-dark) !important;
}

/* Modals: keep dark background but content readable */
.modal { background: rgba(0,0,0,0.85) !important; }
.modal-content { background: linear-gradient(180deg, rgba(12,16,20,0.98), rgba(20,26,32,0.98)) !important; color: var(--text-on-dark) !important; }

/* Small screens: ensure contrast maintained */
@media (max-width: 768px) {
    .card, .banner-card, .modal-content { border-radius: 10px; }
}

/* Keep search bar white (explicit) */
.search-bar { background: #fff !important; color: #0b1220 !important; }


/* ICONS should follow text color */
.fa, .fa-solid, .fa-regular, .fa-brands, i {
    color: currentColor;
}

/* Search bar text and icon should be dark because background is white */
.search-bar {
    color: #0b1220; /* dark text for white background */
}

/* Ensure elements that have a light/white background display dark text */
.banner-card,
.banner-card h3,
.banner-info,
.recommendations,
.file-input-label,
.selected-file,
.dropdown-menu,
.upload-form,
.file-input-label span {
    color: #0b1220; /* dark text */
}

/* Buttons with dark/neon background keep white text - no change */

/* For contrast: any element explicitly dark background keep light text by default (inherit from body)
   If you add a new white box, add it to the selector above so its text becomes dark.
*/

.logo:hover {
    transform: scale(1.05);
}

.logo span {
    color: var(--red);
}

.search-bar {
    background: #ffffff; /* barre blanche */
    padding: 10px 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    /* overridden for nav-centered search */
    flex: 0 0 auto;
    max-width: 520px;
    transition: all 0.22s ease;
    border: 1px solid rgba(2,6,23,0.06);
    box-shadow: 0 6px 18px rgba(2,6,23,0.14), 0 0 12px rgba(0,240,255,0.03) inset;
}

.search-bar:focus-within {
    background: white;
    box-shadow: 0 0 0 3px rgba(255,0,0,0.1);
}

.search-bar input {
    background: transparent;
    border: none;
    outline: none;
    margin-left: 12px;
    width: 100%;
    font-size: 15px;
    color: #0b1220; /* texte en noir */
}

.search-bar input::placeholder {
    color: #8a9099;
    opacity: 1;
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Improve alignment: make icons slightly larger and align their tops */
.nav-icons {
    /* align-items:flex-start keeps the top of each icon at same height */
    align-items: flex-start;
}

.nav-icons .user-btn i {
    font-size: 29px; /* increased by 3px as requested */
    line-height: 1;
}

.nav-icons .cart-icon i {
    font-size: 31px; /* increased by 3px as requested */
    line-height: 1;
}

/* Ensure the small text under the user icon doesn't push the icon down visually */
.user-btn span {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1;
}

/* Adjust cart-badge vertical position to match new icon sizing */
.cart-badge {
    top: -10px;
    right: -12px;
}

/* Hover effect: make cart and account icons turn soft red on hover and animate smoothly */
.nav-icons .user-btn i,
.nav-icons .cart-icon i {
    transition: color 160ms ease, transform 120ms ease;
    color: #ffffff; /* default white */
}

.nav-icons .user-btn:hover i,
.nav-icons .cart-icon:hover i {
    color: #ff6b6b !important; /* soft red on hover */
    transform: scale(1.12);
}

/* When user menu is active keep red color */
.user-btn.active i {
    color: #ff6b6b !important;
}

.user-menu, .user-menu-logged {
    position: relative;
}

/* Ensure account dropdown overlays header instead of pushing layout */
.user-menu-logged {
    /* reinforce positioning context */
    position: relative !important;
    z-index: 1001; /* keep above nav content but below dropdown */
}

.dropdown-menu {
    /* absolute overlay so it does not affect header flow */
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 10050 !important;
    min-width: 220px;
    max-width: min(360px, 90vw);
    box-shadow: 0 18px 60px rgba(0,0,0,0.75), 0 0 26px rgba(255,255,255,0.03) !important;
    transform-origin: top right;
}

/* Prevent dropdown from affecting parent height when transitions run */
.dropdown-menu[x-cloak] { display: none !important; }

.user-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

.user-btn:hover {
    transform: translateY(-3px);
}

.user-btn i {
    font-size: 22px;
    margin-bottom: 4px;
}

.user-btn.active i {
    color: var(--red);
}

.user-btn span {
    font-size: 10px;
    font-weight: 800;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    /* dark dropdown background to match site theme */
    background: linear-gradient(180deg, rgba(18,24,30,0.98), rgba(23,30,38,0.98));
    border-radius: 12px;
    /* subtle dark shadow plus slight white halo to separate from background */
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 18px rgba(255,255,255,0.03);
    min-width: 200px;
    overflow: hidden;
    animation: fadeInDown 0.2s ease;
    z-index: 2000;
}

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

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #ffffff !important; /* force white text for readability */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.16s ease;
    /* subtle black shadow behind text for contrast */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.dropdown-menu a:hover {
    background: rgba(255,255,255,0.03);
    color: #ff6b6b;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

.dropdown-menu hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 5px 0;
}

.cart-icon {
    font-size: 24px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cart-icon:hover {
    transform: scale(1.1);
    color: var(--red);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--red);
    color: white;
    font-size: 11px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Label under cart icon */
.cart-icon .cart-label {
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.nav-links {
    background: white !important; /* restored white background as requested */
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 15px;
    list-style: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links li {
    cursor: pointer;
    font-size: 15px; /* augmenté pour meilleure lisibilité */
    font-weight: 800;
    color: #444444; /* baseline color, will be overridden for non-active state below */
    transition: all 0.3s;
    white-space: nowrap;
    position: relative;
    padding: 0 18px;
}

.nav-links li::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--red);
    transition: width 0.3s;
}

.nav-links li:hover,
.nav-links li.active-link {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.95) !important;
}

/* Make non-selected category links slightly darker with a subtle white border */
.nav-links li:not(.active-link) {
    color: #222222 !important; /* a bit darker */
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 6px 18px;
    background: transparent;
}

/* Keep active link distinct (white text + halo) — ensure border removed on active */
.nav-links li.active-link {
    border: 1px solid rgba(255,255,255,0.02);
    text-shadow: 0 1px 2px rgba(0,0,0,0.95) !important;
    padding: 6px 18px;
}

.nav-links li.active-link::after {
    width: 100%;
}

/* Active nav item: white text with a subtle BLACK shadow for contrast on light backgrounds */
.nav .nav-links li.active-link {
    /* Active nav item: force white text with strong but slim black shadow
       and a dark background so the white text remains readable on the nav bar. */
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.95) !important;
    transform: translateY(-3px);
    font-weight: 900 !important;
    background: linear-gradient(180deg, rgba(10,12,14,0.95), rgba(20,24,28,0.95)) !important;
    border: 1px solid rgba(0,0,0,0.6) !important;
    border-radius: 4px !important;
    padding: 6px 20px !important;
}

.nav-links li:hover {
    /* hover: change color (handled elsewhere) and use a light white highlight without heavy contour */
    text-shadow: 0 1px 6px rgba(255,255,255,0.06);
}

/* Ensure hover only changes color to red and does NOT make the text bolder
   Keep active-link visual (bold/halo) intact. */
.nav-links li:hover:not(.active-link) {
    color: var(--red) !important;
    font-weight: 800 !important; /* keep original weight, do not make bold */
}

/* Override hover to make hovered nav item white with a subtle black text-shadow
   and a dark border so the white text remains readable on all backgrounds. */
.nav .nav-links li:hover,
.nav .nav-links li:hover:not(.active-link) {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
    background: rgba(0,0,0,0.55) !important;
    border-color: rgba(0,0,0,0.65) !important;
}

/* Vertical black separators between nav items */
.nav-links li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 22px;
    background: var(--theme-bg); /* match page background so separators are subtle */
    opacity: 1;
}

/* If there are only three items, ensure they look centered and spaced */
.nav-links { gap: 8px; }
.nav-links li { padding: 0 24px; }

@media (max-width: 600px) {
    /* hide separators on small screens for readability */
    .nav-links li + li::before { display: none; }
}

/* Force nav background to be transparent so hovered/active white text is visible
   and ensure hovered/active items get a dark background and black text-shadow. */
nav .nav-links {
    background: transparent !important;
}

nav .nav-links li:hover,
nav .nav-links li.active-link {
    color: #ffffff;
    /* strong black outline around text (4-direction) to act as a contour/border */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    /* optional additional stroke for browsers that support it */
    -webkit-text-stroke: 0.6px #000 !important;
    background: rgba(0,0,0,0.65) !important;
    border: 2px solid rgba(0,0,0,0.7) !important;
    border-radius: 8px !important;
    padding: 6px 20px !important;
}

/* If there are anchor tags inside the li ensure their color inherits */
nav .nav-links li a {
    color: inherit !important;
    text-decoration: none;
}

/* Final override: make hovered/active nav link text RED with a BLACK contour (stroke)
   while keeping the nav background white. This rule has high specificity and is
   placed at the end to ensure it wins over previous rules. */
header nav .nav-links li.active-link > a,
header nav .nav-links li:hover > a,
header nav .nav-links li:focus > a {
    color: var(--red) !important; /* red text when active/hover */
    /* four-direction outline for wide browser support */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
    -webkit-text-stroke: 0.4px #000 !important;
    background: transparent !important; /* do not apply dark background */
    border: none !important;
    transform: none !important;
}

/* Ensure li itself does not add a white border/background that hides the red text */
header nav .nav-links li.active-link,
header nav .nav-links li:hover,
header nav .nav-links li:focus {
    background-color: transparent !important;
    border: none !important;
}

/* Thicken the black contour/shadow for hovered or active nav items */
header nav .nav-links li.active-link > a,
header nav .nav-links li:hover > a,
header nav .nav-links li:focus > a,
nav .nav-links li.active-link > a,
nav .nav-links li:hover > a,
nav .nav-links li:focus > a {
    /* stronger multi-offset shadows to simulate a thicker outline */
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
                 -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 !important;
    -webkit-text-stroke: 0.9px #000 !important; /* thicker stroke where supported */
    color: var(--red) !important; /* ensure text remains red */
}

/* Strong override: ensure hovered/active nav items show RED text with a subtle BLACK contour
   and do not get a dark background or white border that would hide the red text. */
header nav .nav-links li:hover,
header nav .nav-links li.active-link,
header nav .nav-links li:focus {
    color: var(--red) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
    -webkit-text-stroke: 0.25px rgba(0,0,0,0.85) !important;
    background: transparent !important;
    border: none !important;
    transform: translateY(0) !important;
    padding: 6px 18px !important;
}

/* Remove any leftover dark-hover rules by deactivating them with high-specificity none values */
nav .nav-links li:hover,
nav .nav-links li.active-link {
    background-color: transparent !important;
}

/* Ensure active nav link is larger for prominence */
header nav .nav-links li.active-link,
nav .nav-links li.active-link {
    font-size: 19px !important;
}

/* === CARROUSEL === */
.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto;
    padding: 0;
    width: auto;
}

.carousel-frame {
    width: 512px;
    max-width: 90vw;
    aspect-ratio: 512 / 256;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 8px 30px rgba(2,6,23,0.6), 0 0 30px rgba(0,240,255,0.06);
    transition: transform 240ms ease, box-shadow 240ms ease;
    margin: 0 auto;
}

.carousel-frame:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(2,6,23,0.7), 0 0 48px rgba(0,240,255,0.12);
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.02);
    transition: transform 450ms cubic-bezier(.22,.91,.31,1), opacity 200ms ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === PRODUITS === */
.container {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

.section-title {
    font-size: 20px;
    font-weight: 900;
    margin: 30px 0 20px 0;
    border-left: 5px solid var(--red);
    padding-left: 15px;
    text-transform: uppercase;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.04);
    position: relative;
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
    box-shadow: 0 8px 20px rgba(2,6,23,0.45);
    backdrop-filter: blur(6px) saturate(120%);
}

.card:hover {
    transform: translateY(-8px); scale(1.01);
    box-shadow: 0 18px 40px rgba(2,6,23,0.6), 0 0 30px rgba(0,240,255,0.06);
    border-color: rgba(0,240,255,0.12);
}

.card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform 0.3s;
}

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

.similar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 769px) {
    .similar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
    color: #021028;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 900;
    border-radius: 8px;
    z-index: 2;
    box-shadow: 0 6px 20px rgba(0,240,255,0.06);
    animation: float 3s ease-in-out infinite;
}

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

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

.info {
    padding: 15px;
    text-align: center;
}

.info h3 {
    font-size: 14px;
    margin-bottom: 8px;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.price {
    color: var(--red);
    font-weight: 900;
    font-size: 18px;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
    margin-left: 8px;
}

.empty-results {
    text-align: center;
    padding: 60px 20px;
    color: #e6eef8; /* light text for dark background */
}

.empty-results i {
    font-size: 4rem;
    margin-bottom: 20px;
    color: inherit;
    opacity: 0.9;
}

/* === MODALE PRODUIT === */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    /*backdrop-filter: blur(5px);*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
    /*animation: fadeIn 0.3s;*/
}

.modal-content {
    background: rgba(0,0,0,0.85);
    width: 100%;
    max-width: 800px; /* keep modal compact so it fits main view */
    border-radius: 20px;
    position: relative;
    max-height: 90vh; /* constrain to viewport */
    /*overflow: hidden; /* hide outer scrollbar, inner column will scroll */
    /*animation: slideUp 0.3s ease;*/
}

/* Specific: auth modal should not show inner scrollbars and use dark surface */
.modal-content.auth-modal {
    max-height: none !important;
    overflow: visible !important;
    background: linear-gradient(180deg, #12161a, #0f1316) !important;
    color: #e6eef8 !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,0.75), 0 0 26px rgba(255,255,255,0.04) !important;
}

/* Auth modal buttons styling */
.btn-auth-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 800;
}

.btn-auth-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(255,107,107,0.18) !important;
    border-radius: 10px !important;
    font-weight: 800;
}

/* make sure close icons in modals use the soft red */
.modal .close-modal, .modal .close-modal i { color: #ff6b6b !important; }

/* White halo / glow for popups: modals, auth boxes, dropdowns, toasts, alerts */
.modal-content,
.auth-box,
.dropdown-menu,
.toast,
.alert,
.modal-extras,
.empty-cart,
.empty-results {
    /* subtle white outline and glow so the popup stands out from the dark background */
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,0.75), 0 0 26px rgba(255,255,255,0.06) !important;
    position: relative;
    z-index: 3100;
}

/* Stronger inner highlight for the modal window itself */
.modal-content::after,
.auth-box::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    box-shadow: 0 0 40px rgba(255,255,255,0.05);
    pointer-events: none;
}

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

.close-modal {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 32px;
    cursor: pointer;
    color: #ff6b6b; /* close icon in soft red */
    z-index: 3010;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    background: rgba(255,107,107,0.06);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.close-modal:hover {
    background: var(--gray);
    transform: rotate(90deg);
}

.modal-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 769px) {
    /* Wider modal and adjusted three-column layout: make overall modal larger and
       increase horizontal space for the product/details area. */
    .modal-content { max-width: 1100px; }

    .modal-grid {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }

    /* Left: images/gallery - slightly larger */
    .modal-left {
        flex: 0 0 46%;
        padding: 18px;
    }

    /* Center: product details / form - make it reasonably wide */
    .modal-right {
        flex: 1 1 34%;
        padding: 18px 18px 18px 12px;
        max-height: calc(90vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
    }

    /* similar products column removed - no styles needed */

    .modal-right::-webkit-scrollbar { display: none; }

    .main-view {
        max-height: calc(90vh - 160px);
        width: 100%;
        height: auto;
    }
}

.modal-left {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Main product image: keep natural aspect ratio, avoid forcing square which deforms images */
.main-view {
    width: 100%;
    border-radius: 15px;
    height: auto;               /* let browser set height based on image ratio */
    max-height: calc(90vh - 220px); /* keep image within viewport */
    object-fit: contain;        /* fit whole image inside without cropping */
}

.thumb-grid {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto;
}

/* Make thumbnail scrolling smooth and hide ugly native scrollbar for a cleaner look */
.thumb-grid {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.thumb-grid::-webkit-scrollbar { display: none; height: 0; }

/* Similar products horizontal list: hide scrollbar and smooth scroll */
.similar-grid {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overflow: auto;
}
.similar-grid::-webkit-scrollbar { height: 0; display: none; }
.similar-grid { scrollbar-width: none; }

.thumb-grid::-webkit-scrollbar {
    height: 5px;
}

.thumb-grid::-webkit-scrollbar-thumb {
    background: var(--red);
    border-radius: 10px;
}

.thumb-grid img {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    object-fit: cover;
}

.thumb-grid img:hover,
.thumb-grid img.active-thumb {
    border-color: var(--red);
    transform: scale(1.05);
}

.modal-right {
    padding: 0 25px 30px 25px;
}

.modal-right h2 {
    font-size: 22px;
    margin-bottom: 15px;
}

.modal-extras {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 0;
    padding: 30px 25px;
    /* Keep modal-extras consistent with modal-content dark surface */
    background: linear-gradient(180deg, rgba(12,16,20,0.98), rgba(20,26,32,0.98));
    color: var(--text-on-dark);
}

.modal-extras .reviews-column,
.modal-extras .similar-column {
    width: 100%;
}

@media (min-width: 769px) {
    .modal-extras {
        flex-direction: row;
        align-items: flex-start;
        padding: 40px;
    }

    .modal-extras .reviews-column,
    .modal-extras .similar-column {
        width: 50%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .modal-extras .reviews-column {
        border-right: 1px solid rgba(0,0,0,0.1);
        padding-right: 30px;
    }
    
    .modal-extras .similar-column {
        padding-left: 30px;
    }
}

.price-section {
    margin-bottom: 20px;
}

.price-big {
    font-size: 32px;
    font-weight: 900;
    color: var(--red);
}

.old-big {
    text-decoration: line-through;
    font-size: 18px;
    color: #999;
    margin-left: 10px;
}

.product-desc {
    /* dark panel for product description inside modal to ensure high contrast */
    color: #e6eef8; /* light text */
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
    font-weight: 500;
    background: linear-gradient(180deg, rgba(12,16,20,0.98), rgba(20,26,32,0.98));
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid var(--red);
}

.size-label {
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.size-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 25px;
}
.size-grid button {
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: #ffffff !important; /* white background by default */
    color: #000000 !important; /* black text when not focused/selected */
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

/* Hover keeps black text but highlights border */
.size-grid button:hover {
    border-color: var(--red);
    transform: scale(1.03);
    color: #000000 !important;
}

/* Focus / active / keyboard focus-visible state: red background with white text */
.size-grid button:focus,
.size-grid button:active,
.size-grid button:focus-visible,
.size-grid button:focus-visible:active,
.size-grid button.active {
    background: linear-gradient(135deg, var(--red) 0%, var(--dark-red) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(0,0,0,0.25) !important;
    box-shadow: 0 8px 24px rgba(255,77,77,0.12) !important;
    transform: none !important;
    outline: none !important;
}

/* Ensure icons/text inside the size button remain readable */
.size-grid button * { color: inherit !important; }

.qty-control {
    margin: 20px 0;
    padding: 14px;
    border-radius: 12px;
    /* dark panel to match modal/product-desc for good contrast */
    background: linear-gradient(180deg, rgba(12,16,20,0.98), rgba(20,26,32,0.98));
    color: #e6eef8; /* light text inside control */
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,0.03);
}

.qty-label {
    display: block;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.6px;
    color: #e6eef8; /* light label on dark background */
    text-transform: uppercase;
    margin-bottom: 10px;
}

.qty-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn,
.modal-right .qty-actions .qty-btn,
.qty-control .qty-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 2px solid var(--border) !important;
    background: #ffffff !important; /* keep buttons white */
    color: #000000 !important; /* ensure + / - are black */
    font-weight: 900;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ensure any icon/text inside the button remains black and is not overridden */
.qty-btn * {
    color: #000000 !important;
}

.qty-btn:hover,
.qty-btn:focus,
.qty-btn:active {
    border-color: var(--red) !important;
    background: #ffffff !important;
    color: #000000 !important;
    transform: translateY(-1px);
    outline: none !important;
}

.qty-input {
    width: 90px;
    text-align: center;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-weight: 800;
    font-size: 14px;
    background: #ffffff;
    color: #000000;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.qty-input:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(255,0,0,0.08);
}

.qty-stock {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

.add-btn {
    width: 100%;
    background: var(--red);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
}

.add-btn:hover {
    background: var(--dark-red);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255,0,0,0.3);
}

.add-btn:active {
    transform: translateY(0);
}

/* === MODALE AUTH === */
.auth-modal {
    max-width: 400px;
    text-align: center;
    padding: 40px 30px;
}

.auth-modal > i {
    font-size: 4rem;
    color: #ffffff;
    margin-bottom: 20px;
}

.auth-modal h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #ffffff;
}

.auth-modal p {
    color: #b7c0cb;
    font-size: 14px;
    margin-bottom: 30px;
}

.auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-auth-primary,
.btn-auth-secondary {
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-auth-primary {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%);
    color: #ffffff;
}
.btn-auth-primary i {
    color: #ffffff;
}

.btn-auth-primary:hover {
    background: linear-gradient(135deg, #ff4d4d 0%, #e03e3e 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255,107,107,0.4);
}

.btn-auth-secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.15);
}
.btn-auth-secondary i {
    color: #ffffff;
}

.btn-auth-secondary:hover {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255,107,107,0.4);
}

/* === PANIER === */
.cart-page h2 {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    margin: 30px 0;
}

/* Specific overrides for cart content to ensure readability */
.cart-page .empty-cart i,
.cart-page .cart-item i,
.cart-page .cart-item .fa,
.cart-page .cart-item img {
    color: #444444 !important;
}

.cart-page .empty-cart h3,
.cart-page .empty-cart p,
.cart-page .cart-item-info h3,
.cart-page .cart-item-info p,
.cart-page .cart-qty,
.cart-page .cart-summary,
.cart-page .promo-title,
.cart-page .total-row,
.cart-page .promo-hint {
    color: #111111 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Boutique button in cart (empty state) should be red */
.cart-page .btn-shop,
.btn-shop {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    font-weight: 900 !important;
}

/* Ensure remove/trash icon is dark gray by default */
.cart-page .btn-remove i,
.cart-page .btn-remove {
    color: #444444 !important;
}

/* Make sure unit price and totals keep red emphasis but not white shadow */
.cart-page .unit-price,
.cart-page .line-total,
.cart-page .total-row.grand-total {
    color: var(--red) !important;
    text-shadow: none !important;
}

.cart-container {
    max-width: 800px;
    margin: 0 auto;
}

.cart-item {
    background: white;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    box-shadow: var(--shadow);
    transition: all 0.3s;
}

.cart-item:hover {
    box-shadow: var(--shadow-hover);
}

.cart-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
}

.cart-item-info {
    flex: 1;
}

.cart-item-info h3 {
    font-size: 15px;
    margin-bottom: 5px;
}

.cart-item-info p {
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}

.cart-qty {
    font-size: 13px;
    color: #444;
    font-weight: 700;
    margin-bottom: 6px;
}

.cart-item .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--red);
    font-weight: 900;
    font-size: 16px;
}

.unit-price {
    color: #666;
    font-size: 12px;
    font-weight: 700;
}

.line-total {
    font-size: 18px;
    font-weight: 900;
    color: var(--red);
}

.btn-remove {
    background: none;
    border: none;
    color: var(--red);
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    transition: all 0.3s;
}

.btn-remove:hover {
    transform: scale(1.2);
}

.cart-summary {
    background: white;
    padding: 25px;
    border-radius: 15px;
    margin-top: 20px;
    box-shadow: var(--shadow);
}

.promo-box {
    margin-bottom: 22px;
    padding: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
    border-radius: 12px;
    border: 1px dashed var(--border);
    box-shadow: var(--shadow);
    position: relative;
}

.promo-box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

.promo-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--black);
    text-transform: uppercase;
}

.promo-emoji {
    font-size: 18px;
}

.promo-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.promo-input {
    flex: 1;
    min-width: 180px;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    background: white;
    color: var(--black);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.promo-input:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(255,0,0,0.08);
    background: #fff;
}

.promo-input:disabled {
    background: #f3f3f3;
    color: #888;
    cursor: not-allowed;
}

.promo-button {
    padding: 12px 18px;
    background: var(--red);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 12px;
    min-width: 140px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.promo-button:hover {
    background: var(--dark-red);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255,0,0,0.18);
}

.promo-button:active {
    transform: translateY(0);
}

.promo-button.is-applied {
    background: var(--black);
    box-shadow: none;
}

.promo-success {
    margin-top: 10px;
    color: #1f9d55;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
}

.promo-hint-label {
    font-weight: 800;
    color: #333;
}

.cart-totals {
    border-top: 1px solid var(--border);
    padding-top: 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

.total-row.muted {
    color: #555;
}

.total-row.muted span:last-child {
    color: #111;
    font-weight: 700;
}

.total-row.success {
    color: #1f9d55;
    font-weight: 800;
}

.total-row.grand-total {
    font-size: 28px;
    font-weight: 900;
    color: var(--red);
    border-top: 2px solid var(--border);
    padding-top: 14px;
}

.payment-methods {
    margin: 25px 0 20px 0;
}

.payment-title {
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-btn {
    width: 100%;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    margin-bottom: 12px;
}

.airwalelex-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.airwalelex-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.payment-btn.whatsapp-btn {
    background: var(--green);
    color: white;
}

.payment-btn.whatsapp-btn:hover {
    background: #1da851;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37,211,102,0.3);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 20px;
}

.total-price {
    color: var(--red);
}

.whatsapp-btn {
    width: 100%;
    background: var(--green);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
}

.whatsapp-btn:hover {
    background: #1da851;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37,211,102,0.3);
}

.secondary-btn {
    width: 100%;
    background: white;
    border: 2px solid var(--black);
    color: var(--black);
    padding: 15px;
    border-radius: 12px;
    margin-top: 12px;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.secondary-btn:hover {
    background: var(--black);
    color: white;
}

.empty-cart {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 20px;
}

.empty-cart i {
    font-size: 5rem;
    color: #ddd;
    margin-bottom: 25px;
}

.empty-cart h3 {
    font-size: 24px;
    color: #666;
    margin-bottom: 15px;
}

.empty-cart p {
    color: #999;
    margin-bottom: 30px;
}

.btn-shop {
    background: var(--red);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-shop:hover {
    background: var(--dark-red);
    transform: translateY(-3px);
}

/* === RESPONSIVE === */
@media (min-width: 769px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .carousel-container {
        height: 450px;
    }
    
    .modal-content {
        max-width: 900px;
    }
    
    .modal-grid {
        flex-direction: row;
    }
    
    .modal-left,
    .modal-right {
        width: 50%;
        padding: 40px;
        height: auto;
    }
    
    .nav-links li {
        font-size: 15px;
    }
}
/**
 * =====================================================
 * AJOUTS RESPONSIVE - À COPIER À LA FIN DE VOTRE style.css
 * =====================================================
 */

/* Classe utilitaire pour cacher sur mobile */
.desktop-only {
    display: inline;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    /* Fix dropdown menu sur mobile */
    .dropdown-menu {
        position: fixed;
        right: 20px;
        top: auto;
        margin-top: 0;
        max-width: 250px;
    }
    
    .user-menu-logged {
        position: static;
    }
    
    /* Améliorer la zone de clic du bouton utilisateur */
    .user-btn {
        padding: 8px;
        min-width: 60px;
        -webkit-tap-highlight-color: transparent;
    }
    
    .user-btn span {
        font-size: 9px;
    }
}

/* Conteneur de recherche séparé pour mobile */
.search-wrapper {
    display: none;
}

@media (max-width: 768px) {
    /* ENLEVER COMPLÈTEMENT la recherche de la nav sur mobile */
    nav .search-bar,
    nav .search-desktop,
    .navbar .search-bar,
    .navbar .search-desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Afficher la barre de recherche mobile */
    .search-wrapper {
        display: block;
        background: var(--gray);
        padding: 15px 5%;
        margin-top: 0;
        border-bottom: 1px solid var(--border);
    }
    
    .search-wrapper .search-bar {
        width: 100%;
        max-width: 100%;
        background: white;
    }
}

/* MENU CATÉGORIES RESPONSIVE */
@media (max-width: 768px) {
    .nav-links,
    .nav-menu {
        justify-content: flex-start !important;
        padding: 12px 20px 12px 20px !important;
        gap: 10px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-left: 20px !important;
    }
    
    .nav-links li,
    .nav-menu li {
        font-size: 12px;
        padding: 8px 15px;
        background: var(--gray);
        border-radius: 20px;
        transition: all 0.3s;
        margin-left: 0 !important;
    }
    
    /* Premier élément - FORCER l'espace */
    .nav-links li:first-child,
    .nav-menu li:first-child {
        margin-left: 10px !important;
        padding-left: 20px !important;
    }
    
    /* Dernier élément */
    .nav-links li:last-child,
    .nav-menu li:last-child {
        margin-right: 20px !important;
        padding-right: 20px !important;
    }
    
    .nav-links li.active-link,
    .nav-menu li.active-link {
        background: var(--red);
        color: white;
    }
    
    .nav-links li::after,
    .nav-menu li::after {
        display: none;
    }
}

/* GRILLE PRODUITS RESPONSIVE */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .carousel-container {
        height: 200px;
        margin: 15px;
    }
    
    .section-title {
        font-size: 18px;
    }

    .qty-actions {
        width: 100%;
    }

    .qty-input {
        flex: 1;
        width: 100%;
    }

    .cart-item .price {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .card {
        max-width: 350px;
        margin: 0 auto;
    }
}

/* MODAL RESPONSIVE */
@media (max-width: 768px) {
    .modal-content {
        margin: 20px;
        max-width: calc(100% - 40px);
    }
    
    .modal-grid {
        flex-direction: column;
    }
    
    .size-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* =====================================================
   NOTIFICATIONS TOAST - SYSTÈME PRO
   ===================================================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: rgba(17,17,17,0.95); /* dark background for readability */
    color: #fff;
    padding: 20px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 320px;
    max-width: 400px;
    animation: slideIn 0.3s ease;
    pointer-events: all;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOut 0.3s ease forwards;
}

.toast.success { border-left: 5px solid #28a745; }
.toast.error { border-left: 5px solid #dc3545; }
.toast.info { border-left: 5px solid #17a2b8; }
.toast.warning { border-left: 5px solid #ffc107; }

.toast-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    color: #28a745;
}

.toast.error .toast-icon {
    color: #dc3545;
}

.toast.info .toast-icon {
    color: #17a2b8;
}

.toast.warning .toast-icon {
    color: #ffc107;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 5px;
    color: #fff !important;
}

.toast-message {
    color: #fff !important;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.95;
}

.toast-close {
    cursor: pointer;
    color: #999;
    font-size: 20px;
    transition: all 0.3s;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.toast-close:hover {
    color: #333;
    background: #f5f5f5;
}

@media (max-width: 768px) {
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        min-width: auto;
        width: 100%;
    }
}

/* FIX FREEZE MODAL CHROME IPHONE */
.modal {
    backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.92) !important;
}

/* =====================================================
   CODE PROMO - FIX RESPONSIVE MOBILE
   ===================================================== */
@media (max-width: 768px) {
    .cart-summary input[type="text"] {
        font-size: 12px !important;
        padding: 12px !important;
    }
    
    .cart-summary button {
        font-size: 11px !important;
        padding: 12px 16px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    /* Responsive pour très petits écrans */
    .cart-summary > div > div {
        flex-direction: column !important;
    }
    
    .cart-summary input[type="text"] {
        width: 100% !important;
        margin-bottom: 10px;
    }
    
    .cart-summary button {
        width: 100% !important;
        padding: 14px !important;
    }
}

/* =====================================================
   AIRWALLEX PAYMENT MODAL - NETFLIX THEME
   ===================================================== */

/* Modal backdrop */
#airwallex-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
}

/* Modal content container */
#airwallex-modal .modal-inner {
    background: linear-gradient(180deg, #0f1724 0%, #071029 100%);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    padding: 28px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03);
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Close button */
#airwallex-modal .close-modal-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #ff6b6b;
    font-size: 24px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#airwallex-modal .close-modal-btn:hover {
    background: rgba(255, 107, 107, 0.15);
    transform: rotate(90deg);
}

/* Modal title */
#airwallex-modal h3 {
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

/* Amount text */
#airwallex-modal .amount-text {
    color: #b7c0cb;
    font-size: 14px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#airwallex-modal .amount-text strong {
    color: #ff6b6b;
    font-size: 18px;
}

/* Drop-in container */
#airwallex-dropin {
    min-height: 380px;
    margin: 20px 0;
}

/* Pay button */
#airwallex-modal .pay-now-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4d 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#airwallex-modal .pay-now-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}

#airwallex-modal .pay-now-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Airwallex Drop-in Element overrides - Netflix Dark Theme */
.airwallex-dropin-element {
    background: rgba(18, 24, 30, 0.95) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.airwallex-card-element {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    color: #000000 !important;
}

.airwallex-card-element:focus {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1) !important;
}

.airwallex-payment-method-item {
    background: rgba(18, 24, 30, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    padding: 12px !important;
    color: #ffffff !important;
}

.airwallex-payment-method-item.selected {
    border-color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.08) !important;
}

.airwallex-payment-method-item .payment-method-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.airwallex-payment-method-item .payment-method-subtitle {
    color: #b7c0cb !important;
}

/* Apple Pay & Google Pay buttons */
.airwallex-apple-pay-button,
.airwallex-google-pay-button {
    border-radius: 10px !important;
}

/* Loading state */
.airwallex-loading {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Error messages */
.airwallex-error-message {
    color: #ff6b6b !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

/* Responsive */
@media (max-width: 640px) {
    #airwallex-modal .modal-inner {
        padding: 20px;
        width: 95%;
    }
    
    #airwallex-modal h3 {
        font-size: 18px;
    }
    
    #airwallex-dropin {
        min-height: 320px;
    }
}