/*
 * paarzeit-cookie-consent - eigene Stile (1.10.0)
 *
 * WARUM ES DIESE DATEI GIBT
 * Das Markup des Banners traegt Tailwind-Klassen aus dem Theme von paarzeit.de
 * (bg-semantic-*, rounded-button, fixed, opacity-0 ...). Auf jeder anderen Seite
 * gibt es diese Klassen nicht: Am 18.09.2026 stand das Banner auf coupleminutes.de
 * deshalb als normaler Seiteninhalt unter dem Fuss, und der Einstellungs-Dialog war
 * dauerhaft sichtbar - "opacity-0 pointer-events-none" wirkten schlicht nicht.
 *
 * Diese Datei macht das Plugin unabhaengig vom Theme. Sie wird NUR geladen, wenn
 * das Theme die Stile nicht selbst mitbringt (PZ_Cookie_Consent::eigene_stile()) -
 * auf paarzeit.de aendert sich also nichts.
 *
 * Alles haengt an den IDs des Banners, damit kein Theme-Stil hineinregiert und
 * nichts aus dieser Datei hinausregiert. Farben, Radius und Schrift kommen aus
 * CSS-Variablen; ein Theme kann sie auf :root ueberschreiben:
 *   --pzcc-bg, --pzcc-text, --pzcc-rand, --pzcc-primaer, --pzcc-primaer-text,
 *   --pzcc-sekundaer, --pzcc-radius, --pzcc-knopf-radius, --pzcc-schrift
 *
 * Die Zustandsklassen (opacity-0, opacity-100, pointer-events-*, hidden,
 * translate-y-[150%], scale-*) setzt cookie-consent.js. Sie sind hier nachgebaut,
 * aber nur fuer die Elemente des Banners.
 */

#pz-cookie-card,
#pz-cookie-modal {
	--_bg: var(--pzcc-bg, #ffffff);
	--_text: var(--pzcc-text, #25323a);
	--_rand: var(--pzcc-rand, #d6d9dc);
	--_primaer: var(--pzcc-primaer, #25323a);
	--_primaer-text: var(--pzcc-primaer-text, #ffffff);
	--_sekundaer: var(--pzcc-sekundaer, #f3f1ec);
	--_radius: var(--pzcc-radius, 16px);
	--_knopf-radius: var(--pzcc-knopf-radius, 999px);
	--_schrift: var(--pzcc-schrift, inherit);
	box-sizing: border-box;
	font-family: var(--_schrift);
	color: var(--_text);
	line-height: 1.45;
	text-align: left;
}
#pz-cookie-card *,
#pz-cookie-modal * { box-sizing: border-box; }

/* --- Ebene 1: Karte (klassik) --------------------------------------------- */
#pz-cookie-card[data-pz-blocking="0"] {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99998;
	width: calc(100% - 32px);
	max-width: 400px;
	margin: 0;
	padding: 20px;
	background: var(--_bg);
	border: 1px solid var(--_rand);
	border-radius: var(--_radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	transition: transform .5s ease, opacity .5s ease;
}
@media (min-width: 640px) {
	#pz-cookie-card[data-pz-blocking="0"] { right: 32px; bottom: 32px; padding: 24px; }
}

/* --- Ebene 1: zentrale Ebene (klar / neutral) ----------------------------- */
#pz-cookie-card[data-pz-blocking="1"] {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .4);
	transition: opacity .3s ease;
}
#pz-cookie-card [data-pz-dialog] {
	width: 100%;
	max-width: 480px;
	padding: 24px;
	background: var(--_bg);
	border: 1px solid var(--_rand);
	border-radius: var(--_radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	outline: none;
}

/* --- Texte ------------------------------------------------------------------ */
#pz-cookie-card h3,
#pz-cookie-modal h2 {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--_schrift);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--_text);
}
#pz-cookie-card h3 { font-size: 18px; }
#pz-cookie-modal h2 { font-size: 22px; margin: 0; }
#pz-cookie-card p { margin: 0 0 20px; font-size: 14px; opacity: .9; }
#pz-cookie-card p.mt-4 { margin: 16px 0 0; text-align: center; }

/* --- Schaltflaechen ---------------------------------------------------------- */
#pz-cookie-card .flex,
#pz-cookie-modal .flex { display: flex; }
#pz-cookie-card .flex-col { flex-direction: column; }
#pz-cookie-card .gap-3,
#pz-cookie-modal .gap-3 { gap: 12px; }
#pz-cookie-card .flex-1 { flex: 1 1 0%; }

#pz-cookie-card button,
#pz-cookie-modal button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 11px 18px;
	font-family: var(--_schrift);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var(--_text);
	background: var(--_sekundaer);
	border: 1px solid var(--_rand);
	border-radius: var(--_knopf-radius);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
#pz-cookie-card button:hover,
#pz-cookie-modal button:hover { opacity: .88; }
#pz-cookie-card button:focus-visible,
#pz-cookie-modal button:focus-visible { outline: 2px solid var(--_primaer); outline-offset: 2px; }
#pz-cookie-card .w-full { width: 100%; }
#pz-cookie-card .text-sm { font-size: 14px; }

/* Zustimmen: die eine Schaltflaeche in der Hauptfarbe (in "neutral" nicht - dort
   traegt das Markup dieselben Klassen wie Ablehnen). Zwei IDs im Selektor: die
   allgemeine Knopfregel darueber hat (1,0,1) und schluege eine einzelne ID. */
#pz-cookie-card #pz-cookie-accept-all.bg-semantic-buttons-primary-active,
#pz-cookie-modal #pz-cookie-accept-all-modal {
	color: var(--_primaer-text);
	background: var(--_primaer);
	border-color: var(--_primaer);
}

/* Textverweis "Einstellungen" in der zentralen Ebene und das Schliessen-Kreuz. */
#pz-cookie-card button.pz-cc-textlink,
#pz-cookie-modal button.pz-cc-textlink {
	display: inline;
	padding: 0;
	font-weight: 400;
	font-size: 14px;
	text-decoration: underline;
	background: none;
	border: 0;
	border-radius: 0;
}
#pz-cookie-modal #pz-cookie-modal-close {
	font-size: 28px;
	line-height: 1;
	text-decoration: none;
}

/* --- Ebene 2: Einstellungs-Dialog ------------------------------------------ */
#pz-cookie-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .4);
	transition: opacity .3s ease;
}
#pz-cookie-modal-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 672px;
	max-height: 90vh;
	background: var(--_bg);
	border: 1px solid var(--_rand);
	border-radius: var(--_radius);
	box-shadow: 0 20px 48px rgba(0, 0, 0, .25);
	transform: scale(.95);
	transition: transform .3s ease;
	overflow: hidden;
}
#pz-cookie-modal-content.scale-100 { transform: scale(1); }
#pz-cookie-modal-content > div:first-child {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--_rand);
}
#pz-cookie-modal-content > div:nth-child(2) {
	padding: 20px 24px;
	overflow-y: auto;
}
#pz-cookie-modal-content > div:nth-child(2) > div {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 20px;
}
#pz-cookie-modal-content > div:nth-child(2) > div:last-child { margin-bottom: 0; }
#pz-cookie-modal input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	accent-color: var(--_primaer);
	cursor: pointer;
}
#pz-cookie-modal input[type="checkbox"]:disabled { opacity: .5; cursor: default; }
#pz-cookie-modal label {
	display: block;
	margin: 0;
	font-weight: 700;
	font-size: 16px;
	color: var(--_text);
	cursor: pointer;
}
#pz-cookie-modal-content > div:nth-child(2) p {
	margin: 4px 0 0;
	font-size: 14px;
	opacity: .8;
}
#pz-cookie-modal-content > div:last-child {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid var(--_rand);
	background: var(--_sekundaer);
}
#pz-cookie-modal-content > div:last-child button { width: 100%; }
@media (min-width: 640px) {
	#pz-cookie-modal-content > div:last-child { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
	#pz-cookie-modal-content > div:last-child button { width: auto; }
}
#pz-cookie-modal-content > div:last-child #pz-cookie-reject-all-modal,
#pz-cookie-modal-content > div:last-child #pz-cookie-save-partial { background: var(--_bg); }

/* --- Zustaende, die cookie-consent.js setzt ------------------------------ */
#pz-cookie-card.opacity-0,
#pz-cookie-modal.opacity-0 { opacity: 0; }
#pz-cookie-card.opacity-100,
#pz-cookie-modal.opacity-100 { opacity: 1; }
#pz-cookie-modal.pointer-events-none { pointer-events: none; }
#pz-cookie-modal.pointer-events-auto { pointer-events: auto; }
#pz-cookie-modal.hidden { display: none; }
#pz-cookie-card.translate-y-\[150\%\] { transform: translateY(150%); }