/*
 * VFBW Cookie Consent — Styles
 *
 * Schriftart wird bewusst NICHT gesetzt (font-family: inherit), damit Banner
 * und Einstellungsseite automatisch die Schrift des aktiven Themes übernehmen.
 *
 * Farben: die Werte unten sind ein plausibler Startpunkt (Vereinsblau/Weiß).
 * Für eine exakte Übereinstimmung mit der echten Website bitte die Hex-Werte
 * eurer Elementor-„Globalen Farben“ eintragen (Elementor-Editor → Standort-
 * Einstellungen → Globale Farben, dort die Werte für „Primär“ und „Text“
 * ablesen und unten ersetzen).
 */
:root {
	--vfbw-cc-primary: #15315A;
	--vfbw-cc-primary-hover: #2C5AA0;
	--vfbw-cc-ok: #2F8F5B;
	--vfbw-cc-track-off: #C7CFDA;
	--vfbw-cc-surface: #FFFFFF;
	--vfbw-cc-border: #D7DEE8;
	--vfbw-cc-text: inherit;
	--vfbw-cc-text-soft: #5B6472;
	--vfbw-cc-radius: 3px;
}

.vfbw-cc-panel, .vfbw-cc-banner {
	font-family: inherit;
	color: var(--vfbw-cc-text);
	line-height: 1.55;
}

/* ---------- Buttons ---------- */
.vfbw-cc-btn {
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	border-radius: var(--vfbw-cc-radius);
	padding: 11px 18px;
	cursor: pointer;
	border: 1.5px solid var(--vfbw-cc-primary);
	display: inline-block;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.08s ease;
}
.vfbw-cc-btn:active { transform: translateY(1px); }
.vfbw-cc-btn--primary { background: var(--vfbw-cc-primary); color: #fff; }
.vfbw-cc-btn--primary:hover { background: var(--vfbw-cc-primary-hover); border-color: var(--vfbw-cc-primary-hover); color: #fff; }
.vfbw-cc-btn--outline { background: transparent; color: var(--vfbw-cc-primary); }
.vfbw-cc-btn--outline:hover { background: rgba(21, 49, 90, 0.08); }
.vfbw-cc-btn--ghost { background: transparent; color: inherit; border-color: var(--vfbw-cc-border); }
.vfbw-cc-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Einstellungsseite (Shortcode) ---------- */
.vfbw-cc-panel { max-width: 660px; }
.vfbw-cc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

.vfbw-cc-category {
	border-left: 4px solid var(--vfbw-cc-border);
	background: var(--vfbw-cc-surface);
	padding: 18px 20px;
	margin-bottom: 14px;
}
.vfbw-cc-category--required { border-left-color: var(--vfbw-cc-primary-hover); }
.vfbw-cc-category.is-on { border-left-color: var(--vfbw-cc-ok); }

.vfbw-cc-category__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vfbw-cc-category__head h3 { font-size: 17px; margin: 0 0 4px; }
.vfbw-cc-status { font-size: 12.5px; color: var(--vfbw-cc-text-soft); }
.vfbw-cc-desc { margin: 10px 0 0; font-size: 14.5px; color: var(--vfbw-cc-text-soft); max-width: 52ch; }

.vfbw-cc-save-row { display: flex; align-items: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.vfbw-cc-saved-note { font-size: 13.5px; color: var(--vfbw-cc-ok); opacity: 0; transition: opacity 0.2s ease; }
.vfbw-cc-saved-note.is-visible { opacity: 1; }

/* ---------- Toggle-Switch ---------- */
.vfbw-cc-switch { position: relative; width: 44px; height: 25px; flex: none; }
.vfbw-cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vfbw-cc-track { position: absolute; inset: 0; background: var(--vfbw-cc-track-off); border-radius: 999px; transition: background 0.15s ease; }
.vfbw-cc-thumb { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.vfbw-cc-switch input:checked ~ .vfbw-cc-track { background: var(--vfbw-cc-ok); }
.vfbw-cc-switch input:checked ~ .vfbw-cc-thumb { transform: translateX(19px); }
.vfbw-cc-switch input:disabled ~ .vfbw-cc-track { background: var(--vfbw-cc-primary-hover); opacity: 0.55; cursor: not-allowed; }
.vfbw-cc-switch input:focus-visible ~ .vfbw-cc-track { outline: 2px solid var(--vfbw-cc-primary-hover); outline-offset: 2px; }

/* ---------- Banner ---------- */
.vfbw-cc-banner {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: var(--vfbw-cc-primary);
	color: #fff;
	padding: 18px 20px;
	padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	box-shadow: 0 -6px 18px rgba(0,0,0,0.18);
	z-index: 9999;
}
.vfbw-cc-banner p { margin: 0; font-size: 14px; color: #fff; opacity: 0.9; flex: 1 1 280px; }
.vfbw-cc-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vfbw-cc-banner .vfbw-cc-btn { font-size: 13.5px; padding: 9px 14px; }
.vfbw-cc-banner .vfbw-cc-btn--primary { background: #fff; color: var(--vfbw-cc-primary); }
.vfbw-cc-banner .vfbw-cc-btn--primary:hover { background: #EEF2F7; }

@media (max-width: 480px) {
	.vfbw-cc-actions { flex-direction: column; }
	.vfbw-cc-actions .vfbw-cc-btn { width: 100%; }
}