/* Consent Gate — front-end styles. Deliberately plain so they inherit the
   host theme rather than fight it. */

.cg-root {
	--cg-bg: #ffffff;
	--cg-fg: #16181d;
	--cg-muted: #5b6270;
	--cg-border: #d9dde5;
	--cg-accent: #1a5fd0;
	--cg-accent-fg: #ffffff;
	--cg-radius: 10px;
	--cg-shadow: 0 8px 30px rgba(16, 20, 28, 0.18);
	font-size: 15px;
	line-height: 1.5;
}

.cg-root[hidden],
.cg-root [hidden] {
	display: none !important;
}

.cg-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(12, 15, 22, 0.55);
	z-index: 999998;
}

/* --- banner ---------------------------------------------------------- */

.cg-banner {
	position: fixed;
	z-index: 999999;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--cg-bg);
	color: var(--cg-fg);
	border-top: 1px solid var(--cg-border);
	box-shadow: var(--cg-shadow);
}

.cg-layout-modal .cg-banner {
	left: 50%;
	right: auto;
	bottom: 24px;
	transform: translateX(-50%);
	max-width: 560px;
	width: calc(100% - 32px);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius);
}

.cg-banner-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px 20px;
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}

.cg-layout-modal .cg-banner-inner {
	display: block;
}

.cg-copy {
	flex: 1 1 340px;
	min-width: 0;
}

.cg-title {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cg-fg);
}

.cg-text {
	margin: 0;
	color: var(--cg-muted);
	font-size: 0.92rem;
}

.cg-link {
	color: var(--cg-accent);
	text-decoration: underline;
}

.cg-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.cg-layout-modal .cg-actions {
	margin-top: 16px;
}

/* --- buttons --------------------------------------------------------- */

.cg-btn {
	appearance: none;
	border: 1px solid var(--cg-border);
	background: #f4f6fa;
	color: var(--cg-fg);
	border-radius: 8px;
	padding: 10px 16px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.2;
}

.cg-btn:hover {
	background: #e9edf4;
}

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

.cg-btn-primary {
	background: var(--cg-accent);
	border-color: var(--cg-accent);
	color: var(--cg-accent-fg);
}

.cg-btn-primary:hover {
	filter: brightness(1.08);
	background: var(--cg-accent);
}

/* Button emphasis.
   equal  — Accept All and Reject All get identical weight. Several EU
            regulators have treated an accept button that is more prominent
            than its reject counterpart as invalid consent, so this is the
            default.
   accent — Accept All carries the accent colour. Check this against the
            guidance that applies where your visitors are before using it. */

.cg-emphasis-equal .cg-btn[data-cg-action="accept"],
.cg-emphasis-equal .cg-btn[data-cg-action="reject"] {
	background: var(--cg-accent);
	border-color: var(--cg-accent);
	color: var(--cg-accent-fg);
}

.cg-emphasis-equal .cg-btn[data-cg-action="accept"]:hover,
.cg-emphasis-equal .cg-btn[data-cg-action="reject"]:hover {
	background: var(--cg-accent);
	filter: brightness(1.08);
}

.cg-inline-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--cg-accent);
	text-decoration: underline;
	cursor: pointer;
}

/* --- preferences panel ----------------------------------------------- */

.cg-panel {
	position: fixed;
	z-index: 999999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(600px, calc(100% - 32px));
	max-height: min(80vh, 720px);
	overflow: auto;
	background: var(--cg-bg);
	color: var(--cg-fg);
	border-radius: var(--cg-radius);
	box-shadow: var(--cg-shadow);
}

.cg-panel-inner {
	padding: 22px;
}

.cg-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 8px;
}

.cg-close {
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--cg-muted);
	padding: 0 4px;
}

.cg-cats {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.cg-cat {
	border-top: 1px solid var(--cg-border);
	padding: 14px 0;
}

.cg-cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cg-cat-name {
	font-weight: 600;
}

.cg-cat-always {
	font-size: 0.8rem;
	color: var(--cg-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cg-cat-desc {
	margin: 6px 0 0;
	color: var(--cg-muted);
	font-size: 0.88rem;
}

/* switch */

.cg-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.cg-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.cg-switch-track {
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: #c8cedb;
	position: relative;
	transition: background 0.15s ease;
	flex: 0 0 auto;
}

.cg-switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}

.cg-switch input:checked + .cg-switch-track {
	background: var(--cg-accent);
}

.cg-switch input:checked + .cg-switch-track::after {
	transform: translateX(18px);
}

.cg-switch input:focus-visible + .cg-switch-track {
	outline: 2px solid var(--cg-accent);
	outline-offset: 2px;
}

.cg-panel-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--cg-border);
}

/* --- revisit button -------------------------------------------------- */

.cg-revisit {
	position: fixed;
	z-index: 999997;
	background: #ffffff;
	color: #16181d;
	border: 1px solid #d9dde5;
	border-radius: 999px;
	padding: 9px 15px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(16, 20, 28, 0.14);
}

.cg-bottom-left { bottom: 16px; left: 16px; }
.cg-bottom-right { bottom: 16px; right: 16px; }
.cg-top-left { top: 16px; left: 16px; }
.cg-top-right { top: 16px; right: 16px; }

/* --- blocked embed placeholder --------------------------------------- */

.cg-embed-placeholder {
	border: 1px dashed #c8cedb;
	border-radius: 10px;
	background: #f7f9fc;
	padding: 22px;
	text-align: center;
	color: #5b6270;
	font-size: 0.9rem;
}

.cg-embed-notice {
	margin: 0 0 12px;
}

/* --- debug panel ----------------------------------------------------- */

.cg-debug {
	position: fixed;
	z-index: 1000000;
	right: 12px;
	top: 12px;
	width: min(440px, calc(100% - 24px));
	max-height: 60vh;
	overflow: auto;
	background: #12151c;
	color: #e7ebf3;
	font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	padding: 12px 14px;
}

.cg-debug-head {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	margin-bottom: 6px;
}

.cg-debug-close {
	background: none;
	border: 0;
	color: #e7ebf3;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.cg-debug-meta {
	color: #9aa4b8;
	margin-bottom: 4px;
}

.cg-debug-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	border-top: 1px solid #2a3040;
}

.cg-debug-list li {
	padding: 5px 0;
	border-bottom: 1px solid #1d2230;
	word-break: break-all;
}

.cg-debug-blocked code { color: #ff8e8e; }
.cg-debug-allowed code { color: #7fe0a4; }
.cg-debug-cat { color: #ffd479; }
.cg-debug-via { color: #8fb8ff; }
.cg-debug-target { color: #c9d1e2; }

@media (max-width: 640px) {
	.cg-banner-inner { display: block; }
	.cg-actions { margin-top: 14px; }
	.cg-btn { width: 100%; }
}

@media (prefers-color-scheme: dark) {
	.cg-root {
		--cg-bg: #191c23;
		--cg-fg: #eef1f7;
		--cg-muted: #a4acbd;
		--cg-border: #2e3442;
		--cg-accent: #6f9bff;
		--cg-accent-fg: #0d1018;
	}
	/* :not() keeps this from overriding .cg-btn-primary, which is declared
	   earlier and would otherwise lose on source order. */
	.cg-btn:not(.cg-btn-primary) { background: #242a36; }
	.cg-btn:not(.cg-btn-primary):hover { background: #2c3340; }
	.cg-revisit {
		background: #191c23;
		color: #eef1f7;
		border-color: #2e3442;
	}
	.cg-embed-placeholder {
		background: #1d212a;
		border-color: #2e3442;
		color: #a4acbd;
	}
}