/* YWPAR - Hilfetext */

/* Hinweisbox von YITH darf das Info-Feld nicht abschneiden */
#yith-par-message-cart,
#yith-par-message-cart > div,
.woocommerce-info:has(.ywpar-helptext),
.woocommerce-info:has(.ywpar-helptext) div {
	overflow: visible !important;
}

.ywpar-helptext {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: 4px;
	line-height: 1;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.ywpar-helptext__icon {
	display: inline-flex;
	align-items: center;
	font-size: 18px;
	line-height: 1;
}

.ywpar-helptext__icon img.emoji {
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	vertical-align: middle !important;
}

.ywpar-helptext:focus-visible {
	outline: 2px solid #25745b;
	outline-offset: 2px;
	border-radius: 50%;
}

/* Info-Feld */
.ywpar-helptext__tooltip {
	--ywpar-shift: 0px;
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	z-index: 9999;
	display: block;
	width: 320px;
	max-width: calc(100vw - 24px);
	box-sizing: border-box;
	padding: 18px 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(36, 59, 53, .18);
	font-family: Montserrat, Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	color: #243b35;
	text-align: left;
	white-space: normal;
	cursor: default;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(calc(-50% + var(--ywpar-shift)), 6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* unsichtbare Brücke, damit der Hover auf dem Weg zum Link nicht abreißt */
.ywpar-helptext__tooltip::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

/* Pfeil – zeigt immer auf das Icon, auch wenn das Feld verschoben wurde */
.ywpar-helptext__tooltip::after {
	content: "";
	position: absolute;
	top: -6px;
	left: calc(50% - var(--ywpar-shift));
	width: 12px;
	height: 12px;
	background: #fff;
	transform: translateX(-50%) rotate(45deg);
	box-shadow: -3px -3px 6px rgba(36, 59, 53, .06);
}

.ywpar-helptext__text {
	display: block;
}

.woocommerce-info a.ywpar-helptext__link,
.ywpar-helptext__link:visited {
	display: block;
	width: fit-content;
	margin-top: 10px;
	color: #1a5fb4;
	font-weight: 500;
	text-decoration: underline;
}

.ywpar-helptext__link:hover,
.ywpar-helptext__link:focus {
	color: #25745b;
}

/* Sichtbar: per Klick / Tap / Tastatur … */
.ywpar-helptext.is-open .ywpar-helptext__tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(calc(-50% + var(--ywpar-shift)), 0);
}

/* … und per Hover nur auf Geräten mit echter Maus */
@media (hover: hover) {
	.ywpar-helptext:hover .ywpar-helptext__tooltip {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(calc(-50% + var(--ywpar-shift)), 0);
	}
}

/* Nach oben klappen, wenn unten zu wenig Platz ist */
.ywpar-helptext.is-above .ywpar-helptext__tooltip {
	top: auto;
	bottom: calc(100% + 12px);
	transform: translate(calc(-50% + var(--ywpar-shift)), -6px);
}

.ywpar-helptext.is-above .ywpar-helptext__tooltip::before {
	top: auto;
	bottom: -14px;
}

.ywpar-helptext.is-above .ywpar-helptext__tooltip::after {
	top: auto;
	bottom: -6px;
	box-shadow: 3px 3px 6px rgba(36, 59, 53, .06);
}

.ywpar-helptext.is-above.is-open .ywpar-helptext__tooltip {
	transform: translate(calc(-50% + var(--ywpar-shift)), 0);
}

@media (hover: hover) {
	.ywpar-helptext.is-above:hover .ywpar-helptext__tooltip {
		transform: translate(calc(-50% + var(--ywpar-shift)), 0);
	}
}

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