/* ============================================================================
   SKYN Clinic — SimplyBookMe Custom CSS
   ----------------------------------------------------------------------------
   Target:       skynclinicjkt.simplybook.asia/v2/ (booking page full)
   Scope:        Universal SKYN Clinic services (Hypodermic, all treatments)
   Strategy:     Visual styling only. No copy overrides. Defensive selectors
                 covering SimplyBookMe v2 React class patterns + fallbacks.
   Brand voice:  Precise. Direct. Credible. (visual translation = clean lines,
                 generous whitespace, mint accent restraint, no gold ever)

   INSTALL:      SimplyBookMe Admin → Settings → Design → Custom CSS
                 Paste this entire file. Save. Hard refresh booking page.

   MAINTENANCE:  If SimplyBookMe updates DOM, update selectors only — brand
                 tokens (CSS variables) stay locked. Re-test on booking flow
                 step-by-step: service → provider → date → time → info → confirm.

   Last updated: 2026-05-28
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. FONT IMPORT — Figtree (primary brand font, SKYN Group locked)
   ----------------------------------------------------------------------------
   FIX 2026-05-28 v3: @import sometimes blocked by SimplyBookMe CSS sanitizer.
   Fallback strategy = direct @font-face declarations with WOFF2 URLs.
   Both @import AND @font-face declared for maximum compatibility — if one
   gets stripped, the other survives.
   ---------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/* Direct @font-face fallback — survives @import sanitization */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v5/_Xmz-HUzqDCFdgfMm4q9DbpyzS6e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v5/_Xms-HUzqDCFdgfMsYiV_F7wfS-Bs_d_QF7Lva_HIaCY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* UNIVERSAL FONT OVERRIDE — body prefix + universal selector for maximum cascade
   reach. Covers homepage cover/header section that uses SimplyBookMe-specific
   class names not caught by earlier selectors (.sb-company-name, .sb-cover-title,
   [class*="CompanyName"], [class*="CoverTitle"], [class*="Hero"], etc.) */
html body,
html body *,
html body *::before,
html body *::after {
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
}


/* ----------------------------------------------------------------------------
   2. BRAND TOKENS — CSS Custom Properties (single source of truth)
   ---------------------------------------------------------------------------- */

:root {
  /* Colors — SKYN Group locked palette */
  --skyn-black:       #232323;
  --skyn-white:       #FFFFFF;
  --skyn-cream:       #F5F1ED;
  --skyn-mint:        #7FD1C4;
  --skyn-mint-dark:   #5FB8AB;   /* hover state, derived */
  --skyn-mint-soft:   #E5F5F2;   /* tint for subtle backgrounds, derived */
  --skyn-periwinkle:  #C4D0E9;
  --skyn-slate:       #70798C;
  --skyn-slate-soft:  #B8BFC9;   /* derived for borders/disabled */
  --skyn-slate-line:  #E4E6EA;   /* derived for dividers */

  /* Typography */
  --skyn-font:        'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --skyn-weight-reg:  400;
  --skyn-weight-med:  500;
  --skyn-weight-semi: 600;
  --skyn-weight-bold: 700;

  /* Radii — SKYN uses soft rounded, not sharp, not pill */
  --skyn-radius-sm:   6px;
  --skyn-radius-md:   10px;
  --skyn-radius-lg:   16px;
  --skyn-radius-pill: 999px;

  /* Spacing rhythm */
  --skyn-space-xs:    8px;
  --skyn-space-sm:    12px;
  --skyn-space-md:    16px;
  --skyn-space-lg:    24px;
  --skyn-space-xl:    32px;

  /* Shadows — restrained, brand-credible */
  --skyn-shadow-card: 0 2px 12px rgba(35, 35, 35, 0.06);
  --skyn-shadow-hover:0 4px 20px rgba(35, 35, 35, 0.10);
  --skyn-shadow-focus:0 0 0 3px rgba(127, 209, 196, 0.30);

  /* Transitions */
  --skyn-transition:  150ms ease-out;
}


/* ----------------------------------------------------------------------------
   3. GLOBAL RESET + TYPOGRAPHY
   ---------------------------------------------------------------------------- */

body,
html,
.sb-container,
[class*="App"],
[class*="Container"],
[class*="Layout"] {
  font-family: var(--skyn-font) !important;
  color: var(--skyn-black);
  background-color: var(--skyn-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Figtree semibold/bold for hierarchy, no italic */
h1, h2, h3, h4, h5, h6,
[class*="Title"],
[class*="Heading"] {
  font-family: var(--skyn-font) !important;
  font-weight: var(--skyn-weight-semi) !important;
  color: var(--skyn-black) !important;
  letter-spacing: -0.01em;
}

h1, [class*="Title"][class*="large"] { font-size: 1.75rem; line-height: 1.2; }
h2 { font-size: 1.375rem; line-height: 1.3; }
h3 { font-size: 1.125rem; line-height: 1.4; }

/* Body + paragraphs */
p, span, div, label,
[class*="Text"],
[class*="Description"] {
  font-family: var(--skyn-font);
  color: var(--skyn-black);
  line-height: 1.5;
}

/* Muted text — slate gray for secondary info */
[class*="muted"],
[class*="secondary"],
[class*="hint"],
[class*="subtitle"],
small {
  color: var(--skyn-slate) !important;
}

/* Links — mint accent, no underline default, underline on hover */
a, a:visited,
[class*="link"] {
  color: var(--skyn-mint-dark) !important;
  text-decoration: none;
  transition: color var(--skyn-transition);
}
a:hover, [class*="link"]:hover {
  color: var(--skyn-black) !important;
  text-decoration: underline;
}


/* ----------------------------------------------------------------------------
   4. LAYOUT CONTAINERS — page background, panels, cards
   ---------------------------------------------------------------------------- */

/* Page background — cream gives warmth without distraction */
body,
.sb-public-page,
[class*="PublicPage"],
[class*="BookingPage"] {
  background-color: var(--skyn-cream) !important;
}

/* Main content card — white sits on cream */
.sb-content,
.sb-widget,
[class*="MainContent"],
[class*="Wizard"],
[class*="StepContainer"] {
  background-color: var(--skyn-white) !important;
  border-radius: var(--skyn-radius-lg) !important;
  box-shadow: var(--skyn-shadow-card) !important;
  border: none !important;
}

/* Inner sections / panels */
.sb-panel,
.sb-section,
[class*="Panel"]:not([class*="Wizard"]),
[class*="Section"] {
  background-color: transparent !important;
  border: none !important;
}


/* ----------------------------------------------------------------------------
   5. HEADER / NAVIGATION — clinic name, logo area, step bar
   ----------------------------------------------------------------------------
   FIX 2026-05-28 v4: Decoupled into 5a (clinic name banner / cover header)
   + 5b (main menu / top nav links). Section 5b uses WHITE bg + BLACK active
   link + MINT underline indicator — cleaner modern brand expression than
   black flood. Restraint on mint (aksen, bukan flood).
   ---------------------------------------------------------------------------- */

/* 5a. CLINIC NAME BANNER / COVER HEADER (the "Jakarta Modern Wellness Clinic"
   block above page content) — kept light to match cover image aesthetic */
.sb-cover,
.sb-page-header,
[class*="Cover"]:not([class*="Image"]):not([class*="Photo"]),
[class*="PageHeader"],
[class*="HeroBanner"] {
  background-color: transparent !important;
  padding: var(--skyn-space-lg) var(--skyn-space-xl) !important;
  border: none !important;
}

.sb-company-name,
[class*="CompanyName"],
[class*="ClinicName"],
[class*="CoverTitle"] {
  color: var(--skyn-black) !important;
  -webkit-text-fill-color: var(--skyn-black) !important;
  font-weight: var(--skyn-weight-bold) !important;
  font-size: 2rem !important;
  letter-spacing: -0.02em;
}

/* 5b. MAIN NAV MENU (Home / Reviews / My Bookings / Waiting List)
   ============================================================== */

nav,
.sb-main-menu,
.sb-top-menu,
.sb-public-menu,
.sb-nav,
[class*="MainMenu"],
[class*="TopMenu"],
[class*="PublicMenu"],
[class*="Navigation"]:not([class*="Container"]):not([class*="Header"]),
[class*="MenuBar"],
[class*="navbar"],
[class*="topbar"] {
  background-color: var(--skyn-white) !important;
  border-bottom: 1px solid var(--skyn-slate-line) !important;
  padding: var(--skyn-space-md) var(--skyn-space-lg) !important;
  box-shadow: none !important;
}

/* Nav link items — slate default, no underline */
body nav a,
body nav button:not([type="submit"]):not([class*="primary"]):not([class*="secondary"]),
body .sb-main-menu a,
body .sb-top-menu a,
body .sb-public-menu a,
body .sb-nav a,
body [class*="MainMenu"] a,
body [class*="TopMenu"] a,
body [class*="PublicMenu"] a,
body [class*="Navigation"]:not([class*="Container"]) a,
body [class*="MenuBar"] a,
body [class*="navbar"] a,
body [class*="topbar"] a,
body [class*="MenuItem"]:not([class*="active"]),
body [class*="NavLink"]:not([class*="active"]) {
  color: var(--skyn-slate) !important;
  -webkit-text-fill-color: var(--skyn-slate) !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: var(--skyn-weight-med) !important;
  font-size: 0.9375rem !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: var(--skyn-space-sm) var(--skyn-space-md) !important;
  text-decoration: none !important;
  position: relative;
  transition: color var(--skyn-transition) !important;
  text-transform: none !important;
  letter-spacing: normal;
  min-height: auto !important;
}

/* Nav link hover — black */
body nav a:hover,
body .sb-main-menu a:hover,
body .sb-nav a:hover,
body [class*="MainMenu"] a:hover,
body [class*="TopMenu"] a:hover,
body [class*="Navigation"]:not([class*="Container"]) a:hover,
body [class*="navbar"] a:hover,
body [class*="NavLink"]:hover {
  color: var(--skyn-black) !important;
  -webkit-text-fill-color: var(--skyn-black) !important;
  background-color: transparent !important;
  transform: none !important;
}

/* Nav link ACTIVE state — black bold + mint underline */
body nav a.active,
body nav a[class*="active"],
body nav a[aria-current="page"],
body nav a[aria-current="true"],
body nav a.selected,
body .sb-main-menu a.active,
body .sb-main-menu a[class*="active"],
body .sb-nav a.active,
body [class*="MainMenu"] a.active,
body [class*="MainMenu"] a[class*="active"],
body [class*="TopMenu"] a.active,
body [class*="Navigation"]:not([class*="Container"]) a.active,
body [class*="Navigation"]:not([class*="Container"]) a[class*="active"],
body [class*="navbar"] a.active,
body [class*="NavLink"].active,
body [class*="NavLink"][class*="active"],
body [class*="MenuItem"].active,
body [class*="MenuItem"][class*="active"] {
  color: var(--skyn-black) !important;
  -webkit-text-fill-color: var(--skyn-black) !important;
  font-weight: var(--skyn-weight-bold) !important;
  background-color: transparent !important;
}

/* Active link MINT UNDERLINE indicator — 3px mint bar below */
body nav a.active::after,
body nav a[class*="active"]::after,
body nav a[aria-current="page"]::after,
body nav a[aria-current="true"]::after,
body nav a.selected::after,
body .sb-main-menu a.active::after,
body .sb-main-menu a[class*="active"]::after,
body [class*="MainMenu"] a.active::after,
body [class*="MainMenu"] a[class*="active"]::after,
body [class*="Navigation"]:not([class*="Container"]) a.active::after,
body [class*="Navigation"]:not([class*="Container"]) a[class*="active"]::after,
body [class*="NavLink"].active::after,
body [class*="NavLink"][class*="active"]::after,
body [class*="MenuItem"].active::after,
body [class*="MenuItem"][class*="active"]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: var(--skyn-space-md);
  right: var(--skyn-space-md);
  height: 3px;
  background-color: var(--skyn-mint) !important;
  border-radius: 2px;
  display: block;
}

/* Profile / Sign-in / Login icon — circular button with INJECTED SVG icon.
   FIX v8: ::before pseudo-element overlay (more reliable than background-image
   because it physically sits ON TOP of button content regardless of internal
   structure). position: absolute centered. */

body nav [class*="profile"],
body nav [class*="login"]:not([class*="form"]):not([class*="Form"]),
body nav [class*="signin"],
body nav [class*="SignIn"]:not([class*="form"]):not([class*="Form"]):not([class*="button"]),
body nav [class*="UserMenu"],
body nav [class*="UserButton"],
body nav [class*="UserAvatar"],
body nav [class*="ProfileButton"],
body nav [class*="AccountButton"],
body [class*="MainMenu"] [class*="profile"],
body [class*="MainMenu"] [class*="UserMenu"],
body [class*="Navigation"]:not([class*="Container"]) [class*="profile"],
body [class*="Navigation"]:not([class*="Container"]) [class*="UserMenu"],
body [class*="navbar"] [class*="UserAvatar"],
body button[aria-label*="login" i]:not([class*="form"]):not([type="submit"]),
body button[aria-label*="sign in" i]:not([class*="form"]):not([type="submit"]),
body button[aria-label*="account" i]:not([class*="form"]):not([type="submit"]),
body button[aria-label*="profile" i]:not([class*="form"]) {
  position: relative !important;
  overflow: visible !important;
}

body nav [class*="profile"]::before,
body nav [class*="login"]:not([class*="form"])::before,
body nav [class*="signin"]::before,
body nav [class*="SignIn"]:not([class*="form"]):not([class*="button"])::before,
body nav [class*="UserMenu"]::before,
body nav [class*="UserButton"]::before,
body nav [class*="UserAvatar"]::before,
body nav [class*="ProfileButton"]::before,
body nav [class*="AccountButton"]::before,
body [class*="MainMenu"] [class*="profile"]::before,
body [class*="MainMenu"] [class*="UserMenu"]::before,
body [class*="Navigation"]:not([class*="Container"]) [class*="profile"]::before,
body [class*="Navigation"]:not([class*="Container"]) [class*="UserMenu"]::before,
body [class*="navbar"] [class*="UserAvatar"]::before,
body button[aria-label*="login" i]:not([class*="form"]):not([type="submit"])::before,
body button[aria-label*="sign in" i]:not([class*="form"]):not([type="submit"])::before,
body button[aria-label*="account" i]:not([class*="form"]):not([type="submit"])::before,
body button[aria-label*="profile" i]:not([class*="form"])::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23232323' 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");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}

/* Profile button base styling — circular outline, white bg, slate border */
body nav [class*="profile"],
body nav [class*="login"]:not([class*="form"]):not([class*="Form"]),
body nav [class*="signin"],
body nav [class*="SignIn"],
body nav [class*="avatar"],
body nav [class*="user-menu"],
body nav [class*="UserMenu"],
body nav [class*="UserButton"],
body nav [class*="UserAvatar"],
body nav [class*="ProfileButton"],
body nav [class*="AccountButton"],
body [class*="MainMenu"] [class*="profile"],
body [class*="MainMenu"] [class*="login"]:not([class*="form"]),
body [class*="MainMenu"] [class*="signin"],
body [class*="MainMenu"] [class*="avatar"],
body [class*="MainMenu"] [class*="UserMenu"],
body [class*="Navigation"]:not([class*="Container"]) [class*="profile"],
body [class*="Navigation"]:not([class*="Container"]) [class*="UserMenu"],
body [class*="Navigation"]:not([class*="Container"]) [class*="login"]:not([class*="form"]),
body [class*="Navigation"]:not([class*="Container"]) [class*="signin"],
body [class*="navbar"] [class*="UserAvatar"],
body [class*="navbar"] [class*="login"]:not([class*="form"]),
body [class*="navbar"] [class*="signin"] {
  background-color: var(--skyn-white) !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23232323' 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") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  border: 2px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-pill) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  cursor: pointer !important;
  transition: border-color var(--skyn-transition), background-color var(--skyn-transition) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Hide internal children of profile icon — they're empty or interfere
   with injected background-image. Keeps only our SVG icon visible. */
body nav [class*="profile"] *,
body nav [class*="login"]:not([class*="form"]) *,
body nav [class*="signin"] *,
body nav [class*="UserMenu"] *,
body nav [class*="UserButton"] *,
body nav [class*="UserAvatar"] *,
body [class*="MainMenu"] [class*="profile"] *,
body [class*="MainMenu"] [class*="UserMenu"] *,
body [class*="Navigation"]:not([class*="Container"]) [class*="profile"] *,
body [class*="Navigation"]:not([class*="Container"]) [class*="UserMenu"] *,
body [class*="navbar"] [class*="UserAvatar"] * {
  display: none !important;
}

/* Hover state — mint-soft fill + mint border */
body nav [class*="profile"]:hover,
body nav [class*="login"]:not([class*="form"]):hover,
body nav [class*="signin"]:hover,
body nav [class*="UserMenu"]:hover,
body nav [class*="UserButton"]:hover,
body [class*="MainMenu"] [class*="profile"]:hover,
body [class*="MainMenu"] [class*="UserMenu"]:hover,
body [class*="Navigation"]:not([class*="Container"]) [class*="profile"]:hover,
body [class*="Navigation"]:not([class*="Container"]) [class*="UserMenu"]:hover {
  border-color: var(--skyn-mint) !important;
  background-color: var(--skyn-mint-soft) !important;
}

/* Logo placeholder in nav */
.sb-logo img,
nav [class*="logo"] img,
nav [class*="Logo"] img,
[class*="Navigation"]:not([class*="Container"]) [class*="Logo"] img {
  max-height: 40px;
  width: auto;
}

/* HAMBURGER MENU toggle (mobile) — small icon-only button next to profile */
body nav [class*="hamburger"],
body nav [class*="Hamburger"],
body nav [class*="MenuToggle"],
body nav [class*="menu-toggle"],
body nav [class*="NavToggle"],
body nav [class*="mobile-menu-button"],
body nav [aria-label*="menu" i]:not([class*="link"]):not([class*="item"]),
body [class*="MainMenu"] [class*="hamburger"],
body [class*="MainMenu"] [class*="MenuToggle"],
body [class*="Navigation"]:not([class*="Container"]) [class*="hamburger"],
body [class*="navbar"] [class*="hamburger"],
body button[aria-label*="open menu" i],
body button[aria-label*="close menu" i] {
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-pill) !important;
  color: #232323 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transform: none !important;
  box-shadow: none !important;
}

body nav [class*="hamburger"] svg,
body nav [class*="MenuToggle"] svg,
body [class*="MainMenu"] [class*="hamburger"] svg,
body button[aria-label*="menu" i]:not([class*="link"]):not([class*="item"]) svg {
  width: 20px !important;
  height: 20px !important;
  fill: #232323 !important;
  stroke: #232323 !important;
  color: #232323 !important;
}

body nav [class*="hamburger"]:hover,
body nav [class*="MenuToggle"]:hover,
body button[aria-label*="menu" i]:hover {
  border-color: var(--skyn-mint) !important;
  background-color: var(--skyn-mint-soft) !important;
}

/* MOBILE NAVBAR LAYOUT — flex container with proper gap to prevent overlap.
   FIX v7: Profile icon + hamburger were stacked too close, visually overlapping.
   Force flex + gap + space-between for clean mobile layout. */
@media (max-width: 900px) {
  body nav,
  body .sb-main-menu,
  body .sb-top-menu,
  body .sb-public-menu,
  body [class*="MainMenu"]:not([class*="Item"]),
  body [class*="TopMenu"]:not([class*="Item"]),
  body [class*="PublicMenu"]:not([class*="Item"]),
  body [class*="Navigation"]:not([class*="Container"]):not([class*="Item"]):not([class*="Link"]),
  body [class*="navbar"]:not([class*="item"]),
  body [class*="topbar"]:not([class*="item"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: var(--skyn-space-sm) !important;
    padding: var(--skyn-space-sm) var(--skyn-space-md) !important;
    overflow: visible !important;
  }

  /* Logo column — shrinks first if space tight */
  body nav [class*="logo"]:not(svg):not(img),
  body nav [class*="Logo"]:not(svg):not(img),
  body [class*="MainMenu"] [class*="Logo"]:not(svg):not(img),
  body [class*="Navigation"]:not([class*="Container"]) [class*="Logo"]:not(svg):not(img) {
    flex: 0 1 auto !important;
    margin-right: auto !important;
    max-width: 50% !important;
  }

  /* Right-side actions cluster (profile + hamburger) — flex with gap */
  body nav [class*="actions"],
  body nav [class*="Actions"],
  body nav [class*="right"],
  body nav [class*="Right"],
  body [class*="MainMenu"] [class*="actions"],
  body [class*="Navigation"]:not([class*="Container"]) [class*="actions"] {
    display: flex !important;
    align-items: center !important;
    gap: var(--skyn-space-sm) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* Profile + hamburger spacing safety — direct sibling gap */
  body nav [class*="profile"] + [class*="hamburger"],
  body nav [class*="login"] + [class*="hamburger"],
  body nav [class*="signin"] + [class*="hamburger"],
  body nav [class*="UserMenu"] + [class*="MenuToggle"],
  body nav [class*="UserButton"] + [class*="hamburger"] {
    margin-left: var(--skyn-space-sm) !important;
  }

  /* Hide nav links on mobile when hamburger is present — they're in dropdown.
     Keeps top bar clean: logo + profile + hamburger only */
  body nav > [class*="link"]:not([class*="logo"]):not([class*="profile"]):not([class*="login"]):not([class*="signin"]):not([class*="hamburger"]):not([class*="UserMenu"]):not([class*="actions"]),
  body nav > [class*="Link"]:not([class*="logo"]):not([class*="profile"]):not([class*="login"]):not([class*="signin"]):not([class*="hamburger"]):not([class*="UserMenu"]):not([class*="actions"]) {
    /* Let SimplyBookMe handle visibility — don't force hide.
       Just ensure they wrap/collapse properly. */
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}


/* ----------------------------------------------------------------------------
   6. BUTTONS — primary mint CTA, secondary outline, disabled, states
   ----------------------------------------------------------------------------
   FIX 2026-05-28 v2: SimplyBookMe injects Tailwind-style utility classes
   (.tw-text-white etc.) with high specificity that beat our [class*="Button"] *
   rules. Solution: -webkit-text-fill-color silver bullet (overrides `color`
   property in WebKit/Blink, which is 99% of browsers Greggy's customers use)
   + literal hex values (no var) + body prefix for specificity bump.
   ---------------------------------------------------------------------------- */

/* ALL BUTTONS — base reset, kills SimplyBookMe transparent/gradient default */
button,
.btn,
input[type="button"],
input[type="submit"],
[class*="Button"]:not([class*="Group"]):not([class*="Container"]),
[role="button"],
a.btn,
a[class*="button"] {
  background-color: var(--skyn-mint) !important;
  background-image: none !important;
  color: var(--skyn-black) !important;
  border: 2px solid var(--skyn-mint) !important;
  font-family: var(--skyn-font) !important;
  font-weight: var(--skyn-weight-bold) !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.02em;
  padding: 12px 24px !important;
  border-radius: var(--skyn-radius-md) !important;
  cursor: pointer;
  transition: all var(--skyn-transition) !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  min-height: 44px;
  text-decoration: none !important;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* CRITICAL FIX v2 — silver bullet for button text visibility.
   SimplyBookMe injects Tailwind utility classes (.tw-text-white) and theme
   color picker rules with high specificity. We use 3 techniques together:
   1. -webkit-text-fill-color (overrides `color` in WebKit/Blink, ~99% of browsers)
   2. Literal hex #232323 (no CSS var dependency, no resolution lag)
   3. body prefix for specificity bump + chain selectors for extra weight */

body button,
body button *,
body .btn,
body .btn *,
body input[type="submit"],
body input[type="submit"] *,
body [class*="Button"]:not([class*="Group"]):not([class*="Container"]),
body [class*="Button"]:not([class*="Group"]):not([class*="Container"]) *,
body [role="button"],
body [role="button"] *,
body a.btn,
body a.btn *,
body a[class*="button"],
body a[class*="button"] * {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  text-shadow: none !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Kill Tailwind text color utility classes inside buttons — explicit override */
body button [class*="tw-text-white"],
body button [class*="text-white"],
body button [class*="tw-text-light"],
body button [class*="text-light"],
body [class*="Button"] [class*="tw-text-white"],
body [class*="Button"] [class*="text-white"],
body [class*="Button"] [class*="tw-text-light"],
body [class*="Button"] [class*="text-light"] {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
}

/* Background on descendants — transparent to prevent stripe artifacts */
body button > *,
body .btn > *,
body [class*="Button"]:not([class*="Group"]):not([class*="Container"]) > *,
body [role="button"] > * {
  background-color: transparent !important;
  background-image: none !important;
}

/* Icons (svg/i) inside buttons — black for contrast on mint bg */
body button svg,
body button svg *,
body button i,
body .btn svg,
body .btn svg *,
body .btn i,
body [class*="Button"] svg,
body [class*="Button"] svg *,
body [class*="Button"] i,
body [role="button"] svg,
body [role="button"] svg * {
  fill: #232323 !important;
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  stroke: #232323 !important;
}

/* PRIMARY CTA — explicit override (same as base, defends against specificity wars) */
button.primary,
button.btn-primary,
button[class*="primary"],
.btn.primary,
.btn-primary,
[class*="Button"][class*="primary"],
[class*="button"][class*="primary"],
[data-testid*="primary"],
button[type="submit"]:not([class*="secondary"]):not([class*="ghost"]):not([class*="link"]):not([class*="text"]) {
  background-color: var(--skyn-mint) !important;
  background-image: none !important;
  color: var(--skyn-black) !important;
  border: 2px solid var(--skyn-mint) !important;
}

button.primary *,
button.btn-primary *,
[class*="Button"][class*="primary"] *,
button[type="submit"]:not([class*="secondary"]):not([class*="ghost"]) * {
  color: var(--skyn-black) !important;
}

/* HOVER state */
button:hover:not(:disabled):not([class*="secondary"]):not([class*="ghost"]):not([class*="link"]),
.btn:hover:not(:disabled):not([class*="secondary"]):not([class*="ghost"]),
[class*="Button"]:hover:not(:disabled):not([class*="secondary"]):not([class*="ghost"]):not([class*="Group"]),
[role="button"]:hover:not([aria-disabled="true"]) {
  background-color: var(--skyn-mint-dark) !important;
  border-color: var(--skyn-mint-dark) !important;
  color: var(--skyn-black) !important;
  transform: translateY(-1px);
  box-shadow: var(--skyn-shadow-hover) !important;
}

button:hover *,
.btn:hover *,
[class*="Button"]:hover * {
  color: var(--skyn-black) !important;
}

/* ACTIVE state */
button:active:not(:disabled),
.btn:active,
[class*="Button"]:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* FOCUS state — accessibility ring */
button:focus-visible,
.btn:focus-visible,
[class*="Button"]:focus-visible {
  outline: none !important;
  box-shadow: var(--skyn-shadow-focus) !important;
}

/* SECONDARY — outline style, white background, black border + black text */
button.secondary,
button.btn-secondary,
button[class*="secondary"],
.btn.secondary,
.btn-secondary,
[class*="Button"][class*="secondary"] {
  background-color: var(--skyn-white) !important;
  background-image: none !important;
  color: var(--skyn-black) !important;
  border: 2px solid var(--skyn-black) !important;
}

button.secondary *,
button.btn-secondary *,
button[class*="secondary"] *,
[class*="Button"][class*="secondary"] * {
  color: var(--skyn-black) !important;
}

button.secondary:hover,
button.btn-secondary:hover,
button[class*="secondary"]:hover,
[class*="Button"][class*="secondary"]:hover {
  background-color: var(--skyn-black) !important;
  color: var(--skyn-white) !important;
  border-color: var(--skyn-black) !important;
}

button.secondary:hover *,
button.btn-secondary:hover *,
[class*="Button"][class*="secondary"]:hover * {
  color: var(--skyn-white) !important;
}

button.secondary:hover svg,
[class*="Button"][class*="secondary"]:hover svg {
  fill: var(--skyn-white) !important;
  stroke: var(--skyn-white) !important;
}

/* GHOST / TEXT / LINK buttons — back, cancel, low-emphasis actions */
button.ghost,
button.btn-link,
button[class*="ghost"],
button[class*="link"]:not([class*="primary"]),
button[class*="text"]:not([type]),
[class*="Button"][class*="ghost"],
[class*="Button"][class*="link"]:not([class*="primary"]) {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--skyn-slate) !important;
  border: none !important;
  font-weight: var(--skyn-weight-med) !important;
  padding: 8px 16px !important;
  min-height: auto;
  box-shadow: none !important;
}

button.ghost *,
button.btn-link *,
button[class*="ghost"] *,
[class*="Button"][class*="ghost"] *,
[class*="Button"][class*="link"]:not([class*="primary"]) * {
  color: var(--skyn-slate) !important;
}

button.ghost:hover,
button[class*="ghost"]:hover,
[class*="Button"][class*="ghost"]:hover {
  color: var(--skyn-black) !important;
  background-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

button.ghost:hover *,
[class*="Button"][class*="ghost"]:hover * {
  color: var(--skyn-black) !important;
}

/* DISABLED state — applies to all button variants */
button:disabled,
button[disabled],
button[aria-disabled="true"],
.btn:disabled,
.btn.disabled,
[class*="Button"][disabled],
[class*="Button"][class*="disabled"],
[role="button"][aria-disabled="true"] {
  background-color: var(--skyn-slate-line) !important;
  color: var(--skyn-slate) !important;
  border-color: var(--skyn-slate-line) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.6;
}

button:disabled *,
button[disabled] *,
[class*="Button"][disabled] *,
[class*="Button"][class*="disabled"] * {
  color: var(--skyn-slate) !important;
}


/* ----------------------------------------------------------------------------
   7. SERVICE + PROVIDER CARDS — picker grid
   ---------------------------------------------------------------------------- */

.sb-service-item,
.sb-provider-item,
[class*="ServiceCard"],
[class*="ProviderCard"],
[class*="service-card"],
[class*="provider-card"],
[class*="EventCard"] {
  background-color: var(--skyn-white) !important;
  border: 1px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-md) !important;
  padding: var(--skyn-space-md) !important;
  cursor: pointer;
  transition: all var(--skyn-transition) !important;
  box-shadow: none !important;
}

.sb-service-item:hover,
.sb-provider-item:hover,
[class*="ServiceCard"]:hover,
[class*="ProviderCard"]:hover {
  border-color: var(--skyn-mint) !important;
  box-shadow: var(--skyn-shadow-hover) !important;
  transform: translateY(-2px);
}

.sb-service-item.selected,
.sb-provider-item.selected,
[class*="ServiceCard"][class*="selected"],
[class*="ProviderCard"][class*="selected"],
[class*="ServiceCard"][class*="active"],
[class*="ProviderCard"][class*="active"],
[aria-selected="true"] {
  border-color: var(--skyn-mint) !important;
  background-color: var(--skyn-mint-soft) !important;
  box-shadow: var(--skyn-shadow-card) !important;
}

/* Service/provider avatars + thumbnails */
.sb-service-item img,
.sb-provider-item img,
[class*="Avatar"],
[class*="ServiceImage"] {
  border-radius: var(--skyn-radius-md) !important;
  border: 2px solid var(--skyn-cream) !important;
}


/* ----------------------------------------------------------------------------
   8. CALENDAR — date picker grid + day states
   ---------------------------------------------------------------------------- */

/* Calendar container */
.sb-calendar,
[class*="Calendar"]:not([class*="Icon"]),
[class*="DatePicker"] {
  background-color: var(--skyn-white) !important;
  border: 1px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-md) !important;
  padding: var(--skyn-space-md) !important;
}

/* Calendar header — month + year display */
body .sb-calendar-header,
body [class*="CalendarHeader"],
body [class*="calendar-header"],
body [class*="MonthHeader"],
body [class*="MonthLabel"],
body [class*="MonthYear"] {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: var(--skyn-weight-bold) !important;
  font-size: 1.25rem !important;
  background-color: transparent !important;
  border: none !important;
  padding: var(--skyn-space-md) !important;
  text-align: center;
}

/* CALENDAR NAV ARROWS (prev/next month) — small icon-only buttons.
   FIX v6: Override universal button base reset (which made these 44px tall +
   24px padded = oversized mint blocks). Force compact 40x40 square. */
body .sb-calendar-nav,
body .sb-calendar-nav button,
body .sb-calendar-prev,
body .sb-calendar-next,
body .sb-prev-month,
body .sb-next-month,
body [class*="CalendarNav"] button,
body [class*="calendar-nav"] button,
body [class*="MonthNav"] button,
body [class*="NavArrow"],
body [class*="nav-arrow"],
body [class*="PrevMonth"],
body [class*="NextMonth"],
body [class*="prev-month"],
body [class*="next-month"],
body [class*="PrevButton"]:not([class*="primary"]):not([class*="secondary"]),
body [class*="NextButton"]:not([class*="primary"]):not([class*="secondary"]),
body [class*="prev-button"],
body [class*="next-button"],
body [class*="Calendar"] button[aria-label*="previous" i],
body [class*="Calendar"] button[aria-label*="next" i],
body [class*="Calendar"] button[aria-label*="prev" i],
body [class*="DatePicker"] button[aria-label*="previous" i],
body [class*="DatePicker"] button[aria-label*="next" i],
body button[aria-label*="Previous month" i],
body button[aria-label*="Next month" i],
body button[aria-label*="previous month" i],
body button[aria-label*="next month" i] {
  background-color: transparent !important;
  background-image: none !important;
  color: #232323 !important;
  border: 1.5px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-pill) !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all var(--skyn-transition) !important;
  font-size: 1.125rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  transform: none !important;
}

/* Calendar nav arrow HOVER — mint outline + soft mint bg */
body .sb-calendar-nav button:hover,
body .sb-calendar-prev:hover,
body .sb-calendar-next:hover,
body [class*="CalendarNav"] button:hover,
body [class*="calendar-nav"] button:hover,
body [class*="MonthNav"] button:hover,
body [class*="NavArrow"]:hover,
body [class*="PrevMonth"]:hover,
body [class*="NextMonth"]:hover,
body [class*="Calendar"] button[aria-label*="previous" i]:hover,
body [class*="Calendar"] button[aria-label*="next" i]:hover,
body button[aria-label*="Previous month" i]:hover,
body button[aria-label*="Next month" i]:hover {
  background-color: var(--skyn-mint-soft) !important;
  border-color: var(--skyn-mint) !important;
  color: #232323 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Arrow icon (SVG) inside calendar nav — black, sized down */
body .sb-calendar-nav svg,
body [class*="CalendarNav"] svg,
body [class*="MonthNav"] svg,
body [class*="NavArrow"] svg,
body [class*="PrevMonth"] svg,
body [class*="NextMonth"] svg,
body [class*="Calendar"] button[aria-label*="previous" i] svg,
body [class*="Calendar"] button[aria-label*="next" i] svg,
body button[aria-label*="Previous month" i] svg,
body button[aria-label*="Next month" i] svg {
  width: 18px !important;
  height: 18px !important;
  fill: #232323 !important;
  stroke: #232323 !important;
  color: #232323 !important;
}

/* Weekday labels (Mon, Tue, ...) */
.sb-calendar-weekday,
[class*="Weekday"],
[class*="DayLabel"] {
  color: var(--skyn-slate) !important;
  font-weight: var(--skyn-weight-med) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Day cell — default (available, future date) */
.sb-calendar-day,
[class*="CalendarDay"]:not([class*="header"]),
[class*="DayCell"],
[class*="day-button"] {
  background-color: var(--skyn-white) !important;
  color: var(--skyn-black) !important;
  border: 1px solid transparent !important;
  border-radius: var(--skyn-radius-sm) !important;
  font-family: var(--skyn-font) !important;
  font-weight: var(--skyn-weight-reg) !important;
  cursor: pointer;
  transition: all var(--skyn-transition) !important;
}

.sb-calendar-day:hover,
[class*="CalendarDay"]:not([class*="disabled"]):not([class*="past"]):hover,
[class*="DayCell"]:not([class*="disabled"]):hover,
[class*="day-button"]:not(:disabled):hover {
  background-color: var(--skyn-mint-soft) !important;
  border-color: var(--skyn-mint) !important;
  color: var(--skyn-black) !important;
}

/* Day SELECTED state */
.sb-calendar-day.selected,
[class*="CalendarDay"][class*="selected"],
[class*="DayCell"][class*="selected"],
[class*="day-button"][class*="selected"],
[class*="day-button"][aria-pressed="true"] {
  background-color: var(--skyn-mint) !important;
  border-color: var(--skyn-mint) !important;
  color: var(--skyn-black) !important;
  font-weight: var(--skyn-weight-bold) !important;
}

/* Day TODAY state — outline only, not selected */
.sb-calendar-day.today:not(.selected),
[class*="CalendarDay"][class*="today"]:not([class*="selected"]),
[class*="DayCell"][class*="today"]:not([class*="selected"]) {
  border-color: var(--skyn-mint) !important;
  color: var(--skyn-mint-dark) !important;
  font-weight: var(--skyn-weight-semi) !important;
}

/* Day DISABLED / PAST / UNAVAILABLE */
.sb-calendar-day.disabled,
.sb-calendar-day.past,
[class*="CalendarDay"][class*="disabled"],
[class*="CalendarDay"][class*="past"],
[class*="DayCell"][class*="disabled"],
[class*="day-button"]:disabled {
  background-color: transparent !important;
  color: var(--skyn-slate-soft) !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  text-decoration: line-through;
  opacity: 0.5;
}


/* ----------------------------------------------------------------------------
   9. TIME SLOTS — pill grid for available times
   ----------------------------------------------------------------------------
   FIX 2026-05-28 v5: Periwinkle background + mint text issue = SimplyBookMe
   theme color picker overrides our slot styling. Apply silver bullet pattern
   (same as buttons): -webkit-text-fill-color #232323 + body prefix specificity
   + broader selector coverage (lowercase variants, .sb-day-time, .sb-slot,
   TimePicker patterns).
   ---------------------------------------------------------------------------- */

body .sb-time-slot,
body .sb-day-time,
body .sb-slot,
body .sb-time,
body .sb-available-time,
body .sb-start-time,
body .timepicker-slot,
body [class*="TimeSlot"]:not([class*="Grid"]):not([class*="Container"]):not([class*="List"]),
body [class*="time-slot"],
body [class*="TimeButton"],
body [class*="SlotButton"],
body [class*="TimePicker"] button,
body [class*="TimePicker"] [role="button"],
body [class*="StartTime"] button,
body [class*="AvailableTime"] button,
body [class*="DayTime"],
body [class*="HourButton"],
body [class*="hour-button"] {
  background-color: var(--skyn-white) !important;
  background-image: none !important;
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  border: 1.5px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-md) !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: var(--skyn-weight-semi) !important;
  font-size: 0.9375rem !important;
  padding: 10px 16px !important;
  cursor: pointer;
  transition: all var(--skyn-transition) !important;
  min-width: 90px;
  min-height: 40px;
  text-decoration: none !important;
  text-shadow: none !important;
  letter-spacing: 0.02em;
  box-shadow: none !important;
}

/* Time slot DESCENDANTS — force black text on nested spans (same pattern
   as button fix — SimplyBookMe wraps time text in <span> with theme color) */
body .sb-time-slot *,
body .sb-day-time *,
body .sb-slot *,
body [class*="TimeSlot"]:not([class*="Grid"]):not([class*="Container"]) *,
body [class*="time-slot"] *,
body [class*="TimeButton"] *,
body [class*="SlotButton"] *,
body [class*="TimePicker"] button *,
body [class*="StartTime"] button *,
body [class*="DayTime"] *,
body [class*="HourButton"] * {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  background-color: transparent !important;
  background-image: none !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
}

/* HOVER state — soft mint tint background, black text preserved */
body .sb-time-slot:not(:disabled):not([class*="disabled"]):hover,
body .sb-day-time:not(:disabled):not([class*="disabled"]):hover,
body .sb-slot:not(:disabled):not([class*="disabled"]):hover,
body [class*="TimeSlot"]:not([class*="disabled"]):not([class*="Grid"]):not([class*="Container"]):hover,
body [class*="time-slot"]:not([class*="disabled"]):hover,
body [class*="TimeButton"]:not(:disabled):hover,
body [class*="TimePicker"] button:not(:disabled):hover,
body [class*="StartTime"] button:not(:disabled):hover,
body [class*="DayTime"]:not([class*="disabled"]):hover,
body [class*="HourButton"]:not(:disabled):hover {
  border-color: var(--skyn-mint) !important;
  background-color: var(--skyn-mint-soft) !important;
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  transform: translateY(-1px);
  box-shadow: var(--skyn-shadow-card) !important;
}

body .sb-time-slot:hover *,
body [class*="TimeSlot"]:hover *,
body [class*="time-slot"]:hover *,
body [class*="TimePicker"] button:hover * {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
}

/* SELECTED state — mint solid + black bold text */
body .sb-time-slot.selected,
body .sb-time-slot[class*="selected"],
body .sb-time-slot[aria-pressed="true"],
body .sb-day-time[class*="selected"],
body .sb-slot[class*="selected"],
body [class*="TimeSlot"][class*="selected"],
body [class*="TimeSlot"][aria-pressed="true"],
body [class*="time-slot"][class*="selected"],
body [class*="TimeButton"][class*="selected"],
body [class*="TimeButton"][aria-pressed="true"],
body [class*="SlotButton"][class*="active"],
body [class*="SlotButton"][class*="selected"],
body [class*="TimePicker"] button[class*="selected"],
body [class*="TimePicker"] button[aria-pressed="true"],
body [class*="DayTime"][class*="selected"],
body [class*="HourButton"][class*="selected"] {
  background-color: var(--skyn-mint) !important;
  background-image: none !important;
  border-color: var(--skyn-mint) !important;
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  font-weight: var(--skyn-weight-bold) !important;
  box-shadow: var(--skyn-shadow-card) !important;
}

body .sb-time-slot.selected *,
body .sb-time-slot[class*="selected"] *,
body [class*="TimeSlot"][class*="selected"] *,
body [class*="TimeButton"][class*="selected"] *,
body [class*="TimePicker"] button[class*="selected"] * {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  font-weight: var(--skyn-weight-bold) !important;
}

/* DISABLED / UNAVAILABLE state — cream bg, slate text, strikethrough */
body .sb-time-slot.disabled,
body .sb-time-slot:disabled,
body .sb-day-time[class*="disabled"],
body .sb-slot[class*="disabled"],
body [class*="TimeSlot"][class*="disabled"],
body [class*="time-slot"][class*="disabled"],
body [class*="TimeButton"]:disabled,
body [class*="TimeButton"][class*="disabled"],
body [class*="TimePicker"] button:disabled,
body [class*="StartTime"] button:disabled,
body [class*="DayTime"][class*="disabled"],
body [class*="HourButton"]:disabled {
  background-color: var(--skyn-cream) !important;
  color: var(--skyn-slate-soft) !important;
  -webkit-text-fill-color: var(--skyn-slate-soft) !important;
  border-color: var(--skyn-slate-line) !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  transform: none !important;
  opacity: 0.6;
}

body .sb-time-slot:disabled *,
body [class*="TimeSlot"][class*="disabled"] *,
body [class*="TimeButton"]:disabled * {
  color: var(--skyn-slate-soft) !important;
  -webkit-text-fill-color: var(--skyn-slate-soft) !important;
  text-decoration: line-through !important;
}

/* "Available start times" section heading — keep clean black */
body [class*="AvailableStartTimes"],
body [class*="available-start-times"],
body .sb-time-section-title {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: var(--skyn-weight-semi) !important;
}


/* ----------------------------------------------------------------------------
   10. FORM INPUTS — text, email, phone, select, textarea
   ---------------------------------------------------------------------------- */

/* Input fields — default state */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
textarea,
select,
.sb-input,
.sb-select,
[class*="FormInput"],
[class*="TextField"] input,
[class*="Select"]:not([class*="ed "]) {
  background-color: var(--skyn-white) !important;
  color: var(--skyn-black) !important;
  border: 1.5px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-md) !important;
  font-family: var(--skyn-font) !important;
  font-weight: var(--skyn-weight-reg) !important;
  font-size: 1rem !important;
  padding: 10px 14px !important;
  transition: all var(--skyn-transition) !important;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

/* Focus state — mint border + soft glow */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.sb-input:focus,
[class*="FormInput"]:focus-within,
[class*="TextField"] input:focus {
  outline: none !important;
  border-color: var(--skyn-mint) !important;
  box-shadow: var(--skyn-shadow-focus) !important;
}

/* Placeholder — slate gray, not too prominent */
input::placeholder,
textarea::placeholder {
  color: var(--skyn-slate-soft) !important;
  opacity: 1;
  font-weight: var(--skyn-weight-reg);
}

/* Labels — uppercase tracking, slate */
label,
.sb-label,
[class*="FieldLabel"],
[class*="InputLabel"] {
  font-family: var(--skyn-font) !important;
  font-weight: var(--skyn-weight-med) !important;
  font-size: 0.8125rem !important;
  color: var(--skyn-slate) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--skyn-space-xs);
  display: block;
}

/* Required field asterisk */
label .required,
label.required::after,
[class*="required"]::after {
  color: var(--skyn-mint-dark);
  margin-left: 4px;
}

/* Select arrow — custom chevron in mint */
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FD1C4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
}

/* Textarea — taller default */
textarea,
[class*="Textarea"] {
  min-height: 100px !important;
  resize: vertical;
  line-height: 1.5;
}

/* Checkbox + radio — mint accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--skyn-mint) !important;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Error state — periwinkle border + slate text. No alarm red (off-brand). */
input.error,
input[aria-invalid="true"],
textarea.error,
select.error,
[class*="error"] input,
[class*="invalid"] input {
  border-color: var(--skyn-periwinkle) !important;
  background-color: rgba(196, 208, 233, 0.08) !important;
}

.sb-error-message,
[class*="ErrorMessage"],
[class*="error-text"],
[class*="invalid-feedback"] {
  color: var(--skyn-slate) !important;
  font-family: var(--skyn-font);
  font-size: 0.8125rem !important;
  font-weight: var(--skyn-weight-med) !important;
  margin-top: 4px;
}


/* ----------------------------------------------------------------------------
   10b. SECTION HEADERS — dark banner labels (e.g., "TIME", "DATE", "SERVICE")
   ----------------------------------------------------------------------------
   FIX v6: Dark banner backgrounds (.sb-section-name, [class*="StepName"] etc.)
   had slate text from generic muted rule. On black bg = invisible. Force
   white bold text + tracking for label feel.
   ---------------------------------------------------------------------------- */

body .sb-section-name,
body .sb-section-title,
body .sb-step-name,
body .sb-step-title,
body .sb-stage-title,
body [class*="SectionName"],
body [class*="SectionTitle"]:not([class*="Container"]),
body [class*="StepName"],
body [class*="StepTitle"],
body [class*="StageTitle"],
body [class*="StageName"],
body [class*="BookingStep"] [class*="Title"],
body [class*="WizardStep"] [class*="Title"],
body [class*="section-name"],
body [class*="section-title"],
body [class*="step-name"],
body [class*="step-title"] {
  background-color: var(--skyn-black) !important;
  color: var(--skyn-white) !important;
  -webkit-text-fill-color: var(--skyn-white) !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: var(--skyn-weight-bold) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: var(--skyn-space-lg) var(--skyn-space-xl) !important;
  border-radius: var(--skyn-radius-md) !important;
  text-align: center;
  border: none !important;
  margin: var(--skyn-space-md) 0 !important;
}

/* Force ALL descendants of section header to inherit white */
body .sb-section-name *,
body .sb-section-title *,
body .sb-step-name *,
body .sb-step-title *,
body [class*="SectionName"] *,
body [class*="SectionTitle"]:not([class*="Container"]) *,
body [class*="StepName"] *,
body [class*="StepTitle"] *,
body [class*="StageTitle"] *,
body [class*="StageName"] *,
body [class*="section-name"] *,
body [class*="section-title"] *,
body [class*="step-name"] *,
body [class*="step-title"] * {
  color: var(--skyn-white) !important;
  -webkit-text-fill-color: var(--skyn-white) !important;
  background-color: transparent !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Safety net — any black-background element with muted text inside should
   still show readable text. Apply white text override when parent is black. */
body [style*="background-color: #232323"] *:not(button):not(input):not(select),
body [style*="background-color: rgb(35, 35, 35)"] *:not(button):not(input):not(select),
body [style*="background-color: black"] *:not(button):not(input):not(select),
body [style*="background: #232323"] *:not(button):not(input):not(select),
body [style*="background: rgb(35, 35, 35)"] *:not(button):not(input):not(select) {
  color: var(--skyn-white) !important;
  -webkit-text-fill-color: var(--skyn-white) !important;
}


/* ----------------------------------------------------------------------------
   11. PROGRESS STEPS / WIZARD INDICATOR
   ---------------------------------------------------------------------------- */

.sb-progress,
.sb-steps,
[class*="Stepper"],
[class*="ProgressBar"],
[class*="WizardSteps"] {
  background-color: transparent !important;
  border: none !important;
  padding: var(--skyn-space-md) 0 !important;
}

.sb-step,
[class*="Step"]:not([class*="Stepper"]):not([class*="content"]) {
  color: var(--skyn-slate-soft) !important;
  font-family: var(--skyn-font);
  font-weight: var(--skyn-weight-med);
  font-size: 0.8125rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Step bullet/circle */
.sb-step-circle,
[class*="StepCircle"],
[class*="step-indicator"],
[class*="StepNumber"] {
  background-color: var(--skyn-slate-line) !important;
  color: var(--skyn-slate) !important;
  border: 2px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-pill) !important;
  font-weight: var(--skyn-weight-bold);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Active step */
.sb-step.active .sb-step-circle,
[class*="Step"][class*="active"] [class*="StepCircle"],
[class*="Step"][class*="current"] [class*="step-indicator"] {
  background-color: var(--skyn-mint) !important;
  border-color: var(--skyn-mint) !important;
  color: var(--skyn-black) !important;
}

.sb-step.active,
[class*="Step"][class*="active"] {
  color: var(--skyn-black) !important;
  font-weight: var(--skyn-weight-semi) !important;
}

/* Completed step — solid mint with check */
.sb-step.completed .sb-step-circle,
[class*="Step"][class*="completed"] [class*="StepCircle"],
[class*="Step"][class*="done"] [class*="step-indicator"] {
  background-color: var(--skyn-black) !important;
  border-color: var(--skyn-black) !important;
  color: var(--skyn-mint) !important;
}

/* Connector line between steps */
.sb-step-connector,
[class*="StepConnector"],
[class*="step-line"] {
  background-color: var(--skyn-slate-line) !important;
  height: 2px !important;
}

[class*="Step"][class*="completed"] + [class*="StepConnector"],
[class*="Step"][class*="active"] [class*="step-line"] {
  background-color: var(--skyn-mint) !important;
}


/* ----------------------------------------------------------------------------
   12. CONFIRMATION PAGE — success state, summary card
   ---------------------------------------------------------------------------- */

.sb-confirmation,
[class*="Confirmation"],
[class*="Success"],
[class*="BookingSuccess"] {
  background-color: var(--skyn-cream) !important;
  border-radius: var(--skyn-radius-lg) !important;
  padding: var(--skyn-space-xl) !important;
  text-align: center;
  border: none !important;
}

/* Check icon — mint circle with black checkmark */
.sb-confirmation .icon,
[class*="Confirmation"] [class*="icon"],
[class*="Success"] [class*="icon"],
[class*="CheckIcon"] {
  color: var(--skyn-mint) !important;
  fill: var(--skyn-mint) !important;
  background-color: transparent !important;
}

/* Booking summary card on confirmation */
.sb-summary,
[class*="BookingSummary"],
[class*="SummaryCard"],
[class*="DetailsCard"] {
  background-color: var(--skyn-white) !important;
  border: 1px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-md) !important;
  padding: var(--skyn-space-lg) !important;
  margin: var(--skyn-space-lg) 0 !important;
  text-align: left;
  box-shadow: var(--skyn-shadow-card) !important;
}

.sb-summary-row,
[class*="SummaryRow"],
[class*="DetailRow"] {
  border-bottom: 1px solid var(--skyn-slate-line) !important;
  padding: var(--skyn-space-sm) 0 !important;
}

.sb-summary-row:last-child,
[class*="SummaryRow"]:last-child {
  border-bottom: none !important;
}

.sb-summary-label,
[class*="SummaryLabel"],
[class*="DetailLabel"] {
  color: var(--skyn-slate) !important;
  font-weight: var(--skyn-weight-med);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-summary-value,
[class*="SummaryValue"],
[class*="DetailValue"] {
  color: var(--skyn-black) !important;
  font-weight: var(--skyn-weight-semi);
  font-size: 1rem;
}


/* ----------------------------------------------------------------------------
   12b. LOGIN MODAL / AUTH CARD — refined UX
   ----------------------------------------------------------------------------
   FIX v8: Login card was dark gray with mint flood (5 mint buttons = no
   hierarchy). Redesigned with: cream/white background, clear button hierarchy
   (Sign in primary mint, Sign up secondary outline, Forgot password text link,
   social buttons neutral white with brand-colored icons), divider line with
   centered "or", normal-case Remember me text, visible password reveal eye.
   ---------------------------------------------------------------------------- */

/* Login modal/panel container — light cream background, modern radius, generous padding */
body .sb-login,
body .sb-login-panel,
body .sb-login-modal,
body .sb-login-overlay,
body .sb-auth,
body .sb-auth-form,
body [class*="LoginPanel"],
body [class*="LoginModal"],
body [class*="LoginOverlay"],
body [class*="AuthPanel"],
body [class*="AuthModal"],
body [class*="AuthCard"],
body [class*="SignInPanel"],
body [class*="SignInModal"],
body [class*="LoginContainer"]:not([class*="Field"]):not([class*="Input"]),
body [class*="login-panel"],
body [class*="login-modal"],
body [class*="auth-panel"] {
  background-color: var(--skyn-cream) !important;
  border-radius: var(--skyn-radius-lg) !important;
  padding: 32px !important;
  border: 1px solid var(--skyn-slate-line) !important;
  box-shadow: 0 12px 40px rgba(35, 35, 35, 0.12) !important;
  max-width: 420px !important;
  color: #232323 !important;
}

/* Force descendants to use dark text on cream background */
body .sb-login *,
body .sb-login-panel *,
body .sb-login-modal *,
body .sb-auth *,
body [class*="LoginPanel"] *,
body [class*="LoginModal"] *,
body [class*="LoginOverlay"] *,
body [class*="AuthPanel"] *,
body [class*="AuthModal"] *,
body [class*="AuthCard"] *,
body [class*="SignInPanel"] *,
body [class*="login-panel"] *,
body [class*="auth-panel"] * {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
}

/* Force labels + muted text in login to be slate, not bright */
body .sb-login label,
body .sb-login [class*="label"],
body [class*="LoginPanel"] label,
body [class*="LoginPanel"] [class*="label"],
body [class*="AuthPanel"] label,
body [class*="SignInPanel"] label,
body [class*="login-panel"] label {
  color: var(--skyn-slate) !important;
  -webkit-text-fill-color: var(--skyn-slate) !important;
  font-size: 0.75rem !important;
  font-weight: var(--skyn-weight-med) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Remember me — small slate text, not headline */
body [class*="remember-me"],
body [class*="RememberMe"],
body [class*="remember_me"],
body label[for*="remember"],
body label[for*="Remember"] {
  color: var(--skyn-slate) !important;
  -webkit-text-fill-color: var(--skyn-slate) !important;
  font-size: 0.8125rem !important;
  font-weight: var(--skyn-weight-reg) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* "or" divider — full-width line with centered "or" */
body [class*="LoginDivider"],
body [class*="login-divider"],
body [class*="OrDivider"],
body [class*="or-divider"],
body .sb-or-separator,
body [class*="AuthDivider"] {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  color: var(--skyn-slate) !important;
  -webkit-text-fill-color: var(--skyn-slate) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin: var(--skyn-space-lg) 0 !important;
  gap: var(--skyn-space-md) !important;
}

body [class*="LoginDivider"]::before,
body [class*="LoginDivider"]::after,
body [class*="login-divider"]::before,
body [class*="login-divider"]::after,
body [class*="OrDivider"]::before,
body [class*="OrDivider"]::after,
body [class*="or-divider"]::before,
body [class*="or-divider"]::after,
body .sb-or-separator::before,
body .sb-or-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--skyn-slate-line);
}

/* Forgot password / Remind password — convert from full button to small text link */
body button[class*="forgot"],
body button[class*="Forgot"],
body button[class*="remind"],
body button[class*="Remind"],
body a[class*="forgot"],
body a[class*="Forgot"],
body a[class*="remind"],
body a[class*="Remind"],
body [class*="LoginPanel"] button[class*="forgot"],
body [class*="LoginPanel"] button[class*="remind"],
body [class*="AuthPanel"] button[class*="forgot"],
body [class*="SignInPanel"] button[class*="forgot"] {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--skyn-slate) !important;
  -webkit-text-fill-color: var(--skyn-slate) !important;
  border: none !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: var(--skyn-weight-med) !important;
  font-size: 0.8125rem !important;
  padding: 6px 0 !important;
  min-height: auto !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-align: left !important;
  width: auto !important;
  display: inline-block !important;
  cursor: pointer !important;
  letter-spacing: normal !important;
  transform: none !important;
  box-shadow: none !important;
}

body button[class*="forgot"]:hover,
body button[class*="Forgot"]:hover,
body button[class*="remind"]:hover,
body button[class*="Remind"]:hover,
body a[class*="forgot"]:hover,
body a[class*="remind"]:hover {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  background-color: transparent !important;
  transform: none !important;
}

body button[class*="forgot"] *,
body button[class*="Forgot"] *,
body button[class*="remind"] *,
body button[class*="Remind"] *,
body a[class*="forgot"] *,
body a[class*="remind"] * {
  color: var(--skyn-slate) !important;
  -webkit-text-fill-color: var(--skyn-slate) !important;
}

/* Social login buttons (Google / Facebook) — neutral white + slate border + brand-colored icons.
   Reduces mint flood, lets brand icons (G red/yellow/green/blue, FB blue) show their identity */
body button[class*="google" i],
body button[class*="Google"],
body button[class*="facebook" i],
body button[class*="Facebook"],
body button[class*="social"],
body button[class*="Social"],
body button[class*="oauth" i],
body button[class*="OAuth"],
body a[class*="google" i],
body a[class*="facebook" i],
body [class*="SocialLogin"] button,
body [class*="social-login"] button,
body [class*="LoginPanel"] button[class*="google" i],
body [class*="LoginPanel"] button[class*="facebook" i],
body [class*="AuthPanel"] button[class*="google" i],
body [class*="AuthPanel"] button[class*="facebook" i] {
  background-color: var(--skyn-white) !important;
  background-image: none !important;
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  border: 1.5px solid var(--skyn-slate-line) !important;
  border-radius: var(--skyn-radius-md) !important;
  font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: var(--skyn-weight-semi) !important;
  font-size: 0.875rem !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
  transition: all var(--skyn-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--skyn-space-sm) !important;
  min-height: 44px !important;
  box-shadow: none !important;
  transform: none !important;
}

body button[class*="google" i]:hover,
body button[class*="Google"]:hover,
body button[class*="facebook" i]:hover,
body button[class*="Facebook"]:hover,
body [class*="SocialLogin"] button:hover,
body [class*="social-login"] button:hover {
  background-color: var(--skyn-cream) !important;
  border-color: var(--skyn-black) !important;
  color: #232323 !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--skyn-shadow-card) !important;
}

body button[class*="google" i] *,
body button[class*="Google"] *,
body button[class*="facebook" i] *,
body button[class*="Facebook"] *,
body [class*="SocialLogin"] button *,
body [class*="social-login"] button * {
  color: #232323 !important;
  -webkit-text-fill-color: #232323 !important;
  background-color: transparent !important;
}

/* Google icon — restore brand red/yellow/green/blue (don't force black) */
body button[class*="google" i] svg,
body button[class*="Google"] svg,
body [class*="SocialLogin"] button[class*="google" i] svg {
  fill: initial !important;
  stroke: initial !important;
  color: initial !important;
  width: 20px !important;
  height: 20px !important;
}

/* Facebook icon — restore brand blue (don't force black) */
body button[class*="facebook" i] svg,
body button[class*="Facebook"] svg,
body [class*="SocialLogin"] button[class*="facebook" i] svg {
  fill: #1877F2 !important;
  stroke: #1877F2 !important;
  color: #1877F2 !important;
  width: 20px !important;
  height: 20px !important;
}

/* Password reveal / eye icon — visible black icon, not empty mint box */
body [class*="PasswordInput"] button,
body [class*="password-input"] button,
body [class*="PasswordField"] button,
body [class*="password-field"] button,
body [class*="EyeIcon"],
body [class*="eye-icon"],
body button[class*="reveal"],
body button[class*="Reveal"],
body button[class*="toggle-password"],
body button[aria-label*="password" i],
body button[aria-label*="show password" i],
body button[aria-label*="hide password" i] {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 8px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  height: 36px !important;
  color: var(--skyn-slate) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

/* Inject eye-icon SVG via ::before for visibility */
body [class*="PasswordInput"] button::before,
body [class*="password-input"] button::before,
body [class*="PasswordField"] button::before,
body [class*="EyeIcon"]::before,
body [class*="eye-icon"]::before,
body button[class*="reveal"]::before,
body button[aria-label*="show password" i]::before,
body button[aria-label*="hide password" i]::before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2370798C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3e%3ccircle cx='12' cy='12' r='3'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body [class*="PasswordInput"] button:hover::before,
body [class*="password-input"] button:hover::before,
body [class*="PasswordField"] button:hover::before,
body [class*="EyeIcon"]:hover::before,
body button[class*="reveal"]:hover::before,
body button[aria-label*="show password" i]:hover::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3e%3ccircle cx='12' cy='12' r='3'/%3e%3c/svg%3e");
}

/* Hide any children of password reveal button — clean slate for our ::before */
body [class*="PasswordInput"] button *,
body [class*="password-input"] button *,
body [class*="PasswordField"] button *,
body [class*="EyeIcon"] *,
body button[class*="reveal"] *,
body button[aria-label*="show password" i] *,
body button[aria-label*="hide password" i] * {
  display: none !important;
}

/* Password field container — relative for absolute-positioned eye icon */
body [class*="PasswordInput"]:not(input),
body [class*="password-input"]:not(input),
body [class*="PasswordField"]:not(input),
body [class*="password-field"]:not(input) {
  position: relative !important;
}


/* ----------------------------------------------------------------------------
   13. NOTIFICATIONS / TOASTS / MODALS
   ---------------------------------------------------------------------------- */

.sb-toast,
[class*="Toast"],
[class*="Notification"],
[class*="Snackbar"] {
  background-color: var(--skyn-black) !important;
  color: var(--skyn-white) !important;
  border-radius: var(--skyn-radius-md) !important;
  font-family: var(--skyn-font);
  font-weight: var(--skyn-weight-med);
  padding: var(--skyn-space-md) var(--skyn-space-lg) !important;
  box-shadow: var(--skyn-shadow-hover) !important;
  border: none !important;
}

/* Success toast — mint left border accent */
[class*="Toast"][class*="success"],
[class*="Notification"][class*="success"] {
  border-left: 4px solid var(--skyn-mint) !important;
}

/* Error toast — periwinkle (off-brand-safe, not red) */
[class*="Toast"][class*="error"],
[class*="Notification"][class*="error"] {
  border-left: 4px solid var(--skyn-periwinkle) !important;
}

/* Modal / dialog */
.sb-modal,
[class*="Modal"],
[class*="Dialog"]:not([class*="Title"]) {
  background-color: var(--skyn-white) !important;
  border-radius: var(--skyn-radius-lg) !important;
  border: none !important;
  box-shadow: 0 20px 50px rgba(35, 35, 35, 0.20) !important;
}

.sb-modal-backdrop,
[class*="Backdrop"],
[class*="Overlay"] {
  background-color: rgba(35, 35, 35, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Modal close button */
.sb-modal-close,
[class*="Modal"] [class*="close"],
[class*="Dialog"] [class*="close"] {
  color: var(--skyn-slate) !important;
  background: transparent !important;
}
.sb-modal-close:hover,
[class*="Modal"] [class*="close"]:hover {
  color: var(--skyn-black) !important;
}


/* ----------------------------------------------------------------------------
   14. LOADING STATES — spinners, skeleton screens
   ---------------------------------------------------------------------------- */

.sb-spinner,
[class*="Spinner"],
[class*="Loader"]:not([class*="ed "]) {
  color: var(--skyn-mint) !important;
  border-top-color: var(--skyn-mint) !important;
}

.sb-skeleton,
[class*="Skeleton"] {
  background: linear-gradient(
    90deg,
    var(--skyn-slate-line) 0%,
    var(--skyn-cream) 50%,
    var(--skyn-slate-line) 100%
  ) !important;
  background-size: 200% 100% !important;
  border-radius: var(--skyn-radius-sm) !important;
}


/* ----------------------------------------------------------------------------
   15. FOOTER / BRANDING — "Powered by" line + clinic info
   ---------------------------------------------------------------------------- */

.sb-footer,
[class*="Footer"],
[class*="PoweredBy"] {
  background-color: transparent !important;
  color: var(--skyn-slate) !important;
  font-size: 0.75rem !important;
  text-align: center;
  padding: var(--skyn-space-lg) !important;
  border: none !important;
}

.sb-footer a,
[class*="Footer"] a {
  color: var(--skyn-slate) !important;
}
.sb-footer a:hover,
[class*="Footer"] a:hover {
  color: var(--skyn-black) !important;
}


/* ----------------------------------------------------------------------------
   16. MOBILE RESPONSIVE — < 640px breakpoints
   ---------------------------------------------------------------------------- */

@media (max-width: 640px) {

  /* Typography scale down */
  h1, [class*="Title"][class*="large"] { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.0625rem !important; }

  /* Containers — tighter padding */
  .sb-content,
  .sb-widget,
  [class*="MainContent"],
  [class*="Wizard"] {
    border-radius: var(--skyn-radius-md) !important;
    margin: var(--skyn-space-sm) !important;
  }

  /* Buttons — full width primary on mobile */
  button.primary,
  button.btn-primary,
  [class*="Button"][class*="primary"],
  button[type="submit"] {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 1rem !important;
  }

  /* Time slots — 3-col grid forced */
  .sb-time-slots,
  [class*="TimeSlotGrid"],
  [class*="time-grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--skyn-space-xs) !important;
  }

  .sb-time-slot,
  [class*="TimeSlot"],
  [class*="time-slot"] {
    min-width: 0 !important;
    padding: 10px 8px !important;
    font-size: 0.875rem !important;
  }

  /* Service/provider cards — full width stack */
  .sb-service-item,
  .sb-provider-item,
  [class*="ServiceCard"],
  [class*="ProviderCard"] {
    width: 100% !important;
  }

  /* Inputs — larger tap targets */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;   /* iOS zoom prevention */
    min-height: 48px !important;
  }

  /* Step indicator — hide labels, show circles only */
  .sb-step .sb-step-label,
  [class*="Step"] [class*="StepLabel"] {
    display: none !important;
  }
}


/* ----------------------------------------------------------------------------
   17. ACCESSIBILITY — focus-visible, reduced motion
   ---------------------------------------------------------------------------- */

/* Strong focus ring for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--skyn-mint) !important;
  outline-offset: 2px;
  border-radius: var(--skyn-radius-sm);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}


/* ----------------------------------------------------------------------------
   18. SAFETY NET — kill off-brand defaults
   ---------------------------------------------------------------------------- */

/* Hard-block any gold/yellow accents SimplyBookMe might inject */
[style*="gold"],
[style*="#FFD700"],
[style*="#DAA520"],
[style*="#B8860B"] {
  color: var(--skyn-black) !important;
  background-color: transparent !important;
}

/* Neutralize SimplyBookMe default green/red status colors → brand-safe */
[class*="success"]:not(button):not([class*="Button"]) {
  color: var(--skyn-mint-dark) !important;
}
[class*="danger"]:not(button):not([class*="Button"]),
[class*="error"]:not(button):not(input):not(textarea):not(select):not([class*="Button"]) {
  color: var(--skyn-slate) !important;
}

/* Remove any italic bawaan SimplyBookMe — SKYN voice doesn't use italic */
em, i,
[class*="italic"] {
  font-style: normal !important;
  font-weight: var(--skyn-weight-med) !important;
}


/* ============================================================================
   END — SKYN Clinic SimplyBookMe Custom CSS
   ============================================================================ */