/*
 * Shared document tooltip
 *
 * Applies only when the document form has the .has-tooltip class.
 * These rules intentionally override tooltip-related styles from
 * individual hero experiment stylesheets.
 */

.document-hero .document-form.has-tooltip .icons .option {
	position: relative !important;
	overflow: visible !important;
}

/* Tooltip container */
.document-hero .document-form.has-tooltip .icons .option > .dg-form-tooltip {
	position: absolute !important;
	z-index: 100 !important;
	top: calc(100% + 0.5rem) !important;
	right: auto !important;
	bottom: auto !important;
	left: 50% !important;

	display: block !important;
	width: max-content !important;
	max-width: 11rem !important;
	height: auto !important;

	margin: 0 !important;
	padding: 8px 12px !important;

	border: 0 !important;
	border-radius: 8px !important;
	background: #262038 !important;
	background-color: #262038 !important;
	box-shadow: none !important;

	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 21px !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: normal !important;

	pointer-events: none !important;
	opacity: 0 !important;
	visibility: hidden !important;

	transform: translate(-50%, -0.25rem) !important;
	transition:
		opacity 0.15s ease-in-out,
		transform 0.15s ease-in-out,
		visibility 0.15s ease-in-out !important;
}

/* Ensure nested tooltip content also stays white. */
.document-hero .document-form.has-tooltip .icons .option > .dg-form-tooltip,
.document-hero .document-form.has-tooltip .icons .option > .dg-form-tooltip * {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* Tooltip arrow */
.document-hero .document-form.has-tooltip .icons .option > .dg-form-tooltip::after {
	position: absolute !important;
	top: auto !important;
	right: auto !important;
	bottom: 100% !important;
	left: 50% !important;

	width: 0 !important;
	height: 0 !important;
	margin: 0 0 0 -0.3125rem !important;
	padding: 0 !important;

	border-width: 0 0.3125rem 0.3125rem !important;
	border-style: solid !important;
	border-color: transparent transparent #262038 !important;
	background: transparent !important;

	content: "" !important;
	transform: none !important;
}

/* Show only the tooltip belonging to the hovered or focused card. */
.document-hero .document-form.has-tooltip .icons .option:hover > .dg-form-tooltip,
.document-hero .document-form.has-tooltip .icons .option:focus-within > .dg-form-tooltip {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate(-50%, 0) !important;
}

/* Keep every non-active tooltip hidden, including selected cards. */
.document-hero .document-form.has-tooltip .icons .option:not(:hover):not(:focus-within) > .dg-form-tooltip {
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translate(-50%, -0.25rem) !important;
}

/* Tooltips remain disabled on tablet/mobile. */
@media (max-width: 767px) {
	.document-hero .document-form.has-tooltip .icons .option > .dg-form-tooltip,
	.document-hero .document-form.has-tooltip .icons .option:hover > .dg-form-tooltip,
	.document-hero .document-form.has-tooltip .icons .option:focus-within > .dg-form-tooltip {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}
}