@forgebuild/hotal-ui 0.23.202 → 0.23.203
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -25,7 +25,14 @@ import{$ as e,A as t,B as n,D as r,E as i,H as a,I as o,J as s,K as c,L as l,M a
|
|
|
25
25
|
what the calendar column gets rather than on the whole widget: this
|
|
26
26
|
row is capped by --sbw-datetime-max-width and gives 16rem of itself
|
|
27
27
|
to the summary, so the root's width alone cannot answer it. */container:sbw-dt / inline-size;}
|
|
28
|
-
|
|
28
|
+
/* 38rem is what this actually needs: 20rem of calendar (the same comfortable
|
|
29
|
+
minimum the split below uses) + the 16rem summary + the 2rem between them.
|
|
30
|
+
No padding term -- an inline-size container is measured on its content
|
|
31
|
+
box, so the root's own padding is already out of this number. The old
|
|
32
|
+
800px was a viewport figure and far too conservative once measured
|
|
33
|
+
against the widget instead: it stacked the summary under a widget with
|
|
34
|
+
room to spare. */
|
|
35
|
+
@container sbw (min-width: 38rem) {.sbw-datetime.svelte-1dxdgqu {grid-template-columns:1fr 16rem;align-items:start;}
|
|
29
36
|
}
|
|
30
37
|
/* Calendar and slots side by side (not stacked) once there's room for
|
|
31
38
|
both plus the 16rem summary column -- a plain calendar-then-slots
|
|
@@ -144,7 +151,7 @@ import{$ as e,A as t,B as n,D as r,E as i,H as a,I as o,J as s,K as c,L as l,M a
|
|
|
144
151
|
block. Opaque --sbw-bg, not the translucent --sbw-input-bg inputs
|
|
145
152
|
use -- that assumes a solid page directly behind it, but this
|
|
146
153
|
panel sticks over whatever's scrolled underneath it. */.sbw-summary.svelte-1dxdgqu {border-radius:4px;border:1px solid color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 30%, transparent);background:var(--sbw-bg, #fff);box-shadow:0 8px 24px rgba(0, 0, 0, 0.16), 0 0 24px color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 25%, transparent);padding:1.25rem;}
|
|
147
|
-
@container sbw (min-width:
|
|
154
|
+
@container sbw (min-width: 38rem) {.sbw-summary.svelte-1dxdgqu {position:sticky;top:var(--sbw-summary-sticky-top, 1rem);}
|
|
148
155
|
}.sbw-summary-row.svelte-1dxdgqu {display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;font-size:0.9375rem;font-weight:600;}.sbw-summary-row-sub.svelte-1dxdgqu {margin-top:0.5rem;font-size:0.8125rem;font-weight:400;opacity:0.65;}
|
|
149
156
|
/* Date and time are one fact, not a label/value pair -- keep them
|
|
150
157
|
next to each other instead of the row's default space-between,
|
package/dist/hotal-ui.js
CHANGED
|
@@ -15334,7 +15334,7 @@ function V_(e, t) {
|
|
|
15334
15334
|
var H_, U_, W_, G_, K_, q_, J_, Y_, X_, Z_, Q_, $_, ev, tv, nv, rv, iv, av, ov, sv, cv, lv, uv, dv, fv, pv, mv, hv, gv, _v, vv, yv, bv, xv, Sv, Cv, wv, Tv = o((() => {
|
|
15335
15335
|
f(), zs(), Ll(), z_(), kl(), H_ = /* @__PURE__ */ W("<strong class=\"svelte-1dxdgqu\"> </strong>"), U_ = /* @__PURE__ */ W("<span class=\"svelte-1dxdgqu\"> </span>"), W_ = /* @__PURE__ */ W("<div class=\"sbw-summary-row sbw-summary-row-sub svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <!></div>"), G_ = /* @__PURE__ */ W("<div class=\"sbw-summary-row sbw-summary-row-sub svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <span class=\"svelte-1dxdgqu\"> </span></div>"), K_ = /* @__PURE__ */ W("<span class=\"sbw-time-flash svelte-1dxdgqu\"> </span>"), q_ = /* @__PURE__ */ W("<div class=\"sbw-summary-row sbw-summary-row-sub sbw-summary-row-datetime svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <!></div>"), J_ = /* @__PURE__ */ W("<div class=\"sbw-summary-row sbw-summary-row-sub svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <span class=\"sbw-summary-row-bookedat-value svelte-1dxdgqu\"> </span></div>"), Y_ = /* @__PURE__ */ W("<div class=\"sbw-summary-total svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <strong class=\"svelte-1dxdgqu\"> </strong></div>"), X_ = /* @__PURE__ */ W("<span class=\"sbw-spinner svelte-1dxdgqu\"></span>"), Z_ = /* @__PURE__ */ W("<p class=\"sbw-hint svelte-1dxdgqu\"> </p>"), Q_ = /* @__PURE__ */ W("<p class=\"sbw-error-text svelte-1dxdgqu\"> </p>"), $_ = /* @__PURE__ */ W("<button type=\"button\" class=\"sbw-continue svelte-1dxdgqu\"><!> <span class=\"svelte-1dxdgqu\"> </span></button> <!> <!>", 1), ev = /* @__PURE__ */ W("<button type=\"button\" class=\"sbw-continue svelte-1dxdgqu\"> </button> <button type=\"button\" class=\"sbw-back sbw-back-service svelte-1dxdgqu\"> </button>", 1), tv = /* @__PURE__ */ W("<button type=\"submit\" class=\"sbw-submit svelte-1dxdgqu\"><!> <span class=\"svelte-1dxdgqu\"> </span></button> <!> <button type=\"button\" class=\"sbw-back sbw-back-service svelte-1dxdgqu\"> </button>", 1), nv = /* @__PURE__ */ W("<aside class=\"sbw-summary svelte-1dxdgqu\"><div class=\"sbw-summary-row svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <!></div> <!> <!> <!> <!> <!> <!></aside>"), rv = /* @__PURE__ */ W("<img class=\"sbw-logo svelte-1dxdgqu\" alt=\"\"/>"), iv = /* @__PURE__ */ W("<h2 class=\"sbw-heading svelte-1dxdgqu\"> </h2> <div class=\"sbw-rule svelte-1dxdgqu\"></div>", 1), av = /* @__PURE__ */ W("<p class=\"sbw-tagline svelte-1dxdgqu\"> </p>"), ov = /* @__PURE__ */ W("<p class=\"sbw-description svelte-1dxdgqu\"> </p>"), sv = /* @__PURE__ */ W("<div class=\"sbw-intro svelte-1dxdgqu\"><!> <!> <!> <!></div>"), cv = /* @__PURE__ */ W("<span class=\"sbw-service-sub svelte-1dxdgqu\"> </span>"), lv = /* @__PURE__ */ W("<span class=\"sbw-service-prices svelte-1dxdgqu\"><span class=\"sbw-service-price svelte-1dxdgqu\"> </span> <!></span>"), uv = /* @__PURE__ */ W("<li class=\"svelte-1dxdgqu\"><button type=\"button\" class=\"sbw-service-item svelte-1dxdgqu\"><span class=\"sbw-service-name svelte-1dxdgqu\"> <!></span> <!></button></li>"), dv = /* @__PURE__ */ W("<ul class=\"sbw-service-list svelte-1dxdgqu\" role=\"list\"></ul>"), fv = /* @__PURE__ */ W("<div class=\"sbw-body svelte-1dxdgqu\"><h3 class=\"sbw-step-title svelte-1dxdgqu\"> </h3> <!></div>"), pv = /* @__PURE__ */ W("<li role=\"presentation\" class=\"svelte-1dxdgqu\"><button type=\"button\" role=\"option\" class=\"svelte-1dxdgqu\"> </button></li>"), mv = /* @__PURE__ */ W("<div class=\"sbw-therapist-filter svelte-1dxdgqu\"><span class=\"sbw-visually-hidden svelte-1dxdgqu\" id=\"sbw-therapist-filter-label\"> </span> <button type=\"button\" class=\"sbw-therapist-filter-trigger svelte-1dxdgqu\" aria-haspopup=\"listbox\" aria-labelledby=\"sbw-therapist-filter-label\"><span class=\"svelte-1dxdgqu\"> </span> <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"svelte-1dxdgqu\"></path></svg></button> <ul popover=\"\" role=\"listbox\" class=\"sbw-therapist-filter-panel svelte-1dxdgqu\"><li role=\"presentation\" class=\"svelte-1dxdgqu\"><button type=\"button\" role=\"option\" class=\"svelte-1dxdgqu\"> </button></li> <!></ul></div>"), hv = /* @__PURE__ */ W("<span></span>"), gv = /* @__PURE__ */ W("<button type=\"button\"><span class=\"svelte-1dxdgqu\"> </span> <!></button>"), _v = /* @__PURE__ */ W("<button type=\"button\"> </button>"), vv = /* @__PURE__ */ W("<div class=\"sbw-slot-group svelte-1dxdgqu\"><p class=\"sbw-slot-group-label svelte-1dxdgqu\"> </p> <div class=\"sbw-slot-buttons svelte-1dxdgqu\"></div></div>"), yv = /* @__PURE__ */ W("<div class=\"sbw-slot-groups svelte-1dxdgqu\"></div>"), bv = /* @__PURE__ */ W("<div class=\"sbw-body sbw-datetime svelte-1dxdgqu\"><div class=\"sbw-calendar-col svelte-1dxdgqu\"><div class=\"sbw-cal-body svelte-1dxdgqu\"><div class=\"sbw-cal-header svelte-1dxdgqu\"><p class=\"sbw-cal-month svelte-1dxdgqu\"> </p> <!> <div class=\"sbw-cal-nav svelte-1dxdgqu\"><button type=\"button\" class=\"svelte-1dxdgqu\">‹</button> <button type=\"button\" class=\"svelte-1dxdgqu\">›</button></div></div> <div class=\"sbw-cal-weekdays svelte-1dxdgqu\"></div> <div class=\"sbw-cal-grid svelte-1dxdgqu\"></div></div> <div class=\"sbw-slots svelte-1dxdgqu\"><!></div></div> <!></div>"), xv = /* @__PURE__ */ W("<form class=\"sbw-body sbw-datetime sbw-details svelte-1dxdgqu\"><div class=\"sbw-details-fields svelte-1dxdgqu\"><div class=\"sbw-grid svelte-1dxdgqu\"><label class=\"sbw-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <input type=\"text\" required=\"\" class=\"svelte-1dxdgqu\"/></label> <label class=\"sbw-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <input type=\"email\" pattern=\"[^\\s@]+@[^\\s@]+\\.[^\\s@]+\" class=\"svelte-1dxdgqu\"/></label> <label class=\"sbw-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <input type=\"tel\" class=\"svelte-1dxdgqu\"/></label></div> <label class=\"sbw-field sbw-notes-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <textarea rows=\"3\" class=\"svelte-1dxdgqu\"></textarea></label></div> <!></form>"), Sv = /* @__PURE__ */ W("<div class=\"sbw-success svelte-1dxdgqu\"><div class=\"sbw-success-icon svelte-1dxdgqu\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" class=\"svelte-1dxdgqu\"><path d=\"M5 13l4 4L19 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"svelte-1dxdgqu\"></path></svg></div> <p class=\"svelte-1dxdgqu\"> </p> <!></div>"), Cv = /* @__PURE__ */ W("<section class=\"sbw-root svelte-1dxdgqu\"><!> <!></section>"), wv = {
|
|
15336
15336
|
hash: "svelte-1dxdgqu",
|
|
15337
|
-
code: ".sbw-root.svelte-1dxdgqu {display:block;\n /* Every layout breakpoint below is a container query against this box,\n not the viewport. The widget is embedded in host layouts -- a narrow\n column beside a summary card, a modal -- where the viewport says\n nothing useful about the room it actually has; sized from the\n viewport it laid out a wide-screen grid inside a ~700px column and\n overflowed. Inline-size containment also stops the widget handing\n its contents' min-content width up to the host. */container:sbw / inline-size;font-family:inherit;color:var(--sbw-text-color, #1a1a1a);background:var(--sbw-bg, #faf6ec);padding:var(--sbw-padding, 4rem 1.5rem);}.sbw-intro.svelte-1dxdgqu {max-width:var(--sbw-intro-max-width, 36rem);margin:0 auto;text-align:center;}.sbw-logo.svelte-1dxdgqu {height:var(--sbw-logo-height, 2.5rem);width:auto;margin:0 auto 1.5rem;display:block;}.sbw-heading.svelte-1dxdgqu {margin:0;font-size:2rem;font-family:var(--sbw-heading-font-family, inherit);}\n @container sbw (min-width: 640px) {.sbw-heading.svelte-1dxdgqu {font-size:2.5rem;}\n }.sbw-rule.svelte-1dxdgqu {width:4rem;height:1px;margin:1rem auto 0;background:var(--sbw-rule-color, rgba(196, 158, 90, 0.5));}.sbw-tagline.svelte-1dxdgqu {margin:1.5rem 0 0;font-style:italic;font-size:1.125rem;}.sbw-description.svelte-1dxdgqu {margin:1rem 0 0;font-size:1rem;line-height:1.6;}\n /* Matches .sbw-heading/.sbw-description above so a host that slots its\n own heading/description (instead of the heading/description attributes)\n gets the same look for free -- targeted by the slot attribute, not a\n class, so it works no matter what element or class the host uses. */::slotted([slot='heading']) {margin:0;font-size:2rem;font-family:var(--sbw-heading-font-family, inherit);}\n @container sbw (min-width: 640px) {::slotted([slot='heading']) {font-size:2.5rem;}\n }::slotted([slot='description']) {margin:1rem 0 0;font-size:1rem;line-height:1.6;}.sbw-body.svelte-1dxdgqu {max-width:var(--sbw-form-max-width, 40rem);margin:var(--sbw-body-margin-top, 3rem) auto 0;}.sbw-step-title.svelte-1dxdgqu {margin:0 0 1.25rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;opacity:0.6;}.sbw-hint.svelte-1dxdgqu {margin:0;font-size:0.875rem;opacity:0.6;}\n\n /* --- Service list --- */.sbw-service-list.svelte-1dxdgqu {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem;}.sbw-service-item.svelte-1dxdgqu {width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:2px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:0.9rem 1.1rem;font:inherit;font-size:0.9375rem;color:inherit;cursor:pointer;text-align:left;transition:border-color 150ms ease, background-color 150ms ease, transform 150ms ease;}.sbw-service-item.svelte-1dxdgqu:hover:not(:disabled) {border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);background:var(--sbw-service-hover-bg, rgba(0, 0, 0, 0.03));color:var(--sbw-service-hover-color, inherit);transform:translateX(2px);}.sbw-service-price.svelte-1dxdgqu {font-weight:600;color:var(--sbw-accent-color, #c49e5a);}.sbw-service-item.svelte-1dxdgqu:hover:not(:disabled) .sbw-service-price:where(.svelte-1dxdgqu) {color:var(--sbw-service-hover-price-color, var(--sbw-accent-color, #c49e5a));}\n /* A regulars-only service the visitor doesn't qualify for: still listed\n (so they know it exists), dimmed like the calendar's unavailable days. */.sbw-service-item.svelte-1dxdgqu:disabled {cursor:default;opacity:0.5;}.sbw-service-name.svelte-1dxdgqu,\n .sbw-service-prices.svelte-1dxdgqu {display:flex;flex-direction:column;gap:0.15rem;}.sbw-service-prices.svelte-1dxdgqu {align-items:flex-end;flex-shrink:0;text-align:right;}.sbw-service-sub.svelte-1dxdgqu {font-size:0.8125rem;font-weight:400;opacity:0.7;}\n\n /* --- Datetime step: two-column layout, single column when narrow --- */.sbw-datetime.svelte-1dxdgqu {display:grid;grid-template-columns:1fr;gap:2rem;max-width:var(--sbw-datetime-max-width, 52rem);\n /* A second container, because the calendar/slots split below depends on\n what the calendar column gets rather than on the whole widget: this\n row is capped by --sbw-datetime-max-width and gives 16rem of itself\n to the summary, so the root's width alone cannot answer it. */container:sbw-dt / inline-size;}\n @container sbw (min-width: 800px) {.sbw-datetime.svelte-1dxdgqu {grid-template-columns:1fr 16rem;align-items:start;}\n }\n /* Calendar and slots side by side (not stacked) once there's room for\n both plus the 16rem summary column -- a plain calendar-then-slots\n stack read as a long, sparse list. .sbw-cal-body wraps the weekday\n labels + day grid into one grid item (rather than giving them each\n their own template row) so its height is independent of how tall\n .sbw-slots is -- with each in its own row instead, a long slots\n list (a busy day can have 20+ times) inflated the *shared* row\n tracks and pushed the day grid visually away from its own weekday\n header. Slots gets the flexible remaining column so extra width\n goes into more time-chip columns instead of unused space; the\n calendar gets a comfortable range (not a single fixed number) so it\n can grow a little on very wide hosts instead of looking squashed\n next to a much wider slots column, while still stopping well short\n of the dead-space-between-date-numbers stretching a bare 1fr gave it. */\n /* 54rem is the width this split actually needs, not a round number: the\n calendar's own minimum (20rem) plus the slots column's (14rem) plus the\n 2rem between them is 36rem, and in two-column mode this row has already\n given 16rem + 2rem to the summary. Below it the two stack instead, which\n is why the query is on the row rather than on the root -- a wide page\n with a narrow widget must still stack. Note the 52rem default cap on\n --sbw-datetime-max-width is under this, so a host wanting the calendar\n and slots side by side has to raise it. */\n @container sbw-dt (min-width: 54rem) {.sbw-calendar-col.svelte-1dxdgqu {display:grid;grid-template-columns:minmax(20rem, 28rem) minmax(14rem, 1fr);grid-template-areas:'body slots';column-gap:2rem;align-items:start;}.sbw-cal-body.svelte-1dxdgqu {grid-area:body;}.sbw-slots.svelte-1dxdgqu {grid-area:slots;}\n /* Extra specificity (not just .sbw-slots) so this reliably beats the\n unconditional base rule below regardless of source order -- the\n top border/margin/padding there exists to separate slots from a\n calendar stacked *above* it on narrow/mobile widths; side by side,\n it read as a stray line with nothing for it to separate. */.sbw-calendar-col.svelte-1dxdgqu .sbw-slots:where(.svelte-1dxdgqu) {margin-top:0;border-top:none;padding-top:0;}\n }.sbw-cal-header.svelte-1dxdgqu {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;}.sbw-cal-month.svelte-1dxdgqu {margin:0;font-size:1rem;font-weight:600;}.sbw-visually-hidden.svelte-1dxdgqu {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}.sbw-therapist-filter.svelte-1dxdgqu {position:relative;}.sbw-therapist-filter-trigger.svelte-1dxdgqu {display:flex;align-items:center;gap:0.5rem;border-radius:9999px;border:2px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);color:inherit;font:inherit;font-size:0.8125rem;padding:0.4rem 0.85rem;cursor:pointer;transition:border-color 320ms ease-out;}.sbw-therapist-filter-trigger.svelte-1dxdgqu:hover,\n .sbw-therapist-filter-trigger.svelte-1dxdgqu:focus-visible {border-color:var(--sbw-accent-color, #c49e5a);outline:none;}.sbw-chevron.svelte-1dxdgqu {width:1rem;height:1rem;flex-shrink:0;opacity:0.6;transition:transform 200ms ease;}.sbw-chevron-open.svelte-1dxdgqu {transform:rotate(180deg);}\n /* Native <select> option lists can't be styled -- they render as the\n browser's own unthemed popup regardless of any CSS here, which read\n as a jarring plain-white box against a themed (esp. dark) host page.\n This is a real listbox (button + popover), styled as a proper\n floating panel: opaque fill (not the translucent --sbw-input-bg\n inputs use, which assumes a solid page behind it -- this overlays\n arbitrary content) with an accent-tinted border and glow instead of\n a flat neutral edge. The 30%/25% mix amounts aren't picked to taste --\n they're the same two fixed proportions this library's other floating\n panels use for an accent border + glow (not a third, invented\n opacity), so re-skinning --sbw-accent-color still lands on a\n consistent-looking panel instead of a one-off tint. */.sbw-therapist-filter-panel.svelte-1dxdgqu {position:fixed;inset:auto;margin:0;min-width:9rem;max-height:15rem;overflow:auto;list-style:none;padding:0.25rem;border-radius:10px;border:1px solid color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 30%, transparent);background:var(--sbw-bg, #faf6ec);box-shadow:0 8px 24px rgba(0, 0, 0, 0.16), 0 0 24px color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 25%, transparent);}.sbw-therapist-filter-panel.svelte-1dxdgqu button:where(.svelte-1dxdgqu) {display:block;width:100%;border:none;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:left;padding:0.5rem 0.75rem;font-size:0.8125rem;cursor:pointer;}.sbw-therapist-filter-panel.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover,\n .sbw-therapist-filter-panel.svelte-1dxdgqu button[aria-selected='true']:where(.svelte-1dxdgqu) {background:color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 15%, transparent);}.sbw-cal-nav.svelte-1dxdgqu {display:flex;gap:0.25rem;}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu) {position:relative;z-index:0;display:flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;border-radius:9999px;border:2px solid var(--sbw-cal-nav-border-color, var(--sbw-border-color, rgba(0, 0, 0, 0.15)));background:none;color:var(--sbw-text-color, #1a1a1a);font-size:1.375rem;cursor:pointer;transition:border-color 320ms ease-out, color 320ms ease-out;}\n /* A fill growing from the button's centre (clip-path), not a flat\n colour cross-fade -- matches this library's other circular nav\n control (VenueCarousel's prev/next). Separate hook from\n --sbw-cal-hover-bg (the day-cell hover fill) on purpose: a consumer\n whose day-cell text needs that fill to stay same-color-as-background\n invisible (see mens-cave-barbers) still wants these nav buttons --\n icon glyphs, not text that could vanish -- to invert fully on hover.\n Falls back to the day-cell variable, then the original hardcoded\n tint, so existing consumers see no change. */.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu)::before {content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--sbw-cal-nav-hover-bg, var(--sbw-cal-hover-bg, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 6%, transparent)));clip-path:circle(0% at 50% 50%);transition:clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1);}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover:not(:disabled) {border-color:var(--sbw-cal-nav-hover-border-color, var(--sbw-accent-color, #c49e5a));color:var(--sbw-cal-nav-hover-color, var(--sbw-text-color, #1a1a1a));}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover:not(:disabled)::before {clip-path:circle(150% at 50% 50%);}\n /* The click-pulse (below) is this button's whole click-confirmation --\n no separate :active press state, so the two don't stack into a\n double-bounce (shrink-on-press, then the pulse's own scale-up).\n :global() on the pulse class itself -- it's only ever added via\n classList.add() in pulseNavButton above, never as a literal class\n in this template, so Svelte's unused-CSS pruning silently deleted\n this whole rule (keeping the @keyframes, which isn't pruned the\n same way) without :global() marking it as intentionally dynamic. */\n @keyframes svelte-1dxdgqu-sbw-cal-nav-pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.18); }\n 100% { transform: scale(1); }\n }.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu).sbw-cal-nav-pulse {\n animation: svelte-1dxdgqu-sbw-cal-nav-pulse 320ms ease-out;}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):disabled {cursor:default;opacity:0.3;}.sbw-cal-weekdays.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(7, 1fr);margin-top:1rem;text-align:center;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;opacity:0.4;}.sbw-cal-grid.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(7, 1fr);gap:2px;margin-top:0.25rem;}.sbw-cal-cell.svelte-1dxdgqu {height:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:2px solid transparent;border-radius:8px;background:none;font:inherit;font-size:0.875rem;color:inherit;cursor:pointer;transition:border-color 320ms ease-out, background-color 320ms ease-out, color 320ms ease-out;}\n /* Excludes .sbw-cal-cell-selected: this selector out-ranks the selected\n rule below (two pseudo-classes vs. one plain class), and without the\n exclusion hovering the selected day replaced its solid accent fill\n with this dimmer tint, reading as deselected while the mouse was over\n it. Same fix as AvailabilityCalendar.svelte's .ac-edge exclusion. */.sbw-cal-cell.svelte-1dxdgqu:hover:not(:disabled):not(.sbw-cal-cell-selected) {background:var(--sbw-cal-hover-bg, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 6%, transparent));color:var(--sbw-cal-hover-color, inherit);border-color:var(--sbw-accent-color, #c49e5a);}.sbw-cal-cell.svelte-1dxdgqu:disabled {cursor:default;}.sbw-cal-cell-off.svelte-1dxdgqu span:where(.svelte-1dxdgqu) {opacity:0.2;}.sbw-cal-cell.svelte-1dxdgqu:disabled:not(.sbw-cal-cell-off) span:where(.svelte-1dxdgqu):first-child {opacity:0.3;}.sbw-cal-cell-selected.svelte-1dxdgqu {background:var(--sbw-accent-color, #c49e5a);}.sbw-cal-cell-selected.svelte-1dxdgqu span:where(.svelte-1dxdgqu) {color:var(--sbw-accent-contrast, #fff);}.sbw-dot.svelte-1dxdgqu {width:4px;height:4px;border-radius:9999px;background:var(--sbw-accent-color, #c49e5a);}.sbw-dot-1.svelte-1dxdgqu {opacity:0.35;}.sbw-dot-2.svelte-1dxdgqu {opacity:0.65;}.sbw-dot-3.svelte-1dxdgqu {opacity:1;width:5px;height:5px;}\n /* Keeps the availability dot visible against --sbw-cal-hover-color's own\n fill -- without this it stayed --sbw-accent-color, which on a theme\n where hover flips to a dark fill with accent-colored TEXT (rather\n than the default light tint) would otherwise put an accent dot on an\n accent-colored background. */.sbw-cal-cell.svelte-1dxdgqu:hover:not(:disabled):not(.sbw-cal-cell-selected) .sbw-dot:where(.svelte-1dxdgqu) {background:var(--sbw-cal-hover-color, var(--sbw-accent-color, #c49e5a));}.sbw-cal-cell-selected.svelte-1dxdgqu .sbw-dot:where(.svelte-1dxdgqu) {background:var(--sbw-accent-contrast, #fff);opacity:1;}.sbw-slots.svelte-1dxdgqu {margin-top:1.5rem;border-top:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));padding-top:1.25rem;}\n /* One column, not auto-fit -- auto-fit let Morning/Afternoon/Evening\n sit side-by-side whenever the container was wide (e.g. the\n dashboard's full-width reschedule sheet), each cramped into a\n narrow track instead of the slot-buttons grid using the full\n width. Stacking the groups keeps each one's own 2-column button\n grid legible regardless of how wide the widget is rendered. */.sbw-slot-groups.svelte-1dxdgqu {display:grid;grid-template-columns:1fr;gap:1.25rem;}.sbw-slot-group-label.svelte-1dxdgqu {margin:0 0 0.5rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--sbw-slot-label-color, inherit);opacity:var(--sbw-slot-label-opacity, 0.5);}\n /* auto-fit: use as many columns as the (now flexible-width) slots\n area actually has room for, instead of a fixed count that either\n stretches into giant pills on a wide column or wastes space on a\n narrow one. */.sbw-slot-buttons.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(auto-fit, minmax(5.5rem, 1fr));gap:0.4rem;}.sbw-slot-btn.svelte-1dxdgqu {border-radius:9999px;border:2px solid var(--sbw-border-color, rgba(0, 0, 0, 0.35));background:var(--sbw-input-bg, #fff);box-shadow:0 1px 2px rgba(0, 0, 0, 0.06);padding:0.5rem 0.9rem;font:inherit;font-size:0.8125rem;color:inherit;cursor:pointer;transition:border-color 320ms ease-out, background-color 320ms ease-out, color 320ms ease-out;}\n /* Excludes .sbw-slot-btn-selected for the same reason as .sbw-cal-cell's\n own hover exclusion above: this selector's two classes + :hover\n otherwise out-ranks that one plain class and hovering the already-\n selected slot would replace its solid accent fill with this one. */.sbw-slot-btn.svelte-1dxdgqu:hover:not(.sbw-slot-btn-selected) {border-color:var(--sbw-accent-color, #c49e5a);background:var(--sbw-slot-hover-bg, var(--sbw-input-bg, #fff));color:var(--sbw-slot-hover-color, inherit);}.sbw-slot-btn-selected.svelte-1dxdgqu {background:var(--sbw-accent-color, #c49e5a);border-color:var(--sbw-accent-color, #c49e5a);color:var(--sbw-accent-contrast, #fff);\n /* Replays whenever this class lands on a *different* button (auto-pick\n or a manual re-pick), since that's a fresh application of the\n animation property -- makes the pick noticeable instead of a silent\n state change several buttons over from where the visitor is looking. */\n animation: svelte-1dxdgqu-sbw-slot-pop 0.3s ease;}\n @keyframes svelte-1dxdgqu-sbw-slot-pop {\n 0% { transform: scale(0.92); }\n 60% { transform: scale(1.04); }\n 100% { transform: scale(1); }\n }\n /* Flashes gold then settles, so a silently auto-picked time in the summary\n panel (easy to miss, off to the side) draws the eye same as the pop\n above does for the slot button itself. */.sbw-time-flash.svelte-1dxdgqu {\n animation: svelte-1dxdgqu-sbw-time-flash 0.6s ease;}\n @keyframes svelte-1dxdgqu-sbw-time-flash {\n 0% { color: var(--sbw-accent-color, #c49e5a); }\n 100% { color: inherit; }\n }\n\n /* --- Summary panel --- */\n /* Sticky, and it carries the primary CTA -- a Floating panel (canon:\n accent-tinted border + matching glow, same 30%/25% mix the\n therapist-filter panel uses) rather than Card surface's neutral\n border, so it reads as raised/active instead of another content\n block. Opaque --sbw-bg, not the translucent --sbw-input-bg inputs\n use -- that assumes a solid page directly behind it, but this\n panel sticks over whatever's scrolled underneath it. */.sbw-summary.svelte-1dxdgqu {border-radius:4px;border:1px solid color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 30%, transparent);background:var(--sbw-bg, #fff);box-shadow:0 8px 24px rgba(0, 0, 0, 0.16), 0 0 24px color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 25%, transparent);padding:1.25rem;}\n @container sbw (min-width: 800px) {.sbw-summary.svelte-1dxdgqu {position:sticky;top:var(--sbw-summary-sticky-top, 1rem);}\n }.sbw-summary-row.svelte-1dxdgqu {display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;font-size:0.9375rem;font-weight:600;}.sbw-summary-row-sub.svelte-1dxdgqu {margin-top:0.5rem;font-size:0.8125rem;font-weight:400;opacity:0.65;}\n /* Date and time are one fact, not a label/value pair -- keep them\n next to each other instead of the row's default space-between,\n which stretched them to opposite edges. Also the one -sub row that's\n actually the point of the summary (which slot you're about to book),\n so it overrides -sub's dimmed/thin defaults back up to fully legible\n instead of reading as fine print like the optional staff row above it. */.sbw-summary-row-datetime.svelte-1dxdgqu {justify-content:flex-start;gap:0.375rem;font-size:var(--sbw-summary-datetime-size, 0.875rem);font-weight:var(--sbw-summary-datetime-weight, 700);color:var(--sbw-summary-datetime-color, inherit);opacity:var(--sbw-summary-datetime-opacity, 1);}\n /* The post-booking \"Booked\" row's own timestamp value -- same\n reasoning and same variables as .sbw-summary-row-datetime above (it's\n the confirmed date/time, the actual point of this receipt-like row,\n not a footnote), just scoped to the value span rather than the whole\n row since this row keeps its label/value layout (space-between),\n unlike the label-less date+time row above. */.sbw-summary-row-bookedat-value.svelte-1dxdgqu {font-weight:var(--sbw-summary-datetime-weight, 700);color:var(--sbw-summary-datetime-color, inherit);opacity:var(--sbw-summary-datetime-opacity, 1);}.sbw-summary-total.svelte-1dxdgqu {display:flex;align-items:baseline;justify-content:space-between;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--sbw-summary-total-border-color, var(--sbw-border-color, rgba(0, 0, 0, 0.15)));font-size:0.9375rem;}.sbw-summary-total.svelte-1dxdgqu strong:where(.svelte-1dxdgqu) {font-size:1.125rem;color:var(--sbw-accent-color, #c49e5a);}.sbw-continue.svelte-1dxdgqu {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;margin-top:1.25rem;cursor:pointer;border:none;border-radius:2px;background:var(--sbw-accent-bg, #1a1a1a);color:var(--sbw-accent-contrast, #fff);padding:0.8rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:background-color 150ms ease;}.sbw-continue.svelte-1dxdgqu:hover:not(:disabled) {background:var(--sbw-accent-hover-bg, #333);}.sbw-continue.svelte-1dxdgqu:disabled {cursor:default;opacity:0.4;}\n\n /* --- Details step --- */.sbw-back.svelte-1dxdgqu {display:inline-block;margin-bottom:1.5rem;border:none;background:none;padding:0;font:inherit;color:inherit;font-size:0.8125rem;opacity:var(--sbw-back-opacity, 0.6);cursor:pointer;}.sbw-back.svelte-1dxdgqu:hover {opacity:var(--sbw-back-hover-opacity, 1);}.sbw-back-service.svelte-1dxdgqu {display:block;width:100%;margin-top:0.75rem;text-align:center;}.sbw-grid.svelte-1dxdgqu {display:grid;gap:1.25rem;}\n @container sbw (min-width: 640px) {.sbw-grid.svelte-1dxdgqu {grid-template-columns:1fr 1fr;}\n }.sbw-field.svelte-1dxdgqu {display:flex;flex-direction:column;gap:0.5rem;}.sbw-label.svelte-1dxdgqu {font-size:0.75rem;font-weight:300;text-transform:uppercase;letter-spacing:0.05em;}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu),\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu) {border-radius:2px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:0.75rem 1rem;font-size:0.875rem;font-family:inherit;color:inherit;}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):focus,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):focus {outline:none;border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu)::placeholder,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu)::placeholder {color:var(--sbw-placeholder-color, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 45%, transparent));}\n /* Browser autofill (matched saved Name/Email data) paints its own\n background on these inputs via a UA style strong enough that plain\n `background` can't win -- box-shadow can, so this fakes the field's\n normal look with an opaque inset fill instead. --sbw-input-autofill-bg\n falls back to --sbw-input-bg, which is enough for most themes (an\n opaque light input already matches when autofilled); only a theme\n whose --sbw-input-bg is itself transparent (mens-cave-barbers: fields\n defined by their border, not a fill, over a solid page background)\n needs to set this separately to that real opaque colour, or the\n browser's own fill shows through unmasked. The absurd transition delay\n is the standard defeat for Chrome's own internal autofill-background\n transition, which otherwise animates its colour in after this applies. */.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill,\n .sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill:hover,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill:hover,\n .sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill:focus,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill:focus {-webkit-text-fill-color:var(--sbw-text-color, #1a1a1a);-webkit-box-shadow:0 0 0 1000px var(--sbw-input-autofill-bg, var(--sbw-input-bg, #fff)) inset;box-shadow:0 0 0 1000px var(--sbw-input-autofill-bg, var(--sbw-input-bg, #fff)) inset;transition:background-color 600000s ease-in-out 0s;}.sbw-notes-field.svelte-1dxdgqu {margin-top:1.25rem;}.sbw-submit.svelte-1dxdgqu {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;margin-top:1.25rem;cursor:pointer;border:none;border-radius:2px;background:var(--sbw-accent-bg, #1a1a1a);color:var(--sbw-accent-contrast, #fff);padding:0.8rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:background-color 150ms ease;}.sbw-submit.svelte-1dxdgqu:hover:not(:disabled) {background:var(--sbw-accent-hover-bg, #333);}.sbw-submit.svelte-1dxdgqu:disabled {cursor:default;opacity:0.6;}.sbw-spinner.svelte-1dxdgqu {height:1rem;width:1rem;border-radius:9999px;border:2px solid color-mix(in oklab, var(--sbw-accent-contrast, #fff) 30%, transparent);border-top-color:var(--sbw-accent-contrast, #fff);\n animation: svelte-1dxdgqu-sbw-spin 0.7s linear infinite;}\n @keyframes svelte-1dxdgqu-sbw-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @media (prefers-reduced-motion: reduce) {.sbw-spinner.svelte-1dxdgqu {\n animation: none;}.sbw-slot-btn-selected.svelte-1dxdgqu,\n .sbw-time-flash.svelte-1dxdgqu {\n animation: none;}\n }.sbw-error-text.svelte-1dxdgqu {margin:0.75rem 0 0;font-size:0.8125rem;color:var(--sbw-danger-color, #dc2626);}\n\n /* --- Success --- */.sbw-success.svelte-1dxdgqu {max-width:var(--sbw-form-max-width, 40rem);margin:3rem auto 0;text-align:center;}.sbw-success-icon.svelte-1dxdgqu {display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto 1rem;border-radius:9999px;background:var(--sbw-success-bg, #c49e5a);color:#fff;}.sbw-success-icon.svelte-1dxdgqu svg:where(.svelte-1dxdgqu) {width:1.5rem;height:1.5rem;}.sbw-success.svelte-1dxdgqu .sbw-summary:where(.svelte-1dxdgqu) {margin-top:2rem;text-align:left;}.sbw-success.svelte-1dxdgqu p:where(.svelte-1dxdgqu) {margin:0;font-size:1.125rem;}"
|
|
15337
|
+
code: ".sbw-root.svelte-1dxdgqu {display:block;\n /* Every layout breakpoint below is a container query against this box,\n not the viewport. The widget is embedded in host layouts -- a narrow\n column beside a summary card, a modal -- where the viewport says\n nothing useful about the room it actually has; sized from the\n viewport it laid out a wide-screen grid inside a ~700px column and\n overflowed. Inline-size containment also stops the widget handing\n its contents' min-content width up to the host. */container:sbw / inline-size;font-family:inherit;color:var(--sbw-text-color, #1a1a1a);background:var(--sbw-bg, #faf6ec);padding:var(--sbw-padding, 4rem 1.5rem);}.sbw-intro.svelte-1dxdgqu {max-width:var(--sbw-intro-max-width, 36rem);margin:0 auto;text-align:center;}.sbw-logo.svelte-1dxdgqu {height:var(--sbw-logo-height, 2.5rem);width:auto;margin:0 auto 1.5rem;display:block;}.sbw-heading.svelte-1dxdgqu {margin:0;font-size:2rem;font-family:var(--sbw-heading-font-family, inherit);}\n @container sbw (min-width: 640px) {.sbw-heading.svelte-1dxdgqu {font-size:2.5rem;}\n }.sbw-rule.svelte-1dxdgqu {width:4rem;height:1px;margin:1rem auto 0;background:var(--sbw-rule-color, rgba(196, 158, 90, 0.5));}.sbw-tagline.svelte-1dxdgqu {margin:1.5rem 0 0;font-style:italic;font-size:1.125rem;}.sbw-description.svelte-1dxdgqu {margin:1rem 0 0;font-size:1rem;line-height:1.6;}\n /* Matches .sbw-heading/.sbw-description above so a host that slots its\n own heading/description (instead of the heading/description attributes)\n gets the same look for free -- targeted by the slot attribute, not a\n class, so it works no matter what element or class the host uses. */::slotted([slot='heading']) {margin:0;font-size:2rem;font-family:var(--sbw-heading-font-family, inherit);}\n @container sbw (min-width: 640px) {::slotted([slot='heading']) {font-size:2.5rem;}\n }::slotted([slot='description']) {margin:1rem 0 0;font-size:1rem;line-height:1.6;}.sbw-body.svelte-1dxdgqu {max-width:var(--sbw-form-max-width, 40rem);margin:var(--sbw-body-margin-top, 3rem) auto 0;}.sbw-step-title.svelte-1dxdgqu {margin:0 0 1.25rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;opacity:0.6;}.sbw-hint.svelte-1dxdgqu {margin:0;font-size:0.875rem;opacity:0.6;}\n\n /* --- Service list --- */.sbw-service-list.svelte-1dxdgqu {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem;}.sbw-service-item.svelte-1dxdgqu {width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:2px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:0.9rem 1.1rem;font:inherit;font-size:0.9375rem;color:inherit;cursor:pointer;text-align:left;transition:border-color 150ms ease, background-color 150ms ease, transform 150ms ease;}.sbw-service-item.svelte-1dxdgqu:hover:not(:disabled) {border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);background:var(--sbw-service-hover-bg, rgba(0, 0, 0, 0.03));color:var(--sbw-service-hover-color, inherit);transform:translateX(2px);}.sbw-service-price.svelte-1dxdgqu {font-weight:600;color:var(--sbw-accent-color, #c49e5a);}.sbw-service-item.svelte-1dxdgqu:hover:not(:disabled) .sbw-service-price:where(.svelte-1dxdgqu) {color:var(--sbw-service-hover-price-color, var(--sbw-accent-color, #c49e5a));}\n /* A regulars-only service the visitor doesn't qualify for: still listed\n (so they know it exists), dimmed like the calendar's unavailable days. */.sbw-service-item.svelte-1dxdgqu:disabled {cursor:default;opacity:0.5;}.sbw-service-name.svelte-1dxdgqu,\n .sbw-service-prices.svelte-1dxdgqu {display:flex;flex-direction:column;gap:0.15rem;}.sbw-service-prices.svelte-1dxdgqu {align-items:flex-end;flex-shrink:0;text-align:right;}.sbw-service-sub.svelte-1dxdgqu {font-size:0.8125rem;font-weight:400;opacity:0.7;}\n\n /* --- Datetime step: two-column layout, single column when narrow --- */.sbw-datetime.svelte-1dxdgqu {display:grid;grid-template-columns:1fr;gap:2rem;max-width:var(--sbw-datetime-max-width, 52rem);\n /* A second container, because the calendar/slots split below depends on\n what the calendar column gets rather than on the whole widget: this\n row is capped by --sbw-datetime-max-width and gives 16rem of itself\n to the summary, so the root's width alone cannot answer it. */container:sbw-dt / inline-size;}\n /* 38rem is what this actually needs: 20rem of calendar (the same comfortable\n minimum the split below uses) + the 16rem summary + the 2rem between them.\n No padding term -- an inline-size container is measured on its content\n box, so the root's own padding is already out of this number. The old\n 800px was a viewport figure and far too conservative once measured\n against the widget instead: it stacked the summary under a widget with\n room to spare. */\n @container sbw (min-width: 38rem) {.sbw-datetime.svelte-1dxdgqu {grid-template-columns:1fr 16rem;align-items:start;}\n }\n /* Calendar and slots side by side (not stacked) once there's room for\n both plus the 16rem summary column -- a plain calendar-then-slots\n stack read as a long, sparse list. .sbw-cal-body wraps the weekday\n labels + day grid into one grid item (rather than giving them each\n their own template row) so its height is independent of how tall\n .sbw-slots is -- with each in its own row instead, a long slots\n list (a busy day can have 20+ times) inflated the *shared* row\n tracks and pushed the day grid visually away from its own weekday\n header. Slots gets the flexible remaining column so extra width\n goes into more time-chip columns instead of unused space; the\n calendar gets a comfortable range (not a single fixed number) so it\n can grow a little on very wide hosts instead of looking squashed\n next to a much wider slots column, while still stopping well short\n of the dead-space-between-date-numbers stretching a bare 1fr gave it. */\n /* 54rem is the width this split actually needs, not a round number: the\n calendar's own minimum (20rem) plus the slots column's (14rem) plus the\n 2rem between them is 36rem, and in two-column mode this row has already\n given 16rem + 2rem to the summary. Below it the two stack instead, which\n is why the query is on the row rather than on the root -- a wide page\n with a narrow widget must still stack. Note the 52rem default cap on\n --sbw-datetime-max-width is under this, so a host wanting the calendar\n and slots side by side has to raise it. */\n @container sbw-dt (min-width: 54rem) {.sbw-calendar-col.svelte-1dxdgqu {display:grid;grid-template-columns:minmax(20rem, 28rem) minmax(14rem, 1fr);grid-template-areas:'body slots';column-gap:2rem;align-items:start;}.sbw-cal-body.svelte-1dxdgqu {grid-area:body;}.sbw-slots.svelte-1dxdgqu {grid-area:slots;}\n /* Extra specificity (not just .sbw-slots) so this reliably beats the\n unconditional base rule below regardless of source order -- the\n top border/margin/padding there exists to separate slots from a\n calendar stacked *above* it on narrow/mobile widths; side by side,\n it read as a stray line with nothing for it to separate. */.sbw-calendar-col.svelte-1dxdgqu .sbw-slots:where(.svelte-1dxdgqu) {margin-top:0;border-top:none;padding-top:0;}\n }.sbw-cal-header.svelte-1dxdgqu {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;}.sbw-cal-month.svelte-1dxdgqu {margin:0;font-size:1rem;font-weight:600;}.sbw-visually-hidden.svelte-1dxdgqu {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}.sbw-therapist-filter.svelte-1dxdgqu {position:relative;}.sbw-therapist-filter-trigger.svelte-1dxdgqu {display:flex;align-items:center;gap:0.5rem;border-radius:9999px;border:2px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);color:inherit;font:inherit;font-size:0.8125rem;padding:0.4rem 0.85rem;cursor:pointer;transition:border-color 320ms ease-out;}.sbw-therapist-filter-trigger.svelte-1dxdgqu:hover,\n .sbw-therapist-filter-trigger.svelte-1dxdgqu:focus-visible {border-color:var(--sbw-accent-color, #c49e5a);outline:none;}.sbw-chevron.svelte-1dxdgqu {width:1rem;height:1rem;flex-shrink:0;opacity:0.6;transition:transform 200ms ease;}.sbw-chevron-open.svelte-1dxdgqu {transform:rotate(180deg);}\n /* Native <select> option lists can't be styled -- they render as the\n browser's own unthemed popup regardless of any CSS here, which read\n as a jarring plain-white box against a themed (esp. dark) host page.\n This is a real listbox (button + popover), styled as a proper\n floating panel: opaque fill (not the translucent --sbw-input-bg\n inputs use, which assumes a solid page behind it -- this overlays\n arbitrary content) with an accent-tinted border and glow instead of\n a flat neutral edge. The 30%/25% mix amounts aren't picked to taste --\n they're the same two fixed proportions this library's other floating\n panels use for an accent border + glow (not a third, invented\n opacity), so re-skinning --sbw-accent-color still lands on a\n consistent-looking panel instead of a one-off tint. */.sbw-therapist-filter-panel.svelte-1dxdgqu {position:fixed;inset:auto;margin:0;min-width:9rem;max-height:15rem;overflow:auto;list-style:none;padding:0.25rem;border-radius:10px;border:1px solid color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 30%, transparent);background:var(--sbw-bg, #faf6ec);box-shadow:0 8px 24px rgba(0, 0, 0, 0.16), 0 0 24px color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 25%, transparent);}.sbw-therapist-filter-panel.svelte-1dxdgqu button:where(.svelte-1dxdgqu) {display:block;width:100%;border:none;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:left;padding:0.5rem 0.75rem;font-size:0.8125rem;cursor:pointer;}.sbw-therapist-filter-panel.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover,\n .sbw-therapist-filter-panel.svelte-1dxdgqu button[aria-selected='true']:where(.svelte-1dxdgqu) {background:color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 15%, transparent);}.sbw-cal-nav.svelte-1dxdgqu {display:flex;gap:0.25rem;}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu) {position:relative;z-index:0;display:flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;border-radius:9999px;border:2px solid var(--sbw-cal-nav-border-color, var(--sbw-border-color, rgba(0, 0, 0, 0.15)));background:none;color:var(--sbw-text-color, #1a1a1a);font-size:1.375rem;cursor:pointer;transition:border-color 320ms ease-out, color 320ms ease-out;}\n /* A fill growing from the button's centre (clip-path), not a flat\n colour cross-fade -- matches this library's other circular nav\n control (VenueCarousel's prev/next). Separate hook from\n --sbw-cal-hover-bg (the day-cell hover fill) on purpose: a consumer\n whose day-cell text needs that fill to stay same-color-as-background\n invisible (see mens-cave-barbers) still wants these nav buttons --\n icon glyphs, not text that could vanish -- to invert fully on hover.\n Falls back to the day-cell variable, then the original hardcoded\n tint, so existing consumers see no change. */.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu)::before {content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--sbw-cal-nav-hover-bg, var(--sbw-cal-hover-bg, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 6%, transparent)));clip-path:circle(0% at 50% 50%);transition:clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1);}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover:not(:disabled) {border-color:var(--sbw-cal-nav-hover-border-color, var(--sbw-accent-color, #c49e5a));color:var(--sbw-cal-nav-hover-color, var(--sbw-text-color, #1a1a1a));}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover:not(:disabled)::before {clip-path:circle(150% at 50% 50%);}\n /* The click-pulse (below) is this button's whole click-confirmation --\n no separate :active press state, so the two don't stack into a\n double-bounce (shrink-on-press, then the pulse's own scale-up).\n :global() on the pulse class itself -- it's only ever added via\n classList.add() in pulseNavButton above, never as a literal class\n in this template, so Svelte's unused-CSS pruning silently deleted\n this whole rule (keeping the @keyframes, which isn't pruned the\n same way) without :global() marking it as intentionally dynamic. */\n @keyframes svelte-1dxdgqu-sbw-cal-nav-pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.18); }\n 100% { transform: scale(1); }\n }.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu).sbw-cal-nav-pulse {\n animation: svelte-1dxdgqu-sbw-cal-nav-pulse 320ms ease-out;}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):disabled {cursor:default;opacity:0.3;}.sbw-cal-weekdays.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(7, 1fr);margin-top:1rem;text-align:center;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;opacity:0.4;}.sbw-cal-grid.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(7, 1fr);gap:2px;margin-top:0.25rem;}.sbw-cal-cell.svelte-1dxdgqu {height:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:2px solid transparent;border-radius:8px;background:none;font:inherit;font-size:0.875rem;color:inherit;cursor:pointer;transition:border-color 320ms ease-out, background-color 320ms ease-out, color 320ms ease-out;}\n /* Excludes .sbw-cal-cell-selected: this selector out-ranks the selected\n rule below (two pseudo-classes vs. one plain class), and without the\n exclusion hovering the selected day replaced its solid accent fill\n with this dimmer tint, reading as deselected while the mouse was over\n it. Same fix as AvailabilityCalendar.svelte's .ac-edge exclusion. */.sbw-cal-cell.svelte-1dxdgqu:hover:not(:disabled):not(.sbw-cal-cell-selected) {background:var(--sbw-cal-hover-bg, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 6%, transparent));color:var(--sbw-cal-hover-color, inherit);border-color:var(--sbw-accent-color, #c49e5a);}.sbw-cal-cell.svelte-1dxdgqu:disabled {cursor:default;}.sbw-cal-cell-off.svelte-1dxdgqu span:where(.svelte-1dxdgqu) {opacity:0.2;}.sbw-cal-cell.svelte-1dxdgqu:disabled:not(.sbw-cal-cell-off) span:where(.svelte-1dxdgqu):first-child {opacity:0.3;}.sbw-cal-cell-selected.svelte-1dxdgqu {background:var(--sbw-accent-color, #c49e5a);}.sbw-cal-cell-selected.svelte-1dxdgqu span:where(.svelte-1dxdgqu) {color:var(--sbw-accent-contrast, #fff);}.sbw-dot.svelte-1dxdgqu {width:4px;height:4px;border-radius:9999px;background:var(--sbw-accent-color, #c49e5a);}.sbw-dot-1.svelte-1dxdgqu {opacity:0.35;}.sbw-dot-2.svelte-1dxdgqu {opacity:0.65;}.sbw-dot-3.svelte-1dxdgqu {opacity:1;width:5px;height:5px;}\n /* Keeps the availability dot visible against --sbw-cal-hover-color's own\n fill -- without this it stayed --sbw-accent-color, which on a theme\n where hover flips to a dark fill with accent-colored TEXT (rather\n than the default light tint) would otherwise put an accent dot on an\n accent-colored background. */.sbw-cal-cell.svelte-1dxdgqu:hover:not(:disabled):not(.sbw-cal-cell-selected) .sbw-dot:where(.svelte-1dxdgqu) {background:var(--sbw-cal-hover-color, var(--sbw-accent-color, #c49e5a));}.sbw-cal-cell-selected.svelte-1dxdgqu .sbw-dot:where(.svelte-1dxdgqu) {background:var(--sbw-accent-contrast, #fff);opacity:1;}.sbw-slots.svelte-1dxdgqu {margin-top:1.5rem;border-top:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));padding-top:1.25rem;}\n /* One column, not auto-fit -- auto-fit let Morning/Afternoon/Evening\n sit side-by-side whenever the container was wide (e.g. the\n dashboard's full-width reschedule sheet), each cramped into a\n narrow track instead of the slot-buttons grid using the full\n width. Stacking the groups keeps each one's own 2-column button\n grid legible regardless of how wide the widget is rendered. */.sbw-slot-groups.svelte-1dxdgqu {display:grid;grid-template-columns:1fr;gap:1.25rem;}.sbw-slot-group-label.svelte-1dxdgqu {margin:0 0 0.5rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--sbw-slot-label-color, inherit);opacity:var(--sbw-slot-label-opacity, 0.5);}\n /* auto-fit: use as many columns as the (now flexible-width) slots\n area actually has room for, instead of a fixed count that either\n stretches into giant pills on a wide column or wastes space on a\n narrow one. */.sbw-slot-buttons.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(auto-fit, minmax(5.5rem, 1fr));gap:0.4rem;}.sbw-slot-btn.svelte-1dxdgqu {border-radius:9999px;border:2px solid var(--sbw-border-color, rgba(0, 0, 0, 0.35));background:var(--sbw-input-bg, #fff);box-shadow:0 1px 2px rgba(0, 0, 0, 0.06);padding:0.5rem 0.9rem;font:inherit;font-size:0.8125rem;color:inherit;cursor:pointer;transition:border-color 320ms ease-out, background-color 320ms ease-out, color 320ms ease-out;}\n /* Excludes .sbw-slot-btn-selected for the same reason as .sbw-cal-cell's\n own hover exclusion above: this selector's two classes + :hover\n otherwise out-ranks that one plain class and hovering the already-\n selected slot would replace its solid accent fill with this one. */.sbw-slot-btn.svelte-1dxdgqu:hover:not(.sbw-slot-btn-selected) {border-color:var(--sbw-accent-color, #c49e5a);background:var(--sbw-slot-hover-bg, var(--sbw-input-bg, #fff));color:var(--sbw-slot-hover-color, inherit);}.sbw-slot-btn-selected.svelte-1dxdgqu {background:var(--sbw-accent-color, #c49e5a);border-color:var(--sbw-accent-color, #c49e5a);color:var(--sbw-accent-contrast, #fff);\n /* Replays whenever this class lands on a *different* button (auto-pick\n or a manual re-pick), since that's a fresh application of the\n animation property -- makes the pick noticeable instead of a silent\n state change several buttons over from where the visitor is looking. */\n animation: svelte-1dxdgqu-sbw-slot-pop 0.3s ease;}\n @keyframes svelte-1dxdgqu-sbw-slot-pop {\n 0% { transform: scale(0.92); }\n 60% { transform: scale(1.04); }\n 100% { transform: scale(1); }\n }\n /* Flashes gold then settles, so a silently auto-picked time in the summary\n panel (easy to miss, off to the side) draws the eye same as the pop\n above does for the slot button itself. */.sbw-time-flash.svelte-1dxdgqu {\n animation: svelte-1dxdgqu-sbw-time-flash 0.6s ease;}\n @keyframes svelte-1dxdgqu-sbw-time-flash {\n 0% { color: var(--sbw-accent-color, #c49e5a); }\n 100% { color: inherit; }\n }\n\n /* --- Summary panel --- */\n /* Sticky, and it carries the primary CTA -- a Floating panel (canon:\n accent-tinted border + matching glow, same 30%/25% mix the\n therapist-filter panel uses) rather than Card surface's neutral\n border, so it reads as raised/active instead of another content\n block. Opaque --sbw-bg, not the translucent --sbw-input-bg inputs\n use -- that assumes a solid page directly behind it, but this\n panel sticks over whatever's scrolled underneath it. */.sbw-summary.svelte-1dxdgqu {border-radius:4px;border:1px solid color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 30%, transparent);background:var(--sbw-bg, #fff);box-shadow:0 8px 24px rgba(0, 0, 0, 0.16), 0 0 24px color-mix(in oklab, var(--sbw-accent-color, #c49e5a) 25%, transparent);padding:1.25rem;}\n @container sbw (min-width: 38rem) {.sbw-summary.svelte-1dxdgqu {position:sticky;top:var(--sbw-summary-sticky-top, 1rem);}\n }.sbw-summary-row.svelte-1dxdgqu {display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;font-size:0.9375rem;font-weight:600;}.sbw-summary-row-sub.svelte-1dxdgqu {margin-top:0.5rem;font-size:0.8125rem;font-weight:400;opacity:0.65;}\n /* Date and time are one fact, not a label/value pair -- keep them\n next to each other instead of the row's default space-between,\n which stretched them to opposite edges. Also the one -sub row that's\n actually the point of the summary (which slot you're about to book),\n so it overrides -sub's dimmed/thin defaults back up to fully legible\n instead of reading as fine print like the optional staff row above it. */.sbw-summary-row-datetime.svelte-1dxdgqu {justify-content:flex-start;gap:0.375rem;font-size:var(--sbw-summary-datetime-size, 0.875rem);font-weight:var(--sbw-summary-datetime-weight, 700);color:var(--sbw-summary-datetime-color, inherit);opacity:var(--sbw-summary-datetime-opacity, 1);}\n /* The post-booking \"Booked\" row's own timestamp value -- same\n reasoning and same variables as .sbw-summary-row-datetime above (it's\n the confirmed date/time, the actual point of this receipt-like row,\n not a footnote), just scoped to the value span rather than the whole\n row since this row keeps its label/value layout (space-between),\n unlike the label-less date+time row above. */.sbw-summary-row-bookedat-value.svelte-1dxdgqu {font-weight:var(--sbw-summary-datetime-weight, 700);color:var(--sbw-summary-datetime-color, inherit);opacity:var(--sbw-summary-datetime-opacity, 1);}.sbw-summary-total.svelte-1dxdgqu {display:flex;align-items:baseline;justify-content:space-between;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--sbw-summary-total-border-color, var(--sbw-border-color, rgba(0, 0, 0, 0.15)));font-size:0.9375rem;}.sbw-summary-total.svelte-1dxdgqu strong:where(.svelte-1dxdgqu) {font-size:1.125rem;color:var(--sbw-accent-color, #c49e5a);}.sbw-continue.svelte-1dxdgqu {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;margin-top:1.25rem;cursor:pointer;border:none;border-radius:2px;background:var(--sbw-accent-bg, #1a1a1a);color:var(--sbw-accent-contrast, #fff);padding:0.8rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:background-color 150ms ease;}.sbw-continue.svelte-1dxdgqu:hover:not(:disabled) {background:var(--sbw-accent-hover-bg, #333);}.sbw-continue.svelte-1dxdgqu:disabled {cursor:default;opacity:0.4;}\n\n /* --- Details step --- */.sbw-back.svelte-1dxdgqu {display:inline-block;margin-bottom:1.5rem;border:none;background:none;padding:0;font:inherit;color:inherit;font-size:0.8125rem;opacity:var(--sbw-back-opacity, 0.6);cursor:pointer;}.sbw-back.svelte-1dxdgqu:hover {opacity:var(--sbw-back-hover-opacity, 1);}.sbw-back-service.svelte-1dxdgqu {display:block;width:100%;margin-top:0.75rem;text-align:center;}.sbw-grid.svelte-1dxdgqu {display:grid;gap:1.25rem;}\n @container sbw (min-width: 640px) {.sbw-grid.svelte-1dxdgqu {grid-template-columns:1fr 1fr;}\n }.sbw-field.svelte-1dxdgqu {display:flex;flex-direction:column;gap:0.5rem;}.sbw-label.svelte-1dxdgqu {font-size:0.75rem;font-weight:300;text-transform:uppercase;letter-spacing:0.05em;}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu),\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu) {border-radius:2px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:0.75rem 1rem;font-size:0.875rem;font-family:inherit;color:inherit;}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):focus,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):focus {outline:none;border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu)::placeholder,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu)::placeholder {color:var(--sbw-placeholder-color, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 45%, transparent));}\n /* Browser autofill (matched saved Name/Email data) paints its own\n background on these inputs via a UA style strong enough that plain\n `background` can't win -- box-shadow can, so this fakes the field's\n normal look with an opaque inset fill instead. --sbw-input-autofill-bg\n falls back to --sbw-input-bg, which is enough for most themes (an\n opaque light input already matches when autofilled); only a theme\n whose --sbw-input-bg is itself transparent (mens-cave-barbers: fields\n defined by their border, not a fill, over a solid page background)\n needs to set this separately to that real opaque colour, or the\n browser's own fill shows through unmasked. The absurd transition delay\n is the standard defeat for Chrome's own internal autofill-background\n transition, which otherwise animates its colour in after this applies. */.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill,\n .sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill:hover,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill:hover,\n .sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill:focus,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill:focus {-webkit-text-fill-color:var(--sbw-text-color, #1a1a1a);-webkit-box-shadow:0 0 0 1000px var(--sbw-input-autofill-bg, var(--sbw-input-bg, #fff)) inset;box-shadow:0 0 0 1000px var(--sbw-input-autofill-bg, var(--sbw-input-bg, #fff)) inset;transition:background-color 600000s ease-in-out 0s;}.sbw-notes-field.svelte-1dxdgqu {margin-top:1.25rem;}.sbw-submit.svelte-1dxdgqu {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;margin-top:1.25rem;cursor:pointer;border:none;border-radius:2px;background:var(--sbw-accent-bg, #1a1a1a);color:var(--sbw-accent-contrast, #fff);padding:0.8rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:background-color 150ms ease;}.sbw-submit.svelte-1dxdgqu:hover:not(:disabled) {background:var(--sbw-accent-hover-bg, #333);}.sbw-submit.svelte-1dxdgqu:disabled {cursor:default;opacity:0.6;}.sbw-spinner.svelte-1dxdgqu {height:1rem;width:1rem;border-radius:9999px;border:2px solid color-mix(in oklab, var(--sbw-accent-contrast, #fff) 30%, transparent);border-top-color:var(--sbw-accent-contrast, #fff);\n animation: svelte-1dxdgqu-sbw-spin 0.7s linear infinite;}\n @keyframes svelte-1dxdgqu-sbw-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @media (prefers-reduced-motion: reduce) {.sbw-spinner.svelte-1dxdgqu {\n animation: none;}.sbw-slot-btn-selected.svelte-1dxdgqu,\n .sbw-time-flash.svelte-1dxdgqu {\n animation: none;}\n }.sbw-error-text.svelte-1dxdgqu {margin:0.75rem 0 0;font-size:0.8125rem;color:var(--sbw-danger-color, #dc2626);}\n\n /* --- Success --- */.sbw-success.svelte-1dxdgqu {max-width:var(--sbw-form-max-width, 40rem);margin:3rem auto 0;text-align:center;}.sbw-success-icon.svelte-1dxdgqu {display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto 1rem;border-radius:9999px;background:var(--sbw-success-bg, #c49e5a);color:#fff;}.sbw-success-icon.svelte-1dxdgqu svg:where(.svelte-1dxdgqu) {width:1.5rem;height:1.5rem;}.sbw-success.svelte-1dxdgqu .sbw-summary:where(.svelte-1dxdgqu) {margin-top:2rem;text-align:left;}.sbw-success.svelte-1dxdgqu p:where(.svelte-1dxdgqu) {margin:0;font-size:1.125rem;}"
|
|
15338
15338
|
}, Fi(["click"]), customElements.define("spa-booking-widget", Fs(V_, {
|
|
15339
15339
|
heading: {
|
|
15340
15340
|
attribute: "heading",
|