/* ============================================
   KB Newsletter — compact Brevo sign-up (inline + popup)

   Colors, fonts and button styling read from the theme's design-token
   bridge (bricks-child/functions.php emits :root{...} from
   design-tokens.json); the fallbacks only matter without the theme.
   rem values assume Bricks' 62.5% root, so 1.6rem = 16px.
   ============================================ */

.kb-newsletter,
.kb-newsletter-popup {
	--kb-nl-blue:      var(--color-primary-400, #00417d);
	--kb-nl-white:     var(--color-neutral-0, #fefefe);
	--kb-nl-ink:       var(--color-neutral-300, #1d1d1d);
	--kb-nl-error:     var(--color-alert-error, #e00851);
	--kb-nl-success:   var(--color-alert-success, #06b700);

	/* Derived shades follow the tokens above via color-mix. */
	--kb-nl-ink-soft:  color-mix(in srgb, var(--kb-nl-ink) 70%, transparent);
	--kb-nl-rule:      color-mix(in srgb, var(--kb-nl-blue) 15%, transparent);
	--kb-nl-field:     color-mix(in srgb, var(--kb-nl-blue) 30%, transparent);

	--kb-nl-font:      var(--font-family-body, 'Satoshi', system-ui, sans-serif);
	--kb-nl-font-head: var(--font-family-heading, 'OPTIClearfaceGothicDemiAg', Georgia, serif);
	--kb-nl-radius:    var(--button-border-radius, 5px);
	--kb-nl-control:   44px; /* input + button height, doubles as touch target */
}

.kb-newsletter {
	width: 100%;
	max-width: 560px;
	font-family: var(--kb-nl-font);
	font-size: var(--font-size-text-sm, 1.6rem);
	line-height: var(--line-height-body, 1.4);
	color: var(--kb-nl-ink);
}

.kb-newsletter--inline {
	padding: 24px;
	background: var(--kb-nl-white);
	border: 1px solid var(--kb-nl-rule);
	border-radius: 12px;
}

/* ===== Header ===== */
.kb-newsletter__title {
	margin: 0;
	font-family: var(--kb-nl-font-head);
	font-size: var(--font-size-h5, 2.4rem);
	font-weight: 400;
	line-height: var(--line-height-heading, 1.3);
	color: var(--kb-nl-blue);
}
.kb-newsletter--inline .kb-newsletter__title {
	font-size: var(--font-size-h4, 3.2rem);
}

.kb-newsletter__text {
	margin: 4px 0 0;
	color: var(--kb-nl-ink-soft);
}
.kb-newsletter--popup .kb-newsletter__text {
	font-size: var(--font-size-text-xs, 1.4rem);
}

/* ===== Form ===== */
.kb-newsletter__form {
	margin: 16px 0 0;
}
.kb-newsletter--popup .kb-newsletter__form {
	margin-top: 12px;
}

/* Email + button share one row. The input's huge flex-grow keeps the
   button at its natural width; once the row is too narrow the button
   wraps below and, alone on its line, stretches to full width. */
.kb-newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kb-newsletter__input {
	flex: 999 1 160px; /* + button fits the popup's 320px content width */
	min-width: 0;
	height: var(--kb-nl-control);
	margin: 0;
	padding: 0 14px;
	font-family: inherit;
	font-size: 1.6rem; /* ≥ 16px keeps iOS from zooming on focus */
	color: var(--kb-nl-ink);
	background: var(--kb-nl-white);
	border: 1px solid var(--kb-nl-field);
	border-radius: var(--kb-nl-radius);
	box-shadow: none;
	appearance: none;
	transition: border-color var(--transition-fast, 150ms ease);
}
.kb-newsletter__input::placeholder {
	color: var(--kb-nl-ink-soft);
	opacity: 1;
}
.kb-newsletter__input:hover {
	border-color: var(--kb-nl-blue);
}
.kb-newsletter__input:focus-visible {
	border-color: var(--kb-nl-blue);
	outline: 2px solid var(--kb-nl-blue);
	outline-offset: 1px;
}
.kb-newsletter__input[aria-invalid="true"] {
	border-color: var(--kb-nl-error);
	outline-color: var(--kb-nl-error);
}

.kb-newsletter__submit {
	flex: 1 0 auto;
	height: var(--kb-nl-control);
	margin: 0;
	padding: 0 20px;
	font-family: var(--button-font-family, var(--kb-nl-font));
	font-size: var(--button-font-size, 1.6rem);
	/* Matches the site's Bricks CTAs ("JETZT BESTELLEN!"). */
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
	color: var(--button-primary-text, #fff);
	background: var(--button-primary-bg, #00213f);
	border: 0;
	border-radius: var(--kb-nl-radius);
	cursor: pointer;
	transition: var(--button-transition, background-color 150ms ease);
}
.kb-newsletter__submit:hover {
	background: var(--button-primary-hover-bg, #00417d);
}
.kb-newsletter__submit:focus-visible {
	outline: 2px solid var(--kb-nl-blue);
	outline-offset: 2px;
}
.kb-newsletter__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* ===== Consent + fine print ===== */
.kb-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 12px 0 0;
	font-size: var(--font-size-text-xs, 1.4rem);
	color: var(--kb-nl-ink); /* Bricks greys out every <label> */
	cursor: pointer;
}
.kb-newsletter__consent input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0; /* centers on the first text line */
	accent-color: var(--kb-nl-blue);
	cursor: pointer;
}
/* Bricks sets outline:none on all inputs — restore a keyboard focus ring. */
.kb-newsletter__consent input:focus-visible {
	outline: 2px solid var(--kb-nl-blue);
	outline-offset: 2px;
}
.kb-newsletter__consent input[aria-invalid="true"] {
	outline: 2px solid var(--kb-nl-error);
	outline-offset: 2px;
}

.kb-newsletter__fineprint {
	margin: 4px 0 0;
	padding-left: 28px; /* aligns with the consent text, past the checkbox */
	font-size: 1.2rem;
	color: var(--kb-nl-ink-soft);
}
.kb-newsletter__fineprint a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.kb-newsletter__fineprint a:hover {
	color: var(--kb-nl-blue);
}

/* ===== Status ===== */
/* Never display:none — a live region has to be in the a11y tree before its
   text changes, or screen readers skip the announcement. */
.kb-newsletter__status {
	margin: 12px 0 0;
	font-size: var(--font-size-text-xs, 1.4rem);
}
.kb-newsletter__status:empty {
	margin: 0;
}
.kb-newsletter__status:focus {
	outline: none; /* focused from JS only (tabindex="-1") */
}
.kb-newsletter__status[data-state="error"] {
	color: var(--kb-nl-error);
}
.kb-newsletter__status[data-state="success"] {
	padding: 10px 12px;
	color: var(--kb-nl-ink);
	background: color-mix(in srgb, var(--kb-nl-success) 10%, transparent);
	border-left: 3px solid var(--kb-nl-success);
	border-radius: 0 var(--kb-nl-radius) var(--kb-nl-radius) 0;
}

/* After a successful sign-up only the confirmation stays. */
.kb-newsletter.is-done .kb-newsletter__row,
.kb-newsletter.is-done .kb-newsletter__consent,
.kb-newsletter.is-done .kb-newsletter__fineprint {
	display: none;
}
.kb-newsletter.is-done .kb-newsletter__status {
	margin-top: 0;
}

/* ===== Helpers ===== */
.kb-newsletter__hp {
	display: none !important;
}

.kb-newsletter__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ===== Popup ===== */
.kb-newsletter-popup {
	position: fixed;
	right: 24px;
	bottom: 24px;
	/* Above page content, below the navbar drawer portal (100), the cart
	   drawer (9999) and the menu drawer (99998). */
	z-index: 90;
	width: 360px;
	max-width: calc(100vw - 48px);
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	padding: 20px;
	background: var(--kb-nl-white);
	border-radius: 12px;
	box-shadow:
		0 20px 48px -12px color-mix(in srgb, var(--kb-nl-blue) 35%, transparent),
		0 2px 8px color-mix(in srgb, var(--kb-nl-ink) 8%, transparent);

	/* Closed = parked below the viewport edge. visibility flips only after
	   the slide-out, which also drops it from tab order and the a11y tree. */
	visibility: hidden;
	opacity: 0;
	transform: translate3d(0, calc(100% + 24px), 0);
	transition:
		transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.3s ease,
		visibility 0s linear 0.5s;
}
.kb-newsletter-popup[hidden] {
	display: none;
}
.kb-newsletter-popup.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.kb-newsletter-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	color: var(--kb-nl-ink-soft);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}
.kb-newsletter-popup__close:hover {
	color: var(--kb-nl-blue);
	background: var(--kb-nl-rule);
}
.kb-newsletter-popup__close:focus-visible {
	outline: 2px solid var(--kb-nl-blue);
	outline-offset: 2px;
}

/* Keep the title clear of the close button. */
.kb-newsletter--popup .kb-newsletter__title {
	padding-right: 32px;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
	.kb-newsletter--inline {
		padding: 20px 16px;
	}
	.kb-newsletter--inline .kb-newsletter__title {
		font-size: var(--font-size-mobile-h4, 2.2rem);
	}

	.kb-newsletter-popup {
		right: 12px;
		bottom: 12px;
		left: 12px;
		width: auto;
		max-width: none;
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kb-newsletter-popup {
		transform: none;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}
}

@media print {
	.kb-newsletter-popup {
		display: none !important;
	}
}