/* ==========================================================================
   Optin-popup Atelier-skin (16 sep) — CSS-only, presentatie.

   Popup NL 8594 / EN 1003528 (Elementor optin → Autonami-webhook via
   mu-plugin groomzo-popup-newsletter). Markup, triggers, formulier,
   webhook en success/error-afhandeling blijven 100% Elementor — hier
   alléén de kit-look (Fredoka New kop op navy, Readex Pro veld/knop,
   fel-oranje #FF7401 CTA, kit-blauwe close-knop) terug naar Atelier.
   Kit overridet op source-order → consistent met sidecart/checkout:
   scopen op de modal-IDs + !important.
   ========================================================================== */

/* Panel: kaart-oppervlak, Atelier-radius + zachte schaduw (foto-sectie
   links en copy blijven content — alléén oppervlak/vorm). */
#elementor-popup-modal-8594 .dialog-widget-content,
#elementor-popup-modal-1003528 .dialog-widget-content {
	background: var(--gz-card) !important;
	border: 1px solid var(--gz-line-soft) !important;
	border-radius: var(--gz-r-lg) !important;
	box-shadow: 0 24px 64px rgba(23, 33, 27, 0.22) !important;
	overflow: hidden;
}

/* Kop: Fraunces op ink i.p.v. Fredoka New op navy; "10%"-bold als
   amber-accent (bewust on-brand highlight). */
#elementor-popup-modal-8594 .elementor-heading-title,
#elementor-popup-modal-1003528 .elementor-heading-title {
	font-family: var(--gz-disp) !important;
	color: var(--gz-ink) !important;
}
#elementor-popup-modal-8594 .elementor-heading-title b,
#elementor-popup-modal-8594 .elementor-heading-title strong,
#elementor-popup-modal-1003528 .elementor-heading-title b,
#elementor-popup-modal-1003528 .elementor-heading-title strong {
	color: var(--gz-amber) !important;
}

/* Body-copy: Instrument Sans; lopende tekst op body-grijs, bold op ink. */
#elementor-popup-modal-8594 p,
#elementor-popup-modal-8594 span,
#elementor-popup-modal-8594 li,
#elementor-popup-modal-8594 small,
#elementor-popup-modal-8594 label,
#elementor-popup-modal-8594 b,
#elementor-popup-modal-8594 strong,
#elementor-popup-modal-1003528 p,
#elementor-popup-modal-1003528 span,
#elementor-popup-modal-1003528 li,
#elementor-popup-modal-1003528 small,
#elementor-popup-modal-1003528 label,
#elementor-popup-modal-1003528 b,
#elementor-popup-modal-1003528 strong {
	font-family: var(--gz-sans) !important;
}
#elementor-popup-modal-8594 p,
#elementor-popup-modal-8594 li,
#elementor-popup-modal-1003528 p,
#elementor-popup-modal-1003528 li {
	color: var(--gz-body) !important;
}
#elementor-popup-modal-8594 b,
#elementor-popup-modal-8594 strong,
#elementor-popup-modal-1003528 b,
#elementor-popup-modal-1003528 strong {
	color: var(--gz-ink) !important;
}

/* Formulierveld: Instrument Sans, kaartlijn, rustige focus (amber),
   placeholder op muted; Elementor-error-rood op validatiefout. */
#elementor-popup-modal-8594 .elementor-field-textual,
#elementor-popup-modal-1003528 .elementor-field-textual {
	font-family: var(--gz-sans) !important;
	color: var(--gz-ink) !important;
	background: #fff !important;
	border: 1px solid var(--gz-line) !important;
	border-radius: 10px !important;
}
#elementor-popup-modal-8594 .elementor-field-textual:focus,
#elementor-popup-modal-1003528 .elementor-field-textual:focus {
	border-color: var(--gz-amber) !important;
	outline: 2px solid rgba(192, 138, 52, 0.25) !important;
}
#elementor-popup-modal-8594 .elementor-field-textual::placeholder,
#elementor-popup-modal-1003528 .elementor-field-textual::placeholder {
	font-family: var(--gz-sans) !important;
	color: var(--gz-muted) !important;
}
#elementor-popup-modal-8594 .elementor-error .elementor-field-textual,
#elementor-popup-modal-1003528 .elementor-error .elementor-field-textual {
	border-color: #e15334 !important;
}

/* CTA: pine pill (radius 100px blijft Groomzo-vorm), hover pine-diep. */
#elementor-popup-modal-8594 .elementor-button,
#elementor-popup-modal-1003528 .elementor-button {
	font-family: var(--gz-sans) !important;
	font-weight: 600 !important;
	color: #fff !important;
	background-color: var(--gz-pine) !important;
	border-radius: 100px !important;
	box-shadow: none !important;
}
#elementor-popup-modal-8594 .elementor-button:hover,
#elementor-popup-modal-8594 .elementor-button:focus,
#elementor-popup-modal-1003528 .elementor-button:hover,
#elementor-popup-modal-1003528 .elementor-button:focus {
	background-color: var(--gz-pine-deep) !important;
	color: #fff !important;
}

/* Close-knop: kit-blauw → muted, hover ink. */
#elementor-popup-modal-8594 .dialog-close-button,
#elementor-popup-modal-1003528 .dialog-close-button {
	font-family: var(--gz-sans) !important;
	color: var(--gz-muted) !important;
}
#elementor-popup-modal-8594 .dialog-close-button:hover,
#elementor-popup-modal-1003528 .dialog-close-button:hover {
	color: var(--gz-ink) !important;
}

/* Elementor form-messages (success na submit / error): Instrument Sans,
   succes op pine, fout op dezelfde error-rood als checkout. */
#elementor-popup-modal-8594 .elementor-message,
#elementor-popup-modal-1003528 .elementor-message {
	font-family: var(--gz-sans) !important;
}
#elementor-popup-modal-8594 .elementor-message-success,
#elementor-popup-modal-1003528 .elementor-message-success {
	color: var(--gz-pine) !important;
}
#elementor-popup-modal-8594 .elementor-message-error,
#elementor-popup-modal-1003528 .elementor-message-error {
	color: #e15334 !important;
}

/* Mobiel: bescheidener radius; overige schaling doet Elementor zelf. */
@media (max-width: 479px) {
	#elementor-popup-modal-8594 .dialog-widget-content,
	#elementor-popup-modal-1003528 .dialog-widget-content {
		border-radius: var(--gz-r-md) !important;
	}
}