/* ============================================================
   CraftNode Cart — complete dark-styling
   Basis: officiele WHMCS standard_cart (ongewijzigde HTML/JS)
   Kleuren gelijk aan het CraftNode client-area thema.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root{
  --cn-bg:#0C111B;
  --cn-surface:#111725;
  --cn-surface-2:#161d2e;
  --cn-surface-3:#1c2436;
  --cn-border:#232c40;
  --cn-text:#eef2f8;
  --cn-text-2:#aeb8c9;
  --cn-text-3:#6b7688;
  --cn-primary:#F07235;
  --cn-primary-2:#d95a15;
  --cn-success:#2ee6a0;
  --cn-danger:#f0556d;
  --cn-radius:12px;
}

body{background:var(--cn-bg)!important}
#order-standard_cart{color:var(--cn-text-2);font-family:'Inter',-apple-system,sans-serif}
#order-standard_cart h1,#order-standard_cart h2,#order-standard_cart h3,#order-standard_cart h4{color:var(--cn-text);font-weight:700}
#order-standard_cart a{color:var(--cn-primary)}
#order-standard_cart a:hover{color:var(--cn-primary-2);text-decoration:none}
#order-standard_cart .header-lined{border-color:var(--cn-border)!important;padding-bottom:12px;margin-bottom:20px}

/* ---------- Sidebar (categorieen/acties/currency) ---------- */
#order-standard_cart .cart-sidebar h3,
#order-standard_cart .sidebar-collapsed h3{color:var(--cn-text);font-size:15px;text-transform:uppercase;letter-spacing:.04em}
#order-standard_cart .cart-sidebar .list-group,
#order-standard_cart .cart-sidebar ul{background:transparent;border:0}
#order-standard_cart .cart-sidebar .list-group-item,
#order-standard_cart .cart-sidebar li a{
  background:transparent!important;border-color:var(--cn-border)!important;color:var(--cn-text-2)!important;
  border-radius:8px!important;padding:8px 10px;transition:background .15s;
}
#order-standard_cart .cart-sidebar .list-group-item:hover,
#order-standard_cart .cart-sidebar li a:hover{background:var(--cn-surface-2)!important;color:var(--cn-text)!important}
#order-standard_cart .cart-sidebar select.form-control,
#order-standard_cart select#inputCurrency{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;color:var(--cn-text)!important;
  border-radius:8px!important;
}

/* ---------- Producten (products.tpl) ---------- */
#order-standard_cart .products .product,
#order-standard_cart .product-info{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:var(--cn-radius)!important;color:var(--cn-text-2)!important;overflow:hidden;
  transition:border-color .15s,transform .15s;
}
#order-standard_cart .products .product:hover{border-color:var(--cn-primary)!important;transform:translateY(-2px)}

#order-standard_cart .products .product header span,
#order-standard_cart .product-title{color:var(--cn-text)!important;font-weight:700}
#order-standard_cart .products .product .price,
#order-standard_cart .products .product .amt{color:var(--cn-text)!important;font-weight:700}
#order-standard_cart .products .product .btn-primary{width:100%}
#order-standard_cart .item-qty input,
#order-standard_cart .form-control-qty{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;color:var(--cn-text)!important;
  border-radius:8px!important;text-align:center;
}


/* ---------- Configureproduct: billing-cycle panels ---------- */
#order-standard_cart .product-info,
#order-standard_cart .panel-price{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;border-radius:var(--cn-radius)!important;
}
#order-standard_cart .panel-price.selected,
#order-standard_cart .panel-price:hover{border-color:var(--cn-primary)!important}

#order-standard_cart .product-configurable-options{background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;border-radius:var(--cn-radius)!important;padding:18px!important;margin-bottom:14px}
#order-standard_cart .field-container{margin-bottom:14px}


/* ---------- Checkout ---------- */
#order-standard_cart .checkout-security-msg{color:var(--cn-text-3)!important}


/* ---------- Formvelden (overal in de cart) ---------- */
#order-standard_cart .field,
#order-standard_cart .form-control,
#order-standard_cart .custom-select,
#order-standard_cart input[type=text],
#order-standard_cart input[type=email],
#order-standard_cart input[type=password],
#order-standard_cart input[type=number],
#order-standard_cart input[type=tel],
#order-standard_cart select,
#order-standard_cart textarea{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;color:var(--cn-text)!important;
  border-radius:8px!important;
}
#order-standard_cart select option{background:var(--cn-surface)!important;color:var(--cn-text)!important}
#order-standard_cart .control-label,
#order-standard_cart label{color:var(--cn-text-2)!important;font-weight:500;display:block!important;margin-bottom:8px!important}
#order-standard_cart .form-group{margin-bottom:18px!important}
#order-standard_cart .form-group > label + br{display:none!important}
#order-standard_cart .form-control,
#order-standard_cart input[type=text],
#order-standard_cart input[type=email],
#order-standard_cart input[type=password],
#order-standard_cart input[type=number],
#order-standard_cart input[type=tel]{
  display:block!important;width:100%!important;height:44px!important;padding:10px 14px!important;font-size:14px!important;box-sizing:border-box!important;
}
/* Help-linkje naast het label mag wél inline blijven, niet full-width */
#order-standard_cart label > a.pull-right{display:inline-block!important;margin-bottom:0!important;font-weight:600}

#order-standard_cart .form-control-static,
#order-standard_cart .form-control-static-inline{color:var(--cn-text)!important}
#order-standard_cart .btn-primary:hover,#order-standard_cart .btn-success:hover,#order-standard_cart #checkout:hover{
  background:var(--cn-primary-2)!important;border-color:var(--cn-primary-2)!important;transform:translateY(-1px);
}
#order-standard_cart .btn-default{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;color:var(--cn-text)!important;border-radius:999px!important;
}
#order-standard_cart .btn-default:hover{background:var(--cn-surface-3)!important}
#order-standard_cart .btn-link{color:var(--cn-text-3)!important}

/* ---------- Alerts ---------- */
#order-standard_cart .alert-info{background:rgba(240,114,53,.1)!important;border:1px solid rgba(240,114,53,.3)!important;color:var(--cn-text-2)!important;border-radius:10px!important}
#order-standard_cart .alert-success{background:rgba(46,230,160,.12)!important;border:1px solid rgba(46,230,160,.3)!important;color:#7ff0c8!important;border-radius:10px!important}
#order-standard_cart .alert-warning,
#order-standard_cart .alert-danger{background:rgba(240,85,109,.12)!important;border:1px solid rgba(240,85,109,.3)!important;color:#ffa3b1!important;border-radius:10px!important}

/* ---------- Tabellen ---------- */
#order-standard_cart table td,#order-standard_cart table th{border-color:var(--cn-border)!important}
#order-standard_cart table th{color:var(--cn-text)!important}

/* ---------- Dropdowns ---------- */
#order-standard_cart .dropdown-menu{background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;border-radius:10px!important}
#order-standard_cart .dropdown-item{color:var(--cn-text-2)!important}
#order-standard_cart .dropdown-item:hover{background:var(--cn-surface-2)!important;color:var(--cn-text)!important}

/* ---------- Recommendations-blok verbergen (op verzoek) ---------- */
#order-standard_cart #cart-recommendations,
#order-standard_cart .recommendations-modal,
#order-standard_cart [id*="recommendation"]{display:none!important}

/* ============================================================
   MODALS (Remove item / Empty cart) — zelfstandige popup-styling.
   De originele modal-JS uit scripts.min.js gebruikt Bootstrap 4
   ($().modal()); dit werkt correct zolang jQuery + Bootstrap-JS
   geladen zijn (zie head.tpl). We stylen alleen het uiterlijk.
   ============================================================ */
#order-standard_cart .modal-content{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;border-radius:16px!important;
  color:var(--cn-text)!important;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
#order-standard_cart .modal-backdrop.show{opacity:.75!important;background:#05080f}
#order-standard_cart .modal-body{padding:28px 24px 20px!important;color:var(--cn-text-2)}
#order-standard_cart .modal-title{color:var(--cn-text)!important}
#order-standard_cart .modal-title i,#order-standard_cart .modal-body i.fa-3x{color:var(--cn-primary)!important;display:block;margin-bottom:12px}
#order-standard_cart .modal-footer{border-top:1px solid var(--cn-border)!important;padding:16px!important;display:flex;gap:10px;justify-content:center}
#order-standard_cart .modal .close{color:var(--cn-text-3)!important;opacity:1;text-shadow:none}

/* ---------- Responsive ---------- */


/* ============================================================
   AANVULLENDE FIXES (ronde 2): witte vlakken, modal-overlay,
   checkout section-headers, recommendations verbergen.
   ============================================================ */

/* Witte vlakken die Bootstrap's eigen .bg-white / .card zetten
   (domeinzoeker, transfer/nameserver opties, card-footer, captcha) */
#order-standard_cart .bg-white,
#order-standard_cart .card,
#order-standard_cart .card-body,
#order-standard_cart .card-header,
#order-standard_cart .card-footer,
#order-standard_cart .captcha-container{
  background:var(--cn-surface)!important;color:var(--cn-text-2)!important;border-color:var(--cn-border)!important;
}
#order-standard_cart .card-header{background:var(--cn-surface-2)!important;color:var(--cn-text)!important}

/* Standalone panel/card (bv. domain-transfer formulier) — echte kaart-look */
#order-standard_cart .panel.card{
  border:1px solid var(--cn-border)!important;border-radius:14px!important;overflow:hidden;
}
#order-standard_cart .panel-heading.card-header{
  padding:18px 22px!important;border-bottom:1px solid var(--cn-border)!important;
}
#order-standard_cart .panel-title.card-title{margin:0!important;font-weight:700!important}
#order-standard_cart .panel-body.card-body{padding:22px!important}
#order-standard_cart .panel-footer.card-footer{
  padding:16px 22px!important;border-top:1px solid var(--cn-border)!important;
}
#order-standard_cart .btn-transfer{
  border-radius:999px!important;padding:10px 26px!important;font-weight:700!important;
}
#order-standard_cart .badge-secondary{background:var(--cn-surface-3)!important;color:var(--cn-text-2)!important}
#order-standard_cart .btn-add-to-cart,#order-standard_cart .btn-warning{background:var(--cn-primary)!important;border-color:var(--cn-primary)!important;color:#fff!important}
/* Domeinzoek-invoer + tld-select + resultatenlijst */
#order-standard_cart input[type=search],
#order-standard_cart .domain-search-input,
#order-standard_cart .tld-dropdown,
#order-standard_cart ul.dropdown-menu li{background:var(--cn-surface-2)!important;color:var(--cn-text)!important;border-color:var(--cn-border)!important}

/* Modal-overlay: Bootstrap toont 'display:block' + 'show' via JS, wij
   moeten zorgen dat de FIXED overlay-positionering niet wordt overschreven
   door theme-regels (zoals eerder .row/.cn-content resets deden). */
#order-standard_cart .modal.fade.show,
#order-standard_cart .modal.show{
  display:block!important;position:fixed!important;inset:0!important;z-index:1050!important;
  background:rgba(5,8,15,.75)!important;overflow-y:auto!important;
}
#order-standard_cart .modal-dialog{margin:8vh auto!important;max-width:420px!important;position:relative!important;z-index:1051!important}
#order-standard_cart .modal:not(.show){display:none!important}

/* Checkout section-headers: minder dominant (subtiele lijn i.p.v. volle balk) */
#order-standard_cart .header-lined,
#order-standard_cart hr.header-lined,
#order-standard_cart h2.header-lined,
#order-standard_cart .section-title,
#order-standard_cart legend{
  background:transparent!important;color:var(--cn-text)!important;
  border:0!important;border-bottom:2px solid var(--cn-primary)!important;
  padding:0 0 8px!important;margin:28px 0 18px!important;font-size:14px!important;
  text-transform:uppercase;letter-spacing:.05em;font-weight:700!important;display:block!important;text-align:left!important;
}

/* Google/social sign-in blok op checkout */
#order-standard_cart .social-login,
#order-standard_cart .existing-account-option,
#order-standard_cart a[href*="google"],
#order-standard_cart .btn-social{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;color:var(--cn-text)!important;border-radius:10px!important;
}

/* Recommendations-blok volledig verbergen (inclusief container met tekst) */
#order-standard_cart *:has(> #cart-recommendations),
#order-standard_cart .recommendations,
#order-standard_cart [class*="recommend"]{display:none!important}

/* ============================================================
   RONDE 3 — Echte layout-fixes (niet alleen kleur).
   ============================================================ */

/* ---- Productkaarten: flexbox i.p.v. rommelige float ---- */

#order-standard_cart .products .product header{
  display:flex!important;align-items:center;justify-content:space-between;
  background:var(--cn-surface-2)!important;
  border-bottom:1px solid var(--cn-border)!important;
  border-radius:var(--cn-radius) var(--cn-radius) 0 0!important;
}

#order-standard_cart .products .product .product-desc p{color:var(--cn-text-2)!important;margin-bottom:10px}
#order-standard_cart .products .product .product-desc ul{list-style:none;padding:0;margin:0}
#order-standard_cart .products .product .product-desc li{padding:5px 0;border-top:1px solid var(--cn-border);color:var(--cn-text-2);font-size:13px}
#order-standard_cart .products .product .product-desc li:first-child{border-top:0}
#order-standard_cart .products .product .product-desc .feature-value{color:var(--cn-text);font-weight:600;margin-right:4px}
#order-standard_cart .products .product footer{
  float:none!important;width:auto!important;margin:0!important;
  display:flex!important;align-items:center;justify-content:space-between;gap:14px;
  background:var(--cn-surface-2)!important;border-top:1px solid var(--cn-border)!important;
  padding:14px 18px!important;text-align:left!important;
}
#order-standard_cart .products .product .product-pricing{margin:0!important;text-align:left!important}
#order-standard_cart .products .product .product-pricing .price{font-size:1.5em!important;color:var(--cn-text)!important;font-weight:800}
#order-standard_cart .products .product .btn-order-now{
  flex-shrink:0;background:var(--cn-primary)!important;border-color:var(--cn-primary)!important;color:#fff!important;
  border-radius:999px!important;padding:9px 18px!important;font-weight:600;white-space:nowrap;
}
#order-standard_cart .products .product .btn-order-now:hover{background:var(--cn-primary-2)!important}

/* margin-bottom hier verwijderd — de grid-gap op .products (zie hierboven)
   regelt nu alle ruimte tussen kaarten, zowel horizontaal als verticaal.
   Deze regel telde er verticaal 24px bovenop, vandaar de scheve ruimte
   tussen rijen t.o.v. tussen kolommen. */
#order-standard_cart .products .row-eq-height > [class*="col-"]{display:flex}

/* ---- Domeinzoek-pagina: alles in EEN nette dark kaart, geen losse witte blokken ---- */
#order-standard_cart .domain-search-container,
#order-standard_cart #domain-search,
#order-standard_cart .register-transfer-options{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:var(--cn-radius)!important;padding:0!important;overflow:hidden;
}
#order-standard_cart .register-transfer-options > div,
#order-standard_cart .domain-option-row{
  padding:16px 20px!important;border-bottom:1px solid var(--cn-border)!important;
  display:flex;align-items:center;gap:12px;background:transparent!important;
}
#order-standard_cart .register-transfer-options > div:last-child{border-bottom:0}
#order-standard_cart textarea,
#order-standard_cart .domain-search-box textarea{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;color:var(--cn-text)!important;
  border-radius:8px!important;width:100%!important;min-height:44px!important;padding:10px 14px!important;
}
#order-standard_cart .tld-dropdown,#order-standard_cart ul.dropdown-menu{
  position:absolute!important;z-index:20;background:var(--cn-surface-3)!important;border:1px solid var(--cn-border)!important;
  border-radius:8px!important;box-shadow:0 10px 30px rgba(0,0,0,.4)!important;max-height:220px;overflow-y:auto;
}
#order-standard_cart .search-domain-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px!important}
#order-standard_cart .search-domain-actions .btn-primary{border-radius:999px!important;padding:10px 24px!important}

/* ---- Checkout: 2-koloms grid voor Personal/Billing i.p.v. 1 lange kolom ---- */


#order-standard_cart #frmCheckout input,#order-standard_cart #frmCheckout select,#order-standard_cart #frmCheckout textarea{
  width:100%!important;padding:10px 12px!important;margin-bottom:0!important;
}

/* Google/social sign-in knop: nette dark chip, niet vol wit */
#order-standard_cart img[src*="google"]{background:#fff;border-radius:4px;padding:2px}
#order-standard_cart .btn-social,
#order-standard_cart a[class*="btn-oauth"]{
  display:flex!important;align-items:center;gap:10px;background:var(--cn-surface-2)!important;
  border:1px solid var(--cn-border)!important;border-radius:10px!important;padding:10px 16px!important;color:var(--cn-text)!important;
  max-width:340px;
}

/* ============================================================
   RONDE 4 — Definitieve fixes o.b.v. exacte WHMCS-bronclasses.
   ============================================================ */

/* --- Recommendations-modal: volledig en permanent verbergen --- */
#order-standard_cart #recommendationsModal{display:none!important}

/* --- Domain-checker widget (WHMCS eigen geel/oranje verloop uit all.css) --- */
#order-standard_cart .domain-checker-container{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;padding:20px!important;
}
#order-standard_cart .domain-checker-bg{background-image:none!important;padding:20px 0!important}
#order-standard_cart .input-group-box{
  background:transparent!important;padding:0!important;
}
#order-standard_cart .domain-checker-container .input-group,
#order-standard_cart .domain-checker-container .input-group-addon,
#order-standard_cart .domain-checker-container .input-group-text{
  background:var(--cn-surface-2)!important;border-color:var(--cn-border)!important;color:var(--cn-text)!important;
}
#order-standard_cart .domain-checker-container textarea,
#order-standard_cart .domain-checker-container input,
#order-standard_cart .domain-checker-container select{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;color:var(--cn-text)!important;border-radius:8px!important;
}
#order-standard_cart .domain-checker-container .multiselect-container{background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important}
#order-standard_cart .domain-checker-container label{color:var(--cn-text-2)!important}

/* Simpele (niet-AI) zoekbalk: input + knop netjes naast elkaar in 1 balk */
#order-standard_cart .domain-checker-container .input-group-box{
  display:flex!important;align-items:stretch;gap:10px;flex-wrap:wrap;
}
#order-standard_cart .domain-checker-container .input-group-box #inputDomain{
  flex:1 1 260px;height:48px!important;border-radius:10px!important;
}
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn{
  flex:0 0 auto;display:flex;
}
#order-standard_cart .domain-checker-container .input-group-box #btnCheckAvailability{
  position:static!important;height:48px;padding:0 26px!important;border-radius:10px!important;font-weight:700!important;
}


/* --- Domain search resultaten (.com / .net rijen) --- */
#order-standard_cart div.domainresults div:not(.btn-group){
  background:var(--cn-surface-2)!important;color:var(--cn-text)!important;border:1px solid var(--cn-border)!important;
}
#order-standard_cart div.domainresults table tr td{color:var(--cn-text-2)!important;border-color:var(--cn-border)!important}
#order-standard_cart div.domainresults{background:var(--cn-surface)!important;border-radius:10px;overflow:hidden;margin-bottom:10px}
#order-standard_cart .domain-bulk-options-box{color:var(--cn-text-2)!important}

/* --- Domeinkeuze radio-opties (register/transfer/owndomain/subdomain) --- */
#order-standard_cart .domain-selection-options .option{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;border-radius:var(--cn-radius)!important;
  padding:16px 18px!important;margin-bottom:12px!important;
}
#order-standard_cart .domain-selection-options label{color:var(--cn-text)!important;font-weight:600;display:flex;align-items:center;gap:8px}
#order-standard_cart .domain-input-group{margin-top:12px}

/* --- Sidebar: elk panel een echte afgebakende kaart --- */
#order-standard_cart .card-sidebar{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:var(--cn-radius)!important;overflow:hidden;margin-bottom:16px!important;
}
#order-standard_cart .card-sidebar .card-header{
  background:var(--cn-surface-2)!important;border-bottom:1px solid var(--cn-border)!important;padding:12px 16px!important;
}
#order-standard_cart .card-sidebar .panel-title{color:var(--cn-text)!important;font-size:13px!important;text-transform:uppercase;letter-spacing:.04em;margin:0}

#order-standard_cart .card-sidebar .list-group{padding:6px}
#order-standard_cart .card-sidebar .badge{background:var(--cn-primary)!important;color:#fff!important;border-radius:999px!important}

/* --- Transfer-domein pagina (adddomain.tpl) --- */
#order-standard_cart .domains-row{background:transparent!important}
#order-standard_cart .input-group-addon{background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;color:var(--cn-text-2)!important}

/* ============================================================
   RONDE 5 — 3-koloms productgrid, sidebar-offset fix, checkout-redesign
   ============================================================ */

/* --- Productgrid: 3 per rij i.p.v. 2, gelijke footer-uitlijning --- */

#order-standard_cart .products .row-eq-height>[class*="col-"]{
  width:auto!important;padding:0!important;margin:0!important;flex:none!important;max-width:none!important;
}


@media(max-width:640px){#order-standard_cart .products .row-eq-height{grid-template-columns:1fr}}

/* --- Sidebar-offset fix: de linker klant-menu-sidebar (ingelogd) overlapt
   de cart-sidebar/content. Cart moet naast het vaste menu beginnen. --- */
body.cn-authed.cn-cartpage #order-standard_cart{margin-left:0!important}
body.cn-authed.cn-cartpage .cn-content{padding-left:32px!important}

/* --- Domeinzoek: zoekveld + Check-knop + TLD-lijst in 1 samenhangende balk --- */
#order-standard_cart .domain-checker-container .row:first-child{
  display:flex!important;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:16px!important;
}
#order-standard_cart .domain-checker-container .row:first-child>[class*="col-"]{
  width:auto!important;flex:1 1 auto;padding:0!important;max-width:none!important;
}
#order-standard_cart .domain-checker-container #btnCheckAvailability{position:static!important;flex:0 0 auto;margin-top:0!important}
#order-standard_cart .domain-checker-container textarea{margin-bottom:0!important}

/* --- Resultatenkolommen (Domain/New Price/Transfer/Renewal) dark --- */
/* --- Recommendations-tekst (los element, geen modal) --- */
#order-standard_cart *:has(> p:only-child):has-text,
#order-standard_cart p:has(+ .btn):empty{display:none}

/* ============================================================
   RONDE 6 — icoon-overlap, section-labels, Recommendations weg,
   sidebar-tags spacing.
   ============================================================ */

/* --- Veld-iconen: correct gepositioneerd i.p.v. over de tekst --- */

#order-standard_cart .field-icon{
  position:absolute!important;left:14px!important;top:50%!important;transform:translateY(-50%)!important;
  color:var(--cn-text-3)!important;pointer-events:none;font-size:13px;z-index:2;margin:0!important;width:auto!important;
}


/* --- Sub-heading section-labels: nette blokjes i.p.v. "doorgestreepte" tekst
   (de border-bottom sneed dwars door de tekst heen) --- */


/* --- Recommendations-tekst definitief weg: target het bovenliggende blok --- */

/* --- Sidebar categorie-tags: meer ademruimte tussen items --- */
#order-standard_cart .cart-sidebar .list-group-item,
#order-standard_cart .card-sidebar a.list-group-item{
  padding:9px 12px!important;margin-bottom:2px;display:block;
}
#order-standard_cart .card-sidebar .card-body{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px!important}
#order-standard_cart .card-sidebar .card-body a{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;border-radius:999px!important;
  padding:6px 12px!important;font-size:12.5px!important;color:var(--cn-text-2)!important;
}
#order-standard_cart .card-sidebar .card-body a:hover{border-color:var(--cn-primary)!important;color:var(--cn-text)!important}

/* --- Checkbox/radio verticaal uitgelijnd (mailinglist checkbox stond los rechts) --- */
#order-standard_cart .checkbox-inline,
#order-standard_cart label.checkbox{display:flex!important;align-items:flex-start;gap:8px}
#order-standard_cart input[type="checkbox"],#order-standard_cart input[type="radio"]{accent-color:var(--cn-primary);width:16px;height:16px;flex-shrink:0}

/* --- Google-signin knop: volledige breedte binnen kaart, niet los zwevend --- */
#order-standard_cart .btn-social,#order-standard_cart a[class*="btn-oauth"]{max-width:100%!important;width:100%}

/* --- Payment-methode radio's: duidelijker actief-icoon uitlijning --- */
#order-standard_cart .payment-method-selection label,
#order-standard_cart .gateway-select label{display:inline-flex!important;align-items:center;gap:8px}

/* ============================================================
   CHECKOUT — correcte 1-koloms redesign (echte structuur: 1 lang
   formulier, geen aparte summary-kolom in de HTML).
   ============================================================ */


#order-standard_cart #frmCheckout .row>[class*="col-"]{padding:0 8px!important;margin-bottom:14px}

/* Bestaande account-kaart (ingelogde klant) netjes */


#order-standard_cart .account .address strong{color:var(--cn-text)!important}
#order-standard_cart .account .small{color:var(--cn-text-3)!important}
#order-standard_cart .account.border-bottom{border-bottom:0!important}

/* Total Due Today balk: volle breedte, duidelijk */
#order-standard_cart [class*="TotalDueToday"],
#order-standard_cart .alert-success:has(strong){
  display:flex;justify-content:space-between;align-items:center;font-size:15px;
}

/* Payment-methode radio's: rij, niet los zwevend */
#order-standard_cart .payment-method-selection,
#order-standard_cart .gateway-select{
  display:flex!important;flex-wrap:wrap;gap:10px;margin-top:10px;
}

/* ============================================================
   Lege winkelwagen — volledige redesign
   ============================================================ */
#order-standard_cart .view-cart-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:64px 24px!important;color:var(--cn-text-2)!important;font-size:15px!important;
}
#order-standard_cart .view-cart-empty::before{
  content:"\f07a";font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Pro","Font Awesome 5 Free","FontAwesome";font-weight:900;font-size:38px;
  line-height:1;color:var(--cn-text-3);margin-bottom:16px;opacity:.55;display:block;
}
#order-standard_cart .view-cart-empty::after{
  content:"Blader door onze diensten en voeg iets toe om te bestellen.";
  display:block;margin-top:8px;font-size:13px;color:var(--cn-text-3)!important;
}

/* ============================================================
   CHECKOUT.TPL — volledige redesign
   ============================================================ */

/* Formulier als centrale kaart (max-breedte, gecentreerd) */
#order-standard_cart #frmCheckout{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:16px!important;padding:28px 32px!important;max-width:680px;margin:0 auto 20px!important;
  box-shadow:0 8px 30px rgba(0,0,0,.22);
}

/* "Already registered / Create account" — compacte toggle boven het formulier */
#order-standard_cart .already-registered{
  display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  max-width:680px;margin:0 auto 14px!important;
}
#order-standard_cart .already-registered p{
  color:var(--cn-text-3)!important;font-size:13px!important;margin:0;order:1;
}
#order-standard_cart .already-registered .pull-right{
  order:2;display:flex;gap:8px;flex:0 0 auto;
}
#order-standard_cart .already-registered .btn{
  flex:0 0 auto;width:auto;background:transparent!important;border:1px solid var(--cn-border)!important;
  color:var(--cn-text-2)!important;border-radius:9px!important;padding:8px 16px!important;
  font-weight:600!important;font-size:13px!important;box-shadow:none!important;transition:all .15s;white-space:nowrap;
}
#order-standard_cart .already-registered .btn:hover{border-color:var(--cn-primary)!important;color:var(--cn-text)!important}
#order-standard_cart .already-registered .btn.btn-info,
#order-standard_cart .already-registered .btn.btn-warning{
  background:transparent!important;border-color:var(--cn-primary)!important;color:var(--cn-primary)!important;
}
#order-standard_cart .already-registered .btn.btn-info:hover,
#order-standard_cart .already-registered .btn.btn-warning:hover{
  background:var(--cn-primary)!important;color:#fff!important;
}

/* ---- Prepend-icon velden: DE fix voor overlappende iconen ---- */


#order-standard_cart .form-group.prepend-icon .field,
#order-standard_cart .form-group.prepend-icon input.form-control{
  padding-left:40px!important;width:100%;
}
#order-standard_cart .form-group.prepend-icon .input-group{position:relative}
#order-standard_cart .form-group.prepend-icon .input-group .field{padding-left:40px!important}

/* Alle formuliervelden binnen checkout consistent */
#order-standard_cart #frmCheckout .field,
#order-standard_cart #frmCheckout .form-control{
  height:44px!important;background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  color:var(--cn-text)!important;border-radius:10px!important;font-size:13px!important;
}
#order-standard_cart #frmCheckout .field:focus,
#order-standard_cart #frmCheckout .form-control:focus{
  border-color:var(--cn-primary)!important;box-shadow:0 0 0 3px rgba(240,114,53,.12)!important;outline:none;
}
#order-standard_cart #frmCheckout textarea.field{height:auto!important;padding:12px!important}
#order-standard_cart #frmCheckout .field::placeholder{color:var(--cn-text-3)!important}
#order-standard_cart #frmCheckout .row{display:flex!important;flex-wrap:wrap!important;margin-left:-7px;margin-right:-7px}
#order-standard_cart #frmCheckout .row > [class*="col-"]{padding-left:7px;padding-right:7px}

/* Google / social sign-in knop (echte provider-widget, alleen omkadering) */
#order-standard_cart .social-signin-btns{
  margin:12px 0 20px!important;display:flex;flex-wrap:wrap;gap:10px;
}
#order-standard_cart .social-signin-btns > *{border-radius:10px!important;overflow:hidden}


/* Password-sterkte balk */
#order-standard_cart .password-strength-meter,
#order-standard_cart [class*="password-strength"]{
  background:var(--cn-surface-2)!important;border-radius:6px!important;overflow:hidden;height:5px!important;margin-top:6px;
}
#order-standard_cart .field-help-text{margin-top:6px!important}

/* Account-select kaarten (meerdere accounts) */
#order-standard_cart .account-select-container .account{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  border-radius:12px!important;padding:14px 16px!important;margin-bottom:10px;cursor:pointer;transition:all .15s;
}
#order-standard_cart .account-select-container .account.active{border-color:var(--cn-primary)!important;background:rgba(240,114,53,.06)!important}
#order-standard_cart .account-select-container .account:hover{border-color:var(--cn-primary)!important}
#order-standard_cart .account-select-container .address strong{color:var(--cn-text)!important}
#order-standard_cart .account-select-container .address .small{color:var(--cn-text-3)!important}

/* Total due today — oranje hero-balk, uitsluitend op checkout.tpl (daar is het een <div>).
   Op viewcart/configureproduct is #totalDueToday een <span class="amt"> die zijn eigen,
   nettere stijl al krijgt via .total-due-today hieronder — dus scope op div om overlap te voorkomen. */
#order-standard_cart div#totalDueToday{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-primary)!important;
  border-radius:12px!important;padding:16px 20px!important;color:var(--cn-text-2)!important;
  font-size:13px!important;text-align:center;margin:0 0 20px!important;
}
#order-standard_cart div#totalDueToday strong{color:var(--cn-primary)!important;font-size:20px!important;font-weight:800!important;margin-left:6px}

/* Payment method radio's als kaarten (i.p.v. losse radio-inline tekst) */
#order-standard_cart #paymentGatewaysContainer{margin-bottom:20px}
#order-standard_cart #paymentGatewaysContainer > p{
  color:var(--cn-text-2)!important;font-size:13px!important;font-weight:600!important;margin-bottom:10px!important;text-align:left!important;
}
#order-standard_cart #paymentGatewaysContainer .text-center{
  display:flex!important;flex-wrap:wrap;gap:10px;text-align:left!important;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline{
  display:flex!important;align-items:center;gap:8px;
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  border-radius:10px!important;padding:11px 16px!important;margin:0!important;
  color:var(--cn-text-2)!important;font-size:13px!important;font-weight:600!important;
  cursor:pointer;transition:all .15s;flex:1 1 auto;min-width:120px;justify-content:center;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline:has(input:checked){
  border-color:var(--cn-primary)!important;background:rgba(240,114,53,.08)!important;color:var(--cn-text)!important;
}
#order-standard_cart #paymentGatewaysContainer input[type="radio"]{accent-color:var(--cn-primary)}

/* Credit card kaarten (opgeslagen betaalmethoden) */
#order-standard_cart .existing-cc-grid{
  background:transparent!important;border:0!important;padding:0!important;margin-bottom:14px;
  display:flex;flex-wrap:wrap;gap:10px;
}

/* Notities veld */
#order-standard_cart textarea.field{width:100%}

/* Mailing-list opt-in blok */
#order-standard_cart .marketing-email-optin{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  border-radius:12px!important;padding:16px!important;margin:20px 0!important;
}
#order-standard_cart .marketing-email-optin h4{font-size:14px!important;margin:0 0 6px!important}
#order-standard_cart .marketing-email-optin p{color:var(--cn-text-3)!important;font-size:12px!important;margin:0 0 10px!important}

/* TOS checkbox */
#order-standard_cart .checkbox-inline{color:var(--cn-text-2)!important;font-size:13px!important;font-weight:500!important}
#order-standard_cart .checkbox-inline a{color:var(--cn-primary)!important;text-decoration:underline}

/* Complete Order knop: consistent oranje, full-width, past bij checkout-knop uit summary */
#order-standard_cart #btnCompleteOrder{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  width:100%!important;max-width:340px;background:var(--cn-primary)!important;border:0!important;
  color:#fff!important;font-weight:700!important;font-size:15px!important;
  padding:15px 20px!important;border-radius:12px!important;margin-top:16px!important;
  box-shadow:0 6px 18px rgba(240,114,53,.35);transition:all .15s ease;
}
#order-standard_cart #btnCompleteOrder:hover{
  background:var(--cn-primary-2)!important;transform:translateY(-1px);box-shadow:0 8px 22px rgba(240,114,53,.45);
}
#order-standard_cart #btnCompleteOrder:disabled{opacity:.4;pointer-events:none;box-shadow:none}

/* Foutmeldingen bovenaan checkout */
#order-standard_cart .checkout-error-feedback{
  max-width:680px;margin:0 auto 16px!important;background:rgba(240,85,109,.08)!important;
  border:1px solid rgba(240,85,109,.3)!important;border-radius:12px!important;color:var(--cn-text-2)!important;
}
#order-standard_cart .checkout-error-feedback p{color:var(--cn-danger)!important;font-weight:600!important;margin:0 0 4px}

/* ============================================================
   R12 — Refinements: nettere productrijen + strakkere summary
   (aangevuld; overschrijft niets, verfijnt bestaande regels)
   ============================================================ */

/* ---------- Productrijen (REVIEW & CHECKOUT) ---------- */
/* Rij als flex: titelblok links, prijs rechts, verwijderknop uiterst rechts */


/* Titelkolom mag groeien */

/* Prijskolom: rechts uitgelijnd, vaste breedte, niet inklappen */


/* Verwijderkolom smal, verticaal gecentreerd */


/* Titel + Edit-link op één lijn, nette spacing */

/* Edit-link: subtiel, geen knop-uiterlijk */


/* Groep/omschrijving onder de titel */


/* Ronde verwijder-knop (de losse × rechts) netjes als icoon-knop */


/* Mobiele inline "Remove"-tekstknop in de titel verbergen op desktop is al d-none;
   op mobiel als subtiele pill tonen */


/* Nette ronding op eerste/laatste item binnen de lijst */


/* ---------- Order Summary: fijnere hiërarchie ---------- */
/* iets meer lucht tussen titel en eerste regel */

/* Totals-regel: label links gedempt, bedrag rechts leesbaar */

/* Divider vóór TOTAL DUE TODAY duidelijker */

/* TOTAL DUE TODAY blok iets meer nadruk */


/* ---------- Package-tabel (configure/redstone, image 4) ---------- */
#order-standard_cart .table-container table,
#order-standard_cart .cart-configure table,
#order-standard_cart table.table{color:var(--cn-text-2)!important}
#order-standard_cart table.table thead th{
  color:var(--cn-text-3)!important;font-weight:600!important;font-size:12px!important;
  text-transform:uppercase;letter-spacing:.05em;border-color:var(--cn-border)!important;
}
#order-standard_cart table.table td{
  border-color:var(--cn-border)!important;vertical-align:middle!important;
}
/* Qty + save + remove knoppen consistent maken (niet meer blauw/rood mengen) */
#order-standard_cart table.table .qtybox,
#order-standard_cart table.table input[type="text"],
#order-standard_cart table.table input[type="number"]{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  color:var(--cn-text)!important;border-radius:8px!important;text-align:center;
}
#order-standard_cart table.table .btn,
#order-standard_cart table.table button{
  border-radius:8px!important;border:1px solid var(--cn-border)!important;
  background:var(--cn-surface-3)!important;color:var(--cn-text-2)!important;
}
#order-standard_cart table.table .btn:hover,
#order-standard_cart table.table button:hover{
  border-color:var(--cn-primary)!important;color:var(--cn-primary)!important;
}
/* Verwijder-knopje in tabel: rode hover i.p.v. permanente rode rand */
#order-standard_cart table.table .btn-danger,
#order-standard_cart table.table .remove{
  background:var(--cn-surface-3)!important;border-color:var(--cn-border)!important;color:var(--cn-text-3)!important;
}
#order-standard_cart table.table .btn-danger:hover,
#order-standard_cart table.table .remove:hover{
  background:rgba(240,85,109,.12)!important;border-color:var(--cn-danger)!important;color:var(--cn-danger)!important;
}

/* ---------- Mobiel ---------- */


/* ============================================================
   R12b — Checkout-login iconen, package-grid, dubbele remove-pill
   ============================================================ */

/* ---------- Checkout: standaard WHMCS prepend-icon velden ---------- */
/* checkout.tpl gebruikt form-group.prepend-icon i.p.v. cn-input-wrap;
   hier los gestyled zodat het icoon niet meer los boven het veld zweeft */
#order-standard_cart .form-group.prepend-icon{position:relative;margin-bottom:14px}
#order-standard_cart .form-group.prepend-icon .field-icon{
  position:absolute!important;left:0!important;top:0!important;
  width:40px!important;height:44px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  z-index:2;color:var(--cn-text-3)!important;font-size:14px;
  pointer-events:none;margin:0;transform:none!important;line-height:normal!important;
}
#order-standard_cart .form-group.prepend-icon .field,
#order-standard_cart .form-group.prepend-icon .field.form-control{
  width:100%;background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  color:var(--cn-text)!important;border-radius:9px!important;box-sizing:border-box!important;
  padding:0 14px 0 40px!important;font-size:14px!important;height:44px!important;
}
#order-standard_cart .form-group.prepend-icon .field:focus,
#order-standard_cart .form-group.prepend-icon .field.form-control:focus{
  border-color:var(--cn-primary)!important;outline:none;box-shadow:0 0 0 3px rgba(240,114,53,.12);
}
#order-standard_cart .form-group.prepend-icon .field::placeholder,
#order-standard_cart .form-group.prepend-icon .field.form-control::placeholder{
  color:var(--cn-text-3)!important;
}
/* Foutmelding-lijst: lege bullets (bv. lege $errormessage-regel) niet tonen */
#order-standard_cart .alert-danger li:empty{display:none!important}

/* Sub-heading titels (EXISTING CUSTOMER LOGIN e.d.) consistent met andere kopjes */


#order-standard_cart #btnExistingLogin{
  background:var(--cn-primary)!important;border:0!important;border-radius:10px!important;
  padding:11px 28px!important;font-weight:700!important;
}
#order-standard_cart #btnExistingLogin:hover{background:var(--cn-primary-2)!important}

/* ---------- Package-grid (products.tpl) — nette 3-koloms layout ---------- */

/* De .row-wrapper 'uitvlakken' zodat de col-md-6-kaarten directe
   grid-items van .products worden i.p.v. flex-items van .row — de
   ontbrekende schakel waardoor .products nooit als grid renderde. */
#order-standard_cart .products .row{
  display:contents!important;
}
#order-standard_cart .products{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
  gap:20px!important;
  align-items:stretch!important;
}
#order-standard_cart .products [class*="col-"]{
  width:100%!important;max-width:100%!important;flex:none!important;
  padding:0!important;margin:0!important;
}
#order-standard_cart .products .product{
  width:auto!important;margin:0!important;height:100%;display:flex;flex-direction:column;
}
#order-standard_cart .products .product .product-desc{flex:1 1 auto}

@media (max-width:575px){
  #order-standard_cart .products{grid-template-columns:1fr!important}
}

/* ---------- Cart: dubbele remove-control forceren weg op desktop ---------- */
/* de mobile-only "Remove"-pill in item-title moet op >575px altijd verborgen zijn,
   ongeacht of Bootstraps eigen d-sm-none geladen is */

/* op mobiel juist de rechter losse ×-kolom verbergen, niet dubbel tonen */


/* ============================================================
   DEFINITIEF — Sub-headings (Payment Details / Additional Notes /
   Personal Information / etc.) — één bron, geen conflicten meer.
   Vervangt alle eerdere losse .sub-heading definities in dit bestand.
   ============================================================ */
#order-standard_cart .sub-heading{
  position:relative;
  height:auto!important;
  border:0!important;
  text-align:left!important;
  margin:28px 0 16px!important;
  padding:0!important;
}
#order-standard_cart .sub-heading:first-child{margin-top:0!important}
#order-standard_cart .sub-heading::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  border-bottom:1px solid var(--cn-border);
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading .primary-bg-color{
  position:relative!important;
  top:0!important;
  display:inline-block!important;
  background:transparent!important;
  color:var(--cn-text)!important;
  font-size:13px!important;
  font-weight:700!important;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:0 0 10px 0!important;
  line-height:1.3!important;
}
#order-standard_cart .sub-heading-borderless{
  height:auto!important;text-align:left!important;margin:20px 0 12px!important;
}
#order-standard_cart .sub-heading-borderless span{
  position:static!important;top:0!important;padding:0!important;
  color:var(--cn-text)!important;font-size:13px!important;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.04em;
}

/* "Already Registered?" balk bovenaan checkout verbergen op verzoek */
/* .already-registered — de "Al een account? Inloggen"-toggle. */

/* Cart-sidebar (Categories / Actions / Choose Currency) verbergen op verzoek */
#order-standard_cart .cart-sidebar{display:none!important}


/* Cart-body na verbergen sidebar: nette gecentreerde max-breedte i.p.v. volledig scherm */

/* ============================================================
   BOOTSTRAP-GRID SHIM — dit cart-thema laadt nergens een echte
   Bootstrap-grid (all.min.css bevat geen enkele .col-* breedte-regel),
   terwijl vrijwel elk .tpl-bestand .row/.col-xs-*/.col-sm-*/.col-md-*/
   .col-lg-* gebruikt voor layout (checkout-velden, domeinregistratie-
   tabel, productconfiguratie, etc). Zonder dit valt alles plat onder
   elkaar. Volledig scoped binnen #order-standard_cart.
   ============================================================ */
#order-standard_cart .row{
  display:flex!important;flex-wrap:wrap!important;margin-left:-8px!important;margin-right:-8px!important;
}
#order-standard_cart .row.no-gutters{margin-left:0!important;margin-right:0!important}
#order-standard_cart [class*="col-"]{
  box-sizing:border-box;width:100%;padding-left:8px;padding-right:8px;
}
#order-standard_cart .row.no-gutters > [class*="col-"]{padding-left:0;padding-right:0}

/* xs / basis (altijd actief, mobile-first) */
#order-standard_cart .col-xs-1,#order-standard_cart .col-1{flex:0 0 8.333%;max-width:8.333%}
#order-standard_cart .col-xs-2,#order-standard_cart .col-2{flex:0 0 16.666%;max-width:16.666%}
#order-standard_cart .col-xs-3,#order-standard_cart .col-3{flex:0 0 25%;max-width:25%}
#order-standard_cart .col-xs-4,#order-standard_cart .col-4{flex:0 0 33.333%;max-width:33.333%}
#order-standard_cart .col-xs-5,#order-standard_cart .col-5{flex:0 0 41.666%;max-width:41.666%}
#order-standard_cart .col-xs-6,#order-standard_cart .col-6{flex:0 0 50%;max-width:50%}
#order-standard_cart .col-xs-7,#order-standard_cart .col-7{flex:0 0 58.333%;max-width:58.333%}
#order-standard_cart .col-xs-8,#order-standard_cart .col-8{flex:0 0 66.666%;max-width:66.666%}
#order-standard_cart .col-xs-9,#order-standard_cart .col-9{flex:0 0 75%;max-width:75%}
#order-standard_cart .col-xs-10,#order-standard_cart .col-10{flex:0 0 83.333%;max-width:83.333%}
#order-standard_cart .col-xs-11,#order-standard_cart .col-11{flex:0 0 91.666%;max-width:91.666%}
#order-standard_cart .col-xs-12,#order-standard_cart .col-12{flex:0 0 100%;max-width:100%}

/* sm ≥576px */
@media (min-width:576px){
  #order-standard_cart .col-sm-1{flex:0 0 8.333%;max-width:8.333%}
  #order-standard_cart .col-sm-2{flex:0 0 16.666%;max-width:16.666%}
  #order-standard_cart .col-sm-3{flex:0 0 25%;max-width:25%}
  #order-standard_cart .col-sm-4{flex:0 0 33.333%;max-width:33.333%}
  #order-standard_cart .col-sm-5{flex:0 0 41.666%;max-width:41.666%}
  #order-standard_cart .col-sm-6{flex:0 0 50%;max-width:50%}
  #order-standard_cart .col-sm-7{flex:0 0 58.333%;max-width:58.333%}
  #order-standard_cart .col-sm-8{flex:0 0 66.666%;max-width:66.666%}
  #order-standard_cart .col-sm-9{flex:0 0 75%;max-width:75%}
  #order-standard_cart .col-sm-10{flex:0 0 83.333%;max-width:83.333%}
  #order-standard_cart .col-sm-11{flex:0 0 91.666%;max-width:91.666%}
  #order-standard_cart .col-sm-12{flex:0 0 100%;max-width:100%}
  #order-standard_cart .col-sm-offset-1,#order-standard_cart .offset-sm-1{margin-left:8.333%}
  #order-standard_cart .col-sm-offset-2,#order-standard_cart .offset-sm-2{margin-left:16.666%}
  #order-standard_cart .col-sm-offset-3,#order-standard_cart .offset-sm-3{margin-left:25%}
}
/* md ≥768px */
@media (min-width:768px){
  #order-standard_cart .col-md-1{flex:0 0 8.333%;max-width:8.333%}
  #order-standard_cart .col-md-2{flex:0 0 16.666%;max-width:16.666%}
  #order-standard_cart .col-md-3{flex:0 0 25%;max-width:25%}
  #order-standard_cart .col-md-4{flex:0 0 33.333%;max-width:33.333%}
  #order-standard_cart .col-md-5{flex:0 0 41.666%;max-width:41.666%}
  #order-standard_cart .col-md-6{flex:0 0 50%;max-width:50%}
  #order-standard_cart .col-md-7{flex:0 0 58.333%;max-width:58.333%}
  #order-standard_cart .col-md-8{flex:0 0 66.666%;max-width:66.666%}
  #order-standard_cart .col-md-9{flex:0 0 75%;max-width:75%}
  #order-standard_cart .col-md-10{flex:0 0 83.333%;max-width:83.333%}
  #order-standard_cart .col-md-11{flex:0 0 91.666%;max-width:91.666%}
  #order-standard_cart .col-md-12{flex:0 0 100%;max-width:100%}
  #order-standard_cart .col-md-offset-1,#order-standard_cart .offset-md-1{margin-left:8.333%}
  #order-standard_cart .col-md-offset-2,#order-standard_cart .offset-md-2{margin-left:16.666%}
  #order-standard_cart .col-md-offset-3,#order-standard_cart .offset-md-3{margin-left:25%}
  #order-standard_cart .col-md-offset-4,#order-standard_cart .offset-md-4{margin-left:33.333%}
}
/* lg ≥992px */
@media (min-width:992px){
  #order-standard_cart .col-lg-2{flex:0 0 16.666%;max-width:16.666%}
  #order-standard_cart .col-lg-3{flex:0 0 25%;max-width:25%}
  #order-standard_cart .col-lg-4{flex:0 0 33.333%;max-width:33.333%}
  #order-standard_cart .col-lg-6{flex:0 0 50%;max-width:50%}
  #order-standard_cart .col-lg-8{flex:0 0 66.666%;max-width:66.666%}
}


/* Productlijst en summary-sidebar naast elkaar, verhouding 2:1, niet uitgerekt */


/* Fix: producten + summary ECHT naast elkaar i.p.v. wrap eronder */


/* wrapper divs rond header+items+empty-cart moeten samen de linkerkolom vormen */


/* Regels binnen het product-blok (basisprijs, configopties, addons) */


/* Config-optie / addon regels: subtieler, met het »-teken als visuele bullet */


/* Subtotal/BTW/setup-blok (summary-totals) */
#order-standard_cart .summary-totals{
  margin-top:8px!important;padding-top:10px!important;
  border-top:1px solid var(--cn-border)!important;
  border-bottom:0!important;
}
#order-standard_cart .summary-totals .clearfix{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0!important;font-size:13px;color:var(--cn-text-2)!important;
}
#order-standard_cart .summary-totals .clearfix .pull-right{
  color:var(--cn-text)!important;font-weight:600;
}

/* ============================================================
   VOLLEDIG HERBOUWD — Winkelwagen/Checkout layout (viewcart.tpl)
   Dit is de ENIGE plek in het bestand voor al deze selectors.
   Vervangt alle eerder verspreide/conflicterende versies.
   ============================================================ */


/* ============================================================
   HERONTWERP v2 — Winkelwagen/Checkout (viewcart.tpl)
   CSS Grid i.p.v. flex: voorspelbaarder, geen stretch/order-gedoe.
   Dit is de ENIGE plek in het bestand voor deze selectors.
   ============================================================ */

/* --- Generieke pill-knoppen (checkout heeft eigen stijl) --- */
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success{
  background:var(--cn-primary)!important;border-color:var(--cn-primary)!important;color:#fff!important;
  border-radius:999px!important;font-weight:600;padding:10px 22px;transition:background .15s,transform .1s;
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover{
  background:var(--cn-primary-2)!important;border-color:var(--cn-primary-2)!important;transform:translateY(-1px);
}

/* Continue-knop op configureproduct.tpl — zelfde vormtaal als de checkout-knop
   (rechthoekig i.p.v. pil), voor consistentie over het hele bestelproces */
#order-standard_cart #orderSummary > .text-center{
  padding:16px 18px 18px!important;margin:0!important;
}
#order-standard_cart #btnCompleteProductConfig{
  display:flex!important;align-items:center;justify-content:center;gap:8px;
  width:100%!important;background:var(--cn-primary)!important;border:0!important;
  color:#fff!important;font-weight:700!important;font-size:14px!important;
  padding:13px 18px!important;border-radius:10px!important;
  box-shadow:0 8px 20px rgba(240,114,53,.28)!important;transition:transform .15s,box-shadow .15s;transform:none!important;
}
#order-standard_cart #btnCompleteProductConfig:hover{
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(240,114,53,.38)!important;
  background:var(--cn-primary)!important;
}

/* --- Lege cart-status --- */
#order-standard_cart:has(.view-cart-empty) .secondary-cart-sidebar,
#order-standard_cart:has(.view-cart-empty) .empty-cart,
#order-standard_cart:has(.view-cart-empty) .cart-sidebar{display:none!important}

/* --- Pagina-breedte: compact, gecentreerd, niet over het hele scherm --- */
#order-standard_cart .cart-body{
  width:100%!important;max-width:1100px!important;margin:0 auto!important;
  float:none!important;padding:0!important;
}

/* --- GRID: twee kolommen, product links / summary rechts (vast 340px) ---
   Zowel viewcart.tpl (.cart-body > .row) als configureproduct.tpl
   (.cart-body form > .row, want daar zit de row binnen een <form>) */
#order-standard_cart .cart-body > .row,
#order-standard_cart .cart-body > form > .row{
  display:grid!important;
  grid-template-columns:1fr 340px;
  gap:20px;
  align-items:start;
  margin:0!important;
}
#order-standard_cart .cart-body > .row > .secondary-cart-body,
#order-standard_cart .cart-body > form > .row > .secondary-cart-body{
  width:auto!important;max-width:none!important;min-width:0!important;
}
#order-standard_cart .cart-body > .row > .secondary-cart-sidebar,
#order-standard_cart .cart-body > form > .row > .secondary-cart-sidebar{
  width:auto!important;max-width:none!important;
  position:sticky;top:20px;
}
@media (max-width:860px){
  #order-standard_cart .cart-body > .row,
  #order-standard_cart .cart-body > form > .row{grid-template-columns:1fr}
}

/* --- Productkaart: compact --- */
#order-standard_cart .view-cart-items-header{
  background:transparent!important;color:var(--cn-text-3)!important;
  border:1px solid var(--cn-border)!important;border-bottom:0!important;
  border-radius:12px 12px 0 0!important;
  padding:14px 18px!important;
  font-size:12px!important;font-weight:600!important;
  text-transform:uppercase;letter-spacing:.03em;
}
#order-standard_cart .view-cart-items{
  background:var(--cn-surface)!important;
  border:1px solid var(--cn-border)!important;
  border-radius:0 0 12px 12px!important;overflow:hidden;
}
#order-standard_cart .view-cart-items .item{
  background:transparent!important;color:var(--cn-text-2)!important;
  padding:16px 18px!important;border-color:var(--cn-border)!important;
}
#order-standard_cart .view-cart-items .item + .item{border-top:1px solid var(--cn-border)!important}
#order-standard_cart .view-cart-items .item > .row{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:12px;margin:0!important;
}
#order-standard_cart .view-cart-items .item > .row > [class*="col-"]{
  flex:0 0 auto;width:auto!important;max-width:none!important;padding:0!important;
}
#order-standard_cart .view-cart-items .item > .row > .col-sm-7,
#order-standard_cart .view-cart-items .item > .row > .col-sm-5{
  flex:1 1 auto!important;min-width:0;
}
#order-standard_cart .view-cart-items .item-title{
  color:var(--cn-text)!important;font-weight:700!important;font-size:14px!important;
}
#order-standard_cart .view-cart-items .item-price{
  text-align:right!important;margin-left:auto;flex:0 0 auto!important;
}
#order-standard_cart .view-cart-items .item-price span,
#order-standard_cart .view-cart-items .item-price .amt{
  color:var(--cn-text)!important;font-weight:700!important;font-size:14px!important;
}
#order-standard_cart .view-cart-items .item-price .cycle{
  color:var(--cn-text-3)!important;font-weight:500!important;font-size:12px!important;
}
#order-standard_cart .btn-remove-from-cart{
  width:32px;height:32px;border-radius:8px!important;
  background:var(--cn-surface-3)!important;border:1px solid var(--cn-border)!important;
  color:var(--cn-text-2)!important;display:flex!important;align-items:center;justify-content:center;
  padding:0!important;
}
#order-standard_cart .btn-remove-from-cart:hover{
  border-color:var(--cn-danger)!important;color:var(--cn-danger)!important;
  background:rgba(240,85,109,.1)!important;
}
#order-standard_cart .empty-cart{
  margin-top:12px!important;padding:0!important;text-align:left;
}
#order-standard_cart .empty-cart .btn{
  background:transparent!important;border:0!important;color:var(--cn-text-3)!important;
  font-size:12px!important;font-weight:500!important;padding:4px 0!important;box-shadow:none!important;
}
#order-standard_cart .empty-cart .btn:hover{color:var(--cn-danger)!important}

/* ============================================================
   ORDER SUMMARY — clean, geen versiering
   Vlakke rijen, duidelijke typografische hiërarchie, één stevige
   knop. Geen accentbalken, bullets, badges of thema-gimmicks.
   ============================================================ */
#order-standard_cart .order-summary{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:12px!important;overflow:hidden;position:relative;
  display:flex!important;flex-direction:column;
}
#order-standard_cart #orderSummary:has(> .text-center) > .order-summary{
  border-bottom:0!important;border-radius:12px 12px 0 0!important;
}
#order-standard_cart #orderSummary > .text-center{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-top:0!important;border-radius:0 0 12px 12px!important;overflow:hidden;position:relative;
  padding:0 18px 18px!important;
}

/* Header — gewoon vet, verder niks */
#order-standard_cart .order-summary h2{
  background:transparent!important;color:var(--cn-text)!important;
  border-bottom:0!important;
  padding:20px 18px 14px!important;margin:0!important;
  font-size:20px!important;font-weight:800!important;
  text-transform:none;letter-spacing:-0.01em;text-align:left;
}
#order-standard_cart #orderSummaryLoader{
  position:absolute!important;top:20px;right:18px;color:var(--cn-text-3)!important;
}
#order-standard_cart .summary-container{
  background:transparent!important;padding:0 18px 18px!important;
  display:flex!important;flex-direction:column;
}

/* Promo-code — simpele rij, label erboven */
#order-standard_cart .cn-promo-block{padding:0 0 16px}
#order-standard_cart .cn-promo-label{
  display:block;color:var(--cn-text-2)!important;font-size:11px!important;font-weight:600!important;
  text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px!important;
}
#order-standard_cart .cn-tax-form{margin-top:10px}
#order-standard_cart .cn-promo-row{display:flex;gap:8px}
#order-standard_cart .cn-promo-input{
  flex:1;min-width:0;background:var(--cn-surface-2)!important;
  border:1px solid var(--cn-border)!important;
  color:var(--cn-text)!important;border-radius:8px!important;padding:10px 12px!important;
  font-size:13px!important;
}
#order-standard_cart .cn-promo-input:focus{
  border-color:var(--cn-primary)!important;
  outline:none;box-shadow:0 0 0 3px rgba(240,114,53,.15);
}
#order-standard_cart .cn-promo-input::placeholder{color:var(--cn-text-3)!important}
#order-standard_cart .cn-promo-btn{
  flex:0 0 auto;padding:0 16px!important;background:var(--cn-surface-3)!important;border:1px solid var(--cn-border)!important;
  color:var(--cn-text)!important;border-radius:8px!important;cursor:pointer;font-weight:600;font-size:12px;
  display:flex!important;align-items:center;justify-content:center;
}
#order-standard_cart .cn-promo-btn:hover{background:var(--cn-primary)!important;border-color:var(--cn-primary)!important;color:#fff!important}
#order-standard_cart .cn-promo-applied{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border);
  border-radius:8px;padding:10px 12px;font-size:13px;color:var(--cn-text)!important;font-weight:600;
}
#order-standard_cart .cn-promo-remove{color:var(--cn-text-3)!important;font-size:11px}
#order-standard_cart .cn-promo-remove:hover{color:var(--cn-danger)!important}

/* ordersummary.tpl content */
#order-standard_cart .summary-container .product-name{
  display:block;color:var(--cn-text)!important;font-size:15px!important;font-weight:700!important;margin-bottom:2px;
}
#order-standard_cart .summary-container .product-group{
  display:block;color:var(--cn-text-3)!important;font-size:12px!important;font-weight:500!important;
  margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--cn-border);
}

/* Prijsopbouw — platte rijen, dunne verdeler */
#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .recurring-totals,
#order-standard_cart .summary-container .bordered-totals{
  border:0!important;margin:0!important;
}
#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .bordered-totals .clearfix,
#order-standard_cart .summary-container .recurring-totals{
  display:flex!important;justify-content:space-between!important;align-items:baseline;
  padding:10px 0!important;font-size:13.5px!important;margin:0!important;
  border-bottom:1px solid var(--cn-border)!important;
}
#order-standard_cart .summary-container .subtotal span:first-child,
#order-standard_cart .summary-container .recurring-totals > .float-left,
#order-standard_cart .summary-container .bordered-totals .clearfix span:first-child{
  color:var(--cn-text-2)!important;font-size:13.5px!important;
}
#order-standard_cart .summary-container .subtotal #subtotal,
#order-standard_cart .summary-container .bordered-totals span[id^="taxTotal"]{
  color:var(--cn-text)!important;font-weight:600!important;
}
#order-standard_cart .summary-container .bordered-totals .clearfix span:first-child{
  color:var(--cn-success)!important;
}
#order-standard_cart .summary-container .bordered-totals #discount{
  color:var(--cn-success)!important;font-weight:600!important;
}
#order-standard_cart .recurring-charges{
  color:var(--cn-text-3)!important;font-size:12px!important;text-align:right;line-height:1.6;
}
#order-standard_cart .recurring-charges .cost{color:var(--cn-text-2)!important;font-weight:600}

/* Totaalbedrag — geen kader, geen achtergrond: gewoon groter/vetter/oranje */
#order-standard_cart .total-due-today{
  display:flex!important;justify-content:space-between!important;align-items:baseline!important;
  padding:16px 0 2px!important;margin-top:2px;border:0!important;
}
#order-standard_cart .total-due-today > span:last-child{
  color:var(--cn-text)!important;font-size:15px!important;order:1;font-weight:700!important;
}
#order-standard_cart .total-due-today .amt{
  color:var(--cn-primary)!important;font-weight:800!important;font-size:26px!important;order:2;
}

#order-standard_cart .express-checkout-buttons:empty{display:none}
#order-standard_cart .express-checkout-buttons .separator{
  text-align:center;color:var(--cn-text-3);font-size:10px;letter-spacing:.08em;margin:10px 0;
}

/* Checkout-knop — simpel, solide, vol breed */
#order-standard_cart .summary-container .text-right{
  text-align:center!important;margin-top:16px;
}
#order-standard_cart .btn-checkout{
  display:flex!important;align-items:center;justify-content:center;gap:8px;
  width:100%!important;background:var(--cn-primary)!important;border:0!important;
  color:#fff!important;font-weight:700!important;font-size:15px!important;
  padding:14px 18px!important;border-radius:10px!important;
  box-shadow:none!important;transition:background .15s;
}
#order-standard_cart .btn-checkout:hover{background:var(--cn-primary-2)!important}
#order-standard_cart .btn-checkout.disabled{opacity:.4!important;pointer-events:none}
#order-standard_cart .cn-secure-note{
  margin:12px 0 0!important;color:var(--cn-text-3)!important;font-size:11.5px!important;
  display:flex!important;align-items:center;justify-content:center;gap:6px;
}
#order-standard_cart .cn-secure-note i{color:var(--cn-text-3)!important;font-size:11px!important}

/* Mobiele "Remove"-tekstknop (naast Edit) mag alleen op mobiel zichtbaar zijn.
   Forceer dit expliciet, ongeacht of Bootstrap's eigen d-sm-none actief is. */
@media (min-width:576px){
  #order-standard_cart .view-cart-items .item-title .visible-xs-inline,
  #order-standard_cart .view-cart-items .item-title .d-inline.d-sm-none{
    display:none!important;
  }
}
@media (max-width:575px){
  #order-standard_cart .view-cart-items .item > .row > .col-sm-1.hidden-xs,
  #order-standard_cart .view-cart-items .item > .row > .col-sm-1.d-none{
    display:none!important;
  }
}

/* ============================================================
   Checkout compacter — kleinere velden, minder witruimte
   ============================================================ */
#order-standard_cart #frmCheckout{
  padding:22px!important;
}
#order-standard_cart #frmCheckout .field,
#order-standard_cart #frmCheckout .form-control{
  height:38px!important;font-size:12px!important;
}
#order-standard_cart #frmCheckout textarea.field{padding:10px!important}
#order-standard_cart #frmCheckout .form-group{margin-bottom:12px!important}
#order-standard_cart #frmCheckout .row > [class*="col-"]{margin-bottom:0!important}

#order-standard_cart .sub-heading{
  margin:18px 0 10px!important;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading .primary-bg-color{
  font-size:11px!important;padding:0 0 7px 0!important;
}

/* Compacte prepend-icon velden: alleen margin, hoogte/font-size komt uit de
   hoofdregel hierboven zodat het icoon altijd exact matcht (was: conflict) */
#order-standard_cart .form-group.prepend-icon{margin-bottom:12px!important}

/* ============================================================
   Checkout: minder scrollen — Straatnaam + Straatnaam 2 naast
   elkaar i.p.v. onder elkaar (was 2x col-sm-12).
   Precieze :has()-targeting zodat alleen dit veldpaar verandert.
   ============================================================ */
#order-standard_cart #frmCheckout .row > div:has(#inputAddress1),
#order-standard_cart #frmCheckout .row > div:has(#inputAddress2){
  width:50%!important;flex:0 0 50%!important;max-width:50%!important;
}

/* Extra verticale compactheid: minder marge tussen sub-heading secties
   en iets minder padding rond het formulier op grote schermen */
#order-standard_cart #frmCheckout{padding:18px 22px!important}
#order-standard_cart .sub-heading{margin:14px 0 8px!important}

/* ============================================================
   Checkout herontwerp — losse kaarten, "Registreren als bedrijf"
   checkbox i.p.v. knoppenpaar, telefoonnummer standaard verborgen.
   ============================================================ */

/* Telefoonnummer-veld: verborgen totdat een klant het zelf nodig heeft
   (WHMCS blijft het gewoon als optioneel veld verwerken) */
#order-standard_cart .cn-hidden-field{display:none!important}

/* Checkbox "Registreren als bedrijf" */
#order-standard_cart .cn-checkbox-toggle{
  display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
  margin:4px 0 18px;color:var(--cn-text-2)!important;font-size:13px!important;font-weight:500!important;
}
#order-standard_cart .cn-checkbox-toggle input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;
}
#order-standard_cart .cn-checkbox-toggle-box{
  flex:0 0 auto;width:18px;height:18px;border-radius:5px;
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  position:relative;transition:all .15s;
}
#order-standard_cart .cn-checkbox-toggle input:checked + .cn-checkbox-toggle-box{
  background:var(--cn-primary)!important;border-color:var(--cn-primary)!important;
}
#order-standard_cart .cn-checkbox-toggle input:checked + .cn-checkbox-toggle-box::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* --- Drie losse kaarten: Persoonlijk+Adres / Beveiliging / Betaling --- */
#order-standard_cart #frmCheckout{
  background:transparent!important;border:0!important;padding:0!important;
  display:flex;flex-direction:column;gap:18px;
}
#order-standard_cart #containerNewUserSignup,
#order-standard_cart #containerNewUserSecurity,
#order-standard_cart .cn-payment-card{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:var(--cn-radius)!important;padding:22px!important;
}
#order-standard_cart #containerNewUserSignup .sub-heading:first-child,
#order-standard_cart #containerNewUserSecurity .sub-heading:first-child,
#order-standard_cart .cn-payment-card .sub-heading:first-child{
  margin-top:0!important;
}


/* ============================================================
   DOMAINREGISTER.TPL — TLD-prijstabel volledig herstijld
   (was: <div class="bg-white"> zonder enige custom-CSS dekking)
   ============================================================ */

/* Featured TLD's (.com / .net grote kaarten bovenaan) */
#order-standard_cart .featured-tlds-container{margin:18px 0 24px}
#order-standard_cart .featured-tld{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:14px!important;padding:20px;text-align:center;margin-bottom:16px;transition:border-color .15s;
}
#order-standard_cart .featured-tld:hover{border-color:var(--cn-primary)!important}
#order-standard_cart .featured-tld .img-container{margin-bottom:12px}
#order-standard_cart .featured-tld .img-container img{max-height:36px;width:auto;filter:brightness(0) invert(1);opacity:.9}
#order-standard_cart .featured-tld .price{color:var(--cn-text)!important;font-weight:700!important;font-size:15px}
#order-standard_cart .featured-tld .price small{color:var(--cn-text-3)!important;font-weight:400}

/* "Browse extensions by category" — titel + pill-filters */
#order-standard_cart .domain-pricing h4{color:var(--cn-text)!important;font-size:15px!important;margin:8px 0 14px!important}
#order-standard_cart .tld-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
#order-standard_cart .tld-filters a.badge{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  color:var(--cn-text-2)!important;border-radius:999px!important;padding:7px 14px!important;
  font-weight:600!important;font-size:12px!important;text-decoration:none;transition:all .15s;
}
#order-standard_cart .tld-filters a.badge:hover,
#order-standard_cart .tld-filters a.badge.active{
  background:var(--cn-primary)!important;border-color:var(--cn-primary)!important;color:#fff!important;
}

/* De prijstabel zelf: kill bg-white, herbouw als donkere kaart */
#order-standard_cart .domain-pricing .bg-white{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:14px!important;overflow:hidden;
}
#order-standard_cart .tld-pricing-header{
  background:var(--cn-surface-2)!important;color:var(--cn-text-3)!important;
  text-transform:uppercase;font-size:11px;letter-spacing:.06em;font-weight:700;
  padding:12px 4px!important;border-bottom:1px solid var(--cn-border)!important;
}
/* WHMCS-eigen CSS (all.min.css) zet een lichtgrijze achtergrond + gekleurde
   border-bottom rechtstreeks op de kolom-divs binnen de header — overschrijven */
#order-standard_cart .tld-pricing-header [class*="col-"]{
  background:transparent!important;border-bottom:0!important;color:var(--cn-text-3)!important;
}
#order-standard_cart .tld-pricing-header .tld-column{
  background:transparent!important;text-align:left!important;padding-left:16px!important;
}
#order-standard_cart .tld-row{
  border-bottom:1px solid var(--cn-border-soft,var(--cn-border))!important;
  padding:14px 4px!important;transition:background .12s;color:var(--cn-text-2)!important;
}
#order-standard_cart .tld-row:hover{background:var(--cn-surface-2)!important}
#order-standard_cart .tld-row:last-of-type{border-bottom:0!important}
#order-standard_cart .tld-row .tld-column strong,
#order-standard_cart .tld-row strong{color:var(--cn-text)!important;font-size:15px!important}
#order-standard_cart .tld-row small{color:var(--cn-text-3)!important}
#order-standard_cart .tld-row .col-xs-4,
#order-standard_cart .tld-row [class*="col-"]{color:var(--cn-text-2)!important}
#order-standard_cart .tld-sale-group{
  display:inline-block;margin-left:8px;background:var(--cn-primary-soft,rgba(240,114,53,.14))!important;
  color:var(--cn-primary)!important;border-radius:999px;padding:2px 9px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
#order-standard_cart .tld-row.no-tlds{color:var(--cn-text-3)!important;padding:30px 4px!important;text-align:center}

/* Domain promo box (onder de tabel) */
#order-standard_cart .domain-promo-box{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:14px!important;padding:18px 20px;color:var(--cn-text-2)!important;
}

/* Volledige TLD-prijssectie (featured TLD's, categorie-filters, prijstabel) verborgen op verzoek */
#order-standard_cart .domain-pricing{display:none!important}

/* "Add Web Hosting" + "Transfer your domain to us" promo-blokken onderaan verborgen op verzoek */
#order-standard_cart .domain-promo-box{display:none!important}

/* ============================================================
   AI-domeinzoekbalk (showAdvancedSearchOptions) — volledige herbouw.
   .input-group had nergens display:flex (geen Bootstrap-CSS geladen),
   waardoor textarea/knop/TLD-select/lengte-select/checkbox los onder
   elkaar vielen i.p.v. als 1 samenhangende balk.
   ============================================================ */
#order-standard_cart .domain-checker-advanced .input-group-lg.input-group-box{
  display:flex!important;flex-direction:column;gap:12px;background:transparent!important;
}
#order-standard_cart .domain-checker-advanced .input-group-lg.input-group-box > textarea{
  width:100%!important;min-height:90px;resize:vertical;padding:14px 16px!important;font-size:14px!important;
}
/* Knop, TLD-select, lengte-select en Safe-search-label op 1 rij ONDER het tekstveld */
#order-standard_cart .domain-checker-advanced .input-group-lg.input-group-box{
  display:grid!important;grid-template-columns:1fr;gap:12px;
}
#order-standard_cart .domain-checker-advanced #btnCheckAvailability{
  position:static!important;
  order:2;justify-self:end;padding:10px 24px!important;border-radius:999px!important;
  background:var(--cn-primary)!important;border:0!important;color:#fff!important;font-weight:700!important;
}
#order-standard_cart .domain-checker-advanced select[name="tlds[]"]{order:3}
#order-standard_cart .domain-checker-advanced select[name="maxLength"]{order:4;max-width:100px}
#order-standard_cart .domain-checker-advanced label:has(input[name="filter"]){order:5;align-self:center;white-space:nowrap}
#order-standard_cart .domain-checker-advanced textarea{order:1}

@media(min-width:700px){
  #order-standard_cart .domain-checker-advanced .input-group-lg.input-group-box{
    grid-template-columns:1fr auto auto auto;align-items:start;
  }
  #order-standard_cart .domain-checker-advanced textarea{grid-column:1 / -1}
}

/* Raw <select multiple> (TLD's) netjes stylen — de multiselect-plugin-CSS ontbreekt,
   dus we maken er een compacte, scrollbare lijst van i.p.v. alle opties uitgeklapt. */
#order-standard_cart .domain-checker-advanced select[multiple]{
  height:auto!important;min-height:44px;max-height:120px;overflow-y:auto;padding:6px!important;
}
#order-standard_cart .domain-checker-advanced select[multiple] option{
  padding:6px 10px!important;border-radius:6px;color:var(--cn-text-2)!important;
}
#order-standard_cart .domain-checker-advanced select[multiple] option:checked{
  background:var(--cn-primary)!important;color:#fff!important;
}
#order-standard_cart .domain-checker-advanced select[name="maxLength"]{height:44px!important}

/* Safe-search checkbox-label netjes uitgelijnd i.p.v. losse regel */
#order-standard_cart .domain-checker-advanced label:has(input[name="filter"]){
  display:flex!important;align-items:center;gap:8px;color:var(--cn-text-2)!important;font-size:13px;
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  border-radius:8px!important;padding:0 14px!important;height:44px;margin:0!important;
}
#order-standard_cart .domain-checker-advanced input[name="filter"]{accent-color:var(--cn-primary);width:16px;height:16px}

/* Scrollbar van de TLD-multiselect subtiel dark-mode (i.p.v. felwitte OS-scrollbar) */
#order-standard_cart .domain-checker-advanced select[multiple]{
  scrollbar-width:thin!important;scrollbar-color:var(--cn-border) transparent!important;
}
#order-standard_cart .domain-checker-advanced select[multiple]::-webkit-scrollbar{width:8px}
#order-standard_cart .domain-checker-advanced select[multiple]::-webkit-scrollbar-thumb{
  background:var(--cn-border)!important;border-radius:999px;
}
#order-standard_cart .domain-checker-advanced select[multiple]::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   DEFINITIEVE fix icoon-overlap in checkout — deze regels staan
   bewust helemaal onderaan én met #frmCheckout in de selector,
   zodat ze gegarandeerd winnen van alle eerdere concurrerende
   #frmCheckout .field / .form-control regels (specificiteit + volgorde).
   ============================================================ */
#order-standard_cart #frmCheckout .form-group.prepend-icon{position:relative!important}
#order-standard_cart #frmCheckout .form-group.prepend-icon .field-icon{
  position:absolute!important;left:0!important;top:0!important;bottom:0!important;
  width:40px!important;height:auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  z-index:3!important;color:var(--cn-text-3)!important;font-size:14px!important;
  pointer-events:none!important;margin:0!important;transform:none!important;line-height:normal!important;
}
#order-standard_cart #frmCheckout .form-group.prepend-icon .field,
#order-standard_cart #frmCheckout .form-group.prepend-icon .form-control,
#order-standard_cart #frmCheckout .form-group.prepend-icon input{
  padding-left:40px!important;box-sizing:border-box!important;
}

/* ============================================================
   .d-none ontbreekt volledig in dit thema (geen Bootstrap-CSS
   geladen, all.min.css bevat 'm niet). Smarty-templates zetten deze
   class wel toe ({if !$errormessage}d-none{/if}), maar zonder deze
   regel doet de class niets — resultaat: foutbalken en verborgen
   elementen (checkout-error-feedback, vat-error li, viewcart-tabs)
   blijven altijd zichtbaar, ook zonder echte fout/inhoud.
   ============================================================ */
#order-standard_cart .d-none{display:none!important}
@media(min-width:576px){#order-standard_cart .d-sm-block{display:block!important}}
@media(min-width:768px){#order-standard_cart .d-md-block{display:block!important}#order-standard_cart .d-md-none{display:none!important}}

/* ============================================================
   Configure-pagina: Hostname/Root Password gegarandeerd naast
   elkaar (dedicated class, los van het generieke grid) + Operating
   System-lijst als selecteerbare kaartjes i.p.v. kale radio's.
   ============================================================ */
#order-standard_cart .cn-hostpw-row{display:flex!important;flex-wrap:wrap;gap:0;margin:0 -8px}
#order-standard_cart .cn-hostpw-row > [class*="col-"]{flex:1 1 260px!important;max-width:none!important;width:auto!important}

#order-standard_cart .cn-option-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:8px;
}
#order-standard_cart .cn-option-card{
  display:flex!important;align-items:center;gap:10px;
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  border-radius:10px!important;padding:12px 14px!important;cursor:pointer;
  transition:border-color .15s,background .15s;margin:0!important;
}
#order-standard_cart .cn-option-card:hover{border-color:var(--cn-primary)!important}
#order-standard_cart .cn-option-card:has(input:checked){
  border-color:var(--cn-primary)!important;background:rgba(240,114,53,.08)!important;
}
#order-standard_cart .cn-option-card__label{color:var(--cn-text)!important;font-size:13.5px;font-weight:600}
#order-standard_cart .cn-option-card .icheckbox_square-blue,
#order-standard_cart .cn-option-card .iradio_square-blue{flex-shrink:0}

/* ============================================================
   Polish: OS/configurable-option kaarten — eigen radiocirkel
   i.p.v. kale browser-radio, plus subtiele hover/selected-state
   ============================================================ */
#order-standard_cart .cn-option-card input[type="radio"],
#order-standard_cart .cn-option-card input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;
}
#order-standard_cart .cn-option-card__check{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--cn-border);background:transparent;
  position:relative;transition:all .15s;
}
#order-standard_cart .cn-option-card:has(input:checked) .cn-option-card__check{
  border-color:var(--cn-primary)!important;background:var(--cn-primary)!important;
}
#order-standard_cart .cn-option-card:has(input:checked) .cn-option-card__check::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
#order-standard_cart .cn-option-card:has(input:checked){
  box-shadow:0 0 0 1px var(--cn-primary)!important;
}
#order-standard_cart .cn-option-card:hover{
  background:var(--cn-surface-3)!important;
}

/* Iets meer lucht rond de configurable-options kaart, en tussen deze
   kaart en wat erna komt (bv. de "Have questions"-balk) */
#order-standard_cart .product-configurable-options{margin-top:2px!important}
#order-standard_cart #productConfigurableOptions + *{margin-top:16px!important}

/* NS1/NS2 Prefix-velden gegarandeerd naast elkaar (configureproduct.tpl) */
#order-standard_cart .row:has(#inputNs1prefix),
#order-standard_cart .row:has(#inputNs2prefix){
  display:flex!important;flex-wrap:wrap;gap:0;
}
#order-standard_cart .row:has(#inputNs1prefix) > .col-sm-6,
#order-standard_cart .row:has(#inputNs2prefix) > .col-sm-6{
  flex:1 1 260px!important;max-width:none!important;width:auto!important;
}

/* Fix: iCheck-plugin genereert een eigen blauwe cirkel bovenop de radio-input,
   naast mijn custom .cn-option-card__check indicator — dat gaf 2 vinkjes.
   iCheck-element binnen deze kaarten verbergen, alleen de eigen indicator tonen. */
#order-standard_cart .cn-option-card .icheckbox_square-blue,
#order-standard_cart .cn-option-card .iradio_square-blue,
#order-standard_cart .cn-option-card ins.iCheck-helper{
  display:none!important;
}
/* ============================================================
   CONFIGUREPRODUCTDOMAIN.TPL — "Choose a Domain"-stap.
   Andere DOM-structuur dan domainregister.tpl (.domain-input-group
   i.p.v. .domain-checker-container, geen .input-group-box-wrapper),
   dus een aparte, op déze structuur toegesneden opmaak.
   ============================================================ */

#order-standard_cart .domain-input-group #btnCheckAvailability{position:static!important}
#order-standard_cart .domain-selection-options .option:has(input:checked){
  border-color:var(--cn-primary)!important;background:rgba(240,114,53,.05)!important;
}
#order-standard_cart .domain-selection-options .option input[type="radio"]{
  accent-color:var(--cn-primary);width:16px;height:16px;flex-shrink:0;
}

/* Zoekbalk-kaart: eigen achtergrond, los van de radio-optie eromheen.
   NIET meer afhankelijk van .domain-checker-advanced — die class valt weg
   zodra de simpele zoekmodus geforceerd is, dus dit moet altijd gelden. */
#order-standard_cart #domainregister .domain-checker-advanced,
#order-standard_cart .domain-input-group{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  border-radius:12px!important;padding:18px!important;margin-top:14px!important;
}
#order-standard_cart .domain-input-group .row{margin:0 -6px}
#order-standard_cart .domain-input-group .row + .row{margin-top:12px}
#order-standard_cart .domain-input-group [class*="col-"]{padding:0 6px}

/* Tekstveld (AI-zoekbox) volle breedte, nette hoogte */
#order-standard_cart .domain-input-group textarea#message{
  width:100%!important;min-height:70px;resize:vertical;
}

/* Actie-knop (Check/Transfer/Use): zelfde hoogte als het naastgelegen veld op desktop */
#order-standard_cart .domain-input-group .col-sm-2{
  display:flex;align-items:stretch;
}
#order-standard_cart .domain-input-group .col-sm-2 .btn{
  width:100%;border-radius:10px!important;font-weight:700!important;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
#order-standard_cart .domain-input-group #btnCheckAvailability{
  position:static!important;
  width:100%;border-radius:12px!important;font-weight:700!important;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
@media(max-width:767px){
  #order-standard_cart .domain-input-group .col-sm-2{margin-top:10px}
}
@media(min-width:576px) and (max-width:767px){
  /* col-sm-offset-1 geldt hier al (schuift de veldenkolom op), maar de
     knop-kolom (col-sm-2, geen offset) blijft daardoor links uitlijnen
     zodra ze onder elkaar vallen — geef 'm dezelfde inspringing. */
  #order-standard_cart .domain-input-group .col-sm-2{margin-left:8.333%}
}

/* Tweede rij (TLD-select + lengte + Safe Search, alleen AI-modus) als 1 nette flex-balk.
   GEEN flex-gap hier: de register/transfer/owndomain-rijen gebruiken vaste
   col-xs-9/col-xs-3 percentages (75%+25%) die met de grid-padding al exact
   100% optellen — een extra gap duwde ze daardoor naar een nieuwe regel. */
#order-standard_cart .domain-input-group .domains-row{
  display:flex!important;flex-wrap:wrap;align-items:stretch;
}
#order-standard_cart .domain-input-group .domains-row select[name="tlds[]"]{
  flex:1 1 220px;
}
#order-standard_cart .domain-input-group .domains-row select[name="maxLength"]{
  flex:0 0 90px;margin-left:10px;
}
#order-standard_cart .domain-input-group .domains-row label{
  flex:0 0 auto;display:flex!important;align-items:center;gap:8px;margin-left:10px!important;
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:9px!important;padding:0 14px!important;height:44px;margin-top:0!important;
  color:var(--cn-text-2)!important;font-weight:500!important;font-size:13px;white-space:nowrap;
}
/* www/domeinnaam/TLD-velden (register, transfer, owndomain) — altijd volle
   hoogte binnen hun rij, zodat www.-prefix, veld en knop mooi gelijk lopen */
#order-standard_cart .domain-input-group .domains-row .col-xs-9,
#order-standard_cart .domain-input-group .domains-row .col-9,
#order-standard_cart .domain-input-group .domains-row .col-xs-3,
#order-standard_cart .domain-input-group .domains-row .col-3{
  display:flex;flex-direction:column;justify-content:center;
}
#order-standard_cart .domain-input-group .domains-row .input-group,
#order-standard_cart .domain-input-group .domains-row .form-control{height:48px!important}

/* Simpele (niet-AI) zoekmodus: www + domeinnaam + TLD-select in 1 balk */
#order-standard_cart .domain-input-group .input-group{display:flex!important;align-items:stretch}
#order-standard_cart .domain-input-group .input-group-addon{
  display:flex;align-items:center;border-radius:9px 0 0 9px!important;border-right:0!important;
}
#order-standard_cart .domain-input-group .input-group .form-control{border-radius:0 9px 9px 0!important}

/* ============================================================
   Bootstrap-tooltips (data-toggle="tooltip") — worden gebruikt om
   "vul een domeinnaam in"-waarschuwingen te tonen bij leeg zoeken.
   Nergens gestyled voor dark mode, dus vrijwel onzichtbaar tegen de
   donkere achtergrond — leek daardoor alsof zoeken niks deed.
   ============================================================ */
#order-standard_cart .tooltip{opacity:1!important;z-index:9999}
#order-standard_cart .tooltip .tooltip-inner{
  background:var(--cn-danger)!important;color:#fff!important;font-weight:600!important;
  padding:8px 12px!important;border-radius:8px!important;font-size:12.5px!important;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
#order-standard_cart .tooltip.bs-tooltip-top .arrow::before,
#order-standard_cart .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before{border-top-color:var(--cn-danger)!important}
#order-standard_cart .tooltip.bs-tooltip-bottom .arrow::before,
#order-standard_cart .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before{border-bottom-color:var(--cn-danger)!important}
#order-standard_cart .tooltip.bs-tooltip-left .arrow::before,
#order-standard_cart .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before{border-left-color:var(--cn-danger)!important}
#order-standard_cart .tooltip.bs-tooltip-right .arrow::before,
#order-standard_cart .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before{border-right-color:var(--cn-danger)!important}

/* ============================================================
   Domeinzoek-RESULTATEN (na klikken op Check) — bleek nergens
   gestyled te zijn (zelfde patroon als eerder bij VirtFusion-module
   en de upgrade-pagina). Data kwam prima binnen van de server, maar
   zonder dark-theme styling was er niks bruikbaars te zien.
   ============================================================ */
#order-standard_cart #DomainSearchResults{margin-top:18px}
#order-standard_cart .primary-domain-header{
  color:var(--cn-text)!important;font-size:14px!important;font-weight:700!important;
  border-bottom:1px solid var(--cn-border)!important;padding:10px 0!important;margin-bottom:14px!important;
}
#order-standard_cart .domain-lookup-loader{color:var(--cn-text-2)!important;text-align:center;padding:16px}

/* Primair resultaat (exacte match) */
#order-standard_cart #primaryLookupResult{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:14px!important;padding:22px!important;text-align:center!important;margin-bottom:16px;
}
#order-standard_cart #primaryLookupResult .headline{
  color:var(--cn-text)!important;font-size:19px!important;font-weight:700!important;margin-bottom:10px;
}
#order-standard_cart .domain-available .headline{color:var(--cn-success)!important}
#order-standard_cart .domain-unavailable .headline,
#order-standard_cart .domain-invalid .headline{color:var(--cn-danger)!important}
#order-standard_cart .domain-price{
  color:var(--cn-text-2)!important;font-size:14px!important;margin-top:8px;
}
#order-standard_cart .domain-price .price{color:var(--cn-primary)!important;font-weight:800!important;font-size:20px!important;margin-left:6px}
#order-standard_cart .domain-error{color:var(--cn-danger)!important;font-weight:600!important}

/* "Add to cart"-knop op het primaire resultaat */
#order-standard_cart #btnDomainContinue{
  border-radius:999px!important;padding:12px 32px!important;font-weight:700!important;margin-top:10px;
}

/* Spotlight-TLD's (.com/.net alternatieven) */
#order-standard_cart .spotlight-tlds{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
#order-standard_cart .spotlight-tld-container{
  flex:1 1 160px;background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:12px!important;padding:16px!important;text-align:center;
}
#order-standard_cart .spotlight-tld-container .domain-lookup-result{color:var(--cn-text-2)!important}
#order-standard_cart .spotlight-tld-container span.available{color:var(--cn-primary)!important;font-weight:700!important}
#order-standard_cart .spotlight-tld-container button{
  border-radius:999px!important;padding:8px 18px!important;font-size:12.5px!important;margin-top:8px;
}

/* Gerelateerde suggesties (lijst) */
#order-standard_cart #domainSuggestions{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:12px!important;overflow:hidden;
}
#order-standard_cart .domain-suggestion{
  display:flex!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:14px 18px!important;border-bottom:1px solid var(--cn-border)!important;background:transparent!important;
}
#order-standard_cart .domain-suggestion:last-child{border-bottom:0!important}
#order-standard_cart .domain-suggestion .domain,
#order-standard_cart .domain-suggestion .extension{color:var(--cn-text)!important;font-weight:600!important}
#order-standard_cart .domain-suggestion .actions{display:flex;align-items:center;gap:12px}
#order-standard_cart .domain-suggestion .price{color:var(--cn-text-2)!important;font-weight:600!important}
#order-standard_cart .domain-suggestion .btn{
  border-radius:999px!important;padding:8px 18px!important;font-size:12.5px!important;font-weight:700!important;
}
#order-standard_cart .panel-footer.more-suggestions{text-align:center;padding:14px!important;color:var(--cn-text-3)!important}
#order-standard_cart .panel-footer.more-suggestions a{color:var(--cn-primary)!important;font-weight:600!important}
#order-standard_cart .domain-suggestions-warning{color:var(--cn-text-3)!important;font-size:12px!important;text-align:center;margin-top:10px}
#order-standard_cart .domain-lookup-message{color:var(--cn-text-3)!important;text-align:center;padding:20px!important}

/* ============================================================
   DEFINITIEVE zichtbaarheids-fix domeinzoek-resultaten. In plaats
   van te vertrouwen op jQuery's inline style="display:..." (die
   door race-conditions tussen meerdere parallelle AJAX-calls soms
   niet standhoudt), maakt dit de zichtbaarheid puur afhankelijk van
   de af/aanwezigheid van .w-hidden — met !important wint dit altijd,
   ongeacht wat inline styles doen.
   ============================================================ */
#order-standard_cart #DomainSearchResults:not(.w-hidden){display:block!important}
#order-standard_cart #primaryLookupResult:not(.w-hidden){display:block!important}
#order-standard_cart #spotlightTlds:not(.w-hidden){display:block!important}
#order-standard_cart #domainSuggestions:not(.w-hidden){display:block!important}
#order-standard_cart .suggested-domains:not(.w-hidden){display:block!important}
#order-standard_cart .domain-suggestion:not(.w-hidden){display:flex!important}

/* ============================================================
   Eigen, zelfstandige domeincheck-resultaten (cnOwnDomainResults)
   ============================================================ */
#order-standard_cart .cn-own-results{margin-top:18px}
#order-standard_cart .cn-own-result{
  border-radius:14px!important;padding:22px!important;text-align:center;
}
#order-standard_cart .cn-own-result--loading{
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;color:var(--cn-text-2)!important;
}
#order-standard_cart .cn-own-result--available{
  background:var(--cn-surface)!important;border:1px solid var(--cn-success)!important;
}
#order-standard_cart .cn-own-result--unavailable,
#order-standard_cart .cn-own-result--error{
  background:var(--cn-surface)!important;border:1px solid var(--cn-danger)!important;
}
#order-standard_cart .cn-own-result__headline{
  color:var(--cn-text)!important;font-size:18px!important;font-weight:700!important;margin-bottom:10px;
}
#order-standard_cart .cn-own-result--available .cn-own-result__headline{color:var(--cn-success)!important}
#order-standard_cart .cn-own-result--unavailable .cn-own-result__headline,
#order-standard_cart .cn-own-result--error{color:var(--cn-danger)!important}
#order-standard_cart .cn-own-result__price{
  color:var(--cn-primary)!important;font-weight:800!important;font-size:22px!important;margin-bottom:14px;
}
#order-standard_cart .cn-own-result__btn{
  background:var(--cn-primary)!important;color:#fff!important;border:0!important;
  border-radius:999px!important;padding:12px 32px!important;font-weight:700!important;cursor:pointer;
  display:inline-block;text-decoration:none!important;
}
#order-standard_cart .cn-own-result__btn:disabled{opacity:.5;cursor:not-allowed}

/* ============================================================
   Credit-toepassen blok op checkout (#applyCreditContainer) —
   nergens gestyled, viel daardoor terug op kale browser-radio's
   met witte achtergrond.
   ============================================================ */
#order-standard_cart .apply-credit-container{
  background:var(--cn-surface-2)!important;border:1px solid var(--cn-border)!important;
  border-radius:12px!important;padding:18px!important;margin:0 0 20px!important;
}
#order-standard_cart .apply-credit-container > p{
  color:var(--cn-text-2)!important;font-size:13px!important;font-weight:600!important;margin:0 0 14px!important;
}
#order-standard_cart .apply-credit-container label.radio{
  display:flex!important;align-items:flex-start;gap:10px;
  background:var(--cn-surface)!important;border:1px solid var(--cn-border)!important;
  border-radius:10px!important;padding:12px 14px!important;margin:0 0 10px!important;
  cursor:pointer;transition:border-color .15s,background .15s;color:var(--cn-text-2)!important;font-size:13px!important;
}
#order-standard_cart .apply-credit-container label.radio:last-child{margin-bottom:0!important}
#order-standard_cart .apply-credit-container label.radio:hover{border-color:var(--cn-primary)!important}
#order-standard_cart .apply-credit-container label.radio:has(input:checked){
  border-color:var(--cn-primary)!important;background:rgba(240,114,53,.06)!important;color:var(--cn-text)!important;
}
#order-standard_cart .apply-credit-container input[type="radio"]{
  accent-color:var(--cn-primary);width:16px;height:16px;flex-shrink:0;margin-top:2px;
}
#order-standard_cart .apply-credit-container .iradio_square-blue{
  flex:0 0 22px!important;width:22px!important;height:22px!important;margin-top:1px!important;
}

/* ============================================================
   Lege winkelwagen — definitieve centrering, bewust helemaal
   onderaan geplaatst zodat dit altijd als laatste (dus winnende)
   regel geldt, ongeacht andere grid/flex-regels hierboven.
   ============================================================ */
#order-standard_cart:has(.view-cart-empty) > .row{display:block!important}
#order-standard_cart:has(.view-cart-empty) .cart-body{
  display:block!important;flex:none!important;width:auto!important;max-width:none!important;margin:0!important;
}
#order-standard_cart:has(.view-cart-empty) .cart-body > .row{
  display:block!important;width:100%!important;
}
#order-standard_cart:has(.view-cart-empty) .view-cart-items-header,
#order-standard_cart:has(.view-cart-empty) .view-cart-items{
  max-width:815px!important;margin:0!important;
}