/* ===========================================================================
   style.showcase.css — Showcase   (replaces Studio)

   The expressive one. A contemporary retail-style layout: big rounded service
   cards, category headings that pin themselves as you scroll, and a standing
   appointment summary that keeps the running total in view.

   THREE THINGS MAKE IT DIFFERENT FROM THE OTHER THREE

   1. STRONG CATEGORY NAVIGATION. Each category's <summary> is sticky, so the
      heading you are inside stays pinned under the progress bar while its
      services scroll past. Scrolling a 53-service catalogue you always know
      where you are, and the previous category's heading pushes the current one
      up as it arrives. No markup change — the engine already emits
      <details class="svcGroup"><summary>, which is exactly the right shape.

   2. AN APPOINTMENT SUMMARY THAT EARNS ITS SPACE. Step 1's body becomes a
      two-column grid: the catalogue on the left, and on the right a sticky
      rail holding the chosen services, the running duration and price, and the
      continue button. Previously those sat in a row underneath and scrolled
      away. Again no markup change — .svcSelectedBar, .summary and .stepNav are
      already siblings inside .cardbody, so they just get placed.

   3. CARDS, NOT ROWS. Services are composed blocks: a colour-coded duration
      bar, the name at a readable size, the duration, and the price as the
      largest thing in the card, because price is what people compare.

   PALETTE
   Violet through magenta on warm off-white. Deliberately away from Signature's
   blue and Futuristic's cyan so the four are told apart instantly, and away
   from the cream-and-terracotta that generated "editorial" designs default to.
   The green in the duration coding is kept — it carries meaning, not style.
   =========================================================================== */

html[data-ui="showcase"] {
  --paper: #FBF9FE;
  --surface: #FFFFFF;
  --surface-2: #F5F0FC;
  --ink: #1A1230;
  --ink-2: #574A70;
  --ink-3: #8B7FA3;
  --line: #E9E1F5;
  --line-2: #F2ECFA;

  --violet: #6D28D9;
  --violet-2: #8B5CF6;
  --violet-100: #EDE6FD;
  --magenta: #C026D3;
  --magenta-100: #FAE8FF;
  --grad: linear-gradient(120deg, #6D28D9, #C026D3);

  --mint: #059669;
  --mint-100: #D1FAE5;
  --amber: #D97706;
  --rose: #BE123C;

  --sans: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --t1: 150ms cubic-bezier(.2, .8, .2, 1);
  --r: 18px;
  --r-lg: 24px;

  /* Baseline token remap; !important because applyTheme() writes these inline. */
  --bg: #FBF9FE !important;
  --card: #FFFFFF !important;
  --card-strong: #FFFFFF !important;
  --text: #1A1230 !important;
  --muted: #574A70 !important;
  --accent: #6D28D9 !important;
  --accent2: #6D28D9 !important;
  --accent-soft: #EDE6FD !important;
  --ok: #059669 !important;
  --ok-soft: #D1FAE5 !important;
  --danger: #BE123C !important;
  --warn: #D97706 !important;
  --border: #E9E1F5 !important;
  --border-2: #F2ECFA !important;
  --shadow: 0 24px 60px rgba(26, 18, 48, .12) !important;
  --shadow-2: 0 2px 12px rgba(26, 18, 48, .06) !important;
  --radius: 18px !important;
  --theme-bg: #FBF9FE !important;
  --theme-card: 255, 255, 255 !important;
  --theme-text: #1A1230 !important;
  --theme-muted: #574A70 !important;
  --theme-primary: #6D28D9 !important;
  --theme-outline: #6D28D9 !important;
  --panel-alpha: 1 !important;

  /* Toolbar contract */
  --ui-font: var(--sans);
  --ui-ink: var(--ink);
  --ui-ink-soft: var(--ink-2);
  --ui-surface: #FFFFFF;
  --ui-line: var(--line);
  --ui-accent: var(--violet);
  --ui-accent-ink: #fff;
  --ui-accent-soft: var(--violet-100);
  --ui-radius-pill: 999px;
  --ui-shadow: 0 2px 10px rgba(26, 18, 48, .10);
  --ui-ring: 0 0 0 3px rgba(109, 40, 217, .25);

  /* Interaction contract */
  --fx-hover-border: var(--violet-2);
  --fx-hover-bg: #F8F4FE;
  --fx-sel-border: var(--violet);
  --fx-sel-bg: var(--violet-100);
  --fx-sel-ink: var(--ink);
  --fx-sel-ring: 0 0 0 3px rgba(109, 40, 217, .20);
  --fx-sel-mark: var(--violet);
  --fx-sel-mark-ink: #fff;
  --fx-focus-color: var(--violet);
  --fx-disabled-bg: #F3F0F8;
  --fx-disabled-ink: #A79DB8;
  --fx-short-bg: rgba(5, 150, 105, .07);
  --fx-short-border: rgba(5, 150, 105, .26);
  --fx-long-bg: rgba(139, 92, 246, .08);
  --fx-long-border: rgba(139, 92, 246, .30);

  --auth-bg: #FBF9FE;
  --auth-surface: #FFFFFF;
  --auth-ink: #1A1230;
  --auth-ink-2: #574A70;
  --auth-muted: #8B7FA3;
  --auth-line: #E9E1F5;
  --auth-radius: 20px;
  --auth-shadow: 0 24px 60px rgba(26, 18, 48, .12);
  --auth-accent: #6D28D9;
  --auth-font: var(--sans);
  --auth-h1: 1.375rem;
}

/* beats booking.css:827 */
html[data-ui="showcase"],
html[data-ui="showcase"] body {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* A soft violet bloom behind the top of the page. beats booking.css:833. */
html[data-ui="showcase"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(60rem 28rem at 15% -8%, rgba(139, 92, 246, .16), transparent 65%),
    radial-gradient(46rem 24rem at 92% -4%, rgba(192, 38, 211, .12), transparent 60%) !important;
}

html[data-ui="showcase"] h1,
html[data-ui="showcase"] h2,
html[data-ui="showcase"] h3 {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--ink);
}
html[data-ui="showcase"] .small,
html[data-ui="showcase"] .muted,
html[data-ui="showcase"] .sub { color: var(--ink-2); }

/* --- toolbar ------------------------------------------------------------- */
html[data-ui="showcase"] .topbar,
html[data-ui="showcase"] .container > .nav {
  border-bottom: 1px solid var(--line);
}
html[data-ui="showcase"] .uiStyleSeg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 1px 3px rgba(26, 18, 48, .05);
}
html[data-ui="showcase"] .uiStyleBtn { font-weight: 700; }
html[data-ui="showcase"] .uiStyleBtn[aria-pressed="true"] {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 14px rgba(109, 40, 217, .32);
}
html[data-ui="showcase"] #loginBtn,
html[data-ui="showcase"] #myBookingsBtn,
html[data-ui="showcase"] #logoutBtn,
html[data-ui="showcase"] #signoutBtn,
html[data-ui="showcase"] #saveProfileBtn,
html[data-ui="showcase"] #myBookingsMakeBtn {
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  color: var(--violet) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  padding: .625rem 1.125rem !important;
  box-shadow: none !important;
}
html[data-ui="showcase"] #loginBtn:hover,
html[data-ui="showcase"] #myBookingsBtn:hover,
html[data-ui="showcase"] #logoutBtn:hover,
html[data-ui="showcase"] #signoutBtn:hover,
html[data-ui="showcase"] #saveProfileBtn:hover,
html[data-ui="showcase"] #myBookingsMakeBtn:hover {
  border-color: var(--violet-2) !important;
  background: var(--violet-100) !important;
}

/* --- progress ------------------------------------------------------------ */
html[data-ui="showcase"] .ab-progress {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 249, 254, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
html[data-ui="showcase"] .ab-progress-inner { padding-block: .875rem; }
html[data-ui="showcase"] .ab-dot {
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--ink-3);
  font-weight: 800;
}
html[data-ui="showcase"] .ab-label { font-weight: 700; color: var(--ink-2); }
html[data-ui="showcase"] .ab-step.active .ab-dot {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(109, 40, 217, .35);
}
html[data-ui="showcase"] .ab-step.done .ab-dot { border-color: var(--violet); color: var(--violet); }
html[data-ui="showcase"] .ab-step.active .ab-label,
html[data-ui="showcase"] .ab-step.done .ab-label { color: var(--ink) !important; }
html[data-ui="showcase"] .ab-line { background: var(--line); }

html[data-ui="showcase"] .welcomeNote {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 1.5rem 0 0 !important;
}
html[data-ui="showcase"] .welcomeSub { color: var(--ink-2); font-size: 1.02rem; max-width: 62ch; }

/* --- cards --------------------------------------------------------------- */
html[data-ui="showcase"] .card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 20px 50px rgba(26, 18, 48, .09) !important;
  overflow: visible;              /* sticky children need a non-clipping parent */
  margin-top: 1.75rem;
}
html[data-ui="showcase"] .cardheader {
  background: transparent;
  border-bottom: 1px solid var(--line-2);
  padding: 1.75rem 1.75rem 1.25rem;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
html[data-ui="showcase"] .cardheader h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
html[data-ui="showcase"] .cardheader .sub { font-size: .98rem; max-width: 64ch; margin-top: .5rem; }
html[data-ui="showcase"] .cardbody { padding: 1.5rem 1.75rem 1.75rem; }

html[data-ui="showcase"] .apptDateLabel {
  color: var(--ink-3);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
html[data-ui="showcase"] #date {
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 700;
  padding: .625rem .875rem;
}
html[data-ui="showcase"] #datePretty { color: var(--violet) !important; font-weight: 800; }

/* =========================================================================
   STEP 1 AS A TWO-COLUMN SHOP: catalogue + standing summary
   ========================================================================= */
@media (min-width: 1040px) {
  html[data-ui="showcase"] #step1Card .cardbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    grid-template-areas:
      "cat  chips"
      "cat  totals"
      "cat  nav"
      "cat  pad";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 1.75rem;
    align-items: start;
  }
  /* booking.css carries `#step1Card .cardbody > * { grid-column: 1 / -1
     !important }`, written when this body was a single column. Left alone it
     forces every child to span both columns, so the summary lands on top of
     the catalogue instead of beside it. These have to match that weight. */
  html[data-ui="showcase"] #step1Card .svcPanel {
    grid-area: cat !important;
    grid-column: 1 !important;
    min-width: 0;
  }
  html[data-ui="showcase"] #step1Card .svcSelectedBar {
    grid-area: chips !important;
    grid-column: 2 !important;
    position: sticky;
    top: 5.5rem;
  }
  html[data-ui="showcase"] #step1Card .summary {
    grid-area: totals !important;
    grid-column: 2 !important;
    position: sticky;
    top: 5.5rem;
  }
  html[data-ui="showcase"] #step1Card .stepNav {
    grid-area: nav !important;
    grid-column: 2 !important;
  }

  /* When nothing is chosen the engine hides the chips bar, so the totals rise
     to the top of the rail on their own. */
  html[data-ui="showcase"] #step1Card .svcSelectedBar[style*="display: none"] + .summary { top: 5.5rem; }
}

/* --- services: strong category navigation -------------------------------- */
html[data-ui="showcase"] .svcPanel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html[data-ui="showcase"] .svcTitle {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
html[data-ui="showcase"] .svcSub { color: var(--ink-3); font-size: .8rem; font-weight: 600; }
html[data-ui="showcase"] .svcSearch {
  font-family: var(--sans);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  padding: .625rem 1.125rem;
}
html[data-ui="showcase"] .svcSearch:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .16);
}

html[data-ui="showcase"] .svcGroup {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 1.25rem;
  overflow: visible;
}
/* The pinned category heading. This is the navigation. */
html[data-ui="showcase"] .svcGroup > summary {
  position: sticky;
  top: 4.25rem;
  z-index: 30;
  padding: .75rem 1rem;
  background: rgba(251, 249, 254, .95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(26, 18, 48, .06);
  margin-bottom: .875rem;
  transition: border-color var(--t1), box-shadow var(--t1);
}
html[data-ui="showcase"] .svcGroup > summary:hover {
  border-color: var(--violet-2);
  box-shadow: 0 6px 18px rgba(109, 40, 217, .14);
}
html[data-ui="showcase"] .svcGroup[open] > summary { border-color: var(--violet-100); }
html[data-ui="showcase"] .svcGroupName {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  font-size: 1.02rem;
}
html[data-ui="showcase"] .svcGroupMeta { color: var(--ink-3); font-size: .72rem; font-weight: 600; }
html[data-ui="showcase"] .svcGroupCount {
  background: var(--grad);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 .5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(109, 40, 217, .3);
}
html[data-ui="showcase"] .svcGroupHint { color: var(--ink-3); font-size: .82rem; margin-bottom: .5rem; }
html[data-ui="showcase"] .svcGroupBody { padding: 0 .125rem 0; }

/* --- service cards ------------------------------------------------------- */
html[data-ui="showcase"] .svcGrid,
html[data-ui="showcase"] .pills { display: grid; gap: .875rem; }

html[data-ui="showcase"] .svcPill {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "name" "meta" "price";
  align-content: start;
  gap: .375rem;
  width: 100%;
  text-align: left;
  padding: 1.125rem 2.5rem 1.125rem 1.125rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  box-shadow: 0 2px 10px rgba(26, 18, 48, .05);
  overflow: hidden;
}
/* The duration bar down the left edge — this is where the short/long coding
   lives in Showcase, so the card face can stay clean. */
html[data-ui="showcase"] .svcPill::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--fx-long-border);
}
html[data-ui="showcase"] .svcPill.durShort::before { background: var(--mint); }
html[data-ui="showcase"] .svcPill.durLong::before { background: var(--violet-2); }

html[data-ui="showcase"] .svcName {
  grid-area: name;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
html[data-ui="showcase"] .svcMeta { display: contents; }
html[data-ui="showcase"] .svcMeta > .svcDur {
  grid-area: meta;
  justify-self: start;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 999px;
  padding: .1875rem .625rem;
  letter-spacing: .01em;
}
html[data-ui="showcase"] .svcMeta > .svcPrice {
  grid-area: price;
  justify-self: start;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--violet);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: .125rem;
}

/* --- the standing appointment summary ------------------------------------ */
html[data-ui="showcase"] .svcSelectedBar {
  background: var(--violet-100);
  border: 1px solid var(--violet-100);
  border-radius: var(--r);
  padding: 1rem 1.125rem;
  margin-bottom: .875rem;
}
html[data-ui="showcase"] .svcSelectedTitle {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--violet);
  font-weight: 800;
  margin-bottom: .5rem;
}
html[data-ui="showcase"] .svcChip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
  padding: .3125rem .6875rem;
  box-shadow: none;
}
html[data-ui="showcase"] .summary {
  display: grid;
  gap: .75rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 1.125rem;
  box-shadow: 0 8px 24px rgba(26, 18, 48, .07);
  margin-bottom: .875rem;
}
/* Stacked, not side by side: "30 min (rounded to 15-min slots)" cannot share a
   line with its label in a 20rem rail without wrapping mid-phrase. */
html[data-ui="showcase"] .summary > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .125rem;
}
html[data-ui="showcase"] .summary > div + div { border-top: 1px solid var(--line-2); padding-top: .75rem; }
html[data-ui="showcase"] .summary .small {
  font-size: .78rem;
  color: var(--ink-2);
  font-weight: 700;
  order: -1;
}
html[data-ui="showcase"] #totalDuration,
html[data-ui="showcase"] #totalPrice {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
html[data-ui="showcase"] #totalPrice { color: var(--violet); font-size: 1.6rem; }

/* --- buttons ------------------------------------------------------------- */
html[data-ui="showcase"] .btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .95rem;
  padding: .8125rem 1.5rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--violet);
  border: 1.5px solid var(--line);
  box-shadow: none;
  transition: background var(--t1), border-color var(--t1), transform var(--t1), box-shadow var(--t1);
}
html[data-ui="showcase"] .btn:hover:not(:disabled) { border-color: var(--violet-2); background: var(--violet-100); }
html[data-ui="showcase"] .btn.primary,
html[data-ui="showcase"] #finalConfirmBtn {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(109, 40, 217, .32);
  width: 100%;
  justify-content: center;
}
html[data-ui="showcase"] .btn.primary:hover:not(:disabled),
html[data-ui="showcase"] #finalConfirmBtn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(109, 40, 217, .4);
}
html[data-ui="showcase"] .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
html[data-ui="showcase"] #step1Card .stepNav { display: grid; gap: .5rem; }
html[data-ui="showcase"] #step1Card .stepNav .right { display: grid; }

/* --- staff & time -------------------------------------------------------- */
html[data-ui="showcase"] .timeHeader { border-bottom: 1px solid var(--line); padding-bottom: .75rem; margin-bottom: 1rem; }
html[data-ui="showcase"] #employeeList > * + * { margin-top: .75rem; }
html[data-ui="showcase"] #employeeList .empCard,
html[data-ui="showcase"] #employeeList button {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  text-align: left;
  padding: .875rem 2.5rem .875rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--sans);
  box-shadow: 0 2px 10px rgba(26, 18, 48, .05);
}
html[data-ui="showcase"] #employeeList .empAvatar,
html[data-ui="showcase"] #employeeList .avatar,
html[data-ui="showcase"] #employeeList .initials {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .9rem;
  flex: none;
  box-shadow: 0 4px 12px rgba(109, 40, 217, .28);
}
html[data-ui="showcase"] .empName { font-weight: 800; letter-spacing: -.01em; }
html[data-ui="showcase"] .empMeta { color: var(--ink-2); }

html[data-ui="showcase"] .slotgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .625rem;
}
html[data-ui="showcase"] .slotgrid button {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  padding: .8125rem .5rem;
  text-align: center;
  white-space: nowrap;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  box-shadow: none;
}

/* --- review & confirm ---------------------------------------------------- */
html[data-ui="showcase"] .reviewBox {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 2px 10px rgba(26, 18, 48, .05);
  padding: 1.25rem 1.375rem;
  color: var(--ink);
}
html[data-ui="showcase"] #loginNote { background: var(--violet-100); border-color: var(--violet-100); }
html[data-ui="showcase"] .reviewBox label {
  font-weight: 800;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}
html[data-ui="showcase"] #custName,
html[data-ui="showcase"] #custPhone,
html[data-ui="showcase"] #custNotes {
  font-family: var(--sans);
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: .75rem .875rem;
  color: var(--ink);
  background: var(--surface);
  font-weight: 600;
}
html[data-ui="showcase"] #custName:focus,
html[data-ui="showcase"] #custPhone:focus,
html[data-ui="showcase"] #custNotes:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .16);
}
html[data-ui="showcase"] .invalid,
html[data-ui="showcase"] [aria-invalid="true"] {
  border-color: var(--rose) !important;
  box-shadow: 0 0 0 3px rgba(190, 18, 60, .14) !important;
}
html[data-ui="showcase"] .termsRowInline { color: var(--ink-2); }
html[data-ui="showcase"] .termsRowInline a { color: var(--violet); font-weight: 700; }

/* --- sticky bar + dialogs ------------------------------------------------ */
html[data-ui="showcase"] #stickyCta {
  background: rgba(251, 249, 254, .95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(26, 18, 48, .07);
}
html[data-ui="showcase"] #stickyServices,
html[data-ui="showcase"] #stickyDate { color: var(--ink); font-weight: 700; }
html[data-ui="showcase"] .modalCard,
html[data-ui="showcase"] .modalCardPro,
html[data-ui="showcase"] .msgCard,
html[data-ui="showcase"] .thankCard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px rgba(26, 18, 48, .25);
  font-family: var(--sans);
  color: var(--ink);
}
html[data-ui="showcase"] .msgTitle,
html[data-ui="showcase"] .modalTitlePro,
html[data-ui="showcase"] .thankTitle { font-weight: 800; letter-spacing: -.02em; }
html[data-ui="showcase"] .userPill {
  background: var(--violet-100);
  border: 1px solid var(--violet-100);
  border-radius: 999px;
  color: var(--violet);
  font-weight: 700;
}
html[data-ui="showcase"] .notifBanner { background: var(--ink); color: #fff; }
html[data-ui="showcase"] .notifBtn { background: var(--grad); color: #fff; border: 0; border-radius: 999px; font-weight: 700; }

/* --- baseline overrides needing matching weight -------------------------- */
html[data-ui="showcase"] .svcGroupBody .svcGrid,
html[data-ui="showcase"] #serviceList .svcGrid,
html[data-ui="showcase"] .pills.svcGrid { grid-template-columns: 1fr !important; }
@media (min-width: 700px) {
  html[data-ui="showcase"] .svcGroupBody .svcGrid,
  html[data-ui="showcase"] #serviceList .svcGrid,
  html[data-ui="showcase"] .pills.svcGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1720px) {
  html[data-ui="showcase"] .svcGroupBody .svcGrid,
  html[data-ui="showcase"] #serviceList .svcGrid,
  html[data-ui="showcase"] .pills.svcGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
html[data-ui="showcase"] .pill .svcName {
  grid-area: name !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
html[data-ui="showcase"] .pill .svcMeta { display: contents !important; }
html[data-ui="showcase"] #serviceList .svcGrid .svcPill { height: 100% !important; }
html[data-ui="showcase"] .card { box-shadow: 0 20px 50px rgba(26, 18, 48, .09) !important; }
/* .card must not clip, or the sticky category headings are trapped. */
html[data-ui="showcase"] .card,
html[data-ui="showcase"] #step1Card .cardbody,
html[data-ui="showcase"] .svcPanel,
html[data-ui="showcase"] .svcGroup { overflow: visible !important; }

@media (max-width: 560px) {
  html[data-ui="showcase"] .cardheader { padding: 1.25rem 1.125rem 1rem; }
  html[data-ui="showcase"] .cardbody { padding: 1.125rem; }
  html[data-ui="showcase"] .svcGroup > summary { top: 3.5rem; padding: .625rem .875rem; }
  html[data-ui="showcase"] .svcPill { padding: 1rem 2.25rem 1rem 1rem; }
  html[data-ui="showcase"] .svcMeta > .svcPrice { font-size: 1.35rem; }
  html[data-ui="showcase"] .slotgrid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
}