/**
 * GOXA Consent Manager — canonical privacy trigger utility.
 *
 * V5.6.6 geometry contract:
 * - the button itself IS the real hitbox;
 * - collapsed width is physically 44px and preview grows to natural label width;
 * - label typography keeps its full intrinsic drawer width during motion;
 * - a dedicated opaque 44px cookie surface is a permanent top layer;
 * - the drawer is revealed/hidden underneath that surface by the real button width;
 * - Motion Contract owns duration/easing, this component owns geometry.
 */
:root {
	--goxa-cm-reopen-accent: #5b6cff;
	--goxa-cm-reopen-on-accent: #ffffff;
	--goxa-cm-reopen-fg: var(--goxa-cm-reopen-on-accent);
	--goxa-cm-reopen-bg: var(--goxa-cm-reopen-accent);
	--goxa-cm-reopen-bg-active: color-mix(in srgb, var(--goxa-cm-reopen-accent) 90%, var(--goxa-cm-reopen-on-accent) 10%);
	--goxa-cm-reopen-border: color-mix(in srgb, var(--goxa-cm-reopen-on-accent) 24%, transparent);
	--goxa-cm-reopen-border-active: color-mix(in srgb, var(--goxa-cm-reopen-on-accent) 42%, transparent);
	--goxa-cm-reopen-shadow: 0 8px 22px rgba(15,23,31,.12);
	--goxa-cm-reopen-shadow-active: 0 12px 28px rgba(15,23,31,.16);
	--goxa-cm-reopen-left: auto;
	--goxa-cm-reopen-right: 0;
	--goxa-cm-reopen-open-width: 190px;
}

.goxa-cm-reopen,
.goxa-cm-reopen * { box-sizing: border-box; }
.goxa-cm-reopen[hidden] { display: none !important; }

.goxa-cm-reopen.goxa-cm-reopen {
	position: fixed;
	left: var(--goxa-cm-reopen-left);
	right: var(--goxa-cm-reopen-right);
	bottom: max(12px, calc(env(safe-area-inset-bottom) + 12px));
	z-index: 999998;
	display: inline-block;
	width: 44px;
	max-width: calc(100vw - 24px);
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--goxa-cm-reopen-border);
	border-radius: 14px;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: inherit;
	line-height: 1;
	text-align: left;
	text-decoration: none;
	user-select: none;
	touch-action: manipulation;
	background: var(--goxa-cm-reopen-bg);
	background-image: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: var(--goxa-cm-reopen-shadow);
	color: var(--goxa-cm-reopen-fg);
	color-scheme: light;
	isolation: isolate;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition-property: width, border-color, box-shadow, background-color, transform;
	transition-duration:
		var(--goxa-cm-motion-duration, 1800ms),
		.18s,
		.18s,
		.18s,
		.18s;
	transition-timing-function:
		var(--goxa-cm-motion-ease, cubic-bezier(.22, 1, .36, 1)),
		ease,
		ease,
		ease,
		ease;
}

/* Permanent cookie shell. This restores the proven V5.6.2 layer model while
 * keeping the V5.6.3+ real expanding button hitbox. The shell never moves,
 * never shrinks and is always painted above the drawer. */
.goxa-cm-reopen.goxa-cm-reopen::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 44px;
	background: var(--goxa-cm-reopen-bg);
	pointer-events: none;
}
.goxa-cm-reopen--side-right.goxa-cm-reopen::before { right: 0; }
.goxa-cm-reopen--side-left.goxa-cm-reopen::before { left: 0; }

/* The actual button width is the actual pointer hitbox. No invisible overlay,
 * no absolutely-positioned clickable surface and no ghost interaction zone. */
.goxa-cm-reopen.goxa-cm-reopen.is-expanded {
	width: min(var(--goxa-cm-reopen-open-width, 190px), calc(100vw - 24px));
	border-color: var(--goxa-cm-reopen-border-active);
	box-shadow: var(--goxa-cm-reopen-shadow-active);
}

/* Entrance / exit vector for the complete trigger. Vertical always uses the
 * bottom; horizontal follows the resolved consent side. */
.goxa-cm-reopen.goxa-cm-reopen {
	--goxa-cm-motion-x: 0;
	--goxa-cm-motion-y: calc(100% + 20px);
	--goxa-cm-motion-scale-y: 8px;
	--goxa-cm-motion-scale-from: .92;
	--goxa-cm-motion-slide-opacity: .58;
}
.goxa-cm-reopen--axis-horizontal.goxa-cm-reopen--side-right {
	--goxa-cm-motion-x: calc(100% + 20px);
	--goxa-cm-motion-y: 0;
}
.goxa-cm-reopen--axis-horizontal.goxa-cm-reopen--side-left {
	--goxa-cm-motion-x: calc(-100% - 20px);
	--goxa-cm-motion-y: 0;
}

/* The cookie is the invariant endpoint. Because left/right positioning fixes
 * one edge of the button, changing width only exposes the drawer inward. */
.goxa-cm-reopen__mark {
	position: absolute;
	top: 0;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 42px;
	pointer-events: none;
}
.goxa-cm-reopen--side-right .goxa-cm-reopen__mark { right: 0; }
.goxa-cm-reopen--side-left .goxa-cm-reopen__mark { left: 0; }
.goxa-cm-reopen__mark img {
	display: block;
	width: 18px;
	height: 18px;
	max-width: none;
	object-fit: contain;
	background: transparent;
	border: 0;
	box-shadow: none;
	filter: none;
	transform: translate(.5px, -.6px);
}

/* Label is real content inside the real button, but its typographic box never
 * gets squeezed during collapse. It keeps the full measured drawer width while
 * the native button hitbox shrinks around it. Button overflow clips the outer
 * edge; the permanent 44px cookie shell (z-index:2) masks the inner edge. */
.goxa-cm-reopen__label {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	width: max(0px, calc(var(--goxa-cm-reopen-open-width, 190px) - 44px));
	min-width: 0;
	height: 42px;
	padding: 0 14px;
	color: var(--goxa-cm-reopen-fg);
	white-space: nowrap;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .04em;
	pointer-events: none;
	overflow: hidden;
}
.goxa-cm-reopen--side-right .goxa-cm-reopen__label {
	left: auto;
	right: 44px;
	justify-content: flex-end;
	padding-right: 4px;
}
.goxa-cm-reopen--side-left .goxa-cm-reopen__label {
	left: 44px;
	right: auto;
	justify-content: flex-start;
	padding-left: 4px;
}

/* Slide is a physical drawer under a permanent shell. The label keeps its full
 * typographic width and moves as one rigid layer beneath the 44px cookie surface;
 * simultaneously the native button width shrinks/grows as the real hitbox. This
 * prevents both text compression and a clipped glyph tail next to the cookie. */
.goxa-cm-reopen.goxa-cm-motion--slide .goxa-cm-reopen__label {
	opacity: 1;
	scale: 1;
	transition: translate var(--goxa-cm-motion-duration, 1800ms) var(--goxa-cm-motion-ease, cubic-bezier(.22, 1, .36, 1));
}
.goxa-cm-reopen--side-right.goxa-cm-motion--slide .goxa-cm-reopen__label { translate: 100% 0; }
.goxa-cm-reopen--side-left.goxa-cm-motion--slide .goxa-cm-reopen__label { translate: -100% 0; }
.goxa-cm-reopen.goxa-cm-motion--slide.is-expanded .goxa-cm-reopen__label { translate: 0 0; }

/* Fade and Soft Scale retain their visual semantics, while the physical width
 * still tracks the real hitbox so no invisible click region can exist. */
.goxa-cm-reopen.goxa-cm-motion--fade .goxa-cm-reopen__label {
	opacity: 0;
	transition: opacity var(--goxa-cm-motion-duration, 1800ms) var(--goxa-cm-motion-ease, cubic-bezier(.22, 1, .36, 1));
}
.goxa-cm-reopen.goxa-cm-motion--fade.is-expanded .goxa-cm-reopen__label { opacity: 1; }
.goxa-cm-reopen.goxa-cm-motion--scale .goxa-cm-reopen__label {
	opacity: 0;
	scale: .96;
	transform-origin: center;
	transition:
		opacity var(--goxa-cm-motion-duration, 1800ms) var(--goxa-cm-motion-ease, cubic-bezier(.22, 1, .36, 1)),
		scale var(--goxa-cm-motion-duration, 1800ms) var(--goxa-cm-motion-ease, cubic-bezier(.22, 1, .36, 1));
}
.goxa-cm-reopen.goxa-cm-motion--scale.is-expanded .goxa-cm-reopen__label {
	opacity: 1;
	scale: 1;
}
.goxa-cm-reopen.goxa-cm-motion--none { transition-duration: 0s, .18s, .18s, .18s, .18s; }
.goxa-cm-reopen.goxa-cm-motion--none .goxa-cm-reopen__label { opacity: 1; }

/* Hover/focus advertises interactivity. Logical PREVIEW is controlled by JS so
 * mouse, touch and keyboard can share one explicit state machine. */
.goxa-cm-reopen.goxa-cm-reopen:not(.is-expanded):hover,
.goxa-cm-reopen.goxa-cm-reopen:not(.is-expanded):focus-visible {
	border-color: var(--goxa-cm-reopen-border-active);
	box-shadow: var(--goxa-cm-reopen-shadow-active);
}
.goxa-cm-reopen.goxa-cm-reopen:focus-visible {
	outline: 1px solid color-mix(in srgb, var(--goxa-cm-reopen-fg) 54%, transparent);
	outline-offset: 3px;
}
.goxa-cm-reopen.goxa-cm-reopen:not(.is-expanded):active {
	color: var(--goxa-cm-reopen-fg);
	transform: scale(.98);
	background: var(--goxa-cm-reopen-bg-active);
}
.goxa-cm-reopen.goxa-cm-reopen:not(.is-expanded):active::before {
	background: var(--goxa-cm-reopen-bg-active);
}

@media (max-width: 600px) {
	.goxa-cm-reopen.goxa-cm-reopen {
		bottom: max(7px, calc(env(safe-area-inset-bottom) + 7px));
		max-width: calc(100vw - 14px);
	}
	.goxa-cm-reopen--side-right.goxa-cm-reopen {
		left: auto;
		right: max(7px, calc(env(safe-area-inset-right) + 7px));
	}
	.goxa-cm-reopen--side-left.goxa-cm-reopen {
		left: max(7px, calc(env(safe-area-inset-left) + 7px));
		right: auto;
	}
	.goxa-cm-reopen.goxa-cm-reopen.is-expanded {
		width: min(var(--goxa-cm-reopen-open-width, 190px), calc(100vw - 14px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.goxa-cm-reopen { transition: none !important; }
	.goxa-cm-reopen__label { transition: none !important; }
}