/* Cookie Consent WP — styles */

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
	--cckwp-accent:        #1a73e8;
	--cckwp-accent-dark:   #1557b0;
	--cckwp-on-accent:     #ffffff;
	--cckwp-surface:       #ffffff;
	--cckwp-surface-2:     #f8fafc;
	--cckwp-border:        #e2e8f0;
	--cckwp-text:          #0f172a;
	--cckwp-text-muted:    #64748b;
	--cckwp-radius:        16px;
	--cckwp-shadow:        0 25px 50px -12px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
	--cckwp-shadow-sm:     0 4px 16px rgba(26,115,232,.35);
	--cckwp-toggle-off:    #bdc1c6;
	--cckwp-toggle-on:     #22c55e;
	--cckwp-z:             99998; /* one below CurbCut's 99999 */
}

@media (prefers-color-scheme: dark) {
	:root {
		--cckwp-surface:    #2d2d2d;
		--cckwp-surface-2:  #3a3a3a;
		--cckwp-border:     #555;
		--cckwp-text:       #e8eaed;
		--cckwp-text-muted: #9aa0a6;
		--cckwp-shadow:     0 25px 50px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.15);
	}
}

/* ── Root container ─────────────────────────────────────────────────────────── */
#cckwp-root {
	position: fixed;
	z-index: var(--cckwp-z);
	bottom: 1.5rem;
	right:  1.5rem;
}

#cckwp-root.pos-bottom-right { bottom: 1.5rem; right:  1.5rem; left: auto; top: auto; }
#cckwp-root.pos-bottom-left  { bottom: 1.5rem; left:   1.5rem; right: auto; top: auto; }
#cckwp-root.pos-top-right    { top:    1.5rem; right:  1.5rem; bottom: auto; left: auto; }
#cckwp-root.pos-top-left     { top:    1.5rem; left:   1.5rem; bottom: auto; right: auto; }

/* ── hidden attribute safety (some themes override [hidden]) ────────────────── */
#cckwp-banner[hidden],
#cckwp-panel[hidden],
#cckwp-bubble[hidden],
#cckwp-gpc-notice[hidden],
#cckwp-ccpa-section[hidden] { display: none !important; }

/* ── Screen-reader only ─────────────────────────────────────────────────────── */
.cckwp-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ── Bubble button ──────────────────────────────────────────────────────────── */
#cckwp-bubble-wrap {
	position: relative;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#cckwp-bubble {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .18s ease, filter .18s ease;
	-webkit-tap-highlight-color: transparent;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

#cckwp-bubble:hover {
	transform: scale(1.12);
	filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
}

#cckwp-bubble:focus-visible {
	outline: 3px solid #ffbf00;
	outline-offset: 4px;
}

#cckwp-bubble:active {
	transform: scale(0.95);
}

/* ── CurbCut docking — bubble stacking ──────────────────────────────────────── */
/*
   CurbCut (#oawp-root) sits at 1.5rem from its edge at z-index 99999.
   We offset our button by 60px (CurbCut button height) + 12px gap.
   The docking class is applied by JS when #oawp-root is detected.
*/

body.cckwp-docked-bottom-right #cckwp-root,
body.cckwp-docked-bottom-left  #cckwp-root {
	bottom: calc(1.5rem + 60px + 12px);
}

body.cckwp-docked-top-right #cckwp-root,
body.cckwp-docked-top-left  #cckwp-root {
	top: calc(1.5rem + 60px + 12px);
}

/* Keep horizontal alignment matching CurbCut */
body.cckwp-docked-bottom-right #cckwp-root { right: 1.5rem; left: auto; }
body.cckwp-docked-bottom-left  #cckwp-root { left:  1.5rem; right: auto; }
body.cckwp-docked-top-right    #cckwp-root { right: 1.5rem; left: auto; }
body.cckwp-docked-top-left     #cckwp-root { left:  1.5rem; right: auto; }

/* ── CurbCut panel-open dodge ───────────────────────────────────────────────── */
/*
   When our panel is open (right side), slide CurbCut to the opposite corner
   so it doesn't sit underneath the panel edge.
*/
#oawp-root {
	transition: left .28s cubic-bezier(.4,0,.2,1), right .28s cubic-bezier(.4,0,.2,1) !important;
}

/* Panel on right → CurbCut moves to left */
body.cckwp-panel-open.cckwp-docked-bottom-right #oawp-root,
body.cckwp-panel-open.cckwp-docked-top-right    #oawp-root,
body.cckwp-panel-open:not([class*="cckwp-docked"]) #oawp-root {
	right: auto !important;
	left:  1.5rem !important;
}

/* Panel on left → CurbCut moves to right */
body.cckwp-panel-open.cckwp-docked-bottom-left #oawp-root,
body.cckwp-panel-open.cckwp-docked-top-left    #oawp-root {
	left:  auto !important;
	right: 1.5rem !important;
}

/* ── Consent banner ─────────────────────────────────────────────────────────── */
#cckwp-banner {
	position: fixed;
	left: 0;
	right: 0;
	z-index: var(--cckwp-z);
	background: var(--cckwp-surface);
	border-top: 1px solid var(--cckwp-border);
	box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
	padding: 1.25rem 1.5rem;
	animation: cckwp-slide-up .25s ease;
}

#cckwp-banner.banner-bottom {
	bottom: 0;
	border-top: 1px solid var(--cckwp-border);
	border-bottom: none;
	animation: cckwp-slide-up .25s ease;
}

#cckwp-banner.banner-top {
	top: 0;
	border-bottom: 1px solid var(--cckwp-border);
	border-top: none;
	animation: cckwp-slide-down .25s ease;
}

@keyframes cckwp-slide-up   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cckwp-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.cckwp-banner-inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.cckwp-banner-text {
	flex: 1 1 300px;
}

.cckwp-banner-heading {
	margin: 0 0 .25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--cckwp-text);
	line-height: 1.3;
}

.cckwp-banner-body {
	margin: 0 0 .5rem;
	font-size: .875rem;
	color: var(--cckwp-text-muted);
	line-height: 1.5;
}

.cckwp-banner-links {
	font-size: .8125rem;
}

.cckwp-banner-links a {
	color: var(--cckwp-accent);
	text-decoration: underline;
}

.cckwp-banner-actions {
	display: flex;
	gap: .625rem;
	flex-wrap: wrap;
	align-items: center;
	flex-shrink: 0;
}

/* ── Preference panel ───────────────────────────────────────────────────────── */
#cckwp-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 400px;
	max-width: 100vw;
	z-index: calc(var(--cckwp-z) + 1);
	background: var(--cckwp-surface);
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	box-shadow: -4px 0 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4,0,.2,1);
}

#cckwp-panel:not([hidden]) {
	transform: translateX(0);
}

/* Left-side panel when button is on the left */
body.cckwp-docked-bottom-left  #cckwp-panel,
body.cckwp-docked-top-left     #cckwp-panel,
#cckwp-root.pos-bottom-left    #cckwp-panel,
#cckwp-root.pos-top-left       #cckwp-panel {
	left: 0;
	right: auto;
	box-shadow: 4px 0 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
	transform: translateX(-100%);
}

body.cckwp-docked-bottom-left  #cckwp-panel:not([hidden]),
body.cckwp-docked-top-left     #cckwp-panel:not([hidden]),
#cckwp-root.pos-bottom-left    #cckwp-panel:not([hidden]),
#cckwp-root.pos-top-left       #cckwp-panel:not([hidden]) {
	transform: translateX(0);
}

.cckwp-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.25rem 1rem;
	border-bottom: 1px solid var(--cckwp-border);
	flex-shrink: 0;
}

.cckwp-panel-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--cckwp-text);
}

.cckwp-panel-close {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--cckwp-text-muted);
	transition: background .15s ease;
}

.cckwp-panel-close:hover   { background: var(--cckwp-surface-2); }
.cckwp-panel-close:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; }

.cckwp-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 1.25rem;
	-webkit-overflow-scrolling: touch;
}

.cckwp-panel-intro {
	margin: 0 0 1.25rem;
	font-size: .875rem;
	color: var(--cckwp-text-muted);
	line-height: 1.5;
}

.cckwp-panel-footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--cckwp-border);
	flex-shrink: 0;
}

.cckwp-consent-date {
	margin: 0 0 .75rem;
	font-size: .75rem;
	color: var(--cckwp-text-muted);
}

.cckwp-panel-footer-links {
	font-size: .8125rem;
	margin-bottom: .875rem;
}

.cckwp-panel-footer-links a {
	color: var(--cckwp-accent);
	text-decoration: underline;
}

.cckwp-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

/* ── Category rows ──────────────────────────────────────────────────────────── */
.cckwp-categories {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cckwp-cat-row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: .875rem 1rem;
	background: var(--cckwp-surface-2);
	border: 1px solid var(--cckwp-border);
	border-radius: var(--cckwp-radius);
}

.cckwp-cat-info {
	flex: 1;
}

.cckwp-cat-name {
	display: block;
	font-size: .9375rem;
	color: var(--cckwp-text);
	margin-bottom: .25rem;
}

.cckwp-cat-desc {
	margin: 0;
	font-size: .8125rem;
	color: var(--cckwp-text-muted);
	line-height: 1.5;
}

.cckwp-cat-control {
	flex-shrink: 0;
	padding-top: .1rem;
}

/* Toggle switch */
.cckwp-toggle {
	all: unset;
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background: var(--cckwp-toggle-off);
	cursor: pointer;
	transition: background .2s ease;
	flex-shrink: 0;
}

.cckwp-toggle::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	transition: transform .2s ease;
}

.cckwp-toggle.is-on {
	background: var(--cckwp-toggle-on);
}

.cckwp-toggle.is-on::after {
	transform: translateX(20px);
}

.cckwp-toggle:focus-visible {
	outline: 3px solid #ffbf00;
	outline-offset: 3px;
}

.cckwp-toggle-always {
	display: inline-block;
	font-size: .75rem;
	font-weight: 600;
	color: var(--cckwp-accent);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .25rem .5rem;
	background: color-mix(in srgb, var(--cckwp-accent) 12%, transparent);
	border-radius: 4px;
	white-space: nowrap;
}

/* ── Divider ────────────────────────────────────────────────────────────────── */
.cckwp-divider {
	border: none;
	border-top: 1px solid var(--cckwp-border);
	margin: .875rem 0;
}

.cckwp-panel-footer .cckwp-divider {
	margin: .75rem 0;
}

/* ── CCPA section ───────────────────────────────────────────────────────────── */
.cckwp-ccpa-section {}

.cckwp-ccpa-row {
	display: flex;
	flex-direction: column;
	gap: .625rem;
}

.cckwp-ccpa-label {
	font-size: .875rem;
	font-weight: 600;
	color: var(--cckwp-text);
}

.cckwp-ccpa-row .cckwp-btn {
	align-self: flex-start;
	white-space: normal;
	text-align: left;
	line-height: 1.3;
}

/* ── Notice ─────────────────────────────────────────────────────────────────── */
.cckwp-notice {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	padding: .75rem 1rem;
	border-radius: 8px;
	font-size: .8125rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.cckwp-notice-info {
	background: color-mix(in srgb, var(--cckwp-accent) 10%, transparent);
	color: var(--cckwp-text);
	border: 1px solid color-mix(in srgb, var(--cckwp-accent) 30%, transparent);
}

.cckwp-notice svg {
	flex-shrink: 0;
	margin-top: .1rem;
	color: var(--cckwp-accent);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.cckwp-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5rem 1.125rem;
	border-radius: 10px;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
	-webkit-tap-highlight-color: transparent;
	line-height: 1.4;
}

.cckwp-btn:focus-visible {
	outline: 3px solid #ffbf00;
	outline-offset: 3px;
}

.cckwp-btn:active { transform: scale(0.97); }

.cckwp-btn-primary {
	background: var(--cckwp-accent);
	color: var(--cckwp-on-accent);
}
.cckwp-btn-primary:hover  { background: var(--cckwp-accent-dark); }

.cckwp-btn-secondary {
	background: var(--cckwp-surface-2);
	color: var(--cckwp-text);
	border: 1px solid var(--cckwp-border);
}
.cckwp-btn-secondary:hover { background: var(--cckwp-border); }

.cckwp-btn-ghost {
	color: var(--cckwp-accent);
	text-decoration: underline;
	padding-left: .5rem;
	padding-right: .5rem;
}
.cckwp-btn-ghost:hover { color: var(--cckwp-accent-dark); }

.cckwp-btn-sm { padding: .375rem .75rem; font-size: .8125rem; }

.cckwp-btn-outline {
	border: 1px solid var(--cckwp-accent);
	color: var(--cckwp-accent);
}
.cckwp-btn-outline:hover         { background: color-mix(in srgb, var(--cckwp-accent) 10%, transparent); }
.cckwp-btn-outline[aria-pressed="true"] {
	background: var(--cckwp-accent);
	color: var(--cckwp-on-accent);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	#cckwp-banner { padding: 1rem; }

	.cckwp-banner-inner {
		flex-direction: column;
		align-items: stretch;
		gap: .875rem;
	}

	.cckwp-banner-actions {
		flex-direction: column;
	}

	.cckwp-btn { width: 100%; }

	#cckwp-panel { width: 100%; }
}

/* ── High-contrast / forced-colors ─────────────────────────────────────────── */
@media (forced-colors: active) {
	#cckwp-bubble        { forced-color-adjust: none; }
	.cckwp-toggle        { forced-color-adjust: none; }
	.cckwp-btn-primary   { forced-color-adjust: none; }
}

/* ── Print ──────────────────────────────────────────────────────────────────── */
@media print {
	#cckwp-root,
	#cckwp-banner { display: none !important; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	#cckwp-bubble,
	#cckwp-panel,
	#cckwp-banner,
	.cckwp-toggle,
	.cckwp-toggle::after,
	.cckwp-btn { transition: none; animation: none; }
}

/* ── [cookie_declaration] shortcode ─────────────────────────────────────────── */
.cckwp-cookie-declaration {
	font-size: 1rem;
	line-height: 1.6;
}

.cckwp-decl-section {
	margin-bottom: 2.5rem;
}

.cckwp-decl-heading {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 .5rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--cckwp-accent, #1a73e8);
	display: inline-block;
}

.cckwp-decl-desc {
	margin: 0 0 1rem;
	color: #555;
	font-size: .9375rem;
}

.cckwp-decl-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 6px;
	border: 1px solid #ddd;
}

.cckwp-decl-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
	background: #fff;
}

.cckwp-decl-table thead {
	background: #f5f5f5;
}

.cckwp-decl-table th,
.cckwp-decl-table td {
	padding: .625rem .875rem;
	text-align: left;
	border-bottom: 1px solid #e8e8e8;
	vertical-align: top;
}

.cckwp-decl-table th {
	font-weight: 600;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #444;
	white-space: nowrap;
}

.cckwp-decl-table tbody tr:last-child td {
	border-bottom: none;
}

.cckwp-decl-table tbody tr:hover {
	background: #fafafa;
}

.cckwp-decl-table code {
	font-size: .8125rem;
	background: #f0f0f0;
	padding: .1em .35em;
	border-radius: 3px;
	word-break: break-all;
}

.cckwp-decl-empty {
	color: #888;
	font-size: .9375rem;
	margin: 0;
}

/* Responsive stacked layout for narrow screens */
@media (max-width: 600px) {
	.cckwp-decl-table thead {
		display: none;
	}

	.cckwp-decl-table,
	.cckwp-decl-table tbody,
	.cckwp-decl-table tr,
	.cckwp-decl-table td {
		display: block;
		width: 100%;
	}

	.cckwp-decl-table tr {
		border-bottom: 1px solid #e0e0e0;
		padding: .625rem 0;
	}

	.cckwp-decl-table td {
		border: none;
		padding: .25rem .875rem;
	}

	.cckwp-decl-table td::before {
		content: attr(data-label) ': ';
		font-weight: 600;
		font-size: .75rem;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: #666;
		display: block;
		margin-bottom: .1rem;
	}
}

@media (prefers-color-scheme: dark) {
	.cckwp-decl-table          { background: #2d2d2d; }
	.cckwp-decl-table thead    { background: #3a3a3a; }
	.cckwp-decl-table th       { color: #bbb; }
	.cckwp-decl-table th,
	.cckwp-decl-table td       { border-color: #444; }
	.cckwp-decl-table tbody tr:hover { background: #333; }
	.cckwp-decl-table code     { background: #444; color: #e0e0e0; }
	.cckwp-decl-table-wrap     { border-color: #444; }
	.cckwp-decl-desc           { color: #aaa; }
}