/* ==========================================================================
   De Printkamer · newsletter.css — nieuwsbriefpopup (tab 2 · 45:1264, 79:1682; mobiel 45:1546, 80:2007)
   en gedeelde stukjes voor elk nieuwsbriefformulier (honeypot, codevak).
   ========================================================================== */

.v-mobiel { display: none; }
@media (max-width: 767px) { .v-groot { display: none !important; } .v-mobiel { display: revert; } }

/* Honeypot: buiten beeld, niet voor schermlezers. */
.nb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Codevak met kopieerknop (popup, en bruikbaar in andere succesblokken). */
.nbcode {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 10px 10px 20px;
	border: 1.5px dashed var(--kleur-lavendel-donker); border-radius: 16px;
	background: var(--kleur-lavendel-licht);
}
.nbcode__code { font: 600 24px/1.2 var(--font-display); letter-spacing: 2px; }
.nbcode__kopieer {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px 10px 14px;
	border: 1px solid var(--kleur-lijn); border-radius: var(--radius-rond); background: var(--kleur-wit);
	font: 600 var(--fs-knop)/1 var(--font-tekst);
	transition: background-color var(--snel) var(--ease);
}
.nbcode__kopieer:hover { background: var(--kleur-lavendel-licht); }
.nbcode__kopieer .icoon { width: 16px; height: 16px; }

/* ---------- Popup ---------- */
.nbpopup .overlay__paneel {
	flex-direction: row; width: min(800px, 100%); min-height: 460px;
	border-radius: 32px; background: var(--kleur-wit); overflow: hidden;
	box-shadow: 0 24px 60px rgba(26, 26, 38, .25);
}
.nbpopup__sluiten {
	position: absolute; right: 12px; top: 12px; z-index: 2;
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--kleur-wit); box-shadow: 0 4px 12px rgba(26, 26, 38, .12);
}
.nbpopup__sluiten:hover { background: var(--kleur-lavendel-licht); }
.nbpopup__sluiten .icoon { width: 18px; height: 18px; }
.nbpopup__beeld { position: relative; flex: 0 0 340px; background: var(--kleur-lavendel); overflow: hidden; }
.nbpopup__cirkel { position: absolute; left: 40px; top: 90px; width: 260px; height: 260px; border-radius: 50%; background: var(--kleur-limoen); }
.nbpopup__foto { position: absolute; left: 25px; top: 145px; width: 290px; height: 170px; object-fit: contain; filter: drop-shadow(0 16px 12px rgba(46, 46, 64, .2)); }
.nbpopup__sticker {
	position: absolute; left: 240px; top: 12px;
	display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
	background: var(--kleur-inkt); color: var(--kleur-limoen);
	font: 600 24px/1.2 var(--font-display); letter-spacing: -0.005em;
	transform: rotate(-8deg);
	transition: background-color .3s var(--ease), color .3s var(--ease);
}
.nbpopup.is-gelukt .nbpopup__sticker { background: var(--kleur-limoen); color: var(--kleur-inkt); }
.nbpopup__inhoud { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 44px 44px 40px; }
.nbpopup__titel { font: 600 38px/1.08 var(--font-display); letter-spacing: -0.015em; outline: none; }
.nbpopup__titel:focus-visible { box-shadow: none; }
.nbpopup__tekst { color: var(--kleur-grijs); line-height: 1.55; }
.nbpopup__form { display: grid; gap: 14px; }
.nbveld {
	display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px 0 16px;
	border: 1px solid var(--kleur-lijn); border-radius: var(--radius-rond); background: var(--kleur-creme);
	transition: border-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease);
}
.nbveld:focus-within { border-color: var(--kleur-inkt); box-shadow: 0 0 0 1px var(--kleur-inkt); }
.nbveld.is-fout { border: 2px solid var(--kleur-inkt); background: var(--kleur-perzik-licht); padding-left: 15px; }
.nbveld__icoon { width: 20px; height: 20px; flex: none; }
.nbveld__invoer { flex: 1; min-width: 0; height: 54px; border: 0; background: none; font-size: var(--fs-basis); outline: none; }
.nbveld__invoer::placeholder { color: var(--kleur-grijs); opacity: 1; }
.nbpopup__fout { margin-top: -6px; }
.nbpopup__nee { text-align: center; }
.nbpopup__nee button { min-height: 32px; font: 600 var(--fs-knop)/1 var(--font-tekst); color: var(--kleur-grijs); text-decoration: underline; text-underline-offset: .18em; }
.nbpopup__nee button:hover { color: var(--kleur-inkt); }
.nbpopup__voet { font-size: 12px; line-height: 1.45; color: var(--kleur-grijs); text-align: center; }
.nbpopup__voet a { color: inherit; }
.nbpopup__inhoud.is-gelukt .knop--blok { margin-top: 0; }

/* Tablet: iets compacter. */
@media (min-width: 768px) and (max-width: 899px) {
	.nbpopup__beeld { flex-basis: 280px; }
	.nbpopup__cirkel { left: 20px; }
	.nbpopup__foto { left: 0; }
	.nbpopup__sticker { left: 180px; }
	.nbpopup__inhoud { padding: 40px 32px 32px; }
	.nbpopup__titel { font-size: 32px; }
}

/* Mobiel: gecentreerde kaart (geen onderlade). */
@media (max-width: 767px) {
	.overlay--venster.nbpopup { align-items: center; justify-content: center; padding: 20px; }
	.nbpopup .overlay__paneel {
		flex-direction: column; width: 100%; max-width: 350px; min-height: 0; max-height: calc(100dvh - 40px);
		border-radius: 28px; overflow-y: auto; opacity: 0; transform: translateY(16px) scale(.98);
	}
	.nbpopup.is-open .overlay__paneel { opacity: 1; transform: none; }
	.nbpopup .overlay__paneel::before { display: none; }
	.nbpopup__beeld { flex: 0 0 200px; }
	.nbpopup__cirkel { left: calc(50% - 85px); top: 18px; width: 170px; height: 170px; }
	.nbpopup__foto { left: calc(50% - 110px); top: 48px; width: 220px; height: 129px; }
	.nbpopup__sticker { left: 13px; top: 24px; width: 64px; height: 64px; font-size: 18px; transform: rotate(8deg); }
	.nbpopup__inhoud { padding: 24px 22px; justify-content: flex-start; }
	.nbpopup__titel { font-size: 29px; line-height: 1.12; letter-spacing: -0.012em; }
	.nbcode { padding-left: 16px; }
	.nbcode__code { font-size: 21px; letter-spacing: 1.5px; }
}