/* ===================================================================
   Book Now -- modern restyle overlay
   Loaded AFTER booknowmain.css / booknowstepN.css / booknowpop.css /
   booknowslide.css / mdb.min.css, so it wins the cascade for anything
   listed here. The competing !important rules those files used to
   carry on these same properties have been removed from the legacy
   files (see booknowmain.css / booknowstep3.css / booknowstep5.css)
   so this file does not need to fight them -- the !important used
   below exists only to beat the legacy files' *own* high-specificity
   descendant-chain selectors (e.g.
   "#BookNowSlide .appointmentBox .bookAppointment .bookInfo .formBox
   .input-group .checkFeild input[type=checkbox]+label:before"), which
   out-specificity a plain-class rule regardless of source order or
   !important. This mirrors the same pattern already used in
   portal/app/header/css/bnnew.css and portalhome.css.

   No markup, IDs, onclick handlers, or class names used by
   bn/js/booknow.js have been renamed -- every selector below targets
   an existing hook. Functionality is unchanged; this file is styling
   only (plus a couple of pure-CSS additions called out inline, e.g.
   the breadcrumb step numbers via CSS counters).
   =================================================================== */

#BookNowSlide {
	/* Neutral tokens (matched to /portal/app's design language) */
	--bnm-page-bg: #f6f7fb;
	--bnm-card-bg: #ffffff;
	--bnm-border: #e7e9ee;
	--bnm-divider: #f1f5f9;
	--bnm-text-h: #1a2130;
	--bnm-text-body: #374151;
	--bnm-text-muted: #5b6474;
	--bnm-text-faint: #93a0b1;
	--bnm-shadow-card: 0 1px 2px rgba(16, 24, 40, .05);
	--bnm-shadow-hover: 0 10px 24px -8px rgba(20, 38, 64, .16);

	/* Fixed soft-accent set -- not tenant-themed, used only for the
	   "K-Cup"-style service-info badge and similar non-brand chips */
	--bnm-sky: #2f6fb0; --bnm-sky-soft: #e8f1fa;
	--bnm-teal: #2f8f82; --bnm-teal-soft: #e7f5f2;
	--bnm-rose: #b85577; --bnm-rose-soft: #f7e9ef;
	--bnm-amber: #c97800; --bnm-amber-soft: #fdf1de;
	--bnm-slate: #516079; --bnm-slate-soft: #eaeef4;

	/* Tenant brand-color ring used for focus states -- derived from the
	   site's own --theme-secondary-color so it adapts per tenant */
	--bnm-focus-ring: 0 0 0 3px color-mix(in srgb, var(--theme-secondary-color) 22%, transparent);
}

/* ===================================================================
   1. Base / page
   =================================================================== */
#BookNowSlide body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	color: var(--bnm-text-body) !important;
}
#BookNowSlide,
#BookNowSlide input,
#BookNowSlide select,
#BookNowSlide textarea,
#BookNowSlide button {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===================================================================
   2. Card shell -- .appointmentBox handles full-viewport centering
   (untouched, layout-only); .bookAppointment is the actual card.
   =================================================================== */
#BookNowSlide .appointmentBox .bookAppointment {
	/* Legacy fixed this at max-width:750px in every context (standalone
	   full page included). Scales with the viewport instead -- min()
	   keeps it from ballooning on very wide screens while still using
	   the room available in whatever it's rendered in (full page, popup,
	   or slideout each have their own narrower @media overrides further
	   down the cascade in booknowpop.css/booknowslide.css that still win
	   at small widths, so this only widens the roomier, larger cases). */
	max-width: min(980px, 94vw);
	border-radius: 20px;
	background: var(--bnm-card-bg);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 24px 48px -24px rgba(20, 38, 64, .18);
	/* Turns the card into header / breadcrumb / scrollable-content / footer-
	   button column. Legacy sized the scrollable area with
	   height:calc((var(--vh,1vh)*100) - 190px) -- a magic number tuned to
	   the OLD header/breadcrumb proportions; this redesign's header is a
	   different height, so that number now under/overshoots and the
	   content either scrolls under the Continue button or leaves a gap.
	   flex:1 + min-height:0 on the scrollable area sizes it off whatever
	   the header/breadcrumb/button actually take up, live, instead of a
	   hardcoded guess -- and keeps the Continue button pinned in view
	   without needing to scroll to it, on any screen size. */
	display: flex;
	flex-direction: column;
	float: none;
	overflow: hidden;
}
/* .bnm-embedded-shell (index.cfm, added when BNType > 0) -- the widget is
   loading inside a host page's own popup/panel/slide-out chrome
   (exitBookNow() in booknow.js: 1=modal, 2=panel, 3=slide), which already
   draws its own card/shadow around the whole widget. Layout (flex column,
   max-width, padding) stays; only the redundant nested card LOOK is
   stripped, so it isn't a card inside a card. */
#BookNowSlide .appointmentBox .bookAppointment.bnm-embedded-shell {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
#BookNowSlide .header-container {
	flex-shrink: 0;
}
#BookNowSlide #loadfirstpage {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
#BookNowSlide .breadcrumb {
	flex-shrink: 0;
}
#BookNowSlide #loadingwrapper {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	/* Containing block for #spinnerrel's loading shimmer below. */
	position: relative;
}
#BookNowSlide #bookInfoDivWrapper {
	position: static;
	height: auto !important;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
/* !important + unconditional (not scoped to a breakpoint): legacy has a
   @media(max-width:480px) rule (booknowmain.css ~3215) that hides
   .fullpagecontinue/#continueBtn1Full and un-hides the OLD mobile-only
   duplicate Continue button (.serseldivBtn/#continueBtn1) below that
   width -- assuming the two-button system that existed before that
   duplicate was deleted from dsp_booknowstep1.cfm. With only one button
   left, that legacy rule was hiding it with nothing to take its place. */
#BookNowSlide .serseldivBtnFull {
	flex-shrink: 0;
	display: flex !important;
}
#BookNowSlide .fullpagecontinue {
	position: static !important;
	max-width: none !important;
	padding: 14px 26px 20px;
	border-top: 1px solid var(--bnm-divider);
	/* Legacy right-aligned this button by floating the <a> itself
	   (.fullpagecontinueBtn{float:right}); resetting that float for the
	   flex restructure above (see .fullpagecontinueBtn below) left it with
	   no alignment at all, so it fell back to flush-left. Flex + justify-
	   content:flex-end replaces the float for the same result.
	   !important on display: two other legacy .fullpagecontinue rules
	   (booknowmain.css ~23 and its own duplicate) also set display:block,
	   same specificity as this rule, and were still winning the tie
	   despite this file loading later -- same recurring issue as
	   elsewhere in this stylesheet. */
	display: flex !important;
	justify-content: flex-end;
}
#BookNowSlide #continueBtn1Full,
#BookNowSlide #continueBtn1Full_busy {
	position: static !important;
}
#BookNowSlide .fullpagecontinueBtn {
	float: none;
}
/* The mobile-only duplicate Continue button (#continueBtn1/.serseldivBtn)
   has been removed from dsp_booknowstep1.cfm entirely -- #continueBtn1Full/
   .serseldivBtnFull (fixed above) is the one used at every screen size now,
   so no display-swapping override is needed here any more. */
/* #continueBtnst1DivFull and .fullpagecontinue are the same element (see
   index.cfm) -- this ID selector otherwise wins the display property over
   .fullpagecontinue's display:flex (ID beats class, both !important),
   collapsing the button back to block/left-aligned. Must match
   .fullpagecontinue's flex + alignment exactly. Select Provider, Select
   Time, and Verify Your Information don't use this persistent button --
   booknow.js sets this same container's inline style to display:none for
   those (loadstaffroom(), loadtimes(), and the stp===3 case respectively)
   -- but the display:flex!important above still forces it to keep
   rendering regardless, so it's dimmed + non-interactive instead of
   actually removed. */
#BookNowSlide #continueBtnst1DivFull {
	display: flex !important;
	justify-content: flex-end !important;
}
#BookNowSlide #continueBtnst1DivFull[style*="display:none"] .nextBtn,
#BookNowSlide #continueBtnst1DivFull[style*="display: none"] .nextBtn {
	opacity: 0.35;
	pointer-events: none;
}
/* Continue on Client Information stays greyed out (non-interactive) until
   every required field validates -- refreshContinueBtnaState() in
   booknow.js toggles this class as the fields change. */
#BookNowSlide #continueBtna.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}
/* Same slim-scrollbar treatment as .showscroll, extended to the wrapper
   that actually owns the scroll now (see #bookInfoDivWrapper above). */
#BookNowSlide #bookInfoDivWrapper {
	scrollbar-width: thin;
	scrollbar-color: var(--bnm-border) transparent;
}
#BookNowSlide #bookInfoDivWrapper::-webkit-scrollbar {
	width: 6px;
}
#BookNowSlide #bookInfoDivWrapper::-webkit-scrollbar-track {
	background: transparent;
}
#BookNowSlide #bookInfoDivWrapper::-webkit-scrollbar-thumb {
	background: var(--bnm-border);
	border-radius: 999px;
}
#BookNowSlide #bookInfoDivWrapper::-webkit-scrollbar-thumb:hover {
	background: var(--bnm-text-faint);
}
/* #bookInfoDiv/#bookInfoDivAll/#bookInfoDivCC (the .bookInfo.showscroll
   siblings inside the wrapper) still carry legacy .showscroll's own
   overflow-y:auto, plus a legacy .maxHeightFix descendant fixes them to
   height:calc((var(--vh,1vh)*100) - 290px) -- both assume the OLD
   full-viewport layout. Now that #bookInfoDivWrapper (above) is the one
   flex-sized scroll owner, that combination was creating a second, nested
   scrollbar (and forcing extra height) even when the content easily fit.
   Letting these grow to their natural content height and scroll only at
   the wrapper level fixes both.
   !important is required here: dsp_booknowstep1.cfm links its own
   booknowstep1.css, which (being injected into <body> when that step's
   partial loads) ends up *after* this overlay's <head> <link> in the
   cascade despite this file being the one meant to load last -- and it
   carries an equal-specificity, non-!important .showscroll height rule
   of its own (height:calc((var(--vh,1vh)*100) - 380px);min-height:150px)
   that would otherwise win purely on source order. */
#BookNowSlide #bookInfoDivWrapper .showscroll {
	overflow: visible !important;
}
#BookNowSlide #bookInfoDivWrapper .maxHeightFix {
	position: static;
}
/* Modern loading visual -- replaces the old full-viewport white-flash +
   GIF spinner (bn/css/loading.css's .overlayerspinnerrel/-full, shared
   boilerplate copied across every app on this platform) with the same
   diagonal shimmer-sweep skeleton used for photo tiles on /portal/app
   (portal/app/photos/css/photos.css .photo-thumb-loading/
   erPhotoThumbShimmer) -- same gradient technique and neutral tones,
   just filling the whole incoming step instead of one thumbnail, so
   loading reads consistently across the two apps. !important only on
   position/top/height/width -- booknowmain.css's own #BookNowSlide
   #spinnerrel rule sets top/height with !important already, and loads
   before this file regardless of source order. background/
   background-size/animation deliberately do NOT carry !important: a CSS
   animation cannot override a property that's set !important anywhere
   in the cascade (including the shorthand's own implied sub-properties)
   -- adding it here silently froze background-position at its static
   start value instead of letting the keyframes animate it, which is why
   this previously rendered as a flat, non-pulsing gray fill. Cycle
   shortened (was 1.5s/120%-to--20%) and the travel range narrowed so a
   visible sweep still completes even during a fast, sub-second ajax
   round trip rather than only showing the still-mostly-base-color start
   frame. */
#BookNowSlide #loadingwrapper #spinnerrel.overlayerspinnerrel,
#BookNowSlide #loadingwrapper #spinnerrel.overlayerspinnerrelfull {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 5;
	background: linear-gradient(100deg, var(--bnm-page-bg) 30%, var(--bnm-border) 45%, var(--bnm-page-bg) 60%);
	background-size: 200% 100%;
	animation: bnm-step-shimmer .9s ease-in-out infinite;
}
@keyframes bnm-step-shimmer {
	0% { background-position: 60% 0; }
	100% { background-position: -40% 0; }
}
/* Navigating backward -- #loadingwrapper.bn-slide-back is toggled by
   bnBeginStepSlide() (booknow.js) whenever the target step is behind the
   one that was active -- reverses the sweep to travel right-to-left
   instead of left-to-right. */
#BookNowSlide #loadingwrapper.bn-slide-back #spinnerrel.overlayerspinnerrel,
#BookNowSlide #loadingwrapper.bn-slide-back #spinnerrel.overlayerspinnerrelfull {
	animation-direction: reverse;
}
@media (prefers-reduced-motion: reduce) {
	#BookNowSlide #loadingwrapper #spinnerrel.overlayerspinnerrel,
	#BookNowSlide #loadingwrapper #spinnerrel.overlayerspinnerrelfull {
		animation: none;
		background: var(--bnm-page-bg);
	}
}

/* Some tenants configure a background photo (BNSettings.Photo, set inline on
   <body> in bn/index.cfm's own <style> block) -- washes it toward white
   instead of leaving it dark/plain, without needing to know that image URL
   here (it's server-rendered per tenant): a translucent scrim layered via
   ::before, sitting behind the card via explicit z-index rather than by
   source order, since position:fixed would otherwise paint above normal
   in-flow content regardless of where this rule appears in the cascade.
   #BookNowSlide *is* the <body> element (id="BookNowSlide" is on <body>
   itself, there's no separate wrapper), so this targets it directly. */
#BookNowSlide {
	position: relative;
}
#BookNowSlide::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, .72);
	z-index: 0;
	pointer-events: none;
}
/* booknowmain.css's own #BookNowSlide .appointmentBox rule sets height:100vh
   literally -- never the var(--vh) custom property bn/index.cfm's script now
   sets to the real visible-viewport height -- and booknowmodern.css's own
   mobile card-shell rule below sizes .bookAppointment as calc(100% - 10px)
   OF this same element, so the whole chain traced back to literal 100vh
   regardless of that fix. 100vh on mobile Chrome/Safari is taller than
   what's actually visible whenever the address bar is showing, pushing
   anything sized/positioned off it (the persistent bottom Continue button
   included) below the fold. calc(var(--vh,1vh)*100) is the fallback for
   browsers without dvh support; 100dvh (a real, browser-native "account for
   the address bar" unit) overrides it wherever it's supported, updating
   instantly as the chrome shows/hides instead of waiting on the JS resize
   handler that drives --vh. */
#BookNowSlide .appointmentBox {
	position: relative;
	z-index: 1;
	height: calc(var(--vh, 1vh) * 100);
	height: 100dvh;
}
/* Mobile card shell -- legacy's own @media(max-width:767px) block (this
   file's the only one built to load after it -- see notes elsewhere in
   this stylesheet) meant to inherit centering from a #BookNowSlide body{
   display:flex;justify-content:center} rule (booknowmain.css ~line 2),
   but that selector can never match: #BookNowSlide *is* <body> (see
   comment above), so a body can never be its own descendant. That dead
   rule left .appointmentBox's align-items/justify-content:inherit
   resolving to the initial "normal" instead of "center", so the full-
   bleed mobile card (0 margin, 0 border-radius) sat flush left with
   the leftover viewport width dumped entirely on the right instead of
   split evenly -- the same root cause behind "card isn't centered",
   "no space between the edge and the content", and "need to see the
   background peek from behind the card" all at once. Restoring an
   explicit center plus a real 5px margin (instead of legacy's 0) fixes
   all three together. */
@media only screen and (max-width: 767px) {
	#BookNowSlide .appointmentBox {
		align-items: center !important;
		justify-content: center !important;
	}
	#BookNowSlide .appointmentBox .bookAppointment {
		margin: 5px !important;
		height: calc(100% - 10px) !important;
		max-width: calc(100vw - 10px) !important;
		border-radius: 16px !important;
		box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 24px 48px -24px rgba(20, 38, 64, .18) !important;
	}
	/* Same override as the desktop rule above -- this breakpoint's own
	   border-radius/box-shadow carry !important, which would otherwise
	   win back over the plain (non-important) override there. */
	#BookNowSlide .appointmentBox .bookAppointment.bnm-embedded-shell {
		border-radius: 0 !important;
		box-shadow: none !important;
	}
}

/* ===================================================================
   3. Header -- logo, "Book Your Appointment" title, In Person/Virtual
   toggle, selected-services count / "View Appointment Details" link
   =================================================================== */
#BookNowSlide .header-container {
	padding: 10px 26px;
	margin-bottom: 0;
	align-items: center;
	flex-wrap: nowrap;
	column-gap: 18px;
}
.bookAppointment .header-container .header-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-self: center;
	height: auto !important;
	max-height: 80px;
	width: auto !important;
	margin-bottom: 0;
	overflow: hidden;
}
#BookNowSlide .bookAppointment .header-container .header-logo-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	max-width: 180px;
	max-height: 80px;
	float: none;
}
#BookNowSlide .bookAppointment .header-container .header-logo img {
	display: block;
	max-width: 180px;
	max-height: 80px;
	height: auto;
	width: auto;
	object-fit: contain;
}
/* NOTE: .header-content/.header-title/#selected-services previously
   stacked via a float:right;width:100% hack (each floated sibling
   claims the full line, forcing the next one onto its own row) with
   #appttype's old position:relative;top:100% compensating for it.
   Replaced with a plain flex column -- float:none/width:auto reset
   the hack instead of trying to coexist with it. */
#BookNowSlide .header-content {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	float: none;
	width: auto;
	min-width: 0;
	flex: 1 1 0;
	text-align: right;
}
#BookNowSlide .header-title {
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--bnm-text-h);
	letter-spacing: 0;
	line-height: 1.2;
	overflow-wrap: break-word;
}
#BookNowSlide #appttype {
	float: none;
	width: auto;
	display: flex;
	justify-content: flex-end;
}
/* NOTE: display is deliberately NOT !important here -- #chgInPerson /
   #chgVirtual toggle visibility via inline style="display:none" plus
   jQuery .show()/.hide() in bn/index.cfm's own inline script. An
   !important display would have beaten that inline "none" and shown
   both options at once. Inline styles still win over this rule's
   normal-priority display, while .show() clearing the inline style
   lets this inline-flex layout apply once the element IS visible. */
#BookNowSlide .virtualoption {
	position: static;
	height: auto;
	padding: 0;
	margin-top: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	color: var(--bnm-text-muted) !important;
}
/* Hides the legacy raster icon (bn/images/profile.svg or imac.svg,
   img.appttypeicon) entirely rather than restyling it -- a fixed image
   file can't be recolored/matched to this redesign's icon language the
   way an SVG mask can. display:none removes it from the flex row
   cleanly (no leftover gap), and the ::before below supplies a plain
   line-style icon instead, masked with currentColor so it inherits
   this row's own muted text color automatically. */
#BookNowSlide .virtualoption .appttypeicon {
	display: none;
}
#BookNowSlide .virtualoption::before {
	content: "";
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
#BookNowSlide .appt-current {
	color: var(--bnm-text-muted) !important;
	font-weight: 600;
}
#BookNowSlide .appt-change {
	color: var(--theme-secondary-color) !important;
	font-weight: 700 !important;
	font-size: 13.5px;
}
#BookNowSlide #selected-services {
	float: none;
	width: auto;
	margin-top: 0;
	display: flex;
	justify-content: flex-end;
	min-height: 30px;
	align-items: center;
}
#BookNowSlide #sernumSel,
#BookNowSlide #apptdetails {
	position: static;
	height: auto;
	padding: 0;
	margin-top: 0;
}
#BookNowSlide #sernumSel a,
#BookNowSlide #apptdetails a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700 !important;
	color: var(--theme-secondary-color) !important;
	background: color-mix(in srgb, var(--theme-secondary-color) 10%, var(--bnm-card-bg));
	padding: 5px 14px;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
	transition: filter .12s ease, box-shadow .12s ease;
}
/* The count itself is one continuous text run from booknow.js
   ("N Service(s) Selected") with no separate element around the
   number -- wrapped it in <span class="sernum-badge"> there (the only
   markup/JS touch in this whole restyle) specifically so it could get
   its own circular badge here, matching the breadcrumb's numbered
   circles instead of just floating as plain text in the pill. */
#BookNowSlide #sernumSel a .sernum-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--theme-secondary-color);
	/* --theme-buttonfontP-color is the tenant's own pick of a readable
	   color against --theme-secondary-color (white on a dark accent,
	   near-black on a light one) -- already correctly light or dark, so
	   blending in a little of the accent itself just softens/desaturates
	   it toward a "greyed out" tone instead of stark white/black, without
	   needing to branch on the accent's actual lightness. */
	color: color-mix(in srgb, var(--theme-buttonfontP-color) 72%, var(--theme-secondary-color) 28%);
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
}
#BookNowSlide #sernumSel a:hover,
#BookNowSlide #apptdetails a:hover {
	box-shadow: 0 4px 10px -2px rgba(16, 24, 40, .2);
	filter: brightness(0.97);
}
#BookNowSlide #selected-services:not(.visible) {
	pointer-events: none;
}


/* ===================================================================
   4. Breadcrumb / stepper
   Step numbers and the done/current visual state are done entirely
   with CSS counters + the existing "current" class -- no markup
   change. Only breaditems the JS has revealed (display:block) ever
   generate a counter box, so numbering the visible subset "just
   works" as each step becomes reachable. Separator chevrons are
   hidden; the pill positions communicate progress instead.
   =================================================================== */
/* Legacy originally gave this bar a solid --theme-main-color background
   plus border-radius:8px (booknowmain.css ~328) -- flattened to a plain
   full-bleed grey strip with square corners here, which lost the
   tenant's accent entirely. Restored as an inset, softly-tinted rounded
   bar instead of solid color: solid --theme-main-color behind this
   redesign's dark step text/light "current" pill would fight for
   contrast (it's a mid-tone, not tuned to sit behind text), where a
   ~14% tint keeps the accent visibly present while everything drawn on
   top of it stays legible regardless of the tenant's color. */
#BookNowSlide .breadcrumb {
	background: color-mix(in srgb, var(--theme-main-color) 30%, var(--bnm-card-bg)) !important;
	border: none;
	border-radius: 14px;
	/* 10px, not the card's base 25px padding again -- .form-row.bookapptWrapper
	   (wrapping the location/service dropdowns below) already sits 10px
	   deeper than that base padding on its own, and this needs to land at
	   the same inset those dropdowns do, not add its own separate amount
	   on top of the base (that mismatched by 10px on first pass). Top
	   margin added separately -- previously 0, sitting right against the
	   header's own 18px bottom padding with no breathing room of its own,
	   reading as too close to the top of the whole card. */
	/* 13px, half of the original 26px -- still separates this from the
	   header above, but not by as much. */
	margin: 13px 10px 14px;
	height: auto !important;
	padding: 10px 0px !important;
	color: var(--bnm-text-body) !important;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	/* none, not legacy's scroll-snap-type:x mandatory (booknowmain.css
	   ~2885, mobile breakpoint) -- with mandatory snap, the browser will
	   only stop scrolling at a position where some item's snap-align:
	   start lines up flush with the container's edge. When the true
	   remaining scroll distance is too short for the last item(s) to
	   ever reach that flush alignment, mandatory snap can refuse to
	   scroll any further at all rather than falling back to the nearest
	   reachable position -- Summary's text stayed clipped by the
	   container edge no matter how far right you dragged/scrolled. A
	   breadcrumb doesn't need swipe-to-snap the way a carousel does, so
	   removing snap entirely (rather than tuning snap points) just lets
	   it scroll freely to its real end. */
	scroll-snap-type: none;
}
/* flex-wrap:nowrap unconditionally -- legacy has a SEPARATE, later,
   equally-specific #BookNowSlide .breadcrumb rule (booknowmain.css
   ~328) that sets flex-wrap:wrap with no media query at all, winning
   the tie over its own earlier nowrap rule (booknowmain.css ~142)
   purely by being declared later in that same file. Nothing in this
   file overrode flex-wrap itself before, so whenever the breadcrumb's
   full content is wider than its row -- which starts happening well
   above any mobile breakpoint -- the overflowing steps wrapped to a
   second line instead of collapsing into the intended horizontal
   scroll, e.g. "Summary" dropping below the other four steps around
   900-990px wide. */
#BookNowSlide .breadcrumb {
	flex-wrap: nowrap !important;
	/* Containing block for .breadcrumb-slider below -- its left/top are
	   set in content-area pixels (booknow.js positionBreadcrumbSlider())
	   that only line up with each breaditem's own offsetLeft/offsetTop
	   when both share this element as their offsetParent. */
	position: relative;
}
#BookNowSlide .breadcrumb::-webkit-scrollbar {
	display: none;
}
#BookNowSlide .breadcrumb .separator {
	display: none !important;
}
/* Every step is always shown now (was progressive-reveal only) -- steps not yet
   reached stay visible but inert. booknow.js reveals a step by running
   $(...).css('display','block') on its class (.selspcaret/.seltimecaret/
   .clientinfocaret/.summarycaret), which mutates the inline style attribute;
   forcing the computed display open here doesn't erase that attribute, so the
   [style*="display:none"] rule below can still tell "not reached yet" apart
   from "current"/"already passed" purely from that same JS-driven state. */
#BookNowSlide .breadcrumb a.breaditem {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	padding: 7px 14px !important;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bnm-text-faint);
	white-space: nowrap;
	flex-shrink: 0;
	/* Stacks above .breadcrumb-slider (z-index:0, below), which renders
	   behind every breaditem's own text/number instead of on top of it. */
	position: relative;
	z-index: 1;
}
/* The moving white pill behind the current step -- a single element
   whose transform/width booknow.js (positionBreadcrumbSlider()) tweens
   to match whichever breaditem just gained .current, instead of the
   background simply popping in on the new step and out on the old one.
   Sized/positioned entirely from JS (offsetLeft/offsetTop/offsetWidth/
   offsetHeight of the current item) rather than fixed CSS values since
   every step's label is a different width. */
#BookNowSlide .breadcrumb-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	border-radius: 999px;
	background: var(--bnm-card-bg);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
	z-index: 0;
}
/* Trailing space at the scroll end, via the last item's own margin
   rather than the container's own right padding -- once this
   breadcrumb actually needs to scroll (more steps than fit at a given
   width), that container padding wasn't being honored at the far
   scrolled-right edge, so the last step ("Summary") butted right up
   against the pill's rounded edge with no breathing room, reading as
   clipped. A child's own margin is reliably included in the scrollable
   area across browsers, where a scroll container's end-padding isn't
   always guaranteed to be. */
#BookNowSlide .breadcrumb a.breaditem:last-of-type {
	margin-right: 22px;
}
/* Matching buffer at the start, so scrolling back to the left also
   stops with breathing room before the first step instead of landing
   flush against that edge. :first-of-type/:last-of-type rather than
   :first-child/:last-child -- .breadcrumb-slider (the sliding pill
   indicator, below) sits before the first breaditem in markup so its
   absolute positioning has no effect on the flex layout order, which
   would otherwise make it the actual :first-child and drop this margin
   off the real first step. */
#BookNowSlide .breadcrumb a.breaditem:first-of-type {
	margin-left: 22px;
}
/* Embedded Book Now shells are narrower than the standalone page, so the
   always-visible five-step breadcrumb can overflow just enough for the
   trailing Summary label to clip. Tighten spacing only in that embedded
   context instead of shrinking the full-width experience. */
#BookNowSlide .bookAppointment.bnm-embedded-shell .breadcrumb {
	gap: 2px;
}
#BookNowSlide .bookAppointment.bnm-embedded-shell .breadcrumb a.breaditem {
	gap: 5px;
	padding: 7px 10px !important;
	font-size: 12.5px;
}
#BookNowSlide .bookAppointment.bnm-embedded-shell .breadcrumb a.breaditem:first-of-type {
	margin-left: 12px;
}
#BookNowSlide .bookAppointment.bnm-embedded-shell .breadcrumb a.breaditem:last-of-type {
	margin-right: 12px;
}
#BookNowSlide .bookAppointment.bnm-embedded-shell .breadcrumb a.breaditem::before {
	width: 18px;
	height: 18px;
	font-size: 10px;
}
#BookNowSlide .breadcrumb a.breaditem[style*="display:none"],
#BookNowSlide .breadcrumb a.breaditem[style*="display: none"] {
	pointer-events: none;
	cursor: default !important;
	opacity: .5;
}
#BookNowSlide .breadcrumb a.breaditem::before {
	content: attr(data-step);
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--bnm-border);
	color: var(--bnm-text-faint);
	font-size: 11px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#BookNowSlide .breadcrumb a.breaditem.current {
	/* No background/box-shadow here -- .breadcrumb-slider (above) renders
	   the actual pill and slides between steps; this class now only
	   carries the text/number color change. */
	color: var(--bnm-text-h) !important;
	transition: color .2s ease;
}
#BookNowSlide .breadcrumb a.breaditem.current::before {
	background: var(--theme-secondary-color);
	color: var(--theme-buttonfontP-color);
}
#BookNowSlide .breadcrumb a.breaditem:not(.current) {
	color: var(--bnm-text-muted) !important;
}
/* Checkmark only for steps already passed -- i.e. not current AND not still
   carrying the original display:none (see note above the base rule). A step
   that's merely visible-but-unreached keeps its plain number instead. */
#BookNowSlide .breadcrumb a.breaditem:not(.current):not([style*="display:none"]):not([style*="display: none"])::before {
	content: "\2713";
	background: var(--theme-secondary-color);
	color: var(--theme-buttonfontP-color);
	font-size: 10.5px;
}
/* A previous pass windowed the breadcrumb below 730px/540px -- hiding every
   step except a couple around the current one with display:none!important
   -- specifically to fight crowding. But display:none removes those steps
   from the DOM's rendered flow entirely, not just scrolls them off, which
   also removed the ability to scroll back and tap an earlier step to
   return to it. The base "always show, let .breadcrumb's own
   overflow-x:auto handle narrow widths" rule further up (section 4) is
   left as the only behavior now -- horizontal scroll instead of hiding is
   what keeps every passed step reachable. */

/* ===================================================================
   5. Location select + any other .form-control dropdown
   =================================================================== */
#BookNowSlide .appointmentBox .bookAppointment .bookInfo .formBox .form-group select.form-control,
#BookNowSlide .appointmentBox .bookAppointment .bookInfo .formBox .dateinout .availableTimeCol .time2 .form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a0b1' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
	background-size: 16px;
	background-position: right 14px center;
}
#BookNowSlide select.form-control,
#BookNowSlide .dropdown-label {
	border: 1px solid var(--bnm-border) !important;
	border-radius: 12px !important;
	box-shadow: var(--bnm-shadow-card);
	color: var(--bnm-text-h) !important;
	font-weight: 500;
	/* height:40px to match every other input/select on this form -- Bootstrap's
	   .form-control sets an explicit height that otherwise wins over padding
	   alone (padding just gets squeezed inside a fixed box instead of growing
	   it), so height needs overriding too. */
	height: 40px !important;
	padding: 0 40px 0 14px !important;
	background-color: var(--bnm-card-bg) !important;
}
#BookNowSlide select.form-control:focus {
	outline: none;
	border-color: var(--theme-secondary-color) !important;
	box-shadow: var(--bnm-focus-ring);
}
/* Custom location combobox (dsp_booknowstep1.cfm) -- a native <select>'s
   OPEN option list is drawn by the OS/browser and can't be restyled, so
   this div-based trigger+list replaces just the visual/interaction layer.
   The real <select> stays in the DOM as the source of truth (visually
   hidden via .custom-select-native below), kept in sync by the JS in
   that same file. */
#BookNowSlide .custom-select-wrap {
	position: relative;
}
#BookNowSlide .custom-select-trigger {
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 14px;
	border: 1px solid var(--bnm-border);
	border-radius: 12px;
	box-shadow: var(--bnm-shadow-card);
	background-color: var(--bnm-card-bg);
	color: var(--bnm-text-h);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}
#BookNowSlide .custom-select-trigger:hover {
	border-color: var(--bnm-text-faint);
}
#BookNowSlide .custom-select-wrap:focus-within .custom-select-trigger,
#BookNowSlide .custom-select-trigger[aria-expanded="true"] {
	outline: none;
	border-color: var(--theme-secondary-color);
	box-shadow: var(--bnm-focus-ring);
}
#BookNowSlide .custom-select-chevron {
	width: 16px;
	height: 16px;
	color: var(--bnm-text-faint);
	flex-shrink: 0;
	transition: transform .15s ease;
}
#BookNowSlide .custom-select-trigger[aria-expanded="true"] .custom-select-chevron {
	transform: rotate(180deg);
}
#BookNowSlide .custom-select-list {
	display: none;
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	background: var(--bnm-card-bg);
	border: 1px solid var(--bnm-border);
	border-radius: 12px;
	box-shadow: 0 12px 28px -8px rgba(20, 38, 64, .22);
	padding: 6px;
}
#BookNowSlide .custom-select-list.is-open {
	display: block;
}
#BookNowSlide .custom-select-option {
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--bnm-text-h);
	cursor: pointer;
}
#BookNowSlide .custom-select-option:hover {
	background: color-mix(in srgb, var(--theme-secondary-color) 8%, var(--bnm-card-bg));
}
#BookNowSlide .custom-select-option.is-selected {
	background: color-mix(in srgb, var(--theme-secondary-color) 12%, var(--bnm-card-bg));
	color: var(--theme-secondary-color);
	font-weight: 700;
}
/* Visually hidden but still in the DOM/tab order and fully functional --
   .value, onchange, and $(...).trigger('change') all still work exactly
   as before; only its own native rendering is what's hidden. */
#BookNowSlide select.form-control.custom-select-native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	box-shadow: none !important;
}
#BookNowSlide label.label,
#BookNowSlide label.form-label {
	font-size: 12.5px !important;
	font-weight: 800 !important;
	letter-spacing: .03em;
	text-transform: uppercase !important;
	color: var(--bnm-text-faint) !important;
	margin-bottom: 8px;
}

/* ===================================================================
   6. Service accordion (dsp_servicechecklist.cfm)
   Only cosmetic properties here -- show/hide of .accordion-content is
   owned entirely by booknow.js (no inline display style exists in the
   server-rendered markup to fight), so display/height/overflow are
   deliberately left alone.
   =================================================================== */
/* All categories in one unified card (was each .accordion-section as
   its own separate bordered box) -- #mSelectServiceOptions wraps every
   category, so the card shell moves there and each section becomes a
   flat row separated by a divider instead, matching the same
   flat-list-with-divider treatment used for .service-item elsewhere. */
#BookNowSlide #mSelectServiceOptions {
	border: 1px solid var(--bnm-border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bnm-card-bg);
}
#BookNowSlide .accordion-section {
	border-bottom: 1px solid #e2e8f0;
}
#BookNowSlide .accordion-section:last-child {
	border-bottom: none;
}
/* Per-category "N selected" badge -- shown on the (possibly collapsed)
   category header whenever it contains checked services, so a
   selection stays visible without expanding every category to find it.
   Inserted/removed by updateCategorySelectedBadges() in booknow.js
   (called from toggleCheck()/initializeLoadedServiceChecklist()/
   removeAllServices()) as a <span class="accordion-badge"> right before
   the existing .caret-icon -- the only markup this feature needed, no
   existing hooks changed. margin-left:auto groups it with the caret at
   the row's right edge instead of it floating right after the title. */
#BookNowSlide .accordion-header .accordion-badge {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--theme-secondary-color);
	background: color-mix(in srgb, var(--theme-secondary-color) 12%, var(--bnm-card-bg));
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
/* .caret-icon also carries its own margin-left:auto (for when no badge
   is present, so it alone gets pushed to the row's right edge) -- with
   a badge present too, flexbox splits the leftover space EQUALLY across
   both auto margins instead of letting the badge's margin consume it
   all, leaving a gap between the badge and the caret instead of the two
   sitting flush together. Zeroing the caret's own auto margin whenever
   a badge immediately precedes it leaves the badge's margin as the only
   one competing for that space, grouping both tight at the right edge. */
#BookNowSlide .accordion-header .accordion-badge + .caret-icon {
	margin-left: 0;
}
#BookNowSlide .accordion-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--bnm-text-h) !important;
	background: var(--bnm-card-bg);
	transition: background .12s ease;
}
#BookNowSlide .accordion-header:hover,
#BookNowSlide .accordion-header.active {
	background: var(--bnm-divider);
}
#BookNowSlide .accordion-header .caret-icon {
	/* Deliberately excluded from the general font-size bump above --
	   this one specifically needs to stay small (feedback: "still seems
	   big" even at 13px), unlike the surrounding text. */
	margin-left: auto;
	font-size: 11px;
	color: var(--bnm-text-faint);
	transition: transform .18s ease;
}
#BookNowSlide .accordion-header.active .caret-icon {
	transform: rotate(90deg);
}
#BookNowSlide .accordion-content {
	padding: 4px 10px 10px;
	background: var(--bnm-card-bg);
}
/* Flat list instead of alternating-stripe rows -- a thin divider between
   items reads cleaner/more professional than banding every other row a
   different shade, and the hover tint still makes each row scannable.
   Uses a darker tone than --bnm-divider (#f1f5f9) -- that shade all but
   disappears against this list's white row background, so the intended
   divider read as "no divider at all" until darkened here. Rounded to
   match .modern-staff-row's own per-row radius (Select Provider list)
   -- .accordion-content's 10px horizontal padding already insets these
   rows from the card's outer edge, so the hover highlight reads as a
   rounded chip instead of a flush rectangle without needing extra
   padding here. */
#BookNowSlide .service-item {
	border-bottom: 1px solid #e2e8f0;
}
#BookNowSlide .service-item:last-child {
	border-bottom: none;
}
/* A separate, more specific legacy rule --
   "#BookNowSlide .accordion-content .service-item:nth-child(even)" at
   booknowmain.css:1125 -- was still striping alternate rows even after
   removing this file's own (much less specific, and differently
   targeted: odd vs even) attempt at the same thing above. Matching its
   exact selector to neutralize it for good. */
#BookNowSlide .accordion-content .service-item:nth-child(even) {
	background-color: transparent !important;
}
/* Uses the fixed, non-tenant --bnm-sky-soft token instead of a tint of
   --theme-secondary-color -- this tenant's own accent is a near-neutral
   grey, so mixing it into white read as the same flat "every other row
   is grey" look the nth-child stripe used to produce, just triggered by
   :hover instead of unconditionally. A fixed accent hover color reads
   as a deliberate modern touch regardless of how muted a given
   tenant's own brand color is.
   !important AND matching specificity are both required: the
   nth-child(even) neutralizer right above is also !important, so with
   two competing !important declarations specificity is compared same
   as normal -- .accordion-content added here to match its (1 ID, 3
   classes/pseudo) exactly, rather than this rule's plain (1 ID, 2)
   losing that comparison outright regardless of file order. Without
   it, even rows never showed any hover tint at all, only odd ones did. */
#BookNowSlide .accordion-content .service-item:hover {
	background: var(--bnm-sky-soft) !important;
}
#BookNowSlide .service-left {
	flex: 1;
	min-width: 0;
}
#BookNowSlide .service-name {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--bnm-text-body) !important;
	margin-bottom: 2px;
}
/* Relying on --theme-secondary-color alone to read as "this is a link" falls
   apart for any tenant whose brand color happens to be a muted/near-neutral
   tone (this one's is closer to charcoal than an accent color, same as its
   Continue button) -- next to muted price/caption text in the same near-grey
   family, the link all but disappeared. A tinted pill gives it a shape of
   its own instead of relying on hue contrast against the surrounding text;
   text and caret are both inline-flex children of the same centered row so
   they sit on one line, vertically centered as a unit, regardless of the
   icon's own natural baseline. */
#BookNowSlide .service-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: var(--theme-secondary-color) !important;
	background: color-mix(in srgb, var(--theme-secondary-color) 10%, var(--bnm-card-bg));
	padding: 5px 11px 5px 10px;
	border-radius: 999px;
	transition: background-color .12s ease;
}
#BookNowSlide .service-link a:hover {
	background: color-mix(in srgb, var(--theme-secondary-color) 16%, var(--bnm-card-bg));
}
#BookNowSlide .service-link a::after {
	content: "";
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	background-color: currentColor;
	transition: transform .15s ease;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
#BookNowSlide .service-link a:hover::after {
	transform: translateX(2px);
}
#BookNowSlide .service-right {
	display: flex;
	align-items: center;
	gap: 32px;
	/* legacy .service-right (booknowmain.css ~1230) sets padding-right:15px,
	   pushing the checkbox in from the row's edge -- reset it flush right. */
	padding-right: 0 !important;
	flex-shrink: 0;
}
#BookNowSlide .service-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--bnm-text-muted);
}
/* Checkbox -- rebuilt clean rather than patched further. Legacy draws
   TWO separate decorative pseudo-elements of its own regardless of this
   redesign (an unconditional circle at booknowmain.css:1192, and a second
   circle+checkmark pair at booknowmain.css:~2386-2409 from an entirely
   separate old custom-checkbox implementation) -- both neutralized via
   content:none !important below, matching their exact legacy selectors
   so specificity is at least equal, then this block draws the ONE
   checkmark actually used, as a masked SVG rather than text/border
   tricks (those rendered soft/distorted at this size).
   NOTE: .checkbox has display:contents (legacy), so this label is a
   direct flex item of .service-right, not of .checkbox -- a plain
   width doesn't reliably pin its size there (flex-basis/shrink math
   can still collapse it), so flex-basis is set explicitly instead. */
#BookNowSlide .checkbox .checkbox-custom + .checkbox-custom-label::after,
#BookNowSlide .checkbox .checkbox-custom:checked + .checkbox-custom-label::before {
	content: none !important;
}
#BookNowSlide .checkbox .checkbox-custom-label {
	flex: 0 0 20px !important;
	width: 20px;
	height: 20px;
	border-radius: 7px;
	border: 1.5px solid var(--bnm-border);
	background: var(--bnm-card-bg);
	line-height: normal !important;
	display: block !important;
	position: relative;
	transition: background-color .12s ease, border-color .12s ease;
}
#BookNowSlide .checkbox input.checkbox-custom:checked + label.checkbox-custom-label {
	background: var(--theme-secondary-color);
	border-color: var(--theme-secondary-color);
}
#BookNowSlide .checkbox input.checkbox-custom:checked + label.checkbox-custom-label::after {
	content: "" !important;
	position: absolute;
	inset: 2px;
	background-color: var(--theme-buttonfontP-color);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	border: none;
	width: auto;
	height: auto;
	transform: none;
}

/* ===================================================================
   7. Buttons -- .themeButtonFill/.themeButtonEmpty are the two shared
   button skins used by every "Continue"/back/thank-you button across
   all 6 steps (.nextBtn/.backBtn/.thankBtn/.verifyBtn layer additional
   sizing on top of these two skins, unchanged here).
   =================================================================== */
#BookNowSlide .themeButtonFill,
#BookNowSlide .verifyBtn {
	background-color: var(--theme-secondary-color) !important;
	color: var(--theme-buttonfontP-color) !important;
	border: none !important;
	border-radius: 999px !important;
	font-weight: 700;
	transition: filter .15s ease, transform .1s ease;
	box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--theme-secondary-color) 60%, transparent);
	/* min-height:38px explicitly, matching /portal/app's own primary-button
	   convention (.back-to-main-btn { min-height: 38px } in portalhome.css).
	   This currently already computes out to 38px via padding:10px 20px +
	   line-height:18px (booknowmain.css ~2656-2661) -- but that's a
	   coincidence of two legacy numbers, not a guarantee: a different,
	   much larger legacy rule for this same class also exists
	   (booknowmain.css ~469, padding:14px 0 -> ~48px) and is only losing
	   right now on a specificity tie-break (ID+class beats plain class),
	   not because it's been neutralized. Setting min-height directly here
	   makes 38px the actual source of truth instead of relying on that
	   coincidence to keep holding. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	box-sizing: border-box;
}
#BookNowSlide .themeButtonFill:hover,
#BookNowSlide .verifyBtn:hover {
	filter: brightness(1.08);
}
#BookNowSlide .themeButtonFill:active,
#BookNowSlide .verifyBtn:active {
	transform: translateY(1px);
}
/* Chevron after "Continue" (and any other .nextBtn) -- matches the
   arrow used on the breadcrumb/stepper elsewhere in this redesign,
   masked with the button's own font color so it works on any tenant's
   theme automatically. */
#BookNowSlide .nextBtn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
/* processbtnrun()/showrunbtn() (booknow.js) swap the real Continue
   button for a cloned spinner button by setting inline
   style="display:none" on the original while busy -- the !important
   above otherwise beats that inline style unconditionally (!important
   always wins over inline styles regardless of specificity), so the
   original never actually hid during the swap and sat visible right
   next to the spinner clone the whole time. Matches the inline state
   via attribute selector (same technique used for the breadcrumb steps
   and the grey-out Continue button elsewhere in this file) so the
   intended hide still wins specifically when JS asks for it. */
#BookNowSlide .nextBtn[style*="display:none"],
#BookNowSlide .nextBtn[style*="display: none"] {
	display: none !important;
}
/* A full arrow (shaft + head), not just a chevron/caret -- matches the
   button-icon convention used in /portal/app rather than the bare ">"
   used for the breadcrumb/stepper elsewhere in this redesign. */
#BookNowSlide .nextBtn::after {
	content: "";
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
#BookNowSlide .themeButtonEmpty {
	background: var(--bnm-card-bg) !important;
	color: var(--theme-secondary-color) !important;
	border: 1.5px solid var(--theme-secondary-color) !important;
	border-radius: 999px !important;
	font-weight: 700;
	transition: background-color .15s ease, color .15s ease;
}
#BookNowSlide .themeButtonEmpty:hover {
	background-color: var(--theme-secondary-color) !important;
	color: var(--theme-buttonfontP-color) !important;
}
#BookNowSlide .bottomBtn .backBtn:hover {
	border-color: var(--theme-secondary-color) !important;
	background-color: var(--theme-secondary-color) !important;
}
#BookNowSlide .bottomBtn .nextBtn {
	background: var(--theme-secondary-color) !important;
	border-radius: 999px !important;
}
#BookNowSlide .action-link,
#BookNowSlide .linkclick,
#BookNowSlide .cclink,
#BookNowSlide #ccdeclineerror .decline-action-link {
	color: var(--theme-secondary-color) !important;
	font-weight: 700 !important;
}
/* Under 480px, every bottom action button (the persistent full-page Continue,
   and each step's own .floatBtnPos-wrapped Continue/Verify/Back button) goes
   full-width and centered instead of hugging the right edge -- narrow phones
   don't have room to spare for a right-aligned button floating in empty
   space, and a full-width tap target is easier to hit besides.
   #continueBtn1Full/#continueBtn1Full_busy are pinned via booknowmain.css's
   own #BookNowSlide #continueBtn1Full{position:absolute;right:0;bottom:10px}
   (ID selector -- beats a plain .fullpagecontinueBtn class override
   regardless of source order), which pulls them out of the flex container
   entirely, so .fullpagecontinue's justify-content never had anything to
   act on; resetting position back to static/in-flow here is what actually
   lets the centering take effect. Likewise .fullpagecontinueBtn{max-width:
   250px} (booknowmain.css) is a separate property from width, so the
   earlier width:100% pass here never touched it -- both need resetting
   together. */
@media (max-width: 480px) {
	#BookNowSlide .fullpagecontinue,
	#BookNowSlide .floatBtnPos {
		justify-content: center !important;
	}
	#BookNowSlide #continueBtn1Full,
	#BookNowSlide #continueBtn1Full_busy {
		position: static !important;
		right: auto !important;
		bottom: auto !important;
	}
	#BookNowSlide .fullpagecontinueBtn,
	#BookNowSlide .floatBtnPos .nextBtn,
	#BookNowSlide .floatBtnPos .backBtn,
	#BookNowSlide .floatBtnPos .verifyBtn {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}
	#BookNowSlide .bottomBtn.serseldivBtn .floatBtnPos {
		gap: 10px;
	}
}

/* ===================================================================
   8. Modals -- service-detail popup + selected-services summary popup
   (#serviceInfoModal / #serviceInfoSelModal in bn/index.cfm and
   dsp_servicechecklist.cfm share this same .modal-*BN chrome)
   =================================================================== */
/* booknowmain.css's own .modal-contentBN carries min-height:500px and no
   max-height at all -- with enough service-description text, the box just
   grows past the fixed-position .modal-overlayBN backdrop's own viewport
   height and spills off the bottom of the screen entirely (legacy's
   .modal-bodyBN{overflow-y:hidden} doesn't create a scrollbar, it just
   clips, but only *if* the box itself were height-constrained -- since
   it isn't, there's nothing to clip against). Capping max-height here
   (same calc(var(--vh,1vh)*100)-with-dvh-enhancement pattern as
   .appointmentBox elsewhere in this file) and letting .modal-bodyBN alone
   scroll internally keeps the dialog from ever exceeding the card's own
   footprint, matching every other panel in this redesign instead of being
   the one element that can grow past the viewport. */
/* .modal-overlayBN's own background-color (booknowmain.css) is
   rgba(0,0,0,0) -- a fully transparent backdrop, so nothing dims the page
   behind the card and the card itself had no border of its own (box-shadow
   alone), leaving no visible edge separating it from the page behind it.
   Same scrim treatment as #bookingIntroOverlay elsewhere in this file, for
   the same reason. */
#BookNowSlide .modal-overlayBN {
	background: rgba(15, 23, 42, .45) !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
#BookNowSlide .modal-contentBN {
	border-radius: 20px;
	border: 1px solid var(--bnm-border);
	box-shadow: 0 24px 60px -20px rgba(20, 38, 64, .4);
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: calc((var(--vh, 1vh) * 100) - 40px);
	max-height: calc(100dvh - 40px);
	max-width: min(560px, 92vw);
	overflow: hidden;
}
#BookNowSlide .modal-headerBN {
	padding: 18px 22px;
	border-bottom: 1px solid var(--bnm-divider);
	flex-shrink: 0;
}
#BookNowSlide .modal-titleBN {
	font-size: 16px;
	font-weight: 800;
	color: var(--bnm-text-h) !important;
}
#BookNowSlide .modal-closeBN {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bnm-divider);
	color: var(--bnm-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	transition: background .12s ease, color .12s ease;
}
#BookNowSlide .modal-closeBN:hover {
	background: var(--bnm-border);
	color: var(--bnm-text-h);
}
#BookNowSlide .modal-bodyBN {
	/* Right padding bumped from 22px to 27px (+5px) -- the default OS
	   scrollbar this was rendering with sat flush against the rounded
	   corner with no styling and no gap from the text beside it; the extra
	   padding plus the thin themed scrollbar below fix both at once. */
	padding: 18px 27px 22px 22px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--bnm-text-body);
	/* flex:1 1 auto alone isn't enough for a flex child to actually scroll --
	   without min-height:0, it refuses to shrink below its content's natural
	   height (the default flex-basis:auto behavior), so overflow-y:auto would
	   never actually trigger no matter how tall the content got. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--bnm-border) transparent;
}
#BookNowSlide .modal-bodyBN::-webkit-scrollbar {
	width: 6px;
}
#BookNowSlide .modal-bodyBN::-webkit-scrollbar-track {
	background: transparent;
}
#BookNowSlide .modal-bodyBN::-webkit-scrollbar-thumb {
	background: var(--bnm-border);
	border-radius: 999px;
}
/* Service-info modal content (dsp_serviceinfo.cfm) */
#BookNowSlide .serdetails {
	display: inline-flex;
	align-items: center;
	background: color-mix(in srgb, var(--theme-secondary-color) 12%, var(--bnm-card-bg)) !important;
	color: var(--theme-secondary-color) !important;
	border: none;
	border-radius: 999px !important;
	padding: 6px 16px !important;
	height: auto !important;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 14px !important;
}
#BookNowSlide .service-nameBN {
	color: inherit;
}
#BookNowSlide .service-descriptionBN {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--bnm-text-body);
	/* .modal-bodyBN's own padding-bottom stops at the edge of its scrollable
	   area, not the end of this text -- for long descriptions the last line
	   still lands flush against the bottom of the (now scrolling) modal with
	   nothing of its own to stop there, so this needs its own breathing room
	   regardless of how tall the description turns out to be. */
	padding-bottom: 24px;
}
/* Selected-services summary popup (dsp_selectedservices.cfm) */
#BookNowSlide .serseldesc {
	font-size: 14px;
	color: var(--bnm-text-muted);
	margin-bottom: 14px;
	line-height: 1.55;
}
#BookNowSlide .serselcount {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--theme-secondary-color);
	background: color-mix(in srgb, var(--theme-secondary-color) 10%, var(--bnm-card-bg));
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}
/* Flat tinted row (--bnm-page-bg), not a bordered/shadowed white card --
   matches the tile convention used for the Booking Summary/Appointment
   Details tiles elsewhere in this file instead of looking like a
   separate, older component. */
#BookNowSlide .selectedBtn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 10px 14px;
	border-radius: 12px;
	background: var(--bnm-page-bg);
	margin-bottom: 8px;
	transition: background .12s ease;
}
#BookNowSlide .selectedBtn:hover {
	background: var(--bnm-divider);
}
/* Rounded square, not a circle -- matches the .row-icon chip shape used
   for every other per-item marker in this redesign (service rows on the
   Select Service(s) step, summary rows, etc.), rather than a differently
   shaped badge unique to this one list. */
#BookNowSlide .selectedBtn-index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 8px;
	background: color-mix(in srgb, var(--theme-secondary-color) 14%, var(--bnm-card-bg));
	color: var(--theme-secondary-color);
	font-size: 11.5px;
	font-weight: 800;
}
#BookNowSlide .serselshow {
	flex: 1 1 auto;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--bnm-text-body);
}
/* A real circular hit target with its own hover background, instead of
   just a bare icon glyph that only changed color on hover -- easier to
   see it's a button and easier to hit on touch. */
#BookNowSlide .removeBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	color: var(--bnm-text-faint);
	background: transparent;
	transition: background .12s ease, color .12s ease;
}
#BookNowSlide .removeBtn:hover {
	background: color-mix(in srgb, #dc2626 12%, transparent);
	color: #b91c1c;
}
/* Shown on the specific row's remove button while removeServiceAndUpdate()'s
   request is in flight -- reuses the same spin keyframe as the verification-
   link waiting spinner elsewhere in this file rather than defining a second,
   identical one. */
#BookNowSlide .removeBtn.removeBtn-loading {
	position: relative;
	pointer-events: none;
}
#BookNowSlide .removeBtn.removeBtn-loading i {
	visibility: hidden;
}
#BookNowSlide .removeBtn.removeBtn-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	border: 2px solid var(--bnm-border);
	border-top-color: var(--theme-secondary-color);
	animation: bnmLinkSpin .8s linear infinite;
}
#BookNowSlide .fieldText.noservices {
	color: var(--bnm-text-faint);
	text-align: center;
	padding: 20px 0;
}

/* ===================================================================
   9. Select Provider (dsp_staffroom.cfm) + the read-only provider
   recap header re-used on Select Time (dsp_servicecalendar.cfm) --
   both already share the same avatar-photo/avatar-fallback markup.
   =================================================================== */
#BookNowSlide .modern-staff-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
#BookNowSlide .modern-staff-row,
#BookNowSlide .modern-provider-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px;
	border-radius: 12px;
}
/* background/border/box-shadow explicitly cleared here: this rule
   never touched those three properties before, so legacy's own #f8f9fa
   background + #e5e7eb border + drop shadow (booknowmain.css ~836,
   same selector/specificity but declaring properties this rule didn't)
   was left showing on every row uncontested, giving each one its own
   grey boxed-card look instead of a clean list. Divider color matches
   .service-item's own darkened value too -- --bnm-divider (#f1f5f9) is
   barely visible against a white row. Alternating rows get a soft tint
   of the tenant's own accent (below) -- unlike .service-item's flat
   divider-only treatment, the provider list keeps a striped look here
   by request, just with each stripe rounded to match the rest of this
   redesign instead of edge-to-edge like the legacy boxed rows were. */
#BookNowSlide .modern-staff-row {
	cursor: pointer;
	transition: background .12s ease;
	background: none;
	border: none;
	box-shadow: none;
	border-bottom: 1px solid #e2e8f0;
	border-radius: 10px;
}
#BookNowSlide .modern-staff-row:nth-child(even) {
	background: color-mix(in srgb, var(--theme-secondary-color) 6%, var(--bnm-card-bg));
}
#BookNowSlide .modern-staff-row:last-child {
	border-bottom: none;
}
/* Matches .accordion-header.active/:hover's own background (the
   service-category title bar's expanded look) instead of a
   theme-accent tint, for consistency between the two lists. */
#BookNowSlide .modern-staff-row:hover {
	background: var(--bnm-divider);
}
/* border/box-shadow explicitly cleared, same issue .modern-staff-row
   had -- legacy's own #dddddd border + drop shadow (booknowmain.css
   ~1045) was never contested here (this rule only ever set
   background/margin), so it kept showing through underneath the new
   background color. */
#BookNowSlide .modern-provider-row {
	background: var(--bnm-page-bg);
	border: none;
	box-shadow: none;
	margin-bottom: 18px;
}
#BookNowSlide .modern-staff-left,
#BookNowSlide .modern-provider-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}
#BookNowSlide .avatar-photo,
#BookNowSlide .avatar-fallback {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bnm-slate-soft);
}
#BookNowSlide .avatar-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#BookNowSlide .avatar-fallback span {
	font-size: 14px;
	font-weight: 800;
	color: var(--bnm-slate);
}
#BookNowSlide .provider-name {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bnm-text-body);
}
/* font-size explicitly matched to the accordion header's own caret
   (11px) -- legacy's base .caret-icon rule (booknowmain.css ~887) sets
   16px, and nothing here overrode it before, so this one stayed
   noticeably larger than every other caret in the redesign. */
#BookNowSlide .modern-staff-row .caret-icon {
	color: var(--bnm-text-faint);
	font-size: 11px;
	flex-shrink: 0;
}

/* ===================================================================
   10. Select Time -- calendar (dsp_servicecalendar.cfm) + time-slot
   accordion (dsp_availabletimes.cfm / cfc/booknow.cfc). day-cell/
   nav-arrow classes are populated and toggled entirely by
   createcal() in booknow.js, so only cosmetic properties are set;
   .selected/.today-highlight/.date-closed/.disabled class toggling
   itself is untouched.
   =================================================================== */
#BookNowSlide .calendar-layout {
	display: grid;
	/* 230px read as visibly cramped/"smushed" against the roomier time
	   column next to it -- widened so the calendar gets a proportionate
	   share of the available width instead of a small fixed sliver. */
	grid-template-columns: minmax(300px, 360px) 1fr;
	gap: 24px;
	align-items: start;
}
#BookNowSlide .month-calendar {
	border: 1px solid var(--bnm-border);
	border-radius: 14px;
	padding: 14px;
	position: relative;
}
/* height matched to .nav-arrow's own 32px + flex-centered, and
   padding-top zeroed (legacy's own .calendar-header sets padding-top:
   12px, booknowmain.css ~894) -- previously the month/year text sat
   ~18px below the nav arrows' own vertical center instead of flush on
   the same line with them, since the arrows (absolutely positioned,
   top:5px) and this text (in normal flow, pushed down by that 12px
   padding) had no shared reference point keeping them aligned. */
#BookNowSlide .calendar-header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding-top: 0;
	text-align: center;
	font-weight: 800;
	font-size: 14px;
	color: var(--bnm-text-h);
	margin-bottom: 12px;
}
/* top:14px, matching .month-calendar's own padding -- offsets for an
   absolutely positioned element are relative to its containing block's
   padding edge, so top:0 landed flush with the *border* edge instead,
   sitting a further 14px above .calendar-header (which does start at
   the padding edge, being a normal-flow element). Matching that 14px
   here (rather than legacy's original top:5px) lines the two up. */
#BookNowSlide .nav-arrow {
	position: absolute;
	top: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bnm-divider);
	color: var(--bnm-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	padding: 0;
	cursor: pointer;
}
/* Replaces the Font Awesome fa-chevron-left/right glyph (a leftover
   from before this redesign, visually inconsistent with every other
   icon here) with the same SVG mask-icon technique used for the
   arrow/chevron icons elsewhere -- masked with currentColor so it
   follows :hover/.disabled's color automatically. The <i> itself is
   collapsed to zero size rather than removed from markup. */
/* display:none rather than fighting Font Awesome's own rendering -- FA
   icons draw their glyph via a ::before pseudo-element (unicode content
   at a given font-size), not the <i> element's own box, so masking the
   <i> directly competed with that pseudo-element's own generated
   content box and produced an inconsistent width (4px instead of the
   9px this set). Hiding the <i> outright and masking the button itself
   avoids that conflict entirely. */
#BookNowSlide .nav-arrow i {
	display: none;
}
#BookNowSlide .nav-arrow::before {
	content: "";
	/* flex:0 0 9px, not just width:9px -- .nav-arrow is a flex container
	   (align-items/justify-content:center), and a flex item's width
	   alone is only a hint the flex algorithm can still shrink from;
	   same fix already needed for the checkbox icons earlier in this
	   file. Without it this rendered at ~4px wide instead of 9. */
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
#BookNowSlide .nav-arrow.prev-arrow::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}
#BookNowSlide .nav-arrow.next-arrow::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}
#BookNowSlide .nav-arrow:hover {
	background: var(--bnm-border);
}
#BookNowSlide .nav-arrow.disabled {
	opacity: .4;
	cursor: not-allowed;
}
#BookNowSlide .calendar-days-grid {
	display: grid;
	/* minmax(0,1fr), not plain 1fr -- grid tracks default to a min
	   width of their content's min-content size, which was overflowing
	   .month-calendar's fixed 230px column (Saturday was clipped off
	   entirely). minmax(0,...) lets columns shrink below that. */
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 3px;
	text-align: center;
}
/* #calendarDays (booknowmain.css:1064) is an ID selector -- it beats
   any class-based rule above on specificity alone regardless of load
   order, so it has to be matched directly here (with !important,
   since this is the only way to reliably win against an id selector
   without also chasing its specificity everywhere else it might be
   referenced later). */
#BookNowSlide #calendarDays {
	grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
	gap: 3px !important;
}
#BookNowSlide .day-name-header {
	background: transparent !important;
	color: var(--bnm-text-faint) !important;
	font-size: 9.5px;
	letter-spacing: .03em;
}
#BookNowSlide .day-cell {
	/* Legacy .day-cell (booknowmain.css:937) sets width:32px + margin:4px
	   (effectively 40px per column) -- reset both so the grid track's
	   own width (via minmax above) is what actually sizes the cell.
	   height:auto is what actually makes aspect-ratio work -- legacy
	   also sets a fixed height:32px, and aspect-ratio only computes a
	   dimension left auto; with height explicitly pinned at 32px while
	   the grid-driven width varies (e.g. ~39.5px in a wider calendar),
	   the two fights produced an oval instead of a circle. */
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
	color: var(--bnm-text-h);
	cursor: pointer;
	/* Containing block for .avail-dot below. */
	position: relative;
	/* Available/selected/today below add a border that closed days don't --
	   border-box keeps that inset within the same 100%-of-track box instead
	   of growing the circle past it (no box-sizing reset exists upstream
	   for this element, so it would otherwise default to content-box and
	   overflow its grid column by the border's width). */
	box-sizing: border-box;
}
/* Every bookable day gets a real outline + white fill, not just a barely-
   there background tint (a previous pass tried --bnm-page-bg alone, which
   read as no different from a closed day at a glance) -- closed days
   below stay flat/borderless with faint text, so the two states read as
   clearly different chip TREATMENTS, not just a subtle color shift.
   .selected/.today-highlight still win on specificity + !important. */
#BookNowSlide .day-cell:not(.date-closed) {
	background-color: var(--bnm-card-bg);
	border: 1.5px solid var(--bnm-border);
}
#BookNowSlide .day-cell.selected {
	background-color: var(--theme-secondary-color) !important;
	border: 1.5px solid var(--theme-secondary-color) !important;
	color: var(--theme-buttonfontP-color) !important;
}
#BookNowSlide .day-cell.today-highlight {
	border: 2px solid var(--theme-secondary-color) !important;
	color: var(--theme-secondary-color) !important;
	background-color: var(--bnm-card-bg) !important;
}
#BookNowSlide .day-cell.date-closed {
	color: var(--bnm-text-faint) !important;
	background: transparent !important;
	border-color: transparent !important;
}
#BookNowSlide .day-cell.date-weekend {
	color: var(--bnm-text-muted) !important;
}
#BookNowSlide .day-cell:not(.date-closed):not(.selected):hover {
	background-color: color-mix(in srgb, var(--theme-secondary-color) 12%, transparent) !important;
	color: var(--bnm-text-h) !important;
}
/* Availability dot -- createcal() (booknow.js) adds .avail-good/
   .avail-limited plus this dot to every open day, based on the actual
   open-slot count bn/cfc/booknow.cfc's StaffBlocked()/RoomsBlocked() now
   return per day, so a client can spot a wide-open day at a glance
   instead of clicking around the grid to find one. */
#BookNowSlide .day-cell .avail-dot {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
}
#BookNowSlide .day-cell.avail-good .avail-dot {
	background: var(--bnm-teal);
}
#BookNowSlide .day-cell.avail-limited .avail-dot {
	background: var(--bnm-amber);
}
#BookNowSlide .cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 10px 4px 0;
}
#BookNowSlide .cal-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--bnm-text-muted);
}
#BookNowSlide .cal-legend-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}
#BookNowSlide .cal-legend-dot--good {
	background: var(--bnm-teal);
}
#BookNowSlide .cal-legend-dot--limited {
	background: var(--bnm-amber);
}
#BookNowSlide .selected-date-wrapper,
#BookNowSlide .selected-date-box {
	background-color: var(--theme-secondary-color) !important;
	color: var(--theme-buttonfontP-color) !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 9px 16px !important;
	font-weight: 700;
	text-align: left;
}
#BookNowSlide .selected-date-label,
#BookNowSlide .selected-date-label strong,
#BookNowSlide #seldate {
	color: inherit !important;
}
/* Morning/Afternoon accordion -- same visual language as the Step 1
   service accordion, reusing .accordion-section's card shell */
#BookNowSlide .time-group-container {
	border: 1px solid var(--bnm-border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bnm-card-bg);
	margin-bottom: 10px;
}
/* .time1 .accordion-headerTimes, not plain .accordion-headerTimes --
   legacy's own rule for this exact selector (booknowmain.css ~775) sets
   background-color:#f3f3f3 + a #ddd border + border-radius:6px, and its
   two-class selector out-specifies this rule's one class regardless of
   file order -- so every row (collapsed or expanded) rendered with that
   same flat grey showing through underneath, making the intended
   collapsed/expanded distinction invisible (both looked grey). */
#BookNowSlide .time1 .accordion-headerTimes {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	cursor: pointer;
	background: var(--bnm-card-bg);
	border: none;
	border-radius: 0;
	color: inherit;
	transition: background .12s ease;
}
/* Expanded/hover state uses a real accent tint (matching the
   sky-soft "modern accent" used for .service-item's hover) instead of
   flat grey -- legacy's own .active rule (booknowmain.css ~800,
   background:#eaeaea) is equally specific to this and needs matching
   here too, not just the collapsed state above. */
#BookNowSlide .time1 .accordion-headerTimes:hover,
#BookNowSlide .time1 .accordion-headerTimes.active {
	background: var(--bnm-sky-soft);
}
#BookNowSlide .accordion-headerTimes .group-label {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--bnm-text-h);
}
#BookNowSlide .accordion-headerTimes .time-range-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--bnm-text-faint);
	background: var(--bnm-divider);
	padding: 2px 9px;
	border-radius: 999px;
	margin-left: auto;
	margin-right: 20px;
}
/* font-size explicitly matched to every other caret in this redesign
   (11px) -- legacy's base .caret-icon rule (booknowmain.css ~887) sets
   16px, and this specific one never overrode it before, so it stayed
   noticeably larger than the accordion header/provider list carets. */
#BookNowSlide .accordion-headerTimes .caret-icon {
	color: var(--bnm-text-faint);
	font-size: 11px;
	transition: transform .18s ease;
}
#BookNowSlide .accordion-headerTimes.active .caret-icon {
	transform: rotate(90deg);
}
#BookNowSlide .time-group-content {
	padding: 4px 10px 10px;
	background: var(--bnm-card-bg);
}
/* .time1 .time-group (booknowmain.css ~590), not plain .time-group --
   legacy's own rule for this exact selector sets flex-direction:column
   plus align-items:center, and its two-class selector out-specifies
   this rule's one class regardless of file order, so the row layout
   below was never actually winning: every time slot rendered as its
   own full-width row, stacked vertically, instead of wrapping
   left-to-right. !important since legacy's own width:100% on .time-btn
   (further down) reinforced that single-column look too.
   Grid, not flex-wrap -- flex-wrap sizes each row's buttons off that
   row's own content (min-width as a floor, not a fixed size), so
   "9:00 AM" and "10:15 AM" could end up very slightly different widths
   and drift out of vertical alignment across rows. Grid columns are
   shared across every row by construction, so every button in a given
   column is exactly as wide as the widest button in that column. */
#BookNowSlide .time1 .time-group {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important;
	align-items: stretch !important;
	gap: 8px;
}
/* min-width:0 -- legacy's own min-width:130px on this exact selector
   (booknowmain.css ~609) otherwise applies unopposed (this rule never
   declared min-width itself, so there was no property-level conflict
   for the cascade to resolve): every button held a 130px floor
   regardless of its actual grid column width, so 5 columns' worth of
   130px-minimum buttons overflowed straight past the grid/container's
   right edge instead of shrinking to fit. */
#BookNowSlide .time1 .time-btn {
	width: 100%;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background-color: var(--bnm-card-bg) !important;
	color: var(--bnm-text-h) !important;
	border: 1px solid var(--bnm-border) !important;
	border-radius: 10px !important;
	padding: 9px 12px;
	font-size: 13.5px;
	font-weight: 700;
	box-shadow: none;
}
/* Small clock glyph -- same icon/mask-image already used for
   .row-icon--time elsewhere in this file, at rest state faint (matching
   the other muted-until-relevant icon treatments here) and brightening
   on hover/picked so the picked slot's icon reads as "lit up" alongside
   its color change. */
#BookNowSlide .time1 .time-btn::before {
	content: "";
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background-color: currentColor;
	opacity: .45;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
/* Same fix as .service-item:hover -- mixing this tenant's own (grey)
   accent into white rendered as plain flat grey, reading as leftover
   unstyled legacy CSS rather than a deliberate hover state. Fixed,
   non-tenant sky tokens instead, consistent with that same fix. */
#BookNowSlide .time-btn:hover {
	filter: none;
	background-color: var(--bnm-sky-soft) !important;
	border-color: var(--bnm-sky) !important;
	color: var(--bnm-sky) !important;
}
#BookNowSlide .time-btn:hover::before {
	opacity: 1;
}
#BookNowSlide .currSelectedTime,
#BookNowSlide .time-btn.themeButtonFill {
	background-color: var(--theme-secondary-color) !important;
	border-color: var(--theme-secondary-color) !important;
	color: var(--theme-buttonfontP-color) !important;
}
#BookNowSlide .currSelectedTime::before,
#BookNowSlide .time-btn.themeButtonFill::before {
	opacity: 1;
}
@media (max-width: 767px) {
	#BookNowSlide .calendar-layout {
		grid-template-columns: 1fr;
	}
	/* Widened + centered: single-column .calendar-layout's track is the
	   full available width, but .month-calendar's own max-width (360px
	   on desktop) capped it far narrower than that track once stacked
	   here, and with no centering it sat flush at the track's left edge
	   instead -- a big empty gap on the right that read as "smushed."
	   margin:0 auto centers it regardless of the grid's own item
	   alignment settings. */
	#BookNowSlide .month-calendar {
		max-width: 480px;
		margin: 0 auto;
	}
	/* height:auto/overflow:visible -- legacy's own #selavailSer rule
	   (booknowmain.css ~2821) fixes this to
	   calc((var(--vh,1vh)*100) - 450px) with overflow:auto regardless of
	   how much content is actually in it, producing a scrollbar with
	   ~100px of empty scroll room even when the visible content (e.g.
	   one collapsed category) doesn't come close to needing it. This
	   list's actual scrolling is already owned by #bookInfoDivWrapper
	   (see the flex/scroll-owner rules earlier in this file), so this
	   element doesn't need its own independent scroll region at all. */
	#BookNowSlide #selavailSer {
		height: auto !important;
		overflow: visible !important;
	}
}

/* ===================================================================
   11. Shared form-field look -- Client Information (dsp_booknowstep2),
   Credit Card (dsp_booknowstep4), and any other .form-control text
   input across the flow.
   =================================================================== */
#BookNowSlide .appointmentInfo {
	font-size: 14.5px;
	color: var(--bnm-text-muted);
	line-height: 1.6;
}
/* :not(.label):not(.form-label) -- otherwise this tied on specificity
   with the section-5 rule for those two classes (both equal-specificity
   plus !important, so whichever appeared later in this file was winning
   by accident) and section-heading labels like "Select a Location For
   Service" were rendering as bold-dark input-field labels instead of the
   small uppercase-faint style meant for them. */
#BookNowSlide .form-group label:not(.label):not(.form-label),
#BookNowSlide .input-group label:not(.label):not(.form-label) {
	display: block;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	letter-spacing: .03em;
	color: var(--bnm-text-h) !important;
	margin-bottom: 7px !important;
	text-transform: none;
}
#BookNowSlide .form-group label span,
#BookNowSlide .requiredmess {
	color: #c0432f;
	font-size: 11px;
	font-style: normal;
}
/* .requiredmess is a bare inline <span> whose only wrapper (<p>) has
   margin:0 (booknowmain.css's blanket #BookNowSlide p{margin:0}) -- with
   no space of its own, "* Required fields" sat almost touching the first
   field label directly below it. display:inline-block is what lets a
   margin on the span itself actually open up that gap. */
#BookNowSlide .requiredmess {
	display: inline-block;
	margin-bottom: 14px;
}
#BookNowSlide input[type="text"].form-control,
#BookNowSlide input[type="email"].form-control,
#BookNowSlide input[type="tel"].form-control,
#BookNowSlide input#confirmCode.form-control {
	width: 100%;
	/* height:40px to match every select on this form -- no vertical padding
	   needed alongside it since a native <input>'s text already centers
	   vertically within whatever height it's given, unlike a <select> or
	   button, which is why this doesn't need the same line-height trick. */
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--bnm-border) !important;
	border-radius: 12px !important;
	font-size: 15px;
	color: var(--bnm-text-h);
	background-color: var(--bnm-card-bg) !important;
	box-shadow: var(--bnm-shadow-card);
	transition: border-color .15s ease, box-shadow .15s ease;
}
#BookNowSlide input[type="text"].form-control:focus,
#BookNowSlide input[type="email"].form-control:focus,
#BookNowSlide input[type="tel"].form-control:focus,
#BookNowSlide input#confirmCode.form-control:focus {
	outline: none !important;
	border-color: var(--theme-secondary-color) !important;
	/* !important required: mdb.min.css ships a bare ".form-control:focus{box-shadow:none!important}"
	   reset -- !important beats any non-!important rule regardless of specificity/ID count, so
	   without matching it here this focus ring never rendered at all (reported: clicking into a
	   field showed no outline/border change). */
	box-shadow: var(--bnm-focus-ring) !important;
}
#BookNowSlide input[type="text"]::placeholder,
#BookNowSlide input[type="email"]::placeholder,
#BookNowSlide input[type="tel"]::placeholder {
	color: var(--bnm-text-faint);
}
/* input[type=...].form-control.is-invalid variants included alongside the plain
   .form-control.is-invalid selector: the base (non-invalid) input rule in this
   same file is #BookNowSlide input[type="text"].form-control (etc.) -- ID+2
   class-level+1 tag -- which out-specifies a bare #BookNowSlide .form-control
   .is-invalid (ID+2 class-level, no tag) despite both carrying !important, so
   its own "border: 1px solid var(--bnm-border) !important" shorthand was still
   winning the border-color sub-property here even while this field showed
   "Please enter your first name." Matching that same tag+attribute pattern
   (plus the extra .is-invalid class) gives this rule the higher specificity
   instead. */
#BookNowSlide .form-control.is-invalid,
#BookNowSlide .was-validated .form-control:invalid,
#BookNowSlide input[type="text"].form-control.is-invalid,
#BookNowSlide input[type="email"].form-control.is-invalid,
#BookNowSlide input[type="tel"].form-control.is-invalid {
	border-color: #dc4c64 !important;
}
#BookNowSlide .form-messageerr.error {
	background: #fef2f2;
	border-left: 4px solid #dc4c64;
	color: #991b1b;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13.5px;
	margin-bottom: 14px;
}
#BookNowSlide .bottomBtn.serseldivBtn {
	margin-top: 20px;
}
#BookNowSlide .floatBtnPos {
	float: none;
	display: flex;
	justify-content: flex-end;
}
/* Under 767px, First/Last/Email/Phone stack into 4 separate lines instead
   of the 2x2 grid desktop gets (Bootstrap's .col-md-6 becomes 100% width
   below the md breakpoint). A previous pass tried shrinking that stacked
   gap with a flat -20px margin-top -- fragile, since it assumed a fixed
   ambient total from Bootstrap's .form-group margin-bottom + the row's
   own spacing. Rendered inside a host page's own popup/panel chrome
   (BNType > 0), that ambient total measures out smaller than assumed
   here, so -20px overshot past 0 into overlapping the field above
   instead of just tightening the gap. Zeroing the ambient margin-bottom
   and setting one explicit, positive gap instead removes that guesswork
   -- there's a single source of spacing to reason about, not several
   stacked assumptions that can drift apart per context. */
@media (max-width: 767px) {
	#BookNowSlide #clientdemographicsDiv .form-group {
		margin-bottom: 0;
	}
	#BookNowSlide #clientdemographicsDiv .form-group:not(:first-child) {
		margin-top: 16px;
	}
}

/* ===================================================================
   12. Credit Card Information (dsp_booknowstep4.cfm) + the identical
   deposit block reused verbatim on dsp_booknowstep5.cfm
   =================================================================== */
#BookNowSlide .cc-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--bnm-text-h);
	margin-bottom: 8px;
}
#BookNowSlide .cc-description {
	font-size: 14.5px;
	color: var(--bnm-text-muted);
	line-height: 1.6;
}
#BookNowSlide .showbold {
	font-weight: 700;
	color: var(--bnm-text-h);
}
#BookNowSlide .cc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}
#BookNowSlide .cc-grid .span-2 {
	grid-column: 1 / -1;
}
/* #bookInfoDivCC #BookNowSlide's own .form-row--split (booknowstep4.css)
   sets display:grid;grid-template-columns:1fr 1fr -- 2 ID selectors beats
   this rule's 1 ID + 3 classes regardless of file order, so the
   expiration wrapper was staying a 2-column grid (MM and YY each
   stretched/positioned across a wide half-width track) instead of the
   tight flex row below. Matching that same #bookInfoDivCC id is what
   lets flex actually win here. */
#BookNowSlide #bookInfoDivCC .form-group--split .form-row--split.expiration,
#BookNowSlide .form-group--split .form-row--split.expiration {
	display: flex;
	gap: 12px;
}
/* Sized to match the other paired fields (City/Postal, First/Last Name) instead
   of the cramped 64px box this used to be -- MM/YY don't need to fill the row
   the way those do, but they shouldn't read as noticeably smaller/lower-effort
   than every other input on this same form either. */
#BookNowSlide #bookInfoDivCC .form-row--split.expiration input.form-control,
#BookNowSlide .form-row--split.expiration input.form-control {
	width: 100px;
	flex: 0 0 auto;
	text-align: center;
}
#BookNowSlide .deposit-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#BookNowSlide .deposit-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px !important;
	background: var(--bnm-page-bg);
	border-radius: 10px;
}
#BookNowSlide .deposit-item .name {
	font-weight: 600;
	color: var(--bnm-text-body);
	font-size: 14px;
}
#BookNowSlide .deposit-item .amount {
	font-size: 14px;
	color: var(--bnm-text-muted);
}
#BookNowSlide .cc-security-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bnm-text-faint);
}
#BookNowSlide .cc-security-note::before {
	content: "";
	width: 15px;
	height: 15px;
	margin-top: 1px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
@media (max-width: 600px) {
	#BookNowSlide .cc-grid {
		grid-template-columns: 1fr;
	}
}

/* ===================================================================
   13. Verify Your Information (dsp_booknowstep3.cfm)
   =================================================================== */
#BookNowSlide .twofadescription,
#BookNowSlide .section-titleVerify {
	color: var(--bnm-text-muted);
	font-size: 14.5px;
}
/* NOTE: .section-title is reused for two different roles in the real
   markup -- a small uppercase label as <h5> in dsp_booknowstep3.cfm
   ("Send verification code via:") and the big screen heading as <h4>
   in dsp_booknowstep5.cfm ("Booking Summary"). Scoped by tag so each
   gets the right treatment instead of one fighting the other. */
#BookNowSlide h5.section-title {
	font-size: 12.5px !important;
	font-weight: 800 !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--bnm-text-faint) !important;
}
#BookNowSlide h4.section-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--bnm-text-h);
	margin-bottom: 8px;
}
#BookNowSlide .send-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}
#BookNowSlide #sendCodeload.verify-options-wide {
	width: min(420px, 100%);
}
#BookNowSlide .option-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
	border: 1px solid var(--bnm-border);
	border-radius: 12px;
	background: var(--bnm-card-bg);
	font-weight: 700;
	font-size: 15px;
	color: var(--bnm-text-h) !important;
	overflow-wrap: anywhere;
	word-break: break-word;
	transition: border-color .12s ease, background .12s ease;
}
#BookNowSlide .option-link:hover {
	border-color: var(--theme-secondary-color);
	background: color-mix(in srgb, var(--theme-secondary-color) 8%, var(--bnm-card-bg));
}
#BookNowSlide .option-link img {
	width: 22px !important;
	height: 22px;
	margin-right: 0 !important;
	border-radius: 50%;
	padding: 5px;
	background: var(--bnm-slate-soft);
	object-fit: contain;
}
#BookNowSlide .code-input-wrapper {
	margin-top: 16px;
}
#BookNowSlide .verifycode {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
#BookNowSlide #confirmCode.form-control {
	max-width: 210px;
}
#BookNowSlide .form-message.twofacomplete {
	background: #f0fdf4;
	border-left: 4px solid #16a34a;
	color: #166534;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13.5px;
}
#BookNowSlide .form-messageerr.twofacomplete {
	background: #fef2f2;
	border-left: 4px solid #dc4c64;
	color: #991b1b;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13.5px;
}

/* ===================================================================
   14. Booking Summary (dsp_booknowstep5.cfm) -- .summary-row/.label/
   .value is the same structure reused by dsp_selectedservices.cfm's
   mini date/time/staff recap, so this styles both from one place.
   =================================================================== */
#BookNowSlide .booking-summary-section {
	font-family: inherit;
	color: inherit;
}
/* The plain confirmation paragraph under the "Booking Summary" heading
   was rendering in legacy Arial/#333 (booknowstep5.css's blanket
   .booking-summary-section rule) -- everywhere else on this flow that
   kind of helper copy uses the same muted/controlled-leading treatment
   as .cc-description/.appointmentInfo, so this brings it in line. */
#BookNowSlide .booking-summary-section > p {
	font-size: 14.5px;
	color: var(--bnm-text-muted);
	line-height: 1.6;
}
#BookNowSlide .summary-grid {
	border: 1px solid var(--bnm-border);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 18px;
	box-shadow: 0 2px 10px rgba(20, 38, 64, .05);
}
#BookNowSlide .summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 16px;
	font-size: 14.5px;
	border-bottom: 1px solid var(--bnm-divider);
}
#BookNowSlide .summary-row:last-child {
	border-bottom: none;
}
#BookNowSlide .summary-row .label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	color: var(--bnm-text-faint);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}
/* Small tinted "chip" per row, same soft-background-square-behind-an-icon
   convention as /portal/app's bottom nav (.navicon-btn in header.css) --
   a fixed-size rounded-square with a per-item soft accent color, icon
   centered via mask-image/currentColor (the accent color itself). Each
   variant only needs to set --row-icon-soft/--row-icon-accent. */
#BookNowSlide .row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	flex-shrink: 0;
	background: var(--row-icon-soft, var(--bnm-page-bg));
	color: var(--row-icon-accent, var(--bnm-text-faint));
}
#BookNowSlide .row-icon::before {
	content: "";
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
#BookNowSlide .row-icon--name {
	--row-icon-soft: #eef0fd;
	--row-icon-accent: #6366f1;
}
#BookNowSlide .row-icon--name::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
#BookNowSlide .row-icon--email {
	--row-icon-soft: #eaf2fe;
	--row-icon-accent: #3b82f6;
}
#BookNowSlide .row-icon--email::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E");
}
#BookNowSlide .row-icon--phone {
	--row-icon-soft: #e7f5f2;
	--row-icon-accent: #16a34a;
}
#BookNowSlide .row-icon--phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
#BookNowSlide .row-icon--location {
	--row-icon-soft: #fdeceb;
	--row-icon-accent: #ef4444;
}
#BookNowSlide .row-icon--location::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
#BookNowSlide .row-icon--date {
	--row-icon-soft: #fdf1de;
	--row-icon-accent: #d97706;
}
#BookNowSlide .row-icon--date::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
#BookNowSlide .row-icon--staff {
	--row-icon-soft: #f7e9ef;
	--row-icon-accent: #db2777;
}
#BookNowSlide .row-icon--staff::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpolyline points='17 11 19 13 23 9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpolyline points='17 11 19 13 23 9'/%3E%3C/svg%3E");
}
#BookNowSlide .row-icon--time {
	--row-icon-soft: #e7f5f2;
	--row-icon-accent: #0891b2;
}
#BookNowSlide .row-icon--time::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
#BookNowSlide .row-icon--services {
	--row-icon-soft: #eaeef4;
	--row-icon-accent: #475569;
}
#BookNowSlide .row-icon--services::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}
#BookNowSlide .summary-row .value {
	font-weight: 500;
	color: var(--bnm-text-body);
	text-align: right;
}
/* Under 767px, label-left/value-right on one line squeezed long values
   (email addresses, the full service list) into a narrow right-hand
   column and forced awkward wrapping -- stacking label above value
   (each full-width) reads as a clean receipt/summary card instead, and
   is the more common mobile pattern for this kind of confirm-and-pay
   screen anyway. */
@media (max-width: 767px) {
	#BookNowSlide .summary-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		padding: 14px 18px;
	}
	#BookNowSlide .summary-row .label {
		font-size: 10.5px;
	}
	#BookNowSlide .summary-row .value {
		text-align: left;
		font-size: 15px;
	}
}
/* ===================================================================
   14b. Booking Summary client card + tiles (dsp_booknowstep5.cfm only)
   -- replaces the .summary-grid/.row-icon list (section 14 above) just
   for this page's markup. .summary-grid/.row-icon themselves are left
   as-is since dsp_selectedservices.cfm's mini recap and
   dsp_booknowstep6.cfm's confirmation page still use that structure.
   =================================================================== */
#BookNowSlide .bsummary-card {
	border: 1px solid var(--bnm-border);
	border-radius: 14px;
	background: var(--bnm-card-bg);
	box-shadow: 0 2px 10px rgba(20, 38, 64, .05);
	padding: 18px;
	margin-bottom: 18px;
}
/* The client's own identity gets one lead tile -- name/email/phone read
   as one entity, unlike location/date/staff which are peer facts about
   the appointment -- tinted via color-mix over the tenant's own
   --theme-secondary-color (same technique as --bnm-focus-ring above)
   rather than a fixed accent, so it reads as this tenant's brand on
   every site the widget is embedded on. */
#BookNowSlide .bsummary-client {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 12px;
	margin-bottom: 12px;
	background: color-mix(in srgb, var(--theme-secondary-color) 8%, var(--bnm-card-bg));
}
#BookNowSlide .bsummary-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--theme-secondary-color);
	color: var(--theme-buttonfontP-color);
	font-size: 15px;
	font-weight: 700;
}
#BookNowSlide .bsummary-who {
	min-width: 0;
}
#BookNowSlide .bsummary-name {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--bnm-text-h);
	margin-bottom: 3px;
}
#BookNowSlide .bsummary-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 12.5px;
	color: var(--bnm-text-muted);
}
#BookNowSlide .bsummary-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
#BookNowSlide .bsummary-tile {
	background: var(--bnm-page-bg);
	border-radius: 12px;
	padding: 13px 14px;
}
#BookNowSlide .bsummary-tile--wide {
	margin-top: 10px;
}
#BookNowSlide .bsummary-cap {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bnm-text-faint);
	margin-bottom: 6px;
}
#BookNowSlide .bsummary-val {
	font-size: 14px;
	font-weight: 700;
	color: var(--bnm-text-h);
	line-height: 1.4;
	word-break: break-word;
}
#BookNowSlide .bsummary-sub {
	font-size: 12px;
	color: var(--bnm-text-muted);
	margin-top: 1px;
}
/* Two-tile variant (dsp_selectedservices.cfm's "Appointment Details" popup)
   -- that modal only ever has 2 tile-worthy facts (date/time, staff), so
   the 3-up grid above left oversized gaps/undersized captions in a
   narrower popup; this pairs them evenly instead. */
#BookNowSlide .bsummary-tiles--pair {
	grid-template-columns: 1fr 1fr;
}
/* Location doesn't get a tile in that popup either -- an address doesn't
   want to be squeezed into the same width as "Alexis Bradley", so it's
   a plain caption line with a small pin icon instead. */
#BookNowSlide .bsummary-location-line {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--bnm-text-muted);
	line-height: 1.5;
	margin-top: 12px;
}
#BookNowSlide .bsummary-location-line .bsummary-location-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	background-color: var(--bnm-text-faint);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
@media (max-width: 640px) {
	#BookNowSlide .bsummary-tiles {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 420px) {
	#BookNowSlide .bsummary-client {
		align-items: flex-start;
	}
	#BookNowSlide .bsummary-tiles,
	#BookNowSlide .bsummary-tiles--pair {
		grid-template-columns: 1fr;
	}
}

#BookNowSlide .summary-comments label {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .03em;
	color: var(--bnm-text-h);
	margin-bottom: 7px;
}
#BookNowSlide .summary-comments textarea,
#BookNowSlide textarea.form-control,
#BookNowSlide #bn_BNSummaryComments {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--bnm-border) !important;
	border-radius: 12px !important;
	font-size: 14.5px;
	color: var(--bnm-text-h);
	background: var(--bnm-card-bg) !important;
	box-shadow: var(--bnm-shadow-card);
	resize: vertical;
}
#BookNowSlide .summary-comments textarea:focus,
#BookNowSlide #bn_BNSummaryComments:focus {
	outline: none;
	border-color: var(--theme-secondary-color) !important;
	box-shadow: var(--bnm-focus-ring);
}
#BookNowSlide .checkbox-wrapper {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	font-size: 14px;
	color: var(--bnm-text-body);
	cursor: pointer;
}
#BookNowSlide .checkbox-wrapper input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
/* booknowstep5.css (legacy, loads before this file) defines this exact
   same .checkbox-wrapper .custom-checkbox component under an entirely
   different visual design (20px box, FontAwesome glyph content, a solid
   grey ::after background) -- equal specificity means each PROPERTY is
   decided independently rather than one whole ruleset winning, so any
   property only legacy declares (background-color, font-family, etc.)
   was still leaking through underneath this rule's own box/tick, mixing
   into a small rotated grey block instead of a clean checkmark.
   !important on every property here is what fully owns the component
   regardless of what legacy declares. */
#BookNowSlide .checkbox-wrapper .custom-checkbox {
	position: relative !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 5px !important;
	border: 1.5px solid var(--bnm-border) !important;
	background: var(--bnm-card-bg) !important;
	flex-shrink: 0;
	display: inline-block;
}
#BookNowSlide .checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox {
	background: var(--theme-secondary-color) !important;
	border-color: var(--theme-secondary-color) !important;
}
#BookNowSlide .checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox::after {
	content: "" !important;
	font-family: inherit !important;
	font-size: 0 !important;
	line-height: normal !important;
	text-align: left !important;
	color: transparent !important;
	background: transparent !important;
	position: absolute !important;
	left: 5px !important;
	top: 1px !important;
	width: 5px !important;
	height: 9px !important;
	border: solid var(--theme-buttonfontP-color) !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}

/* ===================================================================
   15. Confirmation / Thank You (dsp_booknowstep6.cfm)
   =================================================================== */
#BookNowSlide .confirmation-header {
	text-align: center;
	padding: 10px 0 8px;
}
/* Soft-teal circular badge behind a bold checkmark -- same tinted-circle-
   behind-an-icon convention as the Summary page's row-icon chips, just
   bigger, replacing the old small flat calendar-check PNG. */
#BookNowSlide .confirmation-header .success-badge {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--bnm-teal-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	position: relative;
}
#BookNowSlide .confirmation-header .success-badge::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--bnm-teal) 35%, transparent);
}
#BookNowSlide .confirmation-header .success-badge-check {
	width: 32px;
	height: 32px;
	background-color: var(--bnm-teal);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
#BookNowSlide .confirmation-header h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--bnm-text-h);
	margin: 0 0 6px;
	letter-spacing: -.01em;
}
#BookNowSlide .confirmation-header .subtext {
	font-size: 14.5px;
	color: var(--bnm-text-muted);
	line-height: 1.5;
}
/* Small "Confirmed" status pill -- a common SaaS-confirmation touch,
   reusing the same soft/accent teal pair as the success badge above. */
#BookNowSlide .confirm-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bnm-teal-soft);
	color: var(--bnm-teal);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	margin-top: 10px;
}
#BookNowSlide .confirm-pill-check {
	width: 11px;
	height: 11px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
/* Appointment Details on this page now reuses the Summary page's own
   .summary-grid/.summary-row/.row-icon markup verbatim (see
   dsp_booknowstep6.cfm) instead of a separate plain-text card, so both
   screens share one visual language. .confirmation-summary just forces
   the stacked (label-above-value, left-aligned) layout unconditionally
   here -- unlike the Summary page there are only two rows, one of which
   is a multi-line address, and that reads better stacked at any width
   rather than only under 767px. */
#BookNowSlide .confirmation-summary .summary-row {
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}
#BookNowSlide .confirmation-summary .summary-row .value {
	text-align: left;
}
#BookNowSlide .fun-message {
	text-align: center;
	font-size: 13.5px;
	color: var(--bnm-text-faint);
	margin-top: 10px;
}
#BookNowSlide .thankBtn {
	min-width: 200px;
}

/* ===================================================================
   16. Modern scrollbar for the main scrollable content column
   (.showscroll -- #bookInfoDiv, the service-info modal body, etc.)
   =================================================================== */
#BookNowSlide .showscroll {
	scrollbar-width: thin;
	scrollbar-color: var(--bnm-border) transparent;
}
#BookNowSlide .showscroll::-webkit-scrollbar {
	width: 6px;
}
#BookNowSlide .showscroll::-webkit-scrollbar-track {
	background: transparent;
}
#BookNowSlide .showscroll::-webkit-scrollbar-thumb {
	background: var(--bnm-border);
	border-radius: 999px;
}
#BookNowSlide .showscroll::-webkit-scrollbar-thumb:hover {
	background: var(--bnm-text-faint);
}

/* ===================================================================
   17. Inline validation toast (createtoastmess() in booknow.js) -- the
   "Please select a service/provider/date/etc. to continue" message
   shown when Continue is clicked while the step is invalid, and the
   client-info/credit-card form's own error messages. This markup
   (#toast-position > #toast-container > .toast.alert-top > .toast-body)
   is the plain jQuery fallback path in createtoastmess() -- the MDB
   bsToast plugin it prefers isn't actually loaded on this page, so this
   fallback is what always renders in practice. It came from legacy with
   no real styling of its own (a bare Bootstrap .toast box, absolutely
   positioned at the page's literal top:0 -- see booknowmain.css
   #toast-position -- so it floated above the header instead of
   appearing near the content it refers to). Repositioned to float
   centered over the card itself and given a proper attention-callout
   look instead.
   =================================================================== */
#BookNowSlide .bookAppointment {
	/* Containing block for #toast-position below, so the toast centers
	   over the card instead of the whole page. */
	position: relative;
}
#BookNowSlide #toast-position {
	position: absolute !important;
	top: 16px !important;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	max-width: calc(100% - 52px);
	z-index: 60;
	pointer-events: none;
}
#BookNowSlide #toast-container {
	width: auto !important;
	display: flex;
	justify-content: center;
}
#BookNowSlide #toast-container .toast.alert-top {
	pointer-events: auto;
	display: flex !important;
	align-items: center;
	gap: 10px;
	background: var(--bnm-amber-soft);
	border: 1px solid color-mix(in srgb, var(--bnm-amber) 35%, transparent);
	border-radius: 12px !important;
	box-shadow: 0 12px 28px -10px rgba(20, 38, 64, .28);
	padding: 4px 16px 4px 4px;
	animation: bnmToastIn .22s ease;
}
#BookNowSlide #toast-container .toast.alert-top::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-left: 8px;
	background-color: var(--bnm-amber);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
#BookNowSlide .toast-body {
	padding: 10px 2px !important;
	font-size: 14px;
	font-weight: 700;
	color: #7a4a00;
	line-height: 1.4;
}
@keyframes bnmToastIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   18. Intro overlay (the "Book An Appointment" splash screen shown
   before entering the flow) -- was a fully opaque gradient (and, under
   767px, flat white -- booknowmain.css ~2854) hiding the page behind it
   entirely. A translucent, blurred backdrop instead hints that there's
   a real page underneath before you click in. #BookNowSlide doubles
   the specificity of the legacy ID-only selectors (#bookingIntroOverlay
   alone) so this wins outright, including the mobile override, without
   needing !important.
   =================================================================== */
#BookNowSlide #bookingIntroOverlay {
	background: rgba(15, 23, 42, .45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Card polish -- tighter padding/shadow matching the card-shell tokens
   used for the main booking card, instead of the flat ad hoc numbers
   this had before. */
#BookNowSlide #bookingIntroOverlay .overlay-content {
	padding: 36px 34px 30px;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 24px 48px -24px rgba(20, 38, 64, .25);
}
/* Soft accent-colored glow behind the logo -- a radial wash of the
   tenant's own accent, so the mark sits in front of a bit of brand
   color instead of directly on flat white. */
#BookNowSlide #bookingIntroOverlay .header-logo {
	position: relative;
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}
/* Lightened (mixed toward white) before being used as the glow's core
   color, rather than mixing the raw accent straight into transparent --
   a dark accent (this tenant's is a near-black grey) would otherwise
   glow as a muddy grey smudge instead of a soft color wash. Blurred on
   top of its own gradient falloff for a diffused edge, not a visible
   circle. */
#BookNowSlide #bookingIntroOverlay .header-logo::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 150px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, color-mix(in srgb, var(--theme-secondary-color) 38%, white) 0%, transparent 68%);
	filter: blur(10px);
	opacity: .65;
	z-index: 0;
}
#BookNowSlide #bookingIntroOverlay .header-logo-btn {
	position: relative;
	z-index: 1;
}
#BookNowSlide #bookingIntroOverlay .overlay-text h2 {
	font-size: 23px;
	font-weight: 800;
	color: var(--bnm-text-h);
	margin-bottom: 8px;
	letter-spacing: -.2px;
}
/* text-align:center -- a separate legacy rule (booknowmain.css ~1307,
   "#BookNowSlide .overlayIntro { text-align: left; ... }") is meant for
   this same class's OTHER use as a plain scrollable-content wrapper
   elsewhere in the booking flow, but bleeds into this intro screen too
   since it shares the class; #bookingIntroOverlay in this selector adds
   the extra specificity needed to win over it without !important. */
#BookNowSlide #bookingIntroOverlay .overlayIntro {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bnm-text-muted);
	padding: 0;
	margin-bottom: 4px;
	text-align: center;
}
/* The tenant-editable "Introduction" field is wrapped in the template's
   own <p> (bn/index.cfm), so a rich-text value that itself starts with
   a <p> (the normal case -- any WYSIWYG-authored content) auto-closes
   that wrapper immediately, leaving an always-empty first <p> ahead of
   the tenant's real first paragraph -- making :nth-of-type(2) the
   reliable target for "the actual first line" across tenants, not just
   this one. Bolded/darkened to read as a proper lead-in instead of
   blending into the description paragraph right below it at the same
   weight/color. */
#BookNowSlide #bookingIntroOverlay .overlayIntro p:nth-of-type(2) {
	font-weight: 700;
	color: var(--bnm-text-h);
	font-size: 15.5px;
}
#BookNowSlide #bookingIntroOverlay .overlay-text > p {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bnm-text-faint);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 22px 0 14px;
}
/* Appointment-type buttons -- icons + distinct fill/outline treatment
   (both were identical filled-grey pills before) so the two choices
   read as a clear either/or instead of two interchangeable actions. */
#BookNowSlide .button-group {
	padding: 0 0 4px;
	gap: 14px;
}
/* !important on display: booknowmain.css's own "Book Now Button" rule
   (~466) targets #bookNowVirtual/#bookNowBtn directly by ID (two IDs),
   out-specificity-ing this class-based selector regardless of file
   order, and sets display:inline-block -- collapsing this flex row
   back down so the icon ::before below rendered with no layout box. */
#BookNowSlide .button-group .themeButtonFill {
	height: 46px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
}
#BookNowSlide .button-group .themeButtonFill::before {
	content: "";
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
#BookNowSlide .button-group #bookNowVirtual::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}
#BookNowSlide .button-group #bookNowBtn::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* Virtual: outline (secondary) -- In Person stays the filled/primary
   pick since it's the more common choice for an in-office medspa. */
#BookNowSlide .button-group #bookNowVirtual.themeButtonFill {
	background: var(--bnm-card-bg) !important;
	color: var(--theme-secondary-color) !important;
	border: 1.5px solid var(--theme-secondary-color) !important;
	box-shadow: none;
}
#BookNowSlide .button-group #bookNowVirtual.themeButtonFill:hover {
	background: color-mix(in srgb, var(--theme-secondary-color) 8%, var(--bnm-card-bg)) !important;
}
/* Under 767px, the intro card fills the whole screen edge-to-edge
   instead of floating as a small card over the blurred backdrop --
   #BookNowSlide doubles the specificity of legacy's own mobile override
   (booknowmain.css ~2845, a plain #bookingIntroOverlay .overlay-content
   that only zeroed the radius/shadow, not the size) so this wins
   outright. */
@media (max-width: 767px) {
	#BookNowSlide #bookingIntroOverlay .overlay-content {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 40px 30px;
	}
}

/* ===================================================================
   19. Inline field validation (Client Information, dsp_booknowstep2.cfm)
   -- .field-error-msg spans already existed in the markup per-field but
   were never styled/populated; booknow.js now fills them in on submit
   and clears them as the visitor edits each field, so this just gives
   that per-field message a real look instead of rendering as bare,
   unstyled text.
   =================================================================== */
#BookNowSlide .field-error-msg {
	display: none;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #c0432f;
	align-items: center;
	gap: 5px;
}
#BookNowSlide .field-error-msg:not(:empty) {
	display: flex;
}
#BookNowSlide .field-error-msg:not(:empty)::before {
	content: "";
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
/* !important required here too: mdb.min.css's ".form-control:focus{box-shadow:
   none!important}" (see the plain-focus-ring fix above) otherwise beats this
   regardless of specificity, since !important always wins over a non-!important
   declaration no matter how specific the selector is. */
#BookNowSlide .form-control.is-invalid:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, #dc4c64 22%, transparent) !important;
}

/* ===================================================================
   20. International phone input (intl-tel-input) -- Client Information
   phone field. The plugin's own build/css/intlTelInput.css supplies
   layout/behavior (dropdown positioning, flag sprites, mobile mode);
   this section only restyles it to match this redesign's tokens instead
   of the library's default light-grey/square look.
   =================================================================== */
#BookNowSlide .iti {
	display: block;
	width: 100%;
}
/* The library sets this via a plain (non-!important) descendant rule
   (.iti--allow-dropdown input{padding-left:52px}) which loses the
   specificity tie against this file's own #BookNowSlide input[type="tel"]
   .form-control rule (section 11) -- restoring it here, scoped to just
   this field, so the input's text doesn't render underneath the flag
   button. */
#BookNowSlide .iti input#bn_phone.form-control {
	padding-left: 52px;
}
#BookNowSlide .iti__selected-flag {
	border-radius: 12px 0 0 12px;
}
#BookNowSlide .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
	background-color: color-mix(in srgb, var(--theme-secondary-color) 8%, transparent);
}
#BookNowSlide .iti__arrow {
	border-top-color: var(--bnm-text-faint);
}
#BookNowSlide .iti__arrow--up {
	border-bottom-color: var(--bnm-text-faint);
}
#BookNowSlide .iti__country-list {
	margin-top: 4px;
	background: var(--bnm-card-bg);
	border: 1px solid var(--bnm-border);
	border-radius: 12px;
	box-shadow: 0 12px 28px -8px rgba(20, 38, 64, .22);
	padding: 6px;
	min-width: 260px;
}
#BookNowSlide .iti__country {
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 14px;
}
#BookNowSlide .iti__country.iti__highlight {
	background-color: color-mix(in srgb, var(--theme-secondary-color) 8%, var(--bnm-card-bg));
}
#BookNowSlide .iti__dial-code {
	color: var(--bnm-text-faint);
}

/* ===================================================================
   21. Verification-link waiting state (dsp_booknowstep3.cfm) -- shown
   while booknow.js polls checkContactValidationLink every 2s (up to 30s)
   after sending the SMS/email verification link. Plain block layout
   (not flex) on purpose: the ready-handler in dsp_booknowstep3.cfm sets
   an inline style="display:block" on this element on load, which would
   beat a class-based display:flex here regardless of source order --
   centering via text-align/margin:auto works the same either way, so
   there's nothing for that inline style to fight.
   =================================================================== */
#BookNowSlide .link-waiting {
	text-align: center;
	padding: 22px 10px;
}
#BookNowSlide .link-waiting-spinner {
	width: 34px;
	height: 34px;
	margin: 0 auto 14px;
	border-radius: 50%;
	border: 3px solid var(--bnm-border);
	border-top-color: var(--theme-secondary-color);
	animation: bnmLinkSpin .8s linear infinite;
}
#BookNowSlide .link-waiting-message {
	font-size: 14.5px;
	color: var(--bnm-text-body);
	line-height: 1.6;
	max-width: 360px;
	margin: 0 auto;
}
@keyframes bnmLinkSpin {
	to { transform: rotate(360deg); }
}
/* max-width:767px, not 600 -- matches the breakpoint the rest of this file
   already treats as "mobile" (e.g. section 2's bookAppointment/card-shell
   rules), so the header stops being the one piece that switches layout at a
   different width than everything else around it. */
@media (max-width: 767px) {
	#BookNowSlide #bookInfoDivCC .cc-grid {
		gap: 15px;
	}
	#BookNowSlide .breadcrumb {
		margin: 0px 0px 14px 0px !important;
	}
	#BookNowSlide .breadcrumb a.breaditem:first-child {
		margin-left: 10px;
	}
	#BookNowSlide .header-container {
		flex-direction: column;
		align-items: center;
		padding: 15px 26px 10px;
	}
	#BookNowSlide .fullpagecontinue {
		padding: 10px 26px 10px;
	}
	#BookNowSlide .header-logo {
		align-self: center;
	}
	#BookNowSlide .header-content {
		align-items: center;
		text-align: center;
	}
	#BookNowSlide #appttype,
	#BookNowSlide #selected-services {
		justify-content: center;
	}
	#BookNowSlide .accordion-content {
		padding: 4px 0px 10px 10px;
	}
}