/**
 * studiobro - Countdown-Leiste unter dem Header (Einzelprodukt)
 * Ablage: wp-content/mu-plugins/studiobro-product-countdown.css
 * Gehoert zu studiobro-product-countdown.php, wird von dort im <head> eingebunden.
 *
 * Aufbau und Masse nach Vorbild eraformaudio.com (dort nachgemessen):
 *   [ Kampagnen-Text ]   [47][47][47][47]   [ alter Preis  neuer Preis ]  [ Kaufen ]
 *   Leiste: 15 % Schwarz + 10px Blur, 16px Innenabstand oben/unten (= 80px hoch)
 *   Zahlenboxen: 47 x 47px, 10 % Weiss, 4px Radius, 5px Abstand
 *
 * Wo die Leiste im Dokument steht
 * -------------------------------
 * Das JS haengt die Leiste IN den fixen Theme-Header (header.site-header), direkt
 * hinter dessen .container. Grund: Der Header hat unten einen bis zu 100px hohen,
 * durchsichtigen Verlauf (padding-bottom mit linear-gradient), der beim Scrollen
 * ein- und ausfaehrt. Eine Leiste ausserhalb des Headers laege entweder unter
 * diesem Verlauf (nicht klickbar, z-index) oder zu tief (Header-Hoehe inkl.
 * Verlauf). Im Header sitzt sie im Fluss genau unter der Menuezeile, ueber dem
 * Verlauf - ohne Messen.
 *
 * Solange das JS die Leiste noch nicht verschoben hat (oder kein Header gefunden
 * wurde), greift die Rueckfallebene ganz unten: fest am oberen Rand.
 *
 * Damit die Leiste wirklich durchsichtig ist, bekommt der Header-Hintergrund an
 * ihrer Stelle ein "Fenster" (Regel "Header-Hintergrund mit Fenster" unten).
 */

:root {
	--sb-cd-bar-h: 80px;    /* echte Leistenhoehe, setzt das JS nach dem Messen */
	--sb-cd-push: 0px;      /* um wie viel der Seiteninhalt nach unten muss, setzt das JS */
	--sb-cd-bar-top: 91px;  /* Oberkante der Leiste innerhalb des Headers, setzt das JS */
	--sb-cd-grad-h: 191px;  /* Laenge des Header-Verlaufs (Header ohne Leiste), setzt das JS */
}

/* Seiteninhalt um die Leistenhoehe nach unten schieben. Das Theme haelt unter
   dem Menue einen festen Abstand frei (.first-container: 171px Desktop = Menue
   91px + 80px Luft). Die Leiste ist genau 80px hoch und wuerde diese Luft
   komplett auffuellen - das Produktbild klebte direkt an ihr. Mit dem Versatz
   bleibt derselbe Abstand zwischen Leiste und Bild wie sonst zwischen Menue und
   Bild. Der Header ist fixed, padding-top am body verschiebt also nur den Inhalt. */
body.sb-has-countdown {
	padding-top: var(--sb-cd-push);
}

/* Header-Hintergrund mit "Fenster" fuer die Leiste (Desktop) --------------------
   Der Theme-Header sieht so aus: oben schwarz, nach unten ins Durchsichtige
   verlaufend (der weiche Schatten unter dem Menue, bis zu 100px padding-bottom);
   nach dem Scrollen (body.scrolled) kompakt und einfarbig #202530. Das soll so
   bleiben - inklusive Abstand zum Produktbild, den das Theme aus der Header-Hoehe
   ableitet.

   Nur darf dieser Hintergrund nicht HINTER der Leiste liegen, sonst hat der Blur
   nichts als Schwarz zu verwischen. Deshalb malt nicht mehr der Header selbst,
   sondern zwei Pseudo-Elemente: ::before ueber der Leiste, ::after darunter.
   Beide zeigen denselben Verlauf wie das Theme, so versetzt, dass er unter der
   Leiste nahtlos weiterlaeuft - als waere die Leiste ein Fenster im Header.
   Die Masse (Oberkante der Leiste, Verlaufslaenge) liefert das JS als Variablen.

   Auf Handy (<= 780px) haengt die Leiste ausserhalb der Header-Box, dort bleibt
   der Header komplett unangetastet. */
@media screen and (min-width: 781px) {
	body.sb-has-countdown header.site-header {
		background: none !important; /* auch gegen body.scrolled .site-header */
	}

	body.sb-has-countdown header.site-header::before,
	body.sb-has-countdown header.site-header::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		z-index: -2; /* unter der Leiste (-1), ueber nichts anderem */
		pointer-events: none;
		background-image: linear-gradient(#000 0, rgba(0, 0, 0, 0) 100%);
		background-repeat: no-repeat;
		background-size: 100% var(--sb-cd-grad-h);
		/* Die "Schatten-Animation" des Themes: Beim Scrollen verschwindet der
		   Verlauf sofort, waehrend die graue Flaeche in 0,5s weich einblendet
		   (Header hat transition: .5s). Hier genauso - deshalb startet die Farbe
		   als voll durchsichtiges Grau und wird nur ueber die Deckkraft animiert. */
		background-color: rgba(32, 37, 48, 0);
		transition: background-color 0.5s;
	}

	/* ueber der Leiste: Verlauf von oben */
	body.sb-has-countdown header.site-header::before {
		top: 0;
		height: var(--sb-cd-bar-top);
		background-position: 0 0;
	}

	/* unter der Leiste: derselbe Verlauf, um die Oberkante der Leiste nach oben
	   verschoben - laeuft so genau dort weiter, wo er ueber der Leiste aufhoerte.
	   bottom: 0 folgt dem padding-bottom des Themes (Ein-/Ausfahren beim Scrollen). */
	body.sb-has-countdown header.site-header::after {
		top: calc(var(--sb-cd-bar-top) + var(--sb-cd-bar-h));
		bottom: 0;
		background-position: 0 calc(-1 * var(--sb-cd-bar-top));
	}

	/* gescrollt: Theme schaltet auf einfarbig #202530 - hier ebenso, aber nur
	   OBERHALB der Leiste. Unterhalb laesst das Theme 15px Rand; grau gefuellt
	   saehe der unter der durchsichtigen Leiste wie ein eigener Balken aus.
	   Deshalb bleibt ::after gescrollt durchsichtig - die Leiste ist dann die
	   Unterkante des Headers. */
	body.scrolled.sb-has-countdown header.site-header::before {
		background-image: none;
		background-color: #202530;
	}

	body.scrolled.sb-has-countdown header.site-header::after {
		background-image: none;
	}
}

/* Die Leiste (im Header) ---------------------------------------------------- */
.sb-countdown {
	position: relative;
	/* Negativ: liegt ueber dem Header-Hintergrund, aber unter Menue, Warenkorb-
	   Aufklapper und Sprachmenue des Headers - die duerfen sie ueberlagern. */
	z-index: -1;
	box-sizing: border-box;
	width: 100%;
	padding: 16px 0;
	color: #fff;
	background: rgba(0, 0, 0, 0.15);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	line-height: 1.1;
	transition: opacity 0.25s ease;
}

/* Innenbereich: bekommt zusaetzlich die Theme-Klasse "container", damit die
   linke Kante buendig mit dem Logo steht (gleiche Seitenabstaende, gleiche
   Breakpoints). Die Flex-Regeln hier ergaenzen das nur. */
.sb-countdown .sb-countdown__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	box-sizing: border-box;
}

.sb-countdown__label {
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

/* Countdown-Zahlen -------------------------------------------------------- */
.sb-countdown__timer {
	display: flex;
	align-items: center;
	gap: 5px;
}

.sb-countdown__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 47px;
	height: 47px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 17.6px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Preis rechts ------------------------------------------------------------ */
.sb-countdown__spacer {
	flex: 1 1 auto;
}

.sb-countdown__price {
	display: flex;
	align-items: baseline;
	gap: 13px;
	white-space: nowrap;
	font-size: 17px;
}

.sb-countdown__price-old,
.sb-countdown__price-old .woocommerce-Price-amount {
	font-weight: 400;
	text-decoration: line-through;
	opacity: 0.7;
}

.sb-countdown__price-new,
.sb-countdown__price-new .woocommerce-Price-amount {
	font-weight: 700;
}

/* Kaufen-Button: eraform-Geometrie, studiobro-Tuerkis ---------------------- */
/* Doppelte Klasse im Selektor, damit die Theme-Regeln fuer a.button
   (Montserrat, 16px, 60px hoch, Hover-Farbe) nicht durchschlagen. */
.sb-countdown .sb-countdown__buy.button,
.sb-countdown .sb-countdown__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 47px;
	padding: 0 50px;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: #03a9be;
	color: #fff;
	font-family: inherit;
	font-size: 14.4px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.sb-countdown .sb-countdown__buy:hover,
.sb-countdown .sb-countdown__buy:focus-visible {
	background: #04828f;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(3, 169, 190, 0.35);
}

.sb-countdown .sb-countdown__buy:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Zwei Texte im Button: auf Desktop der lange, auf schmalen Handys der kurze */
.sb-countdown__buy-short {
	display: none;
}

/* Woo markiert den Ajax-Button waehrend/nach dem Hinzufuegen */
.sb-countdown .sb-countdown__buy.loading {
	opacity: 0.6;
	pointer-events: none;
}

.sb-countdown .sb-countdown__buy.added::after {
	content: "\2713";
	margin-left: 8px;
}

/* Ausgeblendet nach Ablauf (JS setzt zusaetzlich hidden) */
.sb-countdown.is-expired {
	opacity: 0;
	pointer-events: none;
}

/* Rueckfallebene: Leiste (noch) nicht im Header -> fest am oberen Rand */
body > .sb-countdown {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
}

/* Grosse Tablets / kleine Desktops (1025-1280px): Desktop-Aufbau, etwas enger */
@media screen and (max-width: 1280px) {
	.sb-countdown {
		padding: 12px 0;
	}
	.sb-countdown .sb-countdown__inner {
		gap: 16px;
	}
	.sb-countdown__label {
		font-size: 14px;
	}
	.sb-countdown .sb-countdown__buy.button,
	.sb-countdown .sb-countdown__buy {
		padding: 0 30px;
	}
}

/* iPad + Handy (<= 1024px): kompakter Aufbau wie eraform auf kleinen Breiten
   (dort nachgemessen bei 768px und 375px):
     Leiste 10px oben/unten (64px hoch), kein Kampagnen-Text,
     Kacheln 32 x 32px / 14,4px / 5px Abstand,
     Preise gestapelt (alt ueber neu, rechtsbuendig, 17px),
     Button 43px hoch, 35px seitlich, 14,4px. */
@media screen and (max-width: 1024px) {
	.sb-countdown {
		padding: 10px 0;
	}
	.sb-countdown .sb-countdown__inner {
		gap: 10px;
	}
	.sb-countdown__label {
		display: none;
	}
	.sb-countdown__timer {
		flex-shrink: 0;
	}
	.sb-countdown__cell {
		width: 32px;
		height: 32px;
		font-size: 14.4px;
	}
	.sb-countdown__price {
		flex-direction: column;
		align-items: flex-end;
		gap: 0;
		line-height: 19px;
	}
	.sb-countdown .sb-countdown__buy.button,
	.sb-countdown .sb-countdown__buy {
		flex-shrink: 0;
		height: 43px;
		padding: 0 35px;
	}
}

/* Handy (<= 780px): Der Header ist hier 80px hoch und ein Flex-Container - die
   Leiste haengt sich deshalb absolut direkt darunter, statt in den Fluss. */
@media screen and (max-width: 780px) {
	.sb-countdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
	}
	.sb-countdown .sb-countdown__buy.button,
	.sb-countdown .sb-countdown__buy {
		padding: 0 24px;
	}
}

/* Schmale Handys (<= 480px): weniger Rand, kurzer Button-Text (siehe PHP: der
   Button traegt einen langen und einen kurzen Text, hier wird umgeschaltet). */
@media screen and (max-width: 480px) {
	.sb-countdown .sb-countdown__inner {
		padding-left: 12px;
		padding-right: 12px;
	}
	.sb-countdown .sb-countdown__buy.button,
	.sb-countdown .sb-countdown__buy {
		padding: 0 20px;
	}
	.sb-countdown__buy-long {
		display: none;
	}
	.sb-countdown__buy-short {
		display: inline;
	}
}