/* ==========================================================================
   Mangelot Hosting · stellar-mh · klantomgeving (WHMCS) in de stijl van de site
   Laadt als laatste stylesheet (na all.css, template.css en responsive.css).
   Alles hangt onder #main-body, dus kop, menu en voettekst blijven zoals op de site.
   Kleuren: donkerblauw #243141, leisteen #323f52, oranje #f09546.
   Oranje knoppen hebben donkerblauwe tekst: wit op oranje is te slecht leesbaar.
   ========================================================================== */

:root{
	--mh-navy:#243141;
	--mh-slate:#323f52;
	--mh-orange:#f09546;
	--mh-orange-hover:#e8822b;
	--mh-text:#4a5563;
	--mh-muted:#6b7684;
	--mh-line:#dfe6ee;
	--mh-field:#c9d3df;
	--mh-bg:#f3f6f9;
	--mh-soft:#f7f9fb;
	--mh-radius:12px;
	--mh-radius-sm:8px;
	--mh-shadow:0 1px 2px rgba(36,49,65,.05),0 6px 20px rgba(36,49,65,.07);
	--mh-focus:0 0 0 3px rgba(240,149,70,.45);
}

/* ---------- 1. Pagina: lichte achtergrond, inhoud in losse kaarten ---------- */
.articlemain{background:var(--mh-bg)}
.articlemain>.container1>.whmcscontainer.highlightbox{background:transparent;border:0;box-shadow:none;padding:30px 0 10px}
#main-body{font-size:15px;line-height:1.55;color:var(--mh-text)}
#main-body a:not(.btn){color:#005a9c}
#main-body a:not(.btn):hover{color:var(--mh-navy)}
#main-body h1,#main-body h2,#main-body h3,#main-body h4{font-family:"Roboto Condensed",sans-serif;color:var(--mh-navy);font-weight:700}
#main-body .header-lined{border:0;margin:0 0 18px}
#main-body .header-lined h1{font-size:30px;margin:0 0 4px}
#main-body .header-lined .breadcrumb{display:none}
#main-body p.text-muted,#main-body .text-muted{color:var(--mh-muted)}

/* kaarten */
#main-body .panel,
#main-body .row.highlightbox,
#main-body .featurebox,
#main-body .well,
#main-body #order-standard_cart .products .product,
#main-body #order-standard_cart .view-cart-items,
#main-body #order-standard_cart .summary-container{
	background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow)
}
#main-body .row.highlightbox{margin-left:0;margin-right:0;padding:22px 10px 6px}
#main-body .panel{overflow:hidden;margin-bottom:22px}
#main-body .panel>.panel-heading{background:var(--mh-navy);border:0;color:#fff;padding:12px 16px}
#main-body .panel>.panel-heading .panel-title,#main-body .panel>.panel-heading h3{color:#fff;font-size:16px;font-weight:700;font-family:"Roboto Condensed",sans-serif}
#main-body .panel>.panel-footer{background:var(--mh-soft);border-top:1px solid var(--mh-line)}
#main-body .panel .list-group-item{border-color:var(--mh-line);padding:11px 16px;color:var(--mh-text)}
#main-body .panel .list-group-item:hover{background:var(--mh-soft)}
#main-body .panel .list-group-item.active,#main-body .panel .list-group-item.active:hover{background:var(--mh-orange);border-color:var(--mh-orange);color:var(--mh-navy);font-weight:700}
#main-body .panel .list-group-item.active i{color:var(--mh-navy)}

/* tussenkopjes in formulieren (registreren, afrekenen) */
#main-body .sub-heading{height:auto;border:0;text-align:left;margin:28px 0 12px;padding:0}
#main-body .sub-heading span,#main-body .sub-heading{font-family:"Roboto Condensed",sans-serif;font-size:20px;font-weight:700;color:var(--mh-navy)}
#main-body .sub-heading span{position:static;top:auto;padding:0;background:none;display:inline-block}
#main-body .sub-heading:before{content:"";display:inline-block;width:5px;height:20px;border-radius:3px;background:var(--mh-orange);margin-right:10px;vertical-align:-3px}
#main-body .sub-heading span.primary-bg-color{color:var(--mh-navy)}

/* ---------- 2. Formulieren ---------- */
#main-body label{color:var(--mh-navy);font-weight:600;font-size:14px}
#main-body .form-control,
#main-body input.field,
#main-body select.field,
#main-body textarea.field,
#main-body input[type=text],#main-body input[type=email],#main-body input[type=password],
#main-body input[type=tel],#main-body input[type=number],#main-body input[type=search],
#main-body select{
	height:46px;padding:10px 14px;border:1px solid var(--mh-field);border-radius:var(--mh-radius-sm);
	background-color:#fff;color:var(--mh-navy);font-size:15px;box-shadow:none;
	transition:border-color .15s ease,box-shadow .15s ease
}
#main-body textarea,#main-body textarea.form-control{height:auto;min-height:120px;padding:12px 14px;border:1px solid var(--mh-field);border-radius:var(--mh-radius-sm)}
#main-body .form-control:focus,#main-body .field:focus,#main-body input:focus,#main-body select:focus,#main-body textarea:focus{
	border-color:var(--mh-navy);box-shadow:var(--mh-focus);outline:none
}
#main-body ::placeholder{color:#8a95a3;opacity:1}
#main-body .form-group{margin-bottom:16px}
#main-body .input-group .form-control{border-radius:var(--mh-radius-sm) 0 0 var(--mh-radius-sm)}
#main-body .input-group .form-control:last-child{border-radius:0 var(--mh-radius-sm) var(--mh-radius-sm) 0}
#main-body .input-group-addon{border-color:var(--mh-field);background:var(--mh-soft);color:var(--mh-navy)}
#main-body .input-group-btn .btn{height:46px}
/* velden met een icoon ervoor (registreren, afrekenen) */
#main-body .prepend-icon .field,#main-body .prepend-icon .form-control{padding-left:42px}
#main-body .prepend-icon .field-icon{height:46px;line-height:46px;width:42px;color:#8a95a3}
#main-body .prepend-icon .field:focus+.field-icon,#main-body .prepend-icon .field-icon:has(+ .field:focus){color:var(--mh-navy)}
#main-body .checkbox label,#main-body .radio label,#main-body label.checkbox-inline,#main-body label.radio-inline{font-weight:400;color:var(--mh-text)}
#main-body input[type=checkbox],#main-body input[type=radio]{accent-color:var(--mh-orange);width:17px;height:17px;vertical-align:-3px}
#main-body .field-help-text,#main-body .help-block{color:var(--mh-muted);font-size:13px}

/* ---------- 3. Knoppen ---------- */
#main-body .btn{border-radius:var(--mh-radius-sm);font-weight:700;font-size:15px;padding:10px 20px;line-height:1.35;letter-spacing:.01em;text-transform:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .05s ease}
#main-body .btn:active{transform:translateY(1px)}
#main-body .btn:focus-visible{box-shadow:var(--mh-focus);outline:none}
#main-body .btn-sm{font-size:13px;padding:6px 12px}
#main-body .btn-xs{font-size:12px;padding:3px 8px;border-radius:6px}
#main-body .btn-lg{font-size:17px;padding:13px 26px}
#main-body .btn-primary,
#main-body .btn-success,
#main-body #order-standard_cart .btn-checkout,
#main-body #order-standard_cart .btn-order-now,
#main-body #btnCompleteOrder{
	background:var(--mh-orange);border:1px solid var(--mh-orange);color:var(--mh-navy)
}
#main-body .btn-primary:hover,#main-body .btn-primary:focus,
#main-body .btn-success:hover,#main-body .btn-success:focus,
#main-body #order-standard_cart .btn-checkout:hover,
#main-body #order-standard_cart .btn-order-now:hover,
#main-body #btnCompleteOrder:hover{
	background:var(--mh-orange-hover);border-color:var(--mh-orange-hover);color:var(--mh-navy)
}
#main-body .btn-default{background:#fff;border:1px solid var(--mh-navy);color:var(--mh-navy)}
#main-body .btn-default:hover,#main-body .btn-default:focus{background:var(--mh-navy);color:#fff}
#main-body .btn-info{background:var(--mh-slate);border-color:var(--mh-slate);color:#fff}
#main-body .btn-info:hover{background:var(--mh-navy);border-color:var(--mh-navy);color:#fff}
#main-body .btn-link{color:#005a9c;font-weight:600;padding-left:4px;padding-right:4px}
#main-body .btn[disabled],#main-body .btn.disabled{opacity:.55}

/* ---------- 4. Meldingen ---------- */
#main-body .alert{border-radius:10px;border:1px solid transparent;border-left-width:5px;padding:14px 16px}
#main-body .alert-info{background:#eef5fb;border-color:#cfe2f2;border-left-color:#005a9c;color:#21405c}
#main-body .alert-success{background:#eef8ef;border-color:#cfe7d1;border-left-color:#2f7d32;color:#1f4d21}
#main-body .alert-warning{background:#fff6ec;border-color:#f7dcbc;border-left-color:var(--mh-orange);color:#6a3d10}
#main-body .alert-danger{background:#fdf0f0;border-color:#f3cccc;border-left-color:#c62828;color:#7a1d1d}

/* ---------- 5. Tabellen (klantgebied, facturen) ---------- */
#main-body .table>thead>tr>th{background:var(--mh-soft);color:var(--mh-navy);font-weight:700;border-bottom:2px solid var(--mh-line);font-size:14px}
#main-body .table>tbody>tr>td{border-top:1px solid var(--mh-line);vertical-align:middle}
#main-body .table-hover>tbody>tr:hover>td,#main-body .table-list>tbody>tr:hover>td{background:#f6f9fc}
#main-body .table:not(.table-bordered){border:0}
#main-body .dataTables_wrapper .dataTables_info{border-radius:8px 8px 0 0;border-bottom:0}
#main-body .dataTables_filter input::placeholder{color:#8a96a5;opacity:1}
@media (max-width:575px){
	#main-body table.table-list>tbody>tr>td{padding-left:6px;padding-right:6px}
	#main-body table.table-list>thead>tr>th{padding-left:6px;padding-right:20px}
	#main-body table.table-list td img[title^="Website"]{max-width:96px!important}
}
/* serverstatus: de tabel met poorten is breder dan een telefoon; dan scrolt alleen de tabel zijwaarts */
@media (max-width:767px){
	.hook-tf-serverstatus #main-body table.table-striped{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ingeklapte tabel: het plusje staat links in de eerste cel en mag niet over de inhoud heen liggen */
#main-body table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child{padding-left:28px}
/* paginanummers: de actieve pagina is donkerblauw met witte tekst (anders staat er donker op donker) */
#main-body .pagination>.active>a,#main-body .pagination>.active>a:hover,#main-body .pagination>.active>a:focus,#main-body .pagination>.active>span{background:var(--mh-navy);border-color:var(--mh-navy);color:#fff}
#main-body .pagination>li>a,#main-body .pagination>li>span{color:#005a9c}
@media (max-width:767px){
	#main-body .dataTables_wrapper .dataTables_filter{float:none;width:auto;margin:0;padding:12px 14px 0;background:var(--mh-navy);border-radius:8px 8px 0 0}
	#main-body .dataTables_wrapper .dataTables_filter label{display:block;margin:0;padding:0}
	#main-body .dataTables_wrapper .dataTables_filter label .form-control{display:block;width:100%;margin:0;height:44px}
	#main-body div.dataTables_wrapper div.dataTables_info{border-radius:0;padding:10px 16px 14px!important;text-align:left;white-space:normal}
}
#main-body .table-container{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);padding:10px}
#main-body .label{border-radius:20px;padding:4px 10px;font-weight:700;letter-spacing:.02em}
/* een <label class="label"> kreeg de donkere veldlabel-kleur (witte tekst nodig); :where() houdt de specificiteit laag zodat .label-warning enz. blijven winnen */
#main-body :where(label).label{color:#fff;margin:0}
/* labels in lijstblokken op de homepagina (Recente Supporttickets): net zo groot als de andere statuslabels */
#main-body .list-group-item .label{display:inline-block;font-size:12px;line-height:1.3;padding:4px 12px;vertical-align:middle;margin-left:4px}

/* ---------- 6. Inloggen en wachtwoord vergeten ---------- */
#main-body .featurebox.loginbox{max-width:460px;margin:10px auto 30px;padding:0;overflow:hidden;float:none}
#main-body .featurebox.loginbox .title{background:var(--mh-navy);margin:0;padding:18px 24px;border-radius:0}
#main-body .featurebox.loginbox .title h2{color:#fff;font-size:22px;margin:0;text-align:center}
#main-body .featurebox.loginbox .main,#main-body .featurebox.loginbox .inner{padding:0;margin:0;border:0;background:none}
#main-body .featurebox.loginbox .logincontainer{padding:24px 26px 8px;max-width:none;margin:0}
#main-body .featurebox.loginbox .logincontainer .row{margin:0}
#main-body .featurebox.loginbox .logincontainer [class*="col-sm-"]{padding:0}
#main-body .loginbox .login-form>div[align=center]{display:flex;flex-direction:column;gap:12px;align-items:stretch;margin-top:8px}
#main-body .loginbox #login{width:100%;font-size:16px;padding:12px 20px;margin:0}
#main-body .loginbox .login-form .btn-default{margin:0;border:0;background:none;color:#005a9c;font-weight:600;padding:4px;text-decoration:underline;text-underline-offset:3px}
#main-body .loginbox .login-form .btn-default:hover{color:var(--mh-navy);background:none}
#main-body .loginbox .mh-registreer{border-top:1px solid var(--mh-line);margin:18px -26px 0;padding:16px 26px 18px;text-align:center;background:var(--mh-soft);font-size:14px}
#main-body .loginbox .clear{display:none}
/* captcha-blokje (WHMCS-afbeelding + invoerveld) */
#main-body .captchaimage,#main-body #default-captcha-domainchecker,#main-body .captcha-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
#main-body .captchaimage img,#main-body img#inputCaptchaImage{border-radius:6px;border:1px solid var(--mh-line);height:46px}
#main-body #inputCaptcha,#main-body input[name=code]{width:150px;display:inline-block;text-align:center;letter-spacing:.15em;font-weight:700}
#main-body .logincontainer .text-center.margin-bottom p,#main-body .captcha-container p{font-size:13px;color:var(--mh-muted);margin-bottom:8px}

/* wachtwoord vergeten / opnieuw instellen */
#main-body .password-reset-container,#main-body #password-reset-container{max-width:520px;margin:0 auto}

/* ---------- 7. Zijbalk (winkelwagen, klantgebied) ---------- */
#main-body .sidebar .panel,#main-body #order-standard_cart .cart-sidebar .panel{border-radius:var(--mh-radius)}
#main-body .sidebar .panel-heading,#main-body #order-standard_cart .cart-sidebar .panel-heading{background:var(--mh-navy)}

/* ---------- 8. Winkelwagen: titels en domein zoeken ---------- */
#main-body #order-standard_cart{color:var(--mh-text)}
#main-body #order-standard_cart .header-lined h1,#main-body #order-standard_cart h1.font-size-36{font-size:30px;text-align:left}
#main-body #order-standard_cart .domain-checker-container{border-radius:16px;overflow:hidden;box-shadow:var(--mh-shadow)}
#main-body #order-standard_cart .domain-checker-bg{border-radius:16px}
#main-body #order-standard_cart .domain-checker-container .input-group-box,
#main-body #order-standard_cart .domain-checker-container .input-group{box-shadow:0 10px 30px rgba(0,0,0,.25);border-radius:10px}
#main-body #order-standard_cart .domain-checker-container .form-control{height:56px;font-size:18px;border:0;border-radius:10px 0 0 10px;padding-left:18px}
#main-body #order-standard_cart .domain-checker-container .btn,#main-body #order-standard_cart .domain-checker-container .input-group-btn .btn{height:56px;font-size:17px;border-radius:0 10px 10px 0;padding:0 26px}
#main-body #order-standard_cart .domain-checker-result-headline{font-family:"Roboto Condensed",sans-serif}
#main-body #order-standard_cart .domain-checker-available{color:#2f7d32}
#main-body #order-standard_cart .domain-checker-unavailable{color:#c62828}
#main-body #order-standard_cart .domain-lookup-result .btn,#main-body #order-standard_cart .domain-suggestion .btn,#main-body #order-standard_cart .spotlight-tld .btn{border-radius:var(--mh-radius-sm)}
#main-body #order-standard_cart .spotlight-tlds .spotlight-tld{border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:#fff;box-shadow:var(--mh-shadow)}
#main-body #order-standard_cart .suggested-domains,#main-body #order-standard_cart .domain-pricing{border:1px solid var(--mh-line);border-radius:var(--mh-radius);background:#fff;box-shadow:var(--mh-shadow);overflow:hidden}
#main-body #order-standard_cart .suggested-domains .panel-heading,#main-body #order-standard_cart .domain-pricing .tld-pricing-header{background:var(--mh-navy);color:#fff}
#main-body #order-standard_cart .domain-pricing .tld-pricing-header .col-xs-2,#main-body #order-standard_cart .domain-pricing .tld-pricing-header div{color:#fff}
#main-body #order-standard_cart .domain-pricing .tld-row{border-bottom:1px solid var(--mh-line)}
#main-body #order-standard_cart .domain-pricing .tld-row:nth-child(odd){background:var(--mh-soft)}
#main-body #order-standard_cart .tld-filters a.label{border-radius:20px;padding:6px 12px}
#main-body #order-standard_cart .tld-filters a.label-success{background:var(--mh-orange);color:var(--mh-navy)}

/* ---------- 9. Pakketten kiezen ---------- */
#main-body #order-standard_cart .products .product{padding:0;overflow:hidden;margin-bottom:24px;display:flex;flex-direction:column}
#main-body #order-standard_cart .products .product header{background:var(--mh-navy);color:#fff;padding:16px 20px;border:0;border-radius:0;margin:0}
#main-body #order-standard_cart .products .product header span{color:#fff;font-family:"Roboto Condensed",sans-serif;font-size:21px;font-weight:700}
#main-body #order-standard_cart .products .product header .qty{color:#c8d3df;font-size:13px}
#main-body #order-standard_cart .products .product div.product-desc{padding:18px 20px;width:auto;float:none;color:var(--mh-text);font-size:15px}
#main-body #order-standard_cart .products .product .product-desc ul{padding-left:0;margin:0}
#main-body #order-standard_cart .products .product .product-desc li{padding:5px 0 5px 26px;border-bottom:1px dashed var(--mh-line);position:relative;list-style:none}
#main-body #order-standard_cart .products .product .product-desc li:before{content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;color:var(--mh-orange);position:absolute;left:2px;top:6px;font-size:13px}
#main-body #order-standard_cart .products .product footer{padding:16px 20px 20px;width:auto;float:none;text-align:left;border-top:1px solid var(--mh-line);background:var(--mh-soft);margin:auto 0 0;font-size:14px}
#main-body #order-standard_cart .products .product footer .product-pricing{color:var(--mh-navy)}
#main-body #order-standard_cart .products .product footer .product-pricing .price{font-family:"Roboto Condensed",sans-serif;font-size:30px;font-weight:700;color:var(--mh-navy)}
#main-body #order-standard_cart .products .product footer .btn{width:100%;max-width:100%;white-space:normal;margin:10px 0 0}

/* ---------- 10. Configureren, winkelwagen en afrekenen ---------- */
#main-body #order-standard_cart .product-info{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);padding:16px 18px;box-shadow:var(--mh-shadow)}
#main-body #order-standard_cart .product-info .product-title{color:var(--mh-navy);font-family:"Roboto Condensed",sans-serif;font-size:20px}
#main-body #order-standard_cart .field-container{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);padding:18px;box-shadow:var(--mh-shadow)}
#main-body #order-standard_cart .view-cart-items-header{background:var(--mh-navy);color:#fff;border-radius:var(--mh-radius) var(--mh-radius) 0 0;padding:12px 16px;font-weight:700}
#main-body #order-standard_cart .view-cart-items{border-top-left-radius:0;border-top-right-radius:0;padding:0 16px}
#main-body #order-standard_cart .view-cart-items .item{border-bottom:1px solid var(--mh-line);padding:16px 0}
#main-body #order-standard_cart .view-cart-items .item:last-child{border-bottom:0}
#main-body #order-standard_cart .view-cart-items .item-title{color:var(--mh-navy);font-weight:700}
#main-body #order-standard_cart .view-cart-items .item-price span{color:var(--mh-navy);font-weight:700}
#main-body #order-standard_cart .view-cart-items .btn-remove-from-cart{color:#c62828}
#main-body #order-standard_cart .empty-cart .btn{border-radius:var(--mh-radius-sm)}
/* overzicht met totaal */
#main-body #order-standard_cart .order-summary{background:var(--mh-navy);border-radius:var(--mh-radius);overflow:hidden;box-shadow:var(--mh-shadow);border:0}
#main-body #order-standard_cart .order-summary h2{background:var(--mh-navy);color:#fff;font-size:20px;padding:14px 18px;margin:0}
#main-body #order-standard_cart .order-summary .summary-container{border-radius:0;border:0;box-shadow:none;padding:16px 18px}
#main-body #order-standard_cart .order-summary .subtotal,#main-body #order-standard_cart .order-summary .bordered-totals{border-color:var(--mh-line)}
#main-body #order-standard_cart .order-summary .total-due-today .amt{font-family:"Roboto Condensed",sans-serif;font-size:32px;color:var(--mh-navy);font-weight:700}
#main-body #order-standard_cart .order-summary .btn-checkout,#main-body #order-standard_cart .order-summary .btn-continue-shopping{width:100%;margin:8px 0 0}
#main-body #order-standard_cart .order-summary .btn-continue-shopping{color:#005a9c}
#main-body #order-standard_cart .promo-code,#main-body #order-standard_cart .view-cart-tabs{border-radius:var(--mh-radius);overflow:hidden}
#main-body #order-standard_cart .view-cart-tabs .nav-tabs>li>a{border-radius:var(--mh-radius-sm) var(--mh-radius-sm) 0 0;color:var(--mh-navy);font-weight:600}
#main-body #order-standard_cart .view-cart-tabs .tab-content{background:#fff;border:1px solid var(--mh-line);border-top:0;border-radius:0 0 var(--mh-radius) var(--mh-radius);padding:16px}
/* afrekenen: betaalmethodes als blokjes */
#main-body #order-standard_cart #paymentGatewaysContainer .text-center{text-align:left}
#main-body #order-standard_cart #paymentGatewaysContainer label.radio-inline{display:inline-flex;align-items:center;gap:8px;margin:0 10px 10px 0;padding:12px 16px;border:1px solid var(--mh-field);border-radius:var(--mh-radius-sm);background:#fff;cursor:pointer;font-weight:600;color:var(--mh-navy)}
#main-body #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:checked){border-color:var(--mh-orange);box-shadow:var(--mh-focus);background:#fffaf5}
#main-body #order-standard_cart #paymentGatewaysContainer label.radio-inline input{position:static;margin:0}
#main-body #order-standard_cart .already-registered{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);padding:14px 18px;box-shadow:var(--mh-shadow)}
#main-body #order-standard_cart #btnCompleteOrder{font-size:18px;padding:14px 34px}
#main-body #order-standard_cart .checkout-security-msg{border-radius:10px;overflow-wrap:anywhere}

/* ---------- 11. Regels die sterker moeten zijn dan de site-CSS ----------
   template.css (gedeeld met WordPress) zet knoppen, tussenkopjes en paginatitels met
   !important. Die winnen alleen van een regel die zelf ook !important heeft. */
#main-body .sub-heading{text-align:left!important;height:auto!important;margin-top:28px!important;margin-bottom:12px!important;border-top:0!important}
#main-body .sub-heading span{color:var(--mh-navy)!important}
#main-body div.header-lined h1{margin-bottom:6px!important;color:var(--mh-navy)!important}
#main-body .btn-primary,#main-body .btn-success,#main-body .btn-warning,
#main-body #order-standard_cart .btn-checkout,#main-body #order-standard_cart .btn-order-now,#main-body #btnCompleteOrder{
	background:var(--mh-orange)!important;border:1px solid var(--mh-orange)!important;color:var(--mh-navy)!important;text-shadow:none!important
}
#main-body .btn-primary:hover,#main-body .btn-primary:focus,#main-body .btn-success:hover,#main-body .btn-success:focus,#main-body .btn-warning:hover,
#main-body #order-standard_cart .btn-checkout:hover,#main-body #order-standard_cart .btn-order-now:hover,#main-body #btnCompleteOrder:hover{
	background:var(--mh-orange-hover)!important;border-color:var(--mh-orange-hover)!important;color:var(--mh-navy)!important
}
#main-body .btn-default{background:#fff!important;border:1px solid var(--mh-navy)!important;color:var(--mh-navy)!important;text-shadow:none!important}
#main-body .btn-default:hover,#main-body .btn-default:focus{background:var(--mh-navy)!important;color:#fff!important}
#main-body .btn-info{background:var(--mh-slate)!important;border:1px solid var(--mh-slate)!important;color:#fff!important;text-shadow:none!important}
#main-body .btn-info:hover{background:var(--mh-navy)!important;border-color:var(--mh-navy)!important}
#main-body .btn-danger{background:#c62828!important;border:1px solid #c62828!important;color:#fff!important;text-shadow:none!important}
#main-body .btn-danger:hover{background:#a31f1f!important}
#main-body .btn-large{font-size:17px;padding:13px 40px}
#main-body .loginbox .login-form .btn-default,#main-body .loginbox .login-form .btn-default:hover{background:none!important;border:0!important;color:#005a9c!important}

/* ---------- 12. Losse onderdelen ---------- */
/* postcode + huisnummer opzoeken (eigen hook op registreren en afrekenen) */
#main-body #extra-postcode-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;margin:0 0 16px!important;background:var(--mh-soft);border:1px dashed var(--mh-field);border-radius:10px}
#main-body #extra-postcode-wrapper label{margin:0;font-weight:600}
#main-body #extra-postcode-wrapper input{width:130px!important;margin:0!important}
#main-body #extra-postcode-wrapper #extraHuisnummer{width:90px!important}
#main-body #extra-postcode-wrapper .btn{margin:0!important;height:46px}
/* captcha (registreren, inloggen, contact): all.css geeft hier margin-bottom:-63px */
#main-body #default-captcha-domainchecker{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin:4px 0 8px}
#main-body #default-captcha-domainchecker>p{flex:0 0 100%;margin:0 0 4px}
#main-body #default-captcha-domainchecker>[class*=col-]{width:auto;float:none;padding:0;min-height:0}
#main-body #default-captcha-domainchecker .pull-left{float:none!important}
#main-body [class*=col-]:has(>#default-captcha-domainchecker){width:100%;margin-left:0;float:none;padding-left:0;padding-right:0}
/* captcha bij domein zoeken en verhuizen */
#main-body #order-standard_cart .captcha-container{position:relative;z-index:3}
#main-body #order-standard_cart .captcha-container .default-captcha{display:inline-block;width:auto;max-width:100%;background:#fff;border-radius:10px;padding:10px 14px;box-shadow:0 6px 18px rgba(0,0,0,.2)}
#main-body #order-standard_cart .captcha-container .default-captcha p{margin:0 0 6px;font-size:13px;color:var(--mh-muted)}
#main-body #order-standard_cart .captcha-container .default-captcha>div{display:flex;gap:10px;align-items:center;justify-content:center}
/* v8i: het invoerveld had geen rand: de regel voor het zoekveld (.domain-checker-container .form-control: border:0) gold ook voor dit veld, dat wit op een wit kaartje staat */
#main-body #order-standard_cart .captcha-container #inputCaptcha{width:110px;height:40px;margin:0;padding:6px 10px;font-size:16px;border:1px solid #8393a8;border-radius:var(--mh-radius-sm);background-color:#fff;color:var(--mh-navy)}
#main-body #order-standard_cart .captcha-container #inputCaptcha:focus{border-color:var(--mh-navy);box-shadow:var(--mh-focus);outline:none}
#main-body #order-standard_cart .captcha-container #inputCaptchaImage{height:38px}
/* algemene voorwaarden (eigen tekst met vinkje) */
#main-body label.checkbox{font-weight:400;color:var(--mh-text)}
#main-body .tospanel label.checkbox{display:block;position:relative;padding-left:32px;line-height:1.6;font-size:14px;margin:4px 0}
#main-body .tospanel label.checkbox>input[type=checkbox]{position:absolute;left:2px;top:2px;margin:0;width:19px;height:19px}
#main-body .tospanel label.checkbox>input+br{display:none}
#main-body .tospanel .panel-body{padding:18px 20px}
#main-body .tospanel ul{margin:6px 0 0;padding-left:4px}
#main-body .row.highlightbox .panel{box-shadow:none}
/* wachtwoord vergeten (zonder titelbalk) als losse kaart */
#main-body .logincontainer{max-width:520px;margin:10px auto 30px;background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);padding:26px 28px}
#main-body .featurebox.loginbox .logincontainer{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:none;padding:24px 26px 8px}
#main-body .logincontainer .form-group.text-center .btn-primary{width:100%;font-size:16px;padding:12px 20px;margin:0}
/* domeinextensies: filterknopjes en prijstabel */
#main-body #order-standard_cart .tld-filters{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
#main-body #order-standard_cart .tld-filters a.badge{background:#e9eef4!important;color:var(--mh-navy)!important;text-decoration:none!important;border-radius:20px;padding:7px 13px;font-size:13px;font-weight:600;margin:0;border:1px solid transparent}
#main-body #order-standard_cart .tld-filters a.badge:hover{border-color:var(--mh-navy)}
#main-body #order-standard_cart .tld-filters a.badge-success{background:var(--mh-orange)!important;color:var(--mh-navy)!important}
#main-body #order-standard_cart .tld-pricing-header,#main-body #order-standard_cart .tld-pricing-header div{background:var(--mh-navy)!important;color:#fff!important;font-weight:700}
#main-body #order-standard_cart .tld-pricing-header{padding:4px 0}
/* extra opties bij een pakket (addons) */
#main-body #order-standard_cart .panel-addon{border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);cursor:pointer}
#main-body #order-standard_cart .panel-addon .panel-add{background:var(--mh-soft);color:var(--mh-navy);font-weight:700;border-top:1px solid var(--mh-line)}
#main-body #order-standard_cart .panel-addon-selected{border-color:var(--mh-orange);box-shadow:var(--mh-focus)}
#main-body #order-standard_cart .panel-addon-selected .panel-add{background:var(--mh-orange);color:var(--mh-navy)}
#main-body #order-standard_cart .panel-addon .panel-price{color:var(--mh-navy);font-weight:700}

/* verborgen knoppen (bijv. "Maak een nieuw account aan" bij afrekenen): template.css zet
   .whmcscontainer .btn op inline-block en maakte .w-hidden daarmee weer zichtbaar. Bewust zonder !important:
   het bestelformulier toont deze blokken later met jQuery (show, fadeIn, slideDown) via een inline display,
   en dat moet kunnen blijven winnen (anders blijven o.a. de velden van "Nieuw contact toevoegen" en de
   kaartgegevens verborgen). */
#main-body .w-hidden{display:none}
/* tussenkopjes in de winkelwagen (standard_cart laadt later en wint anders) */
#main-body #order-standard_cart .sub-heading{height:auto!important}
#main-body #order-standard_cart .sub-heading span{padding:0!important;position:static!important;top:auto!important;background:none!important;font-size:20px}
/* winkelwagen legen: rustige rode link in plaats van een groene knop */
#main-body #order-standard_cart #btnEmptyCart{background:none!important;border:0!important;color:#c62828!important;font-weight:600;text-shadow:none!important;padding:4px 6px}
#main-body #order-standard_cart #btnEmptyCart:hover{text-decoration:underline}
/* betaalmethodes als tegels (de logo's komen uit de hook payment_logos_checkout) */
#main-body #order-standard_cart #paymentGatewaysContainer>.text-center{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}
#main-body #order-standard_cart #paymentGatewaysContainer label.radio-inline{position:relative;flex-direction:column;justify-content:flex-start;width:190px;min-height:150px;margin:0;padding:16px 12px 14px;text-align:center;font-size:14px;line-height:1.4;vertical-align:top}
#main-body #order-standard_cart #paymentGatewaysContainer label.radio-inline>br{display:none}
#main-body #order-standard_cart #paymentGatewaysContainer label.radio-inline>[class^=iradio]{position:absolute!important;left:10px;top:10px}
#main-body #order-standard_cart #paymentGatewaysContainer label.radio-inline:hover{border-color:var(--mh-navy)}
#main-body #order-standard_cart #paymentGatewaysContainer .row.highlightbox{border:0;box-shadow:none;padding:0;margin:0;background:none;width:100%}
#main-body #order-standard_cart #paymentGatewaysContainer .row.highlightbox [class*=col-]{float:none;width:auto;padding:0}
#main-body #order-standard_cart #paymentGatewaysContainer img{max-height:40px;margin:4px auto 8px;display:block}
/* akkoord met de voorwaarden bij afrekenen: vinkje naast de eerste regel */
#main-body label.checkbox-inline:has(#accepttos){display:block;position:relative;padding-left:34px;line-height:1.6;font-size:14px;font-weight:400;color:var(--mh-text)}
#main-body #iCheck-accepttos{position:absolute!important;left:0;top:2px}
#main-body #iCheck-accepttos+br{display:none}
/* kleiner scherm (standard_cart toont onder 1200 px een ingeklapte zijbalk): één compacte rij keuzelijsten */
@media (max-width:1199px){
	#main-body #order-standard_cart .sidebar-collapsed{display:grid;grid-template-columns:1fr 1fr 86px;gap:8px;align-items:end;margin:0 0 16px;padding:12px;background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow)}
	#main-body #order-standard_cart .sidebar-collapsed .panel{margin:0;border:0;box-shadow:none;background:none;border-radius:0;overflow:visible}
	#main-body #order-standard_cart .sidebar-collapsed .panel:has(select>option:only-child){display:none}
	#main-body #order-standard_cart .sidebar-collapsed .panel-heading{background:none;padding:0 0 4px}
	#main-body #order-standard_cart .sidebar-collapsed .panel-heading .panel-title{color:var(--mh-navy);font-size:12px;font-family:inherit}
	#main-body #order-standard_cart .sidebar-collapsed .panel-heading i{display:none}
	#main-body #order-standard_cart .sidebar-collapsed .panel-body{padding:0}
	#main-body #order-standard_cart .sidebar-collapsed .pull-right{float:none!important;margin:0}
	#main-body #order-standard_cart .sidebar-collapsed select{height:42px;font-size:14px;padding:6px 8px;width:100%;margin:0}
	#main-body #order-standard_cart .sidebar-collapsed::after{display:none}
}

/* ---------- 13. Telefoon ---------- */
@media (max-width:767px){
	.articlemain>.container1>.whmcscontainer.highlightbox{padding-top:18px}
	#main-body .header-lined h1,#main-body #order-standard_cart .header-lined h1{font-size:24px}
	#main-body .row.highlightbox{padding:16px 4px 2px}
	#main-body .featurebox.loginbox .logincontainer{padding:20px 18px 6px}
	#main-body .loginbox .mh-registreer{margin:16px -18px 0;padding:14px 18px 16px}
	#main-body #order-standard_cart .domain-checker-container .form-control{font-size:16px}
	#main-body #order-standard_cart .domain-checker-container .btn{padding:0 16px}
	#main-body .btn-lg{font-size:16px;padding:12px 18px}
	#main-body #order-standard_cart #btnCompleteOrder{width:100%}
}
@media (max-width:359px){#main-body #order-standard_cart .sidebar-collapsed{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){#main-body *{transition:none!important}}

/* =====================================================================================
   stellar-mh 2.0 · mascotte, popups, mini-winkelwagen, stappenbalk, bedankpagina
   Eigen onderdelen beginnen met .mh- ; ze staan buiten #main-body (popup, wagen, melding).
   ===================================================================================== */
:root{
	--mh-green:#2f8f3a;--mh-green-soft:#e9f6ea;--mh-red:#c62828;--mh-red-soft:#fdecec;--mh-blue:#0b84bd;--mh-blue-soft:#e8f3fa;
	--mh-ease:cubic-bezier(.2,.8,.3,1);--mh-pop:cubic-bezier(.2,.9,.3,1.15);
}
html.mh-lock{overflow:hidden}
html.mh-lock body{padding-right:var(--mh-sbw,0)}
/* de ronde cookie-knop (z-index 999998) hangt anders over de knoppen van de popup */
html.mh-lock #cc-reopen{visibility:hidden;opacity:0;transition:none}

/* ---------- 14. Paginakop met mascotte ---------- */
.subbanner{position:relative}
body.mh-has-scene .subbanner{min-height:238px;padding-top:42px;overflow:hidden}
body.mh-has-scene .subbanner .inner{max-width:1250px;width:90%;margin:0 auto;position:relative;z-index:2}
body.mh-has-scene .subbanner h1,body.mh-has-scene .subbanner span{text-align:left;max-width:calc(100% - 340px)}
.subbanner .mh-scene{position:absolute;right:max(4%,calc((100% - 1250px)/2 + 10px));bottom:0;height:min(236px,calc(100% - 12px));width:auto;z-index:3;pointer-events:none;
	filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));animation:mh-scene-in .7s .15s var(--mh-ease) both}
body.mh-has-scene .subbanner::before{content:"";position:absolute;right:max(2%,calc((100% - 1250px)/2));bottom:-30px;width:min(560px,70%);height:300px;z-index:1;pointer-events:none;
	background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,.12) 55%,rgba(255,255,255,0))}
@keyframes mh-scene-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:900px){
	body.mh-has-scene .subbanner{min-height:176px;padding-top:30px}
	.subbanner .mh-scene{height:min(160px,calc(100% - 10px));right:3%}
	body.mh-has-scene .subbanner::before{width:60%;height:210px}
	body.mh-has-scene .subbanner h1,body.mh-has-scene .subbanner span{max-width:calc(100% - 240px)}
}
@media (max-width:560px){
	body.mh-has-scene .subbanner{min-height:138px;padding-top:22px}
	.subbanner .mh-scene{height:112px;max-width:46%;object-fit:contain;object-position:right bottom;right:8px}
	body.mh-has-scene .subbanner::before{width:70%;height:150px;bottom:-20px}
	body.mh-has-scene .subbanner .inner{width:92%}
	body.mh-has-scene .subbanner h1{font-size:clamp(22px,7vw,27px);line-height:1.1;max-width:calc(100% - 150px);overflow-wrap:break-word;hyphens:auto}
	body.mh-has-scene .subbanner span{max-width:calc(100% - 150px)}
}

/* ---------- 15. Knoppen en bewegende kaarten ---------- */
#main-body .btn-primary,#main-body .btn-success,#main-body #btnCompleteOrder{box-shadow:0 2px 0 rgba(196,106,26,.55),0 6px 14px rgba(240,149,70,.28);position:relative;overflow:hidden}
#main-body .btn-primary:hover,#main-body .btn-success:hover,#main-body #btnCompleteOrder:hover{transform:translateY(-1px);box-shadow:0 3px 0 rgba(196,106,26,.55),0 10px 20px rgba(240,149,70,.35)}
#main-body .btn-primary:active,#main-body .btn-success:active,#main-body #btnCompleteOrder:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(196,106,26,.55)}
#main-body .panel,#main-body .tiles .tile>a,#main-body #order-standard_cart .products .product,#main-body #order-standard_cart .spotlight-tld{transition:transform .2s var(--mh-ease),box-shadow .2s ease,border-color .2s ease}
#main-body #order-standard_cart .products .product:hover,#main-body #order-standard_cart .spotlight-tld:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(36,49,65,.06),0 14px 30px rgba(36,49,65,.13)}
.mh-reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s var(--mh-ease)}
.mh-reveal.mh-in{opacity:1;transform:none}

/* klantoverzicht: tegels als kaarten */
#main-body .tiles{margin:0 0 22px}
#main-body .tiles .row{display:flex;flex-wrap:wrap;margin:0 -8px}
#main-body .tiles .tile{float:none;background:none;border:0!important;padding:8px;display:block}
#main-body .tiles .tile:hover{background:none}
#main-body .tiles .tile>a{display:block;position:relative;background:#fff;border:1px solid var(--mh-line);border-radius:14px;padding:16px 18px 18px;box-shadow:var(--mh-shadow);overflow:hidden;color:var(--mh-navy)}
#main-body .tiles .tile>a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(36,49,65,.14);border-color:#cfd9e4}
#main-body .tiles .tile .icon{position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--mh-blue-soft);color:var(--mh-blue);font-size:18px}
#main-body .tiles .tile:nth-child(2) .icon{background:var(--mh-green-soft);color:var(--mh-green)}
#main-body .tiles .tile:nth-child(3) .icon{background:#eef0f6;color:#46506a}
#main-body .tiles .tile:nth-child(4) .icon{background:#fff3e6;color:#c9722c}
#main-body .tiles .tile .stat{font-family:"Roboto Condensed",sans-serif;font-size:40px;line-height:1.1;font-weight:700;color:var(--mh-navy);margin-top:6px}
#main-body .tiles .tile .title{color:var(--mh-muted);font-size:14px;font-weight:600;margin-top:2px}
#main-body .tiles .tile .highlight{position:absolute;left:0;right:0;bottom:0;height:4px!important;width:auto!important;margin:0;border-radius:0;background-color:var(--mh-blue)}
#main-body .tiles .tile .highlight.bg-color-green{background-color:#43a843}
#main-body .tiles .tile .highlight.bg-color-red{background-color:#8aa0b8}
#main-body .tiles .tile .highlight.bg-color-gold{background-color:var(--mh-orange)}

/* statuslabels als pilletjes.
   WHMCS geeft elke status een eigen klasse (status-expired, status-active, ...). De basis-template
   kleurt alleen de tekst, op een witte achtergrond. Hier krijgt elk label een eigen kleur met
   voldoende contrast, en een neutrale grijsblauwe pil voor statussen die we niet kennen. */
#main-body .label.status,#main-body .label-success,#main-body .label-danger,#main-body .label-warning,#main-body .label-info,#main-body .label-default,#main-body .label-primary{font-size:12px;font-weight:700;color:#fff}
#main-body .label.status{display:inline-block;border:0;line-height:1.3;padding:4px 12px;font-size:12px;letter-spacing:.02em;text-align:center;white-space:nowrap;vertical-align:middle;background:#5b6b7d;color:#fff}
/* groen: loopt, open, betaald */
#main-body .label-success,#main-body .label.status.status-active,#main-body .label.status.status-open,#main-body .label.status.status-completed,#main-body .label.status.status-paid,#main-body .label.status.status-accepted{background:#2a7f34;color:#fff}
/* rood: verlopen, onbetaald, achterstand */
#main-body .label-danger,#main-body .label.status.status-expired,#main-body .label.status.status-unpaid,#main-body .label.status.status-overdue{background:#c62828;color:#fff}
#main-body .label.status.status-collections{background:#8e1b1b;color:#fff}
/* oranje: wacht op iets (met donkerblauwe tekst) */
#main-body .label-warning,#main-body .label.status.status-pending,#main-body .label.status.status-pending-transfer,#main-body .label.status.status-pendingtransfer,#main-body .label.status.status-pending-registration,#main-body .label.status.status-pendingregistration,#main-body .label.status.status-grace,#main-body .label.status.status-customer-reply,#main-body .label.status.status-customerreply,#main-body .label.status.status-payment-pending{background:var(--mh-orange);color:var(--mh-navy)}
#main-body .label.status.status-suspended{background:#f2c744;color:var(--mh-navy)}
#main-body .label.status.status-redemption{background:#c2410c;color:#fff}
/* blauw: lopende handeling of informatie */
#main-body .label-info,#main-body .label-primary,#main-body .label.status.status-answered,#main-body .label.status.status-in-progress,#main-body .label.status.status-inprogress,#main-body .label.status.status-on-hold,#main-body .label.status.status-onhold,#main-body .label.status.status-delivered,#main-body .label.status.status-refunded{background:#0a6f9e;color:#fff}
/* grijs: afgerond of niet meer van toepassing */
#main-body .label-default,#main-body .label.status.status-closed,#main-body .label.status.status-cancelled,#main-body .label.status.status-terminated,#main-body .label.status.status-transferred-away,#main-body .label.status.status-transferredaway,#main-body .label.status.status-lost,#main-body .label.status.status-dead,#main-body .label.status.status-draft{background:#6b7684;color:#fff}
#main-body .label.status.status-fraud{background:var(--mh-navy);color:#fff}
/* eigen kleur uit de ticketinstellingen (WHMCS zet kleur en rand zelf in het style-attribuut) */
#main-body .label.status.status-custom{background:#fff;border:1.5px solid currentColor}
/* wie schreef het bericht (ticket): dezelfde kleuren als hierboven, wit op middenkleur had te weinig contrast */
#main-body .label.requestor-type-operator{background:#0a6f9e;color:#fff}
#main-body .label.requestor-type-owner{background:#2a7f34;color:#fff}
#main-body .label.requestor-type-authorizeduser,#main-body .label.requestor-type-subaccount{background:#5b6b7d;color:#fff}
#main-body .label.requestor-type-registereduser{background:var(--mh-orange);color:var(--mh-navy)}
#main-body .label.requestor-type-guest{background:#6b7684;color:#fff}
/* in de lijsten staat het label netjes in het midden van de rij */
#main-body .table td .label.status{margin:0}

/* ticket- en berichtenlijsten */
#main-body .ticket-reply{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);margin-bottom:14px;overflow:hidden}
#main-body .ticket-reply .posted-by{background:var(--mh-soft);border-bottom:1px solid var(--mh-line);padding:10px 16px;color:var(--mh-navy);font-weight:600}
#main-body .ticket-reply.staff .posted-by,#main-body .ticket-reply.requestor-type-operator .posted-by{background:#fff3e6}
#main-body .ticket-reply .message{padding:14px 16px}

/* ---------- 16. Popup (zoals de cookiebanner: een kaart op een gedimde achtergrond) ---------- */
.mh-modal-backdrop{position:fixed;inset:0;z-index:99990;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(21,30,42,.58);
	-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s ease;font-family:"Open Sans",Arial,sans-serif}
.mh-modal-backdrop.is-open{opacity:1}
.mh-modal{position:relative;width:min(540px,100%);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:24px;
	box-shadow:0 2px 6px rgba(10,20,35,.2),0 34px 80px rgba(10,20,35,.5);transform:translateY(26px) scale(.96);opacity:0;transition:transform .38s var(--mh-pop),opacity .22s ease;text-align:center;color:var(--mh-text)}
.mh-modal:focus{outline:none}
.is-open>.mh-modal{transform:none;opacity:1}
.mh-modal.is-swap .mh-modal-content,.mh-modal.is-swap .mh-modal-art{animation:mh-swap .35s var(--mh-ease)}
@keyframes mh-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mh-modal-close{position:absolute;right:12px;top:12px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--mh-navy);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:background .15s ease,transform .15s ease;padding:0}
.mh-modal-close:hover{background:#fff;transform:rotate(90deg)}
.mh-modal-close:focus-visible,.mh-btn:focus-visible,.mh-alt:focus-visible,.mh-cart-fab:focus-visible,.mh-cart-rm:focus-visible{outline:3px solid var(--mh-navy);outline-offset:3px;box-shadow:0 0 0 6px rgba(240,149,70,.45)}
.mh-modal-art{position:relative;overflow:hidden;border-radius:24px 24px 0 0;padding:22px 20px 0;background:linear-gradient(180deg,#e4f0fa 0%,#f4f9fe 100%)}
.mh-modal-art::before{content:"";position:absolute;left:50%;bottom:-90px;width:380px;height:380px;margin-left:-190px;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,255,255,.0))}
.mh-modal-art .mh-art-img{position:relative;display:block;margin:0 auto;height:196px;width:auto;max-width:100%;animation:mh-float 4.5s ease-in-out infinite}
@keyframes mh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mh-m-ok .mh-modal-art{background:linear-gradient(180deg,#e2f5e4 0%,#f3fbf4 100%)}
.mh-m-taken .mh-modal-art,.mh-m-invalid .mh-modal-art{background:linear-gradient(180deg,#fdeaea 0%,#fff6f6 100%)}
.mh-m-added .mh-modal-art{background:linear-gradient(180deg,#e8f3fa 0%,#f6fbff 100%)}
.mh-modal-content{padding:20px 28px 28px}
.mh-modal-eyebrow{margin:0;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mh-orange-hover)}
.mh-m-ok .mh-modal-eyebrow{color:var(--mh-green)}
.mh-m-taken .mh-modal-eyebrow,.mh-m-invalid .mh-modal-eyebrow{color:var(--mh-red)}
.mh-modal h2{margin:6px 0 10px;padding:0;font-family:"Roboto Condensed",sans-serif;font-size:31px;line-height:1.15;font-weight:700;color:var(--mh-navy);text-transform:none;letter-spacing:0;text-align:center;word-break:break-word}
.mh-modal h2 b{color:var(--mh-blue);font-weight:700}
.mh-modal p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--mh-text)}
.mh-m-note{color:var(--mh-muted)!important;font-size:14px!important}
.mh-price{margin:2px 0 6px!important;display:flex;align-items:baseline;justify-content:center;gap:8px}
.mh-price-amt{font-family:"Roboto Condensed",sans-serif;font-size:50px;line-height:1;font-weight:700;color:var(--mh-navy)}
.mh-price-per{font-size:15px;font-weight:600;color:var(--mh-muted)}
.mh-example{display:inline-block;padding:6px 16px;border-radius:999px;background:var(--mh-soft);border:1px dashed var(--mh-field);font-weight:700;color:var(--mh-navy)!important}
.mh-modal-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;max-width:380px;margin:18px auto 0}
.mh-dots{display:flex;justify-content:center;gap:7px;margin:10px 0 6px!important}
.mh-dots i{width:11px;height:11px;border-radius:50%;background:var(--mh-orange);animation:mh-dot 1s ease-in-out infinite}
.mh-dots i:nth-child(2){animation-delay:.15s}.mh-dots i:nth-child(3){animation-delay:.3s}
@keyframes mh-dot{0%,80%,100%{transform:scale(.55);opacity:.45}40%{transform:scale(1);opacity:1}}

/* knoppen in popup en wagen */
.mh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:14px;border:2px solid transparent;font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none!important;
	cursor:pointer;transition:transform .15s var(--mh-ease),box-shadow .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;box-shadow:none;position:relative;overflow:hidden}
.mh-btn:active{transform:translateY(1px)}
.mh-btn-ico{display:inline-grid;place-items:center;line-height:0}.mh-btn-ico svg{width:22px;height:22px}
.mh-btn-primary{background:var(--mh-orange);border-color:var(--mh-orange);color:var(--mh-navy)!important;box-shadow:0 3px 0 #c46a1a,0 10px 22px rgba(240,149,70,.35)}
.mh-btn-primary:hover{background:#f4a259;border-color:#f4a259;transform:translateY(-2px);box-shadow:0 5px 0 #c46a1a,0 14px 26px rgba(240,149,70,.4)}
.mh-btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 #c46a1a}
.mh-btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:mh-shine 3.6s ease-in-out 1s infinite}
@keyframes mh-shine{0%,60%{left:-60%}100%{left:130%}}
.mh-btn-ghost{background:#fff;border-color:#c9d3df;color:var(--mh-navy)!important}
.mh-btn-ghost:hover{border-color:var(--mh-navy);background:#f7f9fb}
.mh-btn-link{background:none;min-height:40px;padding:6px 8px;color:#005a9c!important;font-weight:600;font-size:14.5px;text-decoration:underline!important;text-underline-offset:3px}
.mh-btn-link:hover{color:var(--mh-navy)!important}
.mh-btn.is-busy{pointer-events:none;opacity:.85}
.mh-btn.is-busy .mh-btn-ico{animation:mh-spin 1s linear infinite}
@keyframes mh-spin{to{transform:rotate(360deg)}}
.mh-btn[disabled]{opacity:.7;cursor:default}

/* alternatieven bij een bezet domein */
.mh-alt-head{font-weight:700;color:var(--mh-navy)!important;margin:6px 0 8px!important;font-size:14px!important}
.mh-alts{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
.mh-alts li{list-style:none;margin:0}
.mh-alt{width:100%;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;border:1.5px solid var(--mh-line);background:#fff;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s ease,transform .15s var(--mh-ease),box-shadow .15s ease}
.mh-alt:hover{border-color:var(--mh-green);transform:translateX(3px);box-shadow:0 6px 16px rgba(47,143,58,.14)}
.mh-alt-name{flex:1;font-weight:700;color:var(--mh-navy);word-break:break-all}
.mh-alt-price{font-weight:700;color:var(--mh-green)}
.mh-alt-add{width:28px;height:28px;border-radius:50%;background:var(--mh-green);color:#fff;display:grid;place-items:center;font-size:20px;line-height:1;font-weight:700}
.mh-alt.is-busy{opacity:.6;pointer-events:none}

/* ---------- 17. Mini-winkelwagen ---------- */
.mh-cart-fab{position:fixed;right:22px;bottom:24px;z-index:9990;width:62px;height:62px;border-radius:50%;border:0;background:var(--mh-navy);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;
	box-shadow:0 2px 4px rgba(0,0,0,.2),0 12px 28px rgba(21,30,42,.4);transition:transform .2s var(--mh-pop),background .15s ease}
.mh-cart-fab:hover{transform:scale(1.07);background:#2c3c52}
.mh-cart-fab.is-hidden{display:none}
.mh-cart-fab .mh-cart-count{position:absolute;top:-4px;right:-4px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--mh-orange);color:var(--mh-navy);font:800 13px/24px "Open Sans",Arial,sans-serif;text-align:center;border:2px solid #fff}
.mh-cart-fab.is-bump{animation:mh-bump .6s var(--mh-pop)}
@keyframes mh-bump{0%{transform:scale(1)}30%{transform:scale(1.28) rotate(-8deg)}60%{transform:scale(.94) rotate(4deg)}100%{transform:scale(1)}}
.mh-cart-scrim{position:fixed;inset:0;z-index:99980;background:rgba(21,30,42,.5);opacity:0;transition:opacity .25s ease}
.mh-cart-scrim.is-on{opacity:1}
.mh-cart{position:fixed;top:0;right:0;bottom:0;z-index:99985;width:min(430px,100%);display:flex;flex-direction:column;background:#fff;box-shadow:-20px 0 60px rgba(10,20,35,.35);transform:translateX(105%);transition:transform .3s var(--mh-ease);font-family:"Open Sans",Arial,sans-serif;color:var(--mh-text)}
.mh-cart[hidden],.mh-cart-scrim[hidden]{display:none}
.mh-cart.is-on{transform:none}
.mh-cart:focus{outline:none}
.mh-cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:var(--mh-navy);color:#fff}
.mh-cart-head h2{margin:0;padding:0;font-family:"Roboto Condensed",sans-serif;font-size:24px;font-weight:700;color:#fff;text-transform:none;letter-spacing:0}
.mh-cart-head .mh-modal-close{position:static}
.mh-cart-body{flex:1;overflow-y:auto;padding:14px 20px}
.mh-cart-foot{display:flex;flex-direction:column;gap:10px;padding:16px 20px 20px;border-top:1px solid var(--mh-line);background:var(--mh-soft)}
.mh-cart-list{list-style:none;margin:0;padding:0}
.mh-cart-list li{list-style:none;display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--mh-line);transition:opacity .2s ease,transform .2s ease}
.mh-cart-list li.is-removing{opacity:.35;transform:translateX(12px)}
.mh-cart-item{flex:1;min-width:0}
.mh-cart-item strong{display:block;color:var(--mh-navy);font-size:15px;word-break:break-word}
.mh-cart-item small,.mh-cart-price small{display:block;color:var(--mh-muted);font-size:12.5px;line-height:1.4}
.mh-cart-price{text-align:right;font-weight:700;color:var(--mh-navy);white-space:nowrap}
.mh-cart-rm{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:#f1f4f8;color:#6b7684;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s ease,color .15s ease}
.mh-cart-rm svg{width:15px;height:15px}
.mh-cart-rm:hover{background:var(--mh-red-soft);color:var(--mh-red)}
.mh-cart-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 4px;color:var(--mh-muted);font-weight:600}
.mh-cart-total strong{font-family:"Roboto Condensed",sans-serif;font-size:30px;color:var(--mh-navy)}
.mh-cart-empty{text-align:center;padding:30px 10px}
.mh-cart-empty img{height:170px;width:auto;max-width:100%;margin-bottom:10px}
.mh-cart-empty p{margin:0 0 6px;color:var(--mh-text)}
.mh-cart-msg{padding:24px 4px;text-align:center}
.mh-muted{color:var(--mh-muted)!important}
.mh-skel i{display:block;height:58px;margin:10px 0;border-radius:10px;background:linear-gradient(90deg,#eef2f6 25%,#f8fafc 37%,#eef2f6 63%);background-size:400% 100%;animation:mh-skel 1.2s ease infinite}
@keyframes mh-skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* melding */
.mh-toast{position:fixed;left:50%;bottom:26px;z-index:99995;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:12px 16px;border-radius:14px;background:var(--mh-navy);color:#fff;box-shadow:0 14px 40px rgba(10,20,35,.4);
	transform:translate(-50%,30px);opacity:0;pointer-events:none;transition:transform .3s var(--mh-pop),opacity .2s ease;font:600 14.5px/1.35 "Open Sans",Arial,sans-serif}
.mh-toast.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.mh-toast-ico{width:26px;height:26px;border-radius:50%;background:var(--mh-green);display:grid;place-items:center;flex:none;color:#fff}
.mh-toast-act{background:none;border:0;color:var(--mh-orange);font:700 14.5px "Open Sans",Arial,sans-serif;cursor:pointer;padding:4px 2px;text-decoration:underline;text-underline-offset:3px}
.mh-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:99999}

/* ---------- 18. Stappenbalk met live voortgang ---------- */
.mh-steps{position:relative;margin:0 0 26px;padding:18px 18px 14px;background:#fff;border:1px solid var(--mh-line);border-radius:16px;box-shadow:var(--mh-shadow)}
.mh-steps ol{display:flex;margin:0!important;padding:0;list-style:none;position:relative;z-index:2}
.mh-step{display:block;margin:0!important;flex:1 1 25%;text-align:center;list-style:none!important;position:relative}
.mh-step::marker{content:none}
.mh-step-dot{display:grid;place-items:center;width:40px;height:40px;margin:0 auto 6px;border-radius:50%;background:#fff;border:2px solid var(--mh-field);color:#8a95a3;font-weight:800;font-size:16px;transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s var(--mh-pop)}
.mh-step-lbl{display:block;font-weight:700;font-size:14px;color:#8a95a3;transition:color .3s ease}
.mh-step-sub:empty{display:none}
.mh-steps.has-sub .mh-step.is-now .mh-step-sub:empty{display:block;min-height:16px}
.mh-step-sub{display:block;font-size:12px;font-weight:700;color:var(--mh-orange-hover)}
.mh-step.is-now .mh-step-dot{background:var(--mh-orange);border-color:var(--mh-orange);color:var(--mh-navy);transform:scale(1.12);animation:mh-pulse 2.2s ease-out infinite}
.mh-step.is-now .mh-step-lbl{color:var(--mh-navy)}
.mh-step.is-done .mh-step-dot{background:var(--mh-green);border-color:var(--mh-green);color:#fff}
.mh-step.is-done .mh-step-lbl{color:var(--mh-text)}
@keyframes mh-pulse{0%{box-shadow:0 0 0 0 rgba(240,149,70,.55)}70%,100%{box-shadow:0 0 0 14px rgba(240,149,70,0)}}
.mh-steps-track{position:absolute;z-index:1;left:calc(18px + (100% - 36px)/8);right:calc(18px + (100% - 36px)/8);top:37px;height:4px;border-radius:4px;background:#e3e9f0;overflow:hidden}
.mh-steps-fill{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--mh-green),var(--mh-orange));transition:width .9s var(--mh-ease)}
.mh-steps-live:empty{display:none}
.mh-steps-live{margin:4px 0 0;min-height:20px;text-align:center;font-size:13.5px;font-weight:600;color:var(--mh-muted)}
@media (max-width:520px){.mh-step-lbl{font-size:12px}.mh-step-dot{width:34px;height:34px;font-size:14px}.mh-steps-track{top:34px}.mh-steps{padding:14px 8px 10px}.mh-steps-track{left:calc(8px + (100% - 16px)/8);right:calc(8px + (100% - 16px)/8)}}

/* ---------- 19. Bedankpagina ---------- */
.mh-thanks{display:flex;align-items:center;gap:26px;margin:6px 0 22px;padding:24px 28px;border-radius:20px;background:linear-gradient(135deg,#e2f5e4 0%,#f3fbf4 55%,#fff 100%);border:1px solid #cfe7d1;box-shadow:var(--mh-shadow);overflow:hidden}
.mh-thanks-txt{flex:1;min-width:0}
.mh-thanks h2{margin:4px 0 6px!important;font-size:34px!important;line-height:1.1}
.mh-thanks-nr{margin:0 0 14px;color:var(--mh-muted)}
.mh-thanks-nr strong{color:var(--mh-navy)}
.mh-thanks .mh-modal-eyebrow{color:var(--mh-green)}
.mh-thanks-art{flex:0 0 auto}
.mh-thanks-art img{display:block;height:230px;width:auto;max-width:100%;animation:mh-float 4.5s ease-in-out infinite}
.mh-next{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mh-next li{list-style:none;display:flex;gap:12px;align-items:flex-start;opacity:0;animation:mh-swap .5s var(--mh-ease) forwards}
.mh-next li:nth-child(2){animation-delay:.18s}.mh-next li:nth-child(3){animation-delay:.36s}
.mh-next li>span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--mh-field);color:#8a95a3;font-weight:800;font-size:14px}
.mh-next li.is-done>span{background:var(--mh-green);border-color:var(--mh-green);color:#fff}
.mh-next li.is-now>span{background:var(--mh-orange);border-color:var(--mh-orange);color:var(--mh-navy)}
.mh-next strong{display:block;color:var(--mh-navy);font-size:15.5px}
.mh-next small{display:block;color:var(--mh-muted);font-size:13.5px;line-height:1.4}
#main-body #order-standard_cart .order-confirmation{border-radius:12px;font-size:16px;text-align:center}
.hook-tf-complete #order-standard_cart .header-lined{display:none}
.hook-tf-complete #order-standard_cart .cart-body>p{max-width:640px}
@media (max-width:760px){.mh-thanks{flex-direction:column-reverse;padding:20px 18px;text-align:left}.mh-thanks-art img{height:170px}.mh-thanks h2{font-size:28px!important}}

/* ---------- 20. Telefoon: popup als lade onderaan ---------- */
@media (max-width:600px){
	.mh-modal-backdrop{align-items:flex-end;padding:0}
	.mh-modal{width:100%;border-radius:24px 24px 0 0;max-height:92vh;max-height:92dvh;transform:translateY(60px)}
	.mh-modal-art{border-radius:24px 24px 0 0;padding-top:16px}
	.mh-modal-art .mh-art-img{height:150px}
	.mh-modal-content{padding:16px 20px calc(22px + env(safe-area-inset-bottom,0px))}
	.mh-modal h2{font-size:26px}
	.mh-price-amt{font-size:42px}
	.mh-modal-actions{max-width:none}
	.mh-cart-fab{right:14px;bottom:16px;width:56px;height:56px}
}

@media (prefers-reduced-motion:reduce){
	.mh-modal,.mh-modal-backdrop,.mh-cart,.mh-cart-scrim,.mh-toast,.mh-steps-fill,.mh-reveal{transition:none!important}
	.mh-modal-art .mh-art-img,.mh-thanks-art img,.mh-dots i,.mh-btn-primary::after,.mh-step.is-now .mh-step-dot,.subbanner .mh-scene,.mh-cart-fab.is-bump,.mh-next li,.mh-modal.is-swap .mh-modal-content,.mh-modal.is-swap .mh-modal-art{animation:none!important}
	.mh-next li{opacity:1}
	.mh-reveal{opacity:1;transform:none}
}

/* mascotte-tip onderin de mini-winkelwagen */
.mh-cart-tip{display:flex;align-items:center;gap:14px;margin:18px 0 6px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,#eef6fc,#fdf3ea);border:1px solid #e1ebf3}
.mh-cart-tip .mh-tip-img{flex:none;height:92px;width:auto;margin:-18px 0 -4px}
.mh-cart-tip p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.35;color:var(--mh-text)}
.mh-cart-tip strong{font-family:"Roboto Condensed",sans-serif;font-size:19px;color:var(--mh-navy);font-weight:700}
.mh-cart-tip a{color:#0b6fa0;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* de gloed van de laadbalk bovenaan (#progress dt) stak rechts buiten beeld en liet de pagina op telefoons uitzoomen */
#progress{overflow-x:clip}

/* lege winkelwagen: mascotte in de pagina zelf (op telefoons staat er geen mascotte in de kop) */
.mh-empty-cart{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 14px 30px;gap:6px}
.mh-empty-cart img{height:190px;width:auto;max-width:100%;margin-bottom:4px}
.mh-empty-cart strong{font-family:"Roboto Condensed",sans-serif;font-size:26px;color:var(--mh-navy);font-weight:700}
.mh-empty-cart p{margin:0 0 10px;color:var(--mh-muted);max-width:34em}
.mh-empty-cart .mh-empty-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* zoekveld op de klantpagina: de lupe staat links, de tekst moet daarachter beginnen */
#main-body .home-kb-search .form-control{padding-left:50px}
#main-body .home-kb-search i{color:var(--mh-muted)}

/* =====================================================================================
   Versie 4: uitleg, vergrendelde velden, ticketknoppen, Affiliates, SMS/WhatsApp,
   modulepagina's (firewall, parkeren) en de blokken onder in "Domein registreren"
   ===================================================================================== */

/* ---------- 21. Uitlegblok bovenaan een pagina (includes/mh-uitleg.tpl) ---------- */
#main-body .mh-uitleg{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--mh-line);border-left:5px solid var(--mh-orange);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);padding:18px 22px;margin:0 0 22px}
#main-body .mh-uitleg-icoon{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--mh-navy);color:var(--mh-orange);display:flex;align-items:center;justify-content:center;font-size:19px}
#main-body .mh-uitleg-tekst{flex:1;min-width:0}
#main-body .mh-uitleg h3{margin:0 0 6px;font-size:20px;line-height:1.2}
#main-body .mh-uitleg p{margin:0 0 8px}
#main-body .mh-uitleg p:last-child{margin-bottom:0}
#main-body .mh-uitleg-noot{font-size:13.5px;color:var(--mh-muted);margin-top:10px!important;padding-top:10px;border-top:1px dashed var(--mh-line)}
#main-body .mh-stappen{counter-reset:mhs;list-style:none;margin:8px 0 6px;padding:0;display:grid;gap:9px}
#main-body .mh-stappen li{counter-increment:mhs;position:relative;padding:1px 0 0 36px;min-height:26px}
#main-body .mh-stappen li:before{content:counter(mhs);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--mh-orange);color:var(--mh-navy);font-weight:700;font-size:13px;line-height:26px;text-align:center}
@media (max-width:575px){
	#main-body .mh-uitleg{padding:14px 14px;gap:12px}
	#main-body .mh-uitleg-icoon{flex-basis:38px;width:38px;height:38px;font-size:16px}
	#main-body .mh-uitleg h3{font-size:18px}
}

/* ---------- 22. Velden die je niet kunt wijzigen: duidelijk vergrendeld ---------- */
#main-body input.form-control:disabled,#main-body select.form-control:disabled,#main-body textarea.form-control:disabled{
	background:#eef1f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7684' d='M12 1.5a5 5 0 0 0-5 5V9H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6.5a5 5 0 0 0-5-5Zm-3 5a3 3 0 1 1 6 0V9H9V6.5Z'/%3E%3C/svg%3E") no-repeat right 14px center/15px 15px;
	border:1px dashed #aab7c6;color:#3f4b5a;-webkit-text-fill-color:#3f4b5a;opacity:1;cursor:not-allowed;padding-right:40px;box-shadow:none
}
#main-body .form-group.mh-locked>label{color:#3f4b5a}
#main-body .mh-lock-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:1px 9px;border-radius:999px;background:#e3e8ee;color:#4a5563;font-family:"Open Sans",Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:18px;vertical-align:1px;white-space:nowrap}
#main-body .mh-lock-badge i{font-size:10px}
#main-body .mh-lock-note{display:flex;gap:14px;align-items:flex-start;background:#f4f6f9;border:1px solid var(--mh-line);border-radius:var(--mh-radius-sm);padding:12px 16px;margin:0 0 16px;color:var(--mh-text)}
#main-body .mh-lock-note>i{margin-top:3px;color:#6b7684;font-size:16px}
#main-body .mh-lock-note strong{color:var(--mh-navy)}

/* ---------- 23. Postcodecheck (autofill-address.js): uitleg erboven ---------- */
#main-body #extra-postcode-wrapper:before{content:"Postcodecheck: vul uw postcode en huisnummer in, dan vullen wij uw adres aan.";flex:0 0 100%;font-size:13px;color:var(--mh-muted);margin-bottom:2px}
#main-body #extra-postcode-wrapper{margin-bottom:16px!important}
#main-body #extra-postcode-wrapper #extraPostcode{text-transform:uppercase}
#main-body #extra-postcode-wrapper #addr-loading{display:inline-flex;align-items:center}
@media (max-width:575px){
	#main-body #extra-postcode-wrapper input{width:46%!important;flex:1 1 40%}
	#main-body #extra-postcode-wrapper #extraHuisnummer{width:46%!important}
	#main-body #extra-postcode-wrapper .btn{flex:1 1 100%;width:100%}
}

/* ---------- 24. Verstuur ticket: de knoppen onderaan in rijen van 3 ---------- */
#main-body .buttonboxes.portalboxes{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;width:100%;margin:0}
#main-body .buttonboxes.portalboxes:before,#main-body .buttonboxes.portalboxes:after{display:none}
#main-body .buttonboxes.portalboxes .box{float:none;clear:none;display:flex;width:calc((100% - 40px)/3);margin:0;box-sizing:border-box;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#main-body .buttonboxes.portalboxes .box:hover{background:#fff;border-color:var(--mh-orange);transform:translateY(-2px);box-shadow:0 10px 26px rgba(36,49,65,.14)}
#main-body .buttonboxes.portalboxes .box a{flex:1;display:block;min-width:0;padding:22px 74px 22px 22px;background-position:right 16px center;background-size:48px auto}
@media (max-width:991px){#main-body .buttonboxes.portalboxes .box a{padding-right:68px}}
@media (max-width:767px){#main-body .buttonboxes.portalboxes .box{width:calc((100% - 20px)/2)}}
@media (max-width:479px){#main-body .buttonboxes.portalboxes{gap:14px}#main-body .buttonboxes.portalboxes .box{width:100%}}
@media (prefers-reduced-motion:reduce){#main-body .buttonboxes.portalboxes .box:hover{transform:none}}

/* ---------- 25. Affiliates ---------- */
#main-body .mh-aff-link{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);padding:18px 22px;margin:0 0 22px}
#main-body .mh-aff-link-kop{display:flex;align-items:center;gap:10px;margin:0 0 10px}
#main-body .mh-aff-link-kop i{color:var(--mh-orange);font-size:18px}
#main-body .mh-aff-link-kop h3{margin:0;font-size:19px}
#main-body .mh-aff-link-rij{display:flex;gap:10px;align-items:stretch}
#main-body .mh-aff-link-veld{flex:1;min-width:0;height:46px;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px;background:var(--mh-soft);color:var(--mh-navy);text-overflow:ellipsis}
#main-body .mh-kopieer{flex:0 0 auto;height:46px;padding:0 20px;white-space:nowrap}
#main-body .mh-kopieer.is-gekopieerd{background:#2a7f34!important;border-color:#2a7f34!important;color:#fff!important}
#main-body .mh-aff-tegels{margin-bottom:4px}
#main-body .mh-tegel{display:grid;grid-template-columns:50px 1fr;column-gap:14px;align-items:center;background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);padding:16px 18px;margin:0 0 18px;text-align:left;font-size:14px;font-weight:600;line-height:1.25;color:var(--mh-muted);min-height:0;height:auto}
#main-body .mh-tegel>i{grid-row:span 2;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;position:static;float:none;margin:0;padding:0;line-height:1}
#main-body .mh-tegel>span{display:block;font-family:"Roboto Condensed",sans-serif;font-size:32px;font-weight:700;line-height:1.05;color:var(--mh-navy);margin:0;padding:0;float:none}
#main-body .mh-tegel-oranje>i{background:#fdeedd;color:#c76a14}
#main-body .mh-tegel-blauw>i{background:#e1f0f8;color:#0a6f9e}
#main-body .mh-tegel-groen>i{background:#e3f3e5;color:#2a7f34}
#main-body .mh-aff-bedragen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:2px 0 24px}
#main-body .mh-aff-bedrag{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);padding:16px 18px;text-align:center;box-shadow:var(--mh-shadow)}
#main-body .mh-aff-bedrag-label{display:block;font-size:13px;color:var(--mh-muted);margin-bottom:4px}
#main-body .mh-aff-bedrag strong{font-family:"Roboto Condensed",sans-serif;font-size:28px;line-height:1.1;color:var(--mh-navy)}
#main-body .mh-aff-bedrag-hoofd{border-color:var(--mh-orange);box-shadow:inset 0 0 0 1px var(--mh-orange),var(--mh-shadow)}
#main-body .mh-aff-uitbetalen{margin:0 0 8px}
#main-body .btn.disabled,#main-body .btn[disabled],#main-body a.btn[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed}
#main-body .mh-leeg{text-align:center;background:#fff;border:2px dashed var(--mh-field);border-radius:var(--mh-radius);padding:28px 20px;margin:0 0 22px;color:var(--mh-muted)}
#main-body .mh-leeg>i{display:block;font-size:30px;color:var(--mh-orange);margin-bottom:8px}
#main-body .mh-leeg p{margin:0}
#main-body .mh-aff-hero{text-align:center;background:linear-gradient(135deg,var(--mh-navy),#34475f);border-radius:var(--mh-radius);padding:30px 24px;margin:0 0 22px;box-shadow:var(--mh-shadow)}
#main-body .mh-aff-hero h2{color:#fff;margin:0 0 8px;font-size:28px}
#main-body .mh-aff-hero p{margin:0;color:#dbe4ee;font-size:17px}
#main-body .mh-aff-voordelen{display:flex;flex-wrap:wrap}
#main-body .mh-aff-voordelen:before,#main-body .mh-aff-voordelen:after{display:none}
#main-body .mh-aff-voordelen>[class*=col-]{display:flex;margin-bottom:18px}
#main-body .mh-voordeel{flex:1;background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);padding:22px 20px;text-align:center}
#main-body .mh-voordeel>i{width:56px;height:56px;border-radius:50%;background:#fdeedd;color:#c76a14;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:23px}
#main-body .mh-voordeel p{margin:0}
#main-body .mh-aff-activeer{margin:6px 0 10px}
@media (max-width:767px){
	#main-body .mh-aff-bedragen{grid-template-columns:1fr}
	#main-body .mh-aff-link-rij{flex-direction:column}
	#main-body .mh-kopieer{width:100%}
	#main-body .mh-aff-hero{padding:24px 16px}
	#main-body .mh-aff-hero h2{font-size:23px}
}

/* ---------- 26. SMS- en WhatsApp-notificatie (managesms.tpl, managewhatsapp.tpl) ---------- */
#main-body .mh-notify-intro #smsarea h2.heading2{margin:0 0 8px;font-size:26px;text-align:left}
#main-body .mh-notify-intro{padding:22px 26px}
#main-body .mh-notify-card{padding:6px 26px 22px}
#main-body table.mh-notify,#main-body table.mh-notify tbody{display:block;width:100%!important;border:0}
#main-body table.mh-notify tr{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:6px 28px;align-items:start;padding:16px 0;border-bottom:1px solid var(--mh-line);background:none!important}
#main-body table.mh-notify tr:last-child{border-bottom:0}
#main-body table.mh-notify td{display:block;padding:0!important;border:0!important;background:none!important;width:auto!important;text-align:left}
#main-body table.mh-notify td:first-child{font-weight:700;color:var(--mh-navy)}
#main-body table.mh-notify td.mh-opslaan{grid-column:1/-1;text-align:center;padding-top:4px!important}
#main-body table.mh-notify td.alert{color:#2a7f34;font-weight:700;margin:0;padding:0!important;border-radius:0}
#main-body table.mh-notify input[type=text]{width:100%;max-width:280px;margin:0 0 6px}
#main-body table.mh-notify input[type=text][readonly]{background:#eef1f5;border-style:dashed;cursor:not-allowed}
#main-body table.mh-notify input[type=checkbox]{width:18px;height:18px;margin:0 8px 0 0;vertical-align:-3px}
#main-body table.mh-notify .small{display:block;color:var(--mh-muted);margin-top:4px}
#main-body table.mh-notify .button1{margin:8px 8px 0 0}
#main-body table.mh-notify .phonevalidation{background:#fff4e5!important;border-radius:8px;padding:14px!important}
#main-body .mh-badge{display:inline-block;padding:1px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:20px;vertical-align:1px}
#main-body .mh-badge-ok{background:#e3f3e5;color:#1f6a29}
#main-body .mh-badge-wacht{background:#fdeedd;color:#9a4d0a}
#main-body .mh-badge-nodig{background:#fbe4e4;color:#a31f1f}
#main-body .mh-status-tekst{display:inline-block;padding:1px 12px;border-radius:999px;background:#e8edf3;color:var(--mh-navy);font-size:13px;font-weight:700;line-height:22px;vertical-align:1px}
#main-body .mh-status-tekst.is-aan{background:#e3f3e5;color:#1f6a29}
#main-body .mh-status-tekst:empty{display:none}
#main-body .mh-notify-card .mh-melding{margin:18px 0 6px}
#main-body table.mh-notify input[type=checkbox][aria-readonly]{cursor:default}
@media (max-width:767px){
	#main-body .mh-notify-card{padding:4px 16px 18px}
	#main-body .mh-notify-intro{padding:18px 16px}
	#main-body table.mh-notify tr{grid-template-columns:1fr;gap:4px;padding:14px 0}
	#main-body table.mh-notify input[type=text]{max-width:none}
}

/* ---------- 27. Modulepagina's: IP-adres deblokkeren, geparkeerde domeinen ---------- */
#main-body .d-flex{display:flex}
#main-body .align-items-start{align-items:flex-start}
#main-body .gap-5{gap:12px}
#main-body .me-3{margin-right:16px}
#main-body .mt-1{margin-top:4px}
#main-body .mt-2{margin-top:10px}
#main-body .highlightbox>.page-header{margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--mh-line)}
#main-body .highlightbox>.page-header .styled_title h2,#main-body #freehostingdomain h2.heading2{margin:0;text-align:left;font-size:26px}
#main-body #freehostingdomain h2.heading2{margin-bottom:14px}
#main-body .notice.notice-info{display:flex;gap:14px;background:#eaf4fb;border:1px solid #cfe5f3;border-left:5px solid #0a6f9e;border-radius:var(--mh-radius-sm);padding:14px 18px;color:#1d4560;margin:14px 0 24px;animation:none}
#main-body .notice.notice-info .inside{padding:0;background:none;border:0}
#main-body .notice.notice-info .inside p{margin:0}
#main-body .highlightbox .highlightbox{background:var(--mh-soft);box-shadow:none;border:1px solid var(--mh-line);padding:18px 20px;margin-top:6px}
#main-body #btnIPv4,#main-body #btnIPv6{min-width:84px;margin:8px 0 0}
#main-body .btn-outline-secondary,#main-body .btn-outline-primary{background:#fff!important;border:1px solid var(--mh-field)!important;color:var(--mh-slate)!important}
#main-body .btn-outline-primary{border-color:var(--mh-navy)!important;color:var(--mh-navy)!important}
#main-body .btn-outline-secondary[disabled]{opacity:.55}
#main-body #freehostingdomain+*,#main-body #freehostingdomain{max-width:none}
#main-body #freehostingdomain>div:empty{display:none}

/* ---------- 28. Domein registreren: de twee blokken onderaan met mascotte (bovenaan op een donkerblauwe band, zoals de paginakop) ---------- */
#main-body #order-standard_cart .row:has(>[class*=col-]>.mh-promo){display:flex;flex-wrap:wrap}
#main-body #order-standard_cart .row:has(>[class*=col-]>.mh-promo):before,#main-body #order-standard_cart .row:has(>[class*=col-]>.mh-promo):after{display:none}
#main-body #order-standard_cart .row>[class*=col-]:has(>.mh-promo){display:flex}
#main-body #order-standard_cart .domain-promo-box.mh-promo{flex:1;display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--mh-line);border-top:4px solid var(--mh-orange);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);padding:0;margin:10px 0 20px;overflow:hidden}
#main-body #order-standard_cart .domain-promo-box.mh-promo.mh-promo-transfer{border-top-color:#0a6f9e}
#main-body #order-standard_cart .mh-promo-plaatje{flex:none;height:178px;display:flex;align-items:flex-end;justify-content:center;padding:16px 12px 0;background:radial-gradient(ellipse at 50% 100%,#34475f 0,#243141 70%)}
#main-body #order-standard_cart .mh-promo-img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom center}
#main-body #order-standard_cart .mh-promo-tekst{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:20px 24px 24px;text-align:left}
#main-body #order-standard_cart .mh-promo-label{display:inline-block;background:#fdeedd;color:#9a4d0a;border-radius:999px;padding:2px 11px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:8px}
#main-body #order-standard_cart .mh-promo-transfer .mh-promo-label{background:#e1f0f8;color:#0a5f88}
#main-body #order-standard_cart .mh-promo h3{margin:0 0 8px;font-size:23px;line-height:1.2;white-space:normal;text-align:left;color:var(--mh-navy)}
#main-body #order-standard_cart .mh-promo p{margin:0 0 12px;color:var(--mh-text);font-size:14.5px;text-align:left}
#main-body #order-standard_cart .mh-promo-lijst{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
#main-body #order-standard_cart .mh-promo-lijst li{position:relative;padding-left:24px;font-size:14px;color:var(--mh-text);text-align:left}
#main-body #order-standard_cart .mh-promo-lijst li:before{content:"";position:absolute;left:2px;top:4px;width:12px;height:7px;border-left:3px solid #2a7f34;border-bottom:3px solid #2a7f34;transform:rotate(-45deg)}
#main-body #order-standard_cart .mh-promo .btn{margin:auto 0 0;align-self:flex-start}
#main-body #order-standard_cart .mh-promo .btn i{margin-left:6px;font-size:12px}
#main-body #order-standard_cart .mh-promo p.mh-promo-voet{margin:-6px 0 12px;font-size:12px;color:var(--mh-muted)}
@media (max-width:575px){
	#main-body #order-standard_cart .mh-promo-plaatje{height:150px}
	#main-body #order-standard_cart .mh-promo-tekst{padding:18px 18px 20px}
	#main-body #order-standard_cart .mh-promo .btn{align-self:stretch;text-align:center}
}

/* tussenkoppen op de pagina zelf (includes/subheader.tpl is een kale h2) en koppen in het uitlegblok links uitgelijnd */
#main-body .main-content>h2{text-align:left;font-size:22px;margin:28px 0 14px}
#main-body .main-content>h2:before{content:"";display:inline-block;width:5px;height:20px;border-radius:3px;background:var(--mh-orange);margin-right:10px;vertical-align:-3px}
#main-body .mh-uitleg h3,#main-body .mh-uitleg p,#main-body .mh-uitleg li{text-align:left}
@media (min-width:768px){#main-body .mh-aff-bedragen{gap:30px}}

/* postcodecheck compact: labels voor schermlezers, de velden zelf hebben een voorbeeld als tekst */
#main-body #extra-postcode-wrapper{position:relative;flex-wrap:wrap;gap:8px 10px}
#main-body #extra-postcode-wrapper label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#main-body #extra-postcode-wrapper #extraPostcode{flex:0 0 118px;width:118px!important}
#main-body #extra-postcode-wrapper #extraHuisnummer{flex:0 0 88px;width:88px!important}
#main-body #extra-postcode-wrapper .btn{flex:1 1 auto;white-space:nowrap}
#main-body .mh-aff-link-veld{margin-bottom:0!important}

/* SMS/WhatsApp: tussenkop en knoppen van de module in dezelfde stijl */
#main-body table.mh-notify tr.mh-sectie{padding:24px 0 6px;border-bottom:0}
#main-body table.mh-notify tr.mh-sectie td:first-child{font-family:"Roboto Condensed",sans-serif;font-size:19px}
#main-body table.mh-notify tr.mh-sectie td:last-child{display:none}
#main-body .button1.color2{background:var(--mh-orange)!important;color:var(--mh-navy)!important;text-shadow:none!important;border:1px solid var(--mh-orange)!important;border-radius:8px;font-weight:700;padding:11px 24px;line-height:1.2;cursor:pointer;text-transform:none}
#main-body .button1.color2:hover{background:var(--mh-orange-hover)!important;border-color:var(--mh-orange-hover)!important}

/* het schuine spookwoord achter de tekst van de ticketknoppen (template.css) haalt de leesbaarheid weg */
#main-body .addtext::after{display:none}
/* geparkeerde domeinen: de zin "Er zijn geen domeinnamen besteld…" (een link) als melding */
#main-body #freehostingdomain form>p>a{display:block;background:#fff4e5;border:1px solid #f5d2a8;border-left:5px solid var(--mh-orange);border-radius:var(--mh-radius-sm);padding:12px 16px;color:#7a3f08;text-decoration:none;margin-top:8px}
#main-body #freehostingdomain form>p>a:hover{background:#ffecd2;color:#5d2f05;text-decoration:underline}
#main-body #freehostingdomain form>p{margin:0}

/* Veiligheidsinstellingen: de drie opties als nette regels met een status-label */
#main-body .twofa-option{gap:14px;margin:0!important}
#main-body .twofa-option img{height:56px!important;width:auto;margin:0!important}
#main-body .twofa-option>strong{flex:1;color:var(--mh-navy)}
#main-body .twofa-option>span{margin-left:auto!important;padding:2px 14px;border-radius:999px;font-size:12px;line-height:20px;font-weight:700!important;white-space:nowrap}
#main-body .twofa-option>span.text-success{background:#e3f3e5;color:#1f6a29!important}
#main-body .twofa-option>span.text-muted{background:#e9edf2;color:#4a5563!important}
@media (max-width:575px){#main-body .twofa-option{flex-wrap:wrap}#main-body .twofa-option>strong{flex:1 1 60%}}
.mh-notify .mh-hint{margin:0 0 8px;color:#5b6978;max-width:34em}

/* bestelformulier, domeinen instellen: "Je hebt geen hostingpakket besteld" als rode melding (ook zonder JS via het inline-kleurkenmerk) */
#order-standard_cart a[href="cart.php"][style*="cc0000"],
#order-standard_cart .mh-hosting-nee{display:inline-block;background:#c62828;color:#fff!important;font-weight:600;line-height:1.4;padding:9px 16px;border-radius:var(--mh-radius-sm);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.12)}
#order-standard_cart a[href="cart.php"][style*="cc0000"]:hover,
#order-standard_cart a[href="cart.php"][style*="cc0000"]:focus,
#order-standard_cart .mh-hosting-nee:hover,
#order-standard_cart .mh-hosting-nee:focus{background:#a81f1f;color:#fff!important;text-decoration:none}
#order-standard_cart span[style*="009900"],
#order-standard_cart .mh-hosting-ja{display:inline-block;background:#e6f4ea;color:#1b6b2f!important;font-weight:600;line-height:1.4;padding:9px 16px;border-radius:var(--mh-radius-sm)}

/* ---------- tip van de dag (startpagina) ---------- */
.mh-tip{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--mh-line);border-left:4px solid var(--mh-orange);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);padding:14px 16px;margin:0 0 20px}
.mh-tip-icoon{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#fdf0e3;color:var(--mh-orange-hover);display:flex;align-items:center;justify-content:center;font-size:16px}
.mh-tip-tekst{flex:1 1 auto;min-width:0;font-size:14.5px;line-height:1.55;color:var(--mh-text)}
.mh-tip-titel{display:block;font-family:"Roboto Condensed",sans-serif;font-size:16px;color:var(--mh-navy);margin-bottom:2px}
.mh-tip-tekst a{font-weight:600}
.mh-tip-sluit{flex:0 0 auto;border:0;background:transparent;color:var(--mh-muted);font-size:22px;line-height:1;padding:2px 8px;border-radius:6px;cursor:pointer}
.mh-tip-sluit:hover,.mh-tip-sluit:focus{background:var(--mh-soft);color:var(--mh-navy)}
.mh-tip-sluit:focus-visible{outline:none;box-shadow:var(--mh-focus)}
@media (max-width:575px){.mh-tip{padding:12px;gap:10px}.mh-tip-icoon{width:32px;height:32px;font-size:14px}}

/* ---------- terug naar beheer: knop voor een ingelogde beheerder (vervangt de rode melding onderaan) ---------- */
.btn.btn-return-to-admin{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9980;display:inline-flex;align-items:center;gap:8px;background:var(--mh-navy);color:#fff;border:0;border-radius:999px;min-height:38px;padding:9px 16px;font:600 13px/1.2 "Open Sans",Arial,sans-serif;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.25);opacity:.92}
.btn.btn-return-to-admin:hover,.btn.btn-return-to-admin:focus{background:#2c3c52;color:#fff;text-decoration:none;opacity:1}
.btn.btn-return-to-admin:focus-visible{outline:3px solid var(--mh-navy);outline-offset:3px;box-shadow:0 0 0 6px rgba(240,149,70,.45)}
@media (max-width:767px){.btn.btn-return-to-admin{min-width:46px;min-height:46px;justify-content:center;padding:0}.btn.btn-return-to-admin span{display:none}}

/* ---------- afrekenen: Domein registrant informatie (nieuw contact): postcodecheck en veldmeldingen ---------- */
#main-body .mh-adreszoek{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;margin:0 0 16px;background:var(--mh-soft);border:1px dashed var(--mh-field);border-radius:10px}
#main-body .mh-adreszoek label{margin:0;font-weight:600}
#main-body .mh-adreszoek input{width:130px;margin:0;text-transform:uppercase}
#main-body .mh-adreszoek #mhDcHuisnummer{width:90px;text-transform:none}
#main-body .mh-adreszoek .btn{margin:0;height:46px}
#main-body .mh-adreszoek .btn.is-busy{opacity:.7;cursor:wait}
#main-body .mh-adreszoek-uitleg{flex:0 0 100%;margin:0 0 2px;font-size:13px;color:var(--mh-muted)}
#main-body .mh-adreszoek-melding{flex:0 0 100%;margin:2px 0 0;font-size:13px;line-height:1.4;color:var(--mh-muted)}
#main-body .mh-adreszoek-melding.is-fout{color:var(--mh-red)}
#main-body .mh-adreszoek-melding.is-goed{color:var(--mh-green)}
#main-body .mh-veldmelding{display:block;margin:6px 0 0;font-size:13px;line-height:1.4}
#main-body .mh-veldmelding.is-fout{color:var(--mh-red)}
#main-body .mh-veldmelding.is-goed{color:var(--mh-green)}
#main-body #domainRegistrantInputFields .form-control.is-invalid{border-color:var(--mh-red)}
#main-body #domainRegistrantInputFields .form-control.is-valid{border-color:var(--mh-green)}
@media (max-width:575px){
	#main-body .mh-adreszoek label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
	#main-body .mh-adreszoek #mhDcPostcode{flex:0 0 118px;width:118px}
	#main-body .mh-adreszoek #mhDcHuisnummer{flex:0 0 88px;width:88px}
	#main-body .mh-adreszoek .btn{flex:1 1 auto;white-space:nowrap}
}

/* ---------- v8h: bedankpagina, oranje waarschuwingsblok (bij een eerste bestelling: de verificatie) ---------- */
.mh-attentie{display:flex;gap:14px;align-items:flex-start;margin:0 0 22px;padding:16px 20px;border-radius:12px;background:#fff6ec;border:1px solid #f7dcbc;border-left:5px solid var(--mh-orange);color:#6a3d10;line-height:1.5}
.mh-attentie-ico{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--mh-orange);color:var(--mh-navy);font-weight:800;font-size:18px;line-height:1}
.mh-attentie-txt{flex:1;min-width:0}
.mh-attentie-txt strong{display:block;margin:2px 0 3px;color:#5a3109;font-size:16px}
.mh-attentie-txt p{margin:0;color:#6a3d10}
@media (max-width:575px){.mh-attentie{padding:14px 14px;gap:12px}}

/* ---------- v8i: standaard wit kader voor pagina's zonder eigen kader (pagina's van registrar-modules en andere plugins) ----------
   Heeft de inhoud al een eigen kader (.panel, .highlightbox, .table-container, .well, .mh-uitleg, enzovoort), dan verandert er niets: geen kader in een kader.
   Is er niets, dan krijgt de hele inhoudskolom het witte kader van de andere pagina's. Het kader staat in een ::before, zodat de kolomgoot
   (15px) gelijk blijft aan die van de zijbalk en de andere kaarten. Een pagina die geen kader wil: voeg de klasse mh-geen-kader toe aan
   .main-content. Kaders in een (verborgen) pop-upvenster tellen niet mee. Browsers zonder :has() slaan deze regels over; die tonen de pagina zoals voorheen. */
body:not(.hook-tf-homepage,.hook-tf-forwardpage,.hook-tf-3dsecure) #main-body .main-content:not(.mh-geen-kader):not(:has(:where(.panel,.card,.highlightbox,.featurebox,.well,.table-container,.logincontainer,.client-home-panels,.tiles,.ticket-reply,.buttonboxes,.mh-uitleg,.mh-aff-link,.mh-tegel,.mh-aff-bedrag,.mh-voordeel,.mh-geen-kader,#order-standard_cart):not(.modal-content,.modal-content *,.modal *))){
	position:relative;isolation:isolate;padding:22px 37px;margin-bottom:24px
}
body:not(.hook-tf-homepage,.hook-tf-forwardpage,.hook-tf-3dsecure) #main-body .main-content:not(.mh-geen-kader):not(:has(:where(.panel,.card,.highlightbox,.featurebox,.well,.table-container,.logincontainer,.client-home-panels,.tiles,.ticket-reply,.buttonboxes,.mh-uitleg,.mh-aff-link,.mh-tegel,.mh-aff-bedrag,.mh-voordeel,.mh-geen-kader,#order-standard_cart):not(.modal-content,.modal-content *,.modal *)))::before{
	content:"";position:absolute;z-index:-1;top:0;bottom:0;left:15px;right:15px;
	background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow)
}
@media (max-width:575px){
	body:not(.hook-tf-homepage,.hook-tf-forwardpage,.hook-tf-3dsecure) #main-body .main-content:not(.mh-geen-kader):not(:has(:where(.panel,.card,.highlightbox,.featurebox,.well,.table-container,.logincontainer,.client-home-panels,.tiles,.ticket-reply,.buttonboxes,.mh-uitleg,.mh-aff-link,.mh-tegel,.mh-aff-bedrag,.mh-voordeel,.mh-geen-kader,#order-standard_cart):not(.modal-content,.modal-content *,.modal *))){padding:16px 29px}
}

/* ---------- v8j: tabbladen zonder eigen kader (domeindetails: Verlengen, Nameservers, Registrar Lock, Domein opheffen, Opties; productdetails: Downloads, Opties, Wijzig wachtwoord) ----------
   Alleen het tabblad Overzicht heeft een eigen kader; de andere tabbladen stonden los op de grijze achtergrond. Elk tabblad op het hoogste niveau
   (.main-content > .tab-content > .tab-pane) dat zelf geen kader bevat krijgt nu het witte kader van de andere pagina's. Tabbladen met een eigen kader
   (zoals Overzicht) blijven zoals ze waren. Uitzetten voor één tabblad: voeg de klasse mh-geen-kader toe aan .tab-pane. */
#main-body .main-content>.tab-content>.tab-pane:not(.mh-geen-kader):not(:has(:where(.panel,.card,.highlightbox,.featurebox,.well,.table-container,.logincontainer,.client-home-panels,.tiles,.ticket-reply,.buttonboxes,.mh-uitleg,.mh-aff-link,.mh-tegel,.mh-aff-bedrag,.mh-voordeel,.mh-geen-kader,#order-standard_cart):not(.modal-content,.modal-content *,.modal *))){
	background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);padding:22px 30px
}
@media (max-width:575px){
	#main-body .main-content>.tab-content>.tab-pane:not(.mh-geen-kader):not(:has(:where(.panel,.card,.highlightbox,.featurebox,.well,.table-container,.logincontainer,.client-home-panels,.tiles,.ticket-reply,.buttonboxes,.mh-uitleg,.mh-aff-link,.mh-tegel,.mh-aff-bedrag,.mh-voordeel,.mh-geen-kader,#order-standard_cart):not(.modal-content,.modal-content *,.modal *))){padding:16px 14px}
}

/* v8l: popup met uitleg over domeinnaam verhuizen (Help-link op de verhuispagina) */
.mh-m-info .mh-modal-art .mh-art-img{height:156px}
.mh-m-info .mh-modal-body{text-align:left}
.mh-m-info .mh-m-lead,.mh-m-info .mh-m-note{text-align:center}
.mh-m-info .mh-steps-list{list-style:none;counter-reset:mhstap;margin:12px 0 10px;padding:0;display:grid;gap:8px}
.mh-m-info .mh-steps-list li{counter-increment:mhstap;position:relative;list-style:none;margin:0;padding:10px 14px 10px 54px;border:1.5px solid var(--mh-line);border-radius:12px;background:#fff;font-size:14.5px;line-height:1.5;color:var(--mh-text)}
.mh-m-info .mh-steps-list li::before{content:counter(mhstap);position:absolute;left:14px;top:10px;width:28px;height:28px;border-radius:50%;background:var(--mh-blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;line-height:1}
.mh-m-info .mh-steps-list li b{color:var(--mh-navy)}
@media (max-width:575px){
	.mh-m-info .mh-steps-list li{padding:10px 12px 10px 48px;font-size:14px}
	.mh-m-info .mh-steps-list li::before{left:12px;top:10px;width:26px;height:26px}
	.mh-m-info .mh-modal-art .mh-art-img{height:138px}
}