/**
 * GCM Consent Banner — Structural CSS only.
 *
 * Provides the bare minimum for the banner to function:
 * fixed positioning, z-index, hidden states, flex layout,
 * and fade transition. That's it.
 *
 * NO visual styles — no colors, fonts, spacing (beyond preventing collapse),
 * shadows, borders, or radius. All visual appearance is the admin's
 * responsibility via the Custom CSS field in Settings > Consent Banner.
 *
 * BEM class reference (all classes are available for admin styling):
 *   .consent-banner                     outer container, fixed to viewport bottom
 *   .consent-banner__inner              content wrapper
 *   .consent-banner__heading            heading (aria-labelledby target)
 *   .consent-banner__content            main content wrapper (heading + text + buttons)
 *   .consent-banner__text               body text paragraph
 *   .consent-banner__link               privacy policy <a> within text
 *   .consent-banner__actions            button row
 *   .consent-banner__btn                shared button base
 *   .consent-banner__btn--accept        accept / consent button
 *   .consent-banner__btn--decline       opt-out / decline button
 *   .consent-banner__confirm            opt-out confirmation message wrapper
 *   .consent-banner__confirm-text       opt-out confirmation text paragraph
 *   .consent-banner__gpc-notice         GPC acknowledgment notice wrapper
 *   .consent-banner__gpc-notice-text    GPC notice text paragraph
 *
 * CCPA compliance note:
 *   Admins must style .consent-banner__btn--accept and
 *   .consent-banner__btn--decline with equal visual weight. An asymmetric
 *   opt-out is a dark pattern under the 2026 CCPA regulations.
 */

/* ------------------------------------------------------------------ */
/* Hidden states                                                       */
/* ------------------------------------------------------------------ */

/* Reinforces the native hidden attribute for specificity. */
.consent-banner[hidden],
.consent-banner__content[hidden],
.consent-banner__confirm[hidden],
.consent-banner__gpc-notice[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Banner — fixed to viewport bottom.                                  */
/* ------------------------------------------------------------------ */

.consent-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

/* Flex layout so text and buttons don't overlap. */
.consent-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Text fills available space, buttons stay beside it. */
.consent-banner__text {
	flex: 1 1 0%;
	min-width: 0;
}

/* Reset default paragraph margin on GPC notice text. */
.consent-banner__gpc-notice-text {
	margin-bottom: 0;
}

/* Button row stays together. */
.consent-banner__actions {
	display: flex;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Fade-out transition                                                 */
/* ------------------------------------------------------------------ */

.consent-banner {
	opacity: 1;
	transition: opacity 0.4s ease;
}

.consent-banner--fade-out {
	opacity: 0;
}

/* Respect prefers-reduced-motion — disable opacity transition.        */
/* Messages still show for the dwell time, then hide without animating.*/
@media (prefers-reduced-motion: reduce) {
	.consent-banner {
		transition: none;
	}
}