/* ==================================================================
   .cookie-modal — bottom-right toast (desktop/tablet),
                   edge-to-edge bottom sheet (mobile).
   Pattern: kwizzbit/cookie-modal
   Spec:    /HTML/cookies-modal.html

   Token sources:
     Colour   — theme.json settings.color.palette + settings.custom.color
     Spacing  — theme.json settings.spacing.spacingSizes
     Shadow   — theme.json settings.custom.shadow.dropdown
     Motion   — theme.json settings.custom.motion.{ease-out,ease-in-out,dur-base,dur-slow}
     Font     — theme.json settings.typography.fontFamilies.body
     Sizes    — theme.json settings.typography.fontSizes.sm

   The preview file's :root token redeclaration block has been stripped — global
   tokens flow from theme.json, which carries the canonical values
   (cream #FCF0E6 — the preview's #FBEBDD override was incorrect).
   ================================================================== */

.cookie-modal{
	position: fixed;
	right: var(--wp--preset--spacing--60);
	bottom: var(--wp--preset--spacing--60);
	z-index: 200;                       /* above sticky nav (100) */
	width: min(360px, calc(100vw - var(--wp--preset--spacing--60) * 2));
}

/* Liquid-glass fill — Figma Glass values:
   Blur 100, Distortion/Depth 50, ChromAberr 0, Saturation 0%,
   Brightness 100%, Specular Highlight ON.
   CSS approximates distortion + depth via specular highlight
   (inset top/left bright edge + inset bottom/right shadow). */
.cookie-modal__panel{
	/* Raised alpha (0.82) keeps the panel legible over vivid imagery.
	   Boosted saturate (180%) + brightness (115%) let the blurred backdrop
	   stay vivid instead of going grey — the classic Apple glass formula. */
	background: rgba(255,255,255,0.82);
	backdrop-filter: blur(40px) saturate(180%) brightness(115%);
	-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(115%);
	box-shadow:
		var(--wp--custom--shadow--dropdown),
		inset 1px 1px 0 rgba(255,255,255,0.55),     /* specular top-left */
		inset -1px -1px 0 rgba(0,0,0,0.04);          /* depth bottom-right */
	border-radius: 0;
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

/* Entrance */
.cookie-modal[data-state="open"] .cookie-modal__panel{
	animation: cookie-modal-in var(--wp--custom--motion--dur-slow)
	           var(--wp--custom--motion--ease-out) both;
}
@keyframes cookie-modal-in{
	from{ opacity: 0; transform: translateY(12px); }
	to  { opacity: 1; transform: translateY(0);    }
}

/* Exit — driven by JS inline styles; transition declared here */
.cookie-modal__panel{
	transition:
		opacity  360ms var(--wp--custom--motion--ease-in-out),
		transform 360ms var(--wp--custom--motion--ease-in-out);
}

/* Body copy */
.cookie-modal__text{
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;                   /* Roobert Medium */
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}
.cookie-modal__text strong{
	font-weight: 700;                   /* Roobert Bold */
	color: var(--wp--preset--color--ink);
}

/* Action row */
.cookie-modal__actions{
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
}

/* Shared base for the two scoped variants — kept local to .cookie-modal
   so site-wide .btn--primary / .btn--secondary stay untouched. */
.cookie-modal__btn{
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	min-height: 44px;                   /* a11y tap target */
	padding: 0 var(--wp--preset--spacing--50);
	border-radius: 0;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		color            var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		border-color     var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.cookie-modal__btn:focus-visible{
	outline: 2px solid var(--wp--preset--color--coral);
	outline-offset: 3px;
}

/* Ghost — "Maybe later" */
.cookie-modal__btn--ghost{
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	padding-left: 0;
	padding-right: var(--wp--preset--spacing--40);
}
@media (hover: hover){
	.cookie-modal__btn--ghost:hover{
		color: var(--wp--preset--color--coral);
	}
}
.cookie-modal__btn--ghost:active{
	color: var(--wp--preset--color--coral);
	transform: translateY(1px);
}

/* Outline — "Accept Cookies" */
.cookie-modal__btn--outline{
	background: transparent;
	border: 1px solid var(--wp--custom--color--mobile-login-border);
	color: var(--wp--preset--color--ink);
	flex: 1;
	white-space: nowrap;
}
@media (hover: hover){
	.cookie-modal__btn--outline:hover{
		background: var(--wp--preset--color--ink);
		border-color: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}
}
.cookie-modal__btn--outline:active{
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	transform: translateY(1px);
}

/* ==================================================================
   Mobile (≤640px) — edge-to-edge bottom sheet
   ================================================================== */
@media (max-width: 640px){
	.cookie-modal{
		right: var(--wp--preset--spacing--30);
		left:  var(--wp--preset--spacing--30);
		bottom: var(--wp--preset--spacing--30);
		width: auto;
	}
	.cookie-modal__panel{
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50)
		         var(--wp--preset--spacing--40);
		gap: var(--wp--preset--spacing--40);
	}
	.cookie-modal__btn{
		padding: 0 var(--wp--preset--spacing--40);
	}
	.cookie-modal__btn--ghost{
		padding-left: 0;
	}
}

/* ==================================================================
   Reduced motion
   ================================================================== */
@media (prefers-reduced-motion: reduce){
	.cookie-modal[data-state="open"] .cookie-modal__panel{
		animation: none;
	}
	.cookie-modal__panel,
	.cookie-modal__btn{ transition: none; }
}