/*
 * Booking flow.
 *
 * Mobile-first and one-handed: the slot grid and the date strip both use
 * targets of at least 44px, and the primary action stays reachable at the
 * bottom of the viewport.
 */

.booking {
	padding-block: var(--space-6) var(--space-9);
}

/* ==========================================================================
   Stepper
   ========================================================================== */

.stepper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-7);
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.stepper__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: var(--border-hairline) solid var(--color-border-dark);
	color: var(--color-text-muted);
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.stepper__item.is-current {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.stepper__item.is-done {
	border-color: var(--color-border-dark-strong);
	color: var(--color-text-secondary);
}

.stepper__number {
	font-family: var(--font-display);
	font-size: var(--text-body-sm);
}

/* Labels are noise on a narrow screen; the numbers and the heading carry it. */
@media (max-width: 599px) {
	.stepper__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ==========================================================================
   Steps
   ========================================================================== */

/*
 * `min-width: 0` is doing real work here.
 *
 * A `<fieldset>` defaults to `min-width: min-content` and refuses to shrink
 * below the widest thing inside it — a rule inherited from the original HTML
 * form model that nothing else in CSS behaves like. At 320px the service list
 * pushed this 28px past its own form and gave the page a horizontal scrollbar.
 *
 * It appeared the day braiding was added: "Starter Locs / Retwist" is simply
 * longer than any barbering name, and nothing before it was long enough to
 * reach the edge.
 */
.booking__step {
	min-width: 0;
	margin: 0 0 var(--space-6);
	padding: 0;
	border: 0;
}

.booking__legend {
	margin-bottom: var(--space-5);
	padding: 0;
	font-family: var(--font-display);
	font-size: var(--text-h3);
	color: var(--color-text-primary);
}

.booking__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * The no-script controls: a native date input, a server-rendered time select
 * and a plain submit. They are the real booking path when scripting is off,
 * and the enhanced flow replaces them entirely when it is on.
 */
.js .no-script {
	display: none;
}

/* Conversely, the enhanced controls are useless without scripting. */
html:not(.js) .date-strip,
html:not(.js) .slot-grid,
html:not(.js) .stepper,
html:not(.js) [data-booking-back],
html:not(.js) [data-booking-next],
html:not(.js) [data-booking-submit] {
	display: none;
}

/* Without a stepper every step is on the page at once, so they need spacing. */
html:not(.js) .booking__step[hidden] {
	display: block !important;
}

html:not(.js) .booking__step {
	padding-bottom: var(--space-6);
	border-bottom: var(--border-hairline) solid var(--color-border-dark);
}

/* The honeypot must be invisible without being display:none, which some bots skip. */
.booking__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.booking__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: var(--border-hairline) solid var(--color-border-dark);
}

.booking__actions .button {
	flex: 1 1 auto;
	min-height: var(--button-height-lg);
}

@media (min-width: 600px) {
	.booking__actions .button {
		flex: 0 0 auto;
		min-width: 180px;
	}
}

/* ==========================================================================
   Service choice
   ========================================================================== */

.choice-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.choice {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: var(--touch-target-comfortable);
	padding: var(--space-4) var(--space-4);
	border: var(--border-hairline) solid var(--color-border-dark);
	background-color: var(--color-bg-raised);
	cursor: pointer;
}

.choice-list li + li .choice {
	border-top: 0;
}

.choice:hover {
	border-color: var(--color-border-dark-strong);
}

.choice:has( input:checked ) {
	border-color: var(--color-gold);
}

.choice:has( input:focus-visible ) {
	outline: var(--border-emphasis) solid var(--color-focus-ring-dark);
	outline-offset: 2px;
}

/*
 * The radio is drawn here rather than left to the browser.
 *
 * `accent-color` only tints the checked state; an unchecked native radio keeps
 * its white fill, so a list of eleven services was eleven bright white discs
 * down a carbon page — the loudest thing on the screen, and the one carrying
 * the least meaning. A hairline ring reads as part of the system.
 */
.choice input {
	appearance: none;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 0;
	/*
	 * The muted grey, not a border token. WCAG 1.4.11 wants 3:1 for the
	 * boundary of a control, and the border tokens measure 1.15:1 and 1.46:1
	 * against this card — invisible as well as non-compliant. This is 4.78:1
	 * and still quiet.
	 */
	border: var(--border-hairline) solid var(--color-text-muted);
	border-radius: 50%;
	background-color: transparent;
	transition: border-color var(--duration-fast) var(--ease-standard);
}

.choice:hover input {
	border-color: var(--color-gold);
}

.choice input:checked {
	border-color: var(--color-gold);
	/* The dot is a radial fill, so there is no extra element to position. */
	background-image: radial-gradient(circle, var(--color-gold) 0 4px, transparent 4px);
}

/*
 * Windows high contrast throws away background images and author colours, so
 * without this the checked state becomes invisible. The native control is
 * restored there and the OS draws it correctly.
 */
@media (forced-colors: active) {
	.choice input {
		appearance: auto;
	}
}

.choice__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1 1 auto;
}

.choice__title {
	font-family: var(--font-display);
	font-size: var(--text-h4);
}

.choice__meta {
	color: var(--color-text-muted);
	font-size: var(--text-body-sm);
}

/* ==========================================================================
   Date strip
   ========================================================================== */

.date-strip {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	padding-bottom: var(--space-3);
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.date-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 64px;
	min-height: 76px;
	padding: var(--space-3) var(--space-2);
	border: var(--border-hairline) solid var(--color-border-dark);
	background-color: var(--color-bg-raised);
	color: var(--color-text-secondary);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	letter-spacing: normal;
	text-transform: none;
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.date-chip:hover {
	background-color: var(--color-bg-raised);
	border-color: var(--color-border-dark-strong);
	color: var(--color-text-primary);
}

.date-chip.is-selected {
	background-color: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-bg-primary);
}

.date-chip__dow,
.date-chip__mon {
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.date-chip__day {
	font-family: var(--font-display);
	font-size: var(--text-h4);
	line-height: 1;
}

/* ==========================================================================
   Slot grid
   ========================================================================== */

.slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: var(--space-2);
}

.slot {
	min-height: var(--touch-target-min);
	padding-inline: var(--space-2);
	border: var(--border-hairline) solid var(--color-border-dark-strong);
	background-color: var(--color-bg-raised);
	color: var(--color-text-primary);
	font-size: var(--text-body-sm);
	letter-spacing: normal;
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

.slot:hover {
	background-color: var(--color-bg-raised);
	border-color: var(--color-gold);
	color: var(--color-gold);
}

/* Selected: gold fill with carbon text, as the component spec requires. */
.slot.is-selected {
	background-color: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-bg-primary);
}

.slot--taken,
.slot:disabled {
	color: var(--color-text-muted);
	border-color: var(--color-border-dark);
	background: none;
	text-decoration: line-through;
	opacity: 100%;
	pointer-events: none;
}

.slot--skeleton {
	display: block;
	min-height: var(--touch-target-min);
	border: var(--border-hairline) solid var(--color-border-dark);
	background: linear-gradient(90deg, var(--color-bg-raised), var(--color-bg-secondary), var(--color-bg-raised));
	background-size: 200% 100%;
	animation: mibarrio-shimmer 1.4s linear infinite;
}

@keyframes mibarrio-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.slot--skeleton {
		animation: none;
	}
}

.slot-grid__empty {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--color-text-secondary);
}

.slot-grid__suggestions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

/* ==========================================================================
   Review and confirmation
   ========================================================================== */

.review {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3) var(--space-5);
	margin: 0 0 var(--space-5);
	padding: var(--space-5);
	border: var(--border-hairline) solid var(--color-border-dark);
	background-color: var(--color-bg-raised);
}

.review dt {
	color: var(--color-text-muted);
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.review dd {
	margin: 0;
}

.booking__disclaimer {
	color: var(--color-text-muted);
	font-size: var(--text-body-sm);
}

.booking__confirmation {
	padding-block: var(--space-7);
}

.booking__confirmation h2 {
	margin: 0 0 var(--space-4);
	font-size: var(--text-h1);
}

.booking__reference {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding: var(--space-4) var(--space-5);
	border: var(--border-hairline) solid var(--color-gold);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	color: var(--color-gold);
}

.booking__reference-label {
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-label);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Service groups — barbering and braiding
   -------------------------------------------------------------------------- */

/*
 * `min-width: 0` for the same reason as `.booking__step`: a fieldset defaults
 * to `min-width: min-content` and will not shrink below its widest child.
 */
.booking__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.booking__group + .booking__group {
	margin-top: var(--space-7);
}

.booking__group-title {
	display: block;
	width: 100%;
	margin-bottom: var(--space-4);
	padding: 0 0 var(--space-3);
	border-bottom: var(--border-hairline) solid var(--color-border-dark-strong);
	color: var(--color-gold);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps-wide);
	text-transform: uppercase;
}