/*!
 * Cookie Consent Suite — frontend styles.
 *
 * Theme-agnostic. Every selector is namespaced under .ccs-* and the toggle
 * widget specifically resets every property the host theme might override
 * (background-image, box-shadow, border, padding, …). That's the fix for
 * "toggles render as crescent-moons in the preference center" — host themes
 * had been bleeding gradient/box-shadow into our pill track.
 *
 * v1.0.4 CSS fixes:
 *  - Added .ccs-overlay (dark backdrop) — JS creates this as a separate element
 *    but no CSS existed for it, so it was invisible and non-blocking.
 *  - .ccs-modal is now the white card (positioned/sized), not the full-screen
 *    overlay wrapper. The old combined overlay+card pattern assumed a nested
 *    .ccs-modal__inner that JS never creates.
 *  - Added .ccs-open visibility toggling for both overlay and modal (JS uses
 *    classList.add/remove('ccs-open') to show/hide; without these rules the
 *    modal could not be hidden after closing).
 *  - Renamed .ccs-modal__head → .ccs-modal__header, .ccs-modal__foot → .ccs-modal__footer
 *    to match the class names emitted by buildModal() in frontend.js.
 *  - Renamed .ccs-banner__msg → .ccs-banner__message to match buildBanner().
 *  - Renamed .ccs-banner__btn → .ccs-btn to match the button elements built in
 *    buildBanner() (which use className 'ccs-btn ccs-btn--*').
 *  - Renamed .ccs-cat__row → .ccs-cat__head to match buildModal() category rows.
 *  - Renamed layout modifier .ccs-layout-popup/.ccs-layout-box →
 *    .ccs-banner--popup/.ccs-banner--box to match the 'ccs-banner--{layout}'
 *    class pattern applied in buildBanner().
 */

.ccs-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	box-sizing: border-box;
	max-width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-shadow: 0 -2px 12px rgba(0,0,0,0.14);
}
.ccs-banner.ccs-pos-top { bottom: auto; top: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.14); }
.ccs-banner.ccs-banner--popup,
.ccs-banner.ccs-banner--box {
	left: 24px; right: auto; bottom: 24px; max-width: 490px; border-radius: 8px;
}
.ccs-banner.ccs-pos-bottom-right { left: auto; right: 24px; }
.ccs-banner.ccs-pos-bottom-left  { left: 24px; right: auto; }
.ccs-banner.ccs-pos-top-right    { top: 24px; bottom: auto; left: auto; right: 24px; }
.ccs-banner.ccs-pos-top-left     { top: 24px; bottom: auto; left: 24px; right: auto; }
.ccs-banner.ccs-pos-center {
	top: 50%; left: 50%; right: auto; bottom: auto;
	transform: translate(-50%, -50%);
	max-width: 490px;
}

.ccs-banner__inner { padding: 16px 20px; }
.ccs-banner__message   { margin: 0 0 12px; line-height: 1.5; }
.ccs-banner__message a { color: inherit; text-decoration: underline; }

.ccs-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ccs-btn {
	border: 0;
	cursor: pointer;
	padding: 8px 14px;
	font-size: 14px;
	border-radius: 6px;
	font-weight: 500;
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
	box-shadow: none;
}
.ccs-btn:focus-visible {
	outline: 2px solid rgba(255,255,255,0.85);
	outline-offset: 2px;
}

/* ─── Modal overlay (dark backdrop + flex centering container) ─────────
   The overlay is now a flex centering container; the modal card lives
   INSIDE it. This is theme-proof: even if a host theme overrides the
   modal's own positioning, it stays centered because the overlay does
   the centering.
   We use html body for high specificity to beat host-theme rules. */
html body .ccs-overlay {
	display: none !important;
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(15, 23, 42, 0.55) !important;
	z-index: 999999 !important;
	box-sizing: border-box !important;
	padding: 24px !important;
	margin: 0 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
}
html body .ccs-overlay.ccs-open {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ─── Modal / preference center (white card) ────────────────────────── */
html body .ccs-modal {
	display: none !important;
	box-sizing: border-box !important;
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	margin: 0 auto !important;
	transform: none !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: 700px !important;
	height: auto !important;
	max-height: calc(100vh - 48px) !important;
	background: #fff !important;
	background-image: none !important;
	color: #111827 !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 0 !important;
	overflow: hidden !important;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	flex-direction: column !important;
	z-index: 1000000 !important;
}
html body .ccs-overlay.ccs-open .ccs-modal,
html body .ccs-modal.ccs-open {
	display: flex !important;
}
html body .ccs-modal__header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 16px 20px !important;
	border-bottom: 1px solid #e5e7eb !important;
	flex-shrink: 0 !important;
	background: transparent !important;
	margin: 0 !important;
}
html body .ccs-modal__header h2 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #111827 !important;
	line-height: 1.3 !important;
	border: 0 !important;
	background: transparent !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
html body .ccs-modal__close {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	cursor: pointer !important;
	font-size: 22px !important;
	line-height: 1 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	color: #6b7280 !important;
	padding: 4px 8px !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
/* Body scrolls internally; flex:1 + min-height:0 lets it shrink below
   its content size so the footer always stays visible. */
html body .ccs-modal__body {
	padding: 16px 20px !important;
	overflow: auto !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	background: transparent !important;
	color: #374151 !important;
	margin: 0 !important;
}
html body .ccs-modal__footer {
	padding: 12px 20px !important;
	border-top: 1px solid #e5e7eb !important;
	display: flex !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	justify-content: flex-end !important;
	flex-shrink: 0 !important;
	background: transparent !important;
	margin: 0 !important;
}

html body .ccs-modal .ccs-cat        { padding: 12px 0 !important; border-bottom: 1px solid #f1f5f9 !important; margin: 0 !important; display: block !important; }
html body .ccs-modal .ccs-cat:last-child { border-bottom: 0 !important; }
html body .ccs-modal .ccs-cat__head  { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; }
html body .ccs-modal .ccs-cat__name  { font-weight: 600 !important; flex: 1 1 auto !important; color: #111827 !important; margin: 0 !important; }
html body .ccs-modal .ccs-cat__desc  { font-size: 14px !important; color: #4b5563 !important; margin-top: 6px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Toggle (button rendered as a pill-shaped switch).
   These styles use !important on the visual properties because host themes
   routinely apply `button { background-image: linear-gradient(...); box-shadow: ...; }`
   and without the override the track loses its pill shape and the knob
   appears as a stray crescent — exactly what was happening in the
   "Cookie preferences" review modal.
   ═══════════════════════════════════════════════════════════════════════ */

.ccs-toggle {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;

	/* Track shape & color */
	display: inline-block !important;
	width: 40px !important;
	height: 22px !important;
	min-width: 40px !important;
	min-height: 22px !important;
	max-width: 40px !important;
	max-height: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	background-color: #d1d5db !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: transparent !important;
	font: inherit !important;
	line-height: 1 !important;

	position: relative !important;
	flex-shrink: 0;
	cursor: pointer;
	transition: background-color .2s !important;
	vertical-align: middle;
	overflow: visible !important;
}
.ccs-toggle.ccs-on {
	background-color: #2563eb !important;
}
.ccs-toggle.ccs-required {
	background-color: #6b7280 !important;
	opacity: .8 !important;
	cursor: not-allowed;
}

.ccs-toggle::before { content: none !important; }
.ccs-toggle::after {
	content: "" !important;
	position: absolute !important;
	top: 1px !important;
	left: 1px !important;
	width: 18px !important;
	height: 18px !important;
	background: #fff !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
	transition: transform .2s !important;
	display: block !important;
}
.ccs-toggle.ccs-on::after {
	transform: translateX(18px) !important;
}
.ccs-toggle:focus-visible {
	outline: 2px solid rgba(37, 99, 235, 0.6) !important;
	outline-offset: 2px !important;
}
.ccs-toggle:hover {
	filter: brightness(0.96);
}

/* ─── Tabs (Cookies / Vendors switcher inside modal) ──────────────────── */
.ccs-tabs {
	display: none;
	gap: 4px;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 12px;
}
.ccs-tabs__btn {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 8px 12px !important;
	cursor: pointer;
	color: #4b5563 !important;
	border-bottom: 2px solid transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font: inherit !important;
}
.ccs-tabs__btn.ccs-active {
	color: #111827 !important;
	border-bottom-color: #2563eb !important;
	font-weight: 600 !important;
}
.ccs-tabs__btn:focus-visible {
	outline: 2px solid rgba(37, 99, 235, 0.6) !important;
	outline-offset: 2px;
	border-radius: 6px;
}

/* ─── Vendor list ──────────────────────────────────────────────────────── */
.ccs-vendors  { max-height: 320px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
.ccs-vendor   { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid #f3f4f6; }
.ccs-vendor:first-child { border-top: 0; }
.ccs-vendor__name  { flex: 1; font-size: 14px; color: #111827; }
.ccs-vendor__purps { font-size: 12px; color: #6b7280; }

/* ─── Floating "manage cookies" handle ─────────────────────────────────── */
.ccs-reopen {
	position: fixed;
	bottom: 16px;
	left: 16px;
	z-index: 999998;
	background-color: #1f2937 !important;
	color: #f9fafb !important;
	border: 0 !important;
	background-image: none !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	padding: 10px 14px !important;
	border-radius: 999px !important;
	cursor: pointer;
	font-size: 13px !important;
	font-family: inherit !important;
	font-weight: 500;
}
.ccs-reopen:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: 2px;
}