/* Amelia booking forms: shape and interaction to match the design system. Hand-written; token variables only.
   Colours come from Amelia -> Customize (light) and amelia-dark.css (dark); see docs/amelia-styling.md.
   Mostly sets Amelia's own sizing variables, so an Amelia update is less likely to break it.
   .am-dialog and the pop-ups Amelia moves to <body> sit outside .amelia-v2-booking, hence the extra selectors. */

/* Fields: 16px text. iOS Safari zooms the page in when a field with smaller text is tapped (Amelia's default is 15px)
   and doesn't zoom back out. !important beats the variable Amelia sets inline. */
:is(.amelia-v2-booking, .am-dialog) {
	--am-fs-inp: 16px !important;
}

/* Buttons: 48px pill, Figtree 16/20 bold. !important beats Amelia's size modifiers (--default, --medium …). */
:is(.amelia-v2-booking, .am-dialog) .am-button:not(.is-icon-only) {
	--am-h-btn: var(--wp--custom--tap-target) !important;
	--am-rad-btn: var(--wp--custom--radius--pill) !important;
	--am-padd-btn: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5) !important;
	--am-fs-btn: var(--wp--custom--type--button--font-size) !important;
	--am-lh-btn: var(--wp--custom--type--button--line-height) !important;
	--am-fw-btn: var(--wp--custom--type--button--font-weight) !important;
	border-radius: var(--wp--custom--radius--pill) !important; /* some panels hard-code 6px */
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--filled:not(.is-disabled):hover {
	--am-c-btn-bgr: var(--wp--preset--color--hype-blue-hover) !important;
}
/* Lift and shadow only where a pointer really hovers; on a phone a tapped button would keep them. */
@media (hover: hover) {
	:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--filled:not(.is-disabled):hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}
/* Secondary ("plain") buttons: outline in border-control, ink label, sunken fill on hover. */
:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--plain {
	--am-c-btn-text: var(--wp--preset--color--ink) !important;
	--am-c-btn-border: var(--wp--preset--color--border-control) !important;
}
:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--plain:not(.is-disabled):hover {
	--am-c-btn-bgr: var(--wp--preset--color--surface-sunken) !important;
}
/* Text buttons ("Learn more", "Back"): blue as text must be hype-blue-deep. */
:is(.amelia-v2-booking, .am-dialog) .am-button.am-button--text {
	--am-c-btn-text: var(--wp--preset--color--hype-blue-deep) !important;
}

/* Inputs and selects: 48px tall, 4px corners, border-control border (colour from Customize), Figtree.
   Set on every Amelia element because Amelia redeclares these variables on inner elements. */
:is(.amelia-v2-booking, .amelia-v2-booking *) {
	--am-input-height: var(--wp--custom--tap-target) !important;
	--am-h-select: var(--wp--custom--tap-target) !important;
	--am-rad-inp: var(--wp--custom--radius--sm) !important;
	--am-rad-input: var(--wp--custom--radius--sm) !important;
	--am-rad-select: var(--wp--custom--radius--sm) !important;
	--am-rad-inp-number: var(--wp--custom--radius--sm) !important;
	--am-input-number-height: var(--wp--custom--tap-target) !important;
	--am-font-family: var(--wp--preset--font-family--body) !important;
}

/* Boxes: the form's outer box takes the one 12px corner and the card shadow; cards nested inside it take 8px. */
.amelia-v2-booking #amelia-container.am-fs__wrapper { border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--preset--shadow--card); }
.amelia-v2-booking #amelia-container .am-fs-sb { border-radius: var(--wp--custom--radius--lg) 0 0 var(--wp--custom--radius--lg); }
.amelia-v2-booking [style*="--am-brad-main"] { --am-brad-main: 0 var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 !important; }
.amelia-v2-booking #amelia-container :is(.am-fs__init-item, .am-ec) { border-radius: var(--wp--custom--radius--md); }
/* Event cards: Amelia sets an inline shadow with an 8px stripe in the event's own colour (Amelia's default
   royal blue) and a light glow that shows in dark mode. Use the design system's card shadow, no stripe. */
.amelia-v2-booking #amelia-container .am-ec { box-shadow: var(--wp--preset--shadow--card) !important; }
/* Step-booking sidebar (Alex, 2026-10-30): the same surface-raised as the main panel in both themes (in dark mode
   the old surface-sunken sidebar blended into the page band), a border-subtle divider between the two, and
   surface-sunken step rows that read as slots in the card. Overrides Amelia's inline --am-c-sb-bgr, so the
   Customize value (colorSbBgr) no longer shows. amelia-dark.css maps sb-bgr to surface-raised too. */
:is(.amelia-v2-booking, [style*="--am-"]) { --am-c-sb-bgr: var(--wp--preset--color--surface-raised) !important; }
.amelia-v2-booking #amelia-container .am-fs-sb { border-inline-end: 1px solid var(--wp--preset--color--border-subtle); }
/* Step rows sit straight on the sidebar, no fill (surface-sunken read as holes, Alex 2026-10-30). Only the active
   step (the one whose ring Amelia marks as selected) gets hype-blue-tint; its ring keeps Amelia's 4px primary border.
   The ring's centre is see-through so it shows the row's colour. */
.amelia-v2-booking #amelia-container .am-fs-sb__step { background-color: transparent; }
.amelia-v2-booking #amelia-container .am-fs-sb__step:has(.am-fs-sb__step-checker-selected) { background-color: var(--wp--preset--color--hype-blue-tint); }
.amelia-v2-booking #amelia-container .am-fs-sb__step-checker { background-color: transparent; }
/* "Get in Touch": Amelia uses ink at 60%, 4.1:1 on white (fails AA at 14px). ink-muted is 6.3:1 light, 7.4:1 dark. */
.amelia-v2-booking #amelia-container .am-fs-sb__support-heading { color: var(--wp--preset--color--ink-muted); }
/* Cart count in the step-booking sidebar: Amelia paints it in the error colour, which reads as a warning.
   Use the brand fill with on-brand text instead. */
.amelia-v2-booking #amelia-container .am-fs-sb__step-icon .am-fs-sb__step-icon__number {
	background-color: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
	font-weight: 700;
}
/* Completed-step ticks in the same sidebar: brand blue, not success green (Alex, 2026-10-25).
   Green stays for success messages elsewhere. */
.amelia-v2-booking #amelia-container .am-fs-sb__step-checker .am-icon-check {
	background-color: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
}
/* Step-booking button bar: Amelia casts a faint shadow upwards that reads as a stray line across the form
   (Alex, 2026-10-25). */
.amelia-v2-booking #amelia-container .am-fs__main-footer { box-shadow: none !important; }
/* Date and time step (Alex, 2026-10-30). Date cells and time slots get radius-md. The selected date and slot were a
   solid hype-blue fill that read like a primary button next to Continue; now they match the active sidebar step:
   hype-blue-tint, a 2px hype-blue-deep border (1px border plus a 1px inset ring, so nothing shifts) and ink at 600.
   Today's dot follows the cell's text colour, as before; unavailable days are untouched. */
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell .fc-daygrid-day-frame { border-radius: var(--wp--custom--radius--md); }
.amelia-v2-booking #amelia-container .am-advsc__wrapper { --am-rad-advsc-slot: var(--wp--custom--radius--md); }
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell.am-advsc__dayGridMonth-selected .fc-daygrid-day-frame,
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell.am-advsc__dayGridMonth-selected .fc-daygrid-day-frame:hover {
	--am-c-advsc-cell-bgr: var(--wp--preset--color--hype-blue-tint);
	--am-c-advsc-cell-border: var(--wp--preset--color--hype-blue-deep);
	--am-c-advsc-cell-text: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--hype-blue-deep);
}
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell.am-advsc__dayGridMonth-selected .fc-daygrid-day-number { font-weight: 600; }
/* Hover on an available date: Amelia's 20% blue fill is almost the same as hype-blue-tint (#d6eff9 v #d9eff8 in light),
   so the fill stays at its resting 10% and hover shows only Amelia's 1px hype-blue border. */
.amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell:not(.am-advsc__dayGridMonth-selected, .am-advsc__dayGridMonth-disabled, .am-advsc__dayGridMonth-weekend) .fc-daygrid-day-frame:hover {
	--am-c-advsc-cell-bgr: var(--am-c-cal-init-op10);
}
.amelia-v2-booking #amelia-container .am-advsc__slots .am-advsc__slots-item.am-advsc__slots-item__selected .am-advsc__slots-item__inner {
	background: var(--wp--preset--color--hype-blue-tint);
	border: 1px solid var(--wp--preset--color--hype-blue-deep);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--hype-blue-deep);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.amelia-v2-booking #amelia-container .am-advsc__slots .am-advsc__slots-item.am-advsc__slots-item__selected span { background-color: transparent; }
/* Touch screens: a tap on an Amelia dropdown goes to the box around its field (which opens the list), not to the field
   itself, so the phone doesn't focus it natively and scroll the page to it. amelia-select.js makes the field read-only. */
@media (pointer: coarse) {
	.amelia-v2-booking .el-select input[role="combobox"][readonly] { pointer-events: none; }
}
/* Select menus (Alex, 2026-10-30): the service category, dance style and every other Amelia dropdown, including
   time lists. The open list floats (surface-raised, 1px border-floating, shadow-raised, radius-md). The selected
   option is the list version of the selected state: hype-blue-tint, ink 600, a check on the right, no outline.
   Hover and keyboard focus (Element Plus's is-hovering) show only a 1px hype-blue-deep border, so they never look
   selected. Rows are at least 48px. The lists are moved to <body>, so no .amelia-v2-booking ancestor here. Amelia
   sets row colours, height and padding with !important from its own variables, so these need it too. */
:is(.am-select-popper, .am-time-select__popper).el-select__popper.el-popper {
	background: var(--wp--preset--color--surface-raised) !important;
	border: 1px solid var(--wp--preset--color--border-floating) !important;
	border-radius: var(--wp--custom--radius--md) !important;
	box-shadow: var(--wp--preset--shadow--raised) !important;
	overflow: hidden;
}
:is(.am-select-popper, .am-time-select__popper).el-select-dropdown { background: transparent; }
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__list { padding: var(--wp--preset--spacing--1); }
/* Element Plus caps the list at 274px, which only fits five 48px rows; seven fit, and on a short screen it scrolls. */
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__wrap { max-height: min(368px, 55vh); }
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item {
	position: relative;
	box-sizing: border-box;
	min-height: 48px !important;
	height: auto !important;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 11px 40px 11px 10px !important;
	border: 1px solid transparent !important;
	border-radius: var(--wp--custom--radius--sm);
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
}
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item:not(.is-disabled):hover,
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item.is-hovering {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--hype-blue-deep) !important;
}
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item.is-selected {
	background-color: var(--wp--preset--color--hype-blue-tint) !important;
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600 !important;
}
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item.is-selected:not(:hover, .is-hovering) { border-color: transparent !important; }
:is(.am-select-popper, .am-time-select__popper) .el-select-dropdown__item.is-selected::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--hype-blue-deep);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Closed field text lines up with the option text: both start 16px in from the box's outer edge (the field's
   own padding is Amelia's 12px; the list adds 1px border + 4px padding + 1px row border + 10px row padding). */
.amelia-v2-booking #amelia-container .am-select .el-select__wrapper { padding-inline-start: 16px !important; }
/* Closed field: Element Plus draws the chosen value with the placeholder class in a fixed grey (#606266), and dims
   it (is-transparent) while the list is open. amelia-select.js flags a value as hype-has-value; a value is ink in
   both states, and only the real placeholder is ink-muted. */
.amelia-v2-booking .el-select__wrapper .el-select__placeholder { color: var(--wp--preset--color--ink); }
.amelia-v2-booking .el-select__wrapper .el-select__placeholder.is-transparent:not(.hype-has-value) { color: var(--wp--preset--color--ink-muted); }
/* The text sits in an inner span that Amelia colours itself; make it follow the line above. */
.amelia-v2-booking #amelia-container .am-select .el-select__wrapper .el-select__selected-item.el-select__placeholder > span { color: inherit !important; }
/* Focus on dates and time slots (Alex, 2026-10-30): the date cell (td) and the time slot are focusable buttons that
   already draw their own box, so the 3px focus ring around them made a double box (it also shows after a tap on
   iOS). Focus is the cell's own 1px hype-blue-deep border plus a 1px inset ring, as on the select rows, with no
   outer outline. A selected cell has the same border, so it never doubles up. */
.amelia-v2-booking #amelia-container :is(td.am-advsc__dayGridMonth-cell, .am-advsc__slots-item),
.amelia-v2-booking #amelia-container :is(td.am-advsc__dayGridMonth-cell, .am-advsc__slots-item) * { -webkit-tap-highlight-color: transparent; }
.amelia-v2-booking #amelia-container :is(td.am-advsc__dayGridMonth-cell, .am-advsc__slots-item):is(:focus, :focus-visible, :active),
.amelia-v2-booking #amelia-container :is(td.am-advsc__dayGridMonth-cell, .am-advsc__slots-item) *:is(:focus, :focus-visible, :active) { outline: none !important; }
.amelia-v2-booking #amelia-container td.am-advsc__dayGridMonth-cell:focus-visible .fc-daygrid-day-frame {
	--am-c-advsc-cell-border: var(--wp--preset--color--hype-blue-deep);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--hype-blue-deep);
}
.amelia-v2-booking #amelia-container .am-advsc__slots-item:focus-visible .am-advsc__slots-item__inner {
	border-color: var(--wp--preset--color--hype-blue-deep);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--hype-blue-deep);
}
/* Prices are labels, not buttons, so no pill shape. */
.amelia-v2-booking #amelia-container .am-fs__init-item__price { border-radius: var(--wp--custom--radius--sm); }

/* Focus on buttons and links: 3px focus-ring, 2px offset. */
:is(.amelia-v2-booking, .am-dialog, [class*="am-"][class*="popper"]) :is(a, button, [role="button"]):focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring) !important;
	outline-offset: 2px;
}
/* Focus on fields (Alex, 2026-10-25): no outline; Amelia's own 1px primary border plus a soft focus-ring glow,
   matching the Stripe card field. */
.amelia-v2-booking #amelia-container :is(.el-input__wrapper.is-focus, .el-textarea__inner.is-focus, .el-select__wrapper.is-focus, .el-select__wrapper.is-focused, .am-input-phone .m-input-wrapper.--border:focus-within) {
	box-shadow: 0 0 0 1px var(--am-c-primary), 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--focus-ring) 25%, transparent) !important;
}
.amelia-v2-booking #amelia-container :is(input, textarea):focus { outline: none; }

/* Phone field: same 48px height and 4px corners as the other fields (Amelia hard-codes 40px and 6px). */
.amelia-v2-booking #amelia-container .am-input-phone.m-input-phone-number .m-input-wrapper-input:not(.m-select-country .m-input-wrapper-input) { height: var(--wp--custom--tap-target); }
.amelia-v2-booking #amelia-container .am-input-phone.m-input-phone-number .m-input-wrapper.--border { border-radius: var(--wp--custom--radius--sm); }

/* Links in text: hype-blue-deep, 1px underline thickening to 3px on hover. */
:is(.amelia-v2-booking, .am-dialog) a:not(.am-button) {
	color: var(--wp--preset--color--hype-blue-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness 150ms ease-out;
}
@media (hover: hover) {
	:is(.amelia-v2-booking, .am-dialog) a:not(.am-button):hover { text-decoration-thickness: 3px; }
}

@media (prefers-reduced-motion: reduce) {
	:is(.amelia-v2-booking, .am-dialog) :is(.am-button, a) { transition: none; }
	:is(.amelia-v2-booking, .am-dialog) .am-button:hover { transform: none; }
}

/* Forms on the page (not pop-ups): Amelia centres its outer box with `margin: 100px auto`. From 1024px the box
   sits on the content column's left edge, in line with the h1 and intro, at Amelia's own max width; below 1024px
   it fills the column. The gap above the form is space-7 (48px) in bands; in news posts it follows the section's
   own gap. Alex, 2026-10-30. */
.wp-block-post-content .amelia-v2-booking > :is(#amelia-container, .am-elf) {
	margin: 0;
}
@media (max-width: 1023px) {
	.wp-block-post-content .amelia-v2-booking > :is(#amelia-container, .am-elf) {
		max-width: none;
	}
}
/* Customer portal sign-in card: keeps its 400px width, on the left edge. */
.wp-block-post-content .amelia-v2-booking #amelia-container.am-cap__wrapper.am-auth > .am-asi {
	margin-inline: 0 auto;
}
/* Flow layouts give the form a 16px block gap; bands' inner groups already add their 32px row gap. */
.wp-block-post-content :not(.hdc-prose__section, .hdc-band__inner) > .amelia-v2-booking {
	margin-block-start: var(--wp--preset--spacing--7);
}
.wp-block-post-content .wp-block-group.hdc-band__inner > .amelia-v2-booking {
	margin-block-start: calc(var(--wp--preset--spacing--7) - var(--wp--preset--spacing--6));
}