/* ============================================================
 * FFT Box Office — Stadium Hotspots
 * Overlay-style clickable zones rendered on top of the seating
 * chart image inside `.seating-chart-wrapper`. Coords come from
 * the plugin (percentages) so the layout stays correct across
 * any image scale.
 *
 * IMPORTANT: every state is explicitly set with !important on
 * background/border/color/box-shadow because Elementor injects
 * default button styles (incl. its default pink hover) with
 * brutal specificity. If you remove a !important here, the pink
 * will leak through.
 * ============================================================ */

.fft-bo-stadium-frame {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	line-height: 0;
}

.fft-bo-stadium-frame img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}

/* Neutralize ALL Elementor button defaults before applying our own styling. */
.fft-bo-stadium-frame .fft-bo-hotspot,
button.fft-bo-hotspot {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 2px solid transparent !important;
	border-radius: 6px !important;
	color: transparent !important;
	font: inherit !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
	position: absolute;
	z-index: 2;
}

/* Hover/focus/active — gold tint for ticketed sections, red tint for inquiry zones.
   Pink is killed at every state. */
.fft-bo-stadium-frame .fft-bo-hotspot:hover,
.fft-bo-stadium-frame .fft-bo-hotspot:focus,
.fft-bo-stadium-frame .fft-bo-hotspot:focus-visible,
.fft-bo-stadium-frame .fft-bo-hotspot:active,
button.fft-bo-hotspot:hover,
button.fft-bo-hotspot:focus,
button.fft-bo-hotspot:focus-visible,
button.fft-bo-hotspot:active {
	background-color: rgba(212, 168, 67, .22) !important;
	background-image: none !important;
	border-color: rgba(212, 168, 67, .95) !important;
	color: transparent !important;
	box-shadow: 0 0 16px rgba(212, 168, 67, .55), inset 0 0 12px rgba(212, 168, 67, .25) !important;
	outline: none !important;
}

.fft-bo-stadium-frame .fft-bo-hotspot[data-action="inquire"]:hover,
.fft-bo-stadium-frame .fft-bo-hotspot[data-action="inquire"]:focus,
.fft-bo-stadium-frame .fft-bo-hotspot[data-action="inquire"]:focus-visible,
.fft-bo-stadium-frame .fft-bo-hotspot[data-action="inquire"]:active,
button.fft-bo-hotspot[data-action="inquire"]:hover,
button.fft-bo-hotspot[data-action="inquire"]:focus,
button.fft-bo-hotspot[data-action="inquire"]:focus-visible,
button.fft-bo-hotspot[data-action="inquire"]:active {
	background-color: rgba(229, 57, 53, .2) !important;
	border-color: rgba(229, 57, 53, .95) !important;
	box-shadow: 0 0 16px rgba(229, 57, 53, .55), inset 0 0 12px rgba(229, 57, 53, .25) !important;
}

/* Tooltip card — matches the reference style the client specified:
   dark slate background (#111), subtle 1px border, 6px rounded corners,
   compact padding, Oswald name / Barlow desc / Barlow Condensed price.
   ALL price text is plain white (no per-section accent color). */
.fft-bo-hotspot__label {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #111 !important;
	background-image: none !important;
	color: #F5F5F5 !important;
	padding: 10px 14px;
	border: 1px solid #2A2A2A !important;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
	z-index: 3;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
	text-align: left;
}

.fft-bo-hotspot__label::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #2A2A2A;
}

.fft-bo-hotspot__name {
	color: #F5F5F5 !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: none;
	line-height: 1.2;
}

.fft-bo-hotspot__desc {
	color: rgba(245, 245, 245, .55) !important;
	font-family: 'Barlow', sans-serif !important;
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.3;
	margin-top: 2px;
}

.fft-bo-hotspot__price {
	color: #F5F5F5 !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: none;
	line-height: 1.2;
	margin-top: 6px;
}

.fft-bo-stadium-frame .fft-bo-hotspot:hover .fft-bo-hotspot__label,
.fft-bo-stadium-frame .fft-bo-hotspot:focus-visible .fft-bo-hotspot__label {
	opacity: 1;
}

@media (max-width: 720px) {
	.fft-bo-hotspot__label {
		padding: 8px 12px;
	}
	.fft-bo-hotspot__name  { font-size: .85rem; }
	.fft-bo-hotspot__desc  { font-size: .72rem; }
	.fft-bo-hotspot__price { font-size: .9rem; }
}

@media (hover: none) {
	/* Touch devices: tap on a hotspot fires the wizard action; suppress the
	   floating label since it would cover neighboring sections on tap. */
	.fft-bo-hotspot__label { display: none; }
}