/* SMEWeb Newsletter form – follows Newspaper/tagDiv proportions and theme variables. */
.smeweb-nl,
.smeweb-nl-tdn {
	--smeweb-nl-accent: var(--td_theme_color, #222222);
	--smeweb-nl-border: #e1e1e1;
	--smeweb-nl-text: #111111;
	--smeweb-nl-muted: #666666;
	--smeweb-nl-error: #c0262d;
	--smeweb-nl-success: #217a3c;
}
.smeweb-nl {
	box-sizing: border-box;
	max-width: 640px;
	margin: 0 0 32px;
	font-family: var(--td_default_google_font_1, 'Open Sans', 'Open Sans Regular', sans-serif);
	color: var(--smeweb-nl-text);
}
.smeweb-nl *, .smeweb-nl *::before, .smeweb-nl *::after { box-sizing: border-box; }

.smeweb-nl__title {
	margin: 0 0 8px;
	font-family: var(--td_default_google_font_2, 'Roboto', sans-serif);
	font-size: 22px;
	line-height: 1.3;
	font-weight: 500;
}
.smeweb-nl__desc { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--smeweb-nl-muted); }

.smeweb-nl__field { margin: 0 0 16px; }
.smeweb-nl__label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}
.smeweb-nl__req { color: var(--smeweb-nl-error); }
.smeweb-nl__optional { font-weight: 400; color: var(--smeweb-nl-muted); }

.smeweb-nl .smeweb-nl__input {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--smeweb-nl-border);
	border-radius: 0;
	background: #fff;
	color: var(--smeweb-nl-text);
	font-family: inherit;
	font-size: 16px; /* prevents iOS zoom */
	line-height: 42px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s ease;
}
.smeweb-nl .smeweb-nl__input:focus { outline: 2px solid var(--smeweb-nl-accent); outline-offset: 0; border-color: var(--smeweb-nl-accent); }
.smeweb-nl .smeweb-nl__input[aria-invalid="true"] { border-color: var(--smeweb-nl-error); }

.smeweb-nl__consent {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 10px;
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--smeweb-nl-muted);
}
.smeweb-nl__consent label { flex: 1 1 0; min-width: 0; cursor: pointer; }
.smeweb-nl__consent a { color: inherit; text-decoration: underline; }
.smeweb-nl .smeweb-nl__checkbox {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--smeweb-nl-accent);
	cursor: pointer;
}
.smeweb-nl__consent .smeweb-nl__error { flex-basis: 100%; }

.smeweb-nl .smeweb-nl__button {
	display: inline-block;
	min-height: 44px;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: 0;
	background-color: #222222;
	color: #ffffff;
	font-family: var(--td_default_google_font_2, 'Roboto', sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 44px;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background-color .2s ease;
}
.smeweb-nl .smeweb-nl__button:hover,
.smeweb-nl .smeweb-nl__button:focus-visible { background-color: var(--smeweb-nl-accent); }
.smeweb-nl .smeweb-nl__button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.smeweb-nl .smeweb-nl__button[disabled] { opacity: .6; cursor: progress; }

.smeweb-nl__error { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--smeweb-nl-error); }
.smeweb-nl__error[hidden] { display: none; }

.smeweb-nl__status:empty { display: none; }
.smeweb-nl__status {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-left: 3px solid currentColor;
	background: #f7f7f7;
	font-size: 14px;
	line-height: 1.5;
}
.smeweb-nl__status.is-success { color: var(--smeweb-nl-success); }
.smeweb-nl__status.is-error { color: var(--smeweb-nl-error); }
.smeweb-nl__status:focus { outline: none; }

.smeweb-nl.is-done .smeweb-nl__fields,
.smeweb-nl.is-done .smeweb-nl__consent,
.smeweb-nl.is-done .smeweb-nl__actions { display: none; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.smeweb-nl__hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Compact layout (e.g. popup): email + button on one row from 480px. */
.smeweb-nl--compact .smeweb-nl__fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.smeweb-nl--compact .smeweb-nl__field { flex: 1 1 220px; margin: 0; }
.smeweb-nl--compact .smeweb-nl__actions { flex: 0 0 auto; }
.smeweb-nl--compact .smeweb-nl__consent { margin-top: 14px; }

@media (max-width: 479px) {
	.smeweb-nl--compact .smeweb-nl__actions,
	.smeweb-nl .smeweb-nl__button { width: 100%; }
	.smeweb-nl--compact .smeweb-nl__field { flex-basis: 100%; }
}

/* Confirmation / unsubscribe pages */
.smeweb-nl-page { max-width: 640px; margin: 40px auto 60px; padding: 0 20px; }
.smeweb-nl-page h1 { margin: 0 0 16px; font-size: 30px; line-height: 1.25; }
.smeweb-nl-page p { font-size: 16px; line-height: 1.6; }
.smeweb-nl-page form { margin: 24px 0 0; }

/* Visually hidden but available to screen readers. */
.smeweb-nl-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---- tagDiv Newsletter element adapted by SMEWeb (tagDiv keeps the design; these rules only add
   what the backend/accessibility needs). ---- */
.smeweb-nl-tdn .smeweb-nl-tdn__name { margin: 0 0 10px; }
.smeweb-nl-tdn .smeweb-nl-tdn__name .tdn-input-wrap { width: 100%; }
.smeweb-nl-tdn .smeweb-nl-tdn__name input { width: 100%; }
.smeweb-nl-tdn .smeweb-nl-tdn__errors:empty { display: none; }
.smeweb-nl-tdn .smeweb-nl__error { text-align: left; }
/* tagDiv hides the real checkbox with display:none, which makes it unreachable by keyboard and
   breaks native "required" validation. Keep it invisible but focusable, on top of tagDiv's box. */
.smeweb-nl-tdn .tdn-checkbox { position: relative; }
.smeweb-nl-tdn .smeweb-nl-tdn__consent .av-checkbox {
	display: block !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.smeweb-nl-tdn .smeweb-nl-tdn__consent .av-checkbox:focus-visible + label .tdn-check { outline: 2px solid #000; outline-offset: 2px; }
.smeweb-nl-tdn .smeweb-nl-tdn__consent .av-checkbox[aria-invalid="true"] + label .tdn-check { border-color: var(--smeweb-nl-error); }
.smeweb-nl-tdn .smeweb-nl-tdn__consent .tdn-check-title a { color: inherit; text-decoration: underline; }
.smeweb-nl-tdn input[aria-invalid="true"] { border-color: var(--smeweb-nl-error) !important; }
.smeweb-nl-tdn .smeweb-nl__status { text-align: left; }
.smeweb-nl-tdn.is-done .smeweb-nl-tdn__name,
.smeweb-nl-tdn.is-done .tdn-email-bar,
.smeweb-nl-tdn.is-done .smeweb-nl-tdn__errors,
.smeweb-nl-tdn.is-done .tdn-checkbox-wrap,
.smeweb-nl-tdn.is-done .tdn-disclaimer { display: none; }

/* Cloudflare Turnstile widget */
.smeweb-nl-captcha { margin: 0 0 16px; min-height: 65px; }
.smeweb-nl-tdn .smeweb-nl-tdn__captcha { margin: 14px 0 0; }
.smeweb-nl-tdn .smeweb-nl-tdn__captcha .smeweb-nl-captcha { margin: 0; }
.smeweb-nl-tdn.is-done .smeweb-nl-tdn__captcha,
.smeweb-nl.is-done .smeweb-nl-captcha { display: none; }

/* Optional mobile number: calling-code selector + number (v1.3.0) */
.smeweb-nl-phone { margin: 0 0 16px; }
.smeweb-nl-phone__row { display: flex; gap: 8px; align-items: stretch; }
.smeweb-nl-phone__country {
	flex: 0 0 auto;
	width: 42%;
	max-width: 230px;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid var(--smeweb-nl-border);
	border-radius: 0;
	background-color: #fff;
	color: var(--smeweb-nl-text);
	font-family: inherit;
	font-size: 16px;
}
.smeweb-nl-tdn .smeweb-nl-phone__country,
.smeweb-nl-tdn .smeweb-nl-phone__number { height: 40px; font-size: 13px; }
.smeweb-nl-phone__number { flex: 1 1 auto; min-width: 0; }
.smeweb-nl-phone__hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--smeweb-nl-muted); text-align: left; }
.smeweb-nl-phone__country:focus,
.smeweb-nl-tdn .smeweb-nl-phone__number:focus { outline: 2px solid var(--smeweb-nl-accent); outline-offset: 0; }
.smeweb-nl-phone select[aria-invalid="true"], .smeweb-nl-phone input[aria-invalid="true"] { border-color: var(--smeweb-nl-error) !important; }
.smeweb-nl-tdn .smeweb-nl-tdn__phone { margin: 0 0 10px; }
.smeweb-nl-tdn .smeweb-nl-tdn__phone .smeweb-nl-phone { margin: 0; }
.smeweb-nl-tdn .smeweb-nl-phone__number {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--smeweb-nl-border);
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	color: var(--smeweb-nl-text);
	box-shadow: none;
}
.smeweb-nl-tdn.is-done .smeweb-nl-tdn__phone,
.smeweb-nl-tdn.is-done .smeweb-nl-tdn__actions { display: none; }

/* Width helper: el_class "smeweb-nl-narrow" -> ~680px, centred. */
.smeweb-nl-tdn.smeweb-nl-narrow { max-width: 680px; margin: 40px auto 60px !important; }
@media (max-width: 767px) { .smeweb-nl-tdn.smeweb-nl-narrow { margin: 24px auto 40px !important; } }
.smeweb-nl-tdn--stacked .smeweb-nl-tdn__actions { margin-top: 16px; }
.smeweb-nl-tdn--stacked .smeweb-nl-tdn__actions .tdn-submit-btn { min-height: 44px; }

/* Consent: checkbox stays top-aligned with the first line; text wraps beside it, never under it. */
.smeweb-nl-tdn .smeweb-nl-tdn__consent { text-align: left; }
.smeweb-nl-tdn .smeweb-nl-tdn__consent .tdn-checkbox label { display: flex; align-items: flex-start; gap: 10px; }
.smeweb-nl-tdn .smeweb-nl-tdn__consent .tdn-check { flex: 0 0 auto; margin-top: 2px; }
.smeweb-nl-tdn .smeweb-nl-tdn__consent .tdn-check-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Touch devices: 16px text in every field prevents iOS/iPadOS zoom on focus. */
@media (max-width: 1024px) {
	.smeweb-nl-tdn input[type="email"],
	.smeweb-nl-tdn input[type="text"],
	.smeweb-nl-tdn input[type="tel"],
	.smeweb-nl-tdn select,
	.smeweb-nl input,
	.smeweb-nl select { font-size: 16px !important; }
}
@media (max-width: 479px) {
	.smeweb-nl-phone__row { flex-wrap: wrap; }
	.smeweb-nl-phone__country { width: 100%; max-width: none; }
	.smeweb-nl-tdn .tdn-email-bar { flex-wrap: wrap; }
}

/* Popup (tagDiv Popup Modal) */
#tdm-popup-modal-smeweb-nl-popup .tdm-pmh-close:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
#tdm-popup-modal-smeweb-nl-popup .smeweb-nl-tdn { margin-bottom: 0; }
@media (max-width: 767px) {
	#tdm-popup-modal-smeweb-nl-popup .tdm-popup-modal { width: calc(100vw - 24px) !important; max-width: 560px; max-height: calc(100vh - 24px); overflow-y: auto; }
}