/*
 * Seat maps (shop and backend). Colours come from the event theme where possible.
 *
 * Every selector is wrapped in :where() so that it has no specificity, and every colour can be
 * replaced through a --seating2-* custom property (the value after the comma is the default).
 * This keeps the plugin easy to restyle with the event's custom CSS, whatever the load order
 * (see "Styling" in the README).
 */

:where(.seating2-map) {
	position: relative;
	background: var(--seating2-map-background, #fff);
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
/* The SVG takes the proportions of the plan (zooming keeps them), within sensible limits */
:where(.seating2-map .s2-svg) {
	display: block;
	width: 100%;
	height: auto;
	min-height: 220px;
	max-height: 72vh;
	cursor: grab;
}
:where(.seating2-map .s2-svg.s2-dragging) {
	cursor: grabbing;
}

:where(.seating2-toolbar) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
}
:where(.seating2-zoom) {
	margin-left: auto;
}
:where(.seating2-info) {
	min-height: 40px;
}

/* Seats. Rules later in this file win over earlier ones, as all of them have no specificity. */
:where(.s2-seat) {
	outline: none;
}
:where(.s2-seat circle) {
	stroke: var(--seating2-seat-border, rgba(0, 0, 0, .25));
	stroke-width: 1;
	transition: fill .1s ease-in-out, opacity .1s ease-in-out;
}
:where(.s2-seat.s2-free) {
	cursor: pointer;
}
:where(.s2-seat.s2-free:hover circle, .s2-seat:focus-visible circle, .s2-seat:focus circle) {
	stroke: var(--seating2-accent, var(--pretix-brand-primary, #3b1c4a));
	stroke-width: 3;
}
:where(.s2-seat.s2-other) {
	opacity: .3;
	cursor: help;
}
:where(.s2-seat.s2-selected) {
	cursor: pointer;
}
:where(.s2-seat.s2-selected circle) {
	fill: var(--seating2-accent, var(--pretix-brand-primary, #3b1c4a));
	stroke: var(--seating2-accent-dark, var(--pretix-brand-primary-darken-20, #1c0d23));
	stroke-width: 2;
}
:where(.s2-seat.s2-locked, .s2-seat.s2-taken, .s2-seat.s2-unavailable) {
	cursor: not-allowed;
}
:where(.s2-seat.s2-taken circle, .s2-seat.s2-unavailable circle) {
	fill: var(--seating2-taken, #d9d9d9);
	stroke: var(--seating2-taken-border, #c4c4c4);
}
:where(.s2-seat.s2-mine circle) {
	fill: var(--seating2-mine, var(--pretix-brand-success, #50a167));
	stroke: var(--seating2-mine-border, var(--pretix-brand-success-darken-10, #3d7c4f));
}
:where(.s2-glyph) {
	font-family: FontAwesome;
	fill: var(--seating2-glyph, #fff);
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
}
:where(.s2-seat.s2-taken .s2-glyph, .s2-seat.s2-unavailable .s2-glyph) {
	fill: var(--seating2-taken-glyph, #8c8c8c);
}
:where(.s2-rownum) {
	fill: var(--seating2-row-number, #8a8a8a);
	text-anchor: middle;
	dominant-baseline: central;
	font-family: var(--pretix-font-family-sans-serif, sans-serif);
	pointer-events: none;
}
:where(.s2-area-text) {
	text-anchor: middle;
	dominant-baseline: central;
	font-family: var(--pretix-font-family-sans-serif, sans-serif);
	pointer-events: none;
}
:where(.s2-box) {
	fill: var(--seating2-box-fill, rgba(59, 28, 74, .12));
	stroke: var(--seating2-accent, var(--pretix-brand-primary, #3b1c4a));
	stroke-dasharray: 4 3;
	pointer-events: none;
}

/* Legend */
:where(.seating2-legend) {
	margin: 0 0 15px;
}
:where(.seating2-legend-item) {
	display: inline-block;
	margin: 0 14px 6px 0;
	white-space: nowrap;
}
:where(.s2-swatch) {
	vertical-align: -3px;
	overflow: visible;
}
:where(.s2-swatch .s2-seat circle) {
	stroke-width: 1;
}

/* Shop: seat page */
:where(.seating2-summary .seating2-line-count) {
	float: right;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 10px;
	background-color: var(--seating2-count-background, #777);
	color: var(--seating2-count-color, #fff);
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
}
:where(.seating2-line-done .seating2-line-count) {
	background-color: var(--seating2-success, var(--pretix-brand-success, #50a167));
}
:where(.seating2-line-over .seating2-line-count) {
	background-color: var(--seating2-danger, var(--pretix-brand-danger, #c44f4f));
}
:where(.seating2-subheading) {
	margin-top: 0;
	font-size: 15px;
	font-weight: bold;
}
:where(.seating2-selected) {
	margin-bottom: 10px;
	padding-left: 0;
	list-style: none;
}
:where(.seating2-selected-seat) {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid var(--seating2-divider, #eee);
}
:where(.seating2-selected-seat:last-child) {
	border-bottom: 0;
}
:where(.seating2-selected-main) {
	flex: 1;
}
:where(.seating2-selected-main select) {
	margin-top: 4px;
}
:where(.seating2-remove) {
	padding: 0 4px;
	border: 0;
	background: transparent;
	font-size: 12px;
	line-height: 1.5;
	cursor: pointer;
}
/* On the icon: pretix's base styles give buttons "color: inherit", which a :where() rule can't beat */
:where(.seating2-remove .fa) {
	color: var(--seating2-danger, var(--pretix-brand-danger, #c44f4f));
}
:where(.seating2-remove:disabled) {
	opacity: .4;
	cursor: not-allowed;
}
:where(.seating2-confirm) {
	padding: 8px 10px;
	background: var(--seating2-confirm-background, var(--pretix-brand-warning-lighten-40, #fcf8e3));
	border-radius: var(--pretix-border-radius-base, 4px);
}

/* Shop: product list and cart */
:where(.seating2-frame) {
	padding-top: 15px;
}
:where(.seating2-change-link) {
	margin-left: 6px;
	white-space: nowrap;
}