/* Simple Cookie Notice — front end
   Colors come from CSS custom properties printed inline by PHP. */

.scn-root {
	/* Density defaults; overridden by the .scn-density-* classes below. */
	--scn-gap: 12px;
	--scn-pad-y: 10px;
	--scn-pad-x: 16px;
	--scn-btn-h: 34px;
	--scn-btn-pad: 14px;
	font-size: var(--scn-font-size, 13px);
	line-height: 1.45;
}

.scn-density-compact {
	--scn-gap: 12px;
	--scn-pad-y: 10px;
	--scn-pad-x: 16px;
	--scn-btn-h: 34px;
	--scn-btn-pad: 14px;
}

.scn-density-normal {
	--scn-gap: 16px;
	--scn-pad-y: 14px;
	--scn-pad-x: 20px;
	--scn-btn-h: 40px;
	--scn-btn-pad: 18px;
}

.scn-density-large {
	--scn-gap: 20px;
	--scn-pad-y: 20px;
	--scn-pad-x: 26px;
	--scn-btn-h: 46px;
	--scn-btn-pad: 24px;
}

.scn-root.scn-hidden {
	display: none;
}

/* The [hidden] attribute only carries `display:none` from the browser's own
   stylesheet, so any class here that sets `display` would silently beat it and
   the element would stay on screen. Everything the script toggles with
   `hidden` — the panel, the Save button, the reopen button — needs this. */
.scn-root [hidden] {
	display: none !important;
}

.scn-overlay {
	position: fixed;
	inset: 0;
	background: var(--scn-overlay, rgba(0, 0, 0, .5));
	z-index: 999998;
	animation: scn-fade .25s ease;
}

.scn-notice {
	position: fixed;
	z-index: 999999;
	background: var(--scn-bg, #fff);
	color: var(--scn-text, #1f2937);
	box-shadow: var(--scn-shadow, 0 6px 32px rgba(0, 0, 0, .18));
	border-radius: var(--scn-radius, 12px);
	box-sizing: border-box;
	animation: scn-in .3s cubic-bezier(.2, .8, .3, 1);
}

.scn-notice *,
.scn-reopen * {
	box-sizing: border-box;
}

.scn-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--scn-gap);
	padding: var(--scn-pad-y) var(--scn-pad-x);
	max-width: var(--scn-max-width, 1100px);
	margin: 0 auto;
	width: 100%;
}

/* Row layouts only: the basis is a WIDTH, so the text column can shrink and the
   buttons keep their space. */
.scn-body {
	flex: 1 1 320px;
	min-width: 0;
}

.scn-heading {
	margin: 0 0 3px;
	font-weight: 700;
	font-size: 1.08em;
	color: inherit;
}

.scn-text {
	margin: 0;
	color: inherit;
}

.scn-text p {
	margin: 0 0 .5em;
}

.scn-text a,
.scn-notice a {
	color: var(--scn-link, #6b3fa0);
	text-decoration: underline;
}

/* --- Buttons --- */

.scn-actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.scn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--scn-btn-h, 34px);
	padding: 0 var(--scn-btn-pad, 14px);
	border: 0;
	border-radius: var(--scn-btn-radius, 999px);
	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: filter .15s ease, transform .1s ease;
}

.scn-btn:hover {
	filter: brightness(.93);
}

.scn-btn:active {
	transform: translateY(1px);
}

.scn-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.scn-btn-accept {
	background: var(--scn-accept-bg, #6b3fa0);
	color: var(--scn-accept-text, #fff);
}

.scn-btn-decline {
	background: var(--scn-decline-bg, #f3f4f6);
	color: var(--scn-decline-text, #1f2937);
}

.scn-btn-prefs,
.scn-btn-save {
	background: var(--scn-prefs-bg, transparent);
	color: var(--scn-prefs-text, inherit);
	box-shadow: inset 0 0 0 1px currentColor;
}

/* --- Category list --- */

.scn-prefs {
	position: relative;
	flex: 1 1 100%;
	display: grid;
	gap: 12px;
	padding: 16px 0 4px;
}

/* Divider that picks up the text color without washing it over the whole block. */
.scn-prefs::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: currentColor;
	opacity: .18;
}

.scn-cat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	cursor: pointer;
}

.scn-cat-head input[disabled] {
	cursor: not-allowed;
}

.scn-cat-desc {
	margin: 4px 0 0 28px;
	font-size: .92em;
	opacity: .8;
}

[dir="rtl"] .scn-cat-desc,
.scn-root[dir="rtl"] .scn-cat-desc {
	margin: 4px 28px 0 0;
}

/* --- Layouts --- */

.scn-layout-bar-bottom .scn-notice {
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 0;
}

.scn-layout-bar-top .scn-notice {
	left: 0;
	right: 0;
	top: 0;
	border-radius: 0;
}

.scn-layout-box-left .scn-notice,
.scn-layout-box-right .scn-notice {
	bottom: 20px;
	width: min(360px, calc(100vw - 40px));
	max-width: none;
}

.scn-layout-box-left .scn-notice {
	left: 20px;
}

.scn-layout-box-right .scn-notice {
	right: 20px;
}

.scn-layout-box-left .scn-inner,
.scn-layout-box-right .scn-inner,
.scn-layout-modal .scn-inner {
	flex-direction: column;
	align-items: stretch;
}

/* In a column, flex-basis is a HEIGHT — a fixed basis would reserve that much
   space no matter how short the text is. `auto` makes every block exactly as
   tall as its own content. */
.scn-layout-box-left .scn-body,
.scn-layout-box-right .scn-body,
.scn-layout-modal .scn-body,
.scn-layout-box-left .scn-prefs,
.scn-layout-box-right .scn-prefs,
.scn-layout-modal .scn-prefs {
	flex: 0 0 auto;
}

.scn-layout-box-left .scn-actions,
.scn-layout-box-right .scn-actions,
.scn-layout-modal .scn-actions {
	justify-content: flex-end;
}

.scn-layout-modal .scn-notice {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100vw - 40px));
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

/* --- Reopen button --- */

.scn-reopen {
	position: fixed;
	bottom: 16px;
	inset-inline-start: 16px;
	z-index: 999997;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--scn-btn-radius, 999px);
	background: var(--scn-bg, #fff);
	color: var(--scn-text, #1f2937);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
	font: inherit;
	font-size: .9em;
	cursor: pointer;
}

.scn-reopen:hover {
	filter: brightness(.95);
}

/* --- Motion --- */

@keyframes scn-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.scn-layout-modal .scn-notice {
	animation: none;
}

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

@media (prefers-reduced-motion: reduce) {
	.scn-notice,
	.scn-overlay {
		animation: none;
	}
}

/* --- Small screens --- */

@media (max-width: 640px) {
	.scn-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	/* Every layout stacks on small screens, so the same column rule applies. */
	.scn-body,
	.scn-prefs {
		flex: 0 0 auto;
	}

	.scn-actions {
		width: 100%;
	}

	.scn-actions .scn-btn {
		flex: 1 1 140px;
	}

	.scn-layout-box-left .scn-notice,
	.scn-layout-box-right .scn-notice {
		left: 10px;
		right: 10px;
		width: auto;
	}

	.scn-reopen .scn-reopen-text {
		display: none;
	}
}

/* =====================================================================
   Theme armor

   Themes style bare <button> and <a> elements, and many do it with
   !important, which beats specificity no matter how the selector is
   written. The only thing that reliably wins is !important here too.

   This does NOT lock the design down: every value below reads a CSS
   variable that the settings screen writes, so colors, radius and size
   all stay fully adjustable. Custom CSS that needs to beat this block
   should use !important as well.

   Keep this block last.
   ================================================================== */

#scn-root .scn-notice {
	background: var(--scn-bg, #fff) !important;
	color: var(--scn-text, #1f2937) !important;
	box-sizing: border-box !important;
}

#scn-root .scn-notice:focus {
	outline: none !important;
}

#scn-root .scn-heading,
#scn-root .scn-text,
#scn-root .scn-cat-label,
#scn-root .scn-cat-desc {
	color: inherit !important;
}

#scn-root .scn-text a {
	color: var(--scn-link, #6b3fa0) !important;
	text-decoration: underline !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

#scn-root .scn-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: var(--scn-btn-h, 34px) !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 var(--scn-btn-pad, 14px) !important;
	border: 0 !important;
	border-radius: var(--scn-btn-radius, 999px) !important;
	box-shadow: none !important;
	outline: none !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
}

#scn-root .scn-btn-accept {
	background: var(--scn-accept-bg, #6b3fa0) !important;
	color: var(--scn-accept-text, #fff) !important;
}

#scn-root .scn-btn-decline {
	background: var(--scn-decline-bg, #f3f4f6) !important;
	color: var(--scn-decline-text, #1f2937) !important;
}

/* The outline buttons draw their border with an inset shadow, so it has to be
   re-applied after the box-shadow reset above. */
#scn-root .scn-btn-prefs,
#scn-root .scn-btn-save {
	background: var(--scn-prefs-bg, transparent) !important;
	color: var(--scn-prefs-text, inherit) !important;
	box-shadow: inset 0 0 0 1px currentColor !important;
}

/* One focus ring — ours — and only for keyboard users. */
#scn-root .scn-btn:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

#scn-root .scn-reopen {
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 0 !important;
	outline: none !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	background: var(--scn-bg, #fff) !important;
	color: var(--scn-text, #1f2937) !important;
	cursor: pointer !important;
}

#scn-root .scn-reopen:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* Must be the very last rule in the file. The armor above sets `display` with
   !important under an ID selector, which would otherwise out-rank the earlier
   [hidden] rule and force the category panel, the Save button and the reopen
   button to stay on screen. Equal specificity, declared later, so this wins. */
#scn-root [hidden] {
	display: none !important;
}