/**
 * Venue map — inline SVG with interactive zones (frontend).
 *
 * Layout:
 *   .venue-map           — wrapper, positions the toast/tooltip absolutely.
 *   .venue-map__canvas   — holds the inline <svg>, constrains its width.
 *   .venue-map__toast    — "Zona agotada" feedback for sold-out clicks.
 *   .venue-map__tooltip  — price/availability shown on zone hover.
 *
 * Interaction states:
 *   g[id^="zone-"]   — base zone; pointer cursor, hover lightens it
 *                      (opacity + brightness, ~200ms ease-out).
 *   g.zone--sold-out — grayscale + not-allowed cursor.
 *
 * The hover affordance is suppressed on sold-out zones, only fires on
 * fine-pointer devices, and is dropped under prefers-reduced-motion: reduce.
 *
 * Plain CSS (no build step) — keep in sync by hand.
 */

.venue-map {
	position: relative;
	display: block;
	width: 100%;
	max-width: 960px;
	margin: 1.5rem auto;
}

.venue-map__canvas {
	width: 100%;
}

.venue-map__canvas svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.venue-map__canvas g[id^="zone-"] {
	cursor: pointer;
	transition: opacity 200ms ease-out, filter 200ms ease-out;
	outline: none;
}

/* `hover: hover` keeps the affordance off touch devices, where `:hover` sticks
   after a tap and would leave a zone lit until the next tap. */
@media (hover: hover) and (pointer: fine) {
	.venue-map__canvas g[id^="zone-"]:hover:not(.zone--sold-out) {
		opacity: 0.9;
		filter: brightness(1.08);
	}
}

.venue-map__canvas g[id^="zone-"]:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.venue-map__canvas g[id^="zone-"].zone--sold-out {
	cursor: not-allowed;
	filter: grayscale(1);
	opacity: 0.55;
	pointer-events: auto; /* keep clickable so the toast can fire */
}

.venue-map__toast {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
	z-index: 5;
}

.venue-map__toast[hidden] {
	display: block; /* override the [hidden] default while we transition */
}

.venue-map__toast.is-visible {
	opacity: 1;
}

.venue-map__tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6; /* above the toast */
	max-width: 240px;
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(17, 24, 39, 0.96);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 150ms ease-out;

	/* Never capture the pointer: a tooltip under the cursor would otherwise
	   fire mouseleave on the zone and flicker, and would fight the hover state. */
	pointer-events: none;
}

.venue-map__tooltip[hidden] {
	display: block; /* override the [hidden] default while we transition */
}

.venue-map__tooltip.is-visible {
	opacity: 1;
}

/* Respect the user's motion preference: drop the zone, toast and tooltip
   transitions so state changes apply instantly instead of animating. */
@media (prefers-reduced-motion: reduce) {
	.venue-map__canvas g[id^="zone-"],
	.venue-map__toast,
	.venue-map__tooltip {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Inline seating chart — filas largas en UNA sola línea + scroll horizontal
   ÚNICO POR ZONA.

   FooEvents maqueta los asientos de cada fila como <span> inline-block dentro
   de `.fooevents_seating_chart_view_row`; con muchos asientos por área (ej. 65)
   se partían en varias líneas. En el chart inline que ve el usuario final
   mantenemos cada fila en una sola línea y la dejamos desplazarse en
   horizontal.

   El scroll vive en el contenedor de la zona (`.seat_container`), que agrupa
   todas las filas/áreas ligadas a la misma variación. Así, cuando una zona
   tiene más de una fila, todas se desplazan JUNTAS y quedan alineadas por
   columna, en vez de tener un scroll independiente por fila. Se excluye el
   tipo circular `.table` (asientos posicionados en absoluto alrededor de una
   mesa).
   --------------------------------------------------------------------------- */
.venue-maps-inline-seating .seat_container {
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
	max-height: none;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.venue-maps-inline-seating .fooevents_seating_chart_view_row:not(.table) {
	white-space: nowrap;
}

/* Filas de una misma zona juntas como un bloque. FooEvents da a cada asiento
   un `margin-top: 10px` que, con varias filas por zona, deja un espacio visible
   entre filas. Lo reducimos en el chart inline para que las filas se lean como
   una sola zona (no toca el chart admin de FooEvents). */
.venue-maps-inline-seating .fooevents_seating_chart_view_row:not(.table) [name*="_number_seats_"] {
	margin-top: 2px;
}