/* Black Friday 2025 Dark Theme for ITLAGERSALG.DK */
/* Aktivér ved at tilføje: <link href="/components/black-friday-theme.css" rel="stylesheet" /> */

:root {
  --bf-bg-dark: #0d0d0d;
  --bf-bg-card: #1a1a1a;
  --bf-bg-card-hover: #252525;
  --bf-bg-secondary: #1f1f1f;
  --bf-text-primary: #ffffff;
  --bf-text-secondary: #b0b0b0;
  --bf-text-muted: #707070;
  --bf-accent: #fbbf24; /* Gul accent for Black Friday */
  --bf-accent-hover: #f59e0b;
  --bf-green: #156B48;
  --bf-green-light: #70c7b8;
  --bf-border: #333333;
  --bf-red: #dc2626;
  /* Footer bottom section - override via CSS variable */
  --footer-bottom-bg: #0d0d0d;
}

/* ============================================
   GLOBAL OVERRIDES
   ============================================ */

/* Body og HTML */
body {
  background: var(--bf-bg-dark) !important;
  color: var(--bf-text-primary) !important;
}

/* Links */
a {
  color: var(--bf-text-primary) !important;
}

a:hover {
  color: var(--bf-accent) !important;
}

/* =================================================================
   KRITISK: Gronne CTA-knapper - HVID tekst
   Cart sidebar knapper overrides i cart-inc.html
   ================================================================= */

/* ALLE gronne knapper far hvid tekst */
a.tw-bg-itl-green,
a.tw-bg-itl-green:hover,
a.tw-bg-itl-green:active,
a.tw-bg-itl-green:focus,
.tw-bg-itl-green,
.tw-bg-itl-green:hover {
  color: #ffffff !important;
}

/* Breadcrumbs - behold original grøn farve */
.breadcrumb a,
.breadcrumbs a,
.BreadCrumb a,
.BreadCrumb_ProductList a {
  color: var(--bf-green) !important;
}

.breadcrumb a:hover,
.breadcrumbs a:hover,
.BreadCrumb a:hover,
.BreadCrumb_ProductList a:hover {
  color: var(--bf-green-light) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .bighead {
  color: var(--bf-text-primary) !important;
}

/* Kategori-kort overskrifter - lys grøn så den er synlig på mørk baggrund */
li.imgfade h3.tw-text-itl-green,
.imgfade h3.tw-text-itl-green {
  color: var(--bf-green-light) !important;
}

/* ============================================
   HEADER - Allerede mørk, kun små justeringer
   ============================================ */

header {
  background: var(--bf-bg-dark) !important;
  border-bottom: 1px solid var(--bf-border) !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

/* Container baggrund */
.container {
  background: transparent !important;
}

/* Article/main content */
article,
article .content,
.content {
  background: transparent !important;
  color: var(--bf-text-primary) !important;
}

/* ============================================
   CATEGORY CARDS (Forsiden)
   ============================================ */

/* Grå kategori-kort -> mørke kort
   Tailwind bruger tw-bg-[#f1f1f2] som class, skal escapes korrekt */

/* Alle li.imgfade elementer med Tailwind bg classes */
li.imgfade {
  background-color: var(--bf-bg-card) !important;
  background: var(--bf-bg-card) !important;
}

li.imgfade:hover {
  background-color: var(--bf-bg-card-hover) !important;
  background: var(--bf-bg-card-hover) !important;
}

/* Fjern zoom-effekt på billeder i kategori-kort */
li.imgfade:hover img,
.imgfade:hover img {
  transform: none !important;
  -webkit-transform: none !important;
}

/* Også target via attribute selector for f1f1f2 */
[class*="tw-bg-"][class*="f1f1f2"] {
  background-color: var(--bf-bg-card) !important;
  background: var(--bf-bg-card) !important;
}

[class*="tw-bg-"][class*="f1f1f2"]:hover {
  background-color: var(--bf-bg-card-hover) !important;
  background: var(--bf-bg-card-hover) !important;
}

/* Kategori-kort tekst */
li.imgfade h3,
li.imgfade small,
li.imgfade .tw-text-gray-600,
[class*="tw-bg-"][class*="f1f1f2"] h3,
[class*="tw-bg-"][class*="f1f1f2"] small,
[class*="tw-bg-"][class*="f1f1f2"] .tw-text-gray-600 {
  color: var(--bf-text-primary) !important;
}

li.imgfade .tw-text-gray-600,
[class*="tw-bg-"][class*="f1f1f2"] .tw-text-gray-600 {
  color: var(--bf-text-secondary) !important;
}

/* Subcat kategori-kort (underkategorier) */
/* Override original: .SubCats_Categories_UL li > div { background: #fff; padding: 30px 0; border-radius: 10px; } */
.SubCats_Categories_UL li > div,
.subcat {
  background: var(--bf-bg-card) !important;
  background-color: var(--bf-bg-card) !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 15px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.SubCats_Categories_UL li > div:hover,
.subcat:hover {
  background: var(--bf-bg-card-hover) !important;
  background-color: var(--bf-bg-card-hover) !important;
}

/* Subcat billede - hvid baggrund for produktbilleder */
.subcat-image,
.subcat-image.imgfade {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.subcat-image img,
.subcat-image a img {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.subcat-name {
  background: transparent !important;
  padding: 10px 0 0 0 !important;
  text-align: center !important;
}

.subcat-name a {
  color: var(--bf-text-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.subcat-name a:hover {
  color: var(--bf-accent) !important;
}

/* Parent li for subcat cards - fjern hvid border */
.SubCats_Categories_UL li,
ul li:has(.subcat),
li:has(.subcat) {
  background: transparent !important;
  border: none !important;
}

/* Kategori knapper - behold original mørk baggrund med hvid tekst */
[class*="tw-bg-"][class*="222"] {
  background-color: #222222 !important;
  background: #222222 !important;
  color: #ffffff !important;
}

[class*="tw-bg-"][class*="222"]:hover {
  background-color: #333333 !important;
  background: #333333 !important;
  color: #ffffff !important;
}

/* Grønne CTA knapper - behold grøn baggrund med HVID tekst (ikke gul) */
/* Simpel selector [class*="156B48"] matcher tw-bg-[#156B48] */
.tw-bg-itl-green,
[class*="156B48"][class*="tw-bg"],
[style*="background"][style*="156B48"] {
  color: #ffffff !important;
}

.tw-bg-itl-green *,
[class*="156B48"][class*="tw-bg"] *,
[style*="background"][style*="156B48"] * {
  color: #ffffff !important;
}

/* ============================================
   USP SECTION
   ============================================ */

.usp,
.usp li {
  color: var(--bf-accent) !important;
}

/* USP ikoner - gør dem synlige på mørk baggrund (gul/hvid) */
.usp img,
.usp li img,
ul.usp img,
img[src*="_USP.svg"] {
  filter: brightness(0) saturate(100%) invert(83%) sepia(46%) saturate(1000%) hue-rotate(359deg) brightness(103%) contrast(97%) !important;
}

/* USP tekst - gul accent, men IKKE kategori-kort overskrifter */
.usp .tw-text-itl-green,
.usp-section .tw-text-itl-green {
  color: var(--bf-accent) !important;
}

/* Kategori-kort overskrifter - lys grøn så den er synlig på mørk baggrund */
li.imgfade .tw-text-itl-green,
.imgfade .tw-text-itl-green {
  color: var(--bf-green-light) !important;
}

/* ============================================
   PRODUCT CARDS
   ============================================ */

/* Produkt-liste baggrund */
.products,
.product-list,
section.products {
  background: var(--bf-bg-dark) !important;
}

/* Individuelle produkt-kort */
.product,
.webshop-listproduct,
.webshop-productlist .row > div {
  background: var(--bf-bg-card) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 8px !important;
}

.product:hover,
.webshop-listproduct:hover {
  background: var(--bf-bg-card-hover) !important;
  border-color: var(--bf-accent) !important;
}

/* Fjern indre borders i produkt-kort */
.product *,
.webshop-listproduct * {
  border-color: transparent !important;
}

/* Behold kun ydre border på selve kortet */
.product,
.webshop-listproduct {
  border-color: var(--bf-border) !important;
}

.product:hover,
.webshop-listproduct:hover {
  border-color: var(--bf-accent) !important;
}

/* Produktbilleder - tilføj mørk baggrund så hvide JPGs blender bedre */
.product-image,
.product-image img,
.Element_Overlay_Frontpage_SavingsDIV img {
  background: var(--bf-bg-card) !important;
  border-radius: 4px !important;
}

/* Kategori-kort billeder - ingen baggrund */
li.imgfade img,
.imgfade img {
  background: transparent !important;
}

/* Tilbudsmærke overlay - ingen baggrund */
.Element_Overlay_ProdList_SavingsImage_DIV,
.Element_Overlay_ProdList_SavingsIMG {
  background: transparent !important;
}

/* Tilkøbsprodukter billeder - hvid baggrund */
.add-on-product-image,
.add-on-product-image img {
  background: #ffffff !important;
  border-radius: 4px !important;
}

/* Alternativ: tilføj subtle border rundt om produktbilleder */
.product-image a,
.product-image > a > div {
  background: var(--bf-bg-card-hover) !important;
  border-radius: 8px !important;
}

/* Produkt-tekst */
.product h2,
.product h3,
.product a,
.webshop-listproduct h2,
.webshop-listproduct h3,
.webshop-listproduct a,
.ProductName,
.product-name {
  color: var(--bf-text-primary) !important;
}

/* Produkt-pris */
.price,
.ProductPrice,
.product-price,
.webshop-listproduct .price {
  color: var(--bf-accent) !important;
}

/* Før-pris (overstreget) */
.old-price,
.was-price,
.ProductWasPrice {
  color: var(--bf-text-muted) !important;
}

/* ============================================
   PRODUCT PAGE
   ============================================ */

.webshop-productinfo {
  background: var(--bf-bg-dark) !important;
  color: var(--bf-text-primary) !important;
}

.webshop-productinfo h1 {
  color: var(--bf-text-primary) !important;
}

/* Relaterede produkter sektion - fjern baggrund */
.webshop-productinfo .related,
.related {
  background: transparent !important;
  background-color: transparent !important;
}

/* Produktside pris styling - Prices_Custom_DIV */
.Prices_Custom_DIV,
.Prices_Custom_DIV div,
.Prices_Custom_DIV span,
.price-current,
.price-current span,
body.black-friday-theme .Prices_Custom_DIV,
body.black-friday-theme .Prices_Custom_DIV div,
body.black-friday-theme .Prices_Custom_DIV span,
body.black-friday-theme .price-current,
body.black-friday-theme .price-current span {
  color: var(--bf-accent) !important;
}

.price-before,
.Prices_Custom_DIV .price-before,
body.black-friday-theme .price-before {
  color: var(--bf-text-muted) !important;
}

/* Grade/stand styling på produktside */
.grade,
.Grade,
.product-grade-text,
.GradeText,
.grade-label,
body.black-friday-theme .grade,
body.black-friday-theme .Grade,
body.black-friday-theme .product-grade-text,
body.black-friday-theme .GradeText {
  color: var(--bf-text-primary) !important;
}

/* Grade badge på produktside */
.grade-badge,
.GradeBadge,
.stand-badge,
body.black-friday-theme .grade-badge,
body.black-friday-theme .GradeBadge {
  background-color: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

/* USP sektion på produktside - container med USP ikoner (garanti, 14 dage, levering, kabler) */
/* USP ikonerne er SVG filer i div.custom.hidden-xs:
   - Warranty-2years.svg
   - 14-days-trial.svg
   - delivery.svg
   - cables.svg
*/

/* USP container baggrund */
body.black-friday-theme div.custom.hidden-xs {
  background-color: var(--bf-bg-card) !important;
  background: var(--bf-bg-card) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

/* USP ikoner på produktside - gør dem hvide på mørk baggrund */
body.black-friday-theme .webshop-productinfo .custom img,
.webshop-productinfo .custom img {
  filter: brightness(0) invert(1) !important;
}

/* USP tekst ved siden af ikonerne */
body.black-friday-theme div.custom.hidden-xs span {
  color: var(--bf-text-primary) !important;
}

/* Produkt beskrivelse */
.ProductDescription,
.product-description {
  color: var(--bf-text-secondary) !important;
}

/* Miljø/CO2 boks */
.enviroment {
  background: var(--bf-bg-card) !important;
  color: var(--bf-text-primary) !important;
  border: 1px solid var(--bf-border) !important;
}

.enviroment span {
  color: var(--bf-accent) !important;
}

/* Variant labels */
.variants .VariantGroupLabel {
  color: var(--bf-text-primary) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Primær knap (køb) */
.knap,
.buyWrapper,
.ButtonWrapperText,
#confirm-complete-button,
button[type="submit"],
input[type="submit"] {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
  border-color: var(--bf-accent) !important;
}

.knap:hover,
.buyWrapper:hover,
.ButtonWrapperText:hover,
#confirm-complete-button:hover {
  background: var(--bf-accent-hover) !important;
  color: var(--bf-bg-dark) !important;
}

/* Sekundære knapper - se CATEGORY CARDS section */

/* ============================================
   FORMS
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
  background: var(--bf-bg-card) !important;
  color: var(--bf-text-primary) !important;
  border: 1px solid var(--bf-border) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--bf-accent) !important;
  box-shadow: 0 0 5px rgba(251, 191, 36, 0.3) !important;
}

::placeholder {
  color: var(--bf-text-muted) !important;
}

/* ============================================
   HISTORY SECTION
   ============================================ */

.tw-text-gray-600 {
  color: var(--bf-text-secondary) !important;
}

.tw-text-gray-700 {
  color: var(--bf-text-secondary) !important;
}

/* ============================================
   SERVICE/KONTAKT SECTION
   ============================================ */

/* Hvide kort -> mørke kort */
.tw-bg-white {
  background: var(--bf-bg-card) !important;
}

.tw-bg-white:hover {
  background: var(--bf-bg-card-hover) !important;
}

/* ============================================
   FOOTER
   ============================================ */

footer {
  background: var(--bf-bg-dark) !important;
  color: var(--bf-text-primary) !important;
  border-top: 1px solid var(--bf-border) !important;
}

footer a {
  color: var(--bf-text-secondary) !important;
}

footer a:hover {
  color: var(--bf-accent) !important;
}

.credits {
  background: var(--bf-bg-card) !important;
}

/* ============================================
   SIDEBAR / FILTERS
   ============================================ */

.sidebar,
.filter,
.ProductFilter {
  background: var(--bf-bg-card) !important;
  color: var(--bf-text-primary) !important;
}

/* ============================================
   MOBILE MENU (Resmenu)
   ============================================ */

.resmenu {
  background: var(--bf-bg-dark) !important;
}

.resmenu > ul > li {
  background: var(--bf-bg-card) !important;
}

.resmenu #ProductMenu_List > li a {
  color: var(--bf-text-primary) !important;
}

.resmenu .plus {
  color: var(--bf-accent) !important;
}

.resmenu .search input {
  background: var(--bf-bg-card) !important;
  color: var(--bf-text-primary) !important;
  border-color: var(--bf-border) !important;
}

.resmenu .actions a {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

/* ============================================
   CHECKOUT - EXCLUDED FROM BLACK FRIDAY THEME
   /shop/checkout.html bruger standard styling
   ============================================ */

/* ============================================
   MODALS / POPUPS
   ============================================ */

.fancybox-content {
  background: var(--bf-bg-card) !important;
  color: var(--bf-text-primary) !important;
}

.gradepopupwrapper h2 {
  color: var(--bf-text-primary) !important;
}

/* ============================================
   TABLES
   ============================================ */

table {
  background: var(--bf-bg-dark) !important;
  background-color: var(--bf-bg-dark) !important;
  color: var(--bf-text-primary) !important;
}

table th {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--bf-text-primary) !important;
  border-color: var(--bf-border) !important;
}

table td {
  background: transparent !important;
  border-color: var(--bf-border) !important;
}

table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ============================================
   BADGES / LABELS
   ============================================ */

.badge,
.label,
.tag {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

/* Sale/tilbud badge */
.sale-badge,
.discount-badge,
.tilbud {
  background: var(--bf-red) !important;
  color: var(--bf-text-primary) !important;
}

/* ============================================
   SCROLL BARS (Webkit)
   ============================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bf-bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--bf-border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bf-text-muted);
}

/* ============================================
   MISC OVERRIDES
   ============================================ */

/* Grå baggrunde generelt */
.bg-gray-100,
.bg-gray-200,
.tw-bg-gray-100,
.tw-bg-gray-200 {
  background: var(--bf-bg-card) !important;
}

/* Borders */
.border,
.tw-border {
  border-color: var(--bf-border) !important;
}

/* Shadow adjustments for dark mode */
.shadow,
.tw-shadow,
.tw-shadow-lg {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   SLICK SLIDER / PRODUCT CAROUSEL
   ============================================ */

/* Slick slide <li> element - dette er det faktiske "kort" */
.slick-slide {
  background: var(--bf-bg-card) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  overflow: visible !important; /* Tillad grade badge ::after at være synlig */
}

.slick-slide:hover {
  background: var(--bf-bg-card-hover) !important;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.4) !important;
}

/* Det indre .product div - skal være transparent for at hover virker på li */
.slick-slide .product,
.slick-slide form,
.slick-slide form > .product {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.slick-slide .product:hover,
.slick-slide form:hover,
.slick-slide form > .product:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Fjern alle borders og shadows fra slick slides børn */
.slick-slide *,
.slick-slide > form,
.slick-slide .product,
.slick-slide .product > * {
  border: none !important;
}

/* Product list <li> elementer (ikke kun slick) */
.product-list > ul > li {
  background: var(--bf-bg-card) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  overflow: visible !important; /* Tillad grade badge ::after at være synlig */
}

.product-list > ul > li:hover {
  background: var(--bf-bg-card-hover) !important;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.4) !important;
}

.product-list > ul > li .product,
.product-list > ul > li form,
.product-list > ul > li form > .product {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.product-list > ul > li .product:hover,
.product-list > ul > li form:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Product container - tillad grade badge at stikke ud */
.product {
  overflow: visible !important;
}

/* Product grade badge */
.product-grade {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

/* Product grade info ikon - sørg for at det ikke bliver klippet */
.product-grade::after {
  background: var(--bf-bg-dark) !important;
  color: var(--bf-accent) !important;
  border-color: var(--bf-accent) !important;
}

.product-grade:hover::after {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

/* Product news badge */
.product-news {
  background: var(--bf-red) !important;
  color: var(--bf-text-primary) !important;
}

.product-news span {
  color: var(--bf-text-primary) !important;
}

/* Product brand */
.product-brand {
  color: var(--bf-text-secondary) !important;
}

/* Product saving/discount */
.product-saving,
.price-saving,
.webshop-productinfo .pricebox .price-saving {
  background: var(--bf-red) !important;
  color: var(--bf-text-primary) !important;
}

/* Strike-through old price */
.product-price strike,
strike {
  color: var(--bf-text-muted) !important;
}

/* Product stock */
.product-stock {
  color: var(--bf-text-secondary) !important;
}

.product-stock .green,
.product-stock i.green {
  color: var(--bf-green-light) !important;
}

/* Product buy section */
.product-buy {
  background: transparent !important;
}

.product-buy .knap {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

.product-buy .knap:hover {
  background: var(--bf-accent-hover) !important;
}

/* Text input in buy section */
.TextInputField_Productlist,
.BuyButton_ProductList {
  background: var(--bf-bg-card-hover) !important;
  color: var(--bf-text-primary) !important;
  border-color: var(--bf-border) !important;
}

/* Product actions container */
.product-actions {
  background: transparent !important;
}

/* Slick navigation arrows */
.slick-prev,
.slick-next {
  background: var(--bf-bg-card) !important;
}

.slick-prev:hover,
.slick-next:hover {
  background: var(--bf-bg-card-hover) !important;
}

.slick-prev:before,
.slick-next:before {
  color: var(--bf-accent) !important;
}

/* Slick dots */
.slick-dots li button:before {
  color: var(--bf-text-muted) !important;
}

.slick-dots li.slick-active button:before {
  color: var(--bf-accent) !important;
}

/* Element overlay */
.Element_Overlay_DIV,
.Element_Overlay_Frontpage_SavingsDIV {
  background: transparent !important;
}

.Element_Overlay_Frontpage_SavingsText_DIV {
  color: var(--bf-text-primary) !important;
}

/* ============================================
   BLOG SLIDER
   ============================================ */

.blog-section {
  background-color: var(--bf-bg-dark) !important;
}

.blog-heading {
  color: var(--bf-text-primary) !important;
}

.blog-view-all {
  color: var(--bf-accent) !important;
}

.blog-view-all:hover {
  color: var(--bf-accent-hover) !important;
}

.blog-post-content {
  background: var(--bf-bg-card) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.blog-post-content:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  border-color: var(--bf-accent) !important;
}

.blog-post-image-wrapper {
  background: var(--bf-bg-card-hover) !important;
}

.blog-post-category {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

.blog-post-title {
  color: var(--bf-text-primary) !important;
}

.blog-post-excerpt {
  color: var(--bf-text-secondary) !important;
}

.blog-post-meta,
.blog-post-date,
.blog-post-reading-time,
.blog-post-separator {
  color: var(--bf-text-muted) !important;
}

.blog-nav-btn {
  background: var(--bf-bg-card) !important;
  color: var(--bf-accent) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

.blog-nav-btn:hover {
  background: var(--bf-bg-card-hover) !important;
}

/* ============================================
   NAVBAR OVERRIDES
   ============================================ */

/* Header baggrund - target inline style */
header[style*="background"],
header[style*="#1a1a1a"] {
  background: var(--bf-bg-dark) !important;
}

/* Nav baggrund */
nav[style*="background"],
nav[style*="#1a1a1a"] {
  background: var(--bf-bg-dark) !important;
}

/* Kurv ikon i header - skal have hvid filter */
header .basket img[src*="cart_ikon"],
#basket img[src*="cart_ikon"],
img[src*="cart_ikon.svg"],
img.cart-icon,
.cart-icon {
  filter: brightness(0) invert(1) !important;
}

/* Kurv pris under ikon - skal være synlig */
/* Override CSS fra cart-inc.html's <style> blok */
/* Brug høj specificity for at vinde over component styles */
body #totalprice,
body span#totalprice,
body .cart-price,
body span.cart-price,
body header #totalprice,
body header .cart-price,
body #basket #totalprice,
body #basket .cart-price,
body .basket #totalprice,
body .basket .cart-price,
body #basket span.cart-price,
body .basket span.cart-price,
html body #totalprice,
html body .cart-price {
  color: var(--bf-text-primary) !important;
}

/* Kurv badge - gul accent */
#totalproducts,
span#totalproducts {
  background-color: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

/* Menu ikon - sørg for hvid filter */
button[data-mobile-menu-trigger] img,
[data-mobile-menu-trigger] img,
img[alt="Menu"],
img[src*="menu.svg"],
header button img[src*="menu"] {
  filter: brightness(0) invert(1) !important;
}

/* Logo i header - sørg for hvid filter */
header a img[alt*="ITLAGERSALG"],
header img[alt*="ITLAGERSALG"] {
  filter: brightness(0) invert(1) !important;
}

/* Navigation links i header - kategori tekster */
nav ul li a {
  border-color: var(--bf-border) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

nav ul li a span {
  color: var(--bf-text-primary) !important;
}

nav ul li a:hover {
  border-color: var(--bf-accent) !important;
}

nav ul li a:hover span {
  color: var(--bf-accent) !important;
}

/* Kundeservice sektion i header */
#customer-service-link,
#customer-service-link-mobile {
  color: var(--bf-text-primary) !important;
}

#customer-service-link span,
#customer-service-link-mobile span,
#customer-service-link div,
#customer-service-link-mobile div {
  color: var(--bf-text-primary) !important;
}

/* Kundeservice label - gul accent */
#customer-service-link span[style*="E8C9A0"],
#customer-service-link-mobile span[style*="E8C9A0"],
#customer-service-link .tw-text-white span:first-child,
#customer-service-link-mobile .tw-text-white span:first-child {
  color: var(--bf-accent) !important;
}

/* Kurv total i header */
#totalprice {
  color: var(--bf-text-primary) !important;
}

/* Kurv badge - gul baggrund, sort tekst */
#totalproducts {
  background-color: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

/* ============================================
   FOOTER OVERRIDES
   ============================================ */

/* Footer hovedbaggrund - target inline style */
footer[style*="background"],
footer[style*="#1a1a1a"] {
  background: var(--bf-bg-dark) !important;
}

/* Footer sektioner med inline styles */
div[style*="background: #151515"],
div[style*="background:#151515"],
div[style*="background: #0d0d0d"],
div[style*="background:#0d0d0d"],
div.tw-pt-8[style*="#151515"],
div.tw-hidden[style*="#151515"],
div[class*="tw-"][style*="background: #151515"],
div[class*="tw-"][style*="background:#151515"] {
  background: var(--bf-bg-dark) !important;
  background-color: var(--bf-bg-dark) !important;
}

/* Footer kategori-kort */
footer a[class*="tw-border-itl-green-light"] {
  border-color: var(--bf-accent) !important;
  background: rgba(251, 191, 36, 0.05) !important;
}

footer a[class*="tw-border-itl-green-light"]:hover {
  border-color: var(--bf-accent-hover) !important;
}

footer a[class*="tw-border-itl-green-light"] span {
  color: var(--bf-accent) !important;
}

/* Footer overskrifter */
footer h3.tw-text-itl-green-light,
footer .tw-text-itl-green-light {
  color: var(--bf-accent) !important;
}

/* Footer links */
footer .tw-text-gray-300,
footer .tw-text-gray-400 {
  color: var(--bf-text-secondary) !important;
}

footer .tw-text-gray-300:hover,
footer .tw-text-gray-400:hover {
  color: var(--bf-accent) !important;
}

/* Footer nyhedsbrev */
footer #footer-newsletter-form-container {
  border-color: var(--bf-accent) !important;
  background: rgba(251, 191, 36, 0.05) !important;
}

footer #footer-newsletter-form-container h3 {
  color: var(--bf-accent) !important;
}

footer #footer-newsletter-form-container button {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

footer #footer-newsletter-form-container button:hover {
  background: var(--bf-accent-hover) !important;
}

/* Footer kontakt bokse */
footer div[style*="border: 1px solid #374151"] {
  border-color: var(--bf-border) !important;
}

footer .tw-text-itl-green-light.tw-text-2xl {
  color: var(--bf-accent) !important;
}

/* Footer sociale medier */
footer a[class*="hover:tw-text-itl-green-light"]:hover {
  color: var(--bf-accent) !important;
}

/* Footer SoMe ikoner - skal være synlige (gul accent) */
footer .tw-flex a.tw-text-white i,
footer a.tw-text-white i.ph,
footer i.ph-facebook-logo,
footer i.ph-instagram-logo,
footer i.ph-tiktok-logo {
  color: var(--bf-accent) !important;
}

/* Footer SoMe labels */
footer .tw-flex a .tw-text-gray-400,
footer a.tw-text-white span.tw-text-gray-400 {
  color: var(--bf-text-secondary) !important;
}

/* Danni citat tekst - skal være synlig */
footer .tw-text-gray-300.tw-italic,
footer .tw-text-gray-300.tw-italic p,
footer div.tw-italic.tw-text-gray-300,
footer div.tw-italic.tw-text-gray-300 p,
footer .tw-italic .tw-text-gray-300,
footer div[class*="tw-italic"][class*="tw-text-gray-300"],
footer div[class*="tw-italic"][class*="tw-text-gray-300"] p {
  color: var(--bf-text-primary) !important;
}

/* Danni navn - hvid tekst */
footer .tw-italic .tw-text-white,
footer div.tw-italic p.tw-text-white,
footer p.tw-font-bold.tw-text-white {
  color: var(--bf-text-primary) !important;
}

/* Telefon og email links - skal være synlige */
footer a[href^="tel:"],
footer a[href^="mailto:"] {
  color: var(--bf-text-primary) !important;
}

footer a[href^="tel:"]:hover,
footer a[href^="mailto:"]:hover {
  color: var(--bf-accent) !important;
}

/* Kontakt bokse ikoner */
footer i.ph-device-mobile,
footer i.ph-envelope {
  color: var(--bf-accent) !important;
}

/* Footer bottom section */
.footer-bottom-section {
  background: var(--bf-bg-dark) !important;
  background-color: var(--bf-bg-dark) !important;
}

div[style*="background: #151515"],
div[style*="background: #0d0d0d"] {
  background: var(--bf-bg-dark) !important;
}

/* Footer betalingsikoner - tilpasset mørk baggrund */
/* Dankort og MobilePay har farver der fungerer på mørk baggrund */
img[alt="Dankort"],
img[alt="MobilePay"],
img[src*="betalingsmetoder/Dankort"],
img[src*="betalingsmetoder/MobilePay"] {
  filter: none !important;
}

/* Mastercard - behold light version (hvid) på mørk baggrund */
img[alt="Mastercard"],
img[src*="betalingsmetoder/Mastercard"] {
  filter: none !important;
}

/* Visa, Apple Pay, Viabill - gør hvide på mørk baggrund */
img[alt="Visa"],
img[alt="Apple Pay"],
img[alt="Viabill"],
img[src*="betalingsmetoder/Visa"],
img[src*="betalingsmetoder/Apple_Pay"],
img[src*="betalingsmetoder/Viabill"] {
  filter: brightness(0) invert(1) !important;
}

/* ============================================
   CART/KURV OVERRIDES
   ============================================ */

/* Cart badge */
#totalproducts {
  background-color: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

/* Cart pris */
#totalprice {
  color: var(--bf-accent) !important;
}

/* Mini cart sidebar */
#cart-sidebar {
  background: var(--bf-bg-card) !important;
}

#cart-sidebar h2 {
  color: var(--bf-text-primary) !important;
}

#cart-sidebar #cart-count {
  color: var(--bf-accent) !important;
}

/* Cart header */
#cart-sidebar > div:first-child {
  background: var(--bf-bg-dark) !important;
  border-color: var(--bf-border) !important;
}

/* Cart produkt-liste */
#cart-sidebar .minibasketproducts {
  background: var(--bf-bg-card) !important;
}

/* Cart bottom section */
#cart-sidebar .tw-bg-gray-50,
#cart-sidebar .tw-bg-white {
  background: var(--bf-bg-card) !important;
}

#cart-sidebar .tw-border-gray-200 {
  border-color: var(--bf-border) !important;
}

/* Cart tekst */
#cart-sidebar .tw-text-gray-700,
#cart-sidebar .tw-text-gray-900 {
  color: var(--bf-text-primary) !important;
}

#cart-sidebar .tw-text-gray-500 {
  color: var(--bf-text-muted) !important;
}

/* Cart shipping progress */
#cart-sidebar .shipinfo {
  color: var(--bf-text-secondary) !important;
}

#cart-sidebar .cssProgress-bar {
  background: var(--bf-accent) !important;
}

#cart-sidebar .tw-bg-gray-200 {
  background: var(--bf-border) !important;
}

/* Cart total pris */
#cart-sidebar .minibaskettotalprice {
  color: var(--bf-accent) !important;
}

/* Cart knapper styres via JavaScript i cart-inc.html */

/* =================================================================
   CART PRODUKTER - Dark mode styling for produkter i kurven
   ================================================================= */

/* Produkt container */
#cart-sidebar .minibasket-product {
  border-color: var(--bf-border) !important;
}

/* Produkt titel */
#cart-sidebar .minibasket-product h3 {
  color: var(--bf-text-primary) !important;
}

/* Produkt pris */
#cart-sidebar .minibasket-product span[style*="font-weight: 700"],
#cart-sidebar .minibasket-product span[style*="font-size: 1.5rem"] {
  color: var(--bf-accent) !important;
}

/* Quantity controls border */
#cart-sidebar .quantity-controls {
  border-color: var(--bf-border) !important;
  background: var(--bf-bg-secondary) !important;
}

/* Quantity knapper og ikoner */
#cart-sidebar .quantity-btn i,
#cart-sidebar .minibasket-product i[class*="ph-"] {
  color: var(--bf-text-secondary) !important;
}

#cart-sidebar .quantity-btn:hover {
  background: var(--bf-bg-card-hover) !important;
}

/* Quantity tekst */
#cart-sidebar .quantity-controls span {
  color: var(--bf-text-primary) !important;
}

/* Fjern knap */
#cart-sidebar .remove-btn {
  color: var(--bf-text-secondary) !important;
}

#cart-sidebar .remove-btn:hover {
  color: var(--bf-text-primary) !important;
}

/* Gaveindpakning knap */
#cart-sidebar .add-giftwrap-btn {
  color: var(--bf-accent) !important;
}

#cart-sidebar .add-giftwrap-btn:hover {
  color: var(--bf-accent-hover) !important;
}

/* Gaveindpakning border */
#cart-sidebar .minibasket-product div[style*="border-top: 1px solid #f3f4f6"] {
  border-color: var(--bf-border) !important;
}

/* Tom kurv ikon */
#cart-sidebar i[class*="ph-shopping-cart"] {
  color: var(--bf-text-muted) !important;
}

/* Tom kurv tekst */
#cart-sidebar .minibasketproducts p {
  color: var(--bf-text-secondary) !important;
}

/* Cart tøm knap */
#cart-sidebar .minibasketclear {
  color: var(--bf-red) !important;
}

/* Cart close knap */
#cart-close {
  color: var(--bf-text-primary) !important;
}

#cart-close:hover {
  color: var(--bf-accent) !important;
}

/* ============================================
   MOBILE MENU OVERRIDES
   ============================================ */

/* Mobilmenu hovedbaggrund */
#mobile-menu-sidebar {
  background: var(--bf-bg-dark) !important;
}

/* Mobilmenu sidebar style attribute override */
#mobile-menu-sidebar[style*="background"] {
  background: var(--bf-bg-dark) !important;
}

/* Mobilmenu luk-knap */
#mobile-menu-close {
  color: var(--bf-accent) !important;
}

#mobile-menu-close:hover {
  color: var(--bf-accent-hover) !important;
}

/* Mobilmenu logo - behold hvid */
#mobile-menu-sidebar img[alt*="ITLAGERSALG"] {
  filter: brightness(0) invert(1) !important;
}

/* Mobilmenu søgefelt */
#mobile-menu-sidebar form input[type="text"] {
  background: var(--bf-bg-card) !important;
  color: var(--bf-text-primary) !important;
  border-color: var(--bf-accent) !important;
}

#mobile-menu-sidebar form input[type="text"]::placeholder {
  color: var(--bf-text-muted) !important;
}

#mobile-menu-sidebar form button[type="submit"] {
  color: var(--bf-accent) !important;
}

/* Mobilmenu overskrifter */
#mobile-menu-sidebar h3 {
  color: var(--bf-text-primary) !important;
}

/* Mobilmenu kategori-kort (hvide bokse -> mørke) */
#mobile-menu-sidebar .tw-bg-white,
#mobile-menu-campaigns .tw-bg-white {
  background: var(--bf-bg-card) !important;
}

#mobile-menu-sidebar .tw-bg-white:hover,
#mobile-menu-campaigns .tw-bg-white:hover,
#mobile-menu-sidebar .hover\:tw-bg-gray-50:hover {
  background: var(--bf-bg-card-hover) !important;
}

/* Mobilmenu links - grøn -> gul accent */
#mobile-menu-sidebar a span,
#mobile-menu-sidebar .tw-text-\[\#35885f\],
#mobile-menu-campaigns a span {
  color: var(--bf-accent) !important;
}

/* Mobilmenu ikoner */
#mobile-menu-sidebar i[class*="ph-"],
#mobile-menu-sidebar .tw-text-\[\#35885f\] {
  color: var(--bf-accent) !important;
}

/* Mobilmenu borders */
#mobile-menu-sidebar .tw-border-\[\#eaeaea\],
#mobile-menu-sidebar .tw-border-b {
  border-color: var(--bf-border) !important;
}

/* Mobilmenu bund-knapper */
#mobile-menu-sidebar a[style*="background: #156B48"],
#mobile-menu-sidebar .tw-bg-\[\#156B48\] {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

#mobile-menu-sidebar a[style*="background: #156B48"]:hover,
#mobile-menu-sidebar .tw-bg-\[\#156B48\]:hover {
  background: var(--bf-accent-hover) !important;
}

/* ============================================
   BLACK FRIDAY SPECIAL ELEMENTS
   ============================================ */

/* Yellow accents for BF */
.bf-highlight,
.black-friday-price {
  color: var(--bf-accent) !important;
  font-weight: bold !important;
}

/* Pulsating sale effect */
@keyframes bf-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.bf-pulse {
  animation: bf-pulse 2s ease-in-out infinite;
}

/* =================================================================
   TILKØBSPRODUKTER / ADD-ON PRODUCTS SECTION
   ================================================================= */

/* Container baggrund */
.addonscontainer {
  background-color: var(--bf-bg-card) !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  margin-bottom: 1.5rem !important;
}

/* Header sektion */
.add-on-products-header-container {
  background-color: transparent !important;
}

.add-on-products-header {
  color: var(--bf-text-primary) !important;
  font-weight: bold !important;
}

.add-on-products-sub-header {
  color: var(--bf-text-secondary) !important;
}

/* Produkt container */
.add-on-products-container {
  background-color: transparent !important;
}

/* Produkt rækker */
.add-on-product-row {
  background-color: var(--bf-bg-secondary) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px !important;
  margin-bottom: 0.5rem !important;
  padding: 0.75rem !important;
}

.add-on-product-row:hover {
  background-color: rgba(255, 230, 0, 0.05) !important;
  border-color: var(--bf-accent) !important;
}

/* Produkt kolonner */
.add-on-product-column {
  background-color: transparent !important;
}

/* Produkt billede */
.add-on-product-image img {
  border-radius: 4px !important;
  border: 1px solid var(--bf-border) !important;
}

/* Checkbox styling */
.add-on-product-checkbox input[type="checkbox"] {
  accent-color: var(--bf-accent) !important;
  width: 18px !important;
  height: 18px !important;
}

/* Produkt navn og beskrivelse */
.add-on-product-name label {
  color: var(--bf-text-primary) !important;
  font-weight: 600 !important;
}

.add-on-product-name small {
  color: var(--bf-text-muted) !important;
}

/* Antal input */
.add-on-product-amount-input,
.add-on-product-amount input {
  background-color: var(--bf-bg-secondary) !important;
  color: var(--bf-text-primary) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 4px !important;
  padding: 0.25rem 0.5rem !important;
}

.add-on-product-amount-input:focus,
.add-on-product-amount input:focus {
  border-color: var(--bf-accent) !important;
  outline: none !important;
}

/* Pris styling */
.add-on-product-price,
.AddOnProdPrice {
  color: var(--bf-accent) !important;
  font-weight: bold !important;
}

/* Før-pris (overstregning) */
.add-on-product-price del,
.AddOnProdPrice del {
  color: var(--bf-text-muted) !important;
  text-decoration: line-through !important;
}

/* =================================================================
   OPGRADERING / UPGRADE SECTION (AddProduct)
   ================================================================= */

/* Opgradering overskrift */
.AddProductHeading {
  color: var(--bf-text-primary) !important;
  font-weight: bold !important;
  font-size: 1.1rem !important;
  margin-bottom: 0.5rem !important;
}

/* Addon gruppe container */
.AddGroupContainer {
  background-color: transparent !important;
}

/* Individuel addon gruppe (fx Lagring) */
.AddonGroup,
.AddGroupContainer .AddonGroup {
  background-color: var(--bf-bg-card) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px !important;
  /* Behold original padding: 20px 0 20px 70px */
  padding: 20px 15px 20px 70px !important;
  margin-bottom: 0.5rem !important;
  cursor: pointer !important;
  color: var(--bf-text-primary) !important;
  position: relative !important;
}

.AddonGroup:hover,
.AddGroupContainer .AddonGroup:hover {
  background-color: var(--bf-bg-card-hover) !important;
  border-color: var(--bf-accent) !important;
}

/* FIX: Gør baggrunds-ikonerne (SVG) gule/hvide med filter
   Original: grøn #156B48 -> target: gul #fbbf24
   Filter inverterer grøn til gul/hvid for Black Friday */
.AddGroupContainer .AddonGroup.ram,
.AddGroupContainer .AddonGroup.lagring,
.AddGroupContainer .AddonGroup.officepakken,
.AddGroupContainer .AddonGroup.udvidetgaranti,
.AddonGroup.ram,
.AddonGroup.lagring,
.AddonGroup.officepakken,
.AddonGroup.udvidetgaranti {
  /* Brug filter til at ændre SVG ikonfarve fra grøn til gul */
  /* hue-rotate drejer grøn (120°) til gul (60°) = -60° rotation */
  /* brightness og saturate justerer for at matche #fbbf24 bedre */
  filter: none !important;
}

/* Alternativ løsning: overlay pseudo-element der dækker ikonet */
.AddGroupContainer .AddonGroup::before {
  content: '' !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  background-color: var(--bf-accent) !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  opacity: 0.15 !important;
}

/* Sørg for at baggrundsbilleder (ikoner) inverteres for at passe til mørk baggrund */
.AddGroupContainer .AddonGroup[class*="ram"],
.AddGroupContainer .AddonGroup[class*="lagring"],
.AddGroupContainer .AddonGroup[class*="officepakken"],
.AddGroupContainer .AddonGroup[class*="udvidetgaranti"] {
  /* Brug CSS filter for at konvertere grønne SVG'er til gule/hvide */
  /* Dette er en kompleks transformation: grøn (#156B48) → gul (#fbbf24) */
  background-blend-mode: normal !important;
}

/* For specifikt at ændre ikonfarven - brug en CSS mask/filter tilgang */
body.black-friday-theme .AddGroupContainer .AddonGroup {
  position: relative !important;
}

/* VIGTIG FIX: Skjul de grønne SVG baggrundsbilleder */
body.black-friday-theme .AddGroupContainer .AddonGroup,
.AddGroupContainer .AddonGroup {
  /* Skjul de originale grønne ikoner - vi bruger emoji i stedet */
  background-image: none !important;
}

/* Tilføj gule ikoner via ::before pseudo-element */
body.black-friday-theme .AddGroupContainer .AddonGroup.lagring::before,
.AddGroupContainer .AddonGroup.lagring::before {
  content: '💾' !important;
  font-size: 24px !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

body.black-friday-theme .AddGroupContainer .AddonGroup.ram::before,
.AddGroupContainer .AddonGroup.ram::before {
  content: '🔲' !important;
  font-size: 24px !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

body.black-friday-theme .AddGroupContainer .AddonGroup.officepakken::before,
.AddGroupContainer .AddonGroup.officepakken::before {
  content: '📦' !important;
  font-size: 24px !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

body.black-friday-theme .AddGroupContainer .AddonGroup.udvidetgaranti::before,
.AddGroupContainer .AddonGroup.udvidetgaranti::before {
  content: '🛡️' !important;
  font-size: 24px !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* Position relative for emoji-ikonerne (padding allerede sat ovenfor) */
body.black-friday-theme .AddGroupContainer .AddonGroup.lagring,
body.black-friday-theme .AddGroupContainer .AddonGroup.ram,
body.black-friday-theme .AddGroupContainer .AddonGroup.officepakken,
body.black-friday-theme .AddGroupContainer .AddonGroup.udvidetgaranti,
.AddGroupContainer .AddonGroup.lagring,
.AddGroupContainer .AddonGroup.ram,
.AddGroupContainer .AddonGroup.officepakken,
.AddGroupContainer .AddonGroup.udvidetgaranti {
  position: relative !important;
}

/* =================================================================
   OPGRADERING MODAL (.addoninfo) - popup når man klikker på opgradering
   ================================================================= */

/* Modal container */
.addoninfo {
  background-color: var(--bf-bg-card) !important;
  color: var(--bf-text-primary) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 12px !important;
}

/* Modal header - direkte selector med høj specificity */
.addonhead,
.addoninfo .addonhead,
body.black-friday-theme .addonhead,
body.black-friday-theme .addoninfo .addonhead {
  background-color: var(--bf-bg-dark) !important;
  background: var(--bf-bg-dark) !important;
  border-bottom: 1px solid var(--bf-border) !important;
  color: var(--bf-text-primary) !important;
}

.addonhead h2,
.addoninfo .addonhead h2,
body.black-friday-theme .addonhead h2,
body.black-friday-theme .addoninfo .addonhead h2 {
  color: var(--bf-text-primary) !important;
  background: transparent !important;
}

/* Luk ikon - alle varianter */
.addonhead i,
.addonhead .fa-times,
.addonhead .fal,
.addonhead i.fal,
.addonhead i.fa-times,
.addoninfo .addonhead i,
.addoninfo .addonhead .fa-times,
.addoninfo .addonhead .fal,
body.black-friday-theme .addonhead i,
body.black-friday-theme .addonhead .fal,
body.black-friday-theme .addonhead .fa-times {
  color: var(--bf-text-secondary) !important;
}

.addonhead i:hover,
.addoninfo .addonhead i:hover,
body.black-friday-theme .addonhead i:hover {
  color: var(--bf-accent) !important;
}

/* Modal body */
.addoninfo .addonbody {
  background-color: var(--bf-bg-card) !important;
  color: var(--bf-text-primary) !important;
}

.addoninfo .addonbody h1,
.addoninfo .addonbody h2 {
  color: var(--bf-text-primary) !important;
}

.addoninfo .addonbody small {
  color: var(--bf-text-secondary) !important;
}

.addoninfo .addonbody ul li {
  color: var(--bf-text-secondary) !important;
}

.addoninfo .addonbody ul li b {
  color: var(--bf-text-primary) !important;
}

/* Valg bokse (.choice) */
.addoninfo .choice {
  background-color: transparent !important;
}

.addoninfo .choice > div {
  background-color: var(--bf-bg-secondary) !important;
  border: 2px solid var(--bf-border) !important;
  border-radius: 8px !important;
  color: var(--bf-text-primary) !important;
}

.addoninfo .choice > div:hover {
  background-color: var(--bf-bg-card-hover) !important;
  border-color: var(--bf-accent) !important;
}

/* Valgt/default option */
.addoninfo .choice > div.default,
.addoninfo .choice > div.selected,
.addoninfo .choice > div[class*="selected"] {
  background-color: var(--bf-bg-card-hover) !important;
  border-color: var(--bf-accent) !important;
}

/* Titel og pris i valg bokse */
.addoninfo .choice > div .title {
  color: var(--bf-text-primary) !important;
  font-weight: 600 !important;
}

.addoninfo .choice > div .price {
  color: var(--bf-accent) !important;
  font-weight: bold !important;
}

/* OBS sektion - behold blå baggrund, kun fix tekstkontrast */
.obs,
.addoninfo .obs,
body.black-friday-theme .obs,
body.black-friday-theme .addoninfo .obs {
  /* Behold original blå baggrund - kun fix tekst */
  color: #ffffff !important;
}

.obs div,
.addoninfo .obs div,
body.black-friday-theme .obs div {
  color: #ffffff !important;
}

.obs b,
.obs strong,
.addoninfo .obs b,
.addoninfo .obs strong,
body.black-friday-theme .obs b,
body.black-friday-theme .obs strong {
  color: #ffffff !important;
}

.obs small,
.addoninfo .obs small,
body.black-friday-theme .obs small {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Modal footer */
.addoninfo .addonfooter {
  background-color: var(--bf-bg-dark) !important;
  border-top: 1px solid var(--bf-border) !important;
}

/* Vælg opgradering knap */
.addoninfo .addonfooter .upgrade {
  background-color: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
  font-weight: bold !important;
  border-radius: 6px !important;
}

.addoninfo .addonfooter .upgrade:hover {
  background-color: var(--bf-accent-hover) !important;
}

/* Ingen opgradering knap */
.addoninfo .addonfooter .noupgrade {
  background-color: var(--bf-bg-secondary) !important;
  color: var(--bf-text-primary) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 6px !important;
}

.addoninfo .addonfooter .noupgrade:hover {
  background-color: var(--bf-bg-card-hover) !important;
  border-color: var(--bf-accent) !important;
}

/* Luk vindue tekst */
.addoninfo .addonfooter small {
  color: var(--bf-text-muted) !important;
}

.addoninfo .addonfooter small:hover {
  color: var(--bf-accent) !important;
}

/* Addon gruppe navn (fx "Lagring") */
.AddonGroupName {
  color: var(--bf-text-primary) !important;
  font-weight: 600 !important;
}

/* Addon gruppe pris og chevron */
.AddonGroupPrice {
  color: var(--bf-accent) !important;
}

.AddonGroupPrice span {
  color: var(--bf-accent) !important;
  font-weight: bold !important;
}

.AddonGroupPrice i {
  color: var(--bf-text-secondary) !important;
}

/* =================================================================
   "LÆS MERE" LINKS - skal være synlige på mørk baggrund
   ================================================================= */

/* Generel "læs mere" styling */
a.read-more,
a[class*="read-more"],
a[href*="javascript"]:not([class*="knap"]),
.product-description a,
.ProductDescription a,
article a:not([class*="knap"]):not([class*="btn"]):not([class*="button"]):not(.breadcrumb *):not(.breadcrumbs *) {
  color: var(--bf-accent) !important;
}

a.read-more:hover,
a[class*="read-more"]:hover,
.product-description a:hover,
.ProductDescription a:hover {
  color: var(--bf-accent-hover) !important;
  text-decoration: underline !important;
}

/* Læs mere link styling - specifik for produktbeskrivelse */
/* Ekskluderer breadcrumbs så de beholder grøn farve */
.webshop-productinfo a:not(.breadcrumb a):not(.breadcrumbs a):not(.BreadCrumb a):not(.BreadCrumb_ProductList a),
.product-info a:not(.breadcrumb a):not(.breadcrumbs a):not(.BreadCrumb a):not(.BreadCrumb_ProductList a),
.ProductInfoWrapper a:not(.breadcrumb a):not(.breadcrumbs a):not(.BreadCrumb a):not(.BreadCrumb_ProductList a) {
  color: var(--bf-accent) !important;
}

.webshop-productinfo a:not(.breadcrumb a):not(.breadcrumbs a):not(.BreadCrumb a):not(.BreadCrumb_ProductList a):hover,
.product-info a:not(.breadcrumb a):not(.breadcrumbs a):not(.BreadCrumb a):not(.BreadCrumb_ProductList a):hover,
.ProductInfoWrapper a:not(.breadcrumb a):not(.breadcrumbs a):not(.BreadCrumb a):not(.BreadCrumb_ProductList a):hover {
  color: var(--bf-accent-hover) !important;
}

/* =================================================================
   CATEGORY PAGE - Kategori overskrift og filter
   ================================================================= */

/* Kategori overskrift - fjern lys baggrund */
article > div h1,
article h1,
.category-header h1,
.productlist h1,
.product-list-header h1,
.webshop-productlist h1,
h1.bighead {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--bf-text-primary) !important;
}

/* Product filter HELE container - samme baggrund som main */
.product-filter-column,
.product-filter-column-container,
.product-filter-column-container-4,
[class*="product-filter-column-container"],
[class*="product-filter-column"],
div.product-filter-column-container-4,
body .product-filter-column-container-4,
body [class*="product-filter-column-container"],
.product-filter-body-container,
.product-filter-body-container-tag,
.product-filter-tag-checkboxes,
.ProductFilter,
.productfilter,
.filter-container,
.filter-section,
.filter-wrapper,
.webshop-filter,
aside.filter,
.sidebar .filter,
div[class*="product-filter"],
div[class*="ProductFilter"] {
  background: var(--bf-bg-dark) !important;
  background-color: var(--bf-bg-dark) !important;
  color: var(--bf-text-primary) !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Filter container (individuelle filter bokse) - samme som product cards */
.product-filter-container,
.product-filter-container-tag {
  background: var(--bf-bg-card) !important;
  background-color: var(--bf-bg-card) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 8px !important;
}

/* Filter header - alle varianter - samme som product cards */
.product-filter-header-container,
.product-filter-header-container-tag,
.product-filter-header,
.filter-header,
.ProductFilterHeader,
div[class*="filter-header"],
div[class*="FilterHeader"] {
  background: var(--bf-bg-card) !important;
  background-color: var(--bf-bg-card) !important;
  border: none !important;
  border-radius: 0 !important;
  /* Behold original padding - undgå at override */
}

/* Filter header tekst */
.product-filter-header-text,
.product-filter-header-text-tag,
.filter-title,
.filter-header-text,
.ProductFilterTitle,
div[class*="filter-header"] span,
div[class*="filter-header"] h3,
div[class*="filter-header"] h4,
div[class*="FilterHeader"] span {
  color: var(--bf-text-primary) !important;
  font-weight: bold !important;
}

/* Filter body/indhold */
.product-filter-body,
.product-filter-body-container,
.filter-body,
.filter-content,
.ProductFilterBody,
div[class*="filter-body"],
div[class*="FilterBody"] {
  background: var(--bf-bg-dark) !important;
  background-color: var(--bf-bg-dark) !important;
  color: var(--bf-text-primary) !important;
  border: none !important;
  /* BEHOLD original padding og spacing */
}

/* Filter checkbox containers - BEHOLD original layout */
.product-filter-checkbox-container,
.filter-checkbox-container,
.filter-option,
.filter-item {
  background: transparent !important;
  color: var(--bf-text-primary) !important;
  /* Behold original padding, margin og display */
}

.product-filter-checkbox-container:hover,
.filter-checkbox-container:hover,
.filter-option:hover,
.filter-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Filter checkbox labels - kun farve, BEHOLD layout */
.product-filter-checkbox-label,
.filter-checkbox-label,
.filter-label,
.ProductFilterLabel,
.product-filter-container label,
.ProductFilter label {
  color: var(--bf-text-primary) !important;
  /* VIGTIGT: Behold original display, padding, position */
}

/* Filter span tekst (inden i labels) - kun farve */
.product-filter-container span,
.ProductFilter span,
.product-filter-checkbox-label span,
.filter-checkbox-label span {
  color: var(--bf-text-primary) !important;
}

/* Filter count (antal stk.) */
.product-filter-count-container,
.filter-count,
.product-count,
span[class*="count"],
.product-filter-container small,
.ProductFilter small {
  color: var(--bf-text-muted) !important;
}

/* Checkmark styling - ingen border */
.product-filter-checkbox-label .checkmark,
.filter-checkbox-label .checkmark,
.custom-checkbox .checkmark,
input[type="checkbox"] + .checkmark {
  background-color: #333333 !important;
  border: none !important;
  border-radius: 4px !important;
}

.product-filter-checkbox:checked + .product-filter-checkbox-label .checkmark,
input[type="checkbox"]:checked + label .checkmark,
input[type="checkbox"]:checked + .checkmark {
  background-color: var(--bf-accent) !important;
  border: none !important;
}

/* Valgte filtre container (chosen filters) */
.chosenFiltersContainer,
.chosenFiltersBody,
.chosen-filters-container,
.selected-filters,
.active-filters {
  background: var(--bf-bg-dark) !important;
  background-color: var(--bf-bg-dark) !important;
  color: var(--bf-text-primary) !important;
  border: none !important;
}

/* Valgte filter tags/links */
.chosenFiltersContainer .chosenFiltersBody > a,
.chosenFiltersBody > a,
.chosen-filter-tag,
.selected-filter-tag,
.active-filter-tag {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--bf-bg-card) !important;
  color: var(--bf-text-primary) !important;
  border: 1px solid var(--bf-accent) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  margin: 4px !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.chosenFiltersContainer .chosenFiltersBody > a:hover,
.chosenFiltersBody > a:hover,
.chosen-filter-tag:hover,
.selected-filter-tag:hover,
.active-filter-tag:hover {
  background: var(--bf-accent) !important;
  color: #000000 !important;
  border-color: var(--bf-accent) !important;
}

/* X/fjern ikon på valgte filtre */
.chosenFiltersContainer .chosenFiltersBody > a::after,
.chosenFiltersBody > a::after {
  content: "×" !important;
  margin-left: 6px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  opacity: 0.7 !important;
}

.chosenFiltersContainer .chosenFiltersBody > a:hover::after,
.chosenFiltersBody > a:hover::after {
  opacity: 1 !important;
}

/* Filter dropdown/select elementer */
.product-filter-container select,
.ProductFilter select,
div[class*="filter"] select {
  background: #252525 !important;
  color: var(--bf-text-primary) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

/* Filter input felter */
.product-filter-container input,
.ProductFilter input,
div[class*="filter"] input[type="text"],
div[class*="filter"] input[type="number"] {
  background: #252525 !important;
  color: var(--bf-text-primary) !important;
  border: none !important;
  border-radius: 4px !important;
}

/* Filter knapper */
.product-filter-container button,
.ProductFilter button,
.filter-apply-btn,
.filter-reset-btn {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
  border: none !important;
}

.product-filter-container button:hover,
.ProductFilter button:hover {
  background: var(--bf-accent-hover) !important;
}

/* Filter clear/reset link */
.filter-clear,
.filter-reset,
.clear-filters,
a[class*="clear"],
a[class*="reset"] {
  color: var(--bf-accent) !important;
}

/* Collapse/expand ikoner i filter - BEHOLD original position */
.product-filter-header-container i,
.product-filter-header i,
.filter-header i,
div[class*="filter-header"] i {
  color: var(--bf-text-secondary) !important;
  /* Undgå at ændre position - lad original CSS styre */
}

/* Fjern synlige borders fra filter - men behold strukturelle */
.product-filter-container,
.ProductFilter,
.product-filter-body-container,
.product-filter-header-container {
  border: none !important;
}

/* =================================================================
   PRODUCT IMAGE - hvid baggrund for produktbilleder
   ================================================================= */

/* Produktbillede container skal have hvid baggrund */
.productimage,
.product-image,
.ProductImage,
.imagecontainer,
.webshop-productinfo .productimage,
.webshop-productinfo .imagecontainer,
.webshop-productinfo .imagecontainer .productimage,
.col-media .productimage,
.product-gallery,
.product-images {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 8px !important;
}

/* Produktbillede wrapper */
.productimage > div,
.productimage .image-wrapper,
.productimage .main-image,
.imagecontainer > div,
.product-image-container {
  background-color: #ffffff !important;
}

/* Selve billedet */
.productimage img,
.product-image img,
.ProductImage img,
.imagecontainer img {
  background-color: #ffffff !important;
}

/* Thumbnail billeder */
.productimage .thumbnails,
.productimage .thumb,
.product-thumbnails,
.product-thumbs,
.imagecontainer .thumbnails {
  background-color: #ffffff !important;
}

.productimage .thumbnails img,
.product-thumbnails img,
.imagecontainer .thumbnails img {
  background-color: #ffffff !important;
  border-radius: 4px !important;
}

/* =================================================================
   STICKY ADD TO CART BAR
   ================================================================= */

.sticky-add-to-cart-bar,
#stickyAddToCartBar {
  background: var(--bf-bg-card) !important;
  border-top: 1px solid var(--bf-border) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
}

.sticky-close-btn {
  color: var(--bf-text-secondary) !important;
}

.sticky-close-btn:hover {
  color: var(--bf-text-primary) !important;
}

.sticky-product-image img {
  background: #ffffff !important;
  border-radius: 4px !important;
}

.sticky-grade-badge {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
}

.sticky-product-name {
  color: var(--bf-text-primary) !important;
}

.sticky-product-price,
.sticky-product-price .current-price {
  color: var(--bf-accent) !important;
}

.sticky-product-meta {
  color: var(--bf-text-secondary) !important;
}

.sticky-stock-status.in-stock {
  color: var(--bf-green-light) !important;
}

.sticky-free-shipping {
  color: var(--bf-text-muted) !important;
}

.sticky-add-to-cart-btn {
  background: var(--bf-accent) !important;
  color: var(--bf-bg-dark) !important;
  font-weight: bold !important;
}

.sticky-add-to-cart-btn:hover {
  background: var(--bf-accent-hover) !important;
}

/* =================================================================
   BLACK FRIDAY BUTTON FIX - JavaScript håndterer klasser
   Se black-friday-buttons.js for implementation
   ================================================================= */