/* Pfad: wp-content/plugins/mm-portal-core/assets/css/user-menu/apc-avatar-badge.css
 * Wofür: Abo-Abzeichen am Profilbild + Hinweis beim Drüberfahren/Antippen.
 * Farben kommen je Bild als CSS-Variablen (--avb-c Farbe, --avb-i Symbolfarbe,
 * --avb-s Größe) aus APC_Avatar_Badge::wrap().
 * NEU 04.11.2026 (207) — siehe CHANGELOG.txt.
 * GEÄNDERT 04.11.2026 (210): Größe des Zeichens relativ zum ANGEZEIGTEN Bild
 * (42 %, 12–28 px). Vorher aus der angeforderten Bildgröße berechnet — bei
 * „Mein Account“ fragt der Code 192 px an, zeigt aber 22 px: das Zeichen war
 * größer als das Bild und hat es komplett verdeckt.
 */

.apc-avb {
	--avb-cut: #ffffff;           /* Trennrand zum Hintergrund */
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
	flex-shrink: 0;
}
.apc-avb > img { display: block; }

.apc-avb__mark {
	position: absolute;
	top: -8%;
	right: -10%;
	width: clamp(12px, 42%, 28px);
	height: auto;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--avb-c);
	color: var(--avb-i);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--avb-cut);
	z-index: 2;
	cursor: help;
	outline: none;
}
.apc-avb__mark svg { display: block; width: 60% !important; height: 60% !important; }
.apc-avb__mark:focus-visible { box-shadow: 0 0 0 2px var(--avb-cut), 0 0 0 4px var(--avb-c); }

/* Team-Mitglied: Ring in der Farbe des Agentur-Abos, Symbol nur als Umriss */
.apc-avb--member > img {
	outline: 2px solid var(--avb-c);
	outline-offset: 2px;
}
.apc-avb--member .apc-avb__mark {
	background: var(--avb-cut);
	color: var(--avb-c);
	border: 2px solid var(--avb-c);
}

/* ── Hinweis ─────────────────────────────────────────────── */
.apc-avb__tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 100001;
	box-sizing: border-box;
	width: max-content;
	min-width: 180px;
	max-width: 260px;
	padding: 9px 11px;
	border-radius: 10px;
	background: #2c2e36;
	border: 1px solid #3e414b;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
	color: #ecedf0;
	font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	display: flex;
	flex-direction: column;
	gap: 3px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, visibility .15s ease;
}
.apc-avb:hover > .apc-avb__tip,
.apc-avb__mark:focus + .apc-avb__tip {
	opacity: 1;
	visibility: visible;
}
.apc-avb__tip-name { font-weight: 700; font-size: 13px; color: #ffffff; }
.apc-avb__tip-line { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #d6d8de; }
.apc-avb__tip-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--avb-c); flex-shrink: 0; }
.apc-avb--member .apc-avb__tip-dot { background: transparent; border: 2px solid var(--avb-c); box-sizing: border-box; }
.apc-avb__tip-why  { color: #b5b8c0; }

/* „Mein Account“ oben rechts: Hinweis nach unten, rechtsbündig */
.apc-avb--account > .apc-avb__tip {
	top: calc(100% + 10px);
	bottom: auto;
	left: auto;
	right: 0;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.apc-avb__tip { transition: none; }
}

/* ── Admin-Leiste: "#wpadminbar *" setzt position:static, width/height:auto,
 *    border-radius:0 usw. für jedes Element — hier gezielt zurückholen. ── */
#wpadminbar .apc-avb {
	position: relative !important;
	display: inline-block !important;
	line-height: 0 !important;
	vertical-align: middle;
}
#wpadminbar .apc-avb__mark {
	position: absolute !important;
	top: -8% !important;
	right: -10% !important;
	width: clamp(12px, 42%, 28px) !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 0 !important;
}

/* ── Dunkle Untergründe ──────────────────────────────────── */
#wpadminbar .apc-avb,
#apc-account-badge-float .apc-avb { --avb-cut: #1d2327; }
.apc-dashboard-header .apc-avb { --avb-cut: #0f0f0f; }
.apc-author-box .apc-avb { --avb-cut: var(--apc-ab-bg, #ffffff); }

/* ── Stellen, deren Rahmen das Zeichen sonst abschneiden würde ── */
.apc-team-card-photo:has(.apc-avb) { overflow: visible; }
.apc-team-card-photo .apc-avb,
.apc-team-card-photo .apc-avb > img { width: 100%; height: 100%; }
.apc-team-card-photo .apc-avb > img { border-radius: 50%; object-fit: cover; }
.apc-dashboard-avatar-wrap .apc-avb,
.apc-ab-photo-wrap .apc-avb { display: block; }