/*!
 * pf-platform-core — storefront consent banner (PDPL, 2026-09-23; three purposes 2026-09-24). RTL-first (logical properties only),
 * theme-token-driven with neutral fallbacks, no web fonts. Bottom-fixed at z-index 99996 — the stacking the
 * pf-fomo bar had, which pf-blocks' header cart drawer is raised above. "Accept all" and "Refuse
 * non-essential" share ONE rule: same size, same colours, same weight (equal prominence, no nudging).
 */
.pf-consent {
	--pf-consent-bg: var( --wp--preset--color--contrast, #11181c );
	--pf-consent-fg: var( --wp--preset--color--base, #ffffff );
	position: fixed;
	/* Physical fallback first: a browser without logical insets (Safari < 14.1) would otherwise leave the
	   banner — now FIRST in <body> — sitting over the header instead of at the bottom. */
	bottom: 0;
	left: 0;
	right: 0;
	inset-block-end: 0;
	inset-inline: 0;
	/* Defensive backstop (2026-09-29, reproduced on sukoon/bayti/wamda/manba at 390px). left/right/
	   inset-inline:0 already pin this box to exactly the viewport width, but a flex item that cannot shrink
	   below its own content size (see min-inline-size:0 on .pf-consent__text below) can still force the
	   FLEX CONTAINER itself wider than its constrained box on some engines once a theme's font-size/spacing
	   tokens push that content past 420px. inline-size/max-inline-size pin the box explicitly so no theme
	   token combination can widen it again, independent of what its children measure. */
	inline-size: 100%;
	max-inline-size: 100vw;
	z-index: 99996;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	padding: 14px 16px;
	background: var( --pf-consent-bg );
	color: var( --pf-consent-fg );
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	box-shadow: 0 -4px 24px rgba( 0, 0, 0, 0.18 );
	overflow-wrap: anywhere;
}
.pf-consent *,
.pf-consent *::before,
.pf-consent *::after { box-sizing: border-box; }
/* min-inline-size:0 overrides the flexbox default of min-inline-size:auto (= the child's min-content size),
   which is the actual root cause: without it, a long unbroken run inside .pf-consent__text (its title, or the
   nowrap policy link) can hold this flex item — and therefore the row — wider than the viewport on any theme
   whose font-size/letter-spacing tokens push that run's min-content past what's left after the buttons. The
   420px flex-basis is now a min(), so it can never itself become the item's floor once the container is
   already at 100vw on narrow phones. */
.pf-consent__text { flex: 1 1 min( 420px, 100% ); min-inline-size: 0; max-inline-size: 100%; }
.pf-consent__title { display: block; font-size: 15px; margin-block-end: 2px; }
.pf-consent__policy { color: inherit; text-decoration: underline; white-space: nowrap; }
/* THE FIRST LAYER NAMES EVERY PURPOSE (IR Art 11(1)(a),(b); PDPL Art 13(4)): label, one-line summary and
   recipients (outside the Kingdom flagged) sit beside "accept all" — never hidden behind "customise". The banner
   scrolls inside itself on a short screen rather than covering it. */
.pf-consent { max-block-size: 70vh; overflow-y: auto; }
.pf-consent__summary { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pf-consent__summary .pf-consent__vendors { display: inline; }
.pf-consent.is-custom .pf-consent__summary { display: none; }
/* Customise: one row per purpose, each with its full words and the recipients it goes to (IR Art 11(1)(e)),
   replacing the summary. */
.pf-consent__choices { display: none; flex: 1 1 100%; flex-direction: column; gap: 10px; max-inline-size: 760px; }
.pf-consent.is-custom .pf-consent__choices { display: flex; }
.pf-consent.is-custom { max-block-size: 85vh; overflow-y: auto; }
.pf-consent__choice label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.pf-consent__choice input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: currentColor; }
.pf-consent__desc { margin: 2px 0 0; padding-inline-start: 26px; font-size: 13px; opacity: 0.9; }
.pf-consent__vendors { display: block; font-size: 12px; opacity: 0.85; }
.pf-consent__receipt { margin: 0; font-size: 12px; opacity: 0.85; }
.pf-consent__receipt code { font-size: 12px; word-break: break-all; }
.pf-consent__error { flex: 1 1 100%; margin: 0; text-align: center; font-weight: 600; }
.pf-consent__error[hidden] { display: none; }
.pf-consent__btn:disabled { opacity: 0.6; cursor: progress; }
.pf-consent__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }

/* EQUAL PROMINENCE: accept, refuse and save are the same button. */
.pf-consent__btn {
	font: inherit;
	font-weight: 600;
	min-inline-size: 140px;
	min-block-size: 44px;
	padding: 10px 18px;
	border: 1px solid var( --pf-consent-fg );
	border-radius: var( --pf-radius-md, 8px );
	background: var( --pf-consent-fg );
	color: var( --pf-consent-bg );
	cursor: pointer;
}
.pf-consent__save { display: none; }
.pf-consent.is-custom .pf-consent__save { display: inline-block; }
.pf-consent__more {
	font: inherit;
	min-block-size: 44px;
	padding: 10px 8px;
	border: 0;
	background: transparent;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.pf-consent.is-custom .pf-consent__more { display: none; }
.pf-consent__btn:focus-visible,
.pf-consent__more:focus-visible,
.pf-consent__choice input:focus-visible,
.pf-consent__policy:focus-visible {
	outline: 3px solid var( --wp--preset--color--primary, #1f6feb );
	outline-offset: 2px;
}

/* Phones: the two answers side by side at full width, still equal. */
@media ( max-width: 520px ) {
	.pf-consent { padding: 12px; font-size: 13px; }
	.pf-consent__btns { inline-size: 100%; }
	.pf-consent__btn { flex: 1 1 0; min-inline-size: 0; }
	.pf-consent__more { flex: 1 1 100%; }
}

/*
 * NOTHING STAYS HIDDEN UNDER THE BANNER (review 2026-09-23: at 375px it covered about a third of the screen,
 * including the cart's sticky checkout button). While it is on screen the runtime publishes its height as
 * --pf-consent-h and appends this spacer, so the page can scroll its last content clear of it; WooCommerce
 * Blocks' mobile sticky checkout bar (fixed to the bottom, below our stacking) is lifted above it. With no
 * banner the variable is unset and both fall back to 0.
 */
.pf-consent-spacer { display: block; block-size: var( --pf-consent-h, 0px ); pointer-events: none; }
.wc-block-cart .wc-block-cart__submit-container--sticky { bottom: var( --pf-consent-h, 0px ); }
.pf-consent:focus { outline: none; }
.pf-consent:focus-visible { outline: 3px solid var( --wp--preset--color--primary, #1f6feb ); outline-offset: -3px; }

/* The footer's "privacy settings" link: quiet, always there. */
.pf-consent-link-wrap { margin: 8px 0 0; text-align: center; }
.pf-consent-link {
	font: inherit;
	font-size: 13px;
	padding: 4px 6px;
	border: 0;
	background: transparent;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.85;
}
.pf-consent-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media ( prefers-reduced-motion: no-preference ) {
	.pf-consent { animation: pf-consent-in 0.2s ease-out; }
	@keyframes pf-consent-in { from { transform: translateY( 12px ); opacity: 0; } to { transform: none; opacity: 1; } }
}