/*
 * De pop-up "Vraag offerte aan".
 *
 * Bijna alles komt uit het thema: de schil (`.ov`, `.pop`, `.pop-head`,
 * `.pop-body`, `.pop-foot`, `.pop-line`) uit kern/interactie.css, de velden
 * (`.fld`, `.fld-row`, `.fld-error`) uit kern/forms.css en de knoppen
 * (`.btn`, `.btn-primary`). Hier staat alleen wat een formulier in die schil
 * extra nodig heeft. Kleuren en maten via de tokens van het thema, zodat dit
 * meegaat als die veranderen.
 */

.dn-offerte-pop {
	width: 560px;
}

/* De whatsappknop (220) en de vergelijkbalk (210) liggen in het thema boven
   de donkere laag (200). Bij de pop-up na het toevoegen stoort dat niet, maar
   hier dekte de knop op een telefoon de verstuurknop af. Deze pop-up gaat er
   dus bovenop. */
.ov:has(.dn-offerte-pop) {
	z-index: 230;
}

/* De knop zit soms in een eigen stapellaag en komt dan toch bovenop; zolang
   deze pop-up open is heeft hij daar niets te zoeken. */
body:has(.ov.on .dn-offerte-pop) .dn-wa,
body:has(.ov.on .dn-offerte-pop) .cmp {
	visibility: hidden;
}

/* De voet blijft onderin de pop-up staan, ook als je door een lang formulier
   scrolt: de verstuurknop moet altijd te zien zijn. */
.dn-offerte-pop .pop-foot {
	position: sticky;
	bottom: 0;
	z-index: 1;
	background-color: var(--surface);
}

/* Het formulier omvat kop, romp en voet, en moet zich gedragen als de pop-up
   zelf: een kolom, zodat de voet onderaan blijft. */
.dn-offerte-form {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* De romp heeft al een tussenruimte tussen zijn onderdelen; de ondermarge die
   een veld overal elders heeft zou die verdubbelen. */
.dn-offerte-pop .pop-body {
	gap: 16px;
}

.dn-offerte-pop .pop-body .fld {
	margin-bottom: 0;
}

.dn-offerte-pop .fld-row {
	gap: 16px 14px;
}

.dn-offerte-pop .fld textarea {
	min-height: 96px;
}

.dn-offerte-product {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border-color);
}

/* De verborgen val voor robots: buiten beeld, niet weg. */
.dn-offerte-hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Een melding over het hele formulier: iets met de server, of "nog niet alles
   is goed". Rood aan de linkerkant en in de tekst, nooit alleen kleur. */
.dn-offerte-melding {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--color-danger);
	border-left-width: 4px;
	border-radius: var(--radius);
	background-color: #fdf3f2;
	color: var(--color-danger);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.45;
}

.dn-offerte-melding[hidden] {
	display: none;
}

.dn-offerte-melding .material-icons-outlined {
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 1px;
}

.dn-offerte-privacy {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--text-tertiary);
}

.dn-offerte-verstuur {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.dn-offerte-verstuur .material-icons-outlined {
	font-size: 18px;
}

.dn-offerte-verstuur.is-bezig {
	opacity: .75;
	cursor: progress;
}

.dn-offerte-klaar {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.dn-offerte-klaar > .material-icons-outlined {
	font-size: 32px;
	color: var(--color-success);
	flex-shrink: 0;
}

.dn-offerte-klaar p {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--text-secondary);
}

.dn-offerte-klaar .dn-offerte-klaar-kop {
	margin: 2px 0 6px;
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--text-primary);
}

/* De knop in het koopblok vult de rij, net als "Neem contact op" deed. */
.bb-cta .dn-offerte-knop {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pc-btn.dn-offerte-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

@media (max-width: 560px) {
	.dn-offerte-pop .pop-body {
		gap: 14px;
	}

	/* Op een telefoon is er het kruisje al; een tweede knop om te sluiten
	   kost een hele regel onderin, waar de verstuurknop hoort. */
	.dn-offerte-form .pop-foot [data-pop-sluit] {
		display: none;
	}
}

/* Op een telefoon is de koopknop op een kaart een vierkant met alleen het
   pictogram (thema, kern/knop.css). Het thema laat knoppen die niet in de
   wagen leggen hun tekst houden, maar deze knop heeft een eigen pictogram en
   een aria-label; met tekst werd hij zo breed dat het vergelijkknopje uit de
   kaart liep. Dus dezelfde vorm als "Toevoegen". */
@media (max-width: 700px) {
	body .pc .pc-btn.pc-cart.dn-offerte-knop {
		width: 40px;
		min-width: 40px;
		height: 40px;
		flex: 0 0 auto;
		padding: 0;
		gap: 0;
	}

	body .pc .pc-btn.pc-cart.dn-offerte-knop .t {
		display: none;
	}

	body .pc .pc-btn.pc-cart.dn-offerte-knop .i {
		font-size: 20px;
	}
}