/* ==========================================================================
   BP Cookie Consent – frontend styles
   Matches berlinprojekt_new theme tokens. Everything is namespaced .bpcc.
   ========================================================================== */

.bpcc {
	/* fonts fall back to theme variables, then to the theme's own fonts */
	--bpcc-serif: var(--serif, 'EB Garamond', Georgia, serif);
	--bpcc-sans: var(--sans, 'Geist', system-ui, -apple-system, sans-serif);
	--bpcc-gold: #EAC66E;
	--bpcc-gold-light: #F5DC9E;
	--bpcc-gold-dim: #A07828;
	--bpcc-z: 99999;

	/* dark (default) */
	--bpcc-bg: #101010;
	--bpcc-bg-2: #161616;
	--bpcc-text: #F2EDE4;
	--bpcc-muted: #c8c8c8;
	--bpcc-faint: #9e9e9e;
	--bpcc-line: rgba(255,255,255,.08);
	--bpcc-line-gold: rgba(234,198,110,.22);
	--bpcc-accent: #EAC66E;          /* eyebrow, numbers, italic word */
	--bpcc-ghost-text: rgba(200,193,183,.85);
	--bpcc-ghost-border: rgba(234,198,110,.35);
	--bpcc-track: rgba(255,255,255,.12);
	--bpcc-backdrop: rgba(0,0,0,.72);
	--bpcc-shadow: 0 30px 80px rgba(0,0,0,.6);

	position: relative;
	z-index: var(--bpcc-z);
	font-family: var(--bpcc-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--bpcc-text);
	-webkit-font-smoothing: antialiased;
}

.bpcc[data-theme="light"] {
	--bpcc-bg: #f5f0ea;
	--bpcc-bg-2: #EDEAE3;
	--bpcc-text: #1A1712;
	--bpcc-muted: #5A5248;
	--bpcc-faint: #8A8175;
	--bpcc-line: rgba(90,82,72,.14);
	--bpcc-line-gold: rgba(160,120,40,.3);
	--bpcc-accent: #A07828;
	--bpcc-ghost-text: #1A1712;
	--bpcc-ghost-border: rgba(160,120,40,.45);
	--bpcc-track: rgba(26,23,18,.15);
	--bpcc-backdrop: rgba(10,10,10,.55);
	--bpcc-shadow: 0 30px 80px rgba(0,0,0,.28);
}

@media (prefers-color-scheme: light) {
	.bpcc[data-theme="auto"] {
		--bpcc-bg: #f5f0ea;
		--bpcc-bg-2: #EDEAE3;
		--bpcc-text: #1A1712;
		--bpcc-muted: #5A5248;
		--bpcc-faint: #8A8175;
		--bpcc-line: rgba(90,82,72,.14);
		--bpcc-line-gold: rgba(160,120,40,.3);
		--bpcc-accent: #A07828;
		--bpcc-ghost-text: #1A1712;
		--bpcc-ghost-border: rgba(160,120,40,.45);
		--bpcc-track: rgba(26,23,18,.15);
		--bpcc-backdrop: rgba(10,10,10,.55);
		--bpcc-shadow: 0 30px 80px rgba(0,0,0,.28);
	}
}

.bpcc *, .bpcc *::before, .bpcc *::after { box-sizing: border-box; }
.bpcc [hidden] { display: none !important; }
html.bpcc-lock { overflow: hidden; }

/* ---------- Type ---------- */
.bpcc-eyebrow {
	display: flex; align-items: center; gap: 12px;
	font-family: var(--bpcc-sans); font-size: 10px; letter-spacing: .38em;
	text-transform: uppercase; color: var(--bpcc-accent); margin: 0 0 14px;
}
.bpcc-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--bpcc-accent); }

.bpcc-title {
	font-family: var(--bpcc-serif); font-weight: 400; font-size: 32px; line-height: 1.12;
	letter-spacing: -.01em; color: var(--bpcc-text); margin: 0 0 12px;
}
.bpcc-title em { font: inherit; font-style: italic; color: var(--bpcc-accent); }

.bpcc-text { font-family: var(--bpcc-sans); font-size: 16px; line-height: 1.7; color: var(--bpcc-muted); margin: 0; }
.bpcc-text a, .bpcc-inline-link { color: var(--bpcc-accent); text-decoration: underline; text-underline-offset: 3px; }
.bpcc-text a:hover, .bpcc-inline-link:hover { color: var(--bpcc-text); }

/* ---------- Buttons ---------- */
.bpcc-btn {
	font-family: var(--bpcc-sans); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
	padding: 16px 30px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .3s, color .3s, border-color .3s, transform .2s;
	background: none; line-height: 1; white-space: nowrap;
}
.bpcc-btn--primary { background: var(--bpcc-gold); color: #0A0A0A; border-color: var(--bpcc-gold); }
.bpcc-btn--primary:hover { background: var(--bpcc-gold-light); border-color: var(--bpcc-gold-light); transform: translateY(-2px); }
.bpcc-btn--ghost { color: var(--bpcc-ghost-text); border-color: var(--bpcc-ghost-border); }
.bpcc-btn--ghost:hover { color: var(--bpcc-accent); border-color: var(--bpcc-accent); }
.bpcc-btn--link { color: var(--bpcc-faint); padding-left: 8px; padding-right: 8px; text-decoration: underline; text-underline-offset: 4px; }
.bpcc-btn--link:hover { color: var(--bpcc-accent); }
.bpcc-btn:focus-visible { outline: 2px solid var(--bpcc-gold); outline-offset: 3px; }

/* ==========================================================================
   BANNER
   ========================================================================== */
.bpcc-banner {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--bpcc-z);
	background: var(--bpcc-bg);
	border-top: 1px solid var(--bpcc-line-gold);
	box-shadow: var(--bpcc-shadow);
	padding: 40px 60px calc(40px + env(safe-area-inset-bottom, 0px));
	transform: translateY(24px); opacity: 0;
	transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s;
}
.bpcc-banner.is-visible { transform: translateY(0); opacity: 1; }
.bpcc-banner::before {
	content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, transparent, var(--bpcc-gold), transparent);
}
.bpcc-banner__inner {
	max-width: var(--grid, 1300px); margin: 0 auto;
	display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center;
}
.bpcc-banner__text { max-width: 720px; }
.bpcc-banner__text .bpcc-title { font-size: 30px; }
.bpcc-banner__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: flex-end; }

/* centred modal variant of the banner */
.bpcc[data-position="modal"] .bpcc-banner {
	left: 50%; right: auto; bottom: auto; top: 50%;
	transform: translate(-50%, -50%) scale(.98); opacity: 0;
	width: min(720px, calc(100vw - 40px));
	border: 1px solid var(--bpcc-line-gold); padding: 48px 52px;
}
.bpcc[data-position="modal"] .bpcc-banner.is-visible { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.bpcc[data-position="modal"] .bpcc-banner__inner { grid-template-columns: 1fr; gap: 32px; }
.bpcc[data-position="modal"] .bpcc-banner__actions { justify-content: flex-start; }
.bpcc[data-position="modal"][data-open="banner"]::before {
	content: ''; position: fixed; inset: 0; background: var(--bpcc-backdrop); z-index: calc(var(--bpcc-z) - 1);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ==========================================================================
   MODAL (settings)
   ========================================================================== */
.bpcc-modal { position: fixed; inset: 0; z-index: calc(var(--bpcc-z) + 1); display: flex; align-items: center; justify-content: center; padding: 20px; }
.bpcc-modal__backdrop {
	position: absolute; inset: 0; background: var(--bpcc-backdrop);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	opacity: 0; transition: opacity .35s;
}
.bpcc-modal.is-visible .bpcc-modal__backdrop { opacity: 1; }
.bpcc-modal__panel {
	position: relative; width: min(760px, 100%); max-height: calc(100vh - 40px);
	display: flex; flex-direction: column;
	background: var(--bpcc-bg); border: 1px solid var(--bpcc-line-gold); box-shadow: var(--bpcc-shadow);
	transform: translateY(16px) scale(.98); opacity: 0;
	transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .35s;
	outline: none;
}
.bpcc-modal.is-visible .bpcc-modal__panel { transform: none; opacity: 1; }
.bpcc-modal__panel::before {
	content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, transparent, var(--bpcc-gold), transparent);
}

.bpcc-modal__close {
	position: absolute; top: 22px; right: 22px; width: 40px; height: 40px;
	background: none; border: 0; cursor: pointer; padding: 0; z-index: 2;
}
.bpcc-modal__close span {
	position: absolute; left: 50%; top: 50%; width: 18px; height: 1px;
	background: var(--bpcc-faint); transition: background .3s;
}
.bpcc-modal__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.bpcc-modal__close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }
.bpcc-modal__close:hover span { background: var(--bpcc-accent); }
.bpcc-modal__close:focus-visible { outline: 2px solid var(--bpcc-gold); outline-offset: 2px; }

.bpcc-modal__head { padding: 48px 52px 30px; }
.bpcc-modal__head .bpcc-title { font-size: 34px; }
.bpcc-modal__body { overflow-y: auto; padding: 0 52px; border-top: 1px solid var(--bpcc-line-gold); flex: 1 1 auto; overscroll-behavior: contain; }
.bpcc-modal__foot { padding: 30px 52px 40px; border-top: 1px solid var(--bpcc-line); }
.bpcc-modal__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.bpcc-modal__links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; }
.bpcc-modal__links a {
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--bpcc-faint); text-decoration: none; transition: color .3s;
}
.bpcc-modal__links a:hover { color: var(--bpcc-accent); }

/* ---------- Category rows ---------- */
.bpcc-cat { border-bottom: 1px solid var(--bpcc-line); }
.bpcc-cat:last-child { border-bottom: 0; }
.bpcc-cat__row { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: start; padding: 28px 0; }
.bpcc-cat__num { font-family: var(--bpcc-serif); font-size: 22px; line-height: 1.2; color: var(--bpcc-accent); padding-top: 2px; }
.bpcc-cat__title {
	display: block; font-family: var(--bpcc-serif); font-size: 24px; font-weight: 400;
	line-height: 1.2; color: var(--bpcc-text); margin: 0 0 8px; cursor: pointer;
}
.bpcc-cat__desc { font-size: 15px; line-height: 1.65; color: var(--bpcc-muted); margin: 0 0 12px; max-width: 54ch; }
.bpcc-cat__details {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-family: var(--bpcc-sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--bpcc-faint); display: inline-flex; align-items: center; gap: 8px; transition: color .3s;
}
.bpcc-cat__details:hover, .bpcc-cat__details[aria-expanded="true"] { color: var(--bpcc-accent); }
.bpcc-cat__details:focus-visible { outline: 2px solid var(--bpcc-gold); outline-offset: 3px; }
.bpcc-cat__caret { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s; }
.bpcc-cat__details[aria-expanded="true"] .bpcc-cat__caret { transform: rotate(225deg) translateY(-2px); }

.bpcc-cat__switch { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 4px; }
.bpcc-cat__always { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--bpcc-faint); white-space: nowrap; }

/* switch: real checkbox stays for a11y, visually hidden */
.bpcc-switch { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bpcc-switch__track {
	position: relative; display: block; width: 46px; height: 24px; border-radius: 24px;
	background: var(--bpcc-track); cursor: pointer; transition: background .3s;
}
.bpcc-switch__track span {
	position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--bpcc-bg); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .3s;
}
.bpcc-switch:checked + .bpcc-switch__track { background: var(--bpcc-gold); }
.bpcc-switch:checked + .bpcc-switch__track span { transform: translateX(22px); background: #0A0A0A; }
.bpcc-switch:disabled + .bpcc-switch__track { cursor: default; opacity: .55; }
.bpcc-switch:focus-visible + .bpcc-switch__track { outline: 2px solid var(--bpcc-gold); outline-offset: 3px; }

.bpcc-cat__body { padding: 0 0 28px 62px; }
.bpcc-cat__empty { font-size: 14px; color: var(--bpcc-faint); margin: 0; }

/* ---------- Cookie table ---------- */
.bpcc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bpcc-table th {
	font-family: var(--bpcc-sans); font-size: 10px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
	color: var(--bpcc-accent); text-align: left; padding: 0 16px 10px 0; border-bottom: 1px solid var(--bpcc-line-gold);
}
.bpcc-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--bpcc-line); color: var(--bpcc-muted); vertical-align: top; line-height: 1.5; }
.bpcc-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--bpcc-text); white-space: nowrap; }
.bpcc-table th:last-child, .bpcc-table td:last-child { padding-right: 0; white-space: nowrap; }
.bpcc-table tr:last-child td { border-bottom: 0; }

/* ---------- Reopen button ---------- */
.bpcc-reopen {
	position: fixed; left: 20px; bottom: 20px; z-index: var(--bpcc-z);
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--bpcc-bg); color: var(--bpcc-faint); border: 1px solid var(--bpcc-line-gold);
	font-family: var(--bpcc-sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	padding: 12px 18px; cursor: pointer; transition: color .3s, border-color .3s;
}
.bpcc-reopen:hover { color: var(--bpcc-accent); border-color: var(--bpcc-accent); }
.bpcc-reopen__dot { width: 6px; height: 6px; background: var(--bpcc-gold); transform: rotate(45deg); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
	.bpcc-banner { padding: 34px 32px calc(34px + env(safe-area-inset-bottom, 0px)); }
	.bpcc-banner__inner { grid-template-columns: 1fr; gap: 26px; }
	.bpcc-banner__actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
	.bpcc-banner { padding: 28px 22px calc(24px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; overflow-y: auto; }
	.bpcc-banner__text .bpcc-title, .bpcc-modal__head .bpcc-title { font-size: 26px; }
	.bpcc-text { font-size: 15px; }
	.bpcc-banner__actions { flex-direction: column; align-items: stretch; gap: 10px; }
	.bpcc-btn { width: 100%; padding: 16px 20px; }
	.bpcc-btn--link { padding: 12px; }

	.bpcc[data-position="modal"] .bpcc-banner {
		top: auto; bottom: 0; left: 0; right: 0; width: 100%;
		transform: translateY(24px); border-left: 0; border-right: 0; border-bottom: 0; padding: 28px 22px calc(24px + env(safe-area-inset-bottom, 0px));
	}
	.bpcc[data-position="modal"] .bpcc-banner.is-visible { transform: none; }

	/* settings as bottom sheet */
	.bpcc-modal { padding: 0; align-items: flex-end; }
	.bpcc-modal__panel { width: 100%; max-height: 94vh; border-left: 0; border-right: 0; border-bottom: 0; }
	.bpcc-modal__head { padding: 36px 22px 22px; }
	.bpcc-modal__body { padding: 0 22px; }
	.bpcc-modal__foot { padding: 22px 22px calc(24px + env(safe-area-inset-bottom, 0px)); }
	.bpcc-modal__close { top: 12px; right: 12px; }
	.bpcc-modal__actions { flex-direction: column; }

	.bpcc-cat__row { grid-template-columns: 1fr auto; gap: 14px; padding: 22px 0; }
	.bpcc-cat__num { display: none; }
	.bpcc-cat__title { font-size: 21px; }
	.bpcc-cat__body { padding-left: 0; }

	.bpcc-table thead { display: none; }
	.bpcc-table, .bpcc-table tbody, .bpcc-table tr, .bpcc-table td { display: block; width: 100%; }
	.bpcc-table tr { padding: 12px 0; border-bottom: 1px solid var(--bpcc-line); }
	.bpcc-table td { border: 0; padding: 3px 0; white-space: normal; }
	.bpcc-table td::before {
		content: attr(data-label); display: block; font-size: 10px; letter-spacing: .3em;
		text-transform: uppercase; color: var(--bpcc-accent); margin-bottom: 1px;
	}
	.bpcc-reopen { left: 12px; bottom: 12px; padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.bpcc *, .bpcc *::before, .bpcc *::after { transition: none !important; }
}