/**
 * Component — Entry Selector
 *
 * Markup: modules/frontend/views/patterns/entry-selector.php. Behaviour:
 * assets/js/components/entry-selector.js. The ticket-choosing body shared
 * by the Quick Add dialog and the Competition Page's entry panel
 * (2026-10-02, extracted from quick-add.css — values unchanged): the
 * competition's Quick Picks (over-allowance ones disabled, a dynamic
 * Max), the allowance note, personal odds, the promotion-aware price,
 * the Add action, and the added / can't-add states.
 */

.ec-entry-selector {
	display: grid;
	gap: var(--ec-space-4);
}

.ec-entry-selector[hidden] {
	display: none;
}

/* Quick Picks */
.ec-entry-selector__form {
	display: grid;
	gap: var(--ec-space-4);
}

.ec-entry-selector__picks {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ec-entry-selector__legend {
	margin-bottom: var(--ec-space-2);
	padding: 0;
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: var(--ec-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--ec-color-text-tertiary);
}

.ec-entry-selector__options {
	display: grid;
	/* 2.75rem (44px) minimum: five picks fit one row even on a 320px
	   phone, and every chip stays a full touch target. */
	grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));
	gap: var(--ec-space-2);
}

.ec-entry-selector__option {
	position: relative;
}

.ec-entry-selector__option input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.ec-entry-selector__option span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	border: 1px solid var(--ec-color-border-strong);
	border-radius: var(--ec-radius-md);
	background-color: var(--ec-color-surface);
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-body-lg);
	font-weight: var(--ec-font-weight-bold);
	font-variant-numeric: tabular-nums;
	transition:
		border-color var(--ec-duration-fast) var(--ec-ease-standard),
		background-color var(--ec-duration-fast) var(--ec-ease-standard),
		box-shadow var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-entry-selector__option input:hover + span {
	border-color: rgba(44, 213, 227, 0.5);
}

.ec-entry-selector__option input:checked + span {
	border-color: var(--ec-color-accent);
	background-color: rgba(44, 213, 227, 0.24);
	color: #f3fdff;
	box-shadow: inset 0 0 0 1px rgba(103, 230, 240, 0.6), var(--ec-glow-accent-sm);
}

.ec-entry-selector__option input:focus-visible + span {
	box-shadow: var(--ec-focus-ring);
}

.ec-entry-selector__summary {
	margin: 0;
	font-size: var(--ec-font-size-body);
	color: var(--ec-color-text-secondary);
	text-align: center;
}

.ec-entry-selector__summary--quiet {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.ec-entry-selector__summary strong {
	color: var(--ec-color-text-primary);
}

.ec-entry-selector__message {
	margin: 0;
	padding: var(--ec-space-3);
	border: 1px solid rgba(194, 59, 59, 0.5);
	border-radius: var(--ec-radius-md);
	background-color: rgba(194, 59, 59, 0.12);
	color: #f3b4b4;
	font-size: var(--ec-font-size-body-sm);
}

.ec-entry-selector__submit {
	width: 100%;
	box-sizing: border-box;
}

.ec-entry-selector__submit[aria-busy='true'] {
	cursor: progress;
	opacity: 0.75;
}

/* Allowance-aware options (2026-10-02) */
.ec-entry-selector__option input:disabled {
	cursor: not-allowed;
}

.ec-entry-selector__option input:disabled + span {
	border-style: dashed;
	border-color: var(--ec-color-border);
	background-color: transparent;
	color: var(--ec-color-text-tertiary);
	opacity: 0.55;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.ec-entry-selector__option span small {
	display: block;
	margin-left: 0.15rem;
	font-size: 0.5625rem;
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ec-color-accent);
}

.ec-entry-selector__option--max span {
	gap: 0.1rem;
}

/* Allowance note — information, not an error */
.ec-entry-selector__note {
	margin: calc(var(--ec-space-2) * -1) 0 0;
	font-size: var(--ec-font-size-body-sm);
	color: var(--ec-color-text-secondary);
}

/* Quick Add: the per-person maximum picked out in the promo accent. */
.ec-entry-selector--modal .ec-entry-selector__limit {
	color: var(--ec-color-magenta-300);
	font-weight: var(--ec-font-weight-semibold);
}

.ec-entry-selector__limit {
	font-weight: inherit;
}

.ec-entry-selector__note[hidden],
.ec-entry-selector__odds[hidden],
.ec-entry-selector__blocked[hidden] {
	display: none;
}

/* Odds for the selected quantity */
.ec-entry-selector__odds {
	display: grid;
	gap: 0.2rem;
	padding: var(--ec-space-3) var(--ec-space-4);
	border: 1px solid rgba(44, 213, 227, 0.22);
	border-radius: var(--ec-radius-md);
	background-image: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(44, 213, 227, 0.14), rgba(44, 213, 227, 0) 70%);
	background-color: rgba(9, 30, 42, 0.6);
}

.ec-entry-selector__odds-label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ec-color-text-tertiary);
}

.ec-entry-selector__odds-figures {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--ec-space-3);
	margin: 0;
}

.ec-entry-selector__odds-ratio {
	font-size: var(--ec-font-size-h4);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--ec-color-accent-strong);
	line-height: 1.15;
}

.ec-entry-selector__odds-approx {
	font-size: var(--ec-font-size-body);
	font-weight: var(--ec-font-weight-semibold);
	color: var(--ec-color-text-primary);
	font-variant-numeric: tabular-nums;
}

.ec-entry-selector__odds-note {
	margin: 0;
	font-size: var(--ec-font-size-caption);
	line-height: 1.4;
	color: var(--ec-color-text-tertiary);
}

/* Promotion pricing in the summary */
.ec-entry-selector__was {
	color: var(--ec-color-text-tertiary);
}

.ec-entry-selector__promo {
	display: inline-block;
	margin-left: var(--ec-space-2);
	padding: 0.15rem 0.45rem;
	border-radius: var(--ec-radius-full);
	background-color: var(--ec-color-promo-soft);
	color: var(--ec-color-magenta-300);
	font-size: 0.6875rem;
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Can't add (limit reached / sold out / closed) */
.ec-entry-selector__blocked {
	display: grid;
	gap: var(--ec-space-3);
}

.ec-entry-selector__blocked-text {
	margin: 0;
	padding: var(--ec-space-3);
	border: 1px solid var(--ec-color-border-strong);
	border-radius: var(--ec-radius-md);
	background-color: var(--ec-color-surface);
	color: var(--ec-color-text-primary);
	text-align: center;
}

/* Success state */
.ec-entry-selector__done {
	display: grid;
	gap: var(--ec-space-3);
}

.ec-entry-selector__done[hidden],
.ec-entry-selector__form[hidden],
.ec-entry-selector__message[hidden] {
	display: none;
}

.ec-entry-selector__done-title {
	margin: 0;
	padding: var(--ec-space-3);
	border: 1px solid rgba(31, 157, 100, 0.5);
	border-radius: var(--ec-radius-md);
	background-color: rgba(31, 157, 100, 0.12);
	color: #9fe3c2;
	font-weight: var(--ec-font-weight-semibold);
	text-align: center;
}

.ec-entry-selector__done-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ec-space-2);
}

.ec-entry-selector__done-actions .ec-button {
	width: 100%;
	box-sizing: border-box;
}

/* Exact quantity — Competition Page only (2026-10-02): a slider with
   −/+ steppers sharing the one selected quantity. Steppers give touch
   and keyboard users single-ticket precision; the track fills to the
   thumb (--ec-range-fill, set by entry-selector.js). */
.ec-entry-selector__exact[hidden] {
	display: none;
}

.ec-entry-selector__exact {
	display: grid;
	gap: var(--ec-space-2);
}

.ec-entry-selector__exact-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ec-space-3);
}

.ec-entry-selector__exact-head .ec-entry-selector__legend {
	margin: 0;
}

.ec-entry-selector__exact-value {
	font-weight: var(--ec-font-weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--ec-color-accent-strong);
}

.ec-entry-selector__exact-row {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
	align-items: center;
	gap: var(--ec-space-3);
}

.ec-entry-selector__step {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--ec-color-border-strong);
	border-radius: var(--ec-radius-md);
	background-color: var(--ec-color-surface);
	color: var(--ec-color-text-primary);
	font-size: 1.25rem;
	font-weight: var(--ec-font-weight-bold);
	line-height: 1;
	cursor: pointer;
}

.ec-entry-selector__step:hover:not(:disabled) {
	border-color: rgba(44, 213, 227, 0.5);
}

.ec-entry-selector__step:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ec-entry-selector__step:focus-visible {
	outline: none;
	box-shadow: var(--ec-focus-ring);
}

.ec-entry-selector__range {
	--ec-range-fill: 0%;
	width: 100%;
	height: 2.75rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ec-entry-selector__range::-webkit-slider-runnable-track {
	height: 0.4rem;
	border-radius: var(--ec-radius-full);
	background: linear-gradient(90deg, var(--ec-color-accent) 0, var(--ec-color-accent) var(--ec-range-fill), var(--ec-color-navy-700) var(--ec-range-fill));
}

.ec-entry-selector__range::-moz-range-track {
	height: 0.4rem;
	border-radius: var(--ec-radius-full);
	background-color: var(--ec-color-navy-700);
}

.ec-entry-selector__range::-moz-range-progress {
	height: 0.4rem;
	border-radius: var(--ec-radius-full);
	background-color: var(--ec-color-accent);
}

.ec-entry-selector__range::-webkit-slider-thumb {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: -0.55rem;
	border: 2px solid #f3fdff;
	border-radius: var(--ec-radius-full);
	background-color: var(--ec-color-accent);
	box-shadow: var(--ec-glow-accent-sm);
	-webkit-appearance: none;
	appearance: none;
}

.ec-entry-selector__range::-moz-range-thumb {
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid #f3fdff;
	border-radius: var(--ec-radius-full);
	background-color: var(--ec-color-accent);
	box-shadow: var(--ec-glow-accent-sm);
}

.ec-entry-selector__range:focus-visible {
	outline: none;
}

.ec-entry-selector__range:focus-visible::-webkit-slider-thumb {
	box-shadow: var(--ec-focus-ring);
}

.ec-entry-selector__range:focus-visible::-moz-range-thumb {
	box-shadow: var(--ec-focus-ring);
}