/* ============================================================
 * Brightness Hosting — WHMCS-restyle in het website-ontwerp.
 * Herbruikt de designtokens en header/footer van brightness-hosting.com.
 * Doel: de klantomgeving/cart voelt als onderdeel van de site.
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --bw-night:#0A1B3D; --bw-night-deep:#061229; --bw-blue:#1B5CFF; --bw-blue-hover:#0B45D9;
  --bw-lime:#C2F14E; --bw-cream:#FBF8F3; --bw-line:#E6E1D7; --bw-text:#16233F;
  --bw-text-soft:#5C6B85; --bw-text-intro:#44526E; --bw-white:#FFFFFF;
  --bw-success-bg:#F2FADF; --bw-success-fg:#3D6B00; --bw-field-border:#D5CFC3;
  --bw-font-head:"Bricolage Grotesque",sans-serif; --bw-font-body:"Instrument Sans",system-ui,sans-serif;
  --bw-radius-field:11px; --bw-radius-card:16px; --bw-radius-lg:21px; --bw-radius-pill:999px;
  --bw-container:1220px; --bw-gutter:20px;
  --bw-shadow-btn:0 10px 24px rgba(27,92,255,.3); --bw-shadow-card:0 18px 44px rgba(10,27,61,.14);
}

/* ---- Basis ---- */
body, body.primary-bg-color{ background:var(--bw-cream) !important; color:var(--bw-text); font-family:var(--bw-font-body); }
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{ font-family:var(--bw-font-head) !important; color:var(--bw-night); letter-spacing:-.02em; }
a{ color:var(--bw-blue); }
a:hover{ color:var(--bw-blue-hover); }
#main-body{ background:transparent; padding-top:26px; }
.container{ max-width:var(--bw-container); }

/* ============ Header (overgenomen van de site) ============ */
.bwx-header .bwx-sep{ opacity:.35; }
.bw-topbar{ background:var(--bw-night); color:#CFE0FF; font-size:13px; }
.bw-topbar__row{ display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center; justify-content:space-between; padding:9px var(--bw-gutter); max-width:var(--bw-container); margin:0 auto; }
.bw-topbar__trust{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.bw-topbar__trust span{ display:inline-flex; align-items:center; gap:7px; }
.bw-topbar__meta{ display:flex; gap:10px; align-items:center; }
.bw-topbar a{ color:#CFE0FF; } .bw-topbar a:hover{ color:#fff; text-decoration:none; }
.bw-dot{ width:6px; height:6px; border-radius:50%; background:var(--bw-lime); display:inline-block; }
.bw-header{ position:sticky; top:0; z-index:40; background:rgba(251,248,243,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--bw-line); }
.bw-header__inner{ display:flex; align-items:center; gap:18px; padding:14px var(--bw-gutter); max-width:var(--bw-container); margin:0 auto; }
.bw-logo{ display:flex; flex-direction:column; gap:1px; text-decoration:none; }
.bw-logo:hover{ text-decoration:none; }
.bw-logo__name{ font-family:var(--bw-font-head); font-weight:800; font-size:23px; letter-spacing:-.035em; color:var(--bw-night); line-height:1; }
.bw-logo__sub{ font-size:10.5px; color:var(--bw-text-soft); letter-spacing:.04em; text-transform:uppercase; }
.bw-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-left:auto; }
.bw-nav a{ padding:9px 12px; border-radius:8px; color:var(--bw-text); font-size:14.5px; font-weight:500; text-decoration:none; }
.bw-nav a:hover{ background:#F0EBE2; color:var(--bw-night); text-decoration:none; }
.bw-nav-actions{ display:inline-flex; align-items:center; gap:12px; margin-left:14px; }
.bw-nav-login{ font-size:14.5px; font-weight:500; }
.bwx-loc{ background:none; border:0; color:var(--bw-text-soft); font-size:13.5px; cursor:pointer; padding:6px 8px; border-radius:8px; }
.bwx-loc:hover{ background:#F0EBE2; color:var(--bw-night); }
.bw-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:var(--bw-radius-field); font-weight:600; font-size:14.5px; border:1px solid transparent; text-decoration:none; cursor:pointer; }
.bw-btn--primary{ background:var(--bw-blue); color:var(--bw-white); box-shadow:var(--bw-shadow-btn); }
.bw-btn--primary:hover{ background:var(--bw-blue-hover); color:var(--bw-white); text-decoration:none; }
.bwx-nav-toggle{ display:none; margin-left:auto; min-height:44px; min-width:44px; border:1px solid var(--bw-line); background:var(--bw-white); border-radius:10px; font-size:18px; cursor:pointer; color:var(--bw-night); }
@media (max-width:900px){
  .bwx-nav-toggle{ display:inline-block; }
  .bw-header__inner{ flex-wrap:wrap; }
  .bw-nav{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:4px; padding-top:10px; }
  .bw-header.is-open .bw-nav{ display:flex; }
  .bw-nav-actions{ margin:8px 0 0; flex-wrap:wrap; }
}

/* ============ Knoppen (WHMCS/Bootstrap → brightwp) ============ */
.btn{ border-radius:var(--bw-radius-field) !important; font-weight:600 !important; font-family:var(--bw-font-body); }
.btn-primary,.btn-info{ background:var(--bw-blue) !important; border-color:var(--bw-blue) !important; color:#fff !important; box-shadow:var(--bw-shadow-btn); }
.btn-primary:hover,.btn-info:hover{ background:var(--bw-blue-hover) !important; border-color:var(--bw-blue-hover) !important; }
.btn-success,.checkout-button,#checkout,a.btn-checkout{ background:var(--bw-blue) !important; border-color:var(--bw-blue) !important; color:#fff !important; box-shadow:var(--bw-shadow-btn); }
.btn-success:hover{ background:var(--bw-blue-hover) !important; border-color:var(--bw-blue-hover) !important; }
.btn-default,.btn-secondary{ background:var(--bw-white) !important; border:1px solid var(--bw-night) !important; color:var(--bw-night) !important; }
.btn-default:hover,.btn-secondary:hover{ background:var(--bw-night) !important; color:#fff !important; }

/* ============ Kaarten / panelen ============ */
.card,.panel,.order-summary,.summary-container,.sidebar,.cart-item,.product-info,
.well,.list-group,.checkout-items,.clientareacontent .card{
  border-radius:var(--bw-radius-card) !important; border:1px solid var(--bw-line) !important;
  background:var(--bw-white) !important; box-shadow:none !important;
}
.card-header,.panel-heading{
  border-top-left-radius:var(--bw-radius-card) !important; border-top-right-radius:var(--bw-radius-card) !important;
  font-family:var(--bw-font-head); font-weight:700;
}
/* Donkere kopbalken (Product/Options, Order Summary) → nachtblauw */
.panel-primary>.panel-heading,.card-primary>.card-header,.summary-container .title,
thead.table-primary, .table-primary th{
  background:var(--bw-night) !important; color:#fff !important; border-color:var(--bw-night) !important;
}
.panel-primary>.panel-heading .panel-title,.card-primary>.card-header .panel-title{ color:#fff !important; }
.summary-container .title,.order-summary .title{ font-family:var(--bw-font-head); }

/* ============ Tabellen ============ */
.table,.table td,.table th{ border-color:var(--bw-line) !important; }
.table thead th{ color:var(--bw-night); }

/* ============ Cart-sidebar (Categories/Actions/Currency) ============ */
.card-sidebar>.card-header,.card-sidebar>.panel-heading,.panel-sidebar>.panel-heading{
  background:var(--bw-white) !important; border-bottom:1px solid var(--bw-line) !important;
}
.card-sidebar .panel-title,.panel-sidebar .panel-title{ color:var(--bw-night) !important; font-family:var(--bw-font-head); font-weight:700; }
.card-sidebar .list-group-item,.panel-sidebar .list-group-item{ border-color:var(--bw-line) !important; }
.card-sidebar .list-group-item.active,.card-sidebar .active>a,.panel-sidebar .list-group-item.active{
  background:var(--bw-blue) !important; border-color:var(--bw-blue) !important; color:#fff !important;
}
.card-sidebar a,.panel-sidebar a{ color:var(--bw-text); }
.card-sidebar .card-minimise,.card-sidebar .panel-minimise{ color:var(--bw-text-soft) !important; }

/* ============ Cart-icoon in de header ============ */
.bwx-cart{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--bw-radius-field); color:var(--bw-night); font-size:17px; text-decoration:none; }
.bwx-cart:hover{ background:#F0EBE2; color:var(--bw-night); }
.bwx-cart__count{ position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--bw-radius-pill); background:var(--bw-blue); color:#fff; font-family:var(--bw-font-body); font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.bwx-cart__count:empty,.bwx-cart__count[data-empty="1"]{ display:none; }

/* ============ Order Summary "Total Due" ============ */
.order-summary .total,.summary-container .total,.cart-total{ color:var(--bw-night) !important; font-family:var(--bw-font-head); }

/* ============ Velden ============ */
.form-control,.input-group-text{ border-radius:var(--bw-radius-field) !important; border-color:var(--bw-field-border) !important; }
.form-control:focus{ border-color:var(--bw-blue) !important; box-shadow:0 0 0 3px rgba(27,92,255,.15) !important; }

/* ============ Footer ============ */
.bwx-footer{ background:var(--bw-night-deep); color:#C3D2EC; margin-top:48px; }
.bwx-footer__inner{ max-width:var(--bw-container); margin:0 auto; padding:38px var(--bw-gutter) 22px; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start; }
.bwx-footer__name{ font-family:var(--bw-font-head); font-weight:800; font-size:20px; color:#fff; letter-spacing:-.03em; }
.bwx-footer__brand p{ max-width:46ch; font-size:14px; line-height:1.6; margin:8px 0 0; color:#9FB3D6; }
.bwx-footer__links{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
.bwx-footer__links a{ color:#C3D2EC; font-size:14px; text-decoration:none; }
.bwx-footer__links a:hover{ color:#fff; }
.bwx-footer__loc{ background:none; border:1px solid rgba(255,255,255,.2); color:#C3D2EC; border-radius:var(--bw-radius-pill); padding:6px 14px; font-size:13px; cursor:pointer; }
.bwx-footer__loc:hover{ background:rgba(255,255,255,.08); color:#fff; }
.bwx-footer__bar{ border-top:1px solid rgba(255,255,255,.08); text-align:center; padding:16px; font-size:13px; color:#7E93BC; }