/* ==========================================================================
   Tooltip Component
   Structure: .sdh-tip-wrap > .sdh-tip (button) + .sdh-tooltip (panel)
   Trigger:   Gold lightbulb icon with shimmer animation
   Behaviour: Appears on hover / keyboard focus, 380ms delay on show
   ========================================================================== */

/* Wrapper — positioning context for the floating panel */
.sdh-tip-wrap {
	display: inline-flex;
	align-items: center;
	position: relative;
	vertical-align: middle;
}

/* ---- Trigger button ---- */
.sdh-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: help;
	color: #c9a227;
	flex-shrink: 0;
	transition: color 120ms ease;
}

.sdh-tip:hover {
	color: #e6c040;
}

.sdh-tip:focus-visible {
	outline: 2px solid rgba(201, 162, 39, 0.45);
	outline-offset: 2px;
}

/* ---- Lightbulb icon ---- */
.sdh-tip__icon {
	width: 18px;
	height: 18px;
	animation: sdh-shimmer 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes sdh-shimmer {
	0%, 100% {
		filter: drop-shadow(0 0 0 transparent);
		opacity: 1;
	}
	50% {
		filter: drop-shadow(0 0 4px rgba(201, 162, 39, 0.8));
		opacity: 0.75;
	}
}

/* ---- Tooltip bubble — hidden by default ---- */
.sdh-tooltip {
	position: absolute;
	z-index: 9999;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 230px;
	background: #1a2a36;
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.75rem;
	line-height: 1.5;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
	pointer-events: none;
	opacity: 0;
	transition: opacity 120ms ease 0ms; /* instant hide */
	white-space: normal;
	text-align: left;
}

/* Arrow pointing down at trigger */
.sdh-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1a2a36;
}

/* Show on hover / keyboard focus — delayed appear, instant hide */
.sdh-tip-wrap:hover .sdh-tooltip,
.sdh-tip-wrap:focus-within .sdh-tooltip {
	opacity: 1;
	transition: opacity 120ms ease 380ms;
}

/* ---- Flip modifier: tooltip opens below trigger ---- */
.sdh-tooltip--below {
	bottom: auto;
	top: calc(100% + 10px);
}

.sdh-tooltip--below::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: #1a2a36;
}

@media (max-width: 480px) {
	.sdh-tooltip {
		position: fixed;
		inset: auto 1rem 1rem;
		transform: none;
		width: auto;
		max-width: none;
	}

	.sdh-tooltip::after {
		display: none;
	}
}