/**
 * ESLL Tooltip – Frontend-Overrides.
 *
 * Gilt NUR für die per Plugin erzeugten Inline-Tooltips (.esll-tooltip + .tooltip),
 * damit die bestehenden "?"-Tooltips (Tarif-Filter etc.) unverändert bleiben.
 * Theme-SCSS wird nicht angefasst.
 */

/* Symmetrischer Abstand: rechts genauso viel Platz wie links */
.esll-tooltip + .tooltip {
	margin-left: .25rem;
	margin-right: .25rem;

	/*
	 * Wichtig für iOS/Safari: Ohne cursor:pointer feuert auf einem <span>
	 * kein zuverlässiges click-/Tap-Event -> der Toggle-Handler bliebe stumm.
	 */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Blaue Box an die Textlänge anpassen statt 100vw */
.esll-tooltip + .tooltip .tooltip__body {
	width: max-content;
	max-width: min(22rem, calc(100vw - (var(--padding-x, 1rem) * 2)));
	white-space: normal;

	/* Body-Schriftart übernehmen (statt Heading-Font) */
	font-family: var(--font__copy);

	/*
	 * Zentrierung über dem Badge auch auf Mobile.
	 * Das Theme zentriert die Box nur im @media (--extra-wide)-Block;
	 * der Default-Block kompiliert zu einem kaputten Selektor und greift nie.
	 * Ohne left:50% zieht der Transform translateX(-50%) die Box nach links.
	 */
	left: 50%;
	right: auto;
}

/*
 * Pfeil (::after): zeigt auf das Badge.
 * Fallback = mittig (Theme-Logik). Das JS setzt --esll-arrow-left, wenn die
 * Box randbedingt seitlich verschoben wird, damit der Pfeil trotzdem auf das "?" zeigt.
 */
.esll-tooltip + .tooltip .tooltip__body::after {
	left: var(--esll-arrow-left, calc(50% - .75rem));
	right: auto;
}

/*
 * Touch-Support: auf Mobilgeräten gibt es kein echtes :hover.
 * Das JS setzt beim Antippen die Klasse .is-open – hier spiegeln wir
 * exakt die Sichtbarkeits-/Positions-Regeln des Theme-:hover-Zustands.
 */
.esll-tooltip + .tooltip.is-open .tooltip__body {
	display: inline-block;
	opacity: 1;
	visibility: visible;
}

.esll-tooltip + .tooltip.is-open:not([class*="position--"]) .tooltip__body {
	transform: translateX(-50%) translateY(0);
}