/* ==========================================================================
   SKIN blackfriday — tema de campanie peste pasiune.
   Pornește de la skin-ul pasiune (importat mai jos, deci orice schimbare acolo
   ajunge și aici) și schimbă doar ce ține de campanie: negru + roșu de preț +
   auriu ca accent. Header negru, banner neon si decor lateral roz.
   ========================================================================== */
@import url("../pasiune/skin.css");

:root {
    --brand-primary:   #111111;  --brand-primary-rgb:   17, 17, 17;
    --brand-secondary: #000000;  --brand-secondary-rgb: 0, 0, 0;
    --brand-accent:    #e10600;  --brand-accent-rgb:    225, 6, 0;
    --brand-price:     #e10600;  --brand-price-rgb:     225, 6, 0;

    /* Auriul de campanie: doar pe elementele Black Friday, nu în paleta generală. */
    --bf-gold:     #f5c400;
    --bf-gold-rgb: 245, 196, 0;
    --bf-black:    #0b0b0b;

    --shop-page-bg: #000;
    --shop-cart-cta: #ff008c;
    --shop-cart-cta-dark: #d10073;
}

/* Fundal negru cu decor repetat doar in afara containerului central. */
body.page-bg {
    background-color: var(--shop-page-bg);
    /* The opaque middle layer keeps decoration outside the content container. */
    --bf-content-width: var(--bs-container-max-width, var(--shop-container, 1415px));
    --bf-gutter: max(0px, calc((100% - var(--bf-content-width)) / 2));
    --bf-decor-offset: var(--bf-decor-start, 360px);
    background-image:
        linear-gradient(#000 0 var(--bf-decor-offset), transparent var(--bf-decor-offset)),
        linear-gradient(90deg, transparent var(--bf-gutter), #000 var(--bf-gutter),
            #000 calc(100% - var(--bf-gutter)), transparent calc(100% - var(--bf-gutter))),
        url('./img/bg_bf_black_pink.png'), url('./img/bg_bf_black_pink.png');
    background-position: center top, center top,
        left var(--bf-decor-offset), right var(--bf-decor-offset);
    background-size: 100% 100%, 100% 100%, 520px auto, 520px auto;
    background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
}

/* Chevron-ul din form-select (SVG data-URI, nu poate lua variabile). */
.form-select.text-primary {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* --- Banda Black Friday de deasupra headerului --- */
.bf-strip {
    position: relative;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 12px, transparent 12px 24px),
        var(--bf-black);
    color: #fff;
    font-size: .9rem;
    line-height: 1.2;
    border-bottom: 3px solid var(--bf-gold);
}
.bf-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding: .6rem 1rem;
    text-align: center;
}
.bf-strip-title {
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bf-gold);
}
.bf-strip-text { font-weight: 500; }
.bf-strip-link {
    color: var(--bf-black);
    background: var(--bf-gold);
    font-weight: 700;
    padding: .3rem .8rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
.bf-strip-link:hover { background: #fff; color: var(--bf-black); }

.bf-countdown {
    display: inline-flex;
    gap: .35rem;
    font-variant-numeric: tabular-nums;
}
.bf-countdown[hidden] { display: none; }
.bf-countdown span {
    min-width: 2.4em;
    padding: .2rem .35rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
    font-weight: 700;
}
.bf-countdown small { font-weight: 400; opacity: .7; margin-left: 1px; }

@media (max-width: 575px) {
    .bf-strip { font-size: .78rem; }
    .bf-strip-inner { gap: .4rem .6rem; padding: .5rem .5rem; }
    .bf-strip-title { letter-spacing: .06em; }
    .bf-strip-text { display: none; }
    .bf-countdown { gap: .2rem; }
    .bf-countdown span { min-width: 0; padding: .15rem .3rem; }
}

/* --- Elementele de campanie de pe carduri --- */
.campaign-ribon-bf {
    background: var(--bf-black);
    color: var(--bf-gold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.campaign-bf-text {
    color: var(--brand-price);
    font-weight: 700;
}

/* --- Indicatorul de previzualizare (doar cu cookie-ul de preview) --- */
.bf-preview-pill {
    position: fixed;
    right: 12px;
    bottom: 140px;   /* deasupra bannerului de cookie-uri */
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem .4rem .8rem;
    border-radius: 999px;
    background: var(--bf-gold);
    color: var(--bf-black);
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.bf-preview-pill a {
    color: #fff;
    background: var(--bf-black);
    padding: .2rem .6rem;
    border-radius: 999px;
    text-decoration: none;
}

/* Neon artwork above the existing navigation. Its black margins are cropped by CSS. */
.bf-strip {
    background: #000;
    border-bottom: 1px solid #333;
}
.bf-strip-art {
    display: block;
    width: 90%;
    margin-inline: auto;
    height: auto;
    aspect-ratio: 9 / 1;
    object-fit: cover;
    object-position: center 50%;
}
.bf-strip-inner { padding: 0; gap: .5rem 1rem; }
.bf-strip-title, .bf-strip-text { display: none; }
.bf-strip-inner:has(.bf-countdown:not([hidden]), .bf-strip-link) {
    padding: .4rem 1rem;
}
.bf-strip-link { background: #ff008c; color: #fff; }

/* Only navigation on the dark surface: dropdowns and search results stay light. */
.topbar.bg-light, #stickyheader.bg-white, #categmenu.bg-white {
    background-color: #000 !important;
    color: #fff;
}
.topbar { border-bottom: 1px solid #292929; }
.topbar .link-secondary, .topbar .text-secondary,
#navbarTop #usermenu .ContButt, #navbarTop #usermenu .FavButt,
#navbarTop #usermenu .ShopButt, #navbarTop #mobileSearchOpen,
#navbarTop .mobile-menu-toggle, #navbarTop > div > .navbar-toggler,
#categmenu .nav-link-main {
    color: #fff !important;
}
#navbarTop .logo { filter: brightness(0) invert(1); }
#navbarTop #shopSearchInput {
    background-color: #fff;
    color: #111;
    border-color: #ddd !important;
}
#navbarTop #usermenu .badge, #categmenu .products-toggle {
    background-color: #ff008c !important;
    color: #fff !important;
}
#categmenu .nav-link-main:hover, #categmenu .nav-link-main.active {
    color: #ff51ad !important;
}

/* Badge contrast when the cart button has its pink filled state. */
#navbarTop #usermenu .ShopButt.has-items .ShoppingCartQ {
    background-color: #fff !important;
    color: var(--shop-cart-cta) !important;
}

/* Homepage headings directly on black; headings inside cards keep their colors. */
.page-home .shop-products-title,
.page-home .shop-products-title > a,
.page-home .shop-products-title > span,
.page-home .shop-section-title,
.page-home .advantages-section-title,
.page-home .hp-section-hero-categories > h2 {
    color: #fff;
}
.page-home .shop-products-title > a:hover { color: #ff51ad; }

/* Slider edge fades blend into the black page background. */
.page-home .slider-arrow-left {
    background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0));
}
.page-home .slider-arrow-right {
    background: linear-gradient(270deg, #000, rgba(0, 0, 0, 0));
}
@media (max-width: 1399.98px) {
    body.page-bg { --bf-content-width: 1300px; }
}
@media (max-width: 1199.98px) {
    body.page-bg { background-image: none; }
}
@media (max-width: 575.98px) {
    .bf-strip-art { height: 72px; aspect-ratio: auto; object-position: 57% 50%; }
}

/* Paginația stă direct pe fundalul negru, iar culoarea primară e #111 (link, chenar,
   „..."): fără asta iese negru pe negru. Clasele Bootstrap din markup (`border-primary`,
   `bg-transparent`) au !important, deci și aici e nevoie de el. */
nav[aria-label="paging"] .page-link {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .45) !important;
}
nav[aria-label="paging"] .page-link:hover {
    color: #fff !important;
    border-color: #ff008c !important;
    background-color: rgba(255, 0, 140, .18) !important;
}
nav[aria-label="paging"] .page-item.active .page-link {
    color: #fff !important;
    background-color: #ff008c !important;
    border-color: #ff008c !important;
}
nav[aria-label="paging"] .page-item.disabled .page-link { opacity: .4; }
nav[aria-label="paging"] .text-primary { color: #fff !important; }

/* Bannerul de cookie-uri e închis la culoare: „Accept toate" (culoarea primară, #111) nu se
   vedea — devine alb. Stilul de bază e inline în componentă, după skin, deci specificitate
   mai mare (.cc-banner …). */
.cc-banner .cc-btn--accept {
    background: #fff;
    border-color: #fff;
    color: #111;
}
.cc-banner .cc-btn--accept:hover {
    background: #ff008c;
    border-color: #ff008c;
    color: #fff;
    filter: none;
}

/* „Personalizează" și „Respinge" din bannerul de cookie-uri: doar text, fără chenar —
   singurul buton plin rămâne „Accept toate". */
.cc-banner .cc-btn--ghost,
.cc-banner .cc-btn--reject {
    background: transparent;
    border-color: transparent;
    color: #e5e7eb;
    padding-inline: 8px;
}
.cc-banner .cc-btn--ghost:hover,
.cc-banner .cc-btn--reject:hover {
    background: transparent;
    border-color: transparent;
    color: #fff;
    text-decoration: underline;
}

/* Paginile de întrebări frecvente (/intrebari-frecvente, /<categorie>/faq). Caseta de sus are
   doar tente semitransparente, gândite peste fundalul deschis al pasiunii: pe negru ieșea
   text închis pe negru. Primește fond alb solid (tentele rămân deasupra). Titlurile care stau
   direct pe fundal devin albe. `body.page-bg …`: stilurile de bază sunt inline, după skin. */
body.page-bg .shop-faq-hero {
    background-color: #fff;
}
body.page-bg .shop-faq-section > h2,
body.page-bg .shop-faq-related h2 {
    color: #fff;
}
body.page-bg .shop-faq-count { color: rgba(255, 255, 255, .7); }
body.page-bg .shop-faq-count b { color: #ff51ad; }