/*
 * Front-end stijl voor het domeinbestelformulier.
 * Bewust met eenvoudige, specifieke selectors i.p.v. !important —
 * Divi overschrijft !important soms alsnog.
 *
 * © Lucas Computer Services — Alle rechten voorbehouden
 */
.lcs-dr-wrapper {
	font-family: inherit;
	box-sizing: border-box;
}

.lcs-dr-wrapper *,
.lcs-dr-wrapper *::before,
.lcs-dr-wrapper *::after {
	box-sizing: border-box;
}

.lcs-dr-wrapper .lcs-dr-input {
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 15px;
	margin-bottom: 10px;
}

.lcs-dr-wrapper label {
	display: block;
	font-size: 0.9em;
	font-weight: 600;
	margin-bottom: 4px;
}

.lcs-dr-wrapper .lcs-dr-knop {
	padding: 10px 18px;
	border-radius: 4px;
	border: 1px solid #ccc;
	background: #f2f2f2;
	cursor: pointer;
	font-size: 15px;
}

.lcs-dr-wrapper .lcs-dr-knop.lcs-dr-primair {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}

.lcs-dr-wrapper .lcs-dr-knop:disabled {
	opacity: 0.6;
	cursor: default;
}

.lcs-dr-wrapper .lcs-dr-pakket-optie:hover {
	border-color: #2271b1;
}

/* Prijzenoverzicht extensies — [lcs_dr_extensie_prijzen] */
.lcs-dr-wrapper .lcs-dr-extensie-kaarten {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lcs-dr-wrapper .lcs-dr-extensie-kaart {
	flex: 1 1 130px;
	min-width: 110px;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: 20px 16px;
	text-align: center;
}

.lcs-dr-wrapper .lcs-dr-extensie-kaart-uitgelicht {
	background: #0391f7;
	border-color: #0391f7;
	color: #fff;
	box-shadow: 0 0 8px rgba(3, 145, 247, 0.65), 0 0 20px rgba(3, 145, 247, 0.5), 0 0 40px rgba(3, 145, 247, 0.35);
	animation: lcs-dr-neon-gloed 2.4s ease-in-out infinite;
}

@keyframes lcs-dr-neon-gloed {
	0%, 100% {
		box-shadow: 0 0 8px rgba(3, 145, 247, 0.65), 0 0 20px rgba(3, 145, 247, 0.5), 0 0 40px rgba(3, 145, 247, 0.35);
	}
	50% {
		box-shadow: 0 0 12px rgba(3, 145, 247, 0.85), 0 0 30px rgba(3, 145, 247, 0.65), 0 0 55px rgba(3, 145, 247, 0.45);
	}
}

/* Klanten die minder/geen animatie willen (browser-/systeeminstelling) krijgen
   een vaste gloed i.p.v. de pulserende versie. */
@media (prefers-reduced-motion: reduce) {
	.lcs-dr-wrapper .lcs-dr-extensie-kaart-uitgelicht {
		animation: none;
	}
}

.lcs-dr-wrapper .lcs-dr-extensie-naam {
	font-size: 1.15em;
	font-weight: 700;
}

.lcs-dr-wrapper .lcs-dr-extensie-lijn {
	height: 1px;
	background: rgba(128, 128, 128, 0.3);
	margin: 14px auto;
	width: 70%;
}

.lcs-dr-wrapper .lcs-dr-extensie-kaart-uitgelicht .lcs-dr-extensie-lijn {
	background: rgba(255, 255, 255, 0.3);
}

.lcs-dr-wrapper .lcs-dr-extensie-prijs {
	font-size: 1.3em;
	font-weight: 700;
	color: #0391f7;
}

.lcs-dr-wrapper .lcs-dr-extensie-kaart-uitgelicht .lcs-dr-extensie-prijs {
	color: #fff;
}

.lcs-dr-wrapper .lcs-dr-extensie-prijs sup {
	font-size: 0.6em;
	font-weight: 600;
}

/* Volledig extensieoverzicht met A-Z navigatie — [lcs_dr_extensies_overzicht] */
.lcs-dr-wrapper .lcs-dr-letter-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 16px;
}

.lcs-dr-wrapper .lcs-dr-letter-knop {
	min-width: 30px;
	padding: 5px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #0391f7;
	font-size: 0.9em;
	cursor: pointer;
}

.lcs-dr-wrapper .lcs-dr-letter-knop:disabled {
	color: #ccc;
	border-color: #eee;
	cursor: default;
}

.lcs-dr-wrapper .lcs-dr-letter-knop.lcs-dr-letter-actief {
	background: #0391f7;
	border-color: #0391f7;
	color: #fff;
}

.lcs-dr-wrapper .lcs-dr-extensies-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}

.lcs-dr-wrapper .lcs-dr-extensie-mini-kaart {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 12px 8px;
	text-align: center;
}

.lcs-dr-wrapper .lcs-dr-extensie-mini-kaart .lcs-dr-extensie-naam {
	font-weight: 700;
	font-size: 0.95em;
}

.lcs-dr-wrapper .lcs-dr-extensie-mini-kaart .lcs-dr-extensie-prijs {
	margin-top: 6px;
	font-weight: 700;
	color: #0391f7;
	font-size: 1em;
}

.lcs-dr-wrapper .lcs-dr-extensie-mini-kaart .lcs-dr-extensie-prijs sup {
	font-size: 0.65em;
	font-weight: 600;
}