/* ============================================
   FRANCK PERFORMANCE - DARK SPORTY THEME
   Override Bagisto/Velocity default styles
   ============================================ */

:root {
    --fp-bg: #0a0a0a;
    --fp-bg-alt: #111;
    --fp-bg-card: #161616;
    --fp-border: #1f1f1f;
    --fp-red: #e02020;
    --fp-red-dark: #c01818;
    --fp-text: #fff;
    --fp-text-muted: #999;
}

/* Force dark background everywhere */
body, html { background: var(--fp-bg) !important; color: var(--fp-text) !important; }
main#main { background: var(--fp-bg) !important; }
main#main.bg-white { background: var(--fp-bg) !important; }

/* HEADER: dark background */
header, header > div, .header { background: var(--fp-bg-alt) !important; border-bottom: 1px solid var(--fp-border) !important; }

/* Hide default Velocity logo image, replace with FRANCKPERFORMANCE text */
header img[alt*="logo" i], header img[src*="logo" i], header img[src*="bagisto" i] { display: none !important; }
header a[href$="/"]:first-of-type::before,
header a[href*="://"][href$="/"]:first-of-type::before {
    content: "FRANCK";
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 1px;
    font-family: 'Poppins', system-ui, sans-serif;
}
header a[href$="/"]:first-of-type::after,
header a[href*="://"][href$="/"]:first-of-type::after {
    content: "PERFORMANCE";
    color: var(--fp-red);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 1px;
    font-family: 'Poppins', system-ui, sans-serif;
}

/* Menu links: white text, red on hover */
header a, header nav a, header .menu a { color: var(--fp-text) !important; }
header a:hover, header nav a:hover, header .menu a:hover { color: var(--fp-red) !important; }

/* Search bar dark */
header input[type="text"], header input[type="search"] {
    background: var(--fp-bg-card) !important;
    border: 1px solid var(--fp-border) !important;
    color: var(--fp-text) !important;
}
header input[type="text"]::placeholder, header input[type="search"]::placeholder { color: var(--fp-text-muted) !important; }

/* Icons in header (cart, user, search) */
header svg, header i, header .icon { color: var(--fp-text) !important; fill: var(--fp-text) !important; }
header a:hover svg, header a:hover i { color: var(--fp-red) !important; fill: var(--fp-red) !important; }

/* General text on pages */
main h1, main h2, main h3, main h4, main h5, main h6 { color: var(--fp-text) !important; }
main p, main span, main div, main li, main a { color: #ddd; }
main a:hover { color: var(--fp-red) !important; }

/* Cards / product tiles */
main .bg-white, main [class*="bg-white"], main .border, main [class*="rounded"] {
    background: var(--fp-bg-alt) !important;
    border-color: var(--fp-border) !important;
}

/* Buttons - primary becomes red */
button.bg-navyBlue, button.bg-blue-600, button[class*="primary"], .btn-primary,
a.bg-navyBlue, a.bg-blue-600 {
    background: var(--fp-red) !important;
    color: #fff !important;
    border-color: var(--fp-red) !important;
}
button.bg-navyBlue:hover, button.bg-blue-600:hover, button[class*="primary"]:hover, .btn-primary:hover {
    background: var(--fp-red-dark) !important;
}

/* Inputs / selects */
main input, main select, main textarea {
    background: var(--fp-bg-card) !important;
    border: 1px solid var(--fp-border) !important;
    color: var(--fp-text) !important;
}
main input::placeholder, main textarea::placeholder { color: var(--fp-text-muted) !important; }

/* Filter sidebar (catalog) */
aside, .filter, [class*="filter"] {
    background: var(--fp-bg-alt) !important;
    color: var(--fp-text) !important;
}
aside h1, aside h2, aside h3, aside h4, aside label { color: var(--fp-text) !important; }

/* Footer dark */
footer { background: #050505 !important; color: var(--fp-text-muted) !important; border-top: 1px solid var(--fp-border) !important; }
footer a { color: var(--fp-text-muted) !important; }
footer a:hover { color: var(--fp-red) !important; }

/* Override price color */
.price, [class*="price"], .product-price { color: var(--fp-red) !important; font-weight: 700; }

/* Tables (cart, checkout) */
table { background: var(--fp-bg-alt) !important; color: var(--fp-text) !important; }
table th, table td { border-color: var(--fp-border) !important; color: var(--fp-text) !important; }

/* Breadcrumbs */
.breadcrumb, [class*="breadcrumb"] { color: var(--fp-text-muted) !important; }

/* ============================================
   MEGAMENU / DROPDOWN CATEGORIES (TOUT button)
   ============================================ */

/* Tous les panneaux de catégories qui s'ouvrent */
[class*="category"], [class*="dropdown"], [class*="megamenu"],
[v-desktop-category], [v-mobile-category],
.absolute.bg-white, .fixed.bg-white,
[role="menu"], [role="listbox"], [role="dialog"] {
    background: var(--fp-bg-alt) !important;
    color: var(--fp-text) !important;
    border-color: var(--fp-border) !important;
}

/* Liens dans les megamenus */
[class*="category"] a, [class*="dropdown"] a, [class*="megamenu"] a,
[role="menu"] a, [role="listbox"] a {
    color: var(--fp-text) !important;
}
[class*="category"] a:hover, [class*="dropdown"] a:hover, [class*="megamenu"] a:hover,
[role="menu"] a:hover, [role="listbox"] a:hover {
    color: var(--fp-red) !important;
    background: rgba(224, 32, 32, 0.05) !important;
}

/* Force tout panneau absolu/fixed à être dark (catch-all pour Vue.js panels) */
.absolute.bg-white, .absolute[class*="white"],
.fixed.bg-white, .fixed[class*="white"] {
    background: var(--fp-bg-alt) !important;
    color: var(--fp-text) !important;
}

/* Tous les éléments avec bg-white forcés en dark */
.bg-white { background: var(--fp-bg-alt) !important; }

/* Texte dans ces panneaux */
[class*="category"] *, [class*="dropdown"] *, [class*="megamenu"] * {
    color: var(--fp-text);
    background-color: transparent;
}

/* Sauf les images */
[class*="category"] img, [class*="dropdown"] img, [class*="megamenu"] img {
    background: transparent !important;
}

/* Borders dans les panneaux */
[class*="category"] [class*="border"], [class*="dropdown"] [class*="border"] {
    border-color: var(--fp-border) !important;
}

/* Modals (panier popup, etc.) */
[role="dialog"], .modal { background: var(--fp-bg-alt) !important; color: var(--fp-text) !important; }
[role="dialog"] *, .modal * { color: var(--fp-text); }

/* Search dropdown / suggestions */
[class*="search"][class*="result"], [class*="autocomplete"], [class*="suggest"] {
    background: var(--fp-bg-alt) !important;
    color: var(--fp-text) !important;
    border: 1px solid var(--fp-border) !important;
}

/* Account dropdown */
[class*="account"][class*="dropdown"], [class*="user"][class*="menu"] {
    background: var(--fp-bg-alt) !important;
    color: var(--fp-text) !important;
}