/* ========================================
   🖤 JAPEBO THEMES - BLACK WEEK
   Mørkt tema. Palette + sæson-elementer.
   Al fælles styling ligger i base.css.
   Topbanneret (#black-friday-banner) rendres
   af plugin'et og styres af black-week.js.
   ======================================== */
:root {
    /* Primære farver */
    --theme-primary: #f4ce51;
    /* Black Week Yellow */
    --theme-primary-hover: #e3bc30;
    --theme-primary-text: #000000;

    /* Baggrundsfarver */
    --theme-bg-main: #222529;
    --theme-bg-secondary: #1a1c1f;
    --theme-bg-box: #2a2a2a;
    --theme-bg-input: #1d1d1f;
    --theme-bg-overlay: rgba(0, 0, 0, 0.75);

    /* Tekstfarver */
    --theme-text: #ffffff;
    --theme-text-light: #cccccc;
    --theme-text-muted: #aaaaaa;
    --theme-text-lighter: #eeeeee;
    --theme-text-lightest: #dddddd;

    /* Border og divider farver */
    --theme-border: #444444;
    --theme-border-light: #333333;
    --theme-border-lighter: #2b2b2d;

    /* Special farver.
       Base.css bruger --theme-success til købsknapper (produktside, sticky,
       minikurv, mersalg). De skal være gule som alle andre knapper i temaet. */
    --theme-success: #f4ce51;
    --theme-success-hover: #e3bc30;
    --theme-focus: #f4ce51;
    --theme-link: #00ff99;
    --theme-link-hover: #ffffff;
    --theme-link-alt: #58b4ff;

    /* Ekstra baggrundsfarver */
    --theme-bg-sticky: #41444a;
    --theme-bg-mobile: #111;
    --theme-bg-mobile-input: #222;
    --theme-bg-quantity: #1a1a1a;

    /* Ekstra border farver */
    --theme-border-sticky: #2c2c2c;

    /* Shadows og effects */
    --theme-shadow: rgba(0, 0, 0, 0.4);
    --theme-shadow-light: rgba(0, 255, 174, 0.1);

    /* Header-baggrund (bruges af base.css) */
    --theme-header-bg: var(--theme-bg-main);
    /* Mørke varianter af basens checkout-accenter (ellers lys Summer-mint) */
    --theme-table-accent: #1a1c1f;
    --theme-shipping-bg: #1d1d1f;
    /* Betalingsmetodernes beskrivelsesboks (ellers hvid-på-hvid) */
    --theme-payment-box-bg: #1d1d1f;
    /* Tekstfarve på købsknappen: sort tekst på gul knap */
    --theme-success-text: var(--theme-primary-text);
}

/* Base.css giver disse knapper fast temaets tekstfarve (her hvid) i stedet
   for --theme-success-text — hvid på gul er ulæseligt. */
.woocommerce-mini-cart__buttons .button,
.woocommerce-mini-cart__buttons a.button,
.ux-mini-cart-cross-sells__list-item .button,
.sticky-add-to-cart .single_add_to_cart_button.button {
    color: var(--theme-primary-text) !important;
}

/* ========================================
   🃏 MØRKE PRODUKTKORT (3 SUBTILE VARIANTER)
   ======================================== */
.product-small.col:nth-child(3n+1) .col-inner,
.product-small.col:nth-child(3n+1) .product-small {
    background-color: #2a2a2a !important;
    border: 1px solid #444444 !important;
    border-radius: 12px;
}

.product-small.col:nth-child(3n+2) .col-inner,
.product-small.col:nth-child(3n+2) .product-small {
    background-color: #26262b !important;
    border: 1px solid #3f3f4a !important;
    border-radius: 12px;
}

.product-small.col:nth-child(3n) .col-inner,
.product-small.col:nth-child(3n) .product-small {
    background-color: #2b2a25 !important;
    border: 1px solid #4a4530 !important;
    border-radius: 12px;
}

.product-small.col .col-inner,
.product-small.col .product-small {
    overflow: hidden !important;
    border-radius: 12px !important;
}

.product-small.col .box-image,
.product-small.col .box-image img {
    overflow: hidden !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.product-small.col .col-inner {
    overflow: hidden;
}

.product-small.col .box-text.box-text-products,
.product-small.col .product-small .box-text,
.product-small.box .box-text.box-text-products {
    background-color: transparent !important;
    color: var(--theme-text) !important;
}

ul.products li.product .box-text-products .woocommerce-loop-product__title,
ul.products li.product .box-text-products .price,
ul.products li.product .box-text-products .product-sku,
ul.products li.product .box-text-products a,
ul.products li.product .box-text-products p,
ul.products li.product .box-text-products span,
.product-small.box .box-text.box-text-products,
.product-small.box .box-text.box-text-products * {
    color: var(--theme-text) !important;
}

/* ========================================
   🌑 MØRK HEADER + HVIDT LOGO
   ======================================== */
.header-wrapper,
.header-main,
#masthead,
.header-bottom,
.header-top {
    background-color: var(--theme-bg-main) !important;
    color: var(--theme-text) !important;
}

/* Gør logoet hvidt uanset original farve (virker på alle shops).
   Flatsome lægger klassen på selve <img>-elementet (img.header-logo),
   men på nogle shops ligger den på en wrapper — dæk begge dele. */
img.header-logo,
img.header-logo-dark,
.header-logo img,
.header-logo-dark img,
.footer-logo img,
img.footer-logo {
    filter: brightness(0) invert(1);
}

/* ========================================
   🌑 MØRKE DROPDOWNS OG SØGEFORSLAG
   ======================================== */
.dgwt-wcas-suggestions-wrapp {
    background-color: var(--theme-bg-secondary) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--theme-text) !important;
}

.dgwt-wcas-suggestion {
    background-color: var(--theme-bg-secondary) !important;
    color: var(--theme-text) !important;
}

.sub-menu.nav-dropdown,
.account-dropdown,
.account-dropdown ul,
.account-item .nav-dropdown {
    background-color: var(--theme-bg-main) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--theme-text) !important;
}

.sub-menu.nav-dropdown li:hover>a,
.account-dropdown li a:hover,
.account-item .nav-dropdown li:hover>a {
    background-color: var(--theme-border-light) !important;
    color: var(--theme-text) !important;
}

#cart-popup a:hover {
    color: var(--theme-text-lightest) !important;
}

/* ========================================
   🌑 MØRK CHECKOUT
   ======================================== */
body.woocommerce-checkout,
.woocommerce form.checkout,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-payment,
.woocommerce-checkout .shop_table,
.woocommerce-checkout .form-row,
.woocommerce-checkout .input-text,
.woocommerce-checkout .select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-dropdown,
.woocommerce-checkout .select2-results__option,
.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
    background-color: var(--theme-bg-main) !important;
    color: var(--theme-text) !important;
}

.page-checkout-simple,
.page-checkout-simple .container,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    background-color: var(--theme-bg-main) !important;
    color: var(--theme-text) !important;
}

.shipping__list_item {
    background-color: var(--theme-bg-input);
    border: 1px solid var(--theme-border-lighter);
    border-radius: 6px;
    padding: 1.2rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease;
}

iframe[id^="zoid-paypal-card"],
iframe[name*="ppcp"] {
    background-color: var(--theme-bg-box) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 4px !important;
}

/* ========================================
   🖤 SORTE IKONER PÅ GULE KNAPPER
   ======================================== */
a.primary.is-small.mb-0.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.is-flat::before,
button.single_add_to_cart_button.button.alt::before {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' class='size-6' viewBox='0 0 24 24'><path d='M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.75 3.75 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60 60 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.9 60.9 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25zm1.5 18a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m12.75 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0'/></svg>") !important;
    width: 24px !important;
    height: 24px !important;
    background-size: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 0.25em !important;
    content: "" !important;
}

a.primary.is-small.mb-0.button.product_type_variable.add_to_cart_button.is-flat::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 24 24%27><path fill-rule=%27evenodd%27 d=%27M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5M2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5z%27/></svg>") !important;
}

/* ========================================
   🏷️ TILBUDS-BADGES (Discount Rules)
   ======================================== */
span.onsale,
span.onsale[data-dr-rule-id],
span.dr_badge_percentage,
span.dr_badge_amount {
    background-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
    font-weight: 700;
    font-size: 0.9em;
    border-radius: 50px;
    padding: 0.5em 1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
}

/* ========================================
   📣 BLACK WEEK-TOPBANNER
   (HTML rendres af plugin'et; layoutkompensation
   klares af black-week.js, som måler bannerhøjden)
   ======================================== */
#black-friday-banner {
    background: var(--theme-primary);
    color: var(--theme-primary-text);
    font-size: 15px;
    padding: 10px 16px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

#black-friday-banner .container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    min-height: 24px;
}

#black-friday-banner .bf-message {
    display: none;
    animation: bf-fade 0.5s ease-in-out;
}

#black-friday-banner .bf-message.active {
    display: inline;
}

#black-friday-banner .bf-message-desktop {
    display: none;
}

@media (min-width: 769px) {
    #black-friday-banner .bf-message {
        display: none !important;
    }

    #black-friday-banner .bf-message-desktop {
        display: inline;
    }
}

@media (max-width: 768px) {
    #black-friday-banner {
        font-size: 14px;
        padding: 9px 12px;
    }

    #black-friday-banner .container {
        padding: 0 20px;
        min-height: 22px;
    }

    #black-friday-banner .bf-message {
        font-weight: 700;
    }

    #black-friday-banner .bf-message-desktop {
        display: none !important;
    }
}

@keyframes bf-fade {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Kupon-kode-chip i banneret (bruges hvis en besked indeholder <span class="code">) */
#black-friday-banner .code {
    color: #000;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "Courier New", monospace;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ========================================
   📣 DYNAMISK BANNER - BLACK WEEK-ACCENTER
   ======================================== */
:root {
    --theme-banner-bg: linear-gradient(160deg, #0d0d0f 0%, #26262b 100%);
    --theme-banner-text: #ffffff;
    --theme-banner-pattern: none;
    --theme-banner-pattern-opacity: 0;
    --theme-banner-button-bg: #f4ce51;
    --theme-banner-button-bg-hover: #e3bc30;
    --theme-banner-button-text: #000000;
}

/* ========================================
   🔎 HELLO RETAIL - DARK MODE
   Søgeoverlayet (hr-*) og dets filtre (aw-*)
   har hardcodet lys baggrund og mørkegrå
   tekst (rgb(77,79,92)) — begge skal vendes,
   ellers står hvid tekst på lys flade.
   ======================================== */

/* Selve overlayets flade */
.hr-overlay-search {
    background-color: var(--theme-bg-main) !important;
}

.hr-overlay-search .hr-close-btn {
    background-color: var(--theme-bg-box) !important;
    color: var(--theme-text) !important;
}

/* Overskrifter og brødtekst */
.hr-content-header,
.hr-products-header,
.hr-products-subheader,
.hr-content-text,
.hr-title,
.hr-subtitle,
#hello-retail-frontpage h1,
#hello-retail-frontpage h2,
#hello-retail-frontpage h3,
#hello-retail-frontpage h4,
#hello-retail-frontpage p {
    color: var(--theme-text) !important;
}

/* Filtre og sortering (aw-* fra samme leverandør) */
.aw-filter__single-wrapper,
.aw-filter__hierarchies-wrapper,
.aw-filter__price-wrapper {
    background-color: var(--theme-bg-box) !important;
    border-color: var(--theme-border) !important;
}

.aw-filter__heading,
.aw-filter-range-min,
.aw-filter-range-max,
.aw-range-slider-seperator,
.aw-full-search-results__filter-wrapper,
[class^="aw-filter"] label,
[class^="aw-filter"] span {
    color: var(--theme-text) !important;
}

/* ========================================
   🟨 KATEGORIKNAPPER (brand-sider, fx Phonak)
   Base giver dem sekundær flade + hvid tekst;
   i Black Week er de gule som alle andre knapper.
   ======================================== */
.category-page-row .product-category>.col-inner {
    background-color: var(--theme-primary) !important;
    transition: background-color 0.2s ease;
}

.category-page-row .product-category>.col-inner:hover {
    background-color: var(--theme-primary-hover) !important;
}

.category-page-row .product-category .box-text,
.category-page-row .product-category .box-text *,
.category-page-row .product-category h5,
.category-page-row .product-category .header-title,
.category-page-row .product-category svg {
    color: var(--theme-primary-text) !important;
}

/* ========================================
   🔢 ANTAL-KNAPPER (+/−) OG SEKUNDÆRE KNAPPER
   Flatsomes .button.is-form er lysegrå (#f9f9f9 / #666)
   — på produktside, sticky-bar, kurv og minikurv.
   ======================================== */
.button.is-form,
input.button.is-form,
.ux-quantity__button {
    background-color: var(--theme-bg-box) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    text-shadow: none !important;
}

.button.is-form:hover,
input.button.is-form:hover,
.ux-quantity__button:hover {
    background-color: var(--theme-border-light) !important;
    color: var(--theme-primary) !important;
}

/* Kuponknappen i kurven følger minikurv og checkout: gul */
.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart .coupon .button.is-form {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

.woocommerce-cart button[name="apply_coupon"]:hover,
.woocommerce-cart .coupon .button.is-form:hover {
    background-color: var(--theme-primary-hover) !important;
    color: var(--theme-primary-text) !important;
}

/* Radioknapper og afkrydsningsfelter i temaets gule */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--theme-primary);
}

/* ========================================
   🔎 SØGEKNAP
   Base farver ikonet med --theme-text (her hvid) —
   hvid på gul knap.
   ======================================== */
/* Også søgefelter uden for headeren (fx på 404-siden), hvor knappen
   ellers står hvid med hvidt ikon. */
.dgwt-wcas-search-submit {
    background-color: var(--theme-primary) !important;
}

.dgwt-wcas-search-submit:hover {
    background-color: var(--theme-primary-hover) !important;
}

.dgwt-wcas-search-submit,
.dgwt-wcas-search-submit svg,
.dgwt-wcas-search-submit path {
    color: var(--theme-primary-text) !important;
    fill: var(--theme-primary-text) !important;
}

/* ========================================
   ⭐ TRUSTPILOT-BOKS PÅ PRODUKTSIDEN
   Child-temaet giver den shoppens blå (#0088cc),
   og temaets gule link står ulæseligt på blåt.
   ======================================== */
.product-after-tabs.manuel-trustpilot {
    background-color: var(--theme-bg-box) !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text) !important;
}

/* ========================================
   🧾 CHECKOUT-KUPON (child-temaet)
   Child-temaet giver .coupon-rammen hvid flade, mens
   feltets tekst følger temaet — hvid på hvid.
   ======================================== */
.page-checkout-simple #woocommerce-checkout-form-coupon .coupon,
.page-checkout-simple form.checkout_coupon .coupon {
    background: var(--theme-bg-input) !important;
    border-color: var(--theme-border) !important;
}

.page-checkout-simple form.checkout_coupon .coupon input::placeholder {
    color: var(--theme-text-muted) !important;
}

/* ========================================
   👤 MY ACCOUNT (child-temaets my-account.css)
   Den har faste lyse flader, der ikke følger
   --wc-acct-variablerne: tabeloverskrifter,
   adressekort, adressefelter og hover-flader.
   ======================================== */

/* Hover i menuen og på dashboard-links (basen bruger Sommer-mint) */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover,
body.woocommerce-account .dashboard-links li a:hover,
body.woocommerce-account .show-password-input:hover,
body.woocommerce-account .show-password-input:focus {
    background: var(--theme-border-light) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    box-shadow: none !important;
}

/* Dashboard-links */
body.woocommerce-account .dashboard-links li a,
body.woocommerce-account .dashboard-links li.is-active a {
    background: var(--theme-bg-box) !important;
    border-color: var(--theme-border) !important;
}

/* Tabeloverskrifter: ordreliste og ordrevisning */
body.woocommerce-account .shop_table thead th,
body.woocommerce-account .order_details thead th {
    background: var(--theme-table-accent) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border-light) !important;
}

/* Adressekort */
body.woocommerce-account .woocommerce-Address,
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
    background: var(--theme-bg-box) !important;
    border-color: var(--theme-border) !important;
}

/* Adresseformularen (kontodetaljer har sin egen regel i basen) */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Input,
body.woocommerce-account .woocommerce-MyAccount-content .input-text,
body.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
body.woocommerce-account .woocommerce-MyAccount-content select,
body.woocommerce-account .woocommerce-MyAccount-content textarea,
body.woocommerce-account .select2-container .select2-selection--single {
    background: var(--theme-bg-input) !important;
    color: var(--theme-text) !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content input::placeholder,
body.woocommerce-account .woocommerce-MyAccount-content textarea::placeholder {
    color: var(--theme-text-muted) !important;
    -webkit-text-fill-color: var(--theme-text-muted) !important;
}

body.woocommerce-account .select2-container .select2-selection__rendered {
    color: var(--theme-text) !important;
}

/* Fokusring i gul i stedet for basens turkis */
body.woocommerce-account .woocommerce-MyAccount-content input:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus,
body.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
body.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single,
body.woocommerce-account .select2-container--default.select2-container--focus .select2-selection--single {
    box-shadow: 0 0 0 4px rgba(244, 206, 81, 0.18) !important;
}

/* ========================================
   🔎 LYST SØGEFELT
   Et mørkt felt i den mørke header forsvandt
   (feedback 27/9). Hvidt felt med mørk tekst
   ved siden af den gule knap — som shoppens
   normale udseende.
   ======================================== */
.header .searchform,
.header .search-field,
.header .header-search-form input[type="search"],
.header .searchform input[type="search"],
.dgwt-wcas-search-wrapp input[type="search"],
.dgwt-wcas-search-wrapp input.dgwt-wcas-search-input {
    background-color: #ffffff !important;
    color: #1a1c1f !important;
    -webkit-text-fill-color: #1a1c1f !important;
    border-color: #ffffff !important;
}

.header .search-field::placeholder,
.header .searchform input[type="search"]::placeholder,
.dgwt-wcas-search-wrapp input[type="search"]::placeholder {
    color: #6b6b6b !important;
    -webkit-text-fill-color: #6b6b6b !important;
}

/* Flatsomes egen søgeknap (shops uden FiboSearch, fx japebo.dk).
   Hello Retails panel-CSS farver den blå med
   .searchform div.flex-col button.submit-button — én klasse mere vinder. */
.header .searchform div.flex-col button.submit-button,
.header .searchform .ux-search-submit {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

.header .searchform div.flex-col button.submit-button:hover,
.header .searchform .ux-search-submit:hover {
    background-color: var(--theme-primary-hover) !important;
}

/* ========================================
   🧮 FILTRE I SIDEBJÆLKEN (FiboFilters)
   Child-temaet giver #shop-sidebar hvid flade,
   mens filtrenes overskrifter følger temaets
   hvide tekst — hvid på hvid. FiboFilters' egne
   farver (grøn skyder, "show all") sættes som
   variabler på body; html body vinder over dem.
   ======================================== */
html body {
    --fibofilters--colors--base: var(--theme-primary);
    --fibofilters--colors--link: var(--theme-primary);
    --fibofilters--colors-input-border: var(--theme-border);
    --fibofilters-skel-bg: var(--theme-bg-box);
    --fibofilters-skel-highlight: var(--theme-border-light);
}

#shop-sidebar {
    background-color: var(--theme-bg-box) !important;
    border: 1px solid var(--theme-border) !important;
}

.fibofilters-item__control,
.fibofilters-applied-filters .fibofilters-applied-filter {
    background-color: var(--theme-bg-input) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

[class*="fibofilters"] input[type="search"],
[class*="fibofilters"] input[type="text"],
[class*="fibofilters"] input[type="number"] {
    background-color: var(--theme-bg-input) !important;
    color: var(--theme-text) !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

[class*="fibofilters"] input::placeholder {
    color: var(--theme-text-muted) !important;
    -webkit-text-fill-color: var(--theme-text-muted) !important;
}

.fibofilters-range__label,
.fibofilters-block__headline-box-inner {
    color: var(--theme-text) !important;
}

.fibofilters-item__label,
.fibofilters-item__label * {
    color: var(--theme-text) !important;
}

.fibofilters-item__counter {
    color: var(--theme-text-muted) !important;
}

/* Den svævende "min."/"max."-etiket skærer igennem feltets kant
   med en flade i feltets farve — ellers et hvidt mærke. */
.fibofilters-input__label {
    background-color: var(--theme-bg-box) !important;
    color: var(--theme-text-light) !important;
}

/* Mobilens "Alle filtre"-panel og filterchippenes popover er hvide
   flader med temaets hvide tekst — helt ulæselige. Samme flade som
   sidebjælken, så "min."/"max."-etiketterne passer. */
.fibofilters-mobile-overlay,
.fibofilters-mobile-overlay__header,
.fibofilters-mobile-overlay__footer,
.fibofilters-popover {
    background-color: var(--theme-bg-box) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

.fibofilters-mobile-overlay__header-close {
    background: transparent !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

.fibofilters-mobile-overlay__footer .fibofilters-button,
.fibofilters-popover__footer .fibofilters-button {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

/* Filterchippene over produkterne ("Søg", "Produkttype", "Pris",
   "Alle filtre") er hvide bokse på den mørke side. */
.fibofilters-filter-button {
    background-color: var(--theme-bg-box) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

.fibofilters-filter-button svg,
.fibofilters-filter-button svg * {
    color: var(--theme-text) !important;
    stroke: currentColor;
}

/* ========================================
   🛒 KORTENES KNAP PÅ VARIANT-VARER
   "Vælg"/"Read more" på variantvarer mangler
   .add_to_cart_button, så basens sorte tekst
   rammer dem ikke — hvid på gul (ses på mobil,
   hvor knappen altid vises).
   ======================================== */
/* Samme vægt som kortenes egen hvid-tekst-regel (.product-small.box
   .box-text.box-text-products *) plus knappen, så denne vinder. */
.product-small.box .box-text.box-text-products .add-to-cart-button a.button,
.product-small.box .box-text.box-text-products .add-to-cart-button a.button:hover {
    color: var(--theme-primary-text) !important;
}

/* Ordrelisten på mobil: child-temaet gør rækkerne til hvide kort
   (@media max-width 768px, #fff !important). */
@media (max-width: 768px) {
    body.woocommerce-account .shop_table.my_account_orders tr {
        background: var(--theme-bg-box) !important;
        border-color: var(--theme-border) !important;
    }
}

/* ========================================
   ⚠️ FEJLBESKEDER OG UGYLDIGE FELTER
   Flatsomes fejlrød (#b20000) står med 2,2 i
   kontrast på den mørke flade. Samme lyse røde
   som Black Weeks kortfelter (colorDanger i
   registry). Kun i beskeder og formularer, så
   røde flader med hvid tekst (.bg-alert-color)
   ikke bliver lysere.
   ======================================== */
.message-wrapper,
.woocommerce-notices-wrapper,
form,
.woocommerce-invalid {
    --fs-color-alert: #ff6b6b;
}

/* Basen tvinger felternes kant grå med !important, så et tomt
   påkrævet felt i kassen ikke blev markeret rødt. */
.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid .select2-selection {
    border-color: #ff6b6b !important;
}

/* Kuponfejlen i kassens kuponboks er mørkerød (#b20000) på næsten sort. */
.coupon-error-notice,
#coupon-error-notice {
    color: #ff6b6b !important;
}

/* ========================================
   🔑 LOGIN, OPRETTELSE OG GLEMT ADGANGSKODE
   (kun synligt for logget-ud kunder)
   Child-temaet tvinger felterne hvide og
   knapteksten hvid — hvid på hvid i felterne,
   hvid på gul på knapperne.
   ======================================== */
body.woocommerce-account .woocommerce-form-login input.input-text,
body.woocommerce-account .woocommerce-form-login input[type="text"],
body.woocommerce-account .woocommerce-form-login input[type="email"],
body.woocommerce-account .woocommerce-form-login input[type="password"],
body.woocommerce-account .woocommerce-form-register input.input-text,
body.woocommerce-account .woocommerce-form-register input[type="text"],
body.woocommerce-account .woocommerce-form-register input[type="email"],
body.woocommerce-account .woocommerce-form-register input[type="password"],
body.woocommerce-account .woocommerce-ResetPassword input.input-text,
body.woocommerce-account .woocommerce-ResetPassword input[type="text"],
body.woocommerce-account .woocommerce-ResetPassword input[type="password"] {
    background: var(--theme-bg-input) !important;
    color: var(--theme-text) !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

body.woocommerce-account .woocommerce-form-login .button,
body.woocommerce-account .woocommerce-form-register .button,
body.woocommerce-account .woocommerce-ResetPassword .button,
.woocommerce-checkout .woocommerce-form-login .button {
    background: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
    box-shadow: none !important;
}

body.woocommerce-account .woocommerce-form-login .button:hover,
body.woocommerce-account .woocommerce-form-register .button:hover,
body.woocommerce-account .woocommerce-ResetPassword .button:hover,
.woocommerce-checkout .woocommerce-form-login .button:hover {
    background: var(--theme-primary-hover) !important;
    color: var(--theme-primary-text) !important;
}

/* ========================================
   🍪 COOKIE-BANNER (CookieYes)
   Basen giver alle p/li/overskrifter temaets
   tekstfarve med !important — i Black Week
   hvid, så banneret på sin hvide flade blev
   ulæseligt (kunden kan ikke se, hvad der
   samtykkes til). Giv CookieYes dets egne
   farver tilbage: #212121 og dets blå links.
   ======================================== */
.cky-consent-container,
.cky-consent-container p,
.cky-consent-container li,
.cky-consent-container h1,
.cky-consent-container h2,
.cky-consent-container h3,
.cky-consent-container h4,
.cky-consent-container h5,
.cky-consent-container h6,
.cky-modal,
.cky-modal p,
.cky-modal li,
.cky-modal h1,
.cky-modal h2,
.cky-modal h3,
.cky-modal h4,
.cky-modal h5,
.cky-modal h6 {
    color: #212121 !important;
}

/* :not(#cky) giver ID-vægt, så reglen slår basens globale linkregel,
   hvis lange :not()-kæde ellers vinder. */
.cky-consent-container a:not(#cky),
.cky-modal a:not(#cky) {
    color: #1863dc !important;
}

/* ========================================
   📧 NYHEDSBREV MED FAST HVID TEKST
   På fx japebo.dk står overskriften i en div
   med inline color:#FFFFFF (lavet til den
   blå/grønne flade) — hvid på temaets gule.
   Basen dækker kun p/h/span/label.
   ======================================== */
.newsletter-row .col-inner .text,
.newsletter-row .col-inner .text div,
.newsletter-row .col-inner .text i {
    color: var(--theme-primary-text) !important;
}

/* ========================================
   ⭐ TRUSTPILOT-WIDGET I DEN GULE TOPBJÆLKE
   Widgetten er indlejret med data-theme="dark"
   (hvid tekst, lavet til shoppens mørke bjælke).
   Teksten ligger i Trustpilots iframe og kan
   ikke farves, så den får en mørk flade bag sig.
   ======================================== */
.header-top .trustpilot-widget {
    background-color: var(--theme-bg-main);
    border-radius: 6px;
    padding: 2px 8px;
}

/* ========================================
   ✉️ KLAVIYO-FORMULARER (popup + indlejrede)
   Samme problem som cookie-banneret: basens
   p/li/overskrifter bliver hvide oven på
   Klaviyos egen lyse flade (samtykketeksten
   under tilmeldingsknappen forsvandt). Lad
   teksten arve den farve, Klaviyo selv giver
   tekstblokken, så formularens design i
   Klaviyo bestemmer.
   ======================================== */
.klaviyo-form p,
.klaviyo-form li,
.klaviyo-form h1,
.klaviyo-form h2,
.klaviyo-form h3,
.klaviyo-form h4,
.klaviyo-form h5,
.klaviyo-form h6 {
    color: inherit !important;
}

/* Flatsomes dæmpede småtekst (#666) i kurven: "(inkl. moms)" og
   antallet på mobil — 2,7 i kontrast på den mørke flade. */
small.includes_tax,
.includes_tax,
.mobile-product-price__qty {
    color: var(--theme-text-muted) !important;
}

/* Trustlys logo er sort tekst i SVG'en — usynligt på den mørke
   betalingsboks. Giv det en lille hvid plade. */
#payment .payment_method_ppcp-trustly > label img {
    background: #fff;
    border-radius: 4px;
    padding: 2px 4px;
}

/* Sticky-bjælken på variantvarer viser "Vælg muligheder" i stedet for
   købsknappen — Flatsomes grønne .secondary. */
.sticky-add-to-cart .sticky-add-to-cart-select-options-button,
.sticky-add-to-cart .sticky-add-to-cart-select-options-button:hover {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

/* Søgeforslag (FiboSearch): den ikke-fremhævede del af forslaget og
   "KATEGORIER"/"PRODUKTER" er #444 på næsten sort. */
.dgwt-wcas-suggestion .dgwt-wcas-st,
.dgwt-wcas-suggestion-headline .dgwt-wcas-st {
    color: var(--theme-text-light) !important;
}

/* Mobilsøgningens tilbagepil er en lysegrå boks med hvid pil. */
.dgwt-wcas-om-return {
    background: var(--theme-bg-main) !important;
}

/* Søgeknappen i mobilmenuen: FiboSearch tegner en grå "næse" til
   venstre for den gule knap og mangler de runde hjørner. */
.dgwt-wcas-search-submit::before {
    border-right-color: var(--theme-primary) !important;
}

#main-menu .dgwt-wcas-search-submit {
    border-radius: 0 8px 8px 0 !important;
}

/* Variantvælgerens pil er mørkegrå (#333) på det mørke felt. */
table.variations select,
.woocommerce-ordering select {
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Lys kant (#ececec) øverst på produktfanerne. */
.woocommerce-tabs {
    border-top-color: var(--theme-border) !important;
}

/* Billed-lightboxen er kun 60 % mørk, så header og sticky-bjælke
   skinner igennem. */
.pswp__bg {
    background: rgba(0, 0, 0, .9) !important;
}

/* Tilbudsmærket: child-temaet giver mærkets beholder sidens grønne
   farve, som stikker frem bag den gule "-50 %"-pille. */
.badge-container,
.badge-container .badge-inner.on-sale {
    background-color: transparent !important;
}

/* Hello Retails søgeoverlay: lukkeknappens X er næsten sort på den
   mørke knap. */
.hr-overlay-search .hr-close-btn svg,
.hr-overlay-search .hr-close-btn svg * {
    fill: var(--theme-text) !important;
    stroke: var(--theme-text) !important;
}

/* Trustpilot-boksen på produktsiden: hvide omridsstjerner ligner
   "0 stjerner" ved siden af 4,5. */
.manuel-trustpilot .trustpilot-icons svg {
    color: var(--theme-primary);
    fill: var(--theme-primary);
}

/* ========================================
   🔗 FLATSOMES GRØNNE LINKFARVE
   Basens linkregel springer links i ethvert
   <header>/<footer> over — også dem inde i
   indholdet (handelsbetingelsernes brødtekst,
   blogindlæggenes kategori/dato/forfatter).
   Dér slår Flatsomes grønne linkfarve og sorte
   hover igennem. html:root vinder over
   Flatsomes egen :root.
   ======================================== */
html:root {
    --fs-experimental-link-color: var(--theme-primary);
    --fs-experimental-link-color-hover: var(--theme-primary-hover);
}

.entry-content header a,
.entry-header a,
.entry-meta a,
.entry-category a {
    color: var(--theme-primary) !important;
}

.entry-content header a:hover,
.entry-header a:hover,
.entry-meta a:hover,
.entry-category a:hover {
    color: var(--theme-primary-hover) !important;
}

/* ========================================
   🟩 ØVRIGE GRØNNE RESTER (Flatsomes primær-
   og succesfarve, som temaet ikke ændrer)
   ======================================== */

/* Indlæsningshjulet i kurv, minikurv og kasse */
.loading-spin,
.blockUI.blockOverlay::before,
.processing::before {
    border-left-color: var(--theme-primary) !important;
}

/* "Cart updated." / "… removed. Undo?" — grøn tekst og flueben */
.woocommerce-message .success-color,
.woocommerce-message .message-container,
.woocommerce-message .icon-checkmark {
    color: var(--theme-text) !important;
}

.woocommerce-message .icon-checkmark {
    color: var(--theme-primary) !important;
}

/* Blogindlæggenes runde datomærke */
.badge.post-date .badge-inner {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

.badge.post-date .badge-inner * {
    color: var(--theme-primary-text) !important;
}

/* Pagineringens aktive side */
.nav-pagination > li > .current,
.page-numbers.nav-pagination .current {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

/* Sidebyggerens bannere har Flatsomes grønne som bundfarve bag
   billedet — ses mens billedet indlæses og i kanterne. Bannere med
   egen farve (via #banner-id) vinder stadig.
   flatsome.css loads after this file and sets .banner to the primary
   colour, so a bare .banner loses; html body lifts it above that. */
html body .banner {
    background-color: var(--theme-bg-main);
}

/* Fluebens-lister fra sidebyggeren */
ul li.bullet-checkmark::before,
ul li.bullet-arrow::before,
ul li.bullet-star::before {
    color: var(--theme-primary) !important;
}

/* Grøn fokusring på "Login / Register" og andre primærknapper */
.primary:focus-visible,
.button:focus-visible,
button[type="submit"]:focus-visible {
    outline-color: var(--theme-focus) !important;
}

/* ========================================
   ⬆️ TILBAGE TIL TOP
   Basen gør knappers ikon sort — på den
   gennemsigtige knap usynligt, og hover er
   Flatsomes grønne. Gul knap med sort pil.
   ======================================== */
.back-to-top.button {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

.back-to-top.button:hover {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
}

/* ========================================
   🟨 KNAPPER I INDHOLD OG WIDGETS
   Flatsomes .button i brødtekst er grøn,
   .button.secondary sort, WordPress' søgeblok
   grå, kommentarknappen grøn. Alle knapper er
   gule i Black Week. .white-knapper (hvid
   kontur på billeder) er bevidst lyse.
   ======================================== */
#content a.button:not(.white):not(.is-outline):not(.is-link),
#content .button.secondary:not(.white):not(.is-outline),
#respond input#submit,
.wp-block-search__button,
.wbte-ewb-btn {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

#content a.button:not(.white):not(.is-outline):not(.is-link):hover,
#content .button.secondary:not(.white):not(.is-outline):hover,
#respond input#submit:hover,
.wp-block-search__button:hover,
.wbte-ewb-btn:hover {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
    color: var(--theme-primary-text) !important;
}

/* ========================================
   🏷️ LABELS UDEN FOR WOOCOMMERCE
   Flatsomes label-farve er #222 — usynlig på
   den mørke flade (fortrydelsesformularen,
   kommentarfeltet, blogsidens søgeblok).
   FiboFilters' "min."/"max." har sin egen
   dæmpede farve ovenfor.
   ======================================== */
#content label:not([class*="fibofilters"]),
.widget label:not([class*="fibofilters"]),
#respond label,
.wp-block-search__label {
    color: var(--theme-text) !important;
}

/* Tabeller i indhold: Flatsomes grå (#666) og lyse skillelinjer */
#content .entry-content td,
#content .entry-content th {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

/* ========================================
   ⬜ LYSE FLADER FRA SIDEBYGGEREN
   Basen gør al tekst hvid, så sektioner og
   bokse med lys baggrund bliver hvid på hvid
   (Oticon Verit-tabellen og -kortene, "Real
   power. Real styles.", ReSound-opladning).
   Sektioner uden .dark er lavet til mørk
   tekst — de mister deres flade-farve (et
   evt. baggrundsbillede bevares), og hvide
   inline-bokse bliver temaets kortflade.
   ======================================== */
#content section.section:not(.dark) {
    background-color: transparent !important;
}

#content [style*="background:#fff"],
#content [style*="background: #fff"],
#content [style*="background:#ffffff"],
#content [style*="background: #ffffff"],
#content [style*="background:white"],
#content [style*="background-color:#fff"],
#content [style*="background-color: #fff"],
#content .gallery-box .box-text,
.woocommerce-Tabs-panel [style*="background:#fff"],
.woocommerce-Tabs-panel [style*="background: #fff"],
.woocommerce-Tabs-panel [style*="background-color:#fff"],
.woocommerce-Tabs-panel [style*="background-color: #fff"] {
    background: var(--theme-bg-box) !important;
    border-color: var(--theme-border) !important;
}

/* Indholdets egne mørkegrå tekstfarver (fx color:#555555 i produkters
   kortbeskrivelse) er ulæselige på mørk flade — arv temaets tekst.
   #main dækker både sider og produktsider (de har ingen #content). */
#main [style*="color:#555"],
#main [style*="color: #555"],
#main [style*="color:#333"],
#main [style*="color: #333"],
#main [style*="color:#444"],
#main [style*="color: #444"],
#main [style*="color:#666"],
#main [style*="color: #666"],
#main [style*="color:#000"],
#main [style*="color: #000"] {
    color: inherit !important;
}

/* ========================================
   🛍️ PRODUKTSIDEN
   ======================================== */

/* Variant-swatches: grå tekst/kant og sort "valgt"-markering */
.ux-swatch.ux-swatch--label {
    background-color: var(--theme-bg-input) !important;
    border-color: var(--theme-border) !important;
    box-shadow: none !important;
}

.ux-swatch.ux-swatch--label .ux-swatch__text {
    color: var(--theme-text) !important;
}

.ux-swatch.ux-swatch--label:hover {
    box-shadow: 0 0 0 1px var(--theme-primary) !important;
}

.ux-swatch.ux-swatch--label.selected {
    box-shadow: 0 0 0 2px var(--theme-primary) !important;
}

/* Lys stiplet linje mellem variantrækkerne */
.variations tr {
    border-top-color: var(--theme-border) !important;
}

/* Child-temaets blå rullebjælke under fanerne på mobil */
body.single-product .product-footer .woocommerce-tabs .nav::-webkit-scrollbar-thumb {
    background: var(--theme-primary) !important;
}

/* Basen maler sticky-bjælken, også når den er inaktiv — på mobil
   en tom grå strimmel under footeren. */
.sticky-add-to-cart:not(.sticky-add-to-cart--active) {
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

/* Antalsfeltets lyse kant (#ddd) ved siden af de mørke +/- */
.ux-quantity input.qty {
    border-color: var(--theme-border) !important;
}

/* ========================================
   🧮 FIBOFILTERS: RYD-KNAP OG HOVER
   ======================================== */
.fibofilters-clear-filter-btn {
    background-color: var(--theme-bg-input) !important;
    border: 1px solid var(--theme-border) !important;
}

.fibofilters-clear-filter-btn svg,
.fibofilters-clear-filter-btn svg * {
    stroke: var(--theme-text) !important;
}

.fibofilters-item--checkbox .fibofilters-item__interactive:hover > .fibofilters-item__control,
.fibofilters-item__interactive:focus-visible > .fibofilters-item__control {
    box-shadow: inset 0 0 0 2px var(--theme-primary) !important;
}

/* "Clear" øverst i mobiloverlayet er en hvid knap — den eneste
   ikke-gule handlingsknap i panelet. */
.fibofilters-mobile-overlay__header-clear {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

/* Talfelternes indbyggede op/ned-pile er lyse på det mørke felt */
[class*="fibofilters"] input[type="number"] {
    color-scheme: dark;
}

/* Indlæsningshjulet på en gul knap (fx "Add to cart" på produktkort)
   er hvidt — næsten usynligt på gult. */
.button.loading::after {
    border-left-color: var(--theme-primary-text) !important;
    border-bottom-color: var(--theme-primary-text) !important;
}

/* ========================================
   🔎 SØGNING
   ======================================== */

/* Hello Retail: filterets dropdown er en hvid flade med temaets
   hvide tekst, og tom-tilstandens "0 … matches 0 Products" er
   leverandørens mørkegrå. */
.hr-overlay-search .aw-filter-dropdown-content {
    background-color: var(--theme-bg-box) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

.hr-overlay-search .aw-filter-dropdown-content *,
.hr-products-search-header,
.hr-products-search-header *,
.hr-products-text,
.hr-products-text * {
    color: var(--theme-text) !important;
}

/* FiboSearch: det markerede forslag ses næsten ikke (#333 på #1a1c1f) */
.dgwt-wcas-suggestion-selected {
    box-shadow: inset 3px 0 0 var(--theme-primary) !important;
}

/* ========================================
   🧾 KASSEN
   ======================================== */

/* Land/stat-listen: fremhævet punkt har samme farve som listen, så
   tastaturbrugere ikke kan se, hvor de er. */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-primary) !important;
    color: var(--theme-primary-text) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: var(--theme-border-light) !important;
}

/* ========================================
   🔑 FOKUS I LOGIN- OG OPRETTELSESFELTER
   Temaets mørke felter tvinger kanten grå, og
   basens fokusglød er sommertemaets turkis.
   ======================================== */
body.woocommerce-account .woocommerce-form-login input:focus,
body.woocommerce-account .woocommerce-form-register input:focus,
body.woocommerce-account .woocommerce-ResetPassword input:focus,
body.woocommerce-account .woocommerce-form-login input.input-text:focus,
body.woocommerce-account .woocommerce-form-register input.input-text:focus,
body.woocommerce-account .woocommerce-ResetPassword input.input-text:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 4px rgba(244, 206, 81, 0.18) !important;
}