/**
 * protox-newsletter — floating CTA panel chrome styling (desktop).
 *
 * Brand tokens pulled VERBATIM from the design contract
 * (protox_branded_floating_cta_panel.html, D-02):
 *   primary green #2D5A3D, NYT accent blue #1E3A8A, sharp corners (border-radius:2px),
 *   4px green top strip, 'Inter' font, box-shadow 0 6px 20px rgba(0,0,0,0.12),
 *   ALL-CAPS labels with letter-spacing.
 *   Per-state widths: collapsed 320px / expanded 340px / success ~320px (follows wrapper).
 *
 * Scope: EVERYTHING here is scoped under .pnl-panel. This file styles ONLY the
 * panel chrome. The embedded form fields inside .pnl-panel__state--expanded are
 * ALREADY styled by form.css (.pnl-form / inputs / labels / submit) — do NOT add
 * any input/label/.pnl-submit/.pnl-state-form rules here or they would duplicate
 * and conflict with form.css.
 *
 * IMPORTANT (keystone, D-08 / reveal): the panel is rendered with the HTML
 * `hidden` attribute and JS (Plan 05-04) removes it to reveal. This stylesheet
 * must NOT override `[hidden]` with a display value, or the panel would flash
 * visible before JS runs. Any reveal transition is gated on .pnl-panel--visible.
 *
 * Layering (D-12): z-index 9000 is far BELOW Cookiebot's overlay (~2.1e9) and the
 * panel sits bottom-right while Cookiebot sits bottom-left, so it never blocks the
 * consent banner.
 *
 * Targets (a11y, PANEL-10): the × close button and the teaser pill are given
 * ≥44px hit areas without changing the mockup's small visual icon size.
 */

/* ---- Root placement + stacking (D-12) ---- */
.pnl-panel {
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: 9000;                 /* BELOW Cookiebot (~2.1e9) so it never blocks consent */
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #1a1a1a;
}

/* Optional reveal transition — gated on .pnl-panel--visible ONLY.
   Never override [hidden]; JS removes the attribute to reveal the panel. */
.pnl-panel {
	opacity: 1;
}
.pnl-panel--visible {
	opacity: 1;
	transition: opacity 200ms ease, transform 200ms ease;
}

/* ---- Theme-bleed defense (Porto / Elementor button styling) ----
   The panel injects plain <button>s into the page; the active theme paints a
   brand-green background (and other chrome) onto them — which made the minimized
   bar's dark text unreadable on green. Strip native/theme button chrome here, then
   the component rules below repaint the intended fills (white bars; green pill/submit).
   Panel-scoped + !important so it wins regardless of theme load order. */
.pnl-panel button {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}
/* Pin the state containers AND the bar buttons white (the theme green can land on
   either). The 4px .pnl-panel__strip stays green — it is not matched here. */
.pnl-panel .pnl-panel__state,
.pnl-panel .pnl-panel__minbar,
.pnl-panel .pnl-panel__teaser {
	background-color: #ffffff !important;
}
.pnl-panel .pnl-panel__close {
	background-color: transparent !important;
	color: #6B6B6B !important;        /* theme forces white text; keep the × visible on white */
	padding: 0 !important;            /* theme adds 14px 18px → inflates the hit area over the chevron */
	box-sizing: border-box !important;
}
/* Theme forces white text on its buttons too — pin our bar text so it stays readable
   on the white background (panel-scoped + !important to beat theme load order). */
.pnl-panel .pnl-panel__teaser-head,
.pnl-panel .pnl-panel__minbar-head { color: #1a1a1a !important; }
.pnl-panel .pnl-panel__teaser-sub,
.pnl-panel .pnl-panel__minbar-sub { color: #666666 !important; }

/* ---- State containers: the white card (ported mockup container) ---- */
.pnl-panel__state {
	background: #ffffff;
	border: 1px solid #D5D5D5;
	border-radius: 2px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.pnl-panel__state--collapsed {
	width: 320px;
}

.pnl-panel__state--expanded {
	width: 340px;
}
/* The embedded form's own .pnl-state-success width (~320px) follows this wrapper. */

/* ---- Top accent strip ---- */
.pnl-panel__strip {
	height: 4px;
	background: #2D5A3D;
}

/* ---- Close button: ≥44px hit area, ~12px visual icon (PANEL-10) ---- */
.pnl-panel__close {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;                   /* ≥44px target */
	height: 44px;                  /* ≥44px target */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 0;
	color: #6B6B6B;
	cursor: pointer;
	z-index: 2;
}
.pnl-panel__close svg {
	width: 12px;                   /* visual icon stays small, matching the mockup */
	height: 12px;
}

/* ---- Featured news block ---- */
.pnl-panel__featured {
	padding: 14px 16px;
	border-bottom: 1px solid #EEEEEE;
}
.pnl-panel__badge {
	display: inline-block;
	background: #1E3A8A;
	color: #ffffff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 3px 7px;
	border-radius: 0;
}
.pnl-panel__date {
	font-size: 10px;
	color: #888;
	letter-spacing: 0.3px;
}
.pnl-panel__featured-title {
	margin: 8px 0 5px;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.35;
	padding-right: 20px;
}
.pnl-panel__featured-excerpt {
	margin: 0 0 10px;
	font-size: 12px;
	color: #555;
	line-height: 1.5;
}
.pnl-panel__readmore {
	font-size: 11px;
	color: #2D5A3D;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-decoration: none;
}

/* ---- Newsletter teaser bar + pill (collapsed CTA) ---- */
.pnl-panel__teaser {
	width: 100%;
	padding: 14px 16px;
	background: #ffffff;
	border: none;
	border-radius: 0;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: inherit;
}
.pnl-panel__teaser-head { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; }
.pnl-panel__teaser-sub { display: block; font-size: 11px; line-height: 1.3; }
.pnl-panel__teaser-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;              /* ≥44px target; compact look kept via padding */
	padding: 7px 11px;
	background: #2D5A3D;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;              /* tight leading if a long translation must wrap */
	letter-spacing: 0.8px;
	white-space: nowrap;           /* keep the short CTA ("TILMELD"/"SIGN UP") on one line */
	border-radius: 0;
	box-sizing: border-box;
}

/* ---- Expanded chrome (above the embedded form) ---- */
.pnl-panel__state--expanded > .pnl-panel__body,
.pnl-panel__body {
	padding: 18px;
}
.pnl-panel__eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	color: #2D5A3D;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.4;
}
.pnl-panel__heading {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.25;
}
.pnl-panel__intro {
	margin: 0 0 16px;
	font-size: 12px;
	color: #555;
	line-height: 1.55;
}

/* On submit-success the embedded form shows its own self-contained success message
   (check tile + "Næsten færdig" + body). Hide the panel's marketing header so only the
   success shows — matches the Opus design (panel.js adds .pnl-panel--success). */
.pnl-panel--success .pnl-panel__eyebrow,
.pnl-panel--success .pnl-panel__heading,
.pnl-panel--success .pnl-panel__intro,
.pnl-panel--error .pnl-panel__eyebrow,
.pnl-panel--error .pnl-panel__heading,
.pnl-panel--error .pnl-panel__intro {
	display: none;
}

/* The shared form is embedded headerless inside the panel (show_heading=false). The
   panel already supplies the header + outer card, so strip the form's OWN card chrome
   (grey border, 4px green top accent, 18px padding, white bg) — the fields then sit
   directly in the panel body instead of as a box-in-a-box. Applies to every state
   (form / success / error) so the success card is equally seamless. */
.pnl-panel .pnl-form-wrap .pnl-state {
	border: 0;
	padding: 0;
	background: transparent;
}
/* The sidebar caps the form at 360px for its narrow column; inside the panel let it
   fill the panel body (which is itself width-capped + centered on wide sheets below). */
.pnl-panel .pnl-form-wrap {
	max-width: none;
}

/* ---- Mobile bottom sheet (Phase 6, MOBILE-01/02/03) ----
   Replaces the old desktop-only display:none. SAME .pnl-panel DOM as desktop;
   CSS owns the sheet layout, panel.js owns the gestures. 768px is the shared
   breakpoint (D-11); this max-width:767px complement never overlaps desktop. */
@media (max-width: 767px) {
	/* Full-width, bottom-anchored sheet (overrides desktop bottom:16/right:16).
	   !important + margin/max-width reset so a theme rule on .pnl-panel can't inset it. */
	.pnl-panel {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		/* position:fixed + z-index:9000 inherited from the base rule (keep below Cookiebot). */
	}

	/* Each state container becomes a full-width sheet, rounded top, shadow pointing UP.
	   :not([hidden]) is CRITICAL — a bare `display:flex` here would override the UA
	   `[hidden]{display:none}` and force the INACTIVE state (the form, which ships
	   `hidden`) visible, so the panel would open in form mode instead of collapsed.
	   The JS toggles the `hidden` attribute to switch states; this rule must respect it. */
	.pnl-panel__state:not([hidden]) {
		width: 100%;
		margin: 0;
		/* Edge-to-edge sheet: drop the side/bottom borders (they read as an inset gap);
		   round only the top corners. */
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
		display: flex;
		flex-direction: column;
		max-height: 92vh;            /* fallback first ... */
		max-height: 92dvh;           /* ... dvh wins where supported (iOS-correct) */
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	/* Belt-and-suspenders: keep hidden states hidden even against any later display rule. */
	.pnl-panel__state[hidden] {
		display: none !important;
	}

	/* On wide sheets (tablet / just under 768px) a full-bleed form reads lopsided —
	   header spans full width while the fields sit narrow at the left. Constrain the
	   expanded body (header + fields + success) to one comfortable column and center it.
	   Phones narrower than this max-width are unaffected (margin auto = 0). */
	.pnl-panel__body {
		max-width: 460px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		box-sizing: border-box;
	}

	/* Minimized strip (mobile-only initial state, D-LOCK-1): a compact tap-to-expand bar. */
	.pnl-panel__minbar {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 11px 16px;             /* chevron now sits left by the text, away from the corner close */
		min-height: 44px;               /* MOBILE-03 tap target */
		background: #fff;
		border: none;
		text-align: left;
		cursor: pointer;
		font: inherit;
	}
	.pnl-panel__minbar-copy { flex: 0 1 auto; }   /* don't grow → chevron stays beside the text, not pushed to the edge */
	.pnl-panel__minbar-chevron { flex: 0 0 auto; }
	.pnl-panel__minbar-head { display: block; font-size: 13px; font-weight: 700; color: #1a1a1a; }
	.pnl-panel__minbar-sub { display: block; font-size: 11px; color: #666; }
	.pnl-panel__minbar-chevron { display: inline-flex; align-items: center; color: #2D5A3D; }

	/* Grab handle: visible 32x3 pill inside a >=44px-tall touch zone (MOBILE-03). */
	.pnl-panel__handle {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px 0 4px;          /* tighter top gap (matches Opus mockup); still a grab zone */
		touch-action: none;          /* this zone owns the swipe; do not scroll it */
		cursor: grab;
	}
	.pnl-panel__handle::before {
		content: "";
		width: 32px;
		height: 3px;
		border-radius: 2px;
		background: #D5D5D5;
	}

	/* Strip stays decorative; the handle is the grab zone. Strip also gets touch-action. */
	.pnl-panel__strip { touch-action: none; }

	/* Scroll zone: the body scrolls natively; contain stops scroll-chaining to the page. */
	.pnl-panel__body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* Tap targets >=44px (MOBILE-03). */
	.pnl-panel__close { width: 48px; height: 48px; }
	.pnl-panel__teaser { padding: 16px; min-height: 56px; }
	.pnl-panel__teaser-pill { min-height: 44px; }

	/* iOS focus-zoom fix: inputs >=16px font + >=44px tall, SCOPED to .pnl-panel
	   so the /nyheder/ sidebar form (form.css 13px) is untouched. */
	.pnl-panel .pnl-input,
	.pnl-panel .pnl-country-select { min-height: 44px; font-size: 16px; }
	.pnl-panel .pnl-submit { min-height: 48px; }
}

/* Grab handle + the mobile-only minimized strip are hidden on desktop
   (desktop opens straight at the collapsed featured+teaser state). */
@media (min-width: 768px) {
	.pnl-panel__handle { display: none; }
	.pnl-panel__state--minimized { display: none !important; }
}