/* =====================================================================
   Hotel Alacer — 2026 theme for the older spa day and treatment engines
   (WebBookingMVC4: jQuery UI + Bootstrap 3). Generated by retheme.py — do not hand-edit.
   Loaded last from the leisure wrappers; the old WordPress-copy CSS is no longer loaded.
   ===================================================================== */

:root {
	--brand-cream: #f8f5f0;
	--brand-ink: #2b2925;
	--brand-corten: #2b2925;
	--brand-bronze: #a68a5b;
	--brand-sand: #e6ddcf;
	--brand-linen: #f4f1ec;
	--brand-paper: #ffffff;
	--brand-muted: #5c5750;
	--brand-line: rgba(43, 41, 37, 0.12);
	--brand-line-strong: rgba(43, 41, 37, 0.28);
	--brand-font: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--brand-heading-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--brand-btn: #2b2925;
	--brand-btn-fg: #ffffff;
	--brand-btn-hover: #a68a5b;
	--brand-btn2: #ffffff;
	--brand-btn2-fg: #2b2925;
	--brand-required: #a3242b;
	--brand-texture: none;
}

/* ---------- Page ---------- */
html body {
	background: var(--brand-cream) !important;
	color: var(--brand-ink) !important;
	font-family: var(--brand-font) !important;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}
html body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]):not(.glyphicon):not([class*="glyphicon-"]):not(.ui-icon):not(i) {
	font-family: var(--brand-font) !important;
}
html body a { color: var(--brand-bronze); }
html body a:hover { color: var(--brand-corten); }

.brand-leisure-main, html body main#engineBackground.brand-leisure-main {
	background: transparent !important;
	padding: 0 16px 3rem;
	margin: 0 !important;
	min-height: min(80vh, 640px);   /* capped so tall screens don't get a big gap above the footer (footer review 29 Oct); the engine fills the page after load: keep the footer below the fold so it doesn't jump (audit 28 Oct: layout shift 0.6 on phones) */
}
/* the engine's standard customer CSS (Class_User / SpaLeisure_User / Treatment_User templates) colours calendars, sliders and
   buttons through these variables, still set to each site's old colours: point them at the brand (audit 28 Oct, Douneside) */
/* user CSS sets these variables on every element (`* { --secColor: ... }`, Douneside Class_User.css), so they are
   re-set on every element here too, not just on html (audit 28 Oct: class calendar titles stayed the old brown) */
html:not(#x), html:not(#x) * {
	--mainColor: #2b2925; --secColor: var(--brand-ink);
	--buttonColor: #2b2925; --buttonColorHover: #a68a5b; --buttonTextColor: #ffffff; --buttonTextColorHover: #ffffff;
	--buttonMainColor: #2b2925; --buttonMainColorDesaturated: #a68a5b;
	--calendarAvailableColor: var(--brand-paper); --calendarAvailableTextColor: var(--brand-ink);
	--calendarSelectedColor: var(--brand-ink); --calendarSelectedTextColor: #ffffff;
	--calendarUnavailableColor: var(--brand-cream); --calendarUnavailableTextColor: var(--brand-muted);
	--sliderHandleColor: var(--brand-ink); --sliderSelectedAreaColor: #2b2925; --sliderNotSelectedAreaColor: var(--brand-line-strong);
}
html body #engineInnerArea.container {
	background: transparent !important;
	padding: 0 !important;
	margin-top: 0 !important;
	box-shadow: none !important;
	max-width: 1170px;
}

/* ---------- Header and footer (same as the rooms and vouchers engines) ---------- */
.brand-header {
	background: #2b2925 var(--brand-texture) repeat;
	border-bottom: 0;
	color: #f8f5f0;
	margin: 0 0 2.5rem 0;
	position: relative;
	z-index: 2;
}
.brand-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 110px;
	padding: 12px 36px;
	box-sizing: border-box;
	gap: 16px;
}
.brand-header-side { display: flex; align-items: center; gap: 18px; }
.brand-header-right { justify-content: flex-end; }
.brand-logo { display: flex; align-items: center; justify-content: center; text-decoration: none; border: 0; }
.brand-logo img { display: block; height: 88px; width: auto; }
html body .brand-logo, html body .brand-logo:hover { color: #f8f5f0 !important; }
html body .brand-logo svg { display: block; width: 230px; max-width: 60vw; height: auto; flex: none; }
html body .brand-logo svg path:not([fill]) { fill: currentColor; }
.brand-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand-back, .brand-accolade {
	color: #f8f5f0 !important;
	font-size: 12px !important;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: none !important;
	opacity: .85;
}
.brand-back:hover { opacity: 1; color: #f8f5f0 !important; }
.brand-back::before { content: "\2190"; margin-right: 8px; }
@media (max-width: 767.98px) {
	.brand-header { margin-bottom: 1.5rem; }
	.brand-header-inner { min-height: 76px; padding: 10px 16px; }
	.brand-logo img { height: 60px; }
	html body .brand-logo svg { width: 170px; }
	.brand-back { font-size: 0 !important; }
	.brand-back::before { font-size: 18px; margin: 0; }
	.brand-accolade { font-size: 11px !important; letter-spacing: 1px; }
}

.brand-footer { font-family: var(--brand-font); color: #f8f5f0; margin: 3rem 0 0; clear: both; }
.brand-footer a { color: #f8f5f0 !important; text-decoration: none !important; }
.brand-footer-top {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
	gap: 24px 48px; padding: 48px 36px; background: #2b2925 var(--brand-texture) repeat;
}
.brand-contact { display: flex; flex-direction: column; gap: 14px; }
.brand-footer-title {
	font-family: var(--brand-heading-font) !important;
	font-size: 34px; line-height: 1.1; text-transform: none;
	font-size-adjust: 0.5; color: #f8f5f0; margin-bottom: 4px;
}
.brand-contact-item { font-size: 14px; line-height: 1.5; }
.brand-label { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; opacity: .85; margin-bottom: 2px; }
.brand-links { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; text-align: right; }
.brand-strap-name { display: block; font-size: 15px; letter-spacing: 2px; color: #f8f5f0; margin-bottom: 4px; }
.brand-strap { font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: #e6ddcf; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.35); }
.brand-links a { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.brand-links a:hover { color: #e6ddcf !important; }
.brand-footer-under { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 36px; background: var(--brand-cream); color: var(--brand-ink); }
.brand-affiliations { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.brand-affiliations img { height: 40px; width: auto; display: block; }
.brand-copy { font-size: 12px; }
@media (max-width: 767.98px) {
	.brand-footer-top { flex-direction: column; align-items: flex-start; padding: 36px 16px; }
	.brand-links { align-items: flex-start; text-align: left; }
	.brand-footer-under { flex-direction: column; align-items: flex-start; padding: 16px; }
}

/* ---------- Headings ---------- */
html body #engineInnerArea h1, html body #engineInnerArea h2, html body #engineInnerArea h3, html body #engineInnerArea h4,
html body .ui-dialog h1, html body .ui-dialog h2, html body .ui-dialog h3, html body .ui-dialog h4 {
	color: var(--brand-ink) !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
}
/* page and section headings in the brand script */
html body:not(#x) #engineInnerArea :is(.pageHeading, .stepHeading, legend, #yourDetailsLbl, #guestWelcomeLabel, .brand-step-title),
html body:not(#x) .ui-dialog .ui-dialog-title {
	font-family: var(--brand-heading-font) !important;
	text-transform: none;
	font-size-adjust: 0.5;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

/* ---------- Buttons: jQuery UI buttons, Bootstrap buttons and the engines' own ---------- */
html body .ui-button, html body .ui-state-default.ui-button, html body button.ui-button,
html body #engineInnerArea .btn, html body #engineInnerArea .ButtonLink,
html body .ui-dialog .ui-dialog-buttonpane button, html body .ui-dialog .ui-button {
	background: var(--brand-btn) !important;
	border: 1px solid var(--brand-btn) !important;
	color: var(--brand-btn-fg) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 1.4px !important;
	text-transform: uppercase !important;
	padding: 0 !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
html body .ui-button .ui-button-text { padding: 10px 18px !important; line-height: 1.2 !important; color: inherit !important; }
html body .ui-button:hover, html body .ui-button.ui-state-hover, html body .ui-button:focus,
html body #engineInnerArea .btn:hover, html body .ui-dialog .ui-dialog-buttonpane button:hover {
	background: var(--brand-btn-hover) !important;
	border-color: var(--brand-btn-hover) !important;
	color: var(--brand-btn-fg) !important;
}
html body #engineInnerArea .btn { padding: 10px 18px !important; }
/* secondary actions: back, login, cancel */
html body .ui-button.brand-btn-secondary, html body #engineInnerArea .headerLeft.ui-button,
html body #engineInnerArea .Loginlink, html body #engineInnerArea #LoginArea .ui-button, html body #BookingLinks .ui-button,
html body .ui-dialog .ui-dialog-buttonpane button.brand-btn-secondary {
	background: var(--brand-btn2) !important;
	border-color: var(--brand-btn2) !important;
	color: var(--brand-btn2-fg) !important;
}
html body .ui-button.brand-btn-secondary:hover, html body #engineInnerArea .headerLeft.ui-button:hover,
html body #engineInnerArea .Loginlink:hover, html body #BookingLinks .ui-button:hover {
	background: var(--brand-btn) !important; border-color: var(--brand-btn) !important; color: var(--brand-btn-fg) !important;
}
html body .ui-button.ui-state-disabled, html body .ui-button[disabled] { opacity: .45 !important; }
/* Button height standard (2026 refresh): every action button 44px tall, label centred,
   so Book / Continue / Apply / Login line up across pages. Calendar day cells and icon controls are not .btn/.ui-button. */
html body .ui-button, html body button.ui-button, html body #engineInnerArea .btn, html body #engineInnerArea .ButtonLink,
html body .ui-dialog .ui-dialog-buttonpane button {
	min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center;
	vertical-align: middle; line-height: 1.2 !important; box-sizing: border-box;
}
html body #engineInnerArea .btn.btn-block { display: flex !important; width: 100%; }
html body .ui-button[style*="display: none"], html body #engineInnerArea .btn[style*="display: none"],
html body .ui-button.ui-helper-hidden, html body #engineInnerArea .btn.hidden { display: none !important; }
html body .ui-datepicker .ui-button, html body .ui-slider .ui-button, html body .input-group-btn .ui-button { min-height: 0 !important; }

/* ---------- Form fields ---------- */
html body #engineInnerArea input[type="text"], html body #engineInnerArea input[type="email"], html body #engineInnerArea input[type="tel"],
html body #engineInnerArea input[type="date"], html body #engineInnerArea input[type="number"], html body #engineInnerArea input[type="password"],
html body #engineInnerArea select, html body #engineInnerArea textarea, html body #engineInnerArea .form-control,
html body .ui-dialog input[type="text"], html body .ui-dialog input[type="email"], html body .ui-dialog input[type="tel"],
html body .ui-dialog input[type="password"], html body .ui-dialog select, html body .ui-dialog textarea,
html body input.GuestEntryMediumBox:not(.ui-state-error), html body input.GuestEntrySmallBox:not(.ui-state-error) {
	background: var(--brand-paper) !important;
	border: 1px solid var(--brand-line-strong) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--brand-ink) !important;
	font-size: 15px !important;
	min-height: 40px;
	padding: 6px 10px !important;
}
html body #engineInnerArea input:focus, html body #engineInnerArea select:focus, html body #engineInnerArea textarea:focus,
html body .ui-dialog input:focus, html body .ui-dialog select:focus, html body .ui-dialog textarea:focus {
	border-color: var(--brand-ink) !important;
	outline: 2px solid var(--brand-bronze) !important;
	outline-offset: 1px;
}
html body .ui-state-error, html body input.ui-state-error, html body select.ui-state-error {
	border-color: var(--brand-required) !important;
	background: var(--brand-paper) !important;
}
html body #engineInnerArea label, html body .ui-dialog label, html body .labelDiv, html body .fieldsetLabel {
	color: var(--brand-ink) !important;
	font-weight: 500 !important;
}
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--brand-ink); width: 18px; height: 18px; vertical-align: -3px; }

/* ---------- Spa day engine: search panel, results, cards ---------- */
html body #loginBar { margin-bottom: 18px; }
/* the left-hand panel (date, search, spa days added, price, next) as one card */
html body #spaLeisureSidebar {
	background: var(--brand-paper) !important;
	border: 1px solid var(--brand-line) !important;
	padding: 22px 20px 18px !important;
	position: sticky;
	top: 16px;
}
html body #spaLeisureSidebar fieldset { border: 0 !important; margin: 0 0 18px !important; padding: 0 !important; background: transparent !important; }
html body #spaLeisureSidebar legend {
	font-family: var(--brand-heading-font) !important; text-transform: none; font-size-adjust: 0.5;
	font-size: 28px !important; border: 0 !important; margin: 0 0 10px !important; color: var(--brand-ink) !important;
}
html body #spaLeisureSidebar table { width: 100% !important; background: transparent !important; border: 0 !important; }
html body #spaLeisureSidebar td, html body #spaLeisureSidebar tr { background: transparent !important; border: 0 !important; padding: 4px 0 !important; vertical-align: middle; }
html body #spaLeisureSidebar input[type="date"] { width: 100% !important; }
html body #spaLeisureSidebar .ui-button, html body #spaLeisureSidebar button, html body #spaLeisureSidebar input[type="button"], html body #spaLeisureSidebar input[type="submit"] { width: 100% !important; margin-top: 6px; }
html body #spaLeisureSidebar #totalPriceRow td { font-size: 16px !important; font-weight: 600 !important; border-top: 1px solid var(--brand-line) !important; padding-top: 10px !important; }
html body #engineInnerArea p, html body #engineInnerArea div { text-align: left; }
html body #engineInnerArea .text-center, html body #engineInnerArea .text-center * { text-align: center; }
html body #engineInnerArea .ButtonLink, html body #engineInnerArea a.Loginlink {
	display: inline-block; padding: 10px 18px !important; text-decoration: none !important;
}
html body #engineInnerArea input[type="button"], html body #engineInnerArea input[type="submit"], html body .ui-dialog input[type="button"], html body .ui-dialog input[type="submit"] {
	background: var(--brand-btn) !important; border: 1px solid var(--brand-btn) !important; color: var(--brand-btn-fg) !important;
	border-radius: 0 !important; box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important;
	letter-spacing: 1.4px !important; text-transform: uppercase !important; padding: 10px 18px !important; min-height: 0;
}
html body #engineInnerArea input[type="button"]:hover, html body #engineInnerArea input[type="submit"]:hover { background: var(--brand-btn-hover) !important; border-color: var(--brand-btn-hover) !important; }
html body #engineInnerArea #bookingScreen { padding-left: 24px; }
html body .spaDaySurround, html body .spaDaySurround.ui-widget-content {
	background: var(--brand-paper) !important;
	border: 1px solid var(--brand-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-bottom: 24px !important;
	padding: 0 !important;
	overflow: hidden;
}
html body .spaDayImageCol { padding: 0 !important; }
/* spa day pictures: shown whole at their own shape (often artwork with words on it, so never cropped),
   in a wider left column on desktop and as a full-width banner on phones */
html body:not(#x) .spaDayImage, html body:not(#x) .spaDayImage > div { height: auto !important; min-height: 0 !important; }
html body:not(#x) .spaDayImage img.viewDetails { width: 100% !important; height: auto !important; min-height: 0 !important; object-fit: contain; display: block; border-radius: 0 !important; }
@media (min-width: 768px) {
	/* picture top-left, the booking ("times") panel under it, words on the right, cancellation bar across the bottom */
	html body:not(#x) .spaDaySurround { display: grid !important; grid-template-columns: minmax(220px, 36%) 1fr; grid-template-rows: auto 1fr auto; align-items: stretch; }
	html body:not(#x) .spaDaySurround::before, html body:not(#x) .spaDaySurround::after { display: none !important; }
	html body:not(#x) .spaDaySurround > * { float: none !important; width: auto !important; grid-column: 1 / -1; }
	html body:not(#x) .spaDaySurround > .spaDayImageCol { grid-column: 1; grid-row: 1; }
	html body:not(#x) .spaDaySurround > .col-sm-9 { grid-column: 2; grid-row: 1 / span 2; }
	html body:not(#x) .spaDaySurround > .spaDayfooter:not(.lightBuleBarCancelation) { grid-column: 1; grid-row: 2; }
	html body:not(#x) .spaDaySurround > .lightBuleBarCancelation { grid-row: 3; }
}
/* the booking panel: a soft shade between the white card and the linen cancellation bar */
html body:not(#x) .spaDaySurround > .spaDayfooter:not(.lightBuleBarCancelation) {
	background: var(--brand-cream) !important; display: flex !important; flex-wrap: wrap; gap: 8px; align-content: flex-start;
	padding: 16px 18px !important; margin: 0 !important; border: 0 !important; min-height: 0 !important;
}
html body:not(#x) .spaDaySurround > .spaDayfooter:not(.lightBuleBarCancelation)::before { display: none; }
html body:not(#x) .spaDaySurround > .spaDayfooter[data-brand-caption]::before {
	content: attr(data-brand-caption); display: block; flex: 0 0 100%; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-muted);
}
html body:not(#x) .spaDaySurround > .spaDayfooter .bookButton { float: none !important; margin: 0 !important; }
html body:not(#x) .spaDaySurround > .spaDayfooter > p:empty { display: none !important; }
html body .spaDayImage { position: relative; }
html body .spaDayImage .showGalleryIcon { position: absolute; right: 12px; bottom: 12px; width: 30px !important; height: 30px !important; opacity: .9; }
html body .spaDayDescription { padding: 22px 8px 0 18px !important; }
html body .spaDayDescription h3, html body .spaDaySurround h3 {
	font-size: 17px !important;
	text-transform: uppercase;
	letter-spacing: 0.08em !important;
	margin: 0 0 10px !important;
}
html body .spaDaySurround h3.priceText, html body .priceText { color: var(--brand-bronze) !important; float: right; font-size: 20px !important; letter-spacing: 0.02em !important; }
html body .packageDescription { font-size: 15px !important; line-height: 1.6 !important; color: var(--brand-ink) !important; clear: both; }
html body .spaDayfooter { background: transparent !important; border: 0 !important; padding: 8px 18px 14px !important; }
html body .lightBuleBarCancelation { background: var(--brand-linen) !important; border-top: 1px solid var(--brand-line) !important; padding: 12px 18px !important; }
html body .lightBuleBarCancelation, html body .lightBuleBarCancelation * { font-size: 13px !important; color: var(--brand-ink) !important; }
html body .ViewCancellationPolicies { text-decoration: underline; cursor: pointer; }
html body .spaDaySurround .bookButton { float: right; margin: 0 !important; }
/* Budget / price sliders: ONE design in every engine (26 Oct, Rob): a linen band, the chosen range in sand, the two ends as thin
   ink bars (no circles). Same as the vouchers/tickets slider in brand_voucher.css. The bars keep a 28px invisible touch area. */
html body:not(#x) .ui-slider.ui-slider-horizontal { background: var(--brand-linen) !important; background-image: none !important; border: 0 !important; height: 32px !important; border-radius: 0 !important; box-shadow: none !important; }
html body:not(#x) .ui-slider .ui-slider-range { background: var(--brand-sand) !important; background-image: none !important; top: 0 !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; }
html body:not(#x) .ui-slider .ui-slider-handle { background: var(--brand-ink) !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; width: 4px !important; height: 42px !important; top: -5px !important; margin-left: -2px !important; cursor: ew-resize; }
html body:not(#x) .ui-slider .ui-slider-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; right: -12px; }

/* ---------- Treatment engine: categories accordion, times ---------- */
html body .ui-accordion .ui-accordion-header, html body .ui-accordion-header.ui-state-default {
	background: var(--brand-paper) !important;
	border: 1px solid var(--brand-line) !important;
	border-radius: 0 !important;
	color: var(--brand-ink) !important;
	box-shadow: none !important;
	margin-top: 14px !important;
	padding: 0 !important;
	overflow: hidden;
}
html body .ui-accordion .ui-accordion-header.ui-state-active, html body .ui-accordion .ui-accordion-header:hover { border-color: var(--brand-line-strong) !important; background: var(--brand-paper) !important; }
html body .ui-accordion .ui-accordion-content {
	background: var(--brand-paper) !important;
	border: 1px solid var(--brand-line) !important;
	border-top: 0 !important;
	border-radius: 0 !important;
	color: var(--brand-ink) !important;
	box-shadow: none !important;
}
/* treatments inside a category: quiet rows with hairlines, not cards */
html body:not(#x) #LeisureItemsSubGroupsAccordion .LeisureItemsAccordion > .ui-accordion-header { margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--brand-line) !important; background: transparent !important; padding: 12px 8px !important; }
html body:not(#x) #LeisureItemsSubGroupsAccordion .LeisureItemsAccordion > .ui-accordion-header:hover, html body:not(#x) #LeisureItemsSubGroupsAccordion .LeisureItemsAccordion > .ui-accordion-header.ui-state-active { background: var(--brand-linen, #ece8df) !important; }
html body:not(#x) #LeisureItemsSubGroupsAccordion .LeisureItemsAccordion > .ui-accordion-content { border: 0 !important; border-bottom: 1px solid var(--brand-line) !important; }
html body:not(#x) .LeisureItemsAccordion .classAccordionHeaderTitle { font-size: 16px !important; text-transform: none !important; letter-spacing: 0.02em !important; font-weight: 400 !important; }
html body .ui-accordion .ui-accordion-header .ui-accordion-header-icon { display: none; }
/* session / time buttons */
html body .timeButton, html body .timeButtons .ui-button, html body [class*="TimeButton"], html body .bookableTimeButton {
	background: var(--brand-paper) !important;
	border: 1px solid var(--brand-line-strong) !important;
	color: var(--brand-ink) !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
	min-width: 84px;
}
html body .timeButton:hover, html body .timeButtons .ui-button:hover, html body [class*="TimeButton"]:hover {
	background: var(--brand-linen) !important; border-color: var(--brand-ink) !important; color: var(--brand-ink) !important;
}
html body .timeButton.ui-state-active, html body .timeButton.selected, html body [class*="TimeButton"].ui-state-active {
	background: var(--brand-bronze) !important; border-color: var(--brand-bronze) !important; color: #fff !important;
}

/* ---------- jQuery UI widgets generally ---------- */
html body .ui-widget, html body .ui-widget input, html body .ui-widget select, html body .ui-widget textarea, html body .ui-widget button { font-family: var(--brand-font) !important; }
html body .ui-widget-content { background: var(--brand-paper); border-color: var(--brand-line); color: var(--brand-ink); }
html body .ui-widget-header { background: var(--brand-paper) !important; border: 0 !important; border-bottom: 1px solid var(--brand-line) !important; color: var(--brand-ink) !important; border-radius: 0 !important; }
html body .ui-state-highlight, html body .ui-widget-content .ui-state-highlight { background: var(--brand-linen) !important; border-color: var(--brand-sand) !important; color: var(--brand-ink) !important; }
html body .ui-corner-all, html body .ui-corner-top, html body .ui-corner-bottom { border-radius: 0 !important; }
html body .ui-widget-overlay { background: rgba(43, 41, 37, .55) !important; opacity: 1 !important; }
html body .ui-dialog {
	background: var(--brand-paper) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
	padding: 0 !important;
	max-width: calc(100vw - 24px);
}
html body .ui-dialog .ui-dialog-titlebar { padding: 18px 22px 12px !important; }
html body .ui-dialog .ui-dialog-title { font-size: 30px !important; color: var(--brand-ink) !important; }
html body .ui-dialog .ui-dialog-titlebar-close { background: transparent !important; border: 0 !important; right: 14px !important; }
html body .ui-dialog .ui-dialog-content { padding: 6px 22px 18px !important; color: var(--brand-ink) !important; }
html body .ui-dialog .ui-dialog-buttonpane { border-top: 1px solid var(--brand-line) !important; padding: 12px 22px !important; margin: 0 !important; background: var(--brand-paper) !important; }

/* ---------- Summary tables, totals, confirmation ---------- */
html body #engineInnerArea table { border-color: var(--brand-line) !important; background: var(--brand-paper); }
html body #engineInnerArea table th { background: var(--brand-paper) !important; color: var(--brand-ink) !important; font-weight: 600 !important; border-bottom: 1px solid var(--brand-line-strong) !important; }
html body #engineInnerArea table td { border-color: var(--brand-line) !important; color: var(--brand-ink) !important; }
html body #SearchMessage, html body #guestWelcomeLabel, html body #yourDetailsLbl, html body #PaymentDetailsArea, html body #amountAndDepositDueArea { color: var(--brand-ink) !important; }
html body #idForm[name="verifonePaymentForm"] { background: var(--brand-paper) !important; }

/* ---------- Toasts ---------- */
html body .alacerToastMessage, html body div.alacerToastMessage { background: var(--brand-ink) !important; color: #fff !important; border-radius: 0 !important; border: 0 !important; }

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
	html body #engineInnerArea #bookingScreen { padding-left: 0; margin-top: 18px; }
	html body .spaDayDescription { padding: 16px 16px 0 !important; }
	html body .spaDayfooter { padding: 8px 16px 14px !important; }
	html body #engineInnerArea input, html body #engineInnerArea select, html body .ui-dialog input, html body .ui-dialog select { font-size: 16px !important; }
}

/* ---------- Keyboard focus and skip link (from the accessibility layer) ---------- */
.brand-skip {
	position: absolute; left: 12px; top: -60px; z-index: 10000;
	background: var(--brand-ink); color: #fff !important; padding: 10px 16px; font-size: 14px;
}
.brand-skip:focus { top: 12px; }
html body :focus-visible { outline: 2px solid var(--brand-bronze) !important; outline-offset: 2px; }
html body :focus:not(:focus-visible) { outline: none; }

/* ---------- Refinements ---------- */
html:root:not(#brand-x) { background: var(--brand-cream) !important; } /* beats the old user CSS (loaded later) that paints html charcoal */
html body:not(#x) .brand-footer .brand-footer-title { font-family: var(--brand-heading-font) !important; text-transform: none; }
html body #spaLeisureSidebar, html body #spaLeisureSidebar * { text-align: left !important; }
html body #spaLeisureSidebar > div:last-child, html body #spaLeisureSidebar p { font-size: 13px !important; line-height: 1.55 !important; color: var(--brand-muted) !important; }
/* treatment categories: names in the brand's spaced capitals, calmer descriptions */
html body .ItemSubGroupHeader .classAccordionHeaderTitle, html body .ItemSubGroupHeader h3, html body .ItemSubGroupHeader h4 {
	font-size: 17px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 500 !important;
}
html body .ui-accordion-header p, html body .ui-accordion-header .description { font-size: 15px !important; line-height: 1.6 !important; color: var(--brand-ink) !important; }
html body .ui-accordion-header .price { color: var(--brand-bronze) !important; font-weight: 500 !important; }
html body .ui-accordion-header img { object-fit: cover; }

/* old user CSS gives these shadows, rounded corners and a 5-class border reset; out-rank it */
html body:not(#x) #LeisureItemsSubGroupsAccordion .LeisureItemsAccordion > .ui-accordion-header,
html body:not(#x) #LeisureItemsSubGroupsAccordion .LeisureItemsAccordion > .ui-accordion-content { box-shadow: none !important; -webkit-box-shadow: none !important; border-radius: 0 !important; color: var(--brand-ink) !important; }
html body:not(#x) .leisureAccordionHeaderPrice, html body:not(#x) .leisureAccordionHeaderPrice .price { color: var(--brand-bronze) !important; font-weight: 500 !important; }
/* time slots: clear, tappable chips */
html body:not(#x) .timeButtons { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 14px; }
html body:not(#x) .timeButtons button.TimeButton.ui-button {
	background: var(--brand-paper) !important; border: 1px solid var(--brand-line-strong) !important; border-radius: 0 !important;
	color: var(--brand-ink) !important; min-width: 76px; min-height: 40px; margin: 0 !important; float: none !important; box-shadow: none !important;
	font-size: 14px !important; letter-spacing: 0.04em !important; text-transform: none !important;
}
html body:not(#x) .timeButtons button.TimeButton.ui-button .ui-button-text { padding: 8px 10px !important; }
html body:not(#x) .timeButtons button.TimeButton.ui-button:hover, html body:not(#x) .timeButtons button.TimeButton.ui-button:focus-visible { border-color: var(--brand-ink) !important; background: var(--brand-linen) !important; }
html body:not(#x) .timeButtons button.TimeButton.ui-button.ui-state-active, html body:not(#x) .timeButtons button.TimeButton.ui-button.selected { background: var(--brand-ink) !important; color: #fff !important; border-color: var(--brand-ink) !important; }
html body:not(#x) .ItemSubGroupHeader .SubGroupDescArea { font-weight: 400 !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--brand-muted) !important; }
/* the group-booking note is CSS-generated by the old user CSS: keep it, but as a quiet left-aligned footnote */
html body:not(#x) #spaLeisureSidebar::after { text-align: left !important; font-size: 13px !important; line-height: 1.55 !important; color: var(--brand-muted) !important; border-top: 1px solid var(--brand-line); padding-top: 14px; margin-top: 16px; font-family: var(--brand-font) !important; }

/* ---------- Month calendar (leisure_calendar.js; removed automatically if the engine changes) ---------- */
html body .brand-cal-hide { display: none !important; }
html body .brand-cal-col { float: none !important; width: 100% !important; clear: both; padding-left: 15px; padding-right: 15px; }
html body #SpaBookingPage > .brand-cal-col { padding-left: 15px !important; padding-right: 15px !important; }
html body .brand-cal {
	background: var(--brand-paper); border: 1px solid var(--brand-line); padding: 24px 28px 22px; margin: 0 0 24px;
	display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 14px 44px; color: var(--brand-ink);
}
/* title, then the month arrows directly above the calendar (not out on the right) */
html body .brand-cal-head { grid-column: 1 / 2; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
html body .brand-cal-head .brand-cal-nav { justify-content: space-between; }
html body .brand-cal-head .brand-cal-month { flex: 1 1 auto; }
html body .brand-cal-cal { grid-column: 1; grid-row: 2; }
html body .brand-cal-side { grid-column: 2; grid-row: 2; }
html body:not(#x) #engineInnerArea .brand-cal-title { margin: 0 !important; font-size: 34px !important; line-height: 1.1 !important; font-family: var(--brand-heading-font) !important; font-weight: 400 !important; text-transform: none !important; font-size-adjust: 0.5; letter-spacing: 0 !important; }
html body .brand-cal-nav { display: flex; align-items: center; gap: 6px; }
html body .brand-cal-nav button {
	width: 44px; height: 44px; border: 1px solid var(--brand-line-strong); background: transparent; color: var(--brand-ink);   /* 44px touch target (audit 28 Oct) */
	font-size: 20px; line-height: 1; cursor: pointer; padding: 0; border-radius: 0;
}
html body .brand-cal-nav button:hover:not(:disabled) { border-color: var(--brand-ink); background: var(--brand-linen); }
html body .brand-cal-nav button:disabled { opacity: .3; cursor: default; }
html body .brand-cal-month { min-width: 160px; text-align: center; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
html body .brand-cal-dow, html body .brand-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
html body .brand-cal-dow span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-muted); text-align: center; padding: 4px 0 6px; }
html body .brand-cal-day {
	position: relative; aspect-ratio: 1 / 1; min-height: 40px; width: 100%; border: 1px solid transparent; border-radius: 0;
	background: transparent; color: var(--brand-ink); font-size: 15px; cursor: pointer; padding: 0;
	display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s;
}
html body .brand-cal-day.is-a { background: var(--brand-linen); }
html body .brand-cal-day.is-a::after, html body .brand-cal-swatch.is-a::after {
	content: ""; position: absolute; bottom: 18%; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand-bronze);
}
html body .brand-cal-day.is-a:hover, html body .brand-cal-day.is-e:hover { border-color: var(--brand-ink); }
html body .brand-cal-day.is-n, html body .brand-cal-swatch.is-n { color: rgba(43, 41, 37, .32); text-decoration: line-through; text-decoration-color: rgba(43, 41, 37, .3); cursor: not-allowed; }
html body .brand-cal-day.is-c, html body .brand-cal-swatch.is-c { color: rgba(43, 41, 37, .5); }
html body .brand-cal-day.is-c { cursor: progress; }
html body .brand-cal-day.is-c::after, html body .brand-cal-swatch.is-c::after {
	content: ""; position: absolute; bottom: 18%; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
	background: rgba(43, 41, 37, .25); animation: brandCalPulse 1.2s ease-in-out infinite;
}
@keyframes brandCalPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html body .brand-cal-day.is-c::after, html body .brand-cal-swatch.is-c::after { animation: none; } }
html body .brand-cal-day.is-e { border: 1px dashed var(--brand-line-strong); }
html body .brand-cal-day.is-past { color: rgba(43, 41, 37, .18); cursor: default; }
html body .brand-cal-day.is-today { font-weight: 600; }
html body .brand-cal-day.is-sel { background: var(--brand-ink) !important; color: #fff !important; border-color: var(--brand-ink) !important; }
html body .brand-cal-day.is-sel::after { background: #fff !important; }
html body .brand-cal-side { align-self: start; padding-top: 30px; font-size: 14px; }
html body .brand-cal-key { list-style: none; margin: 0 0 16px; padding: 0; }
html body .brand-cal-key li { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
html body .brand-cal-swatch {
	position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 13px;
	border: 1px solid transparent; flex: none;
}
html body .brand-cal-swatch.is-a { background: var(--brand-linen); }
html body .brand-cal-status { color: var(--brand-muted); margin: 0 0 12px; min-height: 1.4em; }
html body .brand-cal-first {
	background: transparent; border: 1px solid var(--brand-ink); color: var(--brand-ink); padding: 10px 16px; border-radius: 0;
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
html body .brand-cal-first:hover { background: var(--brand-ink); color: #fff; }
html body .brand-cal-chosen { margin: 14px 0 0; font-size: 15px; }
html body .brand-cal-chosen:empty { display: none; }
@media (max-width: 767.98px) {
	html body .brand-cal { grid-template-columns: 1fr; padding: 18px 16px; gap: 12px; }
	html body:not(#x) #engineInnerArea .brand-cal-title { font-size: 26px !important; }
	html body .brand-cal-month { min-width: 120px; }
	html body .brand-cal-side { padding-top: 4px; grid-column: 1; grid-row: auto; }
	html body .brand-cal-head, html body .brand-cal-cal { grid-column: 1; grid-row: auto; }
}

/* treatment engine: categories are checked when opened (leisure_calendar.js) */
html.brand-cal-on body .SubGroupItemsCountLabel { display: none !important; }   /* the engine's "x Items" can't be trusted */
html body .brand-tf-gone { display: none !important; }
html body .brand-cat-checking .SubGroupItemsAccordionArea { display: none !important; }
html body .brand-cat-status.is-done { display: none; }
html body .brand-cat-status.is-checking {
	display: flex; align-items: center; justify-content: center; gap: 14px; padding: 34px 20px; color: var(--brand-muted);
	font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
html body:not(#x) .brand-cat-status.is-empty { padding: 26px 24px !important; text-align: center !important; color: var(--brand-ink) !important; font-size: 16px !important; line-height: 1.6 !important; background: var(--brand-cream); margin: 4px 0 8px; }
html body .brand-spinner {
	width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--brand-line-strong); border-top-color: var(--brand-bronze);
	animation: brandSpin .9s linear infinite; flex: none;
}
@keyframes brandSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html body .brand-spinner { animation-duration: 2.5s; } }
html body .brand-tf-status { margin: 0 0 12px; padding: 14px 18px; background: var(--brand-paper); border: 1px solid var(--brand-line-strong); color: var(--brand-ink); font-size: 14px; }
html body .brand-tf-status[hidden] { display: none !important; }

/* ---------- Pop-ups: centred, sized to the screen ---------- */
html body:not(#x) .ui-dialog {
	position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);
	width: min(560px, calc(100vw - 24px)) !important; max-height: calc(100vh - 24px); overflow: auto;
	box-shadow: 0 24px 60px rgba(43, 41, 37, .25) !important;
}
html body:not(#x) .ui-dialog .ui-dialog-content { width: auto !important; height: auto !important; max-height: none !important; }
html body:not(#x) .ui-dialog .ui-dialog-titlebar-close { width: 36px !important; height: 36px !important; top: 22px !important; margin: 0 !important; }
html body:not(#x) .ui-dialog .ui-dialog-titlebar-close .ui-icon { left: 50% !important; top: 50% !important; margin: -8px 0 0 -8px !important; }

/* Pop-ups on phones (review 26 Oct, Moddershall): the box was capped at 100vh, which on iPhone Safari is the height with the
   toolbars hidden, so the bottom of a long form (the guest register's address fields and Add guest) sat behind the toolbar or
   keyboard and couldn't be reached; swipes scrolled the page behind instead. On phones the box is capped to the visible screen
   (dvh), its title and buttons stay put while the form scrolls inside it, the page behind is held still, and while a field has
   focus there is spare room under the form so the last fields and buttons can be scrolled up above the keyboard. */
@media (max-width: 767.98px) {
	html body:not(#x):not(#brand-dlg) .ui-dialog {
		width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px) !important; max-height: calc(100dvh - 16px) !important;
		display: flex !important; flex-direction: column; overflow: hidden !important;
	}
	html body:not(#x):not(#brand-dlg) .ui-dialog[style*="display: none"], html body:not(#x):not(#brand-dlg) .ui-dialog[style*="display:none"] { display: none !important; }
	html body:not(#x):not(#brand-dlg) .ui-dialog > .ui-dialog-titlebar, html body:not(#x):not(#brand-dlg) .ui-dialog > .ui-dialog-buttonpane { flex: 0 0 auto; }
	html body:not(#x):not(#brand-dlg) .ui-dialog > .ui-dialog-content {
		flex: 1 1 auto; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		padding-bottom: 24px !important;
	}
	html body:not(#x):not(#brand-dlg) .ui-dialog:has(:is(input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]), select, textarea):focus) > .ui-dialog-content { padding-bottom: 45vh !important; }
	html:has(body > .ui-widget-overlay), body:has(> .ui-widget-overlay) { overflow: hidden !important; }
}
/* Pop-up centring must win over customer user CSS (26 Oct, Moddershall iPhone): their SpaLeisure_User.css / Treatment_User.css
   set `.ui-dialog { transform: translate(-50%, 0) !important }` under 576px, which cancelled the vertical centring, so the box
   started halfway down the screen and its bottom (and the guest register's Add guest) ran off it. */
html body:not(#x):not(#brand-dlg):not(#brand-dlg-centre) .ui-dialog { transform: translate(-50%, -50%) !important; }
/* the fixed "continue" bar never sits over an open pop-up */
html body:has(> .ui-widget-overlay) .brand-flow-bar { display: none !important; }

/* guest register: a calm two-column form */
html body:not(#x) .ui-dialog:has(#guestDetails-modal) { width: min(620px, calc(100vw - 24px)) !important; }
html body:not(#x) #guestDetails-modal #formInputDiv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding-top: 6px; }
html body:not(#x) #guestDetails-modal .GuestEntryItem { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
html body:not(#x) #guestDetails-modal .GuestEntryItem#Title { grid-column: 1 / -1; }
html body:not(#x) #guestDetails-modal .GuestEntryItem#Title select { max-width: 180px; }
html body:not(#x) #guestDetails-modal .GuestEntryItem#Location,
html body:not(#x) #guestDetails-modal .GuestEntryItem#Street { grid-column: 1 / -1; }
html body:not(#x) #guestDetails-modal .GuestEntryLabel {
	float: none !important; width: auto !important; display: block; margin: 0 0 6px !important;
	font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--brand-muted) !important; font-weight: 500 !important;
}
html body:not(#x) #guestDetails-modal .GuestEntryControl { float: none !important; width: auto !important; }
html body:not(#x) #guestDetails-modal .GuestEntryControl input, html body:not(#x) #guestDetails-modal .GuestEntryControl select {
	width: 100% !important; min-height: 44px; box-sizing: border-box; font-size: 16px !important;
}
html body:not(#x) #guestDetails-modal #guestListSurround > a { display: block; margin: 0 0 12px; color: var(--brand-muted) !important; }
html body:not(#x) .ui-dialog .ui-dialog-buttonpane { display: flex; justify-content: flex-end; }
html body:not(#x) .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { display: flex; gap: 10px; float: none !important; flex-wrap: wrap; justify-content: flex-end; }
html body:not(#x) .ui-dialog .ui-dialog-buttonpane button { margin: 0 !important; }
@media (max-width: 560px) {
	html body:not(#x) #guestDetails-modal #formInputDiv { grid-template-columns: 1fr; }
	html body:not(#x) .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { width: 100%; }
	html body:not(#x) .ui-dialog .ui-dialog-buttonpane button { flex: 1 1 0; }
}

/* picture gallery: a dark lightbox, whole pictures, arrows on the picture */
html body:not(#x) .ui-dialog:has(#AlacerImageGalleryModal) {
	width: min(1000px, calc(100vw - 24px)) !important; background: var(--brand-ink) !important; border: 0 !important;
}
html body:not(#x) .ui-dialog:has(#AlacerImageGalleryModal) .ui-dialog-titlebar { background: transparent !important; border: 0 !important; }
html body:not(#x) .ui-dialog:has(#AlacerImageGalleryModal) .ui-dialog-title { color: #fff !important; }
html body:not(#x) .ui-dialog:has(#AlacerImageGalleryModal) .ui-dialog-titlebar-close .ui-icon { filter: invert(1); }
html body:not(#x) #AlacerImageGalleryModal { background: transparent !important; color: #fff !important; padding: 0 22px 22px !important; }
html body:not(#x) #AlacerImageGalleryModal #slides { position: relative; }
html body:not(#x) #AlacerImageGalleryModal .slidesjs-container { background: #000; }
html body:not(#x) #AlacerImageGalleryModal .slidesjs-slide { height: 100% !important; object-fit: contain; background: #000; }
html body:not(#x) #AlacerImageGalleryModal .slidesjs-navigation {
	position: absolute !important; top: 50%; margin-top: -26px; z-index: 20; width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.88); display: flex !important; align-items: center; justify-content: center; text-decoration: none !important;
}
html body:not(#x) #AlacerImageGalleryModal .slidesjs-previous { left: 14px; }
html body:not(#x) #AlacerImageGalleryModal .slidesjs-next { right: 14px; }
html body:not(#x) #AlacerImageGalleryModal .slidesjs-navigation > div { display: none !important; }
html body:not(#x) #AlacerImageGalleryModal .slidesjs-previous::before, html body:not(#x) #AlacerImageGalleryModal .slidesjs-next::before {
	font-size: 26px; line-height: 1; color: var(--brand-ink); margin-top: -3px;
}
html body:not(#x) #AlacerImageGalleryModal .slidesjs-previous::before { content: "\2039"; }
html body:not(#x) #AlacerImageGalleryModal .slidesjs-next::before { content: "\203A"; }
html body:not(#x) #AlacerImageGalleryModal .slidesjs-pagination { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 12px 0 0; margin: 0; }
html body:not(#x) #AlacerImageGalleryModal p, html body:not(#x) #AlacerImageGalleryModal div:not([class]) { color: rgba(255,255,255,.85) !important; text-align: center; letter-spacing: .06em; }
/* guest register buttons: "add guest" is the main action, "back" the quiet one, both bottom right */
html body:not(#x) #guestDetails-modal #addNewGuest { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
html body:not(#x) #guestDetails-modal #addNewGuest > #formInputDiv { flex: 0 0 100%; margin-bottom: 10px; }
html body:not(#x) #guestDetails-modal #addNewGuest > input.ui-button { margin: 0 !important; padding: 12px 22px !important; min-width: 130px; }
html body:not(#x) #guestDetails-modal #confirmGuestBack, html body:not(#x) #guestDetails-modal #confirmGuestBack.ui-state-focus {
	background: transparent !important; color: var(--brand-ink) !important; border: 1px solid var(--brand-line-strong) !important;
}
html body:not(#x) #guestDetails-modal #confirmGuestBack:hover { border-color: var(--brand-ink) !important; }
html body:not(#x) #guestDetails-modal #confirmGuest.ui-state-disabled { opacity: .35 !important; cursor: not-allowed; }
html body:not(#x) #guestDetails-modal #guestListSurround { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 560px) { html body:not(#x) #guestDetails-modal #addNewGuest > input.ui-button { flex: 1 1 0; } }
html body:not(#x) #AlacerImageGalleryModal .caption { color: rgba(255,255,255,.9) !important; text-align: center; padding: 14px 0 2px; font-size: 14px; letter-spacing: .08em; background: transparent !important; position: static !important; }

/* ---------- Booking flow pages (summary, treatment choice, details & payment, confirmation) ---------- */
/* continue bar (leisure_flow.js): the engine's own Next/Book button, always in reach */
html body .brand-flow-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
	background: var(--brand-ink); color: #fff; box-shadow: 0 -8px 24px rgba(0,0,0,.18);
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	animation: brand-flow-in .25s ease-out;
}
html body .brand-flow-bar[hidden] { display: none !important; }
html body .brand-flow-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
html body .brand-flow-info { min-width: 0; }
html body .brand-flow-title { font-size: 16px; letter-spacing: .04em; color: #fff; line-height: 1.3; }
html body .brand-flow-sub { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.4; margin-top: 2px; }
html body .brand-flow-actions { display: flex; gap: 10px; flex: 0 0 auto; }
html body .brand-flow-bar button {
	font-family: var(--brand-font) !important; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
	min-height: 44px; padding: 0 26px; border-radius: 0; cursor: pointer; transition: background .15s, border-color .15s;
}
html body .brand-flow-next { background: var(--brand-paper); color: var(--brand-ink); border: 1px solid var(--brand-paper); }
html body .brand-flow-next:hover { background: var(--brand-sand); border-color: var(--brand-sand); }
html body .brand-flow-back { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
html body .brand-flow-back:hover { border-color: #fff; }
html body .brand-flow-back[hidden] { display: none; }
html body .brand-flow-bar.is-pulse { animation: brand-flow-pulse .9s ease-out; }
@keyframes brand-flow-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes brand-flow-pulse { 0% { box-shadow: 0 0 0 0 rgba(43, 41, 37, .55); } 100% { box-shadow: 0 0 0 18px rgba(43, 41, 37, 0); } }
html.brand-flow-bar-on body { padding-bottom: 86px !important; }
@media (max-width: 600px) {
	html body .brand-flow-inner { gap: 10px; }
	html body .brand-flow-sub { display: none; }
	html body .brand-flow-title { font-size: 14px; }
	html body .brand-flow-bar button { padding: 0 16px; letter-spacing: .1em; }
	html body .brand-flow-back { padding: 0 12px !important; }
}
@media (prefers-reduced-motion: reduce) { html body .brand-flow-bar, html body .brand-flow-bar.is-pulse { animation: none; } }

/* basket in the sidebar: the engine's "remove" control has no size or icon, give it both */
html body:not(#x) #spaDaysAdded .OccupancyRow { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--brand-line); cursor: pointer; }
html body:not(#x) #spaDaysAdded .OccupancyRowText { flex: 1 1 auto; font-size: 14px; line-height: 1.45; }
html body:not(#x) #spaDaysAdded .cancelSpaPackageButton {
	flex: 0 0 auto; float: none !important; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--brand-line-strong); color: var(--brand-ink); cursor: pointer; font-size: 18px; line-height: 1;
}
html body:not(#x) #spaDaysAdded .cancelSpaPackageButton::before { content: "\00D7"; }
html body:not(#x) #spaDaysAdded .cancelSpaPackageButton:hover { border-color: var(--brand-ink); background: var(--brand-linen); }

/* the engine's "scroll up and click Book" note: the continue bar does that job now */
html.brand-flow-on body #SpaAfterVoucherMessage, html.brand-flow-on body #TreatmentAfterVoucherMessage { display: none !important; }

/* summary of the spa day(s) / treatments booked */
html body:not(#x) #SpaDayLeisureItemsSummary, html body:not(#x) #BookingPage3, html body:not(#x) #ConfirmationPage, html body:not(#x) #BookingPage5 {
	background: var(--brand-paper) !important; border: 1px solid var(--brand-line) !important; box-shadow: none !important;
	padding: 28px 32px 24px !important; margin: 0 0 22px !important;
}
html body:not(#x) #SpaDayLeisureItemsSummaryTableSurround, html body:not(#x) #SummaryPageTable, html body:not(#x) #ConfirmationPageSummary { box-shadow: none !important; background: transparent !important; }
html body:not(#x) .individualSpaDaySurround { border-bottom: 1px solid var(--brand-line); padding-bottom: 18px; margin-bottom: 24px; }
html body:not(#x) #engineInnerArea h4.spaDayGuestNameHeader {
	font-family: var(--brand-heading-font) !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1.2 !important;
	text-transform: none !important; font-size-adjust: 0.5; margin: 0 0 6px !important; color: var(--brand-ink) !important;
}
/* "Remove this spa day" under each guest's spa day on the treatments page (leisure_flow.js) */
html body:not(#x) .brand-spa-remove {
	display: inline-block; margin: 0 0 14px; padding: 0; border: 0; background: none; color: var(--brand-muted); cursor: pointer;
	font-family: var(--brand-font); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
}
html body:not(#x) .brand-spa-remove:hover, html body:not(#x) .brand-spa-remove:focus-visible { color: var(--brand-ink); }
@media (max-width: 600px) { html body:not(#x) #engineInnerArea h4.spaDayGuestNameHeader { font-size: 21px !important; } }
html body:not(#x) .brand-flow-intro { font-size: 15px; line-height: 1.55; padding: 12px 16px; margin: 0 0 18px; background: var(--brand-cream); border-left: 3px solid var(--brand-line-strong); color: var(--brand-ink); }
html body:not(#x) .brand-flow-intro.is-todo { border-left-color: var(--brand-bronze); }
html body:not(#x) #engineInnerArea table.spaDayTotalSummary, html body:not(#x) #engineInnerArea table.SpaDaySubTotalSummary,
html body:not(#x) #engineInnerArea #SummaryPageTable table, html body:not(#x) #engineInnerArea #ConfirmationPageSummary table {
	background: transparent !important; margin: 0 0 6px !important; border: 0 !important; width: 100%;
}
html body:not(#x) #engineInnerArea .spaDayTotalSummary th, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary th,
html body:not(#x) #engineInnerArea #SummaryPageTable th, html body:not(#x) #engineInnerArea #ConfirmationPageSummary th {
	font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase; font-weight: 500 !important; color: var(--brand-muted) !important;
	background: transparent !important; border-bottom: 1px solid var(--brand-line-strong) !important; padding: 8px 10px !important;
}
html body:not(#x) #engineInnerArea .spaDayTotalSummary td, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary td,
html body:not(#x) #engineInnerArea #SummaryPageTable td, html body:not(#x) #engineInnerArea #ConfirmationPageSummary td {
	background: transparent !important; border-top: 0 !important; border-bottom: 1px solid var(--brand-line) !important;
	padding: 12px 10px !important; font-size: 15px !important; vertical-align: middle !important; color: var(--brand-ink) !important;
}
html body:not(#x) #engineInnerArea .spaDayTotalSummary td.headerCol { font-weight: 600 !important; font-size: 16px !important; letter-spacing: .02em; }
html body:not(#x) #engineInnerArea td.depositCol, html body:not(#x) #engineInnerArea td.priceCol, html body:not(#x) #engineInnerArea th.depositHeader, html body:not(#x) #engineInnerArea th.priceHeader { text-align: right !important; white-space: nowrap; }
html body:not(#x) #engineInnerArea .spaDayTotalSummary tr[data-packageelementid] td.treatmentCol { padding-left: 22px !important; }
/* a treatment still to choose: name on the left, the choose button on the right of the cell */
html body:not(#x) #engineInnerArea tr.brand-row-todo td { background: rgba(43, 41, 37, .035) !important; }
html body:not(#x) #engineInnerArea tr.brand-row-todo td.treatmentCol { box-shadow: inset 3px 0 0 var(--brand-bronze); }
html body:not(#x) #engineInnerArea td.treatmentCol { position: relative; }
html body:not(#x) #engineInnerArea td.treatmentCol > button.ui-button {
	float: right !important; margin: -4px 0 -4px 14px !important; position: static !important;
}
html body:not(#x) #engineInnerArea td.treatmentCol > .addTreatmentBookingBtn, html body:not(#x) #engineInnerArea td.treatmentCol > .editTreatmentBookingBtn {
	background: var(--brand-btn) !important; color: var(--brand-btn-fg) !important; border: 1px solid var(--brand-btn) !important;
}
html body:not(#x) #engineInnerArea td.treatmentCol > .addTreatmentBookingBtn .ui-button-text, html body:not(#x) #engineInnerArea td.treatmentCol > .editTreatmentBookingBtn .ui-button-text,
html body:not(#x) #engineInnerArea td.treatmentCol > .deleteTreatmentBookingBtn .ui-button-text { padding: 9px 16px !important; font-size: 12px !important; letter-spacing: .14em !important; }
html body:not(#x) #engineInnerArea td.treatmentCol > .deleteTreatmentBookingBtn {
	background: transparent !important; color: var(--brand-ink) !important; border: 1px solid var(--brand-line-strong) !important;
}
html body:not(#x) #engineInnerArea td.treatmentCol > .deleteTreatmentBookingBtn:hover { border-color: var(--brand-ink) !important; }
html body:not(#x) #engineInnerArea tr.ui-state-error td { background: rgba(176, 0, 32, .05) !important; }
html body:not(#x) #engineInnerArea tr.ui-state-error td.treatmentCol { box-shadow: inset 3px 0 0 var(--brand-required); }
html body:not(#x) #engineInnerArea tr.packageElementSummaryRow td { border-bottom: 0 !important; border-top: 1px solid var(--brand-line-strong) !important; font-weight: 600 !important; font-size: 15px !important; }
/* the additions table only ever holds the sub-total when nothing extra was added: hide its empty heading */
html body:not(#x) #engineInnerArea table.SpaDaySubTotalSummary.brand-only-total thead { display: none; }
html body:not(#x) #engineInnerArea .brand-empty-row { display: none; }
/* vouchers */
html body:not(#x) #voucherArea { border-top: 1px solid var(--brand-line); margin-top: 14px; padding-top: 14px; }
html body:not(#x) #voucherArea #voucherTableArea table:not(:has(tbody tr)) { display: none; }
html body:not(#x) #voucherInputArea { display: flex; justify-content: flex-end; }
html body:not(#x) #voucherInputArea > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
html body:not(#x) #voucherInputArea .VoucherCodeLabel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-muted); }
html body:not(#x) #voucherInputArea input { min-height: 44px; width: 200px; }
html body:not(#x) #voucherInputArea #voucherApplyBtn { margin: 0 !important; min-height: 44px; }
/* totals: one quiet panel, amount due now stands out */
html body:not(#x) #amountAndDepositDueArea { float: none !important; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 16px 0 0 !important; margin: 0 0 24px; }
html body:not(#x) #amountAndDepositDueArea h3 { margin: 0 !important; font-family: var(--brand-font) !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: .04em; color: var(--brand-muted) !important; text-transform: none !important; float: none !important; }
html body:not(#x) #amountAndDepositDueArea h3:empty { display: none; }
html body:not(#x) #amountAndDepositDueArea h3#depositDueSpan { font-size: 20px !important; color: var(--brand-ink) !important; font-weight: 600 !important; margin-top: 4px !important; }
@media (max-width: 767.98px) {
	html body:not(#x) #SpaDayLeisureItemsSummary, html body:not(#x) #BookingPage3, html body:not(#x) #ConfirmationPage, html body:not(#x) #BookingPage5 { padding: 20px 16px !important; }
	html body:not(#x) #engineInnerArea .spaDayTotalSummary thead, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary thead { display: none; }
	/* phones: each row becomes a small card, name first, then labelled lines (date/time, duration, deposit, price) */
	html body:not(#x) #engineInnerArea .spaDayTotalSummary, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary,
	html body:not(#x) #engineInnerArea .spaDayTotalSummary tbody, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary tbody { display: block !important; width: 100% !important; }
	html body:not(#x) #engineInnerArea .spaDayTotalSummary tr, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary tr { display: block !important; border: 0 !important; border-bottom: 1px solid var(--brand-line) !important; padding: 10px 0 !important; }
	html body:not(#x) #engineInnerArea .spaDayTotalSummary td, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary td {
		display: flex !important; justify-content: space-between; align-items: baseline; gap: 14px; width: auto !important;
		border: 0 !important; padding: 3px 4px !important; text-align: right !important;
	}
	html body:not(#x) #engineInnerArea .spaDayTotalSummary td::before, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary td::before {
		flex: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-muted); text-align: left;
	}
	html body:not(#x) #engineInnerArea td.dateOrTimeCol::before { content: "Date / time"; }
	html body:not(#x) #engineInnerArea td.durationCol::before { content: "Duration"; }
	html body:not(#x) #engineInnerArea .spaDayTotalSummary td.depositCol::before, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary td.depositCol::before { content: "Deposit"; }
	html body:not(#x) #engineInnerArea .spaDayTotalSummary td.priceCol::before, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary td.priceCol::before { content: "Price"; }
	html body:not(#x) #engineInnerArea .spaDayTotalSummary td:empty, html body:not(#x) #engineInnerArea .SpaDaySubTotalSummary td:empty,
	html body:not(#x) #engineInnerArea td.dateOrTimeCol:not(:has(span:not(:empty))):not(:has(a)) { display: none !important; }
	html body:not(#x) #engineInnerArea td.treatmentCol, html body:not(#x) #engineInnerArea td.headerCol,
	html body:not(#x) #engineInnerArea tr.packageElementSummaryRow td:not([class]) { display: block !important; text-align: left !important; padding-bottom: 6px !important; }
	html body:not(#x) #engineInnerArea tr.packageElementSummaryRow td { border-top: 0 !important; }
	html body:not(#x) #engineInnerArea .spaDayTotalSummary tr[data-packageelementid] td.treatmentCol { padding-left: 12px !important; }
	html body:not(#x) #engineInnerArea td.treatmentCol > button.ui-button { float: none !important; display: block; margin: 10px 0 4px !important; width: 100%; }
	html body:not(#x) #engineInnerArea td.dateOrTimeCol, html body:not(#x) #engineInnerArea td.durationCol { font-size: 13px !important; color: var(--brand-muted) !important; }
	html body:not(#x) #voucherInputArea, html body:not(#x) #voucherInputArea > div { justify-content: stretch; }
	html body:not(#x) #voucherInputArea input { flex: 1 1 auto; width: auto; }
}

/* treatment choice pop-up (spa day engine) */
html body:not(#x) .ui-dialog:has(#leisureSelection-modal) { width: min(720px, calc(100vw - 24px)) !important; }
html body:not(#x) #leisureSelection-modal .priceSliderRow.brand-flow-noslider { display: none !important; }
html body:not(#x) #leisureSelection-modal .priceSliderRow { margin: 4px 0 14px !important; }
/* a missing picture (spa days, treatments, classes): the brand holding picture in the picture's box; a bare picture with
   no box takes the holding image itself where there is one (toolkit default, 28 Oct) */
html body:not(#x) .brand-img-missing:not(img) { background: #2b2925 url("img/HA2026_placeholder.svg") center / cover no-repeat !important; min-height: 120px; }
html body:not(#x) .brand-img-missing:not(img) img { visibility: hidden !important; }
html body:not(#x) img.brand-img-missing { display: none !important; }
html body:not(#x) img.brand-img-missing { display: inline-block !important; content: url("img/HA2026_placeholder.svg"); object-fit: cover; }
html body:not(#x) #leisureSelection-modal .ItemSubGroupHeader { padding: 14px 14px 14px 40px !important; }
html body:not(#x) #leisureSelection-modal .ItemSubGroupHeader .classAccordionHeaderText { margin-left: 0 !important; width: auto !important; float: none !important; }
html body:not(#x) #leisureSelection-modal .SubGroupItemsAccordionArea { padding: 0 !important; }
html body:not(#x) #leisureSelection-modal .LeisureItemsAccordion > h3 { padding: 14px 16px 14px 36px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--brand-line) !important; background: transparent !important; }
html body:not(#x) #leisureSelection-modal .LeisureItemsAccordion > h3.ui-state-active { background: var(--brand-linen) !important; }
html body:not(#x) #leisureSelection-modal .LeisureItemsAccordion > .ui-accordion-content { padding: 12px 16px 16px 36px !important; border: 0 !important; border-bottom: 1px solid var(--brand-line) !important; }
html body:not(#x) #leisureSelection-modal .timeButtons:not(:has(button)) { color: var(--brand-muted); font-style: italic; }
html body:not(#x) #leisureSelection-modal .ui-dialog-content, html body:not(#x) .ui-dialog #leisureSelection-modal { max-height: min(70vh, 720px) !important; overflow-y: auto !important; }

/* guest selection list ("Please select the guest(s)…") */
/* guest picker ("Please select the guest(s)…"): one row per guest, tick box beside the name, the whole row clickable */
html body:not(#x) #guestDetails-modal #guestList { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
html body:not(#x) #guestDetails-modal #guestList > div {
	display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 2px;
	padding: 12px 16px; border: 1px solid var(--brand-line-strong); background: var(--brand-paper); cursor: pointer; transition: border-color .15s, background .15s;
}
html body:not(#x) #guestDetails-modal #guestList > div:hover { border-color: var(--brand-ink); }
html body:not(#x) #guestDetails-modal #guestList > div:has(input:checked) { border-color: var(--brand-ink); background: var(--brand-linen); }
html body:not(#x) #guestDetails-modal #guestList > div:has(input:disabled) { cursor: default; opacity: .6; }
html body:not(#x) #guestDetails-modal #guestList > div > br { display: none; }
html body:not(#x) #guestDetails-modal #guestList input[type=checkbox] { width: 22px; height: 22px; margin: 0 !important; accent-color: var(--brand-ink); cursor: inherit; grid-row: 1 / span 2; }
html body:not(#x) #guestDetails-modal #guestList label.guestCheckboxLabel, html body:not(#x) #guestDetails-modal #guestList label.guestCheckboxNameLabel {
	display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; width: auto !important;
	font-size: 17px !important; line-height: 1.3; color: var(--brand-ink) !important; cursor: inherit; text-transform: none !important; letter-spacing: .01em !important;
}
html body:not(#x) #guestDetails-modal #guestList label.guestAvailabilityText { grid-column: 2; display: block; margin: 0 !important; font-size: 13px !important; color: var(--brand-muted) !important; }

/* your details and payment */
html body:not(#x) #GuestAndCardPaymentDetailsPage > .row { display: flex; flex-wrap: wrap; row-gap: 22px; }
html body:not(#x) #MainGuestDetailsArea #UserDetailsSurround, html body:not(#x) #PaymentDetailsArea {
	background: var(--brand-paper) !important; border: 1px solid var(--brand-line) !important; box-shadow: none !important; padding: 24px 26px !important; height: 100%;
}
html body:not(#x) #MainGuestDetailsArea, html body:not(#x) #PaymentDetailsArea.col-sm-6 { box-shadow: none !important; }
html body:not(#x) #MainGuestDetailsArea #UserDetailsInsert { box-shadow: none !important; padding: 0 !important; height: 100%; }
html body:not(#x) #MainGuestDetailsArea #OuterSurround { height: 100%; }
html body:not(#x) #MainGuestDetailsArea #yourDetailsLbl, html body:not(#x) #engineInnerArea #PaymentDetailsArea h3.brand-pay-title {
	display: block; font-family: var(--brand-heading-font) !important; font-size: 34px !important; line-height: 1.1 !important; margin: 0 0 14px !important;
	text-transform: none; font-size-adjust: 0.5; color: var(--brand-ink) !important; font-weight: 400 !important;
}
html body:not(#x) #MainGuestDetailsArea .expandingelement, html body:not(#x) #PaymentDetailsArea #CardDetailsSurround { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; margin-top: 12px; }
html body:not(#x) #MainGuestDetailsArea #formInputDiv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 0 !important; }
html body:not(#x) #MainGuestDetailsArea .GuestEntryItem { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
html body:not(#x) #MainGuestDetailsArea .GuestEntryItem#Forename, html body:not(#x) #MainGuestDetailsArea .GuestEntryItem#Email, html body:not(#x) #MainGuestDetailsArea .GuestEntryItem#ConfirmEmail,
html body:not(#x) #MainGuestDetailsArea .GuestEntryItem#Street, html body:not(#x) #MainGuestDetailsArea .GuestEntryItem#Location, html body:not(#x) #MainGuestDetailsArea .GuestEntryItem#Notes,
html body:not(#x) #MainGuestDetailsArea .GuestEntryItem:has(textarea), html body:not(#x) #MainGuestDetailsArea .GuestEntryItem:has(input[type=checkbox]),
html body:not(#x) #MainGuestDetailsArea #formInputDiv > :not(.GuestEntryItem) { grid-column: 1 / -1; }
html body:not(#x) #MainGuestDetailsArea .GuestEntryLabel {
	float: none !important; width: auto !important; display: block; margin: 0 0 6px !important; padding: 0 !important;
	font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--brand-muted) !important; font-weight: 500 !important;
}
html body:not(#x) #MainGuestDetailsArea .GuestEntryControl { float: none !important; width: auto !important; padding: 0 !important; }
html body:not(#x) #MainGuestDetailsArea .GuestEntryControl input:not([type=checkbox]), html body:not(#x) #MainGuestDetailsArea .GuestEntryControl select, html body:not(#x) #MainGuestDetailsArea textarea {
	width: 100% !important; min-height: 44px; box-sizing: border-box; font-size: 16px !important;
}
html body:not(#x) #MainGuestDetailsArea textarea { min-height: 96px; padding: 10px 12px !important; }
html body:not(#x) #MainGuestDetailsArea input[type=checkbox] { width: 18px; height: 18px; margin: 0 10px 0 0 !important; vertical-align: -3px; accent-color: var(--brand-ink); }
html body:not(#x) #MainGuestDetailsArea #SaveDetailsArea, html body:not(#x) #MainGuestDetailsArea .checkboxRow { font-size: 15px; }
html body:not(#x) #PaymentDetailsArea #CardDetailsIframe { min-height: 420px; }
@media (max-width: 767.98px) {
	html body:not(#x) #MainGuestDetailsArea #formInputDiv { grid-template-columns: 1fr; }
	html body:not(#x) #MainGuestDetailsArea #UserDetailsSurround, html body:not(#x) #PaymentDetailsArea { padding: 20px 16px !important; }
}
/* confirmation */
html body:not(#x) #confirmationMessage { text-align: center; padding: 8px 0 18px; }
html body:not(#x) #engineInnerArea #confirmationMessageHeaderText {
	font-family: var(--brand-heading-font) !important; font-size: 44px !important; line-height: 1.1; font-weight: 400 !important; color: var(--brand-ink) !important;
	text-transform: none; font-size-adjust: 0.5;
}
html body:not(#x) #confirmationMessageMainText { max-width: 620px; margin: 10px auto 0; font-size: 16px; line-height: 1.6; color: var(--brand-ink); }
html body:not(#x) #confirmationButtons { text-align: center; margin: 0 0 22px; }
html body:not(#x) #engineInnerArea .calLinks a, html body:not(#x) #engineInnerArea [class*="calLink"] a { color: var(--brand-muted) !important; font-size: 12px; letter-spacing: .06em; }
/* old user CSS styles the card panel's first line (its title) at 18px bold: hand it back to the heading */
html body:not(#x) #PaymentDetailsArea::first-line { font-size: inherit !important; font-weight: inherit !important; }

/* missing fields in the guest forms (the engine flags the row with "error" but showed nothing) */
html body:not(#x) #formInputDiv .GuestEntryItem.error .GuestEntryLabel { color: var(--brand-required) !important; }
html body:not(#x) #formInputDiv .GuestEntryItem.error input, html body:not(#x) #formInputDiv .GuestEntryItem.error select, html body:not(#x) #formInputDiv .GuestEntryItem.error textarea {
	border-color: var(--brand-required) !important; box-shadow: 0 0 0 1px var(--brand-required) inset !important;
}
html body:not(#x) #formInputDiv .GuestEntryItem.error .GuestEntryControl::after { content: "Required"; display: block; font-size: 12px; color: var(--brand-required); margin-top: 4px; letter-spacing: .04em; }
html body:not(#x) #formInputDiv .brand-form-note { grid-column: 1 / -1; padding: 10px 14px; border-left: 3px solid var(--brand-required); background: rgba(176, 0, 32, .05); color: var(--brand-ink); font-size: 14px; line-height: 1.5; }
html body:not(#x) #formInputDiv .brand-form-note[hidden] { display: none; }
/* guest names keep their capitals, even where headings are set in lower case */
html body:not(#x) #engineInnerArea h4.spaDayGuestNameHeader { text-transform: none !important; }
html body:not(#x) #confirmationMessage p, html body:not(#x) #confirmationMessage #confirmationMessageHeaderText { text-align: center !important; display: block; margin-left: auto !important; margin-right: auto !important; }
/* treatment engine summary: prices on the right, the remove button quiet */
html body:not(#x) #engineInnerArea #SummaryPageTable td:last-child, html body:not(#x) #engineInnerArea #SummaryPageTable th:last-child,
html body:not(#x) #engineInnerArea #ConfirmationPageSummary td:last-child, html body:not(#x) #engineInnerArea #ConfirmationPageSummary th:last-child { text-align: right !important; white-space: nowrap; }
html body:not(#x) #engineInnerArea #SummaryPageTable tbody tr:last-child td, html body:not(#x) #engineInnerArea #ConfirmationPageSummary tbody tr:last-child td { font-weight: 600 !important; border-bottom: 0 !important; border-top: 1px solid var(--brand-line-strong) !important; }
html body:not(#x) #engineInnerArea .removeLeisureBookingButtonSummary {
	background: transparent !important; color: var(--brand-ink) !important; border: 1px solid var(--brand-line-strong) !important; margin: -4px 0 -4px 14px !important; vertical-align: middle;
}
html body:not(#x) #engineInnerArea .removeLeisureBookingButtonSummary .ui-button-text { padding: 8px 14px !important; font-size: 12px !important; letter-spacing: .14em !important; }
/* health questions: a calm card, each question clearly separated, big tap targets for Yes / No */
html body:not(#x) #GuestContraindicationPage, html body:not(#x) #BookingPage2 { background: var(--brand-paper) !important; border: 1px solid var(--brand-line) !important; box-shadow: none !important; padding: 26px 30px !important; margin: 0 0 22px !important; }
html body:not(#x) #contraindicationsTableArea table { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body:not(#x) #engineInnerArea #contraindicationsTableArea th { font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--brand-muted) !important; font-weight: 500 !important; background: transparent !important; padding: 8px 10px !important; }
html body:not(#x) #engineInnerArea #contraindicationsTableArea th:first-child { font-family: var(--brand-heading-font) !important; font-size: 30px !important; letter-spacing: 0 !important; text-transform: none; color: var(--brand-ink) !important; font-size-adjust: 0.5; }
html body:not(#x) #engineInnerArea #contraindicationsTableArea td { padding: 14px 10px !important; border-bottom: 1px solid var(--brand-line) !important; border-top: 0 !important; background: transparent !important; vertical-align: middle !important; }
html body:not(#x) #contraindicationsTableArea td > div:first-child:not(.contraindicationQuestionTableQuestionDescription) { font-weight: 600; font-size: 15px; letter-spacing: .02em; margin-bottom: 3px; }
html body:not(#x) #contraindicationsTableArea .contraindicationQuestionTableQuestionDescription { font-size: 14px; line-height: 1.55; color: var(--brand-ink); max-width: 640px; }
html body:not(#x) #contraindicationsTableArea input[type=radio] { width: 22px; height: 22px; accent-color: var(--brand-ink); cursor: pointer; margin: 0; }
html body:not(#x) #contraindicationsTableArea .contraindicationQuestionTableAnswerHeader, html body:not(#x) #contraindicationsTableArea td:has(> input[type=radio]) { text-align: center !important; width: 70px; }
html body:not(#x) #contraindicationsTableArea tr.ui-state-error td, html body:not(#x) #contraindicationsTableArea tr.error td { background: rgba(176, 0, 32, .05) !important; }
/* phones: each question full width, then Edit note on the left and Yes / No (labelled) on the right (Moddershall review 27 Oct) */
@media (max-width: 600px) {
	html body:not(#x) #contraindicationsTableArea table.contraindicationQuestionTable, html body:not(#x) #contraindicationsTableArea table.contraindicationQuestionTable > thead,
	html body:not(#x) #contraindicationsTableArea table.contraindicationQuestionTable > tbody { display: block !important; width: 100% !important; }
	html body:not(#x) #contraindicationsTableArea table.contraindicationQuestionTable > thead > tr { display: block !important; }
	html body:not(#x) #engineInnerArea #contraindicationsTableArea table.contraindicationQuestionTable > thead th { display: none !important; }
	html body:not(#x) #engineInnerArea #contraindicationsTableArea table.contraindicationQuestionTable > thead th:first-child { display: block !important; width: auto !important; font-size: 24px !important; padding: 0 0 10px !important; }
	html body:not(#x) #contraindicationsTableArea tr[data-questionid] {
		display: grid !important; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; column-gap: 18px;
		border-bottom: 1px solid var(--brand-line); padding: 14px 0;
	}
	html body:not(#x) #contraindicationsTableArea tr[data-questionid]:not(:has(td)) { display: none !important; }
	html body:not(#x) #engineInnerArea #contraindicationsTableArea tr[data-questionid] > td { display: block; width: auto !important; border: 0 !important; padding: 0 !important; }
	html body:not(#x) #engineInnerArea #contraindicationsTableArea tr[data-questionid] > td:first-child { grid-column: 1 / -1; padding-bottom: 12px !important; }
	html body:not(#x) #engineInnerArea #contraindicationsTableArea tr[data-questionid] > td.contraindicationQuestionTableAnswerCell { display: flex !important; align-items: center; gap: 8px; width: auto !important; cursor: pointer; }
	html body:not(#x) #contraindicationsTableArea tr[data-questionid] > td.contraindicationQuestionTableAnswerCell:nth-child(3)::before { content: "Yes"; }
	html body:not(#x) #contraindicationsTableArea tr[data-questionid] > td.contraindicationQuestionTableAnswerCell:nth-child(4)::before { content: "No"; }
	html body:not(#x) #contraindicationsTableArea tr[data-questionid] > td.contraindicationQuestionTableAnswerCell::before { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }
	html body:not(#x) #contraindicationsTableArea .contraindicationQuestionTableQuestionDescription { max-width: none; }
}
@media (max-width: 767.98px) { html body:not(#x) #GuestContraindicationPage, html body:not(#x) #BookingPage2 { padding: 18px 14px !important; } html body:not(#x) #contraindicationsTableArea .contraindicationQuestionTableAnswerHeader, html body:not(#x) #contraindicationsTableArea td:has(> input[type=radio]) { width: 46px; } }
/* calendar loading: a spinner card over the dates while the month is first checked */
html body .brand-cal-cal { position: relative; }
html body .brand-cal-loading {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px;
	background: rgba(255, 255, 255, .72); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
	opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; z-index: 2;
}
html body .brand-cal-loading.is-on { opacity: 1; visibility: visible; transition: opacity .2s ease; }
html body .brand-cal-loading-card {
	display: flex; align-items: center; gap: 16px; background: var(--brand-paper); border: 1px solid var(--brand-line);
	box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 18px 22px; max-width: 340px;
}
html body .brand-cal-loading-card .brand-spinner { width: 30px; height: 30px; border-width: 2px; }
html body .brand-cal-loading-text { display: flex; flex-direction: column; gap: 4px; text-align: left; }
html body .brand-cal-loading-text strong { font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink); }
html body .brand-cal-loading-text span { font-size: 14px; line-height: 1.45; color: var(--brand-muted); }
html body .brand-cal-status.is-checking::before {
	content: ""; display: inline-block; width: 12px; height: 12px; margin: 0 8px -1px 0; border-radius: 50%;
	border: 1px solid var(--brand-line-strong); border-top-color: var(--brand-bronze); animation: brandSpin .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { html body .brand-cal-status.is-checking::before { animation-duration: 2.5s; } }
/* engine "Please wait" boxes (jQuery blockUI): a brand card with the brand spinner, no Windows wait cursor */
html body .blockUI.blockOverlay { background-color: rgb(43, 41, 37) !important; cursor: default !important; }
html body .blockUI.blockMsg {
	left: 50% !important; transform: translateX(-50%); width: auto !important; height: auto !important; min-width: 260px; max-width: calc(100vw - 32px);
	display: flex !important; align-items: center; justify-content: center; gap: 14px;
	background: var(--brand-paper) !important; border: 1px solid var(--brand-line) !important; box-shadow: 0 14px 40px rgba(0,0,0,.18);
	padding: 18px 24px !important; color: var(--brand-ink) !important; cursor: default !important;
	font-family: var(--brand-font) !important; font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; text-align: left !important;
}
html body .blockUI.blockMsg::before {
	content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
	border: 2px solid var(--brand-line-strong); border-top-color: var(--brand-bronze); animation: brandSpin .9s linear infinite;
}
html body .blockUI.blockMsg h1, html body .blockUI.blockMsg h2, html body .blockUI.blockMsg h3 { font: inherit !important; margin: 0 !important; letter-spacing: inherit; text-transform: inherit; color: inherit !important; }
@media (prefers-reduced-motion: reduce) { html body .blockUI.blockMsg::before { animation-duration: 2.5s; } }
/* your details: Title belongs before the name (the engine puts it after the e-mail boxes) — Title | Lead guest on one row */
html body:not(#x) #MainGuestDetailsArea #formInputDiv > .brand-form-note { order: -3; }
html body:not(#x) #MainGuestDetailsArea .GuestEntryItem:has(#InputFieldTitle) { order: -2; grid-column: auto !important; }
html body:not(#x) #MainGuestDetailsArea .GuestEntryItem:has(#InputFieldForename) { order: -1; grid-column: auto !important; }
html body:not(#x) #MainGuestDetailsArea .GuestEntryItem:has(#InputFieldTitle) select { max-width: none; }
html body:not(#x) #guestDetails-modal .GuestEntryItem:has(#InputFieldTitle) { order: -2; }
html body:not(#x) #guestDetails-modal #formInputDiv > .brand-form-note { order: -3; }
/* some sites' user CSS put a drop shadow on every column of the spa page (e.g. the Alacer demo): flat, like the rest */
html body:not(#x) #SpaBookingPage > div, html body:not(#x) #BookingPage1 > div, html body:not(#x) #SpaBookingPage > .brand-cal-col { box-shadow: none !important; }
html body:not(#x) #SpaBookingPage #spaLeisureSidebar { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
/* SVG logos that set words in the brand fonts: keep them (the engine's user CSS forces one font on everything) */
html body:not(#x) .brand-logo svg .logo-serif { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; }
html body:not(#x) .brand-logo svg .logo-sans { font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

/* ---------- Class engine (ClassBooking) ---------- */
html body:not(#x) #BookingPage1 #questRow { margin-bottom: 1.5rem; display: flex; align-items: center; }
html body:not(#x) #classSearchBtn.ui-button { background: var(--brand-btn2) !important; color: var(--brand-btn2-fg) !important; border-color: var(--brand-btn2) !important; }
html body:not(#x) #accordion2 .classAccordionHeaderArea {
	background: var(--brand-paper) !important; border: 1px solid var(--brand-line) !important; border-radius: 0 !important;
	margin: 0 0 10px !important; padding: 0 !important; color: var(--brand-ink) !important; transition: border-color .2s;
}
html body:not(#x) #accordion2 .classAccordionHeaderArea:hover,
html body:not(#x) #accordion2 .classAccordionHeaderArea.ui-state-active { border-color: var(--brand-bronze) !important; }
html body:not(#x) #accordion2 .classAccordionHeaderArea.ui-state-active { margin-bottom: 0 !important; border-bottom-color: var(--brand-line) !important; }
html body:not(#x) #accordion2 .classAccordionHeader { display: flex; align-items: center; min-height: 56px; border: 0 !important; background: transparent !important; }
html body:not(#x) #accordion2 .classAccordionHeaderTitle {
	flex: 1; float: none !important; width: auto !important; padding: 0 20px !important; line-height: 1.3 !important;
	font-size: 14px !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink) !important;
}
html body:not(#x) #accordion2 .classAccordionHeaderTitle span { margin-left: 0 !important; }
html body:not(#x) #accordion2 .classAccordionHeaderTitle::after {
	content: "View dates"; display: block; margin-top: 3px; font-size: 11px; letter-spacing: .14em; color: var(--brand-muted); font-weight: 400;
}
html body:not(#x) #accordion2 .classAccordionHeaderArea.ui-state-active .classAccordionHeaderTitle::after { content: "Choose a highlighted date"; color: var(--brand-bronze); }
/* the engine colours each class; keep that colour as a slim swatch (it matches the dates on the calendar) */
html body:not(#x) #accordion2 .classAccordionHeaderPrice {
	float: none !important; width: auto !important; min-width: 110px; align-self: stretch; display: flex; align-items: center; justify-content: flex-end;
	padding: 0 20px 0 26px !important; color: var(--brand-ink) !important; font-size: 16px !important; font-weight: 500 !important; text-shadow: none !important;
	background-image: linear-gradient(var(--brand-paper), var(--brand-paper)) !important; background-repeat: no-repeat !important;
	background-size: calc(100% - 5px) 100% !important; background-position: right top !important; border-left: 1px solid var(--brand-line);
}
html body:not(#x) #accordion2 .myAccordionContent {
	background: var(--brand-paper) !important; border: 1px solid var(--brand-bronze) !important; border-top: 0 !important; border-radius: 0 !important;
	margin: 0 0 10px !important; padding: 20px !important; color: var(--brand-ink) !important; height: auto !important;
}
html body:not(#x) #accordion2 .classDescArea { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 20px; align-items: start; }
html body:not(#x) #accordion2 .classDescArea > * { float: none !important; width: auto !important; padding: 0 !important; }
html body:not(#x) #accordion2 .classImgArea img { width: 100%; height: 160px; object-fit: cover; }
html body:not(#x) #accordion2 .classDesc { line-height: 1.6; color: var(--brand-muted) !important; }
@media (max-width: 600px) { html body:not(#x) #accordion2 .classDescArea { grid-template-columns: 1fr; } }

/* date column: restyled to match the spa / treatment month calendar (.brand-cal) */
html body:not(#x) #classDatesArea {
	position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px;
	background: var(--brand-paper); border: 1px solid var(--brand-line); padding: 24px 22px 20px !important; color: var(--brand-ink);
}
html body:not(#x) #classDatesArea::before {
	content: "Choose your date"; order: -3; font-family: var(--brand-heading-font) !important; font-size: 34px; line-height: 1.1; font-weight: 400;
	font-size-adjust: 0.5; text-transform: none;
}
html body:not(#x) #classDatesArea::after {
	content: "Pick a class to see the days it runs, or pick a date to see that day\2019s classes."; order: -2;
	font-size: 13px; line-height: 1.5; color: var(--brand-muted); margin-top: -4px;
}
html body:not(#x) #classDatesArea > .visible-xs { display: none !important; }
html body:not(#x) #placeholderDatePicker, html body:not(#x) #firstMonth { width: auto !important; order: 0; }
/* key, styled like the brand calendar legend */
html body:not(#x) #datePickerKeyArea {
	order: 1; width: auto !important; border: 0 !important; border-top: 1px solid var(--brand-line) !important; background: transparent !important;
	padding: 14px 0 0 !important; margin: 0 !important; display: grid; gap: 10px; font-size: 13px;
}
html body:not(#x) #datePickerKeyArea #KeyLabel { display: none !important; }
html body:not(#x) #datePickerKeyArea .datePickerKey { display: flex !important; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 12px; float: none !important; width: auto !important; margin: 0 !important; }
html body:not(#x) #datePickerKeyArea .datePickerKeyLabel { width: auto !important; text-align: left !important; float: none !important; color: var(--brand-ink); }
html body:not(#x) #datePickerKeyArea .datePickerKeyBackgroundArea { width: 26px !important; height: 26px !important; border: 0 !important; padding: 0 !important; float: none !important; background: transparent !important; position: relative; }
html body:not(#x) #datePickerKeyArea .datePickerKeyBackgroundArea > div { width: 26px !important; height: 26px !important; border: 0 !important; opacity: 1 !important; position: relative; }
html body:not(#x) #datePickerKeyArea #datePickerKeyAvalible { background: var(--brand-linen) !important; }
html body:not(#x) #datePickerKeyArea #datePickerKeyAvalible::after { content: ""; position: absolute; bottom: 18%; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand-bronze); }
html body:not(#x) #datePickerKeyArea #datePickerKeyUnavalible { background: transparent !important; }
html body:not(#x) #datePickerKeyArea #datePickerKeyUnavalible::after { content: "8"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: rgba(43, 41, 37, .3); }
/* the two-month jQuery UI calendar */
html body:not(#x) #classDatesArea .ui-datepicker {
	width: 100% !important; box-sizing: border-box; background: transparent !important; border: 0 !important;
	border-radius: 0 !important; padding: 0 !important; font-family: var(--brand-font) !important;
}
html body:not(#x) #classDatesArea .ui-datepicker-group { width: 100% !important; float: none !important; margin: 0 0 16px; }
html body:not(#x) #classDatesArea .ui-datepicker-group:last-child { margin-bottom: 0; }
html body:not(#x) #classDatesArea .ui-datepicker-header { background: transparent !important; border: 0 !important; color: var(--brand-ink) !important; padding: 0 0 10px !important; min-height: 38px; display: flex; align-items: center; justify-content: center; position: relative; }
html body:not(#x) #classDatesArea .ui-datepicker-title, html body:not(#x) #classDatesArea .ui-datepicker-title * {
	font-family: var(--brand-font) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .14em !important; text-transform: uppercase !important; line-height: 38px !important; margin: 0 !important;
}
html body:not(#x) #classDatesArea .ui-datepicker-prev, html body:not(#x) #classDatesArea .ui-datepicker-next {
	width: 38px !important; height: 38px !important; top: 0 !important; background: transparent !important; border: 1px solid var(--brand-line-strong) !important;
	border-radius: 0 !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center;
}
html body:not(#x) #classDatesArea .ui-datepicker-prev { left: 0 !important; }
html body:not(#x) #classDatesArea .ui-datepicker-next { right: 0 !important; }
html body:not(#x) #classDatesArea .ui-datepicker-prev:hover, html body:not(#x) #classDatesArea .ui-datepicker-next:hover { border-color: var(--brand-ink) !important; background: var(--brand-linen) !important; }
html body:not(#x) #classDatesArea .ui-datepicker-prev .ui-icon, html body:not(#x) #classDatesArea .ui-datepicker-next .ui-icon {
	position: static !important; margin: 0 !important; width: auto !important; height: auto !important; background: none !important; text-indent: 0 !important; overflow: visible !important; font-size: 0 !important;
}
html body:not(#x) #classDatesArea .ui-datepicker-prev .ui-icon::before { content: "\2039"; font-size: 20px; line-height: 1; color: var(--brand-ink); }
html body:not(#x) #classDatesArea .ui-datepicker-next .ui-icon::before { content: "\203A"; font-size: 20px; line-height: 1; color: var(--brand-ink); }
html body:not(#x) #classDatesArea .ui-datepicker-calendar { border-collapse: separate !important; border-spacing: 4px !important; width: calc(100% + 8px) !important; margin: 0 -4px !important; table-layout: fixed; }
html body:not(#x) #classDatesArea .ui-datepicker-calendar th { font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-muted) !important; font-weight: 400 !important; padding: 4px 0 6px !important; background: transparent !important; border: 0 !important; }
html body:not(#x) #classDatesArea .ui-datepicker-calendar td { padding: 0 !important; border: 0 !important; background: transparent !important; opacity: 1 !important; }
html body:not(#x) #classDatesArea .ui-datepicker-calendar td a,
html body:not(#x) #classDatesArea .ui-datepicker-calendar td span {
	position: relative; display: flex !important; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 36px; padding: 0 !important;
	border: 1px solid transparent !important; border-radius: 0 !important; font-size: 14px !important; font-weight: 400 !important; font-variant-numeric: tabular-nums;
	color: rgba(43, 41, 37, .3) !important; text-align: center !important; transition: background .15s, border-color .15s;
}
html body:not(#x) #classDatesArea .ui-datepicker-calendar td:not([class*="classID"]) a, html body:not(#x) #classDatesArea .ui-datepicker-calendar td span { background: transparent !important; }
/* dates with classes: linen tile with a gold dot, as on the spa and treatment calendars */
html body:not(#x) #classDatesArea .ui-datepicker-calendar td.isSelectableDate a { color: var(--brand-ink) !important; cursor: pointer; }
html body:not(#x) #classDatesArea .ui-datepicker-calendar td.isSelectableDate:not([class*="classID"]) a { background-color: var(--brand-linen) !important; }
html body:not(#x) #classDatesArea .ui-datepicker-calendar td.isSelectableDate a::after {
	content: ""; position: absolute; bottom: 18%; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand-bronze);
}
/* a class is open: its dates keep the engine's class colour as a bar along the bottom of the tile */
html body:not(#x) #classDatesArea .ui-datepicker-calendar td[class*="classID"] a {
	background-image: linear-gradient(var(--brand-linen), var(--brand-linen)) !important; background-repeat: no-repeat !important;
	background-size: 100% calc(100% - 5px) !important; background-position: top !important;
}
html body:not(#x) #classDatesArea .ui-datepicker-calendar td[class*="classID"] a::after { display: none; }
html body:not(#x) #classDatesArea .ui-datepicker-calendar td.isSelectableDate a:hover { border-color: var(--brand-ink) !important; }
/* chosen date */
html body:not(#x) #classDatesArea .ui-datepicker-calendar td.ui-datepicker-current-day a,
html body:not(#x) #classDatesArea .ui-datepicker-calendar td a.ui-state-active {
	background: var(--brand-ink) !important; background-image: none !important; color: #fff !important; border-color: var(--brand-ink) !important;
}
html body:not(#x) #classDatesArea .ui-datepicker-calendar td.ui-datepicker-current-day a::after,
html body:not(#x) #classDatesArea .ui-datepicker-calendar td a.ui-state-active::after { display: block; background: #fff; }
html body:not(#x) #classDatesArea .ui-datepicker-calendar td.ui-datepicker-today a { font-weight: 600 !important; }
@media (max-width: 767px) {
	html body:not(#x) #classDatesArea { position: static; margin-bottom: 20px; }
	html body:not(#x) #classDatesArea::before { font-size: 26px; }
}
html body:not(#x) #classAcordianArea .brand-class-head { background: var(--brand-paper); border: 1px solid var(--brand-line); padding: 24px 22px 20px; margin: 0 0 12px; }
html body:not(#x) #engineInnerArea #classAcordianArea .brand-class-title {
	margin: 0 0 6px !important; font-family: var(--brand-heading-font) !important; font-size: 34px !important; line-height: 1.1 !important; font-weight: 400 !important;
	color: var(--brand-ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-size-adjust: 0.5;
}
html body:not(#x) #classAcordianArea .brand-class-sub { margin: 0; font-size: 13px; line-height: 1.5; color: var(--brand-muted); }
html body:not(#x) #classDatesArea { align-self: flex-start; }
@media (max-width: 767px) { html body:not(#x) #engineInnerArea #classAcordianArea .brand-class-title { font-size: 26px !important; } }
/* class engine: summary page (BookingPage2) */
html body:not(#x) #BookingPage2 {
	background: var(--brand-paper) !important; border: 1px solid var(--brand-line); padding: 28px 28px 24px !important; box-shadow: none !important; color: var(--brand-ink);
}
html body:not(#x) #BookingPage2::before {
	content: "Your booking"; display: block; font-family: var(--brand-heading-font) !important; font-size: 34px; line-height: 1.1; font-weight: 400; margin: 0 0 6px;
	font-size-adjust: 0.5; text-transform: none;
}
html body:not(#x) #BookingPage2 > div:first-child { padding: 0 !important; margin: 0 0 18px; font-size: 13px; color: var(--brand-muted); }
html body:not(#x) #BookingSummaryTable { background: transparent !important; margin: 0 0 18px !important; border-collapse: collapse; }
html body:not(#x) #BookingSummaryTable th {
	font-size: 11px !important; font-weight: 500 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-muted) !important;
	border: 0 !important; border-bottom: 1px solid var(--brand-line-strong) !important; padding: 8px 10px !important; background: transparent !important;
}
html body:not(#x) #BookingSummaryTable td { border: 0 !important; border-bottom: 1px solid var(--brand-line) !important; padding: 14px 10px !important; font-size: 14px; background: transparent !important; vertical-align: middle; }
html body:not(#x) #BookingSummaryTable tbody tr:hover > td { background: transparent !important; }
html body:not(#x) #BookingSummaryTable tbody tr:not(.summarySummaryRow) td:first-child { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
html body:not(#x) #BookingSummaryTable tr.summarySummaryRow td { border-bottom: 0 !important; font-weight: 500; padding-top: 16px !important; }
html body:not(#x) #BookingPage2 #voucherArea { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--brand-line); padding-top: 18px; }
html body:not(#x) #BookingPage2 #voucherInputArea { display: contents; }
html body:not(#x) #BookingPage2 #addVoucherBox { display: flex; align-items: center; gap: 10px; float: none !important; width: auto !important; }
html body:not(#x) #BookingPage2 #appliedVoucherAmount { display: grid; gap: 4px; justify-items: end; float: none !important; width: auto !important; margin-left: auto; }
html body:not(#x) #BookingPage2 #appliedVoucherAmount h3 { margin: 0 !important; font-family: var(--brand-font) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0; color: var(--brand-muted) !important; text-transform: none !important; }
html body:not(#x) #BookingPage2 #appliedVoucherAmount h3#amountDueSpan { font-family: var(--brand-heading-font) !important; font-size: 26px !important; color: var(--brand-ink) !important; font-size-adjust: 0.5; text-transform: none; }
html body:not(#x) #BookingPage2 #bookButtonArea { display: flex; justify-content: flex-end; }
html body:not(#x) #BookingPage2 #finalBook { float: none !important; margin-top: 18px !important; }
html body:not(#x) #classSearchBtn, html body:not(#x) #BookingPage1 button { white-space: nowrap; }
html body:not(#x) #classSearchBtnArea { width: auto !important; margin-left: auto !important; float: none !important; }
/* class engine: the sticky bar carries Next / Back (it presses these, so they stay in the page, just out of sight) */
html.brand-flow-on body:not(#x) #mainNextBtn, html.brand-flow-on body:not(#x) #mainBackBtn, html.brand-flow-on body:not(#x) #BookingPage2 #finalBook { display: none !important; }
/* details form: notes box and tick-boxes line up with the fields above (the engine pads them by a Bootstrap column) */
html body:not(#x) #LabelNotesEntry, html body:not(#x) #MarketingArea, html body:not(#x) #SaveDetailsArea { padding-left: 0 !important; padding-right: 0 !important; }
html body:not(#x) #InputFieldNotes { width: 100% !important; box-sizing: border-box; margin: 0 !important; min-height: 96px; resize: vertical; }
html body:not(#x) #MarketingArea, html body:not(#x) #SaveDetailsArea { display: flex; align-items: center; gap: 10px; margin: 6px 0 0 !important; }
html body:not(#x) #MarketingArea input[type=checkbox], html body:not(#x) #SaveDetailsArea input[type=checkbox] { margin: 0 !important; width: 18px; height: 18px; flex: none; accent-color: var(--brand-ink); }
/* the engine's green "i" becomes a fine outlined one in the brand colour (same image, same tooltip) */
html body:not(#x) img[src*="information_icon"] {
	width: 16px !important; height: 16px !important; object-position: -9999px 0; vertical-align: middle; cursor: help;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.25' fill='none' stroke='%23a68a5b' stroke-width='1.1'/%3E%3Ccircle cx='8' cy='4.7' r='.85' fill='%23a68a5b'/%3E%3Crect x='7.35' y='6.6' width='1.3' height='5' rx='.4' fill='%23a68a5b'/%3E%3C/svg%3E");
}
/* the gallery magnifier opens the engine's own picture set: not used on the theme */
html body:not(#x) .spaDayImage .showGalleryIcon { display: none !important; }
/* class engine: the sticky bar carries Start again, so the engine's own top button is hidden */
html.brand-flow-on body:not(#x) #classSearchBtnArea { display: none !important; }
/* class engine on phones: after a class is opened, the date column says what to do next (set by the flow script) */
html body:not(#x) #classDatesArea[data-brand-cue]::after { content: attr(data-brand-cue); color: var(--brand-ink); font-weight: 500; }
/* class engine: cancellation tick-box beside its text; the open class's hint changes once times show */
html body:not(#x) #accordion2 .cancelationPolicyArea { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 10px; line-height: 1.5; }
html body:not(#x) #accordion2 .cancelationPolicyArea input.cancelationPolicyCheck { float: none !important; order: -1; flex: none; width: 18px; height: 18px; margin: 2px 0 0 !important; accent-color: var(--brand-ink); }
html body:not(#x) #accordion2 .classAccordionHeaderArea.ui-state-active:has(+ .myAccordionContent .TimeButton) .classAccordionHeaderTitle::after { content: "Tick the policy, then choose a time"; }
/* class engine on phones: the calendar sits inside the open class (moved there by the flow script) */
html.brand-cal-inline body:not(#x) .brand-cal-slot #classDatesArea {
	position: static !important; width: auto !important; float: none !important; margin: 18px 0 8px !important;
	padding: 18px 0 0 !important; border: 0 !important; border-top: 1px solid var(--brand-line) !important; background: transparent !important;
}
html.brand-cal-inline body:not(#x) .brand-cal-slot #classDatesArea::before { font-size: 24px; }
html.brand-cal-inline body:not(#x) .brand-cal-slot #classDatesArea::after { content: attr(data-brand-cue); }
html.brand-cal-inline body:not(#x) .brand-cal-slot #classDatesArea:not([data-brand-cue])::after { content: "Choose a date: days this class runs are underlined in its colour."; }
/* class engine on phones: one month at a time. The engine draws two; the second is hidden but its "next" arrow is
   kept beside the first month's title, so arrowing on still steps a month at a time (nothing in the engine is changed). */
@media (max-width: 767px) {
	html body:not(#x) #classDatesArea .ui-datepicker { position: relative !important; }
	html body:not(#x) #classDatesArea .ui-datepicker-group ~ .ui-datepicker-group { height: 0 !important; margin: 0 !important; overflow: visible !important; }
	html body:not(#x) #classDatesArea .ui-datepicker-group ~ .ui-datepicker-group .ui-datepicker-calendar,
	html body:not(#x) #classDatesArea .ui-datepicker-group ~ .ui-datepicker-group .ui-datepicker-title { display: none !important; }
	html body:not(#x) #classDatesArea .ui-datepicker-group ~ .ui-datepicker-group .ui-datepicker-header { position: static !important; padding: 0 !important; min-height: 0 !important; }
	html body:not(#x) #classDatesArea .ui-datepicker-group ~ .ui-datepicker-group .ui-datepicker-next { position: absolute !important; top: 0 !important; right: 0 !important; }
	html body:not(#x) #classDatesArea .ui-datepicker-row-break { display: none !important; }
}
@media (max-width: 767px) {
	html body:not(#x) #classDatesArea .ui-datepicker-calendar td a,
	html body:not(#x) #classDatesArea .ui-datepicker-calendar td span { aspect-ratio: auto !important; height: 44px; min-height: 0 !important; }
}
/* class engine: the "Start again" the engine adds under a date-filtered list */
html body:not(#x) #classAcordianArea #resetBtn { float: none !important; display: block; margin: 4px 0 16px auto !important; background: var(--brand-btn2) !important; color: var(--brand-btn2-fg) !important; border-color: var(--brand-btn2) !important; }
@media (max-width: 767px) { html.brand-flow-on body:not(#x) #classAcordianArea #resetBtn { display: none !important; } }
/* class engine: "Choose your class" drawn by the stylesheet (present from the first paint: no layout jump) */
html body:not(#x) #classAcordianArea::before {
	content: "Choose your class"; display: block; background: var(--brand-paper); border: 1px solid var(--brand-line); border-bottom: 0;
	padding: 24px 22px 4px; font-family: var(--brand-heading-font) !important; font-size: 34px; line-height: 1.15; font-weight: 400; color: var(--brand-ink);
	font-size-adjust: 0.5; text-transform: none;
}
html body:not(#x) #classAcordianArea > #accordion2::before {
	content: "Open a class to see its description and the days it runs."; display: block; background: var(--brand-paper);
	border: 1px solid var(--brand-line); border-top: 0; padding: 4px 22px 20px; margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--brand-muted);
}
@media (max-width: 767px) { html body:not(#x) #classAcordianArea::before { font-size: 26px; } }

/* Treatment category headers (review 24 Oct), on the treatments engine and in the spa day "Treatments Available" pop-up:
   the category picture was shown at its full size (720px on the demo), squeezing the name and description into a sliver or
   pushing them out of view. The picture now sits hard left in the box at its full height, with the name and description beside it. */
html body:not(#x):not(#brand-cat) .ItemSubGroupHeader { --brand-cat-thumb: 260px; display: grid !important; grid-template-columns: var(--brand-cat-thumb) minmax(0,1fr); gap: 0; align-items: stretch; padding: 0 !important; overflow: hidden; }
html body:not(#x):not(#brand-cat) #leisureSelection-modal .ItemSubGroupHeader { --brand-cat-thumb: 180px; padding: 0 !important; }
html body:not(#x):not(#brand-cat) .ItemSubGroupHeader:has(.classAccordionHeaderImg img) > .ui-accordion-header-icon { display: none !important; }
html body:not(#x):not(#brand-cat) .ItemSubGroupHeader .classAccordionHeaderImg { display: block !important; position: relative; width: auto !important; min-height: max(130px, calc(var(--brand-cat-thumb) * 2 / 3)); padding: 0 !important; margin: 0 !important; }
html body:not(#x):not(#brand-cat) .ItemSubGroupHeader .classAccordionHeaderImg img { position: absolute; inset: 0; display: block; padding: 0 !important; border: 0 !important; aspect-ratio: auto !important; width: 100% !important; height: 100% !important; object-fit: cover; max-width: none; margin: 0 !important; }
html body:not(#x):not(#brand-cat) .ItemSubGroupHeader .classAccordionHeaderText { display: block !important; width: auto !important; float: none !important; margin: 0 !important; padding: 20px 22px !important; align-self: center; }
html body:not(#x):not(#brand-cat) .ItemSubGroupHeader .classAccordionHeaderTitleWrapper,
html body:not(#x):not(#brand-cat) .ItemSubGroupHeader .classAccordionHeaderTitle { display: block !important; width: auto !important; }
html body:not(#x):not(#brand-cat) .ItemSubGroupHeader .SubGroupDescArea { margin-top: 6px !important; }
html body:not(#x):not(#brand-cat) #leisureSelection-modal .ItemSubGroupHeader .SubGroupDescArea { font-size: 14px !important; }
html body:not(#x):not(#brand-cat) .ItemSubGroupHeader:not(:has(.classAccordionHeaderImg img)) { grid-template-columns: minmax(0,1fr); }
/* every category card the same height (a 3:2 picture slot) whatever the description length; Moddershall 28 Oct: cards with
   two-line descriptions were shorter than those with three, so the pictures looked different sizes */
/* phones: the picture across the top of the card, name and description underneath (a narrow strip beside the text
   left the picture unreadable and the text squeezed; Moddershall review 27 Oct) */
@media (max-width: 600px) {
	html body:not(#x):not(#brand-cat) .ItemSubGroupHeader, html body:not(#x):not(#brand-cat) #leisureSelection-modal .ItemSubGroupHeader { grid-template-columns: minmax(0,1fr) !important; }
	html body:not(#x):not(#brand-cat) .ItemSubGroupHeader .classAccordionHeaderImg { min-height: 0; aspect-ratio: 16 / 9; }
	html body:not(#x):not(#brand-cat) .ItemSubGroupHeader .classAccordionHeaderText { padding: 16px 16px 18px !important; align-self: start; }
}

/* Treatments summary tidy (review 24 Oct). Our 44px button rule (display:inline-flex !important) out-ranked the engine's
   .hidden, so hidden Next/Back buttons still took up space and pushed Book and Back out of line. The count sits beside Book
   on one row with Login, Back lines up with the card, and Remove sits before the price so every price shares one right edge. */
html body:not(#x):not(#brand-hid) #engineInnerArea .ui-button.hidden,
html body:not(#x):not(#brand-hid) #engineInnerArea button.hidden { display: none !important; }
html body:not(#x) #engineInnerArea > .container-fluid > #loginBar > .headertext { padding-left: 0 !important; padding-right: 0 !important; }
html body:not(#x) #loginBar .headertext:has(> .clearAfter) { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 16px; float: none !important; }
html body:not(#x) #loginBar .headertext:has(> .clearAfter) > #leisureloginBanner { order: 1; float: none !important; margin: 0 !important; }
html body:not(#x) #loginBar .headertext:has(> .clearAfter) > .clearAfter { order: 2; margin: 0 0 0 auto !important; padding: 0 !important; float: none !important; width: auto !important; }
html body:not(#x) #loginBar .headertext:has(> .clearAfter) > .clearAfter > label { float: none !important; margin: 0 !important; padding: 0 !important; }
html body:not(#x) #loginBar .headertext:has(> .clearAfter) > button { order: 3; float: none !important; margin: 0 !important; }
html body:not(#x) #leisureBackButtons { padding-left: 0 !important; padding-right: 0 !important; }
html body:not(#x) #SummaryPageTable :is(th, td) { vertical-align: middle !important; }
html body:not(#x) #SummaryPageTable :is(th, td):first-child { padding-left: 0 !important; }
html body:not(#x) #SummaryPageTable :is(th, td):last-child { padding-right: 0 !important; }
html body:not(#x) #SummaryPageTable tbody td:last-child { text-align: right !important; white-space: nowrap; }
html body:not(#x) #SummaryPageTable tbody td:last-child:has(.removeLeisureBookingButtonSummary) { direction: rtl; }   /* button before the price */
html body:not(#x) #SummaryPageTable .removeLeisureBookingButtonSummary { direction: ltr; float: none !important; margin: 0 16px 0 0 !important; }

/* Drop-downs (review 24 Oct): Safari draws native selects at its own small height and ignores min-height, so the guest
   register's Title / Gender boxes looked shorter and different from the text boxes beside them. All engine drop-downs now
   drop the native look and get the same box as the text fields, with a simple chevron. Autofill keeps the paper colour. */
html body:not(#x) :is(#engineInnerArea, .ui-dialog) select:not([multiple]):not(.ui-datepicker select) {
	-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important;
	padding-right: 38px !important; min-height: 44px; line-height: 1.3 !important; cursor: pointer;
}
html body:not(#x) :is(#guestDetails-modal, #MainGuestDetailsArea) .GuestEntryControl select { height: 44px !important; }
html body:not(#x) :is(#engineInnerArea, .ui-dialog) :is(input, select, textarea):-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--brand-paper) inset !important; -webkit-text-fill-color: var(--brand-ink) !important;
}

/* spa days, confirmation page: the engine leaves its Book button up (it hides by a class the button doesn't have) */
html body:has(#ConfirmationPage:not(.hidden)) :is(#nextBtnGuestAndCardDetails, #nextBtnGuestAndCardDetailsTop, #prevBtnGuestAndCardDetails) { display: none !important; }
html body:not(#x) #confirmationButtons .brand-book-again { margin-left: 10px; }
@media (max-width: 575px) { html body:not(#x) #confirmationButtons .brand-book-again { margin: 10px 0 0; } }

/* spa days: when the flow bar is up it carries Back / Continue, so the engine's second row under the spa days goes */
html.brand-flow-bar-on body #spaLeisureBackButtons { display: none !important; }

/* spa days: in an included treatment's pop-up, a treatment that costs extra shows its supplement ("+£35") */
html body:not(#x) #leisureSelection-modal .leisureAccordionHeaderPrice.brand-surcharge { color: var(--brand-ink) !important; font-weight: 600; }

/* class engine on phones: the month calendar is drawn ~0.5s after the page shows and pushed the key and the class list
   338px down (layout shift 0.22-0.5 on Douneside, audit 28 Oct). Reserve its height before it is drawn. */
@media (max-width: 767.98px) {
	html body #classDatesArea #placeholderDatePicker { min-height: 330px; }
}

/* header row (Continue / Book / "0 Treatment(s) Booked"): the engine's buttons are 27px until jQuery UI styles them and the spa
   Book button appears ~0.7s after load, so on phones the row re-flowed and pushed the page down (Penventon audit 28 Oct: shift
   0.21 treatments, 0.63 spa). Buttons keep their 44px from the start; on phones the booked count sits on its own line. */
html body #engineInnerArea button.headerRight, html body #engineInnerArea #page1NextBtn, html body #engineInnerArea #bookBtn { min-height: 44px; }
@media (max-width: 767.98px) {
	/* the Sign in link is filled in after load; while it was empty the Continue/Book button sat beside it, then wrapped under it */
	html body #engineInnerArea .headertext { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
	html body #engineInnerArea .headertext > #leisureloginBanner { flex: 0 0 auto; min-width: 112px; min-height: 44px; float: none !important; }
	html body #engineInnerArea .headertext > button.headerRight { margin-left: auto; float: none !important; }
	html body #engineInnerArea .coursesBookedTxt.headerRight { float: none !important; display: block !important; clear: both; flex: 0 0 100%; width: 100%; text-align: right; margin: 6px 0 0; }
}

/* button_secondary_style: outline */
html body .ui-button.brand-btn-secondary, html body #engineInnerArea .headerLeft.ui-button, html body #engineInnerArea .Loginlink, html body #engineInnerArea #LoginArea .ui-button, html body #BookingLinks .ui-button, html body .ui-dialog .ui-dialog-buttonpane button.brand-btn-secondary, html body:not(#x) #classSearchBtn.ui-button, html body:not(#x) #classAcordianArea #resetBtn { background: #ffffff !important; color: #2b2925 !important; border: 1px solid #2b2925 !important; border-color: #2b2925 !important; }


/* LG-1103: guest details - the Lead Guest drop-down takes the first-name slot of the two-column field grid: give it the full width like E-mail (Rob, 3 Nov 2026) */
html body:not(#x):not(#lg1) #formInputDiv > .GuestEntryItem:has(#leadGuestSelect) { grid-column: 1 / -1 !important; }
html body:not(#x):not(#lg1) #leadGuestSelect { width: 100% !important; max-width: none !important; }
/* EQ-1103: guest details and card panels the same height on every leisure engine (treatments wrap them in #BookingPage4, not #GuestAndCardPaymentDetailsPage) */
html body:not(#x) .row:has(> #MainGuestDetailsArea):has(> #PaymentDetailsArea) { display: flex; flex-wrap: wrap; row-gap: 22px; }
html body:not(#x) .row:has(> #MainGuestDetailsArea)::before, html body:not(#x) .row:has(> #MainGuestDetailsArea)::after { display: none; }