/**
 * ITN Event Seat — shared front-end styles.
 *
 * Only design tokens and primitives live here; every feature ships its own
 * stylesheet on top (seat map, event box, checkout panel). Keeping the tokens
 * in one place is what makes the admin-configurable seat colours (spec 3.1)
 * a one-line override instead of a per-element inline style.
 *
 * Custom properties are re-declared at runtime by Support\Assets::inline_style()
 * with the values stored in the settings.
 */

:root {
	/* Seat status colours — overridden from the plugin settings. */
	--itn-seat-available: #27ae60;
	--itn-seat-selected: #2980b9;
	--itn-seat-locked: #f39c12;
	--itn-seat-reserved: #c0392b;
	--itn-seat-disabled: #bdc3c7;

	/* Layout primitives shared by every plugin component. */
	--itn-radius: 6px;
	--itn-gap: 8px;
	--itn-border: #e2e4e7;
	--itn-text-muted: #6b7280;
	--itn-focus: #2271b1;
}

/* Base container: scopes the plugin's styles so themes stay unaffected. */
.itn-event {
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.7;
}

.itn-event *,
.itn-event *::before,
.itn-event *::after {
	box-sizing: inherit;
}

/* Visually hidden, still available to screen readers. */
.itn-event .itn-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus must stay visible: seat maps are operated with the keyboard
   as well as the mouse. */
.itn-event :focus-visible {
	outline: 2px solid var(--itn-focus);
	outline-offset: 2px;
}

/* Inline notices (conflict messages, validation errors). */
.itn-event .itn-notice {
	border-inline-start: 4px solid var(--itn-border);
	border-radius: var(--itn-radius);
	background: #f6f7f7;
	margin: var(--itn-gap) 0;
	padding: 10px 12px;
}

.itn-event .itn-notice--error {
	border-inline-start-color: var(--itn-seat-reserved);
	background: #fcf0f1;
}

.itn-event .itn-notice--success {
	border-inline-start-color: var(--itn-seat-available);
	background: #f0f6f1;
}

/* Loading state used while an AJAX request is in flight. */
.itn-event .itn-is-loading {
	position: relative;
	opacity: 0.6;
	pointer-events: none;
}