/**
 * Content & Media Organizer — Frontend KI-Badge
 *
 * Bewusst minimal und ohne Abhängigkeit von den Admin-Design-Tokens,
 * da diese Datei unabhängig vom Plugin-Backend auf beliebigen
 * Theme-Frontends geladen wird.
 *
 * Zwei Farbmodi:
 * 1. Kostenlos: Theme-Klassen (.cmo-ai-badge--theme-light /
 *    --theme-dark) – feste, hier definierte Farben.
 * 2. Mit gültiger Lizenz: Inline-CSS-Variablen pro Badge (siehe
 *    FrontendBadge::render_badge_span()) überschreiben die
 *    Theme-Klasse mit frei gewählten Farben.
 */

.cmo-ai-badge-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.cmo-ai-badge-wrap img {
	display: block;
}

.cmo-ai-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: var(--cmo-badge-bg, #1B2340);
	color: var(--cmo-badge-color, #FFFFFF);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
}

/* Kostenlose Theme-Varianten (nur relevant ohne freie Farbwahl – bei
   gültiger Lizenz überschreiben die Inline-Variablen oben diese
   Werte automatisch, da die Theme-Klasse dann gar nicht erst gesetzt
   wird, siehe FrontendBadge::render_badge_span()). */
.cmo-ai-badge--theme-dark {
	background: #000000;
	color: #FFFFFF;
}

.cmo-ai-badge--theme-light {
	background: #FFFFFF;
	color: #000000;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.cmo-ai-badge__icon {
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	fill: currentColor;
}

.cmo-ai-badge__icon--custom {
	object-fit: contain;
}

.cmo-ai-badge__text {
	display: inline-block;
}

/* Größen */
.cmo-ai-badge--small {
	font-size: 10px;
	padding: 2px 8px;
	margin: 6px;
}

.cmo-ai-badge--medium {
	font-size: 12px;
	padding: 3px 10px;
	margin: 8px;
}

.cmo-ai-badge--large {
	font-size: 14px;
	padding: 4px 12px;
	margin: 10px;
}

/* Positionen */
.cmo-ai-badge-pos-top-left .cmo-ai-badge {
	top: 0;
	left: 0;
}

.cmo-ai-badge-pos-top-right .cmo-ai-badge {
	top: 0;
	right: 0;
}

.cmo-ai-badge-pos-bottom-left .cmo-ai-badge {
	bottom: 0;
	left: 0;
}

.cmo-ai-badge-pos-bottom-right .cmo-ai-badge {
	bottom: 0;
	right: 0;
}

/* Manueller Fallback (Shortcode [cmo_ai_badge]), z. B. für CSS-
   Hintergrundbilder: fließt normal im Text statt absolut positioniert
   zu werden, damit der Redakteur es selbst frei platzieren kann. */
.cmo-ai-badge--standalone {
	position: static;
}