/**
 * Distribución de las filas del diagrama de butacas de FooEvents.
 *
 * Es la distribución que ve el cliente en la tienda: el nombre de cada fila a
 * la izquierda, sus butacas en UNA sola línea a la derecha y un único scroll
 * horizontal por zona. Vive aparte de los estilos de la tienda porque la
 * consola de eventos dibuja el mismo diagrama en el admin y tiene que verse
 * igual (Eleven-to/event-console#35, frente 4). Una copia en la consola es lo
 * que garantiza que en seis meses las dos distribuciones vuelvan a divergir.
 *
 * Todo cuelga de `.venue-maps-seating-layout`, que se pone sobre el contenedor
 * del diagrama (en la tienda, el `.ui-dialog` reubicado por floating-cart.js;
 * en la consola, el propio `#fooevents_seating_dialog`). Sin esa clase el
 * diagrama de FooEvents queda como viene, así que su modal en otras pantallas
 * no cambia.
 *
 * Ver Venue_Maps_Seating_Layout.
 */

/* ---------------------------------------------------------------------------
   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. 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-seating-layout .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-seating-layout .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 para que las filas se lean como una sola zona. */
.venue-maps-seating-layout .fooevents_seating_chart_view_row:not(.table) [name*="_number_seats_"] {
	margin-top: 2px;
}

/* Lay each seating row as "area name on the left, its seats inline to the
 * right" instead of the FooEvents default (name stacked on its own line above
 * the seats). More compact and reads as one unit. */
.venue-maps-seating-layout .row_container {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	/* No transparent gap between the label and the seats: the spacing is the
	 * label's own (white) padding-right, so a seat scrolling under the sticky
	 * label can never peek through a gap. */
	column-gap: 0;
	/* Extend to the full row width so the per-zone `.seat_container` is what
	 * scrolls (one scrollbar for every fila of the zone), not each row. */
	width: max-content;
}
.venue-maps-seating-layout .row_container .fooevents_seating_chart_view_row_name {
	flex: 0 0 auto;
	/* Equal label column so the seats line up by column across the zone's
	 * filas (uniform fila names share the same width). Sticky to the left so
	 * the fila name stays pinned while the seats scroll underneath it. */
	min-width: 120px;
	margin: 0;
	white-space: nowrap;
	position: sticky;
	left: 0;
	z-index: 3;
	/* Solid, fully opaque panel: it must stretch to the FULL row height (the
	 * seats are taller than the text) and include the right-hand spacing, so a
	 * seat scrolling underneath is completely masked — never visible above,
	 * below or beside the label. */
	align-self: stretch;
	display: flex;
	align-items: center;
	padding-right: 16px;
	background: #fff;
}
.venue-maps-seating-layout .row_container .fooevents_seating_chart_view_row {
	flex: 0 0 auto;
}