/**
 * consent.css — cache-safe consent banner styling.
 *
 * Reveal contract (see WPB_Consent_Frontend): the banner root is emitted with
 * a `hidden` attribute AND an inline critical `#wpb-consent{display:none}`
 * rule printed just before it, so it never flashes. The synchronous reveal
 * shim removes `hidden` when consent is needed; the `:not([hidden])` rule
 * below (ID + pseudo-class = higher specificity than the inline id-only rule)
 * then shows the banner. If this stylesheet fails to load, removing `hidden`
 * leaves the inline `display:none` in effect and the banner stays hidden —
 * a privacy-safe degradation.
 */

/*
 * Brand-matchable design tokens (shared, identical set in announce.css).
 * Every default below is the plugin's CURRENT shipped value, so leaving them
 * untouched changes nothing. To match your brand, override any of these ONCE in
 * your theme's Additional CSS (Design → Customizer → Zusätzliches CSS), e.g.
 * `:root{--wpb-accent:#0b5cff;--wpb-accent-contrast:#fff}` — the override then
 * applies to both the consent banner and announcements.
 *
 * PARITY (legal): the Accept AND Reject buttons BOTH derive from --wpb-accent /
 * --wpb-accent-contrast, so re-branding can never make one of the two stand out
 * over the other.
 */
:root {
	--wpb-surface: #ffffff;         /* card / bar / popup background */
	--wpb-text: #1a1a1a;            /* primary body text */
	--wpb-heading: #101828;         /* headings + strong labels */
	--wpb-body-text: #344054;       /* banner body copy */
	--wpb-muted: #475467;           /* subordinate text / borders / icons */
	--wpb-border: #d0d5dd;          /* card border */
	--wpb-divider: #eaecf0;         /* internal hairline dividers */
	--wpb-accent: #1f2937;          /* accept + reject button background */
	--wpb-accent-contrast: #ffffff; /* accept + reject button text */
	--wpb-accent-hover: #111827;    /* accept + reject hover/pressed background */
	--wpb-link: #1d4ed8;            /* inline links */
	--wpb-focus: #2563eb;           /* keyboard focus ring */
	--wpb-radius: 10px;             /* card radius */
	--wpb-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); /* card shadow */
}

/* Hidden baseline (reinforces the `hidden` attribute + inline critical CSS). */
#wpb-consent[hidden] {
	display: none;
}

/* Revealed state: fixed overlay, pinned bottom-centre, no layout push. */
#wpb-consent:not([hidden]) {
	display: flex;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483000; /* above Divi sticky headers / Divi popups. */
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	pointer-events: none; /* the card re-enables pointer events below. */
}

#wpb-consent *,
#wpb-consent *::before,
#wpb-consent *::after {
	box-sizing: border-box;
}

.wpb-consent__dialog {
	pointer-events: auto;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px); /* dvh avoids iOS Safari toolbar clipping; vh above is the fallback. */
	overflow-y: auto;
	background: var(--wpb-surface);
	color: var(--wpb-text); /* ~15:1 on white — well above AA. */
	border: 1px solid var(--wpb-border);
	border-radius: var(--wpb-radius);
	box-shadow: var(--wpb-shadow);
	padding: 20px 22px;
	font-size: 15px;
	line-height: 1.5;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wpb-consent__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--wpb-heading);
}

.wpb-consent__body {
	margin: 0 0 16px;
	color: var(--wpb-body-text); /* ~9:1 on white — above AA. */
}

.wpb-consent__body a {
	color: var(--wpb-link);
	text-decoration: underline;
}

/* Primary decision row — the two equal-weight buttons. */
.wpb-consent__row--primary {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
}

/*
 * BUTTON PARITY (legal): "Alle akzeptieren" and "Alle ablehnen" share this
 * ONE class and are styled identically — same colour, size, weight, and (via
 * flex: 1) width. There is deliberately NO per-button override anywhere in
 * this file, so neither choice is visually nudged over the other. Both colours
 * derive from the SAME --wpb-accent / --wpb-accent-contrast tokens, so even a
 * brand override cannot break the parity.
 */
.wpb-btn--equal {
	flex: 1 1 150px;
	min-height: 44px; /* comfortable touch target. */
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wpb-accent-contrast);
	background: var(--wpb-accent); /* both buttons share this colour → legal parity. */
	border: 1px solid var(--wpb-accent);
	border-radius: var(--wpb-radius);
	cursor: pointer;
	text-align: center;
}

.wpb-btn--equal:hover {
	background: var(--wpb-accent-hover);
	border-color: var(--wpb-accent-hover);
}

/* Pressed feedback — identical for both equal buttons (shared class → parity). */
.wpb-btn--equal:active {
	background: var(--wpb-accent-hover);
	border-color: var(--wpb-accent-hover);
	transform: translateY(1px);
}

/* Subordinate "Auswahl speichern" — clearly secondary to the equal pair.
 * Border #475467 and a faint #f2f4f7 fill give the control ≥3:1 non-text
 * contrast against the white card (WCAG 1.4.11). */
.wpb-btn--subordinate {
	min-height: 40px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--wpb-accent);
	background: #f2f4f7;
	border: 1px solid var(--wpb-muted);
	border-radius: var(--wpb-radius);
	cursor: pointer;
}

.wpb-btn--subordinate:hover {
	background: #e4e7ec;
}

.wpb-btn--subordinate:active {
	background: #d7dbe0;
	transform: translateY(1px);
}

/* Subordinate "Einstellungen" toggle — a plain, underlined control. */
.wpb-consent__settings-toggle {
	display: inline-block;
	margin: 0 0 4px;
	padding: 4px 0;
	font-size: 14px;
	color: var(--wpb-muted);
	background: none;
	border: none;
	text-decoration: underline;
	cursor: pointer;
}

.wpb-consent__settings-toggle:hover {
	color: var(--wpb-heading);
}

.wpb-consent__settings-toggle:active {
	color: var(--wpb-text);
}

/* Per-category opt-in toggles. */
.wpb-consent__categories {
	margin: 8px 0 4px;
	padding: 12px 0 4px;
	border-top: 1px solid var(--wpb-divider);
}

.wpb-consent__cat {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	cursor: pointer;
}

.wpb-consent__cat input[type="checkbox"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.wpb-consent__cat-text {
	display: block;
}

.wpb-consent__cat-label {
	display: block;
	font-weight: 600;
	color: var(--wpb-heading);
}

.wpb-consent__cat-desc {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--wpb-muted);
}

/* Subordinate Datenschutz / Impressum links. */
.wpb-consent__links {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--wpb-divider);
	font-size: 13px;
}

.wpb-consent__link {
	color: var(--wpb-muted);
	text-decoration: underline;
}

.wpb-consent__link + .wpb-consent__link {
	margin-left: 14px;
}

.wpb-consent__link:hover {
	color: var(--wpb-heading);
}

/* Clearly visible keyboard focus everywhere. */
#wpb-consent :focus-visible {
	outline: 3px solid var(--wpb-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * Subtle entrance motion + interaction feedback — ONLY for visitors who have
 * not asked for reduced motion. The banner is still revealed by the existing
 * `hidden`/display mechanism (the source of truth); the entrance itself is a
 * PURE-CSS `@keyframes` animation applied directly to the
 * `:not([hidden]) .wpb-consent__dialog` selector, so it plays automatically
 * the instant the synchronous shim removes `hidden` — no JS class is
 * involved. `animation: … both` uses the keyframes' own 0%/100% frames as the
 * pre-start/post-end state, so the card is opacity:0 only DURING the
 * animation and settles at opacity:1 afterwards even if `consent.js` (or any
 * script) never runs at all — there is no state where a shown banner stays
 * invisible. The animation only ever runs when the banner is ACTUALLY shown
 * (`:not([hidden])`), so a consenter (whose banner stays `hidden` →
 * `display:none`) never sees a flash. Reduced-motion users (and browsers
 * without CSS animation support) get the fully-opaque card instantly, since
 * outside this media query `.wpb-consent__dialog` carries no opacity/animation
 * at all.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes wpb-consent-enter {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	#wpb-consent:not([hidden]) .wpb-consent__dialog {
		animation: wpb-consent-enter 180ms ease both;
	}

	/* Smooth hover/press feedback (instant for reduced-motion users). */
	.wpb-btn--equal,
	.wpb-btn--subordinate,
	.wpb-consent-tab {
		transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
	}
}

/* Small screens: full-width card, equal buttons still share the row. */
@media (max-width: 480px) {
	#wpb-consent:not([hidden]) {
		padding: 0;
	}

	.wpb-consent__dialog {
		max-width: none;
		border-radius: 12px 12px 0 0;
		max-height: 85vh;
		max-height: 85dvh; /* dvh keeps the sheet clear of the iOS toolbar; vh above is the fallback. */
	}

	/* Bigger touch target for the subordinate settings toggle (≥40px hit area). */
	.wpb-consent__settings-toggle {
		min-height: 40px;
		padding: 8px 0;
	}
}

/*
 * Art. 7(3) — default persistent "Cookie-Einstellungen" withdrawal control
 * (WPB_Consent_Frontend::print_settings_tab(), disable-able via the
 * auto_settings_tab setting). Small, unobtrusive fixed bottom-left button;
 * a lower z-index than the banner (#wpb-consent) so it never competes with
 * an open banner, but still above ordinary page content.
 */
.wpb-consent-tab {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 2147482900;
	padding: 8px 14px;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--wpb-body-text);
	background: var(--wpb-surface);
	border: 1px solid var(--wpb-muted); /* ≥3:1 non-text contrast (WCAG 1.4.11). */
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
	cursor: pointer;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wpb-consent-tab:hover {
	background: #f2f4f7;
	color: var(--wpb-heading);
}

.wpb-consent-tab:active {
	background: #e4e7ec;
	transform: translateY(1px);
}

.wpb-consent-tab:focus-visible {
	outline: 3px solid var(--wpb-focus);
	outline-offset: 2px;
}

/*
 * Don't show the reopen tab and the (first-time or re-opened) banner at the same
 * time. The banner is emitted BEFORE the tab in the shared render-guard flush
 * (banner order 10, tab order 20 → same-parent siblings, tab after banner), so
 * while the banner is revealed (`:not([hidden])`) this later-sibling rule hides
 * the tab. Once a decision hides the banner again — or for a returning consenter
 * whose banner was never revealed, or on a legacy browser where the fallback
 * removes the banner entirely — the selector no longer matches and the tab shows
 * normally, keeping the Art. 7(3) withdrawal control reachable. Pure CSS keyed
 * off the existing client-side `hidden` state: cache-safe and no-flash (the
 * synchronous shim sets that state before first paint), no JS/PHP coordination.
 */
#wpb-consent:not([hidden]) ~ .wpb-consent-tab {
	display: none;
}

/*
 * Cross-module contract: lift the withdrawal tab above a standing full-width
 * bottom announcement bar so the Art. 7(3) reopen control is never buried
 * under it. When the announce module (separate wave) reveals a BOTTOM bar it
 * adds `wpb-has-bottom-bar` to <html> and sets `--wpb-bottom-bar-offset` to
 * the bar's height; we add that offset to the tab's default bottom inset.
 * With no bottom bar the class is absent and the default `bottom: 12px` above
 * still applies — lifting (never hiding) preserves the withdrawal control.
 */
html.wpb-has-bottom-bar .wpb-consent-tab {
	bottom: calc( max(12px, env(safe-area-inset-bottom)) + var(--wpb-bottom-bar-offset, 0px) );
}

/*
 * [wpb_cookie_settings] shortcode button. Deliberately NOT fixed-positioned
 * and only a minimal baseline (cursor + a touch-friendly minimum size) — it
 * is meant to sit inline wherever it's placed (a Divi module, footer widget,
 * menu item) and inherit that context's own button/link styling rather than
 * fight it.
 */
.wpb-consent-shortcode-btn {
	min-height: 32px;
	padding: 6px 12px;
	cursor: pointer;
}