/**
 * Alnora — "Modern" booking form design.
 *
 * Loaded after alnc-public.css, and only on pages drawing this design. Every rule
 * is scoped to .alnc-booking--design-modern, so Classic, the portal and the invoice
 * page are never touched.
 *
 * Colours, fonts, corners and shadows come only from the --alnc-* variables that
 * Settings → Customization writes, so this design follows a clinic's branding the
 * same way Classic does. Where a softer shade is needed it is mixed from those
 * variables rather than written in.
 *
 * Styling hooks for your own CSS:
 *   .alnc-booking__layout / __main / __rail   the two-column frame
 *   .alnc-rail, .alnc-rail__step--{done|active|todo|fixed}, --{location|doctor|service|datetime|details}
 *   .alnc-rail__label, .alnc-rail__value, .alnc-rail__total
 */

/* ── Frame ───────────────────────────────────────────────────────────────── */

body .alnc-booking.alnc-booking--design-modern {
	--alnc-m-ease: cubic-bezier(.22, 1, .36, 1);
	--alnc-m-tint: color-mix(in srgb, var(--alnc-teal) 10%, var(--alnc-bg-card));
	--alnc-m-ring: color-mix(in srgb, var(--alnc-teal) 28%, transparent);
	padding: var(--alnc-space-8);
	background-color: var(--alnc-bg-card);
	border-color: var(--alnc-border-subtle);
	overflow: visible;
}

.alnc-booking--design-modern .alnc-booking__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--alnc-space-10);
	align-items: start;
}
.alnc-booking--design-modern .alnc-booking__main { min-width: 0; }

/* Success and payment-return screens clear the steps: give the message the full width. */
.alnc-booking--design-modern .alnc-booking__layout:has(.alnc-booking__progress:empty) { grid-template-columns: minmax(0, 1fr); }
.alnc-booking--design-modern .alnc-booking__rail:has(.alnc-booking__progress:empty) { display: none; }

/* ── Heading ─────────────────────────────────────────────────────────────── */

.alnc-booking--design-modern .alnc-booking__head { margin-bottom: var(--alnc-space-8); }
.alnc-booking--design-modern .alnc-booking__head .alnc-h1 {
	font-size: var(--alnc-text-2xl);
	letter-spacing: var(--alnc-tracking-tight);
	line-height: var(--alnc-leading-tight);
}
.alnc-booking--design-modern .alnc-booking__timezone {
	display: inline-flex;
	margin-top: var(--alnc-space-3);
	padding: 6px 12px;
	border-radius: var(--alnc-radius-pill);
	background: var(--alnc-m-tint);
	color: var(--alnc-text-body);
}

/* ── Step rail ───────────────────────────────────────────────────────────── */

.alnc-booking--design-modern .alnc-booking__rail {
	position: sticky;
	top: 50px;
	margin-top: 50px;
}
.alnc-booking--design-modern .alnc-booking__progress {
	padding: var(--alnc-space-6) var(--alnc-space-5);
	background: color-mix(in srgb, var(--alnc-teal-mist) 70%, var(--alnc-bg-card));
	border: 1px solid var(--alnc-border-subtle);
	border-radius: var(--alnc-radius-xl);
	box-shadow: var(--alnc-shadow-sm);
	transition: opacity var(--alnc-transition-slow);
}
.alnc-booking--design-modern .alnc-booking__progress.is-loading { opacity: .55; }

.alnc-booking--design-modern .alnc-rail {
	list-style: none;
	margin: 0;
	padding: 0;
}
.alnc-booking--design-modern .alnc-rail__step {
	position: relative;
	margin: 0;
	padding: 0 0 var(--alnc-space-5);
}
.alnc-booking--design-modern .alnc-rail__step:last-child { padding-bottom: 0; }

/* The line joining one dot to the next. It fills with the brand colour as a step is
   completed, growing downwards rather than switching colour. */
.alnc-booking--design-modern .alnc-rail__step:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: 23px;
	top: 42px;
	bottom: 2px;
	width: 2px;
	border-radius: 2px;
	background:
		linear-gradient(var(--alnc-teal), var(--alnc-teal)) top / 100% 0 no-repeat,
		var(--alnc-border);
}
.alnc-booking--design-modern .alnc-rail__step--done:not(:last-child)::before,
.alnc-booking--design-modern .alnc-rail__step--fixed:not(:last-child)::before { background-size: 100% 100%, auto; }
.alnc-booking--design-modern .alnc-rail__step--just-done:not(:last-child)::before { animation: alnc-m-fill-down .6s var(--alnc-m-ease) backwards; }

.alnc-booking--design-modern .alnc-rail__btn {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: flex-start;
	gap: var(--alnc-space-3);
	width: 100%;
	margin: 0;
	padding: 6px 8px;
	border: 0;
	border-radius: var(--alnc-radius-md);
	background: none;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: default;
}
.alnc-booking--design-modern button.alnc-rail__btn { cursor: pointer; }
/* A later step the patient can jump back to: its dot answers the pointer. */
.alnc-booking--design-modern .alnc-rail__step--reachable .alnc-rail__dot { border-color: var(--alnc-teal-light); color: var(--alnc-teal-dark); }
.alnc-booking--design-modern .alnc-rail__step--reachable button.alnc-rail__btn:hover .alnc-rail__dot { border-color: var(--alnc-teal); }
.alnc-booking--design-modern .alnc-rail__step--reachable button.alnc-rail__btn:hover .alnc-rail__label { color: var(--alnc-text-primary); }
.alnc-booking--design-modern button.alnc-rail__btn:focus-visible { outline: 2px solid var(--alnc-teal); outline-offset: 2px; }

.alnc-booking--design-modern .alnc-rail__dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--alnc-border);
	background: var(--alnc-bg-card);
	color: var(--alnc-text-muted);
	font-size: var(--alnc-text-sm);
	font-weight: var(--alnc-weight-bold);
	transition: background-color .3s var(--alnc-m-ease), border-color .3s var(--alnc-m-ease), color .3s var(--alnc-m-ease), transform .3s var(--alnc-m-ease);
}
.alnc-booking--design-modern .alnc-rail__dot svg { display: block; }
.alnc-booking--design-modern .alnc-rail__step--active .alnc-rail__dot {
	border-color: var(--alnc-teal);
	background: var(--alnc-teal);
	color: var(--alnc-text-inverse);
	transform: scale(1.08);
}
/* A soft ring that breathes around the step the patient is on. */
.alnc-booking--design-modern .alnc-rail__step--active .alnc-rail__dot::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--alnc-m-ring);
	animation: alnc-m-ring 2.4s var(--alnc-m-ease) infinite;
}
.alnc-booking--design-modern .alnc-rail__step--done .alnc-rail__dot {
	border-color: var(--alnc-teal);
	background: var(--alnc-teal);
	color: var(--alnc-text-inverse);
}
.alnc-booking--design-modern .alnc-rail__step--just-done .alnc-rail__dot { animation: alnc-m-pop .4s var(--alnc-m-ease) backwards; }
.alnc-booking--design-modern .alnc-rail__step--fixed .alnc-rail__dot {
	border-color: transparent;
	background: var(--alnc-m-tint);
	color: var(--alnc-teal-dark);
}

.alnc-booking--design-modern .alnc-rail__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-top: 6px;
}
.alnc-booking--design-modern .alnc-rail__label {
	font-size: var(--alnc-text-xs);
	font-weight: var(--alnc-weight-semibold);
	letter-spacing: var(--alnc-tracking-wider);
	text-transform: uppercase;
	color: var(--alnc-text-muted);
	line-height: 1.4;
}
.alnc-booking--design-modern .alnc-rail__step--active .alnc-rail__label { color: var(--alnc-teal-dark); }
.alnc-booking--design-modern .alnc-rail--labels-only .alnc-rail__label {
	font-size: var(--alnc-text-sm);
	letter-spacing: 0;
	text-transform: none;
	font-weight: var(--alnc-weight-medium);
}
.alnc-booking--design-modern .alnc-rail--labels-only .alnc-rail__step--active .alnc-rail__label { color: var(--alnc-text-primary); font-weight: var(--alnc-weight-semibold); }

.alnc-booking--design-modern .alnc-rail__value {
	font-size: var(--alnc-text-sm);
	font-weight: var(--alnc-weight-semibold);
	color: var(--alnc-text-primary);
	line-height: var(--alnc-leading-snug);
	overflow-wrap: anywhere;
}
.alnc-booking--design-modern .alnc-rail__step--todo .alnc-rail__value { color: var(--alnc-text-body); font-weight: var(--alnc-weight-medium); }
.alnc-booking--design-modern .alnc-rail__value--fresh { animation: alnc-m-value .45s var(--alnc-m-ease) backwards; }

.alnc-booking--design-modern .alnc-rail__total {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 2px var(--alnc-space-3);
	margin-top: var(--alnc-space-5);
	padding-top: var(--alnc-space-4);
	border-top: 1px dashed var(--alnc-border);
	animation: alnc-m-value .45s var(--alnc-m-ease) backwards;
}
.alnc-booking--design-modern .alnc-rail__total-label {
	font-size: var(--alnc-text-xs);
	font-weight: var(--alnc-weight-semibold);
	letter-spacing: var(--alnc-tracking-wider);
	text-transform: uppercase;
	color: var(--alnc-text-muted);
}
.alnc-booking--design-modern .alnc-rail__total-value {
	font-size: var(--alnc-text-md);
	color: var(--alnc-text-primary);
	text-align: end;
}
/* Duration sits under the price, right-aligned with it. */
.alnc-booking--design-modern .alnc-rail__total-meta {
	grid-column: 2;
	font-size: var(--alnc-text-sm);
	color: var(--alnc-text-muted);
	text-align: end;
}

/* ── Step content ────────────────────────────────────────────────────────── */

.alnc-booking--design-modern .alnc-booking__loading {
	animation: alnc-m-fade .3s ease backwards;
	color: var(--alnc-text-muted);
}

/* Lists arrive one card after another. */
.alnc-booking--design-modern .alnc-choice-grid > *,
.alnc-booking--design-modern .alnc-service-grid > * {
	animation: alnc-m-rise .45s var(--alnc-m-ease) backwards;
}
.alnc-booking--design-modern :is(.alnc-choice-grid, .alnc-service-grid) > :nth-child(2)  { animation-delay: 40ms; }
.alnc-booking--design-modern :is(.alnc-choice-grid, .alnc-service-grid) > :nth-child(3)  { animation-delay: 80ms; }
.alnc-booking--design-modern :is(.alnc-choice-grid, .alnc-service-grid) > :nth-child(4)  { animation-delay: 120ms; }
.alnc-booking--design-modern :is(.alnc-choice-grid, .alnc-service-grid) > :nth-child(5)  { animation-delay: 160ms; }
.alnc-booking--design-modern :is(.alnc-choice-grid, .alnc-service-grid) > :nth-child(6)  { animation-delay: 200ms; }
.alnc-booking--design-modern :is(.alnc-choice-grid, .alnc-service-grid) > :nth-child(7)  { animation-delay: 240ms; }
.alnc-booking--design-modern :is(.alnc-choice-grid, .alnc-service-grid) > :nth-child(n+8) { animation-delay: 280ms; }

/* ── Location and doctor cards: a row with the picture beside the name ──── */

.alnc-booking--design-modern .alnc-choice-grid {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--alnc-space-3);
}
.alnc-booking--design-modern .alnc-choice {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	/* Cards in a row share the tallest one's height. Keep the content together in the
	   middle instead of letting the rows spread out to fill it. */
	align-content: center;
	align-items: center;
	justify-items: start;
	column-gap: var(--alnc-space-4);
	row-gap: 2px;
	padding: var(--alnc-space-4);
	padding-inline-end: var(--alnc-space-10);
	text-align: start;
	background: var(--alnc-bg-card);
	border: 1.5px solid var(--alnc-border);
	border-radius: var(--alnc-radius-lg);
	box-shadow: var(--alnc-shadow-sm);
	transition: border-color .25s var(--alnc-m-ease), box-shadow .25s var(--alnc-m-ease), transform .25s var(--alnc-m-ease), background-color .25s var(--alnc-m-ease);
}
.alnc-booking--design-modern .alnc-choice > * { grid-column: 2; }
.alnc-booking--design-modern .alnc-choice > .alnc-choice__avatar { grid-column: 1; grid-row: 1 / span 3; }
.alnc-booking--design-modern .alnc-choice__avatar {
	width: 56px;
	height: 56px;
	box-shadow: 0 0 0 3px var(--alnc-bg-card), 0 0 0 5px var(--alnc-m-tint);
	transition: box-shadow .25s var(--alnc-m-ease);
}
.alnc-booking--design-modern .alnc-choice__avatar--initials { font-size: var(--alnc-text-lg); }
.alnc-booking--design-modern .alnc-choice__title { margin-bottom: 0; font-size: var(--alnc-text-md); }

.alnc-booking--design-modern .alnc-choice-grid--locations { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* Locations have no avatar: the image, when there is one, spans the card. */
.alnc-booking--design-modern .alnc-choice--location { grid-template-columns: minmax(0, 1fr); padding: var(--alnc-space-4); }
/* No chevron on locations, so no room kept for one: the same space on every side. */
.alnc-booking--design-modern .alnc-choice--location::after { display: none; }
.alnc-booking--design-modern .alnc-choice--location > * { grid-column: 1; }
.alnc-booking--design-modern .alnc-choice--location .alnc-choice__img { width: 100%; height: 130px; margin-bottom: var(--alnc-space-2); }

/* A chevron that nudges forward on hover. */
.alnc-booking--design-modern .alnc-choice::after {
	content: "";
	position: absolute;
	inset-inline-end: 18px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	color: var(--alnc-text-muted);
	opacity: .5;
	transform: translateY(-50%) rotate(45deg);
	transition: transform .25s var(--alnc-m-ease), opacity .25s var(--alnc-m-ease), color .25s var(--alnc-m-ease);
}
.alnc-booking--design-modern[dir="rtl"] .alnc-choice::after { transform: translateY(-50%) rotate(-45deg); }

.alnc-booking--design-modern .alnc-choice:hover,
.alnc-booking--design-modern .alnc-choice:focus-visible {
	background: var(--alnc-bg-card);
	border-color: var(--alnc-teal-light);
	box-shadow: var(--alnc-shadow-md);
	transform: translateY(-2px);
}
.alnc-booking--design-modern .alnc-choice:hover::after { opacity: 1; color: var(--alnc-teal); transform: translate(3px, -50%) rotate(45deg); }
.alnc-booking--design-modern[dir="rtl"] .alnc-choice:hover::after { transform: translate(-3px, -50%) rotate(-45deg); }
.alnc-booking--design-modern .alnc-choice:hover .alnc-choice__avatar { box-shadow: 0 0 0 3px var(--alnc-bg-card), 0 0 0 5px var(--alnc-teal-light); }
.alnc-booking--design-modern .alnc-choice:focus-visible { outline: 2px solid var(--alnc-teal); outline-offset: 2px; }

.alnc-booking--design-modern .alnc-choice.alnc-choice--selected {
	border-color: var(--alnc-teal);
	background: var(--alnc-m-tint);
}
.alnc-booking--design-modern .alnc-choice.alnc-choice--selected::after { color: var(--alnc-teal); opacity: 1; }

/* ── Services ────────────────────────────────────────────────────────────── */

.alnc-booking--design-modern .alnc-service-grid { grid-template-columns: repeat(1, 1fr); gap: var(--alnc-space-3); }
.alnc-booking--design-modern .alnc-service {
	position: relative;
	align-items: center;
	padding: var(--alnc-space-4) var(--alnc-space-5);
	border: 1.5px solid var(--alnc-border);
	border-radius: var(--alnc-radius-lg);
	box-shadow: var(--alnc-shadow-sm);
	transition: border-color .25s var(--alnc-m-ease), box-shadow .25s var(--alnc-m-ease), transform .25s var(--alnc-m-ease);
}
.alnc-booking--design-modern .alnc-service:hover {
	border-color: var(--alnc-teal-light);
	box-shadow: var(--alnc-shadow-md);
	transform: translateY(-2px);
}
.alnc-booking--design-modern .alnc-service:focus-visible { outline: 2px solid var(--alnc-teal); outline-offset: 2px; }
/* The card background is locked by Classic with !important, so the selected state is
   drawn with an inset accent bar instead of a fill. */
.alnc-booking--design-modern .alnc-service.alnc-choice--selected {
	border-color: var(--alnc-teal);
	box-shadow: inset 4px 0 0 var(--alnc-teal);
}
.alnc-booking--design-modern[dir="rtl"] .alnc-service.alnc-choice--selected { box-shadow: inset -4px 0 0 var(--alnc-teal); }
.alnc-booking--design-modern .alnc-service .alnc-choice__title { margin-bottom: 4px; font-size: var(--alnc-text-md); }
.alnc-booking--design-modern .alnc-service__meta { align-items: flex-end; gap: 6px; }
.alnc-booking--design-modern .alnc-service__price {
	padding: 3px 10px;
	border-radius: var(--alnc-radius-pill);
	background: var(--alnc-m-tint);
	color: var(--alnc-teal-dark);
	white-space: nowrap;
}
.alnc-booking--design-modern .alnc-service__dur { white-space: nowrap; }
.alnc-booking--design-modern .alnc-service__check { border-radius: 50%; transition: transform .25s var(--alnc-m-ease), background-color .25s, border-color .25s; }
.alnc-booking--design-modern .alnc-service.alnc-choice--selected .alnc-service__check { transform: scale(1.1); }
.alnc-booking--design-modern .alnc-service-total {
	border: 1px solid var(--alnc-border-subtle);
	border-radius: var(--alnc-radius-lg);
	background: var(--alnc-m-tint);
}

.alnc-booking--design-modern .alnc-cat-chip { transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--alnc-m-ease); }
.alnc-booking--design-modern .alnc-cat-chip:hover { transform: translateY(-1px); }

/* ── Date and time ───────────────────────────────────────────────────────── */

.alnc-booking--design-modern .alnc-datetime { gap: var(--alnc-space-6); }
.alnc-booking--design-modern .alnc-cal,
.alnc-booking--design-modern .alnc-slots {
	padding: var(--alnc-space-5);
	border: 1px solid var(--alnc-border-subtle);
	border-radius: var(--alnc-radius-xl);
	background: var(--alnc-bg-card);
	box-shadow: var(--alnc-shadow-sm);
}
.alnc-booking--design-modern .alnc-cal__nav { border-radius: 50%; transition: background-color .2s, transform .2s var(--alnc-m-ease); }
.alnc-booking--design-modern .alnc-cal__nav:hover { transform: scale(1.08); }
.alnc-booking--design-modern .alnc-cal__grid { gap: 6px; }
.alnc-booking--design-modern .alnc-cal__cell {
	background: color-mix(in srgb, var(--alnc-bg-input) 70%, var(--alnc-bg-card));
	font-weight: var(--alnc-weight-medium);
	transition: background-color .2s, color .2s, transform .2s var(--alnc-m-ease), box-shadow .2s;
}
.alnc-booking--design-modern .alnc-cal__cell:hover:not(:disabled) { transform: scale(1.08); }
.alnc-booking--design-modern .alnc-cal__cell--empty,
.alnc-booking--design-modern .alnc-cal__cell--disabled { background: transparent; }
.alnc-booking--design-modern .alnc-cal__cell--selected {
	background: var(--alnc-teal);
	color: var(--alnc-text-inverse);
	animation: alnc-m-pop .3s var(--alnc-m-ease) backwards;
}

.alnc-booking--design-modern .alnc-slots__grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--alnc-space-2); }
.alnc-booking--design-modern .alnc-slot {
	border-radius: var(--alnc-radius-md);
	border-color: var(--alnc-border);
}
.alnc-booking--design-modern .alnc-slot--selected,
.alnc-booking--design-modern .alnc-slot--selected:focus {
	background: var(--alnc-teal);
	border-color: var(--alnc-teal);
	color: var(--alnc-text-inverse);
}

.alnc-booking--design-modern .alnc-waitlist { border-radius: var(--alnc-radius-xl); }

/* ── Details ─────────────────────────────────────────────────────────────── */

.alnc-booking--design-modern .alnc-summary {
	border: 1px solid var(--alnc-border-subtle);
	border-radius: var(--alnc-radius-xl);
	background: var(--alnc-m-tint);
}
.alnc-booking--design-modern .alnc-form .alnc-input,
.alnc-booking--design-modern .alnc-form .alnc-select,
.alnc-booking--design-modern .alnc-form .alnc-textarea {
	transition: border-color .2s, box-shadow .2s;
}
.alnc-booking--design-modern .alnc-form .alnc-input:focus,
.alnc-booking--design-modern .alnc-form .alnc-select:focus,
.alnc-booking--design-modern .alnc-form .alnc-textarea:focus {
	border-color: var(--alnc-teal);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.alnc-booking--design-modern .alnc-booking__nav { border-top-color: var(--alnc-border-subtle); }

/* ── Success ─────────────────────────────────────────────────────────────── */

.alnc-booking--design-modern .alnc-success__check { animation: alnc-m-pop .5s var(--alnc-m-ease) .1s backwards; }

/* ── Wide: the rail carries every answer, so the details step drops its own summary ── */

@container alnc-booking (min-width: 760px) {
	.alnc-booking--design-modern:has(.alnc-rail:not(.alnc-rail--labels-only)) .alnc-details { grid-template-columns: minmax(0, 1fr); }
	.alnc-booking--design-modern:has(.alnc-rail:not(.alnc-rail--labels-only)) .alnc-details > .alnc-summary { display: none; }
}

/* ── Narrow: the rail becomes a compact progress strip above the steps ────── */

@container alnc-booking (max-width: 759px) {
	/* The main column opens up so the strip can sit between the heading and the step. */
	.alnc-booking--design-modern .alnc-booking__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.alnc-booking--design-modern .alnc-booking__main { display: contents; }
	.alnc-booking--design-modern .alnc-booking__head { order: -2; }
	.alnc-booking--design-modern .alnc-booking__rail { position: static; order: -1; margin: 0 0 var(--alnc-space-6); }
	.alnc-booking--design-modern .alnc-booking__progress { padding: var(--alnc-space-3) var(--alnc-space-4); }
	.alnc-booking--design-modern .alnc-rail { display: flex; align-items: flex-start; }
	.alnc-booking--design-modern .alnc-rail__step { flex: 1 1 0; min-width: 0; padding: 0; }
	.alnc-booking--design-modern .alnc-rail__step:not(:last-child)::before {
		top: 21px;
		bottom: auto;
		inset-inline-start: calc(50% + 20px);
		inset-inline-end: calc(-50% + 20px);
		width: auto;
		height: 2px;
		background:
			linear-gradient(var(--alnc-teal), var(--alnc-teal)) left / 0 100% no-repeat,
			var(--alnc-border);
	}
	.alnc-booking--design-modern .alnc-rail__step--done:not(:last-child)::before,
	.alnc-booking--design-modern .alnc-rail__step--fixed:not(:last-child)::before { background-size: 100% 100%, auto; }
	.alnc-booking--design-modern .alnc-rail__step--just-done:not(:last-child)::before { animation-name: alnc-m-fill-across; }
	.alnc-booking--design-modern .alnc-rail__btn { flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px; }
	.alnc-booking--design-modern .alnc-rail__text { align-items: center; padding-top: 0; text-align: center; }
	.alnc-booking--design-modern .alnc-rail__value,
	.alnc-booking--design-modern .alnc-rail__total { display: none; }
	.alnc-booking--design-modern .alnc-rail__label { font-size: 10px; letter-spacing: 0.02em; }
	.alnc-booking--design-modern .alnc-rail__step:not(.alnc-rail__step--active) .alnc-rail__label { opacity: .75; }
	.alnc-booking--design-modern .alnc-booking__head { margin-bottom: var(--alnc-space-5); }
}
@container alnc-booking (max-width: 520px) {
	/* Duration and price share one line under the name rather than stacking. */
	.alnc-booking--design-modern .alnc-service__meta { flex-direction: row; justify-content: space-between; align-items: center; margin-top: var(--alnc-space-2); }
}
@container alnc-booking (max-width: 460px) {
	body .alnc-booking.alnc-booking--design-modern { padding: var(--alnc-space-5); }
	.alnc-booking--design-modern .alnc-rail__step:not(.alnc-rail__step--active) .alnc-rail__label { display: none; }
	.alnc-booking--design-modern .alnc-choice-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Motion ──────────────────────────────────────────────────────────────── */

@keyframes alnc-m-rise {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
@keyframes alnc-m-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes alnc-m-value {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}
@keyframes alnc-m-pop {
	0%   { transform: scale(.85); }
	60%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}
@keyframes alnc-m-fill-down {
	from { background-size: 100% 0, auto; }
}
@keyframes alnc-m-fill-across {
	from { background-size: 0 100%, auto; }
}
@keyframes alnc-m-ring {
	0%   { opacity: .9; transform: scale(.9); }
	70%  { opacity: 0;  transform: scale(1.25); }
	100% { opacity: 0;  transform: scale(1.25); }
}

/* Patients who have asked their device for less motion get none of it. */
@media (prefers-reduced-motion: reduce) {
	.alnc-booking--design-modern *,
	.alnc-booking--design-modern *::before,
	.alnc-booking--design-modern *::after {
		animation: none !important;
		transition: none !important;
	}
}