:root {
  --color-primary:  #0B78FF; /* hoofdblauw (knoppen / CTA) */
  --color-secondary:#00AEEF; /* lichter blauw (hover / link) */
  --color-accent:   #00D1FF; /* accentkleur (badges / highlights) */
  --color-bg:       #0B0F19; /* bijna-zwart achtergrond */
  --color-text:     #E6F1FF; /* ijswit/blauwige tekst */
  --color-muted:    #94A3B8; /* gedempte tekst / labels */

  /* Balkkleuren (menu & onderbalk) */
  --bar-bg: #2b3b55;   /* cart-knopkleur */
  --bar-border: #1f2a3f;
  --bar-text: #eaf3ff;
}

/* Basiskleuren toepassen zonder layout te veranderen */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

a {
  color: var(--color-accent);
}
a:hover, a:focus {
  color: var(--color-secondary);
}

/* Knoppen */
.btn,
button,
input[type=submit],
input[type=button] {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  transition: background-color 0.2s ease-in-out;
}
.btn:hover,
button:hover,
input[type=submit]:hover,
input[type=button]:hover {
  background-color: var(--color-secondary);
}
.btn-secondary {
  background-color: var(--color-secondary);
  color: #fff;
}
.btn-secondary:hover {
  background-color: var(--color-accent);
}

/* Tabelranden, panels, enz. */
.table, .card, .form-control {
  border-color: var(--color-muted);
}
.text-muted, .small {
  color: var(--color-muted) !important;
}

/* Navigatiebalk / footer */
nav, footer {
  background-color: #0A0E17;
  color: var(--color-text);
}

/* ===== Category look & feel – kleur/contrast tweaks ===== */

/* Breadcrumb + page heading */
.breadcrumb {
  background-color: #0a0f19;
  border-color: #16233a;
}
.breadcrumb a { color: var(--color-text); }
.breadcrumb a:hover { color: var(--color-accent); }
h1, .page-title, .heading-title { color: #E9F3FF; }

/* Linklijst "Refine Search" */
.category-refine a,
.refine a,
.category-list a {
  color: var(--color-accent);
}
.category-refine a:hover,
.refine a:hover,
.category-list a:hover {
  color: var(--color-secondary);
}

/* Sidebar categories */
.list-group, .list-group-item {
  background-color: #0f1420;
  color: var(--color-text);
  border-color: #1c2636;
}
.list-group-item a { color: var(--color-text); }
.list-group-item a:hover { color: var(--color-accent); }

/* Actieve categorie in sidebar */
.list-group-item.active,
.list-group-item.active > a {
  background: linear-gradient(180deg, #0B78FF, #0CA6FF);
  color: #fff !important;
  border-color: transparent;
}

/* Filters / selects */
select.form-control, .form-select,
input[type="text"].form-control,
input[type="search"].form-control {
  background-color: #0d1220;
  color: var(--color-text);
  border-color: #1c2636;
}
select.form-control:focus, .form-select:focus,
input[type="text"].form-control:focus,
input[type="search"].form-control:focus {
  background-color: #0f1626;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 0.25rem rgba(11,120,255,0.15);
}

/* Zoekknop glow */
button[type="button"].btn-search,
button[aria-label="Search"],
.header .btn, .search .btn {
  background: linear-gradient(180deg, #0B78FF, #0CA6FF);
  color: #fff;
  border: none;
  box-shadow: 0 0 16px rgba(11,120,255,0.35);
}
button[type="button"].btn-search:hover,
.header .btn:hover, .search .btn:hover {
  background: linear-gradient(180deg, #0CA6FF, #00D1FF);
  box-shadow: 0 0 20px rgba(0,209,255,0.45);
}

/* Product Compare + view toggles */
.btn, .btn-primary {
  background: linear-gradient(180deg, #0B78FF, #0CA6FF);
  color:#fff; border:none;
}
.btn:hover, .btn-primary:hover {
  background: linear-gradient(180deg, #0CA6FF, #00D1FF);
}
.btn-outline, .btn-light, .btn-default {
  background-color: #0f1420;
  color: var(--color-text);
  border-color: #1c2636;
}
.btn-outline:hover, .btn-light:hover, .btn-default:hover {
  border-color: var(--color-secondary);
  color: var(--color-accent);
}

/* Product cards */
.product-thumb, .product-layout .card, .card {
  background:#101826;
  border-color:#1c2636;
  color:var(--color-text);
}
.product-thumb h4 a,
.card .product-title a { color: #EAF3FF; }
.product-thumb h4 a:hover { color: var(--color-accent); }
.price, .price-new { color: var(--color-accent); }
.price-old { color: var(--color-muted); }

/* Top bar & mini-cart */
.navbar, nav, #top, #cart {
  background-color: #0a0e17;
  border-color: #152033;
}
#cart .btn { background: #2b3b55; }
#cart .btn:hover { background: #34507a; }

/* ======= Fine-tuning kleuren ======= */

/* Topmenu-balk */
#menu {
  background-color: var(--bar-bg) !important;
  border-bottom: 1px solid var(--bar-border) !important;
}
#menu .nav > li > a {
  color: var(--bar-text);
  transition: background-color 0.2s ease-in-out;
}
#menu .nav > li > a:hover,
#menu .nav > li.open > a,
#menu .nav > li.active > a {
  background-color: rgba(255,255,255,0.07);
  color:#fff;
}

/* Zoekbalk */
#search input[type="text"], .search input[type="text"] {
  background:#0d1220;
  color:var(--color-text);
  border:1px solid #1c2636;
}
#search .btn, .search .btn {
  background: linear-gradient(180deg, #0B78FF, #0CA6FF);
  color:#fff;
  border:none;
}
#search .btn:hover {
  background: linear-gradient(180deg, #0CA6FF, #00D1FF);
}

/* Slider */
.swiper-viewport, .swiper-container, .swiper {
  background:#0f1420 !important;
  border-color:#1c2636 !important;
}
.swiper-pagination-bullet { background:#2c3d57; }
.swiper-pagination-bullet-active { background:#0B78FF; }

/* “Featured” titel en sectie */
h3, .box-heading, .heading-title { color:#EAF3FF; }
.box, .featured { border-color:#1c2636; }

/* Onderste knopbalk op productkaarten */
.product-thumb .button-group,
.product-layout .product-thumb .button-group,
.button-group {
  background-color: var(--bar-bg) !important;
  border-top: 1px solid var(--bar-border) !important;
}
.button-group .btn,
.product-thumb .button-group button {
  background: transparent !important;
  color: var(--bar-text) !important;
  border: none !important;
  transition: color 0.15s ease-in-out;
}
.button-group .btn:hover,
.product-thumb .button-group button:hover {
  color:#00d1ff !important;
}

/* Dropdowns & selects */
.dropdown-menu {
  background:#0f1420;
  color:var(--color-text);
  border:1px solid #1c2636;
}
.dropdown-menu > li > a { color:var(--color-text); }
.dropdown-menu > li > a:hover {
  background:#101a2a;
  color:var(--color-accent);
}
select.form-control, .form-select {
  background:#0d1220;
  color:var(--color-text);
  border:1px solid #1c2636;
}
.form-control:focus, .form-select:focus {
  background:#0f1626;
  border-color:var(--color-secondary);
  box-shadow:none;
}

/* Brand/partners blokken */
.brand, .carousel, .manufacturer, .swiper-viewport + .box {
  border-color:#1c2636 !important;
  background:#0f1420 !important;
}

/* Breadcrumb */
.breadcrumb {
  background:#0a0f19;
  border-color:#16233a;
}
.breadcrumb a { color:var(--color-text); }
.breadcrumb a:hover { color:var(--color-accent); }
/* ==== FORCE MATCH: menu-balk exact als cart-knop ==== */
#menu,
#menu .navbar,
#menu .nav,
.navbar-default #menu {
  background-color: var(--bar-bg) !important;
  background-image: none !important; /* kill theme gradient */
  box-shadow: none !important;
  border-bottom: 1px solid var(--bar-border) !important;
}

/* Menu-links */
#menu .nav > li > a {
  color: var(--bar-text) !important;
}
#menu .nav > li > a:hover,
#menu .nav > li.open > a,
#menu .nav > li.active > a {
  background-color: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}

/* ==== Productkaart onderbalk exact als cart-knop ==== */
.product-thumb .button-group,
.product-layout .product-thumb .button-group,
.button-group {
  background-color: var(--bar-bg) !important;
  border-top: 1px solid var(--bar-border) !important;
}

/* individuele knoppen in de onderbalk: geen lichtgrijze tiles meer */
.product-thumb .button-group button,
.button-group .btn,
.product-thumb .button-group > * {
  background: transparent !important;
  color: var(--bar-text) !important;
  border: none !important;
}

/* lichte scheidslijn tussen de icon-knoppen */
.product-thumb .button-group button + button,
.button-group .btn + .btn,
.product-thumb .button-group > * + * {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}

/* hover-accent */
.product-thumb .button-group button:hover,
.button-group .btn:hover {
  color: #00d1ff !important;
}
/* ==== Forceer menubalk exact als cart-knop ==== */
/* OpenCart 4 gebruikt vaak Bootstrap .bg-primary op #menu */
#menu,
#menu .navbar,
#menu .navbar-collapse,
#menu .container,
.navbar-dark.bg-primary,
.bg-primary {
  background-color: var(--bar-bg) !important;   /* #2b3b55 */
  background-image: none !important;
  box-shadow: none !important;
  border: 0;
}

/* Menulinks */
#menu .nav > li > a,
#menu .navbar-nav > li > a,
#menu .navbar-nav .nav-link {
  color: var(--bar-text) !important;
}
#menu .nav > li > a:hover,
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav .nav-link:hover,
#menu .nav > li.open > a,
#menu .nav > li.active > a {
  background-color: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}

/* Smalle ‘strip’/bar direct onder #menu (als aanwezig) */
#menu + .container .alert,
#menu + .container .breadcrumb,
#menu + .container .navbar,
#menu + .container .bg-primary {
  background-color: var(--bar-bg) !important;
  background-image: none !important;
  border-color: var(--bar-border) !important;
}

/* Onderste knopbalk op productkaarten consistent houden */
.product-thumb .button-group,
.product-layout .product-thumb .button-group,
.button-group {
  background-color: var(--bar-bg) !important;
  border-top: 1px solid var(--bar-border) !important;
}
.product-thumb .button-group button,
.button-group .btn {
  background: transparent !important;
  color: var(--bar-text) !important;
  border: none !important;
}
.product-thumb .button-group button + button,
.button-group .btn + .btn {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}
.product-thumb .button-group button:hover,
.button-group .btn:hover {
  color: #00d1ff !important;
}
/* ===== Mega-/dropdown-menu leesbaar maken ===== */
#menu .dropdown-menu,
#menu .dropdown-submenu .dropdown-menu {
  background-color: #0f1420 !important;
  border: 1px solid #1c2636 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
  opacity: 1 !important;                 /* kill transparency */
  backdrop-filter: none !important;
}

/* Alle tekst binnen het menu goed leesbaar */
#menu .dropdown-menu,
#menu .dropdown-menu * {
  color: #EAF3FF !important;              /* helder tekst */
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Normale menu-items */
#menu .dropdown-menu .dropdown-item,
#menu .dropdown-menu li > a {
  display: block;
  padding: .5rem .75rem;
  background: transparent !important;
}

/* Hover/focus: donker vlak + Xumi accentkleur */
#menu .dropdown-menu .dropdown-item:hover,
#menu .dropdown-menu li > a:hover,
#menu .dropdown-menu .dropdown-item:focus,
#menu .dropdown-menu li > a:focus {
  background-color: #101a2a !important;
  color: #00d1ff !important;
}

/* Actief/gekozen item zichtbaar */
#menu .dropdown-menu .dropdown-item.active,
#menu .dropdown-menu li.active > a {
  background-color: #12243a !important;
  color: #fff !important;
}

/* “Disabled”/0 stuks: nog steeds leesbaar, maar gedempt */
#menu .dropdown-menu .dropdown-item.disabled,
#menu .dropdown-menu .disabled > a,
#menu .dropdown-menu .text-muted {
  color: #8aa0bf !important;
  opacity: 0.9 !important;
}

/* Scheidingslijnen en randjes subtiel */
#menu .dropdown-divider,
#menu .dropdown-menu .divider {
  border-top: 1px solid #1c2636 !important;
}

/* Rand/uitlijning van het megamenu-paneel zelf */
#menu .dropdown-menu.megamenu,
#menu .dropdown-menu .megamenu {
  background-color: #0f1420 !important;
  border-color: #1c2636 !important;
}
/* Topbar-tekst (currency, telefoon, account, wishlist, cart, checkout) lichter maken */
#top,
#top a,
#top .list-inline > li > a,
#top .dropdown > a,
#top .btn-link,
#top i,
#top .fa {
  color: #EAF3FF !important;          /* zelfde lichte tekstkleur als de rest */
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Hover-accent in de topbar */
#top a:hover,
#top .dropdown > a:hover {
  color: #00D1FF !important;           /* accent */
}
/* ===== Mini-cart dropdown (kleur-match dark theme) ===== */
#cart .dropdown-menu,
#cart .dropdown-menu.show {
  background-color: #0f1420 !important;             /* paneel */
  color: var(--color-text) !important;
  border: 1px solid #1c2636 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
  border-radius: .5rem !important;
}

/* Productregel + thumbnail */
#cart .dropdown-menu .table,
#cart .dropdown-menu .table tr,
#cart .dropdown-menu .table td {
  background: transparent !important;
  border-color: #1c2636 !important;
  color: var(--color-text) !important;
}
#cart .dropdown-menu .img-thumbnail,
#cart .dropdown-menu .img-thumbnail img {
  background: #101826 !important;
  border-color: #1c2636 !important;
}

/* Producttitel/link */
#cart .dropdown-menu a,
#cart .dropdown-menu .text-start a {
  color: var(--color-accent) !important;
}
#cart .dropdown-menu a:hover,
#cart .dropdown-menu .text-start a:hover {
  color: var(--color-secondary) !important;
}

/* Close/X knop rechts */
#cart .dropdown-menu .btn-danger,
#cart .dropdown-menu .btn-close,
#cart .dropdown-menu .btn {
  background-color: var(--bar-bg) !important;       /* zelfde tint als balken */
  color: #fff !important;
  border: none !important;
}
#cart .dropdown-menu .btn-danger:hover,
#cart .dropdown-menu .btn-close:hover,
#cart .dropdown-menu .btn:hover {
  background-color: #364a6e !important;             /* iets lichter bij hover */
}

/* Subtotal/Total tabel */
#cart .dropdown-menu .table-bordered,
#cart .dropdown-menu .table-bordered td,
#cart .dropdown-menu .table-bordered th {
  border-color: #1c2636 !important;
}
#cart .dropdown-menu .table-bordered th {
  background: #101826 !important;
  color: var(--color-text) !important;
}
#cart .dropdown-menu .table-bordered td {
  background: #0f1420 !important;
  color: var(--color-text) !important;
}

/* Footer-links “View Cart / Checkout” */
#cart .dropdown-menu .text-end a {
  color: var(--color-accent) !important;
}
#cart .dropdown-menu .text-end a:hover {
  color: var(--color-secondary) !important;
}

/* Klein randje/afscheiding tussen content en totals */
#cart .dropdown-menu hr,
#cart .dropdown-menu .divider {
  border-top: 1px solid #1c2636 !important;
  opacity: 1 !important;
}
/* ===== Slider (Swiper) pijlen & bullets lichter maken ===== */

/* Pijlen */
.swiper-button-next,
.swiper-button-prev {
  background-color: rgba(255,255,255,0.08) !important; /* subtiele tile */
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: .5rem !important;
  opacity: 1 !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* Het ‘icoon’ zelf (Swiper gebruikt ::after) */
.swiper-button-next::after,
.swiper-button-prev::after {
  color: #EAF3FF !important;             /* licht icoon */
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Bullets */
.swiper-pagination-bullet {
  background: #6f86a6 !important;        /* lichter grijsblauw */
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background: #00D1FF !important;        /* Xumi accent */
  box-shadow: 0 0 8px rgba(0,209,255,0.45);
}
/* ========== SLIDER: pijlen en bullets lichter & zichtbaarder ========== */

/* Pijlen (dek alle containers/varianten af) */
#slideshow .swiper-button-next,
#slideshow .swiper-button-prev,
.swiper-viewport .swiper-button-next,
.swiper-viewport .swiper-button-prev,
.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev,
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
  background-color: rgba(255,255,255,0.12) !important;  /* lichter tile */
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: .5rem !important;
  opacity: 1 !important;
  color: #EAF3FF !important; /* sommige themes lezen 'color' uit */
}

#slideshow .swiper-button-next:hover,
#slideshow .swiper-button-prev:hover,
.swiper-viewport .swiper-button-next:hover,
.swiper-viewport .swiper-button-prev:hover,
.swiper-container .swiper-button-next:hover,
.swiper-container .swiper-button-prev:hover,
.swiper .swiper-button-next:hover,
.swiper .swiper-button-prev:hover {
  background-color: rgba(255,255,255,0.2) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* Het chevron-icoon zelf */
#slideshow .swiper-button-next::after,
#slideshow .swiper-button-prev::after,
.swiper-viewport .swiper-button-next::after,
.swiper-viewport .swiper-button-prev::after,
.swiper-container .swiper-button-next::after,
.swiper-container .swiper-button-prev::after,
.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
  color: #EAF3FF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
  opacity: 1 !important;
}

/* Bullets / pagination */
#slideshow .swiper-pagination-bullet,
.swiper-viewport .swiper-pagination-bullet,
.swiper-container .swiper-pagination-bullet,
.swiper .swiper-pagination-bullet,
.swiper-pagination .swiper-pagination-bullet {
  background-color: #9bb1cf !important;   /* lichter grijsblauw */
  opacity: 1 !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

#slideshow .swiper-pagination-bullet-active,
.swiper-viewport .swiper-pagination-bullet-active,
.swiper-container .swiper-pagination-bullet-active,
.swiper .swiper-pagination-bullet-active,
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #00D1FF !important;   /* Xumi accent */
  box-shadow: 0 0 8px rgba(0,209,255,0.45) !important;
  border-color: rgba(0,209,255,0.6) !important;
}
/* ===== SHOPPING CART dark-mode fix ===== */

/* Algemene achtergrond */
#checkout-cart,
#checkout-cart .container {
  background: #0f1420 !important;
  color: #EAF3FF !important;
}

/* Tabellen */
#checkout-cart table,
#checkout-cart .table,
#checkout-cart .table > :not(caption) > * > * {
  background: #101826 !important;
  color: #EAF3FF !important;
  border-color: #1c2636 !important;
}

#checkout-cart .table th {
  background: #142033 !important;
  color: #EAF3FF !important;
  border-color: #1c2636 !important;
}

#checkout-cart .table td {
  background: #0f1420 !important;
  border-color: #1c2636 !important;
}

/* Invoerveld hoeveelheid */
#checkout-cart input.form-control {
  background: #0f1420 !important;
  color: #EAF3FF !important;
  border: 1px solid #1c2636 !important;
}
#checkout-cart input.form-control:focus {
  border-color: #00D1FF !important;
  box-shadow: 0 0 6px rgba(0,209,255,0.3);
}

/* Knoppen in de cart-tabel */
#checkout-cart .btn,
#checkout-cart button {
  border: none !important;
  color: #fff !important;
  background-color: #2b3b55 !important;   /* zelfde balkkleur */
}
#checkout-cart .btn:hover,
#checkout-cart button:hover {
  background-color: #00D1FF !important;
  color: #000 !important;
}

/* Secties “Estimate Shipping / Use Coupon” */
#checkout-cart .card,
#checkout-cart .accordion-item,
#checkout-cart .panel-default,
#checkout-cart .panel {
  background-color: #101826 !important;
  border: 1px solid #1c2636 !important;
  color: #EAF3FF !important;
}

/* Panel headers / titels */
#checkout-cart .panel-heading,
#checkout-cart .accordion-header,
#checkout-cart .card-header {
  background-color: #142033 !important;
  border-bottom: 1px solid #1c2636 !important;
  color: #EAF3FF !important;
}

/* Footer knoppen */
#checkout-cart .buttons .pull-left .btn-primary,
#checkout-cart .buttons .pull-right .btn-primary {
  background-color: #00D1FF !important;
  border: none !important;
  color: #000 !important;
}
#checkout-cart .buttons .pull-left .btn-primary:hover,
#checkout-cart .buttons .pull-right .btn-primary:hover {
  background-color: #40E0FF !important;
}

/* Teksten onder secties */
#checkout-cart p,
#checkout-cart label,
#checkout-cart small {
  color: #C7D4E5 !important;
}
/* ===== Zoekbalk tekst en placeholder beter leesbaar ===== */
#search input[type="text"],
#search .form-control,
#search input.form-control {
  background-color: #0f1420 !important;   /* donkere achtergrond */
  color: #EAF3FF !important;              /* lichte tekstkleur */
  border: 1px solid #1c2636 !important;
}

#search input[type="text"]::placeholder,
#search .form-control::placeholder,
#search input.form-control::placeholder {
  color: #A8B6CC !important;               /* lichtere placeholdertekst */
  opacity: 1 !important;
}

#search input[type="text"]:focus,
#search .form-control:focus,
#search input.form-control:focus {
  border-color: #00D1FF !important;        /* blauwe rand bij focus */
  box-shadow: 0 0 6px rgba(0,209,255,0.3);
  outline: none !important;
}
/* Zoekveld: tekst écht licht maken, ongeacht andere styles */
#search input[type="text"],
#search .form-control,
.header .search input,
.search .form-control,
.input-group #search input[type="text"] {
  color: #FFFFFF !important;        /* nog lichter dan eerder */
  caret-color: #FFFFFF !important;  /* cursor zichtbaar */
  opacity: 1 !important;            /* sommige themes dimmen inputs */
  -webkit-text-fill-color: #FFFFFF; /* Safari/Chrome autofill fix */
  font-weight: 500;
  background-color: #0f1420 !important;
  border: 1px solid #1c2636 !important;
}

/* Placeholder ook duidelijk lichter */
#search input::placeholder,
#search .form-control::placeholder,
.search .form-control::placeholder {
  color: #CFE2FF !important;        /* very light placeholder */
  opacity: 1 !important;
}

/* Autofill achtergrond en tekst fixen (Chrome/Safari) */
#search input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #0f1420 inset !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* ===== DARK MODE FIX voor Checkout + Popups ===== */

/* Achtergrond en tekst van checkoutpagina */
#checkout-checkout, .checkout-cart, .checkout {
  background-color: #0f1420 !important;
  color: #EAF3FF !important;
}

/* Labels en subtitels */
#checkout-checkout label, 
#checkout-checkout legend,
#checkout-checkout h1, 
#checkout-checkout h2, 
#checkout-checkout h3,
#checkout-checkout .control-label {
  color: #EAF3FF !important;
}

/* Inputvelden */
#checkout-checkout input.form-control,
#checkout-checkout select.form-control,
#checkout-checkout textarea.form-control {
  background-color: #101826 !important;
  color: #FFFFFF !important;
  border: 1px solid #1c2636 !important;
}
#checkout-checkout input.form-control:focus,
#checkout-checkout select.form-control:focus,
#checkout-checkout textarea.form-control:focus {
  border-color: #00D1FF !important;
  box-shadow: 0 0 6px rgba(0,209,255,0.3);
}

/* Modal/popup venster */
.modal-content {
  background-color: #101826 !important;
  color: #EAF3FF !important;
  border: 1px solid #1c2636 !important;
}
.modal-header, .modal-footer {
  background-color: #142033 !important;
  border-color: #1c2636 !important;
}
.modal-header .close {
  color: #EAF3FF !important;
  opacity: 0.8 !important;
}
.modal-header .close:hover {
  color: #00D1FF !important;
  opacity: 1 !important;
}

/* Radio & checkbox labels in modals */
.modal-content label,
.modal-content p {
  color: #EAF3FF !important;
}

/* Knoppen */
.modal-content .btn,
#checkout-checkout .btn {
  background-color: #2b3b55 !important;
  color: #FFFFFF !important;
  border: none !important;
}
.modal-content .btn:hover,
#checkout-checkout .btn:hover {
  background-color: #00D1FF !important;
  color: #000 !important;
}

/* Tabel 'Your Order' */
#checkout-checkout .table,
#checkout-checkout .table > :not(caption) > * > * {
  background-color: #101826 !important;
  color: #EAF3FF !important;
  border-color: #1c2636 !important;
}

/* Subtotal / Total labels */
#checkout-checkout .table td,
#checkout-checkout .table th {
  color: #EAF3FF !important;
}

/* Accordion / Panels bij verzending of betaling */
.panel-default, .card, .accordion-item {
  background-color: #101826 !important;
  border: 1px solid #1c2636 !important;
  color: #EAF3FF !important;
}
.panel-heading, .card-header, .accordion-header {
  background-color: #142033 !important;
  border-bottom: 1px solid #1c2636 !important;
  color: #EAF3FF !important;
}

/* Selectieopties (zoals Flat Rate) beter zichtbaar */
input[type="radio"] + label,
input[type="checkbox"] + label {
  color: #EAF3FF !important;
}

/* Tooltip en kleine tekst */
#checkout-checkout small, 
#checkout-checkout .text-muted {
  color: #B0C0D0 !important;
}
/* ========== Form fields overal LICHT maken ========== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea,
.form-control,
#search input[type="text"],
#search .form-control {
  background-color: #FFFFFF !important;   /* licht */
  color: #0B0F19 !important;              /* donkere tekst */
  border: 1px solid #D1D9E6 !important;   /* zachte rand */
  box-shadow: none !important;
}

/* Placeholder wat gedempt */
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
#search input::placeholder {
  color: #64748B !important;
  opacity: 1 !important;
}

/* Focus-staat: Xumi-blauw */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
#search input:focus,
#search .form-control:focus {
  border-color: #00D1FF !important;
  box-shadow: 0 0 0 .2rem rgba(0,209,255,.20) !important;
  outline: none !important;
}

/* Disabled / readonly */
input[disabled], select[disabled], textarea[disabled],
input[readonly], select[readonly], textarea[readonly] {
  background-color: #F3F6FB !important;
  color: #6B7280 !important;
  border-color: #DAE2EE !important;
}

/* Validatie (optioneel, duidelijker zicht) */
.is-invalid, .has-error .form-control {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 .2rem rgba(239,68,68,.15) !important;
}
.is-valid, .has-success .form-control {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.15) !important;
}

/* Autofill fix (Chrome/Safari) zodat het ook licht blijft */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: #0B0F19 !important;
}

/* Input-groups: naadloze aansluiting met buttons/icoontjes */
.input-group .form-control,
.input-group .form-select {
  background-color: #FFFFFF !important;
  border-color: #D1D9E6 !important;
}
.input-group .btn, .input-group-text {
  background-color: #2b3b55 !important;  /* je balkkleur */
  color: #fff !important;
  border-color: #1f2a3f !important;
}
.input-group .btn:hover, .input-group-text:hover {
  background-color: #00D1FF !important;
  color: #000 !important;
}
/* ===== Sectietitels overal LICHT maken ===== */
/* Panels & Cards */
.panel-heading,
.panel-title,
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.card-header,
.card-title,
.card-header h1,
.card-header h2,
.card-header h3 {
  color: #EAF3FF !important;
}

/* Box/Module headings */
.box-heading,
.box .box-heading,
.heading-title,
.page-title,
#content > h1,
#content > h2,
#content > h3 {
  color: #EAF3FF !important;
}

/* Account/Login/Register specifieke blokken */
.account-login .panel-heading h2,
.account-register .panel-heading h2,
.checkout-cart .panel-heading h2,
#checkout-checkout .panel-heading h2 {
  color: #EAF3FF !important;
}

/* Sidebar headings (rechts) */
.list-group .list-group-item.active,
.list-group .list-group-item .heading,
.list-group .list-group-item > strong {
  color: #EAF3FF !important;
}

/* Subtiel: demp standaard Bootstrap ‘muted’ koppen in headings niet */
.panel-heading .text-muted,
.card-header .text-muted {
  color: #CFE2FF !important; /* iets lichter ipv donkergrijs */
}
/* ===== Forceer alle sectiekoppen naar licht (Xumi) ===== */

/* Panel/kaart headings + alle koppen daarin */
.panel-heading,
.panel-heading *,
.card-header,
.card-header * {
  color: #EAF3FF !important;
  opacity: 1 !important;         /* sommige themes dimmen headings */
  text-shadow: none !important;
}

/* Veelgebruikte varianten van titles */
.panel-title,
.card-title,
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.card-header h1,
.card-header h2,
.card-header h3 {
  color: #EAF3FF !important;
}

/* Pagina- en bloktitels in content */
#content > h1,
#content > h2,
#content > h3,
.page-title,
.heading-title,
.box-heading,
.box .box-heading {
  color: #EAF3FF !important;
}

/* Account/Login/Register/Checkout specifieke blokken */
.account-login .panel-heading h2,
.account-register .panel-heading h2,
.checkout-cart .panel-heading h2,
#checkout-checkout .panel-heading h2,
.account-login .card-header h2,
.account-register .card-header h2 {
  color: #EAF3FF !important;
}

/* Utility-kleuren die je koppen grijs maken → licht maken binnen content/panels */
#content .text-muted,
#content .text-secondary,
.panel-heading .text-muted,
.card-header .text-muted {
  color: #EAF3FF !important;
  opacity: 1 !important;
}
/* --- Forceer paneel/kaart headings naar licht --- */

/* Bootstrap 3 panel-stijl (OC login/register) */
#content .panel-default > .panel-heading,
#content .panel-default > .panel-heading .panel-title,
#content .panel > .panel-heading,
#content .panel > .panel-heading *,
.panel-default > .panel-heading,
.panel-default > .panel-heading .panel-title,
.panel > .panel-heading,
.panel > .panel-heading * {
  color: #EAF3FF !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Bootstrap 4/5 card-stijl (voor andere pagina's) */
#content .card .card-header,
#content .card .card-header *,
.card .card-header,
.card .card-header * {
  color: #EAF3FF !important;
  opacity: 1 !important;
}

/* Titels die soms los in de header staan */
#content .panel-heading h1,
#content .panel-heading h2,
#content .panel-heading h3,
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
#content .card-header h1,
#content .card-header h2,
#content .card-header h3 {
  color: #EAF3FF !important;
}

/* Utility-kleuren die koppen grijs maken → licht maken, maar alleen in headers */
.panel-heading .text-muted,
.card-header .text-muted,
.panel-heading .text-secondary,
.card-header .text-secondary {
  color: #EAF3FF !important;
  opacity: 1 !important;
}
/* === Headings licht maken (site-breed, incl. login/register) === */
body h1, body h2, body h3, body h4, body h5, body h6 {
  color: #EAF3FF !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Extra zeker: specifiek voor de login/register tegels */
#account-login h1, 
#account-login h2, 
#account-login h3,
#account-login .border h1, 
#account-login .border h2, 
#account-login .border h3 {
  color: #EAF3FF !important;
}

/* Grijs-makende utility-klassen in koppen neutraliseren */
#account-login .border .text-muted,
#account-login .border .text-secondary {
  color: #EAF3FF !important;
  opacity: 1 !important;
}