/* Countdown Anzeige – Frontend
   Alle individuellen Werte (Farben, Schrift, Radius) kommen als CSS Custom
   Properties direkt vom Server über das style-Attribut – kein separater
   <style>-Block pro Instanz nötig, das hält die Ausgabe schlank. */

.cdwp-countdown {
	--cdwp-bg: #1b1f27;
	--cdwp-text: #ffffff;
	--cdwp-accent: #e8622c;
	--cdwp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--cdwp-fontsize: 38px;
	--cdwp-radius: 12px;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font-family: var(--cdwp-font);
	color: var(--cdwp-text);
	margin: 1.5em 0;
}

.cdwp-countdown * {
	box-sizing: border-box;
}

.cdwp-title {
	font-size: clamp(1rem, 2.5vw, 1.4rem);
	font-weight: 600;
	text-align: center;
	margin-bottom: 0.75em;
	letter-spacing: 0.01em;
}

.cdwp-units {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 1.25rem);
	width: 100%;
}

.cdwp-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
}

.cdwp-value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
	font-size: clamp(1.4rem, var(--cdwp-fontsize), var(--cdwp-fontsize));
	white-space: nowrap;
}

.cdwp-label {
	margin-top: 0.4em;
	font-size: clamp(0.65rem, 1.4vw, 0.85rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.75;
}

.cdwp-sep {
	display: none;
}

/* ------------------------------------------------------------ */
/* Fortschrittsbalken (optional, nur wenn Ausgangspunkt gesetzt) */
/* ------------------------------------------------------------ */

.cdwp-progress {
	width: 100%;
	margin-top: clamp(0.75rem, 2vw, 1.25rem);
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.cdwp-progress-track {
	position: relative;
	flex: 1 1 auto;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: linear-gradient(90deg, #2ecc71 0%, #f1c40f 50%, #e74c3c 100%);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Die Abdeckung liegt über dem Verlauf und schrumpft von rechts nach links.
   Dadurch "wandert" der sichtbare Balken beim Laden auf das Ziel zu und
   zeigt an der fortschreitenden Kante genau die Farbe des erreichten
   Fortschritts (grün am Anfang, gelb in der Mitte, rot kurz vor dem Ziel). */
.cdwp-progress-cover {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	background: var(--cdwp-bg);
	transition: width 1s linear;
}

.cdwp-progress-percent {
	flex: 0 0 auto;
	font-size: clamp(0.75rem, 1.6vw, 0.95rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-width: 3.2em;
	text-align: right;
	opacity: 0.85;
}

.cdwp-expired-text {
	text-align: center;
	font-size: clamp(1rem, 2.2vw, 1.3rem);
	font-weight: 600;
	padding: 0.75em 1em;
}

.cdwp-expired-text:not([hidden]) + .cdwp-units,
.cdwp-countdown.is-expired .cdwp-units {
	display: none;
}

/* ---------------------------------------------------------------- */
/* Layout: Boxen – jede Einheit in einer eigenen abgerundeten Karte  */
/* ---------------------------------------------------------------- */

.cdwp-layout-boxes .cdwp-units {
	background: transparent;
}

.cdwp-layout-boxes .cdwp-unit {
	background: var(--cdwp-bg);
	border-radius: var(--cdwp-radius);
	padding: clamp(0.75rem, 2vw, 1.5rem) clamp(0.5rem, 2vw, 1rem);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	border-top: 3px solid var(--cdwp-accent);
}

/* ------------------------------------------------------------- */
/* Layout: Kreise – jede Einheit in einem Ring mit Akzentfarbe    */
/* ------------------------------------------------------------- */

.cdwp-layout-circles .cdwp-unit {
	aspect-ratio: 1 / 1;
	background: var(--cdwp-bg);
	border-radius: 50%;
	border: 3px solid var(--cdwp-accent);
	padding: 0.5rem;
	justify-content: center;
}

.cdwp-layout-circles .cdwp-value {
	font-size: clamp(1.1rem, calc(var(--cdwp-fontsize) * 0.7), calc(var(--cdwp-fontsize) * 0.7));
}

/* -------------------------------------------------------------- */
/* Layout: Flip-Clock – dunkle Klappkarten mit Trennlinie & Schatten */
/* -------------------------------------------------------------- */

.cdwp-layout-flip .cdwp-unit {
	background: var(--cdwp-bg);
	border-radius: var(--cdwp-radius);
	padding: clamp(0.75rem, 2vw, 1.5rem) clamp(0.5rem, 2vw, 1rem);
	position: relative;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.2);
}

.cdwp-layout-flip .cdwp-unit::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
}

.cdwp-layout-flip .cdwp-value {
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.cdwp-layout-flip .cdwp-sep {
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: var(--cdwp-fontsize);
	color: var(--cdwp-accent);
	opacity: 0.6;
}

.cdwp-layout-flip .cdwp-sep::before {
	content: ":";
}

/* ----------------------------------------------------- */
/* Layout: Minimal – kein Hintergrund, nur Typografie     */
/* ----------------------------------------------------- */

.cdwp-layout-minimal .cdwp-unit {
	padding: 0.25rem 0.5rem;
}

.cdwp-layout-minimal .cdwp-value {
	color: var(--cdwp-accent);
}

.cdwp-layout-minimal .cdwp-sep {
	display: flex;
	align-items: center;
	font-size: var(--cdwp-fontsize);
	opacity: 0.3;
}

.cdwp-layout-minimal .cdwp-sep::before {
	content: "/";
}

/* ------------------- */
/* Responsive Anpassung */
/* ------------------- */

@media (max-width: 480px) {
	.cdwp-units {
		flex-wrap: wrap;
	}

	.cdwp-layout-circles .cdwp-unit {
		flex-basis: 40%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdwp-countdown * {
		transition: none !important;
		animation: none !important;
	}
}