.package-slider {
	margin-bottom: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--light);
}

#create-account {
	margin-top: 20px;
	padding: 20px 15px 0px 15px;
	border-top: 1px solid var(--light);
}

#summary-details .btn {
	margin: 10px 0px;
}

.pass-reset {
	padding-top: 5px;
	font-size: 12px;
	font-style: italic;
}

.card-order {
	background-color: #fff;
	font-size: 12px;
	padding: 5px 10px;
	margin-bottom: 15px;
}

.card-order .row.card-fix {
	margin: 0px -20px;
}

.card-order .table {
	border: none;
}

.card-order .table > thead > tr > th {
	background: none;
	border: none;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.card-order .table > tbody > tr > td {
	border: none;
	padding: 8px 4px 4px 4px;
}

.card-order .total-due {
	text-align: right;
}

.card-order .total-due h4 {
	margin-top: 5px;
}

.currency {
	margin-top: 10px;
}

.currency form {
	float: right;
	margin: 10px 0px;
}

.currency form * {
	margin-right: 0px !important;
	margin-left: 5px;
	display: flex;
}

@media (max-width: 768px) {
	.currency {
		margin-top: 0px;
	}

	.currency form {
		float: none;
		width: 100%;
		margin: 0px 0px 15px 0px;
	}

	.currency form * {
		width: 100% !important;
		display: block;
		margin: 0px !important;
	}
}

.gateway-logo {
	object-fit: cover;
	max-height: 40px;
	max-width: 125px;
	padding-left: 5px;
	box-sizing: border-box;
}

#payment-method .card-body .px-2:last-child label {
	margin-bottom: 5px;
}

.payment_type, .gateway {
	margin-right: 5px;
}

.section-title {
    margin-top: 10px;
}

.section-title h3 {
    font-weight: bold;
}

/* Slider Styles */
.package-slider {
	margin-bottom: 20px;
}

.package-slider .slider.slider-horizontal {
	margin: 10px 15px;
	box-sizing: border-box;
}

.package-slider .slider.slider-horizontal {
	width: calc(100% - 30px);
}

.package-slider .slider.slider-horizontal .slider-track-high {
	background: var(--secondary) !important;
	opacity: 0.5;
}

.package-slider .slider.slider-horizontal .slider-selection {
	background: var(--info) !important;
}

.package-slider .slider .slider-handle {
	background: var(--info) !important;
}

.package-slider .package-block {
	display: none;
}

.package-slider .package-block.active {
	display: block;
}

.package-slider .package-selected {
	padding: 10px 20px;
}

.package-slider .package-selected h3 {
	margin-bottom: 0px;
}

.package-slider .instructions {
	padding: 0px 10px;
	font-style: italic;
	color: var(--secondary);
}

/* Boxes styles */
.package {
	margin: 10px 0 15px;
	background: #fff;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 3px 1px #acacac;
	-moz-box-shadow: 0 3px 1px #acacac;
	box-shadow: 0 3px 1px #acacac;
	border: 2px solid #fff;
	opacity: 0.6;
}

.package.selected {
	opacity: 1;
}

.package > .selected-btn, .package.selected > .unselected-btn {
	display: none;
}

.package > .unselected-btn, .package.selected > .selected-btn {
	display: block;
}

.package .package-name {
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.package-name.card-header {
	padding: 5px 10px;
}

.package ul {
	text-align: left;
}

.package p {
	border-bottom: 1px dashed #efefef;
	margin: 0;
	padding: 5px 10px;
}

.package h4 {
	font-size: 18px;
	padding: 5px 0;
	margin-top: 0;
	margin-bottom: 0;
}

.package .price-box {
	background-color: #efefef;
	padding: 1px 0;
}

.package .price-box p {
	padding: 0;
	margin-bottom: -10px;
	margin-top: 5px;
	font-style: italic;
	font-size: 12px;
	color: #999;
}

.package .order {
	padding: 5px;
	background-color: #efefef;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
}

.package-groups {
	margin-top: 20px;
}

.package-groups .list-group-item {
	margin-bottom: 20px;
    border-top-width: 1px;
}

/* Whois styles */
.card {
    background-color: inherit;
}

.whois {
	margin-top: 15px;
	margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.05);
    background-repeat: no-repeat;
    background-position: 110% -70px;
    background-image: url(../images/globe.svg);
    padding: 25px;
    border-radius: 8px;
}

.whois div.checkbox label {
	padding-right: 5px;
}

.whois div.tlds, div.search {
	margin: 0 auto;
	text-align: center;
	display: block;
}

.whois div.tlds {
	margin-bottom: 0;
}

.whois .show_more {
	margin-left: 5px;
}

.domains {
	font-size: 14px;
}

#queue_nonempty_btns, #queue_continue_btns {
	display: none;
}

#empty_cart {
	margin-bottom: 20px;
}

/* List Styles */
.package-list {
	margin-top: 10px;
	background-color: #fff;
}

.package-list .package-item {
	margin-top: 0;
	padding: 0px 20px;
}

.package-list .package-description {
	padding: 10px;
}

.package-list h3 {
	margin-top: 5px;
}

.package-list .instructions {
	margin-bottom: 2px;
	font-style: italic;
	color: #999;
}

.package-list .selected-btn, .package-list.selected .unselected-btn {
	display: none;
}

.package-list .unselected-btn, .package-list.selected .selected-btn {
	display: block;
}

/* =====================================================================
   Hostcentrale — checkout restyle
   Scope: .hc-checkout (staat op de col-md-12 van de checkout-stap,
   dus lekt niet naar cart/config/summary).
   ===================================================================== */
.hc-checkout {
	--hc-navy: #16205b;
	--hc-navy-600: #0e1642;
	--hc-teal: #14b8c4;
	--hc-line: #e3e6ee;
	--hc-field: #d5dae8;
	--hc-ink: #1a2142;
	--hc-muted: #667088;
	--hc-soft: #f6f8fc;
	font-size: 15px;
	color: var(--hc-ink);
}

/* Kaart */
.hc-checkout .card-order {
	background: #fff;
	font-size: 15px;
	border: 1px solid var(--hc-line);
	border-radius: 16px;
	box-shadow: 0 4px 22px rgba(22, 32, 91, .06);
	padding: 6px;
}
.hc-checkout .card-order .card-body {
	padding: 26px 28px;
}

/* -------- Betaalmethode-kaarten (progressive enhancement) -------- */
.hc-checkout .hc-methods {
	display: none;               /* verborgen tot de JS 'hc-enhanced' zet */
	flex-direction: column;
	gap: 12px;
	margin-bottom: 4px;
}
.hc-checkout .card-order.hc-enhanced .hc-methods {
	display: flex;
}
.hc-checkout .card-order.hc-enhanced .hc-native {
	display: none;               /* originele controls weg zodra kaarten actief zijn */
}

.hc-checkout .hc-method {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0;
	padding: 16px 18px;
	border: 1.5px solid var(--hc-field);
	border-radius: 13px;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.hc-checkout .hc-method:hover {
	border-color: var(--hc-teal);
	background: #fafdff;
}
.hc-checkout .hc-method:focus-within {
	border-color: var(--hc-teal);
	box-shadow: 0 0 0 3px rgba(20, 184, 196, .25);
}
.hc-checkout .hc-method.selected {
	border-color: var(--hc-navy);
	box-shadow: 0 0 0 3px rgba(22, 32, 91, .10);
}
.hc-checkout .hc-method-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.hc-checkout .hc-method-ico {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: var(--hc-soft);
	color: var(--hc-navy);
	font-size: 19px;
	transition: background .15s, color .15s;
}
.hc-checkout .hc-method.selected .hc-method-ico {
	background: var(--hc-navy);
	color: #fff;
}
/* Officieel betaalmethode-logo (iDEAL / SEPA) i.p.v. een icoon */
.hc-checkout .hc-method-logo {
	flex: none;
	width: 48px;
	display: grid;
	place-items: center;
}
.hc-checkout .hc-method-logo img {
	width: 48px;
	height: auto;
	display: block;
	border-radius: 6px;
	box-shadow: 0 0 0 1px rgba(22, 32, 91, .06);
}
.hc-checkout .hc-method-txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}
.hc-checkout .hc-method-title {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--hc-ink);
	line-height: 1.25;
}
.hc-checkout .hc-method-desc {
	font-size: 13px;
	color: var(--hc-muted);
	line-height: 1.4;
}
.hc-checkout .hc-method-check {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--hc-field);
	position: relative;
	transition: border-color .15s, background .15s;
}
.hc-checkout .hc-method.selected .hc-method-check {
	border-color: var(--hc-navy);
	background: var(--hc-navy);
}
.hc-checkout .hc-method.selected .hc-method-check::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 3px;
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* -------- Velden (selects, inputs) -------- */
.hc-checkout label {
	font-size: 13px;
	font-weight: 600;
	color: var(--hc-muted);
	margin: 0 0 6px;
	display: block;
}
.hc-checkout .hc-method label,
.hc-checkout .checkbox label,
.hc-checkout .radio label {
	font-weight: 600;
}
.hc-checkout .form-control {
	width: 100%;
	min-height: 46px;
	border: 1px solid var(--hc-field);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 15px;
	color: var(--hc-ink);
	background-color: #fff;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.hc-checkout select.form-control {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667088' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}
.hc-checkout .form-control:focus {
	border-color: var(--hc-teal);
	box-shadow: 0 0 0 3px rgba(20, 184, 196, .20);
	outline: none;
}
.hc-checkout .form-inline {
	display: flex;
	gap: 10px;
}
.hc-checkout .form-inline .form-control {
	width: auto;
	flex: 1;
}

/* Originele radio's (alleen zichtbaar als JS uit staat) netjes houden */
.hc-checkout .hc-native .radio label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 15px;
	border: 1px solid var(--hc-field);
	border-radius: 10px;
	cursor: pointer;
}

/* -------- Contact- en betaaldetails-blok -------- */
.hc-checkout #payment_details {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--hc-line);
}
.hc-checkout #payment_details h4 {
	font-size: 15px;
	font-weight: 700;
	color: var(--hc-ink);
	margin: 2px 0 16px;
}
.hc-checkout .form-group {
	margin-bottom: 15px;
}
.hc-checkout .top-focus-box {
	background: var(--hc-soft);
	border: 1px solid var(--hc-line);
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 22px;
}
.hc-checkout .help-block {
	font-size: 12.5px;
	color: var(--hc-muted);
	margin: 8px 0 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.hc-checkout .help-block .fa-lightbulb {
	color: var(--hc-teal);
}

/* IBAN / SEPA */
.hc-checkout #mollie-sepa-form input[name="account"] {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--hc-field);
	border-radius: 10px;
	padding: 12px 15px;
	font-size: 16px;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	background: #fff;
	color: var(--hc-ink);
	transition: border-color .15s, box-shadow .15s;
}
.hc-checkout #mollie-sepa-form input[name="account"]:focus {
	border-color: var(--hc-teal);
	box-shadow: 0 0 0 3px rgba(20, 184, 196, .20);
	outline: none;
}
.hc-checkout #mollie-sepa-form p {
	margin-top: 14px;
	padding: 13px 15px;
	background: var(--hc-soft);
	border-left: 3px solid var(--hc-teal);
	border-radius: 0 8px 8px 0;
	color: var(--hc-muted);
	line-height: 1.55;
	font-size: 12.5px;
}

/* Opslaan-checkbox */
.hc-checkout .checkbox {
	margin-top: 16px;
}
.hc-checkout .checkbox label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500;
	color: var(--hc-ink);
	margin: 0;
}
.hc-checkout .checkbox input,
.hc-checkout .hc-native .radio input {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--hc-navy);
}

/* Betaalknop */
.hc-checkout .btn-success {
	background: var(--hc-navy);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 14px 30px;
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(22, 32, 91, .20);
	transition: background .15s, transform .06s;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}
.hc-checkout .btn-success:hover {
	background: var(--hc-navy-600);
}
.hc-checkout .btn-success:active {
	transform: translateY(1px);
}

/* =====================================================================
   Hostcentrale — domein-zoekstap restyle
   Scope: body.plugin-orderclient-config-preconfig. Die class zet Blesta
   zelf op basis van plugin/controller/action, dus lookup.pdt blijft
   volledig stock: een Blesta-update kan aan deze restyle niets breken
   behalve dit bestand, en dat staat al in BLESTA-CODE-WIJZIGINGEN.md.
   Alles hieronder is puur cosmetisch; geen enkele veldnaam, waarde of
   formulierstructuur verandert, dus de backend merkt er niets van.
   ===================================================================== */
body.plugin-orderclient-config-preconfig {
	--hcl-navy: #16205b;
	--hcl-navy-600: #0e1642;
	--hcl-teal: #14b8c4;
	--hcl-line: #e3e6ee;
	--hcl-field: #d5dae8;
	--hcl-ink: #1a2142;
	--hcl-muted: #667088;
	--hcl-soft: #f6f8fc;
	--hcl-success: #178a50;
}

/* -------- Sectiekop -------- */
body.plugin-orderclient-config-preconfig .section-title h3 {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--hcl-navy);
}
body.plugin-orderclient-config-preconfig .section-title h3 .fa-search {
	color: var(--hcl-teal);
	font-size: 21px;
}
body.plugin-orderclient-config-preconfig .section-title p {
	color: var(--hcl-muted);
	font-size: 15.5px;
	margin-bottom: 0;
}

/* -------- Zoekkaart --------
   De markup nest twee lagen: .whois (col-md-12) met daarin .card-order
   (input + TLD's), en .search met de knoppen staat daar weer BUITEN. Twee
   omlijnde vlakken in elkaar leest rommelig, dus .whois wordt de neutrale
   drager en .card-order is de enige zichtbare kaart; de knoppen komen
   eronder te staan, op de kale achtergrond. */
body.plugin-orderclient-config-preconfig .whois {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-top: 4px;
}
/* !important omdat Bootstrap's .bg-light en .p-3 op deze card zelf ook
   !important zijn. */
body.plugin-orderclient-config-preconfig .whois .card-order {
	background-color: #fff !important;
	border: 1px solid var(--hcl-line);
	border-radius: 14px;
	padding: 22px !important;
	box-shadow: 0 2px 4px rgba(22, 32, 91, .04);
}

/* Zoekveld */
body.plugin-orderclient-config-preconfig .whois input[name="domain"] {
	height: auto;
	padding: 14px 18px;
	font-size: 17px;
	color: var(--hcl-ink);
	border: 1.5px solid var(--hcl-field);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	transition: border-color .15s;
}
body.plugin-orderclient-config-preconfig .whois input[name="domain"]:focus {
	border-color: var(--hcl-teal);
	box-shadow: 0 0 0 3px rgba(20, 184, 196, .16);
}
body.plugin-orderclient-config-preconfig .whois input[name="domain"]::placeholder {
	color: #9aa1b5;
}

/* -------- TLD-chips -------- */
body.plugin-orderclient-config-preconfig .whois div.tlds {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 4px;
}
body.plugin-orderclient-config-preconfig .whois div.tlds label.checkbox-inline {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 8px 14px;
	border: 1.5px solid var(--hcl-field);
	border-radius: 999px;
	background: #fff;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--hcl-ink);
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
body.plugin-orderclient-config-preconfig .whois div.tlds label.checkbox-inline:hover {
	border-color: var(--hcl-teal);
}
/* Het vakje zelf uit beeld: de chip is de indicator. Niet display:none,
   want dan verdwijnt hij uit de tabvolgorde en de a11y-tree; hij blijft
   focusbaar en de focusring komt van :focus-within op de chip. */
body.plugin-orderclient-config-preconfig .whois div.tlds label.checkbox-inline input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
/* Gevulde staat */
body.plugin-orderclient-config-preconfig .whois div.tlds label.checkbox-inline:has(input:checked) {
	border-color: var(--hcl-navy);
	background: var(--hcl-navy);
	color: #fff;
}
/* Vangnet voor browsers zonder :has(): daar is de gevulde staat niet te
   zien, dus tonen we het vakje daar wél. @supports not selector() klopt
   alleen als de browser selector()-queries kent; oeroude browsers slaan
   dit blok over en houden het verborgen vakje, wat acceptabel is. */
@supports not selector(:has(*)) {
	body.plugin-orderclient-config-preconfig .whois div.tlds label.checkbox-inline input[type="checkbox"] {
		position: static;
		width: 15px;
		height: 15px;
		opacity: 1;
		pointer-events: auto;
		accent-color: var(--hcl-navy);
	}
}
body.plugin-orderclient-config-preconfig .whois div.tlds label.checkbox-inline:focus-within {
	outline: 2px solid var(--hcl-teal);
	outline-offset: 2px;
}
body.plugin-orderclient-config-preconfig .whois .show_more {
	align-self: center;
	margin-left: 0;
	border: none;
	background: transparent;
	color: var(--hcl-navy);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: underline;
	padding: 8px 6px;
}
body.plugin-orderclient-config-preconfig .whois .show_more:hover {
	color: var(--hcl-teal);
}

/* -------- De drie zoekknoppen -------- */
body.plugin-orderclient-config-preconfig .whois div.search {
	margin-top: 20px;
}
body.plugin-orderclient-config-preconfig .whois .search .btn-group {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	vertical-align: middle;
}
/* flex:0 0 auto omdat Bootstrap .btn-group > .btn op flex:1 1 auto zet;
   in combinatie met flex-wrap rekten de knoppen dan de hele rij uit en
   werd de laatste knop een balk over de volle breedte. */
body.plugin-orderclient-config-preconfig .whois .search .btn-group > .btn {
	flex: 0 0 auto;
	margin: 0;
	border-radius: 10px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	transition: background .15s, border-color .15s, color .15s;
}
/* Beschikbaarheid = primaire actie */
body.plugin-orderclient-config-preconfig .whois .search .btn-group > .btn-success {
	background: var(--hcl-navy);
	border-color: var(--hcl-navy);
	color: #fff;
	box-shadow: 0 6px 16px rgba(22, 32, 91, .18);
}
body.plugin-orderclient-config-preconfig .whois .search .btn-group > .btn-success:hover {
	background: var(--hcl-navy-600);
	border-color: var(--hcl-navy-600);
}
/* Overdracht = gelijkwaardig alternatief, maar rustiger */
body.plugin-orderclient-config-preconfig .whois .search .btn-group > .btn-light {
	background: #fff;
	border: 1.5px solid var(--hcl-field);
	color: var(--hcl-navy);
}
body.plugin-orderclient-config-preconfig .whois .search .btn-group > .btn-light:hover {
	border-color: var(--hcl-teal);
	background: var(--hcl-soft);
	color: var(--hcl-navy);
}
/* De derde knop is geen actie op dit formulier maar een uitweg naar de
   overige diensten. Die krijgt een eigen regel onder de twee echte knoppen
   en wordt een tekstlink, zodat de hiërarchie klopt: twee knoppen, één
   ontsnapping. flex-basis 100% forceert de regelovergang. */
body.plugin-orderclient-config-preconfig .whois .search .btn-group > a.btn-light {
	flex: 0 0 100%;
	justify-content: center;
	margin-top: 2px;
	padding: 4px;
	border: none;
	background: none;
	box-shadow: none;
	color: var(--hcl-muted);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}
body.plugin-orderclient-config-preconfig .whois .search .btn-group > a.btn-light:hover {
	background: none;
	color: var(--hcl-navy);
}

/* -------- Resultaten -------- */
body.plugin-orderclient-config-preconfig .alert {
	border: 1px solid var(--hcl-line);
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 15px;
}
body.plugin-orderclient-config-preconfig .alert p { margin: 0; }
body.plugin-orderclient-config-preconfig .alert-success {
	background: rgba(23, 138, 80, .08);
	border-color: rgba(23, 138, 80, .28);
	color: #10603a;
}
body.plugin-orderclient-config-preconfig .alert-danger {
	background: rgba(196, 61, 61, .07);
	border-color: rgba(196, 61, 61, .25);
	color: #8f2b2b;
}
body.plugin-orderclient-config-preconfig .domains {
	background-color: #fff !important; /* wint van .bg-light */
	border: 1px solid var(--hcl-line);
	border-radius: 14px;
	padding: 6px 10px !important;
	font-size: 15px;
}
body.plugin-orderclient-config-preconfig .domains table {
	margin-bottom: 0;
}
body.plugin-orderclient-config-preconfig .domains thead th {
	border: none;
	border-bottom: 1px solid var(--hcl-line);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--hcl-muted);
	padding: 12px 10px;
}
body.plugin-orderclient-config-preconfig .domains tbody td {
	border: none;
	border-top: 1px solid var(--hcl-line);
	padding: 14px 10px;
	vertical-align: middle;
}
body.plugin-orderclient-config-preconfig .domains tbody tr:first-child td {
	border-top: none;
}
body.plugin-orderclient-config-preconfig .domains input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--hcl-navy);
}
body.plugin-orderclient-config-preconfig .domains label {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--hcl-navy);
	overflow-wrap: anywhere;
}
body.plugin-orderclient-config-preconfig .domains tr:has(input:disabled) label {
	color: var(--hcl-muted);
	font-weight: 600;
}
body.plugin-orderclient-config-preconfig .domains .badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
}
body.plugin-orderclient-config-preconfig .domains .badge-success {
	background: rgba(23, 138, 80, .12);
	color: var(--hcl-success);
}
body.plugin-orderclient-config-preconfig .domains .badge-danger {
	background: var(--hcl-soft);
	color: var(--hcl-muted);
}
body.plugin-orderclient-config-preconfig .domains select {
	height: auto;
	padding: 9px 12px;
	font-size: 14.5px;
	border: 1.5px solid var(--hcl-field);
	border-radius: 9px;
	color: var(--hcl-ink);
	background-color: #fff;
	max-width: 100%;
}
body.plugin-orderclient-config-preconfig .domains select:focus {
	border-color: var(--hcl-teal);
	box-shadow: none;
}
body.plugin-orderclient-config-preconfig .domains select:disabled {
	background-color: var(--hcl-soft);
	color: var(--hcl-muted);
}

/* Doorgaan naar de configuratie */
body.plugin-orderclient-config-preconfig #configure_domain .btn-success {
	background: var(--hcl-navy);
	border-color: var(--hcl-navy);
	color: #fff;
	border-radius: 12px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(22, 32, 91, .20);
}
body.plugin-orderclient-config-preconfig #configure_domain .btn-success:hover {
	background: var(--hcl-navy-600);
	border-color: var(--hcl-navy-600);
}
body.plugin-orderclient-config-preconfig #load-more-tlds {
	border: 1.5px solid var(--hcl-field);
	background: #fff;
	color: var(--hcl-navy);
	border-radius: 12px;
	padding: 14px 22px;
	font-weight: 700;
}
body.plugin-orderclient-config-preconfig #load-more-tlds:hover {
	border-color: var(--hcl-teal);
}

/* -------- Prijsoverzicht per extensie -------- */
body.plugin-orderclient-config-preconfig .table-curved.table-striped {
	border: 1px solid var(--hcl-line);
	border-radius: 12px;
	overflow: hidden;
	font-size: 14.5px;
}
body.plugin-orderclient-config-preconfig .table-curved.table-striped thead th {
	background: var(--hcl-soft);
	border: none;
	border-bottom: 1px solid var(--hcl-line);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--hcl-muted);
	padding: 12px 14px;
}
body.plugin-orderclient-config-preconfig .table-curved.table-striped td {
	border: none;
	border-top: 1px solid var(--hcl-line);
	padding: 12px 14px;
	vertical-align: middle;
}
body.plugin-orderclient-config-preconfig .table-curved.table-striped td small {
	color: var(--hcl-muted);
}

@media (max-width: 575px) {
	body.plugin-orderclient-config-preconfig .whois .card-order {
		padding: 16px !important;
	}
	body.plugin-orderclient-config-preconfig .whois .search .btn-group {
		display: flex;
		width: 100%;
	}
	/* Op smal wél volle breedte: naast elkaar past niet meer. De uitweg
	   blijft een tekstlink. */
	body.plugin-orderclient-config-preconfig .whois .search .btn-group > .btn {
		flex: 1 1 100%;
		justify-content: center;
	}
	body.plugin-orderclient-config-preconfig .whois .search .btn-group > a.btn-light {
		flex: 0 0 100%;
	}
}