/* ── Cookie Consent Pro — banner.css ──────────────────────────────────── */

:root {
	--ccp-accent:      #E85D2F;
	--ccp-accent-rgb:  232,93,47;
	--ccp-bg:          #ffffff;
	--ccp-bg-2:        #f9fafb;
	--ccp-text:        #111827;
	--ccp-text-muted:  #6b7280;
	--ccp-border:      rgba(0,0,0,.09);
	--ccp-shadow:      0 8px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07);
	--ccp-shadow-sm:   0 2px 12px rgba(0,0,0,.1);
	--ccp-radius:      18px;
	--ccp-radius-sm:   10px;
	--ccp-z:           999998;
	--ccp-transition:  cubic-bezier(.4,0,.2,1);
	--ccp-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
.ccp-banner--dark,
.ccp-modal__card.ccp-banner--dark,
#ccp-reopen.ccp-banner--dark {
	--ccp-bg:         #1c1c2e;
	--ccp-bg-2:       #252538;
	--ccp-text:       #f3f4f6;
	--ccp-text-muted: #9ca3af;
	--ccp-border:     rgba(255,255,255,.1);
	--ccp-shadow:     0 8px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}

/* ── Banner base ────────────────────────────────────────────────────────── */
.ccp-banner {
	position: fixed !important;
	z-index: 999999 !important;
	background: var(--ccp-bg);
	border: 1px solid var(--ccp-border);
	box-shadow: var(--ccp-shadow);
	font-family: var(--ccp-font);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ccp-text);
	/* Always display:block — visibility controlled by opacity + pointer-events only */
	display: block !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
}

/* Visible state — added by PHP/JS */
.ccp-banner.ccp-visible {
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* ── Float right (default) ──────────────────────────────────────────────── */
.ccp-banner--float-right {
	bottom: 24px;
	right: 24px;
	width: 360px;
	max-width: calc(100vw - 24px);
	border-radius: var(--ccp-radius);
	transform: translateY(40px);
}
.ccp-banner--float-right.ccp-visible { transform: translateY(0); }

/* ── Float left ─────────────────────────────────────────────────────────── */
.ccp-banner--float-left {
	bottom: 24px;
	left: 24px;
	width: 360px;
	max-width: calc(100vw - 24px);
	border-radius: var(--ccp-radius);
	transform: translateY(40px);
}
.ccp-banner--float-left.ccp-visible { transform: translateY(0); }

/* ── Bottom bar ─────────────────────────────────────────────────────────── */
.ccp-banner--bottom-bar {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	border-radius: var(--ccp-radius) var(--ccp-radius) 0 0;
	transform: translateY(60px);
}
.ccp-banner--bottom-bar.ccp-visible { transform: translateY(0); }
.ccp-banner--bottom-bar .ccp-banner__inner {
	max-width: 1100px;
	margin: 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.ccp-banner--bottom-bar .ccp-banner__header { margin-bottom: 0; }
.ccp-banner--bottom-bar .ccp-banner__desc { margin: 0; flex: 1; min-width: 220px; }
.ccp-banner--bottom-bar .ccp-banner__actions { flex-shrink: 0; flex-wrap: nowrap; }

/* ── Inner layout ───────────────────────────────────────────────────────── */
.ccp-banner__inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 20px 20px;
}

.ccp-banner__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}

.ccp-banner__icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}

.ccp-banner__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ccp-text);
	line-height: 1.3;
}

.ccp-banner__desc {
	margin: 0;
	color: var(--ccp-text-muted);
	font-size: 13px;
	line-height: 1.6;
}

.ccp-banner__links {
	margin: -4px 0 0;
	font-size: 12px;
	color: var(--ccp-text-muted);
}

.ccp-link {
	color: var(--ccp-accent);
	text-decoration: none;
	font-weight: 500;
}
.ccp-link:hover { text-decoration: underline; }

/* ── Action buttons ─────────────────────────────────────────────────────── */
.ccp-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ccp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 18px;
	border: none;
	border-radius: var(--ccp-radius-sm);
	font-family: var(--ccp-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer !important;
	pointer-events: auto !important;
	position: relative;
	transition: background .2s, transform .15s, box-shadow .2s;
	white-space: nowrap;
}
.ccp-btn:active { transform: scale(.97); }

.ccp-btn--accept {
	background: var(--ccp-accent);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(var(--ccp-accent-rgb),.35);
}
.ccp-btn--accept:hover {
	filter: brightness(1.08);
	box-shadow: 0 4px 14px rgba(var(--ccp-accent-rgb),.45);
}

.ccp-btn--necessary {
	background: var(--ccp-bg-2);
	color: var(--ccp-text);
	border: 1px solid var(--ccp-border);
}
.ccp-btn--necessary:hover { background: var(--ccp-border); }

.ccp-btn--settings {
	background: transparent;
	color: var(--ccp-text-muted);
	padding: 9px 10px;
	font-size: 12px;
	font-weight: 500;
}
.ccp-btn--settings:hover { color: var(--ccp-accent); }

/* ── Modal overlay ──────────────────────────────────────────────────────── */
.ccp-modal {
	position: fixed;
	inset: 0;
	z-index: 1000001 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: var(--ccp-font);
}
/* hide when [hidden] regardless of theme overrides */
.ccp-modal[hidden],
#ccp-modal[hidden] {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
/* ensure visible state is always flex */
.ccp-modal:not([hidden]),
#ccp-modal:not([hidden]),
.ccp-modal.ccp-modal--open,
#ccp-modal.ccp-modal--open {
	display: flex !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.ccp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
	backdrop-filter: blur(3px);
	animation: ccp-fade-in .25s var(--ccp-transition);
}

.ccp-modal__card {
	position: relative;
	z-index: 2;
	background: var(--ccp-bg);
	border: 1px solid var(--ccp-border);
	border-radius: var(--ccp-radius);
	box-shadow: var(--ccp-shadow);
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	animation: ccp-slide-up .3s var(--ccp-transition);
	color: var(--ccp-text);
}

/* ── Modal header ───────────────────────────────────────────────────────── */
.ccp-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--ccp-border);
}
.ccp-modal__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ccp-modal__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--ccp-text-muted);
	border-radius: 6px;
	transition: background .15s, color .15s;
	display: flex;
	align-items: center;
}
.ccp-modal__close:hover { background: var(--ccp-border); color: var(--ccp-text); }

/* ── Modal body ─────────────────────────────────────────────────────────── */
.ccp-modal__body {
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ccp-category {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ccp-border);
}
.ccp-category:last-child { border-bottom: none; }

.ccp-category__info { flex: 1; }
.ccp-category__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ccp-text);
	margin-bottom: 4px;
}
.ccp-category__desc {
	margin: 0;
	font-size: 12.5px;
	color: var(--ccp-text-muted);
	line-height: 1.55;
}

/* ── Toggle switch ──────────────────────────────────────────────────────── */
.ccp-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	flex-shrink: 0;
}
.ccp-toggle--disabled { cursor: not-allowed; opacity: .75; }
.ccp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.ccp-toggle__track {
	position: relative;
	width: 44px;
	height: 24px;
	background: #d1d5db;
	border-radius: 999px;
	transition: background .25s;
	flex-shrink: 0;
}
.ccp-toggle__track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: transform .25s var(--ccp-transition);
}
.ccp-toggle input:checked + .ccp-toggle__track {
	background: var(--ccp-accent);
}
.ccp-toggle input:checked + .ccp-toggle__track::after {
	transform: translateX(20px);
}

.ccp-toggle__label {
	font-size: 10.5px;
	color: var(--ccp-text-muted);
	font-weight: 500;
	text-align: center;
	line-height: 1.2;
}
.ccp-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;
}

/* ── Modal footer ───────────────────────────────────────────────────────── */
.ccp-modal__footer {
	display: flex;
	gap: 10px;
	padding: 16px 20px 20px;
	border-top: 1px solid var(--ccp-border);
}
.ccp-modal__footer .ccp-btn--accept { flex: 1; }
.ccp-modal__footer .ccp-btn--necessary { flex-shrink: 0; }

/* ── Re-open button ─────────────────────────────────────────────────────── */
.ccp-reopen {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: calc(var(--ccp-z) - 1);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ccp-bg);
	border: 1px solid var(--ccp-border);
	box-shadow: var(--ccp-shadow-sm);
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s, box-shadow .2s;
	line-height: 1;
}
/* reopen visibility controlled via inline style by JS */
.ccp-reopen:hover {
	transform: scale(1.12);
	box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.ccp-banner--float-left ~ .ccp-reopen,
.ccp-banner--float-left + .ccp-modal + .ccp-reopen {
	right: auto;
	left: 20px;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes ccp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ccp-slide-up {
	from { opacity: 0; transform: translateY(20px) scale(.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.ccp-banner--float-right,
	.ccp-banner--float-left {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
	}
	.ccp-banner--bottom-bar .ccp-banner__inner { flex-direction: column; }
	.ccp-modal { padding: 8px; }
	.ccp-modal__card { max-height: 95vh; }
	.ccp-banner__actions { flex-direction: column; }
	.ccp-btn--accept,
	.ccp-btn--necessary { width: 100%; justify-content: center; }
}