/*
 * AS Delivery Times - Frontend
 * Bewusst minimales Grundgerüst ohne Design - das eigentliche Styling wird
 * separat umgesetzt.
 */

.as-delivery-time {
	margin: 1em 0;
}

.as-delivery-time__value {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 0.25em;
}

/*
 * Kein Infotext für den aktuell aufgelösten Code hinterlegt (z. B. weil die
 * "info"-Zeile in AS_DT_Plugin::get_definitions() für diesen Code
 * auskommentiert ist) - Button und Box bleiben im Markup (fürs JS beim
 * Variantenwechsel), werden aber ausgeblendet.
 */
.as-delivery-time--no-info .as-delivery-time__info-toggle,
.as-delivery-time--no-info .as-delivery-time__info {
	display: none;
}

/*
 * Produkt (bzw. die aktuell gewählte Variante) ist nicht auf Lager - der
 * ganze Block bleibt im Markup (fürs JS beim Variantenwechsel), wird aber
 * komplett ausgeblendet statt eine irreführende Lieferzeit anzuzeigen.
 */
.as-delivery-time.as-delivery-time--out-of-stock {
	display: none;
}

/*
 * Kein eigener Kreis-Hintergrund mehr: Das SVG (Font-Awesome-"info-circle")
 * bringt Kreis und "i" bereits als einen einzigen gefüllten Pfad mit
 * ausgestanztem Buchstaben mit - ein zusätzlicher Kreis-Hintergrund würde
 * sich mit dem eigenen Kreis des Icons überlagern. Die Füllfarbe kommt über
 * "color" (currentColor im SVG, siehe .as-delivery-time__info-icon svg).
 */
.as-delivery-time__info-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3em;
	height: 1.3em;
	padding: 0;
	border: none;
	background: none;
	color: #01215a;
	cursor: pointer;
}

/*
 * Unsichtbare "Hover-Brücke": schliesst die kurze Lücke zwischen Icon und
 * Infobox, damit der Hover beim Reinbewegen des Cursors in den Text nicht
 * kurz abreisst. Zählt CSS-technisch als Hover auf dem Button selbst (Pseudo-
 * Elemente gehören zum Hit-Test-Bereich ihres Elements), ohne dass der
 * sichtbare/klickbare Trigger-Bereich grösser als das Icon werden muss.
 */
.as-delivery-time__info-toggle:after {
    content: "";
    position: absolute;
    top: -50%;
    left: 50%;
    width: 3em;
    height: 300%;
    transform: translateX(-50%);
}

.as-delivery-time__info-icon {
	display: inline-flex;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.as-delivery-time__info-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/*
 * Schwebendes Tooltip: liegt absolut positioniert über dem nachfolgenden
 * Content (Preis, Warenkorb-Button etc.), statt wie ein Akkordeon Platz im
 * Layout einzunehmen und Inhalte nach unten zu schieben. Dafür ist
 * .as-delivery-time__value (der Elternkontext) "position: relative" - die
 * Box wird relativ dazu positioniert (volle Zeilenbreite, direkt darunter).
 * Optisch eine Tooltip-Bubble (hellgrauer, abgerundeter Kasten mit kleinem
 * Spickel/Pfeil Richtung Info-Icon).
 *
 * Aufgeteilt in zwei Ebenen, da eine Tooltip-Bubble sowohl "overflow: hidden"
 * braucht (für die max-height-Collapse-Animation) als auch einen über den
 * Rand hinausragenden Pfeil - beides gleichzeitig auf einem Element
 * widerspricht sich (der Pfeil würde vom eigenen overflow:hidden
 * mit-abgeschnitten). Aussen (.as-delivery-time__info) übernimmt Position,
 * Pfeil, Fade-/Abstand-Animation; innen (.as-delivery-time__info-inner)
 * übernimmt Bubble-Optik und die Höhen-Collapse-Animation.
 *
 * Auf-/Zuklappen wird über max-height/padding/opacity animiert statt über
 * display:none<->block, da display nicht transitionierbar ist. Der
 * aria-hidden-Zustand wird zusätzlich per JS synchron gehalten (siehe
 * frontend.js), damit geschlossener Inhalt trotz sichtbarer Höhe > 0px
 * (wegen der Transition) nicht von Screenreadern gelesen wird.
 */
.as-delivery-time__info {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 20;
	margin-top: 0;
	opacity: 0;
	transition: margin-top 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ), opacity 0.3s ease;
}

/*
 * Der Spickel: ein um 45° gedrehtes Quadrat, dessen untere Hälfte hinter der
 * Bubble "versteckt" ist - Standardtechnik für CSS-Tooltip-Pfeile. Die
 * horizontale Position (--as-dt-arrow-left) wird per JS auf die Mitte des
 * Info-Icons ausgerichtet (siehe frontend.js), da dessen Position je nach
 * Länge des Lieferzeit-Werts variiert.
 */
.as-delivery-time__info:before {
	content: "";
	position: absolute;
	top: -8px;
	left: var( --as-dt-arrow-left, 12px );
	width: 16px;
	height: 16px;
	background: #f0f0f0;
	border-radius: 2px;
	transform: translateX( -50% ) rotate( 45deg );
}

/*
 * Trigger bewusst eng gehalten (nur Icon-Hover/-Fokus, siehe Hover-Brücke
 * oben), plus ein Fallback auf ":hover"/"focus-within" der Infobox selbst -
 * sobald der Cursor bzw. Fokus tatsächlich darin ist (z. B. um einen Link im
 * Infotext anzuklicken), bleibt sie offen, auch ohne die Brücke.
 */
.as-delivery-time__info-toggle:hover ~ .as-delivery-time__info,
.as-delivery-time__info-toggle:focus ~ .as-delivery-time__info,
.as-delivery-time__info:hover,
.as-delivery-time__info:focus-within,
.as-delivery-time__info.as-delivery-time__info--open {
	margin-top: 0.6em;
	opacity: 1;
}

.as-delivery-time__info-inner {
	max-height: 0;
	padding: 0 0.8em;
	overflow: hidden;
	background: #f0f0f0;
	border-radius: 8px;
	font-size: 0.9em;
	transition: max-height 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ),
		padding 0.35s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.as-delivery-time__info-toggle:hover ~ .as-delivery-time__info .as-delivery-time__info-inner,
.as-delivery-time__info-toggle:focus ~ .as-delivery-time__info .as-delivery-time__info-inner,
.as-delivery-time__info:hover .as-delivery-time__info-inner,
.as-delivery-time__info:focus-within .as-delivery-time__info-inner,
.as-delivery-time__info.as-delivery-time__info--open .as-delivery-time__info-inner {
	max-height: 320px;
	padding: 0.6em 0.8em;
}