/*
 * Community-site seat selection map (Advanced Events — Task 6486).
 *
 * Visual language ports the SeatingPlan design prototype's community screen: white cards on
 * any theme, ticket-count chips, two-column map + order panel, check-marked selected seats
 * (pending picks of a multi-person ticket render the same as committed ones — the order
 * panel's incomplete-group hint carries the difference), bottom-sheet ticket chooser. All
 * text colours inside the cards are fixed dark values — the surrounding event theme can be
 * any colour, the cards stay white.
 */

.ess-root {
	position: relative;
	margin-bottom: 1.5rem;
	text-align: left;
}

/* ---- ticket-count chips (read-only counters for seat-mapped types) ----
   Stacked at the top of the side column so the map card gets the full row width. */

.ess-chips {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

.ess-chip {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 9px 16px;
	font-size: 13px;
	line-height: 1.3;
}

.ess-chip-main {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* availability-window countdown cloned from the (hidden) stepper row — the widget's own
   look comes from the wizard's shared .ticket-closing-countdown styles, compacted here so
   the whole "Ends in d:h:m:s" strip always fits the chip on ONE line (order column: 280px).
   !important beats the Bootstrap spacing utilities (px-2 py-1 mx-1) baked into the markup. */
.ess-chip-countdown .ticket-closing-countdown {
	flex-wrap: nowrap;
	white-space: nowrap;
	margin-bottom: 0;
	font-size: 12px;
}

.ess-chip-countdown .cd-label-text {
	margin-right: 4px !important;
}

.ess-chip-countdown .cd-block {
	min-width: 30px;
	padding: 2px 4px !important;
	margin: 0 2px !important;
}

.ess-chip-countdown .cd-sep {
	margin: 0 1px !important;
}

.ess-chip-name {
	flex: 1;
	min-width: 0;
}

.ess-chip-swatch {
	width: 11px;
	height: 11px;
	border-radius: 2px;
	flex-shrink: 0;
}

.ess-chip-name {
	color: #333;
	font-weight: 500;
}

.ess-chip-count {
	color: #ccc;
	margin-left: 2px;
	white-space: nowrap;
}

.ess-chip-count.is-active {
	font-weight: 700;
}

/* ---- two-column: map card + order panel ---- */

.ess-columns {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.ess-map-col {
	flex: 1;
	min-width: 0;
}

.ess-order-col {
	width: 280px;
	flex-shrink: 0;
}

@media (max-width: 991px) {
	.ess-columns {
		flex-direction: column;
	}

	/* the container's align-items: flex-start stops cross-axis stretching once the
	   columns stack, so without an explicit width the map column sizes to its content
	   and grows past the phone screen when zoomed */
	.ess-map-col,
	.ess-order-col {
		width: 100%;
	}

	/* chips flow horizontally when the columns stack */
	.ess-chips {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ---- map card ---- */

.ess-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px 24px;
	color: #333;
	position: relative;
}

/* Booking-error banner (seats taken mid-checkout, incomplete picks) — injected at the top
   of the card by EventSeatSelection.showError(). */
.ess-alert {
	background: #fceaec;
	border: 1px solid #f3b8c0;
	border-radius: 8px;
	color: #a31826;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 14px;
	margin-bottom: 14px;
}

/* Header row pinned above the zoomable map area — never scales or pans with the plan.
   Holds the centred stage pill with the zoom toolbar on its right; min-height keeps the
   absolutely-positioned toolbar from overlapping the map when the plan has no stage. */
.ess-map-head {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 32px;
	margin-bottom: 14px;
}

.ess-stage {
	background: #e6f3fd;
	border-radius: 4px;
	text-align: center;
	padding: 5px 0;
	font-size: 12px;
	color: #0a4976;
	font-weight: 500;
	max-width: 200px;
	flex: 1 1 auto;
	margin: 0 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ess-section {
	margin-bottom: 18px;
}

.ess-section:last-child {
	margin-bottom: 0;
}

.ess-section-name {
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #aaa;
	font-weight: 600;
	text-align: center;
	margin-bottom: 10px;
}

/* ---- zoomable viewport (chrome only appears when the plan is bigger than the card) ---- */

.ess-viewport {
	overflow: auto;
	max-height: 560px;
	scrollbar-width: thin;
	/* one finger pans natively; pinch gestures reach our zoom handler */
	touch-action: pan-x pan-y;
}

.ess-viewport.is-pannable {
	cursor: grab;
}

.ess-viewport.is-panning {
	cursor: grabbing;
	user-select: none;
}

.ess-sizer {
	position: relative;
	/* the layer zooms via the CSS `zoom` property (real layout, stays crisp), so the
	   inline-block layer centres with plain text-align at any scale */
	text-align: center;
}

.ess-zoom-layer {
	display: inline-block;
}

.ess-plan {
	display: inline-block;
	padding: 2px;
	text-align: center;
	/* Base upscale: the plan's natural ("100%") size is ~15% larger than its raw pixel
	   sizes. Nested CSS zoom multiplies with the layer's user zoom and is included in the
	   layer measurements, so the fit/step logic and the toolbar percentage all treat the
	   bigger size as the natural one. */
	zoom: 1.15;
}

/* Top-right of the header row, vertically centred on the stage pill. */
.ess-toolbar {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
	z-index: 5;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	padding: 2px;
}

.ess-toolbar button {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	color: #666;
	font-size: 12px;
	padding: 0;
	cursor: pointer;
}

.ess-toolbar button:hover {
	background: #f4f6f9;
}

.ess-toolbar button:disabled {
	opacity: 0.4;
	cursor: default;
}

.ess-toolbar .ess-zoom-fit {
	width: auto;
	padding: 0 8px;
}

.ess-zoom-level {
	min-width: 38px;
	text-align: center;
	font-size: 11px;
	color: #888;
}

/* ---- rows ---- */

.ess-rows {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
}

.ess-row {
	display: flex;
	align-items: center;
	gap: 3px;
}

.ess-row-name {
	min-width: 18px;
	text-align: right;
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
	margin-right: 6px;
	white-space: nowrap;
}

.ess-row-name--right {
	text-align: left;
	margin-right: 0;
	margin-left: 6px;
}

.ess-seats {
	display: inline-flex;
	gap: 3px;
}

/* Aisle gap — a vertical walkway running straight through every row of the section. */
.ess-aisle {
	width: 15px;
	flex-shrink: 0;
	align-self: stretch;
}

/* Invisible slot padding shorter rows onto the section's column grid, so aisles stay straight. */
.ess-seat-pad {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.ess-seat {
	width: 15px;
	height: 15px;
	border-radius: 2px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	transition: transform 0.1s, outline 0.1s;
	outline-offset: 1px;
	box-sizing: border-box;
}

.ess-seat.is-available,
.ess-seat.is-pending,
.ess-seat.is-committed {
	cursor: pointer;
}

.ess-seat.is-available:hover,
.ess-seat.is-available:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.35);
	transform: scale(1.15);
	z-index: 1;
}

.ess-seat.is-pending::after,
.ess-seat.is-committed::after {
	content: "\2713";
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
}

.ess-seat.is-pending.is-wheelchair::after,
.ess-seat.is-committed.is-wheelchair::after {
	content: "";
}

/* Booked seats carry the Reserved zone colour inline — dim like unbookable seats so
   they read exactly as reserved ones. */
.ess-seat.is-booked {
	opacity: 0.45;
	cursor: not-allowed;
}

/* The user's own already-booked seats ("Your seats"): full-strength fixed colour, no check
   mark (that means "selected in this booking"), not clickable — they're already theirs. */
.ess-seat.is-mine {
	cursor: default;
}

.ess-seat.is-wheelchair.is-mine {
	background: currentColor !important;
}

.ess-seat.is-wheelchair.is-mine i,
.ess-seat.is-wheelchair.is-mine svg {
	color: #fff;
}

.ess-seat.is-unbookable {
	opacity: 0.45;
	cursor: default;
}

.ess-seat.is-empty {
	visibility: hidden;
}

.ess-seat.is-wheelchair {
	background: transparent !important;
	font-size: 12px;
}

/* Kill any theme-level `i { margin-right: … }`: inside the centred seat flexbox a right
   margin drags the glyph left of the seat position. Covers both the webfont <i> and the
   <svg> FontAwesome's SVG+JS mode swaps in. */
.ess-seat.is-wheelchair i,
.ess-seat.is-wheelchair svg {
	margin-right: 0;
	position: relative;
	left: 1px;
}

/* Selected wheelchair seats fill like any other seat (the inline style carries the zone
   colour as `color`, so currentColor is the zone fill) with the icon knocked out white —
   a tinted icon alone reads as unselected. */
.ess-seat.is-wheelchair.is-pending,
.ess-seat.is-wheelchair.is-committed {
	background: currentColor !important;
}

/* FontAwesome's SVG+JS mode swaps the <i> for an inline <svg fill="currentColor">, so the
   white knock-out must hit both — otherwise the icon inherits the seat's zone colour and
   disappears against the identical fill. */
.ess-seat.is-wheelchair.is-pending i,
.ess-seat.is-wheelchair.is-pending svg,
.ess-seat.is-wheelchair.is-committed i,
.ess-seat.is-wheelchair.is-committed svg {
	color: #fff;
}

/* ---- tables ---- */

.ess-tables {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.ess-table {
	position: relative;
	width: 96px;
	text-align: center;
	border-radius: 10px;
	padding: 2px;
	box-sizing: border-box;
	transition: box-shadow 0.12s;
}

.ess-table-svg {
	width: 90px;
	height: 90px;
	display: block;
	margin: 0 auto;
}

.ess-table-name {
	font-size: 11px;
	font-weight: 500;
	color: #555;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ess-table-note {
	font-size: 10px;
	color: #999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ess-table--whole {
	cursor: pointer;
}

.ess-table--whole:hover,
.ess-table--whole:focus-visible {
	box-shadow: 0 0 0 2px rgba(0, 110, 201, 0.35);
}

.ess-table--whole.is-committed {
	box-shadow: 0 0 0 2px #006ec9;
	background: #e6f3fd;
}

.ess-seat-circle.is-available,
.ess-seat-circle.is-pending,
.ess-seat-circle.is-committed {
	cursor: pointer;
}

.ess-seat-circle.is-booked {
	opacity: 0.45;
	cursor: not-allowed;
}

.ess-seat-circle.is-mine {
	cursor: default;
}

.ess-seat-circle.is-unbookable {
	opacity: 0.45;
}

.ess-seat-circle.is-empty {
	fill: none;
	stroke: #ccc;
	stroke-width: 1;
	pointer-events: none;
}

/* Centre the glyph in its 12x12 foreignObject (like the builder's .sp-table-wheel) so the icon's
   ink shares a centre with the selected-fill circle behind it; the theme's inherited line-height
   would otherwise push the glyph below the box. */
.ess-table-wheel {
	display: block;
	width: 12px;
	font-size: 11px;
	line-height: 12px;
	text-align: center;
	margin: 0;
}

/* ---- legend ---- */

.ess-legend {
	display: flex;
	gap: 8px 18px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
	font-size: 12px;
	color: #666;
}

.ess-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.ess-dot {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Background comes inline from legendMarkup (the plan's Reserved zone colour). */
.ess-dot--booked {
	opacity: 0.45;
}

/* ---- order panel ---- */

.ess-order {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	position: sticky;
	top: 20px;
	color: #333;
	text-align: left;
}

@media (max-width: 991px) {
	.ess-order {
		position: static;
	}
}

.ess-order-head {
	padding: 14px 16px;
	border-bottom: 1px solid #e5e7eb;
}

.ess-order-title {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a2e;
}

.ess-order-sub {
	font-size: 12px;
	color: #aaa;
	margin-top: 2px;
}

.ess-order-body {
	min-height: 80px;
	max-height: 320px;
	overflow-y: auto;
}

.ess-order-empty {
	padding: 24px 16px;
	text-align: center;
	color: #bbb;
	font-size: 13px;
}

.ess-order-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 11px 16px;
	border-bottom: 1px solid #f5f5f5;
}

.ess-order-dot {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	flex-shrink: 0;
	margin-top: 4px;
}

.ess-order-lines {
	flex: 1;
	min-width: 0;
}

.ess-order-seat {
	font-size: 13px;
	font-weight: 500;
	color: #1a1a2e;
}

.ess-order-ticket {
	font-size: 12px;
	color: #888;
	margin-top: 2px;
}

.ess-order-price {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	white-space: nowrap;
}

.ess-order-remove {
	background: none;
	border: none;
	cursor: pointer;
	color: #bbb;
	font-size: 20px;
	line-height: 1;
	padding: 0;
	margin: -1px 0 0 2px;
}

.ess-order-remove:hover {
	color: #666;
}

.ess-order-hint {
	padding: 8px 16px;
	font-size: 12px;
	color: #c84408;
	background: #fff2ec;
	border-bottom: 1px solid #f5f5f5;
}

.ess-order-foot {
	padding: 14px 16px;
	border-top: 1px solid #e5e7eb;
}

.ess-order-total {
	display: flex;
	justify-content: space-between;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a2e;
}

/* Colours are fallbacks only: the button also carries .section-btn, so the event section's
   themed button colours (!important, incl. hover) win and it matches the wizard's buttons. */
.ess-cta {
	width: 100%;
	background: #006ec9;
	border: none;
	border-radius: 8px;
	padding: 11px 0;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
}

.ess-cta:hover {
	background: #0a4976;
}

/* ---- bottom-sheet ticket chooser ---- */

.ess-sheet-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1050;
}

.ess-sheet {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 560px;
	max-width: 100%;
	background: #fff;
	border-radius: 20px 20px 0 0;
	padding: 24px 24px 34px;
	z-index: 1051;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
	color: #333;
	text-align: left;
	box-sizing: border-box;
}

.ess-sheet-handle {
	width: 40px;
	height: 4px;
	background: #e0e0e0;
	border-radius: 2px;
	margin: 0 auto 18px;
}

.ess-sheet-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 18px;
}

.ess-sheet-seat {
	font-size: 16px;
	font-weight: 600;
	color: #1a1a2e;
}

.ess-sheet-zone {
	font-size: 12px;
	color: #888;
	margin-top: 3px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.ess-sheet-zone-dot {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex-shrink: 0;
}

.ess-sheet-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 22px;
	color: #bbb;
	line-height: 1;
	padding: 0;
	margin-top: -2px;
}

.ess-sheet-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
	max-height: 40vh;
	overflow-y: auto;
}

.ess-sheet-option {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s, background 0.15s;
}

.ess-sheet-option.is-selected {
	border-color: #006ec9;
	background: #e6f3fd;
}

.ess-sheet-radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #d0d0d0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.ess-sheet-option.is-selected .ess-sheet-radio {
	border-color: #006ec9;
}

.ess-sheet-radio-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #006ec9;
	display: none;
}

.ess-sheet-option.is-selected .ess-sheet-radio-dot {
	display: block;
}

.ess-sheet-option-name {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	color: #1a1a2e;
}

.ess-sheet-option-price {
	font-size: 14px;
	font-weight: 700;
	color: #444;
	white-space: nowrap;
}

.ess-sheet-option-per {
	font-size: 12px;
	font-weight: 400;
	color: #888;
}

.ess-sheet-actions {
	display: flex;
	gap: 10px;
}

.ess-sheet-cancel {
	flex: 1;
	background: #f4f6f9;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px 0;
	font-size: 13px;
	color: #666;
	cursor: pointer;
	font-weight: 500;
}

.ess-sheet-confirm {
	flex: 2;
	background: #006ec9;
	border: none;
	border-radius: 8px;
	padding: 12px 0;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
}

.ess-sheet-confirm:disabled {
	background: #80b8e4;
	cursor: not-allowed;
}

/* ---- mapped ticket rows hide from the wizard's ticket list (chips replace them) ---- */

.ticket-type-container.ess-mapped {
	display: none;
}

/* ---- mobile ---- */

@media (max-width: 576px) {
	.ess-card {
		padding: 14px 12px;
	}

	.ess-viewport {
		max-height: 340px;
	}

	.ess-toolbar button {
		width: 34px;
		height: 34px;
	}

	/* the stage spans the full phone width instead of a centred pill, with the toolbar
	   dropping onto its own right-aligned row beneath it */
	.ess-map-head {
		flex-wrap: wrap;
	}

	.ess-stage {
		max-width: none;
		flex-basis: 100%;
	}

	.ess-toolbar {
		position: static;
		transform: none;
		margin-left: auto;
		margin-top: 8px;
	}
}