/*!
 * bdhc.css - BDH consent plugin. Banner (layer 1) and preference centre (layer 2).
 * Spec sections 4.1 (behaviour and equal prominence), 4.3 to 4.6, 4.7 (click-to-load).
 *
 * ============================== THE ONE RULE ==============================
 * Reject all, Choose and Accept all are styled by ONE shared selector, on
 * purpose, so they cannot drift apart in a later edit. Equal prominence is a
 * legal requirement, not a taste: 11 CCR 7004(a)(2) and EDPB Guidelines 03/2022
 * both treat a louder Accept as a dark pattern that invalidates the consent it
 * collects. Every property the eye reads as prominence is set once, for all of
 * them, with !important so a late theme or ARMember per-form <style> cannot
 * pull one of them ahead: background, colour, border, radius, padding, font
 * family, size, weight, letter-spacing, text-transform, min-width (140px
 * desktop, 100% stacked on mobile) and min-height (44px). No site accent colour
 * touches any of them. If you need to restyle one, restyle all of them or you
 * have broken the plugin's reason to exist.
 *
 * There is deliberately no X, no close icon, no "not now" and no Escape
 * handler anywhere in this file or in the markup it styles. Reject all IS the
 * dismissal (spec 4.1).
 * ==========================================================================
 *
 * TWO PARTS, AND THEY LOAD DIFFERENTLY
 * ------------------------------------
 *   PART A  Shadow-root styles. class-render.php inlines this file into
 *           <style> inside <template id="bdhc-tpl">; the runtime clones it into
 *           the shadow root attached to <div id="bdhc-root">. Where
 *           attachShadow is unavailable the same nodes land in the light DOM
 *           and the root gets class "bdhc-noshadow" (spec 4.1 fallback), so
 *           every Part A rule is written to be safe in the light DOM too.
 *
 *   PART B  Click-to-load placeholders. The blocker neutralises the iframe and
 *           the renderer draws the placeholder in the LIGHT DOM, never in the
 *           shadow root, so this part must also be enqueued as an ordinary
 *           stylesheet (suggested handle "bdhc-css", which belongs on
 *           never_touch_handles).
 *
 * SCOPING: NOTHING IN THIS FILE CAN LEAK
 * --------------------------------------
 * The root class is .bdhc. Every selector is anchored to one of exactly three
 * bdhc-owned anchors and there is not one bare element, universal or
 * pseudo-class selector in the file:
 *
 *     :host / .bdhc-noshadow          the root element itself
 *     .bdhc                           the root class, on the banner and the
 *                                     panel elements
 *     [data-bdhc-el="banner"|"panel"] the same two elements, matched by the
 *                                     runtime's own DOM contract so the rules
 *                                     still apply if the markup forgets .bdhc
 *     [data-bdhc-placeholder]         Part B only
 *
 * Written throughout as:
 *     :is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) <selector>
 *
 * :is() is used rather than :where() because :where() drops specificity to
 * zero, and this stylesheet has to WIN against a theme, not lose politely to
 * it. Descendants are matched by element name inside that scope on purpose:
 * the markup is printed by class-render.php in parallel with this file, so the
 * layout must not depend on class names this file cannot see.
 *
 * MARKUP CONTRACT THIS FILE ASSUMES (all optional, all additive)
 * -------------------------------------------------------------
 *   <div id="bdhc-root">                     host, styled by :host
 *     <div class="bdhc" data-bdhc-el="banner" hidden>
 *       <div class="bdhc-inner"> heading, <p> copy, <p class="bdhc-links">,
 *            <p data-bdhc-el="gpc-line" hidden>,
 *            <div class="bdhc-actions"> three buttons </div> </div>
 *     <div class="bdhc" data-bdhc-el="panel" hidden>
 *       <span data-bdhc-el="focus-guard" data-bdhc-pos="start" tabindex="0">
 *       <div class="bdhc-panel"> ... rows, US sub-panel, footer ... </div>
 *       <span data-bdhc-el="focus-guard" data-bdhc-pos="end" tabindex="0">
 *
 * Category rows are [data-bdhc-row="<key>"] and may be <div> or <details>;
 * both are styled. Toggles are real <input type="checkbox"> carrying
 * data-bdhc-cat / data-bdhc-vendor / data-bdhc-optout, never a div, because
 * the runtime, the keyboard and assistive tech all rely on that.
 *
 * FOCUS TRAP (layer 2 only)
 * -------------------------
 * Layer 1 is explicitly NOT trapped: spec 4.1 requires the bar to be non-modal,
 * with no overlay, no scroll lock and no focus stealing. Layer 2 is modal, so
 * it is trapped three ways here: the overlay covers the viewport and takes the
 * pointer, the two [data-bdhc-el="focus-guard"] sentinels are focusable but
 * visually hidden (the runtime bounces focus off them back into the panel),
 * and :host([data-bdhc-layer="panel"]) keeps the bar out of the way. The
 * sentinels are styled, never display:none, because display:none is not
 * focusable and would silently disable the trap.
 *
 * CONTRAST: every ink/surface pair below is >= 4.5:1 in both schemes. The
 * measured ratios are noted beside the tokens. Do not "brighten" a token
 * without recomputing them.
 */

/* =====================================================================
   PART A - tokens and the root element
   ===================================================================== */

:host,
#bdhc-root.bdhc-noshadow,
.bdhc-noshadow {
	/* Structural isolation first. Inheritable properties DO cross a shadow
	   boundary, so the root resets everything and then states its own
	   typography explicitly (spec 4.1). */
	all: initial;

	/* Neutral palette. No site accent colour exists anywhere in this file. */
	--bdhc-surface: #ffffff;
	--bdhc-surface-2: #f4f4f5;
	--bdhc-ink: #1a1a1a;          /* 16.1:1 on --bdhc-surface   */
	--bdhc-ink-soft: #4a4a4a;     /*  8.9:1 on --bdhc-surface   */
	--bdhc-line: #d4d4d8;
	--bdhc-btn-bg: #1a1a1a;
	--bdhc-btn-ink: #ffffff;      /* 17.4:1 on --bdhc-btn-bg    */
	--bdhc-btn-line: #1a1a1a;
	--bdhc-focus: #0b57d0;
	--bdhc-on: #1a1a1a;
	--bdhc-off: #8a8a90;
	--bdhc-knob: #ffffff;
	--bdhc-scrim: rgba(0, 0, 0, .55);
	--bdhc-radius: 6px;
	--bdhc-gap: 12px;
	--bdhc-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Spec 4.1: the host carries the fixed position and the pointer-events
	   release. No overlay, no scroll lock, nothing that blocks the page. */
	display: block;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 2147483000;
	pointer-events: none;

	/* Spec 4.1: font-family, font-size, line-height, colour, letter-spacing
	   and text-transform are stated, because those inherit. */
	font-family: var(--bdhc-font);
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--bdhc-ink);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

:host([hidden]),
.bdhc-noshadow[hidden] { display: none !important; }

/* =====================================================================
   PART A - shared scaffolding
   Scope: :is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"])
   ===================================================================== */

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]),
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) * {
	box-sizing: border-box;
}

/* The runtime shows and hides everything with the hidden attribute. Several
   rules below set display, so hidden has to win. */
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"])[hidden],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) [hidden] {
	display: none !important;
}

/* The !important on typography here is for the bdhc-noshadow fallback only.
   Inside the shadow root nothing outside can reach these elements; in the
   fallback the theme can, and a banner the visitor cannot read is a banner
   that did not inform anyone. */
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) p {
	margin: 0 0 8px;
	font-family: var(--bdhc-font) !important;
	font-size: .93rem !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left !important;
	color: var(--bdhc-ink-soft) !important;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) p:last-child {
	margin-bottom: 0;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) h1,
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) h2 {
	margin: 0 0 6px;
	font-family: var(--bdhc-font) !important;
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--bdhc-ink) !important;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) h3,
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) h4 {
	margin: 0 0 4px;
	font-family: var(--bdhc-font) !important;
	font-size: .97rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--bdhc-ink) !important;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) a {
	color: var(--bdhc-ink) !important;
	background: none !important;
	font-family: var(--bdhc-font) !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) a:hover {
	text-decoration: none !important;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) ul {
	margin: 6px 0 0;
	padding: 0 0 0 18px;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) li {
	margin: 0 0 2px;
	font-size: .88rem;
	color: var(--bdhc-ink-soft);
}

/* Visually hidden but still focusable and still read aloud. Used for the two
   focus-trap sentinels and for any label the design carries only for screen
   readers. Never display:none. */
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) [data-bdhc-el="focus-guard"],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) .bdhc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =====================================================================
   PART A - layer 1, the bar
   Non-modal. No overlay. No scroll lock. Its own inner scroll.
   ===================================================================== */

[data-bdhc-el="banner"] {
	display: block;
	position: relative;
	pointer-events: auto;
	max-height: 80vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px clamp(16px, 4vw, 40px);
	background: var(--bdhc-surface);
	color: var(--bdhc-ink);
	border-top: 1px solid var(--bdhc-line);
	box-shadow: 0 -2px 16px rgba(0, 0, 0, .13);
}

[data-bdhc-el="banner"] .bdhc-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bdhc-gap) 28px;
	align-items: flex-start;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
}

[data-bdhc-el="banner"] .bdhc-copy {
	flex: 1 1 420px;
	min-width: 0;
}

/* The GPC line prints above the buttons, only when the signal is present. */
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) [data-bdhc-el="gpc-line"],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) [data-bdhc-el="gpc-note"],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) [data-bdhc-el="force-deny-note"] {
	display: block;
	margin: 8px 0 0;
	padding: 8px 10px;
	background: var(--bdhc-surface-2);
	border-radius: var(--bdhc-radius);
	font-size: .86rem !important;
	color: var(--bdhc-ink) !important;
}

/* =====================================================================
   PART A - THE THREE BUTTONS
   One rule. Read the header before touching it.
   ===================================================================== */

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) .bdhc-actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bdhc-gap);
	align-items: stretch;
	margin: 0;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="reject_all"],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="choose"],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="accept_all"],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="save"],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="withdraw_all"],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) .bdhc-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	float: none !important;
	margin: 0 !important;
	min-width: 140px !important;
	width: auto !important;
	min-height: 44px !important;
	height: auto !important;
	padding: 11px 20px !important;
	background: var(--bdhc-btn-bg) !important;
	background-image: none !important;
	color: var(--bdhc-btn-ink) !important;
	border: 1px solid var(--bdhc-btn-line) !important;
	border-radius: var(--bdhc-radius) !important;
	font-family: var(--bdhc-font) !important;
	font-size: .93rem !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: none !important;
	cursor: pointer;
	transition: opacity .12s ease;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action]:hover,
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) .bdhc-btn:hover {
	opacity: .88 !important;
}

/* =====================================================================
   PART A - layer 2, the preference centre
   ===================================================================== */

[data-bdhc-el="panel"] {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	pointer-events: auto;
	background: var(--bdhc-scrim);
	overflow-y: auto;
	overscroll-behavior: contain;
}

[data-bdhc-el="panel"] .bdhc-panel {
	width: 100%;
	max-width: 720px;
	max-height: 88vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(20px, 4vw, 32px);
	background: var(--bdhc-surface);
	color: var(--bdhc-ink);
	border: 1px solid var(--bdhc-line);
	border-radius: 10px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, .3);
}

/* While the panel is open the bar is hidden by the runtime; this keeps the
   host from eating clicks at the bottom of the viewport in the fallback. */
:host([data-bdhc-layer="panel"]),
.bdhc-noshadow[data-bdhc-layer="panel"] { inset: 0; }

[data-bdhc-el="panel"] .bdhc-panel-head { margin-bottom: 16px; }

[data-bdhc-el="panel"] .bdhc-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bdhc-gap);
	margin: 16px 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--bdhc-line);
}

/* Bottom pair: Save my choices, Turn everything off. Same class as the top
   pair, so no button in the panel is louder than any other. */
[data-bdhc-el="panel"] .bdhc-panel-foot-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bdhc-gap);
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--bdhc-line);
}

/* ---------- category rows: seven of them, div or details ---------- */

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-row] {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid var(--bdhc-line);
}

:is(.bdhc, [data-bdhc-el="panel"]) details[data-bdhc-row] {
	display: block;
}

:is(.bdhc, [data-bdhc-el="panel"]) details[data-bdhc-row] > summary {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	font-size: .97rem;
	font-weight: 600;
	color: var(--bdhc-ink);
}

:is(.bdhc, [data-bdhc-el="panel"]) details[data-bdhc-row] > summary::-webkit-details-marker {
	display: none;
}

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-row] .bdhc-row-copy {
	flex: 1 1 auto;
	min-width: 0;
}

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-row] .bdhc-row-control {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	align-items: center;
	padding-top: 2px;
}

/* Necessary states its status as text, never as a dead toggle, and Security
   states that it is on by default in the same place. */
:is(.bdhc, [data-bdhc-el="panel"]) .bdhc-state {
	font-size: .85rem;
	font-weight: 600;
	color: var(--bdhc-ink-soft);
	white-space: nowrap;
}

/* ---------- toggles ---------- */

:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-cat],
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-vendor],
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-optout],
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-el="gpc-override"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative;
	flex: 0 0 auto;
	width: 46px !important;
	height: 26px !important;
	min-width: 46px;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--bdhc-off) !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color .15s ease;
}

:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-cat]::after,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-vendor]::after,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-optout]::after,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-el="gpc-override"]::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: var(--bdhc-knob);
	border-radius: 50%;
	transition: transform .15s ease;
}

:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-cat]:checked,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-vendor]:checked,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-optout]:checked,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-el="gpc-override"]:checked {
	background: var(--bdhc-on) !important;
}

:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-cat]:checked::after,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-vendor]:checked::after,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-optout]:checked::after,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-el="gpc-override"]:checked::after {
	transform: translateX(20px);
}

/* Disabled is the TikTok row where vendor_gate_verified is false: off, locked,
   and honest about it. Never used to discourage a choice the visitor can make. */
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][disabled] {
	opacity: .5;
	cursor: not-allowed;
}

:is(.bdhc, [data-bdhc-el="panel"]) label {
	display: inline-flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .9rem;
	color: var(--bdhc-ink);
	cursor: pointer;
}

/* ---------- per-vendor row, nested under Advertising ---------- */

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-vendor-row] {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
	margin: 12px 0 0;
	padding: 12px;
	background: var(--bdhc-surface-2);
	border-radius: var(--bdhc-radius);
}

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-el="vendor-locked"] {
	display: block;
	margin: 6px 0 0;
	font-size: .85rem;
	font-weight: 600;
	color: var(--bdhc-ink);
}

/* ---------- the US opt-out sub-panel: three independent checkboxes ---------- */

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-el="us-panel"] {
	margin: 14px 0 0;
	padding: 14px 16px;
	background: var(--bdhc-surface-2);
	border-radius: var(--bdhc-radius);
}

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-el="us-panel"] [data-bdhc-row],
:is(.bdhc, [data-bdhc-el="panel"]) .bdhc-optout-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 9px 0;
	border-bottom: 0;
}

/* Inside the US sub-panel the three controls are checkboxes, not switches:
   they are three separate legal rights, not one graded setting. */
:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-el="us-panel"] input[type="checkbox"][data-bdhc-optout],
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-el="gpc-override"] {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	border-radius: 4px !important;
	background: var(--bdhc-surface) !important;
	border: 1px solid var(--bdhc-ink-soft) !important;
}

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-el="us-panel"] input[type="checkbox"][data-bdhc-optout]::after,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-el="gpc-override"]::after {
	content: "";
	top: 3px;
	left: 7px;
	width: 6px;
	height: 12px;
	background: none;
	border: solid var(--bdhc-btn-ink);
	border-width: 0 2px 2px 0;
	border-radius: 0;
	transform: rotate(45deg) scale(0);
	transition: transform .12s ease;
}

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-el="us-panel"] input[type="checkbox"][data-bdhc-optout]:checked,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-el="gpc-override"]:checked {
	background: var(--bdhc-on) !important;
	border-color: var(--bdhc-on) !important;
}

:is(.bdhc, [data-bdhc-el="panel"]) [data-bdhc-el="us-panel"] input[type="checkbox"][data-bdhc-optout]:checked::after,
:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-el="gpc-override"]:checked::after {
	transform: rotate(45deg) scale(1);
}

/* ---------- marketing block, footer, confirmations ---------- */

:is(.bdhc, [data-bdhc-el="panel"]) .bdhc-marketing {
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--bdhc-line);
}

:is(.bdhc, [data-bdhc-el="panel"]) .bdhc-panel-foot {
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--bdhc-line);
	font-size: .8rem;
	line-height: 1.6;
	color: var(--bdhc-ink-soft);
}

:is(.bdhc, [data-bdhc-el="panel"]) .bdhc-panel-foot p {
	margin: 0 0 4px;
	font-size: .8rem !important;
	color: var(--bdhc-ink-soft) !important;
}

:is(.bdhc, [data-bdhc-el="panel"]) .bdhc-panel-foot a {
	margin-right: 14px;
	color: var(--bdhc-ink-soft) !important;
}

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) [data-bdhc-el="confirm-saved"],
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) [data-bdhc-el="confirm-deferred"] {
	display: block;
	margin: 12px 0 0;
	padding: 10px 12px;
	background: var(--bdhc-surface-2);
	border-left: 3px solid var(--bdhc-ink);
	border-radius: var(--bdhc-radius);
	font-size: .88rem !important;
	font-weight: 600 !important;
	color: var(--bdhc-ink) !important;
}

/* =====================================================================
   PART A - focus
   Visible on every control, never removed. 3px so it survives a busy theme.
   ===================================================================== */

:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button:focus-visible,
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) input:focus-visible,
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) a:focus-visible,
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) summary:focus-visible,
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) [tabindex]:focus-visible {
	outline: 3px solid var(--bdhc-focus) !important;
	outline-offset: 2px !important;
	border-radius: var(--bdhc-radius);
}

/* Mouse users do not get the ring; keyboard users always do. */
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button:focus:not(:focus-visible),
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) input:focus:not(:focus-visible),
:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) a:focus:not(:focus-visible) {
	outline: none;
}

/* Browsers without :focus-visible still get a ring. */
@supports not selector(:focus-visible) {
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button:focus,
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) input:focus,
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) a:focus {
		outline: 3px solid var(--bdhc-focus) !important;
		outline-offset: 2px !important;
	}
}

/* =====================================================================
   PART A - small screens
   The three buttons stack full width and stay identical to each other.
   The bar keeps its own inner scroll at 45vh (spec 4.1).
   ===================================================================== */

@media (max-width: 640px) {
	[data-bdhc-el="banner"] {
		max-height: 45vh;
		padding: 16px;
	}

	[data-bdhc-el="banner"] .bdhc-inner {
		flex-direction: column;
		align-items: stretch;
	}

	/* The three buttons stay in view while the copy scrolls inside the bar.
	   Measured on a 375x812 viewport: the four spec paragraphs alone fill the
	   45vh bar, so without this the visitor sees a wall of text and no way to
	   answer until they discover the bar scrolls. Sticky to the bar's own
	   scrollport, full-bleed across its 16px padding, opaque so text slides
	   under it. */
	[data-bdhc-el="banner"] .bdhc-actions {
		position: sticky;
		/* -16px, not 0: sticky offsets resolve against the bar's content box,
		   and a bar's padding scrolls with its content, so at 0 a 16px strip of
		   moving text showed under the buttons. */
		bottom: -16px;
		z-index: 1;
		margin: 0 -16px -16px;
		padding: 12px 16px 16px;
		background: var(--bdhc-surface);
		box-shadow: 0 -10px 12px -10px rgba(0, 0, 0, .35);
	}

	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) .bdhc-actions,
	[data-bdhc-el="panel"] .bdhc-panel-actions,
	[data-bdhc-el="panel"] .bdhc-panel-foot-actions {
		flex-direction: column;
		align-items: stretch;
	}

	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="reject_all"],
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="choose"],
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="accept_all"],
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="save"],
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action="withdraw_all"],
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) .bdhc-btn {
		width: 100% !important;
		min-width: 0 !important;
	}

	[data-bdhc-el="panel"] {
		padding: 0;
		align-items: flex-end;
	}

	[data-bdhc-el="panel"] .bdhc-panel {
		max-width: none;
		max-height: 92vh;
		padding: 18px;
		border-radius: 10px 10px 0 0;
	}
}

/* =====================================================================
   PART A - reduced motion
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]),
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) *,
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) *::before,
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* =====================================================================
   PART A - dark scheme
   Tokens only. The three decision buttons move together or not at all.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
	:host,
	#bdhc-root.bdhc-noshadow,
	.bdhc-noshadow {
		--bdhc-surface: #1c1c1f;
		--bdhc-surface-2: #27272b;
		--bdhc-ink: #f2f2f3;        /* 15.4:1 on --bdhc-surface */
		--bdhc-ink-soft: #b9b9be;   /*  8.7:1 on --bdhc-surface */
		--bdhc-line: #3a3a40;
		--bdhc-btn-bg: #f2f2f3;
		--bdhc-btn-ink: #1a1a1a;    /* 15.4:1 on --bdhc-btn-bg  */
		--bdhc-btn-line: #f2f2f3;
		--bdhc-focus: #8ab4f8;
		--bdhc-on: #f2f2f3;
		--bdhc-off: #5c5c63;
		--bdhc-knob: #1c1c1f;
		--bdhc-scrim: rgba(0, 0, 0, .7);
	}

	[data-bdhc-el="banner"] { box-shadow: 0 -2px 16px rgba(0, 0, 0, .55); }
}

/* =====================================================================
   PART A - forced colours and print
   ===================================================================== */

@media (forced-colors: active) {
	:is(.bdhc, [data-bdhc-el="banner"], [data-bdhc-el="panel"]) button[data-bdhc-action],
	:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-cat],
	:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-vendor],
	:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-optout],
	:is(.bdhc, [data-bdhc-el="panel"]) input[type="checkbox"][data-bdhc-el="gpc-override"] {
		forced-color-adjust: none;
		border: 1px solid ButtonText !important;
	}
}

@media print {
	:host,
	.bdhc-noshadow { display: none !important; }
}

/* =====================================================================
   PART B - light DOM: click-to-load placeholders (spec 4.7)
   ---------------------------------------------------------------------
   Printed into the page itself, not into the shadow root, so these rules must
   also reach the light DOM. Everything is anchored to [data-bdhc-placeholder]
   and hardened, because here the theme really can reach in.

   The two buttons, Load it once and Always load this kind of content, are
   styled by one shared selector for the same reason the banner's three are.
   ===================================================================== */

[data-bdhc-placeholder] {
	all: initial;

	--bdhc-ph-surface: #f4f4f5;
	--bdhc-ph-ink: #1a1a1a;
	--bdhc-ph-ink-soft: #4a4a4a;
	--bdhc-ph-line: #d4d4d8;
	--bdhc-ph-btn-bg: #1a1a1a;
	--bdhc-ph-btn-ink: #ffffff;
	--bdhc-ph-focus: #0b57d0;
	--bdhc-ph-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	display: block;
	position: relative;
	width: 100%;
	min-height: 180px;
	margin: 0;
	padding: 24px;
	background: var(--bdhc-ph-surface);
	border: 1px dashed var(--bdhc-ph-line);
	border-radius: 6px;
	font-family: var(--bdhc-ph-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--bdhc-ph-ink);
}

[data-bdhc-placeholder],
[data-bdhc-placeholder] * { box-sizing: border-box; }

[data-bdhc-placeholder] [hidden] { display: none !important; }

/* The notice itself, printed by BDHC_Render::placeholder_html() ahead of the
   neutralised iframe. The runtime hides this box on load and leaves the
   wrapper, so the restored embed keeps its place in the page. */
[data-bdhc-placeholder] [data-bdhc-el="placeholder-box"] {
	display: block;
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
	max-width: 100%;
}

/* Everything here carries !important. Unlike Part A this really is in the
   theme's own document, and a measured hostile-theme test (a late per-form
   <style> with !important on p, h3, a and button) walked straight through the
   unhardened version of these three rules. */
[data-bdhc-placeholder] .bdhc-ph-title,
[data-bdhc-placeholder] h2,
[data-bdhc-placeholder] h3 {
	margin: 0 0 6px;
	font-family: var(--bdhc-ph-font) !important;
	font-size: .97rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left !important;
	color: var(--bdhc-ph-ink) !important;
}

[data-bdhc-placeholder] p {
	margin: 0 0 12px;
	max-width: 62ch;
	font-family: var(--bdhc-ph-font) !important;
	font-size: .9rem !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left !important;
	color: var(--bdhc-ph-ink-soft) !important;
}

/* The chat-only line. Same weight as the rest: it is a warning, not a nag. */
[data-bdhc-placeholder] .bdhc-ph-chat { color: var(--bdhc-ph-ink) !important; }

[data-bdhc-placeholder] a {
	color: var(--bdhc-ph-ink) !important;
	font-family: var(--bdhc-ph-font) !important;
	font-weight: 400 !important;
	text-decoration: underline !important;
}

[data-bdhc-placeholder] .bdhc-ph-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

[data-bdhc-placeholder] button[data-bdhc-action="embed_load_once"],
[data-bdhc-placeholder] button[data-bdhc-action="embed_always"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	float: none !important;
	margin: 0 !important;
	min-width: 140px !important;
	width: auto !important;
	min-height: 44px !important;
	padding: 11px 20px !important;
	background: var(--bdhc-ph-btn-bg) !important;
	background-image: none !important;
	color: var(--bdhc-ph-btn-ink) !important;
	border: 1px solid var(--bdhc-ph-btn-bg) !important;
	border-radius: 6px !important;
	font-family: var(--bdhc-ph-font) !important;
	font-size: .93rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	cursor: pointer;
}

[data-bdhc-placeholder] button[data-bdhc-action]:focus-visible {
	outline: 3px solid var(--bdhc-ph-focus) !important;
	outline-offset: 2px !important;
}

@supports not selector(:focus-visible) {
	[data-bdhc-placeholder] button[data-bdhc-action]:focus {
		outline: 3px solid var(--bdhc-ph-focus) !important;
		outline-offset: 2px !important;
	}
}

/* The neutralised node stays in the DOM, hidden, so the runtime can put
   data-bdhc-src back into src in place. It is never removed. */
[data-bdhc-placeholder] iframe[data-bdhc-src],
[data-bdhc-placeholder] img[data-bdhc-src],
[data-bdhc-placeholder] video[data-bdhc-src],
[data-bdhc-placeholder] audio[data-bdhc-src] { display: none; }

/* After a grant: the copy and the buttons go, the embed appears. */
[data-bdhc-placeholder].bdhc-loaded {
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
}

[data-bdhc-placeholder].bdhc-loaded > :not(iframe):not(img):not(video):not(audio) { display: none !important; }

[data-bdhc-placeholder].bdhc-loaded iframe,
[data-bdhc-placeholder].bdhc-loaded img,
[data-bdhc-placeholder].bdhc-loaded video,
[data-bdhc-placeholder].bdhc-loaded audio {
	display: block;
	width: 100%;
	max-width: 100%;
}

@media (max-width: 640px) {
	[data-bdhc-placeholder] { padding: 16px; }
	[data-bdhc-placeholder] .bdhc-ph-actions { flex-direction: column; align-items: stretch; }

	[data-bdhc-placeholder] button[data-bdhc-action="embed_load_once"],
	[data-bdhc-placeholder] button[data-bdhc-action="embed_always"] {
		width: 100% !important;
		min-width: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-bdhc-placeholder],
	[data-bdhc-placeholder] * {
		transition: none !important;
		animation: none !important;
	}
}

@media (prefers-color-scheme: dark) {
	[data-bdhc-placeholder] {
		--bdhc-ph-surface: #27272b;
		--bdhc-ph-ink: #f2f2f3;
		--bdhc-ph-ink-soft: #b9b9be;
		--bdhc-ph-line: #3a3a40;
		--bdhc-ph-btn-bg: #f2f2f3;
		--bdhc-ph-btn-ink: #1a1a1a;
		--bdhc-ph-focus: #8ab4f8;
	}
}

@media (forced-colors: active) {
	[data-bdhc-placeholder] button[data-bdhc-action] {
		forced-color-adjust: none;
		border: 1px solid ButtonText !important;
	}
}

/* 1.0.8: "Chat with us" button (config chat_launcher). The runtime shows it
   only while the chat's category is not allowed and the banner is closed. */
.bdhc-chat-launcher{position:fixed;right:20px;bottom:20px;z-index:2147483000;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:280px;margin:0;padding:12px 18px;border:0;border-radius:24px;background:#111111;color:#ffffff;font:600 15px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:left;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.bdhc-chat-launcher[hidden]{display:none}
.bdhc-chat-launcher .bdhc-cl-sub{font-weight:400;font-size:12px;opacity:.85}
.bdhc-chat-launcher:hover{background:#2a2a2a}
.bdhc-chat-launcher:focus-visible{outline:3px solid #ffffff;outline-offset:2px;box-shadow:0 0 0 6px #111111}
.bdhc-chat-launcher[aria-busy="true"]{opacity:.7;cursor:progress}
@media (max-width:480px){.bdhc-chat-launcher{right:12px;bottom:12px;max-width:72vw}}