/* =========================================================================
   SKINLUX Consent - inherits the theme's tokens where they exist and falls
   back to its own palette so the plugin stays portable to other projects.
   ========================================================================= */

.sxc {
	--sxc-surface: var(--wp--preset--color--base, #FAF7F2);
	--sxc-ink:     var(--wp--preset--color--contrast, #4A3B33);
	--sxc-muted:   var(--wp--preset--color--stone, #8A7B70);
	--sxc-line:    var(--wp--preset--color--line, #E3D9CC);
	--sxc-accent:  var(--wp--preset--color--accent, #B8894A);
	--sxc-deep:    var(--wp--preset--color--bark, #2A211C);
	--sxc-font:    var(--wp--preset--font-family--body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--sxc-ease:    cubic-bezier(.22, .61, .36, 1);

	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
	font-family: var(--sxc-font);
	color: var(--sxc-ink);
}

.sxc[hidden] { display: none; }

.sxc *,
.sxc *::before,
.sxc *::after { box-sizing: border-box; }

html.sxc-locked { overflow: hidden; }

/* ---------- Banner ------------------------------------------------------- */

.sxc__banner {
	position: absolute;
	width: min(27rem, calc(100vw - 2rem));
	background: var(--sxc-surface);
	border: 1px solid var(--sxc-line);
	border-top: 2px solid var(--sxc-accent);
	padding: 1.75rem;
	pointer-events: auto;
	box-shadow: 0 2px 6px rgba(42, 33, 28, .06), 0 24px 60px rgba(42, 33, 28, .14);
	opacity: 0;
	translate: 0 12px;
	transition: opacity .5s var(--sxc-ease), translate .5s var(--sxc-ease);
}

.sxc.is-visible .sxc__banner { opacity: 1; translate: 0 0; }

.sxc--bottom-left .sxc__banner  { inset: auto auto 1.25rem 1.25rem; }
.sxc--bottom-right .sxc__banner { inset: auto 1.25rem 1.25rem auto; }
.sxc--bottom-bar .sxc__banner {
	inset: auto 0 0 0;
	width: 100%;
	max-width: none;
	border-inline: 0;
	border-bottom: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1.5rem 2rem;
	padding: 1.5rem clamp(1rem, 5vw, 4rem);
}
.sxc--bottom-bar .sxc__actions { margin-top: 0; }

@media (max-width: 640px) {
	.sxc__banner {
		inset: auto .75rem .75rem .75rem !important;
		width: auto;
		grid-template-columns: 1fr;
	}
}

.sxc__title {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 .625rem;
	color: var(--sxc-ink);
}

.sxc__body {
	font-size: .8125rem;
	line-height: 1.65;
	color: var(--sxc-muted);
	margin: 0;
}

.sxc__body a {
	color: var(--sxc-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--sxc-accent);
}

.sxc__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .625rem;
	margin-top: 1.5rem;
}

/* ---------- Controls ----------------------------------------------------- */

.sxc__button {
	font: 600 .6875rem/1 var(--sxc-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: .95rem 1.5rem;
	border: 1px solid var(--sxc-ink);
	border-radius: 0;
	cursor: pointer;
	transition: background .3s var(--sxc-ease), color .3s var(--sxc-ease), border-color .3s var(--sxc-ease);
}

.sxc__button--primary {
	background: var(--sxc-ink);
	color: var(--sxc-surface);
}
.sxc__button--primary:hover {
	background: var(--sxc-accent);
	border-color: var(--sxc-accent);
}

.sxc__button--ghost {
	background: transparent;
	color: var(--sxc-ink);
}
.sxc__button--ghost:hover {
	background: var(--sxc-ink);
	color: var(--sxc-surface);
}

.sxc__link {
	background: none;
	border: 0;
	padding: .35rem 0;
	font: 600 .6875rem/1 var(--sxc-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sxc-muted);
	cursor: pointer;
	border-bottom: 1px solid var(--sxc-line);
	transition: color .3s var(--sxc-ease), border-color .3s var(--sxc-ease);
}
.sxc__link:hover { color: var(--sxc-ink); border-bottom-color: var(--sxc-accent); }

.sxc :focus-visible {
	outline: 2px solid var(--sxc-accent);
	outline-offset: 3px;
}

/* ---------- Preferences panel -------------------------------------------- */

.sxc__scrim {
	position: absolute;
	inset: 0;
	background: rgba(42, 33, 28, .5);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	pointer-events: auto;
	animation: sxc-fade .35s var(--sxc-ease);
}
.sxc__scrim[hidden] { display: none; }

@keyframes sxc-fade { from { opacity: 0; } to { opacity: 1; } }

.sxc__panel {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: min(34rem, calc(100vw - 2rem));
	max-height: min(42rem, calc(100vh - 2rem));
	display: flex;
	flex-direction: column;
	background: var(--sxc-surface);
	border: 1px solid var(--sxc-line);
	border-top: 2px solid var(--sxc-accent);
	pointer-events: auto;
	box-shadow: 0 30px 80px rgba(42, 33, 28, .25);
	animation: sxc-rise .4s var(--sxc-ease);
}
.sxc__panel[hidden] { display: none; }

@keyframes sxc-rise {
	from { opacity: 0; translate: -50% calc(-50% + 14px); }
	to   { opacity: 1; translate: -50% -50%; }
}

.sxc__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 1.75rem 1.25rem;
	border-bottom: 1px solid var(--sxc-line);
}
.sxc__panel-head .sxc__title { margin: 0; }

.sxc__close {
	background: none;
	border: 0;
	padding: .5rem;
	margin: -.5rem;
	cursor: pointer;
	color: var(--sxc-muted);
	line-height: 0;
}
.sxc__close:hover { color: var(--sxc-ink); }

.sxc__panel-body {
	padding: .5rem 1.75rem;
	overflow-y: auto;
	flex: 1;
}

.sxc__category { padding: 1.25rem 0; border-bottom: 1px solid var(--sxc-line); }
.sxc__category:last-child { border-bottom: 0; }

.sxc__category-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .5rem;
}

.sxc__category-label {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.sxc__category-body {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--sxc-muted);
	max-width: 42ch;
}

.sxc__always {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sxc-accent);
}

/* Switch */
.sxc__switch { position: relative; display: inline-flex; cursor: pointer; flex: none; }
/* The input stays the top layer so it is the thing that actually gets
   clicked, rather than relying on the label to forward the event. */
.sxc__switch input {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.sxc__switch-track {
	width: 2.5rem;
	height: 1.25rem;
	border-radius: 999px;
	background: var(--sxc-line);
	display: block;
	position: relative;
	z-index: 1;
	transition: background .3s var(--sxc-ease);
}
.sxc__switch-thumb {
	position: absolute;
	inset: 2px auto auto 2px;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(42, 33, 28, .25);
	transition: translate .3s var(--sxc-ease);
}
.sxc__switch input:checked + .sxc__switch-track { background: var(--sxc-accent); }
.sxc__switch input:checked + .sxc__switch-track .sxc__switch-thumb { translate: 1.25rem 0; }
.sxc__switch input:focus-visible + .sxc__switch-track {
	outline: 2px solid var(--sxc-accent);
	outline-offset: 3px;
}

.sxc__panel-foot {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	justify-content: flex-end;
	padding: 1.25rem 1.75rem 1.5rem;
	border-top: 1px solid var(--sxc-line);
}

.sxc .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.sxc *, .sxc *::before, .sxc *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}