@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════════════════════════
   Domein-Direct.nl — WHMCS Twenty-One — Huisstijl-overrides
   ════════════════════════════════════════════════════════════════
   Doel: header (topbar + navbar + breadcrumb) gelijktrekken met
   de statische site (domein-direct.nl).

   Plaatsing op de server:
     templates/twenty-one/css/custom.css

   Vervangt de huidige (zeer korte) custom.css.
   Wordt automatisch ingeladen door head.tpl regel 15-17.

   ════════════════════════════════════════════════════════════════
   STRUCTUUR
     1.  Huisstijl-tokens (CSS-variabelen)
     2.  Lettertype
     3.  Topbar — donkerblauw + gouden accentlijn eronder
     4.  Logo — automatische breedte, vaste hoogte
     5.  Eerste navbar (logo + zoek + cart)
     6.  Zoekbalk — subtiel in huisstijl
     7.  Winkelmandje-knop
     8.  Primair menu — gecentreerd, blauwe hover
     9.  Account-dropdown — blauwe outline-knop
     10. Breadcrumb — wit met blauwe links
     11. Mobiele aanpassingen
   ════════════════════════════════════════════════════════════════ */


/* ── 1. HUISSTIJL-TOKENS ─────────────────────────────────────── */
:root {
  --dd-blue:      #1a2e5a;
  --dd-blue-mid:  #1e4db7;
  --dd-blue-lt:   #3f73c9;
  --dd-blue-pale: #eef4ff;
  --dd-gold:      #e8a020;
  --dd-gold-dk:   #c47d0a;
  --dd-white:     #ffffff;
  --dd-border:    #e6e8ed;
  --dd-text:      #18233b;
  --dd-text-sub:  #4b5563;
  --dd-muted:     #696f7d;
}


/* ── 2. LETTERTYPE ───────────────────────────────────────────── */
/* Plus Jakarta Sans, gelijk aan de statische site.                */
/*                                                                 */
/* Eerdere versie liet Open Sans staan uit vrees dat Font Awesome  */
/* zou breken. Dat is niet zo: FA zet zijn lettertype op de iconen */
/* zelf (.fa,.fas{font-family:"Font Awesome 5 Pro"}), dus die      */
/* erven niets van body. Nagekeken in fontawesome-all.min.css.     */
/*                                                                 */
/* WHMCS zet body{font-family:"Open Sans",sans-serif} in           */
/* theme.min.css; dit bestand laadt daarna, dus dit wint.          */
/*                                                                 */
/* Iconen worden hier bewust NIET genoemd. Een <i class="fas">     */
/* binnen een .btn krijgt zijn font van .fas — een regel op de     */
/* knop erft niet door over een element dat zijn eigen             */
/* font-family heeft. Ze met rust laten is dus veiliger dan een    */
/* "vangnet" dat ze eerst op inherit zet.                          */
body,
body.primary-body,
.navbar,
.btn,
.form-control,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}


/* ── 3. TOPBAR — donkerblauw + gouden accentlijn ─────────────── */
header.header .topbar {
  background-color: var(--dd-blue) !important;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 3px solid var(--dd-gold);
  /* Gouden gradiënt-accentlijn (zoals statische site nav__gold) */
  border-image: linear-gradient(90deg, var(--dd-gold), var(--dd-gold-dk)) 1;
  padding: 6px 0;
}

/* Topbar uitgelogd: "Home » Mijn Account » Login" (inline-styled gele links) */
/* Overschrijft de inline style="color:#f4c404" via attribuut-selector */
header.header .topbar a[style*="color:#f4c404"],
header.header .topbar a[style*="color: #f4c404"] {
  color: var(--dd-gold) !important;
  text-decoration: none;
}

header.header .topbar a:hover {
  color: var(--dd-white) !important;
  text-decoration: none;
}

/* Topbar ingelogd: notificatie-knop + "Aangemeld als" */
header.header .topbar .btn {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

header.header .topbar .input-group-text {
  color: rgba(255, 255, 255, 0.85);
  background-color: transparent;
  border: 0;
  font-size: 13px;
}

header.header .topbar .btn-active-client {
  color: var(--dd-white);
  font-weight: 600;
}

header.header .topbar .btn-active-client span {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.7);
}


/* ── 4. LOGO — automatische breedte, mooie hoogte ────────────── */
/* Op 36px hoog matcht het logo de statische site visueel */
header.header .logo-img {
  width: auto !important;
  height: 36px !important;
  max-height: 36px !important;
  max-width: 100% !important;
}

header.header .navbar-brand {
  padding: 18px 0;
  margin-right: 16px;
}


/* ── 5. EERSTE NAVBAR — wit, schoon ──────────────────────────── */
header.header {
  background-color: var(--dd-white);
}

header.header .navbar.navbar-light {
  border-bottom: 0;
  padding: 0;
}


/* ── 6. ZOEKBALK — subtiel in huisstijl ──────────────────────── */
header.header .search {
  border: 1px solid var(--dd-border);
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

header.header .search:focus-within {
  border-color: var(--dd-blue-mid);
  box-shadow: 0 0 0 3px var(--dd-blue-pale);
}

header.header .search .btn {
  color: var(--dd-muted);
}

header.header .search .form-control {
  font-size: 14px;
  color: var(--dd-text);
}

header.header .search .form-control::placeholder {
  color: var(--dd-muted);
}


/* ── 7. WINKELMANDJE-KNOP ────────────────────────────────────── */
header.header .toolbar .nav-link.cart-btn {
  border: 1px solid var(--dd-border);
  color: var(--dd-text-sub);
  border-radius: 8px;
  padding: 8px 14px;
  transition: border-color 0.2s, color 0.2s;
}

header.header .toolbar .nav-link.cart-btn:hover {
  border-color: var(--dd-blue-mid);
  color: var(--dd-blue-mid);
}

header.header .toolbar .nav-link.cart-btn .badge {
  background-color: var(--dd-blue-mid);
  color: var(--dd-white);
}

/* Hamburger-knop (mobiel, < XL) */
header.header .toolbar .nav-link[data-toggle="collapse"] {
  border: 1px solid var(--dd-border);
  color: var(--dd-text);
  border-radius: 8px;
}


/* ── 8. PRIMAIR MENU — gecentreerd ───────────────────────────── */
header.header .main-navbar-wrapper {
  border-top: 1px solid var(--dd-border);
  background-color: var(--dd-white);
}

/* Primair menu staat tussen logo (links) en account-knop (rechts).        */
/* Door margin-left:auto te combineren met secondary's ml-auto verdelen ze */
/* de ruimte, waardoor het primaire menu visueel in het midden komt.      */
header.header #nav.navbar-nav {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Menu-items zelf */
header.header .navbar-nav .nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--dd-text-sub) !important;
  padding: 8px 12px;
  border-radius: 7px;
  margin: 0 2px;
  transition: background 0.2s, color 0.2s;
}

header.header .navbar-nav .nav-link:hover,
header.header .navbar-nav .nav-link.active,
header.header .navbar-nav .nav-item.show > .nav-link,
header.header .navbar-nav .nav-item.active > .nav-link {
  background-color: var(--dd-blue-pale);
  color: var(--dd-blue-mid) !important;
  font-weight: 600;
}

/* Dropdown-menu's onder hoofdmenu */
header.header .dropdown-menu {
  border-radius: 10px;
  border: 1px solid var(--dd-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 8px;
  margin-top: 4px;
}

header.header .dropdown-item {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--dd-text-sub);
}

header.header .dropdown-item:hover,
header.header .dropdown-item.active,
header.header .dropdown-item:active {
  background-color: var(--dd-blue-pale);
  color: var(--dd-blue-mid);
}


/* ── 9. ACCOUNT-DROPDOWN — blauwe outline-knop met persoon-icoon ─ */
/* "Mijn Account ▾" (uitgelogd) en "Hallo, marga! ▾" (ingelogd)      */
/* Robuuste selector: ook .dropdown-toggle expliciet meenemen        */
header.header ul.navbar-nav.ml-auto > .nav-item > .nav-link,
header.header ul.navbar-nav.ml-auto > .nav-item.dropdown > a.nav-link,
header.header ul.navbar-nav.ml-auto > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  border: 1.5px solid var(--dd-blue-mid) !important;
  border-radius: 10px !important;
  padding: 7px 15px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--dd-blue-mid) !important;
  background-color: transparent !important;
  margin-left: 12px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Persoon-icoon vóór de tekst (inline SVG, kleur via stroke) */
header.header ul.navbar-nav.ml-auto > .nav-item > .nav-link::before,
header.header ul.navbar-nav.ml-auto > .nav-item.dropdown > a.nav-link::before,
header.header ul.navbar-nav.ml-auto > li > a::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e4db7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: background-image 0.2s;
}

/* Hover & open dropdown — knop vult met blauw + witte tekst + wit icoon */
header.header ul.navbar-nav.ml-auto > .nav-item > .nav-link:hover,
header.header ul.navbar-nav.ml-auto > .nav-item.show > .nav-link,
header.header ul.navbar-nav.ml-auto > .nav-item.dropdown.show > a.nav-link,
header.header ul.navbar-nav.ml-auto > li > a:hover {
  background-color: var(--dd-blue-mid) !important;
  color: var(--dd-white) !important;
  border-color: var(--dd-blue-mid) !important;
}

header.header ul.navbar-nav.ml-auto > .nav-item > .nav-link:hover::before,
header.header ul.navbar-nav.ml-auto > .nav-item.show > .nav-link::before,
header.header ul.navbar-nav.ml-auto > .nav-item.dropdown.show > a.nav-link::before,
header.header ul.navbar-nav.ml-auto > li > a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}


/* ── 10. BREADCRUMB — wit met blauwe links ───────────────────── */
.master-breadcrumb {
  background-color: var(--dd-white) !important;
  border-bottom: 1px solid var(--dd-border);
}

.master-breadcrumb .breadcrumb {
  background-color: transparent;
  padding: 11px 0;
  margin: 0;
  font-size: 13px;
  color: var(--dd-muted);
}

.master-breadcrumb .breadcrumb-item {
  font-weight: 500;
}

.master-breadcrumb .breadcrumb-item a {
  color: var(--dd-blue-mid);
  text-decoration: none;
}

.master-breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}

.master-breadcrumb .breadcrumb-item.active {
  color: var(--dd-text-sub);
}

/* Scheidingsteken tussen breadcrumb-items */
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--dd-muted);
}


/* ── 11. MOBIELE AANPASSINGEN ───────────────────────────────── */

@media (max-width: 1199.98px) {

  /* Logo iets kleiner op kleinere schermen */
  header.header .logo-img {
    height: 32px !important;
    max-height: 32px !important;
  }

  header.header .navbar-brand {
    padding: 14px 0;
  }

  /* Cart en hamburger compacter */
  header.header .toolbar .nav-link {
    padding: 6px 10px;
  }

  /* Account-knop ook in mobiel menu blauwe outline */
  header.header ul.navbar-nav.ml-auto > .nav-item > .nav-link {
    margin-left: 0;
    margin-top: 8px;
  }
}


/* Sidebar-menu's bij 1000px en kleiner altijd geopend */
@media (max-width: 1000px) {

  /* Inhoud van sidebar-kaarten altijd zichtbaar */
  .sidebar .card-sidebar .collapsable-card-body,
  .sidebar .card-sidebar .collapsable-card-body.card-body-collapsed {
    display: block !important;
  }

  /* In-/uitklap-icoon verbergen */
  .sidebar .card-sidebar .card-minimise {
    display: none !important;
  }
}


@media (max-width: 767.98px) {

  header.header .topbar {
    padding: 4px 0;
    font-size: 12px;
  }

  header.header .topbar .input-group-text {
    font-size: 11px;
  }
}