/*
 * Badge-Basis im Frontend.
 *
 * Die Datei enthaelt nur die Regeln, die die --wcpb-*-Variablen konsumieren.
 * Die Werte selbst kommen aus einem CSS-Block pro Badge-Design, den
 * WCPB_Render erzeugt. Die frueheren Klassen size-*, style-outline und
 * has-shadow entfallen ersatzlos (Plan 7).
 */

.wcpb-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	padding: var(--wcpb-pad-t, 6px) var(--wcpb-pad-r, 12px) var(--wcpb-pad-b, 6px) var(--wcpb-pad-l, 12px);
	border: var(--wcpb-border-width, 0) solid var(--wcpb-border-color, transparent);
	border-radius: var(--wcpb-radius, 4px);
	background-color: var(--wcpb-bg, #1d2327);
	box-shadow: var(--wcpb-shadow, none);
	color: var(--wcpb-color, #fff);
	font-family: var(--wcpb-font-family, inherit);
	font-size: var(--wcpb-font-size, 14px);
	font-weight: var(--wcpb-font-weight, 600);
	gap: var(--wcpb-image-gap, 6px);
	line-height: 1.3;
	text-align: center;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/*
 * Bild und Text im Badge.
 *
 * Die Reihenfolge macht das Markup (WCPB_Render::badge_inner()), nicht `order` -
 * so bleibt die vorgelesene Reihenfolge die sichtbare.
 *
 * Eingestellt wird nur die Hoehe; die Breite folgt dem Seitenverhaeltnis. Ein
 * sehr breites Motiv wuerde das Badge sonst quer ueber die Seite ziehen,
 * deshalb die harte Kappung - sie greift nur dort, wo die Einstellung allein
 * nicht reicht.
 *
 * Warum geschachtelt und mit !important: das Badge liegt im Frontend mitten
 * in WooCommerces Produktbild-Bereich, und dort steht
 * `.woocommerce ul.products li.product a img { width: 100%; height: auto; }`
 * - drei Klassen und drei Elemente, im Loop wie auf der Produktseite. Gegen
 * die Zeile kommt eine einzelne Klasse nicht an: das Badge-Bild bekaeme
 * `height: auto` und stuende in Originalgroesse da, waehrend die Vorschau im
 * Admin, wo diese Regeln fehlen, richtig aussieht. Themes legen nach
 * demselben Muster nach, ein knappes Ueberbieten der Spezifitaet reicht
 * deshalb nicht.
 *
 * !important tragen nur die drei Eigenschaften, die die Groesse ausmachen -
 * alles andere bleibt ueberschreibbar. `display` gehoert bewusst nicht dazu:
 * die Vorschau versteckt das leere <img> per [hidden], und das setzt
 * admin.css mit !important durch.
 */
.wcpb-badge .wcpb-badge__image {
	display: block;
	flex: 0 0 auto;
	width: auto !important;
	min-width: 0;
	max-width: 120px !important;
	height: var(--wcpb-image-size, 16px) !important;
	max-height: none;
	object-fit: contain;
}

/*
 * Reines Bild-Badge: das Text-Element steht immer im Markup, damit die
 * Vorschau-JS ein festes Ziel hat. Leer darf es aber keine Luecke erzeugen -
 * `display: none` nimmt es auch aus dem `gap` heraus.
 */
.wcpb-badge__text:empty {
	display: none;
}

/*
 * Der Hover-Zustand.
 *
 * Er haengt bewusst am Wrapper, nicht am Badge: `.wcpb-badge-link` entsteht in
 * WCPB_Render::wrap_interaction() genau dann, wenn die aufgeloeste Interaktion
 * eine ist. Damit gilt "keine Aktion, kein Hover" ohne eine einzige Bedingung
 * im PHP - auch dann, wenn dasselbe Badge einmal mit und einmal ohne Aktion auf
 * derselben Seite steht. Ein Block pro Badge-ID koennte das nicht auseinander
 * halten.
 *
 * Die Werte kommen als --wcpb-hover-* aus dem Badge-Block; ist dort nichts
 * gesetzt, hat WCPB_Design::hover_vars() bereits den Normalwert eingesetzt.
 * Der zweite Fallback greift also nur, wenn ein Badge gar keinen Block hat.
 *
 * `.wcpb-is-hoverable` ist der Notausgang fuer die Admin-Vorschauen: dort steht
 * das Badge ohne Wrapper, soll seinen Hover aber vorfuehren koennen.
 */
.wcpb-badge-link:hover > .wcpb-badge,
.wcpb-badge-link:focus-visible > .wcpb-badge,
.wcpb-badge.wcpb-is-hoverable:hover {
	border-color: var(--wcpb-hover-border-color, var(--wcpb-border-color, transparent));
	background-color: var(--wcpb-hover-bg, var(--wcpb-bg, #1d2327));
	color: var(--wcpb-hover-color, var(--wcpb-color, #fff));
}

/* Der Wrapper eines interaktiven Badges. */
.wcpb-badge-link {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-decoration: none;
}

.wcpb-badge-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- Container ---------------------------------------------------------- */

.wcpb-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcpb-gap, 8px);
}

.wcpb-badges--nowrap {
	flex-wrap: nowrap;
}

.wcpb-align-left {
	justify-content: flex-start;
}

.wcpb-align-center {
	justify-content: center;
}

.wcpb-align-right {
	justify-content: flex-end;
}

/* --- Bild-Overlay ------------------------------------------------------- */

.wcpb-overlay {
	position: absolute;
	z-index: 9;
	display: flex;
	gap: var(--wcpb-gap, 6px);
	/* Das Overlay selbst faengt keine Klicks ab, die Badges darin schon. */
	pointer-events: none;
}

.wcpb-overlay > * {
	pointer-events: auto;
}

.wcpb-overlay--stack-y {
	flex-direction: column;
	align-items: flex-start;
}

.wcpb-overlay--stack-x {
	flex-direction: row;
}

.wcpb-overlay--top-left {
	top: var(--wcpb-ov-inset, 10px);
	left: var(--wcpb-ov-inset, 10px);
}

.wcpb-overlay--top-right {
	top: var(--wcpb-ov-inset, 10px);
	right: var(--wcpb-ov-inset, 10px);
	align-items: flex-end;
}

.wcpb-overlay--bottom-left {
	bottom: var(--wcpb-ov-inset, 10px);
	left: var(--wcpb-ov-inset, 10px);
}

.wcpb-overlay--bottom-right {
	right: var(--wcpb-ov-inset, 10px);
	bottom: var(--wcpb-ov-inset, 10px);
	align-items: flex-end;
}

/*
 * Der Wrapper, den WCPB_Frontend im Loop um das Produktbild legt. Er ist der
 * Grund, warum "Abstand zum Bildrand" in der Kachel dasselbe misst wie auf der
 * Einzelseite: ohne ihn ist der naechste positionierte Vorfahre die ganze
 * Kachel und der Abstand zaehlt ab deren Rand, nicht ab dem Bild.
 */
.wcpb-imgwrap {
	position: relative;
	display: block;
}

/*
 * Ein Inline-Bild laesst unter sich den Platz der Unterlaenge stehen. Der
 * Wrapper waere dadurch hoeher als das Bild - und ein Badge in einer unteren
 * Ecke saesse um diese Differenz zu tief.
 */
.wcpb-imgwrap img {
	vertical-align: middle;
}

/*
 * Das Overlay braucht einen Bildcontainer mit position: relative. Woos eigene
 * Templates liefern das, aber nicht jedes Theme tut es verlaesslich - deshalb
 * diese defensive Regel fuer die bekannten Container. Weicht ein Theme davon
 * ab, gibt es in den Slot-Einstellungen einen Selektor als Notausgang
 * (Plan 9.1).
 */
.woocommerce div.product,
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
}

/*
 * Setzt relocate.js, wenn ein Overlay trotz allem keinen positionierten
 * Container ueber sich hat. Ohne Kontext richtet sich `position: absolute`
 * nach dem Viewport-Ursprung aus und das Badge steht irgendwo auf der Seite -
 * ein Badge an der falschen Stelle ist schlechter als keines. Zwei Klassen,
 * damit die Regel ohne !important gegen `.wcpb-overlay` gewinnt.
 *
 * Bewusst nur per JS: ohne Skript bleibt die Sichtbarkeit wie bisher.
 */
.wcpb-overlay.wcpb-overlay--orphan {
	display: none;
}

/* --- Popup -------------------------------------------------------------- */

.wcpb-popup {
	position: fixed;
	z-index: 99999;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wcpb-popup[hidden] {
	display: none;
}

.wcpb-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}

.wcpb-popup__dialog {
	position: relative;
	box-sizing: border-box;
	width: min(90%, 520px);
	max-height: 85vh;
	overflow-y: auto;
	padding: 28px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
}

.wcpb-popup__close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: none;
	color: #999;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
}

.wcpb-popup__title {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.wcpb-popup__content {
	line-height: 1.6;
}