/* Consent Guard - frontend banner + preference centre styles. */

:root {
	--cg-banner-bg: #ffffff;
	--cg-banner-text: #1d2327;
	--cg-accept-bg: #2563eb;
	--cg-accept-text: #ffffff;
	--cg-reject-bg: #ffffff;
	--cg-reject-text: #2563eb;
	--cg-settings-bg: #ffffff;
	--cg-settings-text: #2563eb;
	--cg-toggle-on: #2563eb;
	--cg-radius: 12px;
	--cg-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
	--cg-border: #e2e4e7;
}

.cg-banner,
.cg-pref-overlay,
.cg-revisit {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.cg-banner *,
.cg-pref-overlay * {
	box-sizing: border-box;
}

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

.cg-banner {
	position: fixed;
	z-index: 2147483600;
	background: var(--cg-banner-bg);
	color: var(--cg-banner-text);
	border-radius: var(--cg-radius);
	box-shadow: var(--cg-shadow);
	padding: 20px;
	max-width: 440px;
	width: calc(100% - 40px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cg-banner.cg-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Positions */
.cg-pos-bottom_left { bottom: 20px; left: 20px; }
.cg-pos-bottom_right { bottom: 20px; right: 20px; }
.cg-pos-top_left { top: 20px; left: 20px; }
.cg-pos-top_right { top: 20px; right: 20px; }
.cg-pos-top { top: 20px; bottom: auto; }
.cg-pos-bottom { bottom: 20px; top: auto; }

.cg-banner-main { min-width: 0; }

/* Layout: full-width banner */
.cg-layout-banner {
	max-width: none;
	width: calc(100% - 40px);
	left: 20px;
	right: 20px;
}
.cg-layout-banner .cg-banner-body {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.cg-layout-banner .cg-banner-main {
	display: flex;
	flex-direction: column;
	flex: 1 1 260px;
}
.cg-layout-banner .cg-banner-desc { margin-bottom: 0; }
.cg-layout-banner .cg-banner-actions { margin-left: auto; flex: none; }

/* Layout: centered popup */
.cg-layout-popup {
	top: 50%;
	left: 50%;
	bottom: auto;
	right: auto;
	transform: translate(-50%, -48%);
}
.cg-layout-popup.cg-visible { transform: translate(-50%, -50%); }

.cg-banner-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--cg-banner-text);
}

.cg-banner-desc {
	margin-bottom: 16px;
	color: var(--cg-banner-text);
	opacity: 0.85;
}

.cg-banner-desc a { color: var(--cg-accept-bg); }
.cg-policy-link { color: var(--cg-accept-bg); text-decoration: underline; font-weight: 600; white-space: nowrap; }

.cg-banner-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

/* ---------------- Buttons ---------------- */

.cg-btn {
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: filter 0.15s ease, background 0.15s ease;
}
.cg-btn:hover { filter: brightness(0.96); }

.cg-btn-primary {
	background: var(--cg-accept-bg);
	color: var(--cg-accept-text);
}

.cg-btn-secondary {
	background: var(--cg-reject-bg);
	color: var(--cg-reject-text);
	border-color: var(--cg-reject-text);
}

.cg-btn-link {
	background: transparent;
	color: var(--cg-settings-text);
	padding-left: 6px;
	padding-right: 6px;
}
.cg-btn-link:hover { text-decoration: underline; filter: none; }

/* ---------------- Preference centre ---------------- */

.cg-pref-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483601;
	background: rgba(15, 23, 42, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}
.cg-pref-overlay.cg-visible { opacity: 1; visibility: visible; }

.cg-pref-panel {
	background: var(--cg-banner-bg);
	color: var(--cg-banner-text);
	width: 100%;
	max-width: 720px;
	max-height: 86vh;
	border-radius: var(--cg-radius);
	box-shadow: var(--cg-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Sidebar layout */
.cg-pref-sidebar { justify-content: flex-start; }
.cg-pref-sidebar .cg-pref-panel {
	max-width: 420px;
	height: 100%;
	max-height: 100%;
	border-radius: 0;
}

/* Push-down layout */
.cg-pref-pushdown { align-items: flex-start; background: transparent; }
.cg-pref-pushdown .cg-pref-panel {
	max-width: none;
	border-radius: 0 0 var(--cg-radius) var(--cg-radius);
	box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

.cg-pref-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--cg-border);
}
.cg-pref-header h2 { margin: 0; font-size: 18px; font-weight: 700; }

.cg-pref-close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
}

.cg-pref-intro {
	padding: 16px 22px;
	color: var(--cg-banner-text);
	opacity: 0.85;
	overflow-y: auto;
}

.cg-cat-list {
	padding: 0 22px;
	overflow-y: auto;
	flex: 1;
}

.cg-cat { border-bottom: 1px solid var(--cg-border); }
.cg-cat:last-child { border-bottom: none; }

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

.cg-cat-toggle-acc {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: var(--cg-banner-text);
	padding: 0;
}
.cg-cat-caret { transition: transform 0.15s ease; display: inline-block; margin-left: 8px; }
.cg-cat.cg-open .cg-cat-caret { transform: rotate(90deg); }

.cg-always-active { color: #16a34a; font-weight: 600; font-size: 13px; }

.cg-cat-desc {
	max-height: 0;
	overflow: hidden;
	opacity: 0.85;
	transition: max-height 0.2s ease, padding 0.2s ease;
	padding: 0;
}
.cg-cat.cg-open .cg-cat-desc { max-height: 400px; padding: 0 0 14px; }

.cg-pref-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
	padding: 16px 22px;
	border-top: 1px solid var(--cg-border);
	flex-wrap: wrap;
}

/* ---------------- Switch ---------------- */

.cg-switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.cg-switch input { opacity: 0; width: 0; height: 0; }
.cg-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: #cbd5e1;
	border-radius: 24px;
	transition: background 0.15s ease;
}
.cg-slider::before {
	content: "";
	position: absolute;
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s ease;
}
.cg-switch input:checked + .cg-slider { background: var(--cg-toggle-on); }
.cg-switch input:checked + .cg-slider::before { transform: translateX(18px); }

/* ---------------- Revisit button ---------------- */

.cg-revisit {
	position: fixed;
	z-index: 2147483590;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--cg-accept-bg);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,0.22);
	font-size: 20px;
	display: none;
	align-items: center;
	justify-content: center;
}
.cg-revisit.cg-visible { display: flex; }
.cg-revisit-icon { line-height: 1; }

/* ---------------- Blocked content placeholder ---------------- */

.cg-blocked-placeholder {
	background: #f3f4f6;
	border: 1px dashed #cbd5e1;
	border-radius: var(--cg-radius);
	padding: 24px;
	text-align: center;
	color: #4b5563;
}
.cg-blocked-placeholder button {
	margin-top: 10px;
	background: var(--cg-accept-bg);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	cursor: pointer;
}

@media (max-width: 600px) {
	.cg-banner { max-width: none; width: calc(100% - 24px); left: 12px; right: 12px; }
	.cg-pos-bottom_left, .cg-pos-bottom_right { bottom: 12px; }
	.cg-pos-top_left, .cg-pos-top_right { top: 12px; }
	.cg-banner-actions .cg-btn { flex: 1; text-align: center; }
}