/* ==========================================================================
   ServMall site design system
   Canonical UI from the /new marketing pattern — used site-wide.
   ========================================================================== */

:root{
  --navy:#286090;
  --navy-deep:#254c6d;
  --navy-ink:#16324c;
  --navy-black:#0e2135;
  --blue:#48a0e8;
  --blue-light:#58a8e0;
  --steel:#5f8eb6;
  --mist:#afc7db;
  --cream:#f1decb;
  --cream-soft:#f8efe4;

  --amber:#f1a407;
  --rose:#cd3362;
  --olive:#939261;

  --paper:#ffffff;
  --paper-2:#f6f8fa;
  --ink:#12212e;
  --ink-2:#41586b;
  /* was #6b8296 — 3.75:1 on the card background, under the 4.5:1 WCAG AA
     floor for small text, which put every field label on the account
     pages below it. #5a7082 measures 4.84:1 on the card and 5.15:1 on
     white and stays clearly lighter than --ink, so the hierarchy holds. */
  --ink-3:#5a7082;
  --rule:#e2e9ef;

  --display:"Raleway","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --wrap:1180px;
  --r:14px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.08;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel);
}
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;
  font-size:15px;padding:14px 26px;border-radius:100px;border:2px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 10px 26px -12px rgba(40,96,144,.85)}
.btn-primary:hover{background:var(--navy-ink);box-shadow:0 16px 32px -14px rgba(40,96,144,.9)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 10px 26px -14px rgba(0,0,0,.5)}

/* ── nav ─────────────────────────────────────────────── */
/* Scoped to the site header, which is the only <nav> that wraps a .nav-in.
   As a bare `nav` selector this also hit every other nav in the app:
   `nav.breadcrumb` became sticky at z-index 80, and the account sidebar's
   `nav.profile-settings` got a near-white panel behind its white link text —
   contrast 1.00, so the entire account menu (Custom Jobs, Notifications, My
   Wallet, Saved Addresses, My Reviews, Support Chat, My Referral, Logout) was
   invisible. Only the active item, which paints its own white pill with dark
   text, could be read. */
nav:has(> .nav-in){
  position:sticky;top:0;z-index:80;background:#fff;
  border-bottom:1px solid var(--rule);
}
@media (min-width:1021px){
  nav:has(> .nav-in){
    background:rgba(255,255,255,.93);
    backdrop-filter:saturate(180%) blur(14px);
  }
}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:74px;display:flex;align-items:center;gap:34px}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;gap:30px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink-2)}
.nav-links a{position:relative;padding:4px 0;transition:color .16s;white-space:nowrap}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--blue);transition:right .24s ease;
}
.nav-links a:hover{color:var(--navy)}
.nav-links a:hover::after{right:0}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-cta .signin{
  font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink-2);
  white-space:nowrap;flex-shrink:0;
}
.nav-cta .signin:hover{color:var(--navy)}
.nav-cta .btn,.nav-cta .btn.btn-primary{
  width:auto!important;flex:0 0 auto;white-space:nowrap;
}
.nav-icon{
  position:relative;display:inline-grid;place-items:center;
  width:38px;height:38px;border-radius:10px;color:var(--ink-2);
  transition:color .16s,background .16s;
}
.nav-icon:hover{color:var(--navy);background:rgba(40,96,144,.08)}
.nav-badge{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--amber,#e8a317);color:#1a1a1a;
  font-family:var(--display);font-size:10px;font-weight:800;line-height:16px;text-align:center;
}
.nav-account{position:relative}
.nav-account-btn{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;
  border:1px solid var(--rule);border-radius:999px;background:#fff;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink);
}
.nav-account-btn:hover,.nav-account.is-open .nav-account-btn{border-color:rgba(40,96,144,.35)}
.nav-account-avatar{
  width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800;
}
.nav-account-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-account-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:240px;max-height:min(70vh,520px);
  overflow:auto;padding:8px;background:#fff;border:1px solid var(--rule);
  border-radius:14px;box-shadow:0 18px 40px -24px rgba(15,35,55,.45);z-index:90;
  display:flex;flex-direction:column;gap:2px;
}
.nav-account-menu[hidden]{display:none!important}
.nav-account-menu a,.nav-account-logout,.nav-drawer-logout{
  display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:10px;
  background:transparent;font-family:var(--display);font-weight:600;font-size:13.5px;
  color:var(--ink-2);cursor:pointer;text-decoration:none;
}
.nav-account-menu a:hover,.nav-account-logout:hover,.nav-drawer-logout:hover{
  background:rgba(40,96,144,.08);color:var(--navy);
}
.nav-account-logout,.nav-drawer-logout{color:#b42318}
.nav-account-logout:hover,.nav-drawer-logout:hover{background:rgba(180,35,24,.08);color:#912018}
.nav-drawer-logout{
  margin-top:auto;padding:14px 12px !important;border-top:1px solid var(--rule);border-radius:12px !important;
}
.burger{
  display:none;background:none;border:0;padding:0;cursor:pointer;
  width:40px;height:40px;position:relative;z-index:2;
}
.burger span{
  position:absolute;left:9px;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:25px}
body.sm-nav-open .burger span:nth-child(1){top:19px;transform:rotate(45deg)}
body.sm-nav-open .burger span:nth-child(2){opacity:0}
body.sm-nav-open .burger span:nth-child(3){top:19px;transform:rotate(-45deg)}
body.sm-nav-open{overflow:hidden}

/* ── hero ────────────────────────────────────────────── */
.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;object-fit:cover;width:100%;height:100%;opacity:.55}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,var(--navy-black) 0%,rgba(37,76,109,.94) 48%,rgba(40,96,144,.72) 100%);
}
.hero-in{
  max-width:var(--wrap);margin:0 auto;padding:74px 24px 88px;
  display:grid;grid-template-columns:1.14fr .86fr;gap:48px;align-items:center;
}
.hero h1{
  font-size:clamp(40px,5.6vw,63px);font-weight:800;color:#fff;margin-bottom:20px;
}
.hero h1 em{font-style:normal;color:var(--blue-light);position:relative;white-space:nowrap}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;
  background:var(--amber);border-radius:2px;opacity:.9;
}
.hero-sub{
  font-size:17.5px;line-height:1.62;color:#d3e2ef;max-width:52ch;margin-bottom:30px;
}

/* search bar — the entry point the old site never had */
.finder{
  background:#fff;border-radius:var(--r);padding:9px;display:flex;gap:8px;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.65);margin-bottom:22px;
}
.finder{flex-wrap:wrap}
.finder-field{flex:1 1 180px;display:flex;align-items:center;gap:9px;padding:8px 12px;min-width:160px;width:auto}
.finder-field + .finder-field{border-left:1px solid var(--rule)}
.finder-field svg{flex:0 0 auto;color:var(--steel)}
.finder-field input{
  border:0;outline:0;font-family:var(--body);font-size:15px;color:var(--ink);
  width:100%;min-width:0;background:transparent;
}
.finder-field input::placeholder{color:var(--ink-3)}
/* Theme `.btn { width: 100% }` would otherwise swallow the row. */
.finder .btn,.finder .btn.btn-primary{
  flex:0 0 auto;width:auto!important;max-width:none;padding:14px 24px;white-space:nowrap;
}
.finder--listing{
  box-shadow:0 1px 2px rgba(18,33,46,.06), 0 14px 34px -22px rgba(18,33,46,.28);
  margin-bottom:16px;
  border:1px solid var(--rule);
  flex-wrap:nowrap;
}
.finder--listing .finder-field{flex:1 1 180px;min-width:160px}
.servmall-place-note{
  margin:0 0 14px;
  padding:10px 14px;
  border-radius:12px;
  background:#e8f1f9;
  color:var(--navy);
  font-size:14px;
  font-weight:500;
}

.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13.5px;color:#b9cee0}
.hero-meta span{display:flex;align-items:center;gap:7px}
.tick{color:var(--blue-light);flex:0 0 auto}

/* artisan card deck — their card motif, made real */
.deck{position:relative;height:490px;display:flex;align-items:center;justify-content:center}
.acard{
  position:absolute;width:248px;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.55);transition:transform .42s cubic-bezier(.2,.7,.3,1);
}
.acard-photo{position:relative;aspect-ratio:1/.86;overflow:hidden}
.acard-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.acard-body{padding:14px 16px 12px}
.acard-trade{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink)}
.acard-name{font-size:13px;color:var(--ink-3);margin-top:1px}
.acard-rate{display:flex;align-items:center;gap:7px;margin-top:9px}
.stars{display:flex;gap:1.5px}
.stars svg{width:13px;height:13px}
.acard-count{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.acard-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 16px;color:#fff;font-family:var(--display);font-weight:700;font-size:12px;
}
.acard-foot .contact{
  background:rgba(255,255,255,.22);padding:5px 11px;border-radius:100px;font-size:11px;
  border:1px solid rgba(255,255,255,.4);
}
/* Scoped to .acard-photo, which is the only place this belongs: the small
   round verified tick on the home page's stacked artisan cards.

   As a bare `.badge` it hit every Bootstrap badge in the app — and .badge is
   what the booking list, the modals and the service cards use for status
   pills. A pill reading "Accepted" or "COMPLETED" was being absolutely
   positioned into a 26px circle, so it rendered 29px wide with its text
   overflowing across the booking date beside it. It is also why the "Plumber"
   and "Cleaning" category badges measured 0x0 inside the booking modal. */
.acard-photo .badge{
  position:absolute;top:11px;right:11px;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
.deck .c1{transform:translate(116px,-74px) rotate(9deg);z-index:1}
.deck .c2{transform:translate(-116px,-30px) rotate(-10deg);z-index:2}
.deck .c3{transform:translate(2px,72px) rotate(0deg);z-index:3}
.deck:hover .c1{transform:translate(128px,-74px) rotate(11deg)}
.deck:hover .c2{transform:translate(-128px,-24px) rotate(-12deg)}
.deck:hover .c3{transform:translate(0,68px) scale(1.04)}

/* ── trust strip ─────────────────────────────────────── */
.trust{background:var(--navy-black);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.trust-in{
  max-width:var(--wrap);margin:0 auto;padding:26px 24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
.tstat .n{font-family:var(--display);font-weight:800;font-size:27px;color:#fff;font-variant-numeric:tabular-nums}
.tstat .l{font-size:13px;color:#9db6cc;margin-top:1px}

/* ── sections ────────────────────────────────────────── */
section{padding:84px 0}
.sec-head{max-width:620px;margin-bottom:44px}
.sec-head h2{font-size:clamp(29px,3.6vw,41px);font-weight:800;margin:12px 0 14px}
.sec-head p{color:var(--ink-2);font-size:17px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* categories */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cat{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1.24;
  display:flex;align-items:flex-end;isolation:isolate;
}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;z-index:-2;transition:transform .5s ease}
.cat::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(14,33,53,.92) 6%,rgba(14,33,53,.25) 58%,rgba(14,33,53,.05) 100%);
}
.cat:hover img{transform:scale(1.07)}
.cat-body{padding:18px 16px;color:#fff;width:100%}
.cat-body h3{font-size:18px;font-weight:800}
.cat-body .n{font-family:var(--mono);font-size:11px;color:#a9c6de;margin-top:3px;display:block}
.cat-rule{height:4px;width:34px;border-radius:2px;margin-bottom:11px;box-shadow:0 1px 6px rgba(0,0,0,.4)}

/* how it works */
.how{background:var(--paper-2);position:relative;overflow:hidden}
.blob{
  position:absolute;width:760px;opacity:.5;pointer-events:none;z-index:0;
  right:-230px;top:-150px;
}
.how .wrap{position:relative;z-index:1}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.step{background:#fff;padding:28px 26px 30px;position:relative;transition:background .2s}
.step:hover{background:#fbfdff}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.step-n{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--navy);
  background:#e8f1f9;padding:4px 10px;border-radius:100px;letter-spacing:.06em;
}
.step-ico{width:42px;height:42px;object-fit:contain;opacity:.92}
.step h3{font-size:19px;font-weight:800;margin-bottom:9px}
.step p{color:var(--ink-2);font-size:14.5px;line-height:1.58}

/* find an artisan — split */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.split-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.4}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-tag{
  position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.96);
  border-radius:12px;padding:13px 17px;box-shadow:0 16px 34px -16px rgba(0,0,0,.5);
}
.split-tag .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.split-tag .v{font-family:var(--display);font-weight:800;font-size:19px;color:var(--navy);margin-top:2px}
.feat{display:flex;flex-direction:column;gap:20px;margin-top:26px}
.feat-item{display:flex;gap:15px}
.feat-ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:#e8f1f9;color:var(--navy);
}
.feat-item h4{font-family:var(--display);font-size:16px;font-weight:800;margin-bottom:3px}
.feat-item p{font-size:14.5px;color:var(--ink-2)}

/* work gallery */
.gal{
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,168px);gap:14px;
  grid-template-areas:
    "one two   two   three"
    "one four  six   three"
    "five five seven seven";
}
.gal figure{margin:0;border-radius:12px;overflow:hidden;position:relative}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.06)}
.g1{grid-area:one}.g2{grid-area:two}.g3{grid-area:three}
.g4{grid-area:four}.g5{grid-area:five}.g6{grid-area:six}.g7{grid-area:seven}

/* join */
.join{position:relative;color:#fff;overflow:hidden;isolation:isolate;padding:0}
.join img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.join::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(14,33,53,.95),rgba(37,76,109,.8))}
.join-in{max-width:var(--wrap);margin:0 auto;padding:90px 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.join h2{font-size:clamp(30px,3.8vw,44px);font-weight:800;color:#fff;margin-bottom:16px}
.join p{color:#cddced;font-size:17px;max-width:46ch}
.join-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.join-cta .btn{width:auto!important;flex:0 0 auto}
.waitlist{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:22px;
  padding:28px 26px 24px;
  box-shadow:0 28px 60px -32px rgba(8,18,32,.7);
  scroll-margin-top:90px;
}
.waitlist-mark{
  width:44px;height:44px;border-radius:14px;margin-bottom:14px;
  display:grid;place-items:center;color:#fff;
  background:rgba(88,168,224,.22);border:1px solid rgba(88,168,224,.4);
}
.waitlist-eyebrow{display:block;color:var(--blue-light);margin-bottom:8px}
.waitlist h3{font-size:clamp(22px,2.4vw,26px);font-weight:800;color:#fff;margin-bottom:8px}
.waitlist > p{font-size:15px;line-height:1.5;color:#d5e5f3;margin-bottom:18px;max-width:none}
.waitlist-flash{
  margin:0 0 16px;padding:12px 14px;border-radius:12px;font-size:14.5px;line-height:1.45;max-width:none;
}
.waitlist-flash--ok{background:rgba(14,143,92,.22);border:1px solid rgba(90,214,160,.45);color:#e6fff4}
.waitlist-flash--err{background:rgba(180,35,24,.2);border:1px solid rgba(255,140,130,.4);color:#ffe8e6}
.wl-row{
  display:flex;align-items:center;gap:6px;
  background:#fff;border-radius:100px;padding:5px 5px 5px 4px;
}
.wl-row input{
  flex:1 1 auto;min-width:0;padding:12px 14px;border:0;border-radius:100px;
  background:transparent;color:var(--ink);font-family:var(--body);font-size:15px;outline:0;
}
.wl-row input::placeholder{color:var(--ink-3)}
.wl-row input:focus{box-shadow:none}
.wl-row .btn,.wl-row .btn.btn-primary{
  width:auto!important;flex:0 0 auto;padding:12px 18px;white-space:nowrap;
}
.stores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.store-badge{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:10px 10px 10px 12px;border-radius:14px;
  background:rgba(8,18,32,.35);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-family:var(--display);letter-spacing:0;text-transform:none;
}
.store-badge__ico{width:22px;height:22px;flex:0 0 auto}
.store-badge__copy{min-width:0;flex:1 1 auto}
.store-badge__copy small{
  display:block;font-family:var(--body);font-size:10px;font-weight:600;
  color:#9fb8ce;letter-spacing:.04em;text-transform:none;line-height:1.2;
}
.store-badge__copy strong{
  display:block;font-size:13.5px;font-weight:800;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.store-badge em{
  flex:0 0 auto;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cream);
  background:rgba(241,164,7,.18);border:1px solid rgba(241,164,7,.4);
  padding:4px 7px;border-radius:999px;
}

/* footer */
footer{background:var(--navy-black);color:#a8c1d6;padding:60px 0 28px;font-size:14.5px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-brand img{height:34px;margin-bottom:16px}
.f-brand p{max-width:34ch;color:#8fa9c0;font-size:14px}
.f-col h4{font-family:var(--display);font-size:13px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.f-col a{display:block;padding:5px 0;transition:color .16s}
.f-col a:hover{color:#fff}
.f-bot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding-top:22px;font-size:13px;color:#7f99b0}
.f-social{margin-left:auto;display:flex;gap:12px}
.f-social a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.09);display:grid;place-items:center;transition:background .18s}
.f-social a:hover{background:var(--navy)}
.f-social img{width:14px;height:14px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}

@media (max-width:1020px){
  .hero-in,.split,.join-in{grid-template-columns:1fr;gap:44px}
  .hero-in{padding:56px 24px 64px}
  .hero h1{font-size:clamp(32px,6vw,48px)}
  .hero h1 em{white-space:normal}
  .deck{
    height:340px;order:0;overflow:hidden;width:100%;max-width:100%;
    margin-inline:auto;
  }
  .acard{width:200px}
  .deck .c1{transform:translate(72px,-48px) rotate(8deg)}
  .deck .c2{transform:translate(-72px,-18px) rotate(-8deg)}
  .deck .c3{transform:translate(0,52px) rotate(0)}
  .deck:hover .c1{transform:translate(80px,-48px) rotate(9deg)}
  .deck:hover .c2{transform:translate(-80px,-14px) rotate(-9deg)}
  .deck:hover .c3{transform:translate(0,48px) scale(1.03)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .trust-in{grid-template-columns:repeat(2,1fr);gap:22px}
  .f-grid{grid-template-columns:1fr 1fr}
  .blob{width:min(760px,140vw);right:-40vw}
  .nav-links{display:none!important}
  .burger{display:block}
  .nav-cta .signin,.nav-cta > .btn,.nav-account-name{display:none!important}
  .nav-account-btn{padding:6px;gap:0}
  .nav-account-btn svg{display:none}
  nav:has(> .nav-in){
    background:#fff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}
@media (max-width:720px){
  .hero-in{padding:36px 16px 48px;gap:28px}
  .hero h1{font-size:clamp(28px,8.4vw,36px);margin-bottom:14px}
  .hero-sub{font-size:15.5px;margin-bottom:22px}
  .deck{height:260px}
  .acard{width:168px;border-radius:14px}
  .acard-trade{font-size:15px}
  .deck .c1{transform:translate(48px,-36px) rotate(7deg)}
  .deck .c2{transform:translate(-48px,-12px) rotate(-7deg)}
  .deck .c3{transform:translate(0,40px) rotate(0)}
  .deck:hover .c1{transform:translate(52px,-36px) rotate(8deg)}
  .deck:hover .c2{transform:translate(-52px,-10px) rotate(-8deg)}
  .deck:hover .c3{transform:translate(0,36px) scale(1.02)}
  .cats{grid-template-columns:repeat(2,1fr);gap:10px}
  .steps{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .finder,.finder--listing{flex-direction:column;border-radius:18px;flex-wrap:wrap}
  .finder-field,.finder--listing .finder-field{flex:1 1 auto;min-width:0;width:100%}
  .finder-field + .finder-field{border-left:0;border-top:1px solid var(--rule)}
  .finder .btn,.finder .btn.btn-primary{width:100%!important;justify-content:center}
  section{padding:48px 0}
  .join-in{padding:48px 16px;gap:28px}
  .join-cta .btn{flex:1 1 auto;justify-content:center}
  .wl-row{flex-direction:column;align-items:stretch;border-radius:18px;padding:8px;gap:8px}
  .wl-row input{padding:12px 14px}
  .wl-row .btn,.wl-row .btn.btn-primary{width:100%!important;justify-content:center}
  .stores{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;gap:28px}
  .f-social{margin-left:0}
  .trust-in{grid-template-columns:1fr;gap:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

:root {
  --sm-navy: var(--navy);
  --sm-navy-deep: var(--navy-deep);
  --sm-navy-ink: var(--navy-ink);
  --sm-navy-black: var(--navy-black);
  --sm-blue: var(--blue);
  --sm-blue-light: var(--blue-light);
  --sm-steel: var(--steel);
  --sm-mist: var(--mist);
  --sm-cream: var(--cream);
  --sm-ink: var(--ink);
  --sm-ink-2: var(--ink-2);
  --sm-ink-3: var(--ink-3);
  --sm-rule: var(--rule);
  --sm-paper-2: var(--paper-2);
  --sm-display: var(--display);
  --sm-body: var(--body);
  --sm-mono: var(--mono);
  --sm-r: var(--r);
}

/* Inner-page shell (listings, account, booking) inherits the same chrome */
.sm-page { background: var(--paper); min-height: 40vh; }
.sm-page-band { padding: 48px 0 72px; }
.sm-breadcrumb {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
}
.sm-breadcrumb h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--ink);
  margin: 0 0 6px;
}
.sm-breadcrumb p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.sm-breadcrumb .crumbs { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
.sm-breadcrumb .crumbs a { color: var(--navy); font-weight: 600; }

.sm-breadcrumb--compact {
  padding: 14px 0 12px;
  background: linear-gradient(180deg, #f8fafc 0%, var(--paper-2) 100%);
}
.sm-breadcrumb--compact h1 {
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 0 0 2px;
}
.sm-breadcrumb--compact p {
  font-size: 13.5px;
  max-width: 62ch;
  color: var(--ink-3);
  line-height: 1.45;
}
.sm-breadcrumb--compact .crumbs { margin-top: 6px; font-size: 12.5px; }
body.sm-app .sm-page-band {
  padding-top: 16px !important;
  padding-bottom: 40px !important;
}


.nav-links a.is-active{color:var(--navy)}
.nav-links a.is-active::after{right:0}
.nav-drawer a.is-active{color:var(--navy);background:rgba(40,96,144,.08)}
.nav-drawer {
  display: none;
  position: fixed;
  inset: 74px 0 0 0;
  z-index: 105;
  background: #fff !important;
  background-color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  isolation: isolate;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
  flex-direction: column;
  gap: 2px;
  width: 100%;
  height: calc(100dvh - 74px);
  max-height: calc(100dvh - 74px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.open { display: flex; }
.nav-drawer-label {
  margin: 14px 12px 6px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nav-drawer-label:first-child { margin-top: 4px; }
.nav-drawer a,
.nav-drawer .nav-drawer-logout {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  color: var(--ink); padding: 13px 12px;
  border: 0; border-radius: 12px;
  background: transparent;
  width: 100%;
  flex: 0 0 auto;
  text-align: left;
}
.nav-drawer a:hover,
.nav-drawer a:active {
  background: rgba(40,96,144,.08);
  color: var(--navy);
}
.nav-drawer-cta {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-drawer-cta .btn {
  width: 100% !important;
  justify-content: center;
}
body.sm-nav-open nav:has(> .nav-in) {
  z-index: 110;
  background: #fff !important;
}


/* ── App pages under ServMall chrome ───────────────────────────────────── */
body.sm-app {
  background: var(--paper);
}
body.sm-app .sm-page-band {
  padding-top: 28px;
  padding-bottom: 56px;
}
body.sm-app .container-fluid-lg,
body.sm-app .container-fluid-xl,
body.sm-app .container {
  max-width: var(--wrap);
}
body.sm-app .btn-solid,
body.sm-app .btn.btn-solid {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  border-radius: 100px !important;
  font-family: var(--display) !important;
  font-weight: 700 !important;
}
body.sm-app h1, body.sm-app h2, body.sm-app h3, body.sm-app h4 {
  font-family: var(--display) !important;
  text-transform: none !important;
}
body.sm-app .title h2::after,
body.sm-app .title h3::after {
  background: var(--amber) !important;
}

/* Hide leftover header/footer if any partial still renders */
body.sm-app > header:not(.hero),
body.sm-app .sub-header {
  display: none !important;
}

/* ── Services listing (fixes collapsed titles / overlapping footers) ───── */
body.sm-app .sm-page-band {
  padding-top: 8px;
  padding-bottom: 72px;
}
body.sm-app .container-fluid-lg,
body.sm-app .container-fluid-xl {
  /* Same trap as .container-fluid-md on the account pages. The theme gives
     these a fluid side padding that reaches 200px per side at 1920px:

         padding: 0 calc(15px + (200 - 15) * ((100vw - 320px) / (1920 - 320)))

     Box-sizing is border-box, so it came out of the max-width rather than
     sitting outside it. On an 1850px window that left 856px of usable content
     starting at x=497, while the header content ran 1132px from x=359 — every
     listing page sat 138px inside the header above it, which is what made
     Bookings, Find an artisan and Services read as narrow and misaligned.

     Tracking --wrap with the header's own 24px inline padding, so page content
     lines up edge-for-edge with the logo and the breadcrumb. */
  max-width: var(--wrap);
  padding-inline: 24px;
  margin-inline: auto;
  width: 100%;
}
.sm-breadcrumb .wrap {
  text-align: left;
}
.sm-breadcrumb .crumbs {
  text-align: left;
}
.sm-breadcrumb .breadcrumb {
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  background: transparent;
}

.service-list-section {
  padding-top: 8px !important;
}
.service-list-section .filter-sidebar .card {
  height: auto !important;
  transform: none !important;
  box-shadow: var(--sm-shadow, 0 1px 2px rgba(18,33,46,.05)) !important;
}
.service-list-section .filter-sidebar .card:hover {
  transform: none !important;
}
.service-list-section .filter-sidebar .card-header h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  margin: 0;
}
.service-list-section .filter-sidebar .form-check label,
.service-list-section .filter-sidebar .search-body label {
  word-break: break-word;
  white-space: normal;
  line-height: 1.35;
}

.service-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  border-radius: 16px !important;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 1px 2px rgba(18, 33, 46, .05), 0 14px 34px -22px rgba(18, 33, 46, .28) !important;
  transition: transform .22s ease, box-shadow .22s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(18, 33, 46, .06), 0 26px 46px -22px rgba(18, 33, 46, .38) !important;
}
.service-card__media {
  display: block;
  overflow: hidden;
  background: var(--paper-2);
}
.service-card__media img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
  display: block;
  transition: transform .45s ease;
}
.service-card:hover .service-card__media img { transform: scale(1.04); }

.service-card__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px 18px 12px !important;
  flex: 1 1 auto;
  min-width: 0;
}
.service-card__title {
  margin: 0 !important;
  min-width: 0;
  width: 100%;
  /* The title is clamped to two lines below, but a one-line title still
     collapsed its card 22px shorter than its neighbours, so each row stepped.
     Reserving both lines keeps every card in a row the same height. */
  min-height: calc(2 * 1.28 * 17.5px);
}
.service-card__title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
  font-family: var(--display) !important;
  font-weight: 800 !important;
  font-size: 17.5px !important;
  line-height: 1.28 !important;
  color: var(--ink) !important;
  text-transform: none !important;
}
.service-card__title a:hover { color: var(--navy) !important; }

.service-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.service-card__price del {
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 500;
}
.service-card__price strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
}

.service-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.service-card__duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
}
.service-card__type {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  background: #e8f1f9;
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
}
.service-card__excerpt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 18px 16px !important;
  border-top: 1px dashed var(--rule) !important;
  background: transparent !important;
  margin-top: auto;
  flex-wrap: nowrap !important;
}
.service-card__footer::before,
.service-card__footer::after { display: none !important; }

.service-card__artisan {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none !important;
  color: inherit;
}
.service-card__artisan img:not(.star) {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: 0 0 auto;
}
.service-card__artisan span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.service-card__artisan strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
}
.service-card__artisan em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-card__place {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.service-card__artisan .star {
  width: 13px !important;
  height: 13px !important;
}

.service-card .book-now-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  border-radius: 100px !important;
  margin: 0 !important;
  width: auto !important;
}

/* Proximity / location strip */
.servmall-proximity-bar {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 2px rgba(18,33,46,.04);
}

@media (max-width: 767.98px) {
  .service-card__footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .service-card .book-now-btn { width: 100% !important; }
}

/* Service card footer: stack so artisan name never collapses to 1–2 letters */
.service-card__footer {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}
.service-card__artisan {
  width: 100%;
  max-width: 100%;
}
.service-card__artisan strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.service-card .book-now-btn {
  width: 100% !important;
  justify-content: center;
}

/* Filter: category rows were letter-stacking from break-all + tiny flex width */
.service-list-section .category-list .category-item,
.service-list-section .category-list .form-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 10px !important;
}
.service-list-section .category-list .form-check-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.service-list-section .category-list .form-check-label img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
}
.service-list-section .category-list .form-check-label .name,
.service-list-section .category-list .name {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}
.service-list-section .category-list .form-check-input {
  flex: 0 0 auto !important;
  margin: 0 !important;
  float: none !important;
}

/* Provider filter rows */
.service-list-section .provider-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.service-list-section .provider-item ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
.service-list-section .provider-item li {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
}
.service-list-section .provider-item li.name {
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.service-list-section .provider-item li.served,
.service-list-section .provider-item li.year {
  color: var(--ink-3) !important;
  font-size: 12.5px !important;
}

/* Location strip: compact, no huge empty band */
.servmall-proximity-bar {
  min-height: 0 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.servmall-proximity-note {
  margin: 0 !important;
  flex: 1 1 200px;
  min-width: 0;
  display: inline-flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2) !important;
  line-height: 1.35;
}
.servmall-proximity-place {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}
.servmall-proximity-place::before {
  content: "·";
  margin: 0 8px;
  font-weight: 500;
  color: var(--ink-3);
}
.servmall-proximity-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.servmall-proximity-bar .btn,
.servmall-set-location {
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto;
  white-space: nowrap;
}
.nav-links a.is-active { color: var(--navy) !important; }
.nav-links a.is-active::after { right: 0 !important; }

.sm-breadcrumb .crumbs,
.sm-breadcrumb .breadcrumb,
.sm-breadcrumb .breadcrumb-item,
.sm-breadcrumb .breadcrumb-item a {
  color: var(--ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.sm-breadcrumb .breadcrumb-item.active {
  color: var(--ink) !important;
  font-weight: 600 !important;
}
.sm-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ink-3) !important;
}

.service-list-section .category-list .form-check-label .name {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.service-list-section .filter .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px !important;
}
.service-list-section .filter .accordion {
  border-top: 1px solid var(--rule);
}
.service-list-section .filter .accordion-button {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: var(--ink) !important;
}

/* ── Account dashboard shell (compact + structured) ───────────────────── */
body.sm-app .sm-account,
body.sm-app .profile-body-wrapper {
  --sm-acc-radius: 16px;
  --sm-acc-radius-sm: 12px;
}
body.sm-app .sm-account.section-b-space {
  padding-top: 0 !important;
  padding-bottom: 28px !important;
  background: transparent !important;
}
body.sm-app .sm-account .container-fluid-md {
  /* The theme gives .container-fluid-md a fluid side padding that reaches
     245px per side at 1920px wide:

         padding: 0 calc(15px + (245 - 15) * ((100vw - 320px) / (1920 - 320)))

     Box-sizing is border-box, so that padding came out of the 1120px cap
     rather than sitting outside it — on a 1850px window the account content
     was left with roughly 650px, a narrow column floating in the middle of a
     wide screen while the header and breadcrumb ran the full 1180px.

     Dropping the padding and tracking --wrap instead, so the account pages
     line up with the header, the breadcrumb and the rest of the site.

     The 24px inline padding matches .wrap and the header's .nav-in, so the
     account content lines up edge-for-edge with the logo above it and the
     breadcrumb beside it rather than sitting 24px proud of both. */
  max-width: var(--wrap);
  padding-inline: 24px;
  margin-inline: auto;
  width: 100%;
}
body.sm-app .profile-body-wrapper,
body.sm-app .sm-account-shell {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.sm-app .sm-account-shell > .row,
body.sm-app .profile-body-wrapper > .row {
  align-items: flex-start !important;
  --bs-gutter-x: 14px;
  --bs-gutter-y: 14px;
}

/* Sidebar — hug content, stronger contrast */
body.sm-app .sm-account-sidebar.profile-wrapper,
body.sm-app .profile-body-wrapper .profile-wrapper.sm-account-sidebar {
  background:
    linear-gradient(165deg, rgba(255,255,255,.08) 0%, transparent 38%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%) !important;
  border-radius: var(--sm-acc-radius) !important;
  padding: 16px 12px 12px !important;
  position: sticky;
  top: 88px;
  height: fit-content !important;
  max-height: calc(100vh - 104px);
  align-self: flex-start;
  box-shadow: 0 16px 36px -26px rgba(14,33,53,.55);
  border: 1px solid rgba(255,255,255,.1);
  overflow-x: hidden;
  overflow-y: auto;
}
body.sm-app .sm-account-sidebar::before {
  content: "";
  position: absolute;
  inset: -30px -16px auto -16px;
  height: 120px;
  background: radial-gradient(circle at 28% 40%, rgba(88,168,224,.28), transparent 58%);
  pointer-events: none;
}
body.sm-app .sm-account-sidebar__close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background: rgba(255,255,255,.14); border: 0; border-radius: 999px;
  width: 30px; height: 30px; display: grid; place-items: center; color: #fff;
}
body.sm-app .sm-account-sidebar__close .iconsax {
  --Iconsax-Color: #fff !important;
  transform: rotate(45deg);
}
body.sm-app .sm-account-user {
  position: relative; z-index: 1; text-align: center;
  padding: 4px 6px 14px !important; margin: 0 !important;
}
body.sm-app .sm-account-user__avatar {
  margin: 0 auto 10px !important; width: 64px; height: 64px;
}
body.sm-app .sm-account-user__avatar img,
body.sm-app .sm-account-user__avatar .initial-letter {
  width: 64px !important; height: 64px !important;
  border-radius: 50% !important; border: 2px solid #fff !important;
  object-fit: cover; box-shadow: 0 8px 18px -10px rgba(0,0,0,.45);
}
body.sm-app .sm-account-user__avatar .initial-letter {
  display: grid; place-items: center; background: rgba(255,255,255,.2);
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 22px; margin: 0 auto;
}
body.sm-app .sm-account-user__edit {
  position: absolute !important; right: -2px; bottom: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue) !important; border: 2px solid #fff !important;
  display: grid; place-items: center;
}
body.sm-app .sm-account-user__edit .iconsax {
  --Iconsax-Color: #fff !important; --Iconsax-Size: 12px !important;
}
body.sm-app .sm-account-user__meta { background: transparent !important; padding: 0 !important; }
body.sm-app .sm-account-user__meta svg { display: none !important; }
body.sm-app .sm-account-user__meta h5 {
  color: #fff !important; font-family: var(--display) !important;
  font-weight: 800 !important; font-size: 15px !important; margin: 0 0 2px !important;
  line-height: 1.2;
}
body.sm-app .sm-account-user__meta p {
  color: rgba(255,255,255,.88) !important; font-size: 12px !important;
  margin: 0 !important; word-break: break-word; line-height: 1.3;
}
body.sm-app .sm-account-user__meta p .iconsax { display: none; }

body.sm-app .sm-account-nav {
  position: relative; z-index: 1; padding: 0 !important;
  max-height: none !important; overflow: visible !important;
}
body.sm-app .sm-account-nav .menu-wrapper {
  display: flex; flex-direction: column; gap: 2px; border: 0 !important;
}
body.sm-app .sm-account-nav .nav-item { width: 100%; margin: 0 !important; }
body.sm-app .sm-account-nav .nav-link {
  display: flex !important; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px !important; border: 0 !important; border-radius: 10px !important;
  color: rgba(255,255,255,.94) !important; background: transparent !important;
  font-family: var(--display) !important; font-weight: 650 !important;
  font-size: 13.5px !important; line-height: 1.2;
  transition: background .15s ease, color .15s ease;
}
body.sm-app .sm-account-nav .nav-link .iconsax {
  --Iconsax-Color: rgba(255,255,255,.95) !important;
  --Iconsax-Size: 18px !important; flex: 0 0 auto;
}
body.sm-app .sm-account-nav .nav-link svg,
body.sm-app .sm-account-nav .nav-link .active-icon,
body.sm-app .sm-account-nav .nav-link .deactive-icon { display: none !important; }
body.sm-app .sm-account-nav .nav-link:hover {
  background: rgba(255,255,255,.14) !important; color: #fff !important;
}
body.sm-app .sm-account-nav .nav-link.active {
  background: #fff !important; color: var(--navy-ink) !important;
  box-shadow: 0 8px 18px -14px rgba(0,0,0,.4);
}
body.sm-app .sm-account-nav .nav-link.active .iconsax {
  --Iconsax-Color: var(--navy) !important;
}
body.sm-app .sm-account-nav .profile-logout {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.16);
}
body.sm-app .sm-account-nav .profile-logout .nav-link:hover {
  background: rgba(205,51,98,.2) !important;
}

body.sm-app .sm-account-menu-btn,
body.sm-app .sm-account .filter-btn {
  border: 0; border-radius: 999px; background: var(--navy) !important;
  color: #fff !important; font-family: var(--display); font-weight: 700;
  font-size: 13px; padding: 8px 14px; margin-bottom: 10px;
}

/* Content panels */
body.sm-app .sm-account-main,
body.sm-app .profile-body-wrapper .profile-main {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
}
body.sm-app .sm-account-panel,
body.sm-app .sm-wallet-panel,
body.sm-app .profile-body-wrapper .profile-main > .card {
  background: #fff !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--sm-acc-radius) !important;
  box-shadow: 0 10px 28px -24px rgba(18,33,46,.35) !important;
  padding: 16px 18px !important;
}
body.sm-app .profile-body-wrapper .profile-main > .card > .card-header,
body.sm-app .sm-account-heading {
  background: transparent !important; border: 0 !important;
  padding: 0 0 12px !important; margin: 0 0 4px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
body.sm-app .sm-account-heading h1,
body.sm-app .profile-body-wrapper .profile-main > .card > .card-header .title-3 h3,
body.sm-app .profile-body-wrapper .profile-main .title-3 h3 {
  position: relative; margin: 0 !important; padding-left: 12px;
  font-family: var(--display) !important; font-weight: 800 !important;
  font-size: 20px !important; color: var(--ink) !important; letter-spacing: -.02em;
}
body.sm-app .sm-account-heading h1::before,
body.sm-app .profile-body-wrapper .profile-main > .card > .card-header .title-3 h3::before,
body.sm-app .profile-body-wrapper .profile-main .title-3 h3::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--blue), var(--navy));
}
body.sm-app .profile-body-wrapper .profile-main > .card > .card-body {
  padding: 0 !important; background: transparent !important;
}
body.sm-app .profile-body-wrapper .edit-option {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: 999px; border: 0;
  background: var(--navy); color: #fff !important;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  text-decoration: none !important;
}
body.sm-app .profile-body-wrapper .edit-option:hover { background: var(--navy-ink); color: #fff !important; }

/* Dashboard stats */
body.sm-app .sm-stat-grid,
body.sm-app .profile-body-wrapper .widgets .row {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 0 0 12px !important;
}
body.sm-app .profile-body-wrapper .widgets .row > [class*="col-"] {
  width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important;
}
body.sm-app .sm-stat-card,
body.sm-app .profile-body-wrapper .widgets .card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 15px !important; background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important; border-radius: var(--sm-acc-radius-sm) !important;
  box-shadow: none !important; text-decoration: none !important; color: inherit !important; height: 100%;
  transition: border-color .15s ease, transform .15s ease;
}
body.sm-app .sm-stat-card:hover,
body.sm-app .profile-body-wrapper .widgets .card:hover {
  transform: translateY(-1px); border-color: rgba(72,160,232,.45) !important;
}
body.sm-app .sm-stat-icon,
body.sm-app .profile-body-wrapper .widgets .data-icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  flex: 0 0 auto; background: rgba(40,96,144,.1); color: var(--navy);
}
body.sm-app .sm-stat-icon .iconsax,
body.sm-app .profile-body-wrapper .widgets .data-icon .iconsax {
  --Iconsax-Color: var(--navy) !important; --Iconsax-Size: 20px !important;
}
body.sm-app .profile-body-wrapper .widgets .data-icon .dot { display: none !important; }
body.sm-app .sm-stat-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.sm-app .sm-stat-label,
body.sm-app .profile-body-wrapper .widgets .data h3 {
  font-family: var(--display) !important; font-weight: 800 !important;
  font-size: 14px !important; color: var(--ink) !important; margin: 0 !important;
}
body.sm-app .sm-stat-value,
body.sm-app .sm-stat-meta,
body.sm-app .profile-body-wrapper .widgets .data h5 {
  font-size: 13px !important; font-weight: 500 !important; color: var(--ink-2) !important; margin: 0 !important;
}
body.sm-app .sm-stat-value {
  font-family: var(--display); font-weight: 750 !important; font-size: 16px !important; color: var(--navy-ink) !important;
}

/* Profile settings */
body.sm-app .sm-profile-card,
body.sm-app .profile-body-wrapper .profile-data > .card {
  background: var(--paper-2) !important; border: 1px solid var(--rule) !important;
  border-radius: var(--sm-acc-radius-sm) !important; box-shadow: none !important;
  padding: 16px !important; margin: 0 !important;
}
body.sm-app .sm-profile-card__title,
body.sm-app .profile-body-wrapper .profile-data > h3 {
  font-family: var(--display) !important; font-weight: 800 !important;
  font-size: 15px !important; color: var(--ink) !important; margin: 0 0 12px !important;
}
body.sm-app .sm-profile-card__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 18px; align-items: center;
}
body.sm-app .sm-profile-fields { display: flex; flex-direction: column; gap: 12px; }
body.sm-app .sm-field__label,
body.sm-app .profile-body-wrapper .personal-detail .form-group label {
  display: block; font-size: 11.5px !important; font-weight: 650 !important;
  color: var(--ink-3) !important; margin-bottom: 2px !important; text-transform: none !important;
}
body.sm-app .sm-field__label-row { display: flex; align-items: center; gap: 6px; }
body.sm-app .sm-field__edit {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  color: var(--navy); background: rgba(72,160,232,.14);
}
body.sm-app .sm-field__edit .iconsax { --Iconsax-Color: var(--navy) !important; --Iconsax-Size: 12px !important; }
body.sm-app .sm-field__value,
body.sm-app .profile-body-wrapper .personal-detail .form-group .value {
  font-family: var(--display) !important; font-weight: 750 !important;
  font-size: 14.5px !important; color: var(--ink) !important; margin: 0 !important; line-height: 1.3;
}
body.sm-app .sm-profile-art {
  display: grid; place-items: center; min-height: 180px; border-radius: 12px;
  background: linear-gradient(180deg, #fff, #eef4f9); padding: 8px;
}
body.sm-app .sm-profile-art img {
  max-height: 200px; width: auto; margin: 0 auto;
  filter: drop-shadow(0 12px 16px rgba(22,50,76,.1));
}
body.sm-app .profile-body-wrapper .widget-data {
  display: flex !important; align-items: flex-start; gap: 12px; width: 100%;
}
body.sm-app .profile-body-wrapper .notification-list {
  border: 1px solid var(--rule) !important; border-radius: 12px !important;
  padding: 12px 14px !important; margin-bottom: 8px !important; background: #fff;
}
body.sm-app .profile-body-wrapper .btn-link.text-primary {
  color: var(--navy) !important; font-family: var(--display); font-weight: 700; text-decoration: none !important;
}

/* Wallet compact layout */
body.sm-app .sm-wallet-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; margin-bottom: 14px;
  border-radius: 14px;
  background:
    linear-gradient(120deg, rgba(40,96,144,.08), rgba(72,160,232,.08) 55%, rgba(241,164,7,.08));
  border: 1px solid rgba(40,96,144,.12);
}
body.sm-app .sm-wallet-hero__eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px;
}
body.sm-app .sm-wallet-hero__balance {
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 30px);
  color: var(--navy-ink); margin: 0; letter-spacing: -.03em; line-height: 1.1;
}
body.sm-app .sm-wallet-hero__hint {
  margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3);
}
body.sm-app .sm-wallet-add {
  flex: 0 0 auto; border-radius: 999px !important; padding: 10px 16px !important;
  font-size: 13.5px !important; white-space: nowrap;
}
body.sm-app .sm-wallet-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
}
body.sm-app .sm-wallet-toolbar__title {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink);
}
body.sm-app .sm-wallet-toolbar__filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.sm-app .sm-wallet-date {
  display: flex; align-items: center; gap: 8px;
  min-width: 200px; padding: 0 12px; height: 40px;
  border: 1px solid var(--rule); border-radius: 10px; background: #fff;
}
body.sm-app .sm-wallet-date .iconsax { --Iconsax-Color: var(--ink-3); --Iconsax-Size: 16px; }
body.sm-app .sm-wallet-date .form-control {
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
  height: auto !important; background: transparent !important; font-size: 13.5px;
}
body.sm-app .sm-wallet-apply {
  height: 40px; padding: 0 16px !important; border-radius: 10px !important;
  font-size: 13.5px !important;
}
body.sm-app .sm-wallet-table {
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: #fff;
}
body.sm-app .sm-wallet-table .dataTables_wrapper {
  padding: 10px 12px 8px;
}
body.sm-app .sm-wallet-table .dataTables_length,
body.sm-app .sm-wallet-table .dataTables_filter {
  margin-bottom: 8px !important; font-size: 13px; color: var(--ink-2);
}
body.sm-app .sm-wallet-table .dataTables_filter input,
body.sm-app .sm-wallet-table .dataTables_length select {
  border: 1px solid var(--rule) !important; border-radius: 8px !important;
  height: 34px !important; padding: 4px 10px !important; font-size: 13px !important;
}
body.sm-app .sm-wallet-table table.dataTable,
body.sm-app .sm-data-table {
  width: 100% !important; margin: 0 !important; border-collapse: collapse !important;
}
body.sm-app .sm-wallet-table table.dataTable thead { display: none; }
body.sm-app .sm-wallet-table table.dataTable tbody tr {
  border-top: 1px solid var(--rule);
}
body.sm-app .sm-wallet-table table.dataTable tbody tr:first-child { border-top: 0; }
body.sm-app .sm-wallet-table table.dataTable tbody td {
  padding: 12px 10px !important; vertical-align: middle !important;
  font-size: 13.5px !important; color: var(--ink) !important;
  border: 0 !important; background: transparent !important;
}
body.sm-app .sm-wallet-table table.dataTable tbody td:first-child {
  font-family: var(--display); font-weight: 800; color: var(--navy-ink) !important;
  white-space: nowrap; width: 1%;
}
body.sm-app .sm-wallet-table .badge,
body.sm-app .sm-wallet-table .status {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
body.sm-app .sm-wallet-table .dataTables_info,
body.sm-app .sm-wallet-table .dataTables_paginate {
  padding-top: 8px !important; font-size: 12.5px; color: var(--ink-3);
}
body.sm-app .sm-wallet-table .paginate_button {
  border-radius: 8px !important; padding: 4px 8px !important;
}

/* Offer cards in top-up modal */
body.sm-app .offer-card {
  border-radius: 12px; padding: 14px; color: #fff; cursor: pointer;
  background: linear-gradient(145deg, var(--navy), var(--blue));
  min-height: 110px; display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
body.sm-app .offer-card:hover { transform: translateY(-2px); }
body.sm-app .offer-title { color: #fff; font-size: 14px; font-weight: 700; margin: 6px 0; text-align: center; }
body.sm-app .offer-badge {
  display: inline-block; background: #fff; color: var(--navy); border-radius: 999px;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px;
}
body.sm-app .offer-min-amount { color: rgba(255,255,255,.9); font-size: 12.5px; text-align: center; }

@media (max-width: 1199.98px) {
  body.sm-app .sm-account-sidebar.profile-wrapper,
  body.sm-app .profile-body-wrapper .profile-wrapper.sm-account-sidebar {
    position: fixed !important; top: 0 !important; left: -360px;
    width: min(300px, 86vw) !important; height: 100vh !important;
    border-radius: 0 !important; z-index: 1050; transition: left .28s ease;
    overflow: auto !important;
  }
  body.sm-app .sm-account-sidebar.profile-wrapper.open,
  body.sm-app .profile-body-wrapper .profile-wrapper.sm-account-sidebar.open {
    left: 0 !important;
  }
}
@media (max-width: 991.98px) {
  body.sm-app .sm-stat-grid,
  body.sm-app .profile-body-wrapper .widgets .row { grid-template-columns: 1fr; }
  body.sm-app .sm-profile-card__grid { grid-template-columns: 1fr; }
  body.sm-app .sm-profile-art { display: none; }
  body.sm-app .sm-wallet-hero { flex-direction: column; align-items: flex-start; }
  body.sm-app .sm-wallet-toolbar { align-items: stretch; }
  body.sm-app .sm-wallet-toolbar__filters { width: 100%; }
  body.sm-app .sm-wallet-date { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.sm-app .sm-stat-card,
  body.sm-app .sm-account-nav .nav-link,
  body.sm-app .offer-card { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Profile card header

   The "Profile setting" card listed name, phone, email and address read-only
   with an edit control only beside Password. The one trigger for the profile
   modal was a small pencil on the avatar in the sidebar, which is not where
   anyone looks when they are reading the card that says "Profile setting".
   -------------------------------------------------------------------------- */
body.sm-app .sm-profile-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 12px;
}
body.sm-app .sm-profile-card__head .sm-profile-card__title { margin: 0 !important; }
body.sm-app .sm-profile-card__edit {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  color: var(--navy); background: rgba(72, 160, 232, .14);
  border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer;
  transition: background .15s;
}
body.sm-app .sm-profile-card__edit:hover { background: rgba(72, 160, 232, .24); }
body.sm-app .sm-profile-card__edit .iconsax {
  --Iconsax-Color: var(--navy) !important; --Iconsax-Size: 13px !important;
}

/* --------------------------------------------------------------------------
   Form labels

   The purchased theme sets a bare `label { color: #808b97 }`, which measures
   3.47:1 on white — under the 4.5:1 WCAG AA floor for text this size, on every
   form in the app. One class on a label still beats this selector, so anything
   deliberately styled (white labels on a dark panel, for instance) is
   untouched; only labels falling through to the theme default change.
   -------------------------------------------------------------------------- */
body.sm-app label { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   <header> inside the account shell

   The purchased theme carries a bare `header { position:absolute; left:0;
   width:100% }` for its own site header. Our account cards use <header> for
   their titles, so the rule tore them out of flow and stretched them to the
   viewport:

     - /account/profile — the "Dashboard" title was absolutely positioned at
       left:0, which is why it never appeared above the cards.
     - /account/wallet  — the wallet hero became 1280px wide inside a 607px
       panel, and with the theme's `.btn { width:100% }` the "+ Add Balance"
       button rendered 1246px wide and pushed the page 154px past the viewport,
       giving the whole page a horizontal scrollbar.

   Restoring normal flow for headers inside the account shell, and letting the
   wallet button size to its own content.
   -------------------------------------------------------------------------- */
body.sm-app .profile-body-wrapper header,
body.sm-app .sm-account-shell header,
body.sm-app .sm-account-heading,
body.sm-app .sm-wallet-hero {
  position: static !important;
  inset: auto !important;
  width: auto !important;
}

/* The theme's `.btn { width: 100% }` also stretched the wallet's Apply button
   to fill the toolbar beside a compact date field. Both size to content. */
body.sm-app .sm-wallet-add,
body.sm-app .sm-wallet-apply,
body.sm-app .nav-cta .btn { width: auto !important; flex: 0 0 auto; }
body.sm-app .sm-account .btn,
body.sm-app .sm-account-panel .btn,
body.sm-app .sm-account-heading .btn,
body.sm-app .sm-job-actions .btn,
body.sm-app .sm-form__actions .btn,
body.sm-app .sm-row-card .btn {
  width: auto !important;
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 13.5px;
}
@media (min-width: 721px) {
  body.sm-app .finder .btn { width: auto !important; flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Muted text from the purchased theme

   Three colours in the theme's compiled stylesheet fall under the 4.5:1 WCAG AA
   floor for body-size text, and they carry real content, not decoration:

     #808b97  3.47:1  notification titles and bodies, the country-code hint
     #999999  2.63:1  select2 placeholders — "Select Country", "Select State"
     #ff4b4b  3.30:1  the Debit pill in the wallet ledger, on its own 10% tint

   Replaced with measured equivalents that keep the same visual hierarchy:
   #5a7082 is 5.15:1 on white, #5f7688 is 4.74:1, #d32f2f is 4.98:1. Scoped to
   body.sm-app rather than edited into the vendor file, and !important because
   the theme's own selectors are more specific than a sane override would be.
   -------------------------------------------------------------------------- */
body.sm-app .notification-list .notify-note h5,
body.sm-app .notification-list .notify-note p,
body.sm-app .notify .notify-note h5,
body.sm-app .notify .notify-note p,
body.sm-app .location-header .delivery-name .name span {
  color: #5a7082 !important;
}

/* #5f7688 measures 4.74:1 on white but only 4.38:1 on the grey control
   background these placeholders actually sit on. #5a7082 is 4.84:1 there. */
body.sm-app .select2-selection__placeholder { color: #5a7082 !important; }

/* The Debit pill in the wallet ledger sits on its own 10% red tint, not on
   white — #d32f2f is 4.41:1 there, #cc2b2b is 4.71:1. */
body.sm-app .danger-light { color: #cc2b2b !important; }

/* ==========================================================================
   --primary-color: the theme's brand colour was switched off across the app

   The purchased stylesheet declares the variable twice:

       :root { --primary-color: #5465FF }       … a colour
       :root { --primary-color: 84, 101, 255 }  … a triplet, and this one wins

   301 declarations reference it. 298 of them use it bare — `background-color:
   var(--primary-color)`, `color: var(--primary-color)`, `border: 1px solid
   var(--primary-color)` — and a bare triplet is not a valid colour, so every
   one of those declarations is invalid at computed-value time and thrown away
   by the browser. Only 3 declarations want the triplet, for rgba() tints.

   The layout does emit `style="--primary-color: {{ theme_color }}"` on <html>
   when the admin has set a theme colour, which would fix it — but that setting
   is empty, so nothing is emitted and the broken triplet stands.

   What this looked like: anything the ServMall stylesheets did not already
   restyle simply lost its colour. The category badges on booking cards
   ("Plumber", "Cleaning") rendered as white text on a transparent background,
   and so did the active page number in every paginated list — invisible, not
   merely low contrast.

   Setting a valid default here. An admin theme colour still wins, because an
   inline style on <html> beats any stylesheet.
   ========================================================================== */
html:root { --primary-color: #286090; }

/* The three rules that genuinely wanted the triplet, restated with the colour
   written out so they keep working now that the variable is a colour. */
body.sm-app .badge-primary-light { background-color: rgba(40, 96, 144, .1); }
body.sm-app .chatting-main-box .right-sidebar-chat .right-sidebar-Chats .message .msger-chat::-webkit-scrollbar-thumb { background: #286090; }
@supports not selector(::-webkit-scrollbar) {
  body.sm-app .chatting-main-box .right-sidebar-chat .right-sidebar-Chats .message .msger-chat { scrollbar-color: #286090 #e2e9ef; }
}

/* ==========================================================================
   Muted body text — #808b97

   The purchased stylesheet hardcodes #808b97 as its muted text colour in 132
   places. On white it measures 3.47:1 and on the grey cards 3.20:1, both under
   the 4.5:1 WCAG AA floor for text this size — and it is not decoration: it
   carries booking dates and locations, provider addresses and ratings,
   notification bodies and timestamps, filter labels and empty states.

   #5a7082 measures 5.15:1 on white and 4.84:1 on the card, and stays clearly
   lighter than the heading colour so the hierarchy is unchanged.

   The selectors below are generated from the vendor stylesheet — every rule
   that sets `color:#808b97`, restated under body.sm-app. Only `color` is
   remapped; the same hex used for backgrounds, borders and icon fills is left
   alone, because changing those would be a redesign rather than a fix.
   ========================================================================== */
body.sm-app label,
body.sm-app .rate small,
body.sm-app .note label,
body.sm-app .time-slot,
body.sm-app .badge-light-light,
body.sm-app .filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li,
body.sm-app .booking-sec .data li,
body.sm-app .breadcrumb-section .breadcrumb-contain p,
body.sm-app .btn.disabled,
body.sm-app .text-info,
body.sm-app .info-light-badge,
body.sm-app .flatpickr-calendar .flatpickr-day.selected,
body.sm-app .mbsc-datepicker .mbsc-datepicker-tab-timegrid.mbsc-datepicker-tab .mbsc-timegrid-container .mbsc-timegrid-row .mbsc-timegrid-cell .mbsc-timegrid-item,
body.sm-app .card.dark-card,
body.sm-app .cart .cart-header,
body.sm-app .cart .cart-body .cart-item .cart-detail .selected-service .service-info p,
body.sm-app .cart .cart-body .cart-item .cart-detail .selected-service .service-info .addons-title,
body.sm-app .cart .cart-body .cart-item .cart-detail .selected-service .service-info .date li i,
body.sm-app .bill-summary .charge, body.sm-app .payment-summary .charge,
body.sm-app .coupon-item .coupon-content h5,
body.sm-app .coupon-item .coupon-footer p,
body.sm-app .payment .payment-body .payment-options .payment-option .payment-title p,
body.sm-app .payment .wallet-body .wallet-history .history-list .date,
body.sm-app .review-section .review-content .review-card .review-detail .review-auth-name span,
body.sm-app .review-section .review-content .review-card .review-detail .review-right-box h4,
body.sm-app .select-dropdown .form-group,
body.sm-app .basic-wizard .stepper-horizontal .step .step-title,
body.sm-app .basic-wizard .stepper-horizontal .step .step-circle,
body.sm-app .service-booking .delivery-location .location-header .name span,
body.sm-app [dir=rtl] .form-check .form-radio-input:before,
body.sm-app .form-select.form-select-white,
body.sm-app .form-select.form-select-white:focus, body.sm-app .form-select.form-select-white:hover,
body.sm-app .form-select.form-select-sm:focus, body.sm-app .form-select.form-select-sm:hover,
body.sm-app .search-form .form-control,
body.sm-app .home-section .home-contain h1,
body.sm-app [dir=rtl] .home-section .home-contain .home-form-group .input-group .position-relative .form-control,
body.sm-app .modal .modal-dialog .modal-content .modal-body p,
body.sm-app .modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman .serviceman-detail,
body.sm-app .modal.book-service .modal-dialog .modal-content .modal-body .select-additional .form-check label,
body.sm-app .modal.location-modal .location-map .category .form-check,
body.sm-app .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .note,
body.sm-app .modal.coupon-modal .modal-content .modal-body,
body.sm-app .modal.pending-modal .modal-body.booking-sec .bill-summary .charge, body.sm-app .modal.accepted-modal .modal-body.booking-sec .bill-summary .charge, body.sm-app .modal.ongoing-modal .modal-body.booking-sec .bill-summary .charge, body.sm-app .modal.completed-modal .modal-body.booking-sec .bill-summary .charge,
body.sm-app .modal.status-modal .modal-content .modal-body .status-history ul li .status-time,
body.sm-app .modal.status-modal .modal-content .modal-body .status-history ul li .status-des,
body.sm-app .modal.review-modal .modal-content .modal-body .rate-content p,
body.sm-app .modal.job-request-modal .modal-content .job-request-form .discription-content,
body.sm-app .modal.custom-job-modal .custom-job-title .description-content,
body.sm-app .modal.custom-job-modal .listing li .listing-box h5,
body.sm-app .select-option,
body.sm-app .servicemen-list-item .list p,
body.sm-app .emoji-tab .emoji-icon h4,
body.sm-app .select2-container--default .select2-results__option[aria-selected] span,
body.sm-app .pagination-main,
body.sm-app .pagination-main .pagination .page-item .page-link,
body.sm-app .pagination .page-item .page-link,
body.sm-app .profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data h5,
body.sm-app .profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date span,
body.sm-app .profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date h6,
body.sm-app .profile-body-wrapper .profile-main .review-main .review-list p,
body.sm-app .notifications .notification-list .notify .notify-note h5,
body.sm-app .notifications .notification-list .notify .notify-note p,
body.sm-app .notifications .notification-list .notify-time,
body.sm-app .job-request-list .job-request-box .job-content .job-date .date,
body.sm-app .star-rating label,
body.sm-app .reviews .person-detail p,
body.sm-app .rating-bars .rating-bar .left,
body.sm-app .table-responsive .table thead tr th,
body.sm-app .table-responsive .table.wallet-table table tbody tr td:nth-child(2), body.sm-app .table-responsive .table.wallet-table table tbody tr td:first-child,
body.sm-app .wallet-data-table .table tbody tr td:nth-child(3),
body.sm-app #referral-data tbody tr td .user-email,
body.sm-app .review-tab .nav-item .nav-link,
body.sm-app .newsletter-section .newsletter-content .newsletter-detail .form-group .form-control,
body.sm-app .about-us-section .about-us-content .card .card-body .card-detail p, body.sm-app .about-us-section-1 .about-us-content .card .card-body .card-detail p,
body.sm-app .more-section .more-content p, body.sm-app .feature-section .more-content p,
body.sm-app .about-us .content-detail .item-lists li .detail p,
body.sm-app .about-us-section-1 .about-us-content .card .card-body .card-detail h3,
body.sm-app .login-main .login-card .login-title h2,
body.sm-app .login-main .login-card .login-detail .not-member,
body.sm-app .login-main .login-card .options,
body.sm-app .terms p,
body.sm-app .blog-section .blog-content .card .card-body,
body.sm-app .blog-section .blog-detail,
body.sm-app .category-section .custom-nav-tabs .nav-link .text-box small,
body.sm-app .contact-section .contact-content .contact-info li,
body.sm-app .expert-content .dark-card .card-body .card-detail p, body.sm-app .expert-content .gray-card .card-body .card-detail p,
body.sm-app .reviews-main h6,
body.sm-app .location h5,
body.sm-app .provider-detail .provider-content p,
body.sm-app .application-section .title h2,
body.sm-app .service-title span,
body.sm-app .service-detail p,
body.sm-app .date-time li,
body.sm-app .service-type,
body.sm-app .detail-content .title,
body.sm-app .detail-content .detail-sec,
body.sm-app .detail-content.service-details-content ul li, body.sm-app .detail-content.service-details-content ol li,
body.sm-app .no-cart-found p,
body.sm-app .service-package-section .service-item .service-left-box .service-title p {
  color: #5a7082;
}

/* --------------------------------------------------------------------------
   Muted body text — the selectors the generated pass above missed

   Six vendor rules set color:#808b97 through selectors more specific than the
   generated overrides (e.g. `.form-check .form-radio-input ~ label` at 0,3,1
   beats `body.sm-app label` at 0,2,1), so they kept their 3.47:1 grey — the
   Sort By options in the services filter, notification timestamps, the bill
   summary inside the booking modals, and a couple of empty states.

   Deliberately NOT included: `.flatpickr-calendar .flatpickr-day.prevMonthDay,
   .flatpickr-disabled` and friends — 24 elements, all of them disabled or
   out-of-month calendar days. Muting is what marks them unselectable, and
   WCAG exempts disabled controls from the contrast minimum. Raising those
   would remove the only signal that says the day cannot be picked.
   -------------------------------------------------------------------------- */
body.sm-app .form-check .form-radio-input ~ label,
body.sm-app .notifications .notification-list .notify-time span,
body.sm-app .modal.pending-modal .modal-body.booking-sec .bill-summary .charge p,
body.sm-app .modal.accepted-modal .modal-body.booking-sec .bill-summary .charge p,
body.sm-app .servicemen-list-item .list p,
body.sm-app .provider-detail .provider-content p,
body.sm-app .wallet-data-table .table tbody tr td:last-child {
  color: #5a7082;
}

/* Remaining muted-text stragglers, same reasoning as the block above:
   modal body copy, the category tile subtitle (#a9c6de, 1.78:1 — "3 services"
   was very nearly invisible), the empty cart message, and two list bodies.
   The 24 flatpickr entries are disabled calendar days and stay muted. */
body.sm-app .modal .modal-dialog .modal-content .modal-body p,
body.sm-app .servicemen-list-item .list p,
body.sm-app .provider-detail .provider-content p,
body.sm-app .no-cart-found p {
  color: #5a7082;
}
body.sm-app .cat-body .n { color: #566b7d; }

/* --------------------------------------------------------------------------
   Bookings list
   -------------------------------------------------------------------------- */

/* The artisan row: label left, artisan chip right, in line with every other
   field. The theme styled .selected-men as a standalone bordered card because
   that is what it used to be — a stray div outside the list. */
body.sm-app .booking-provider-row {
  align-items: center;
}
body.sm-app .booking-provider-row .selected-men,
body.sm-app .booking-provider-row .servicemen-list-item {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
}
body.sm-app .booking-provider-row .servicemen-list-item .list {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
}
body.sm-app .booking-provider-row .servicemen-list-item .list .img-45,
body.sm-app .booking-provider-row .servicemen-list-item .list img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: 0 0 auto;
}
body.sm-app .booking-provider-row .avatar-placeholder {
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
}
body.sm-app .booking-provider-row .servicemen-list-item ul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sm-app .booking-provider-row .servicemen-list-item h5 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}

/* The service photo sat 168px tall in a 304px column, leaving a third of the
   row empty beside the details. Fill the column. */
body.sm-app .booking-sec .booking-box .service-image,
body.sm-app .booking-sec .booking-box .service-image a,
body.sm-app .booking-sec .booking-box .service-image img {
  height: 100% !important;
  min-height: 100%;
}

/* Field labels in the list were #808b97 — 3.47:1. Same treatment as elsewhere. */
body.sm-app .booking-sec .booking-box .data li .label span,
body.sm-app .booking-sec .booking-box .data li .label {
  color: #5a7082;
}

/* Title and price are the two things a customer scans this list for, but they
   sat last and smallest. Give them the weight they need without moving them —
   the row above is the booking's metadata, this is what it is and what it cost. */
body.sm-app .booking-sec .booking-box .booking-bottom-box .booking-title h4 a {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Status badges

   Two families, both under the 4.5:1 AA floor, both carrying the one fact a
   customer is scanning the list for — what state their booking is in:

     solid pills, white text on a saturated fill
       Accepted   white on #48bffd  2.07:1
       Completed  white on #27af4d  2.87:1

     tinted pills, coloured text on a 10% wash of the same hue
       COMPLETED  #27af4d on its tint  2.59:1
       PARTIAL    #fdb448 on its tint  1.69:1

   Keeping the design language — same hues, same solid/tint split — and moving
   only far enough to pass: the solid fills darken so white sits at 4.64:1 and
   4.75:1, and the tinted text darkens so it reads at 4.90:1 and 5.06:1 on the
   unchanged wash. Amber has to travel furthest; #fdb448 cannot carry text on
   its own tint at any weight, so it lands on a deep amber.
   -------------------------------------------------------------------------- */
body.sm-app .badge.accepted-badge,
body.sm-app .badge.pending-badge { background-color: #1a7bb3 !important; color: #fff !important; }

body.sm-app .badge.completed-badge { background-color: #1c8440 !important; color: #fff !important; }

body.sm-app .badge-status.payment-status-COMPLETED { color: #197a36 !important; }
body.sm-app .badge-status.payment-status-PARTIAL   { color: #965f00 !important; }
body.sm-app .badge-status.payment-status-PENDING   { color: #965f00 !important; }

/* the "(10% off)" saving beside a price */
body.sm-app .text-danger { color: #d32f2f !important; }

/* --------------------------------------------------------------------------
   Bookings: the service photo and even card heights
   -------------------------------------------------------------------------- */
body.sm-app .booking-sec .booking-box .booking-top-box { align-items: stretch; }
body.sm-app .booking-sec .booking-box .service-image {
  align-self: stretch;
  display: flex;
}
body.sm-app .booking-sec .booking-box .service-image a { flex: 1 1 auto; display: block; }

/* one line for the service name so two bookings side by side end level */
body.sm-app .booking-sec .booking-box .booking-title h4 {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The theme pins the booking photo to aspect-ratio: 8/5. Releasing it so the
   photo filled the taller details column made things worse, not better — the
   seeded thumbnails include small logo-style graphics, and cover-cropping one
   into a taller box scaled it up and cut it off. The fixed ratio is the right
   call; the photo sits at the top of the row and any residual band under it
   is ordinary card whitespace. */
body.sm-app .booking-sec .booking-box .service-image {
  align-self: flex-start;
}

/* Title and price on one line, so a long service name does not wrap the price
   underneath and leave two bookings 25px out of step with each other. */
body.sm-app .booking-sec .booking-box .booking-bottom-box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
}
body.sm-app .booking-sec .booking-box .booking-bottom-box .booking-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
body.sm-app .booking-sec .booking-box .booking-bottom-box .booking-title h4 {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sm-app .booking-sec .booking-box .booking-bottom-box .booking-title > div {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The discount ribbon on service cards: white on #ff4b4b is 3.30:1. #cc2b2b
   keeps the same red family and puts white at 5.06:1. */
body.sm-app .discount-tag { background-color: #cc2b2b !important; color: #fff !important; }

/* The empty-cart message — #808b97 again, reached through .no-cart-data. */
body.sm-app .no-cart-found p,
body.sm-app .no-cart-data p { color: #5a7082 !important; }

/* --------------------------------------------------------------------------
   Modals whose <form> sits directly under .modal-dialog

   Bootstrap's .modal-dialog-centered is `display:flex; align-items:center`,
   and it expects .modal-content — which carries width:100% — as its child.
   Several of these modals wrap the content in a <form> instead, and a plain
   block element in a flex row with no width shrink-wraps to its content.

   The "Book your service" modal was the visible case: a 500px dialog whose
   content rendered 271px wide, which squeezed the service row to 223px and
   the title block to 62px, so a service called "Plumbing" displayed as
   "Plum…" at the very first step of the booking flow.
   -------------------------------------------------------------------------- */
body.sm-app .modal-dialog > form { width: 100%; }

/* the service row in that modal: let the title take the space the image leaves */
body.sm-app .modal.book-service .service { width: 100%; }
body.sm-app .modal.book-service .book-service-title {
  flex: 1 1 auto;
  min-width: 0;
}
body.sm-app .modal.book-service .book-service-title h3 {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Payment step

   The theme fixes .payment-body at height:450px, sized for the long list of
   gateways the original script ships with. ServMall offers Cash, Wallet and
   Paystack — and Cash is correctly hidden when an advance payment is due — so
   the panel rendered two 106px options above 344px of blank card, with the
   Pay button stranded 400px below the thing it confirms.

   Auto height with the same 450px as a ceiling: short lists collapse, a longer
   list still scrolls inside the panel exactly as before (.custom-scroll is
   already on the element).
   -------------------------------------------------------------------------- */
body.sm-app .payment .payment-body {
  height: auto !important;
  max-height: 450px;
  overflow-y: auto;
}

/* Booking-flow stragglers, same family as the status badges: green #27af4d and
   red #ff4b4b on their own 10% tints, plus two muted greys. Measured
   replacements — #197a36 is 4.90:1 on the green tint, #cc2b2b 4.72:1 on the
   red, #5a7082 5.15:1 on white. */
body.sm-app .success-light-badge,
body.sm-app .success-light-badge span,
body.sm-app .provider-content .success-light-badge,
body.sm-app .service-detail-section .time span,
body.sm-app li.time span { color: #197a36; }

/* #cc2b2b measures 4.71:1 on the badge's own 10% red tint (#ffeded). */
body.sm-app .danger-light-badge,
body.sm-app .danger-light-badge span { color: #cc2b2b !important; }

body.sm-app .text-light { color: #5a7082 !important; }
body.sm-app .cart .cart-header span { color: #5a7082; }

/* The error toast at #e43e3e measures 4.15:1 on white — just under AA, on the
   message that tells someone their location is outside the service area.
   #c62828 is 5.62:1. */
body.sm-app #toast-container .toast-error .toast-message,
body.sm-app #toast-container .toast-error { color: #c62828; }


/* ── Branded page loader ─────────────────────────────────────────────────
   Replaces the vendor loader.gif with the ServMall mark inside a spinning
   brand-colour ring. Pure CSS, no GIF; honours reduced-motion. */
body.sm-app .page-loader .sm-loader{position:relative;width:72px;height:72px;display:grid;place-items:center}
body.sm-app .page-loader .sm-loader::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--primary-color,#286090) 0deg,rgba(40,96,144,0) 270deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:sm-loader-spin .9s linear infinite}
body.sm-app .page-loader .sm-loader__mark{width:40px;height:40px;object-fit:contain;animation:sm-loader-pulse 1.6s ease-in-out infinite}
@keyframes sm-loader-spin{to{transform:rotate(360deg)}}
@keyframes sm-loader-pulse{0%,100%{transform:scale(.9);opacity:.85}50%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){body.sm-app .page-loader .sm-loader::before{animation-duration:2.4s}body.sm-app .page-loader .sm-loader__mark{animation:none}}

/* Choose-location picker: readable list on the cream/navy theme */
body.sm-app .modal.location-detected-modal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}
body.sm-app .modal.location-detected-modal .modal-title {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
}
body.sm-app .modal.location-detected-modal .location-search {
  background: #fff !important;
  border: 1px solid var(--line, #d8c4ae);
  color: var(--ink) !important;
  min-height: 46px;
}
body.sm-app .modal.location-detected-modal .location-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  max-height: 280px;
  overflow-y: auto;
}
body.sm-app .modal.location-detected-modal .location-list .location {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink) !important;
  padding: 10px 4px;
}
body.sm-app .modal.location-detected-modal .location-list .location:disabled {
  opacity: 0.55;
  cursor: wait;
}
body.sm-app .modal.location-detected-modal .location-list .location h5 {
  margin: 0;
  font-size: 15px;
  color: var(--ink) !important;
}
body.sm-app .modal.location-detected-modal .location-list .location h6 {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-2) !important;
}

/* Compact booking: where → when → pay */
body.sm-app .sm-booking .activity-dot,
body.sm-app .sm-booking .booking-list::before,
body.sm-app .sm-booking .booking-list::after {
  display: none !important;
}
body.sm-app .sm-booking .booking-list {
  padding: 0 0 20px !important;
  border: 0 !important;
}
body.sm-app .sm-booking .service-booking { padding: 20px 22px 8px !important; }
body.sm-app .sm-book-where__head,
body.sm-app .sm-booking .booking-data > h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
}
body.sm-app .sm-book-where__head .add-location {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
body.sm-app .sm-address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
body.sm-app .sm-address-card {
  display: block;
  cursor: pointer;
  margin: 0;
}
body.sm-app .sm-address-card__radio { position: absolute; opacity: 0; pointer-events: none; }
body.sm-app .sm-address-card__body {
  display: block;
  border: 1.5px solid var(--line, #d8c4ae);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  min-height: 100%;
}
body.sm-app .sm-address-card:has(:checked) .sm-address-card__body {
  border-color: var(--navy, #286090);
  box-shadow: 0 0 0 3px rgba(40, 96, 144, 0.12);
}
body.sm-app .sm-address-card__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
body.sm-app .sm-address-card__name {
  font-weight: 700;
  color: var(--ink);
}
body.sm-app .sm-address-card__type {
  font-size: 12px;
  color: var(--navy, #286090);
  font-weight: 600;
}
body.sm-app .sm-address-card__place {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 14px;
}
body.sm-app .sm-address-card__street,
body.sm-app .sm-address-empty {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
}
body.sm-app .sm-book-note summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-2);
}
body.sm-app .sm-book-summary { position: sticky; top: 96px; }
body.sm-app .sm-book-summary__service {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
body.sm-app .sm-book-summary__service img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
}
body.sm-app .sm-book-summary__artisan {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}
body.sm-app .sm-book-summary__service h3 {
  margin: 2px 0 6px;
  font-size: 16px;
}
body.sm-app .sm-book-summary__price {
  margin: 0;
  font-weight: 700;
}
body.sm-app .sm-book-summary__hint {
  color: var(--ink-2);
  font-size: 13.5px;
  margin: 0 0 16px;
}
body.sm-app .sm-booking .wizard-footer {
  padding: 8px 22px 22px !important;
  border: 0 !important;
}
body.sm-app .sm-booking.section-b-space { padding-bottom: 32px; }
body.sm-app .sm-booking-layout__aside { order: -1; }
@media (min-width: 992px) {
  body.sm-app .sm-booking-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-areas: "main aside";
    align-items: start;
    gap: 24px;
  }
  body.sm-app .sm-booking-layout > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding-left: 0;
    padding-right: 0;
  }
  body.sm-app .sm-booking-layout__main { grid-area: main; min-width: 0; }
  body.sm-app .sm-booking-layout__aside { grid-area: aside; order: 0; }
  body.sm-app .sm-booking .wizard-footer { display: none !important; }
}

body.sm-app .sm-booking-next {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--navy, #286090);
  font-weight: 600;
}
body.sm-app .status-note.sm-booking-next {
  margin: 0;
  padding: 10px 12px;
  background: #f3f7fb;
  border-radius: 10px;
}
body.sm-app .sm-wallet-short {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #b45309;
}

/* Artisan studio */
body.sm-app .sm-account-heading p {
  width: 100%;
  margin: 4px 0 0;
  color: #5b6b7c;
  font-size: 14px;
  font-weight: 500;
}
body.sm-app .sm-job-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 20px;
}
body.sm-app .sm-job-tabs__item {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f3f7fb;
  color: #2c3e50;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
body.sm-app .sm-job-tabs__item.is-active {
  background: var(--navy, #286090);
  color: #fff;
}
body.sm-app .sm-job-list { display: flex; flex-direction: column; gap: 14px; }
body.sm-app .sm-job-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e6edf4;
  border-radius: 14px;
  background: #fff;
}
body.sm-app .sm-row-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e6edf4;
  border-radius: 14px;
  background: #fff;
}
body.sm-app .sm-row-card__media {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: #eef3f8;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--navy, #286090);
}
body.sm-app .sm-row-card__media img { width: 100%; height: 100%; object-fit: cover; }
body.sm-app .sm-row-card__body { min-width: 0; }
body.sm-app .sm-row-card__body h2 {
  margin: 0 0 2px;
  font-family: Raleway, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #1c2b3a;
}
body.sm-app .sm-row-card__body p {
  margin: 0;
  font-size: 13px;
  color: #5b6b7c;
}
body.sm-app .sm-row-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
body.sm-app .sm-row-card__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 12px;
}
body.sm-app .sm-row-card__links a,
body.sm-app .sm-row-card__links button {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  color: #286090 !important;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
body.sm-app .sm-row-card__links a:hover,
body.sm-app .sm-row-card__links button:hover { text-decoration: underline; }
body.sm-app .sm-nav-label {
  list-style: none;
  padding: 14px 11px 4px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.42) !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.sm-app .sm-hour-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.sm-app .sm-hour-row {
  display: grid;
  grid-template-columns: 110px 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #eef3f8;
  border-radius: 12px;
}
body.sm-app .sm-hour-row strong { font-size: 13.5px; color: #1c2b3a; }
@media (max-width: 700px) {
  body.sm-app .sm-row-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  body.sm-app .sm-row-card__side {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
  body.sm-app .sm-hour-row {
    grid-template-columns: 1fr 1fr;
  }
  body.sm-app .sm-hour-row strong { grid-column: 1 / -1; }
}
body.sm-app .sm-job-card__main {
  display: flex;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
body.sm-app .sm-job-card__media {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #eef3f8;
  flex: 0 0 72px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--navy, #286090);
}
body.sm-app .sm-job-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.sm-app .sm-job-card__body { min-width: 0; flex: 1; }
body.sm-app .sm-job-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
body.sm-app .sm-job-card__top h2 {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1c2b3a;
}
body.sm-app .sm-job-card__body p {
  margin: 4px 0 0;
  color: #5b6b7c;
  font-size: 13.5px;
}
body.sm-app .sm-job-card__when { color: #7a8896 !important; }
body.sm-app .sm-job-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef5fb;
  color: var(--navy, #286090);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
body.sm-app .sm-job-card__actions .sm-job-actions,
body.sm-app .sm-job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
body.sm-app .sm-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title badge"
    "meta badge";
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eef3f8;
  text-decoration: none;
  color: inherit;
}
body.sm-app .sm-job-row:last-child { border-bottom: 0; }
body.sm-app .sm-job-row__title {
  grid-area: title;
  font-weight: 700;
  color: #1c2b3a;
}
body.sm-app .sm-job-row__meta {
  grid-area: meta;
  grid-column: auto;
  font-size: 13px;
  color: #5b6b7c;
}
body.sm-app .sm-job-row .sm-job-badge {
  grid-area: badge;
  grid-row: auto;
  align-self: center;
  justify-self: end;
}
body.sm-app .sm-empty {
  margin: 12px 0 0;
  color: #5b6b7c;
}
body.sm-app .sm-job-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.sm-app .sm-job-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.sm-app .sm-job-timeline li {
  padding-left: 16px;
  border-left: 2px solid #d7e4f0;
}
body.sm-app .sm-job-timeline strong { display: block; color: #1c2b3a; }
body.sm-app .sm-job-timeline span { font-size: 12.5px; color: #7a8896; }
body.sm-app .sm-job-timeline p { margin: 4px 0 0; font-size: 13.5px; color: #5b6b7c; }
@media (max-width: 640px) {
  body.sm-app .sm-job-card__main { flex-direction: column; }
  body.sm-app .sm-job-card__media { width: 100%; height: 140px; }
}

/* Studio forms, hours, chat */
body.sm-app .sm-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.sm-app .sm-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.sm-app .sm-form label,
body.sm-app .sm-form .sm-field__label {
  display: block;
  margin-bottom: 6px;
}
body.sm-app .sm-form .form-control,
body.sm-app .sm-form select,
body.sm-app .sm-form textarea {
  width: 100%;
  border: 1px solid #d7e4f0;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: #1c2b3a;
  background: #fff;
}
body.sm-app .sm-form textarea { min-height: 96px; resize: vertical; }
body.sm-app .sm-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
body.sm-app .sm-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.sm-app .sm-chip-list label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #d7e4f0;
  border-radius: 999px;
  background: #f7fafc;
  font-size: 13px;
  cursor: pointer;
}
body.sm-app .sm-hour-day {
  border: 1px solid #eef3f8;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
body.sm-app .sm-hour-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
body.sm-app .sm-hour-day__head strong {
  font-family: Raleway, sans-serif;
  color: #1c2b3a;
}
body.sm-app .sm-hour-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.sm-app .sm-hour-slots label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 5px 8px;
  border-radius: 8px;
  background: #f3f7fb;
  font-size: 12px;
  color: #2c3e50;
  cursor: pointer;
}
body.sm-app .sm-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
body.sm-app .sm-support-chat {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  height: min(640px, calc(100vh - 260px));
  background: #f7fafd;
  border-radius: 16px;
  overflow: hidden;
}
body.sm-app .sm-support-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #eef3f8;
}
body.sm-app .sm-support-chat__head h2,
body.sm-app .sm-support-chat__head #receiverName {
  margin: 0 !important;
  color: #1c2b3a !important;
  font-family: Raleway, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.sm-app .sm-support-chat__head p {
  margin: 2px 0 0;
  color: #5b6b7c;
  font-size: 13px;
}
body.sm-app .sm-support-chat__head .sm-support-chat__meta { flex: 1; min-width: 0; }
body.sm-app .sm-support-chat__avatar,
body.sm-app .sm-support-chat .user-round {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #286090;
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
}
body.sm-app .sm-support-chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
body.sm-app .sm-support-chat .admin-reply,
body.sm-app .sm-support-chat .user-reply {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 10px 0;
}
body.sm-app .sm-support-chat .admin-reply { justify-content: flex-end; }
body.sm-app .sm-support-chat .message-profile,
body.sm-app .sm-support-chat .user-round.message-profile {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px;
  border-radius: 50%;
  object-fit: cover;
}
body.sm-app .sm-support-chat .chat-image {
  max-width: min(220px, 70%);
  max-height: 180px;
  border-radius: 12px;
  object-fit: cover;
}
body.sm-app .sm-support-chat .chatting-box {
  max-width: min(420px, 80%);
  background: #286090;
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
}
body.sm-app .sm-support-chat .user-reply .chatting-box {
  background: #eef5fb;
  color: #1c2b3a;
}
body.sm-app .sm-support-chat .chatting-box p { margin: 0; }
body.sm-app .sm-support-chat .timing { margin: 4px 0 0; font-size: 11px; opacity: .75; }
body.sm-app .sm-support-chat #messages,
body.sm-app .sm-support-chat .msger-chat {
  flex: 1;
  min-height: 280px;
  overflow-y: auto;
  padding: 16px;
}
body.sm-app .sm-support-chat .msger-inputarea {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 16px;
  background: #fff;
  border-top: 1px solid #eef3f8;
}
body.sm-app .sm-support-chat .msger-inputarea .position-relative {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
body.sm-app .sm-support-chat .msger-input {
  flex: 1;
  border: 1px solid #d7e4f0;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
}
body.sm-app .sm-support-chat .msger-send-btn,
body.sm-app .sm-support-chat .gallery,
body.sm-app .sm-support-chat #clearChat {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #286090;
  color: #fff;
  display: grid;
  place-items: center;
}
body.sm-app .sm-support-chat .gallery,
body.sm-app .sm-support-chat #clearChat {
  background: #eef5fb;
  color: #286090;
}
body.sm-app .sm-support-chat .chatting-option { margin-left: auto; }
body.sm-app .sm-stack { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 700px) {
  body.sm-app .sm-form__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Studio — calm, modern artisan workspace
   Scoped to body.sm-studio so the customer account stays unchanged.
   ========================================================================== */
body.sm-app.sm-studio {
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(72,160,232,.16), transparent 58%),
    radial-gradient(820px 380px at 96% 4%, rgba(241,222,203,.5), transparent 52%),
    #f3f6f9;
}
body.sm-app.sm-studio .sm-breadcrumb--compact {
  background: transparent;
  border-bottom: 0;
  padding: 10px 0 6px;
}
body.sm-app.sm-studio .sm-breadcrumb h1,
body.sm-app.sm-studio .sm-breadcrumb p {
  display: none;
}
body.sm-app.sm-studio .sm-breadcrumb .crumbs {
  margin-top: 0;
}

@media (min-width: 1200px) {
  body.sm-app.sm-studio .sm-account-sidebar.profile-wrapper,
  body.sm-app.sm-studio .profile-body-wrapper .profile-wrapper.sm-account-sidebar {
    border-radius: 22px !important;
    padding: 20px 14px 16px !important;
    box-shadow: 0 22px 48px -28px rgba(14,33,53,.6);
  }
}
body.sm-app.sm-studio .sm-studio-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.sm-app.sm-studio .sm-account-nav .nav-link {
  border-radius: 12px !important;
  padding: 10px 12px !important;
}
body.sm-app.sm-studio .sm-account-nav .nav-link.active {
  box-shadow: 0 10px 22px -16px rgba(0,0,0,.45);
}
body.sm-app.sm-studio .sm-nav-label {
  color: rgba(255,255,255,.68) !important;
  letter-spacing: .14em;
}

body.sm-app.sm-studio .sm-account-panel,
body.sm-app.sm-studio .sm-wallet-panel {
  border: 1px solid rgba(226,233,239,.9) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 40px -32px rgba(18,33,46,.45) !important;
  padding: 20px 22px !important;
}
body.sm-app.sm-studio .sm-account-heading {
  align-items: center;
  padding-bottom: 16px !important;
}
body.sm-app.sm-studio .sm-account-heading h1,
body.sm-app.sm-studio .sm-account-heading h2 {
  padding-left: 0;
  font-size: 22px !important;
}
body.sm-app.sm-studio .sm-account-heading h1::before,
body.sm-app.sm-studio .sm-account-heading h2::before {
  display: none;
}
body.sm-app.sm-studio .sm-account-heading h2 {
  font-size: 18px !important;
}
body.sm-app.sm-studio .sm-account-heading p {
  color: var(--ink-3);
  font-size: 13.5px;
}

body.sm-app.sm-studio .sm-text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--navy) !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none !important;
  width: auto !important;
  height: auto;
  background: none;
  padding: 0;
}
body.sm-app.sm-studio .sm-text-link:hover { text-decoration: underline !important; }

body.sm-app.sm-studio .sm-studio-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  padding: 22px 24px 20px;
  margin-bottom: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(88,168,224,.42), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(241,164,7,.16), transparent 36%),
    linear-gradient(135deg, #16324c 0%, #286090 58%, #3a7eb0 100%);
  box-shadow: 0 22px 48px -28px rgba(22,50,76,.7);
}
body.sm-app.sm-studio .sm-studio-hero::after {
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
body.sm-app.sm-studio .sm-studio-hero__eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(241,222,203,.92);
  margin-bottom: 10px;
}
body.sm-app.sm-studio .sm-studio-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.12;
}
body.sm-app.sm-studio .sm-studio-hero h1::before { display: none; }
body.sm-app.sm-studio .sm-studio-hero > p {
  position: relative;
  z-index: 1;
  width: min(52ch, 100%);
  margin: 8px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}
body.sm-app.sm-studio .sm-studio-hero__meta {
  margin-top: 6px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.62) !important;
}
body.sm-app.sm-studio .sm-studio-hero__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
body.sm-app.sm-studio .sm-studio-hero .btn {
  width: auto !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
}
body.sm-app.sm-studio .sm-studio-hero .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.38);
}
body.sm-app.sm-studio .sm-studio-hero .btn-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff;
}

body.sm-app.sm-studio .sm-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px !important;
}
body.sm-app.sm-studio .sm-stat-grid:has(> :last-child:nth-child(-n+2)) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
body.sm-app.sm-studio .sm-stat-card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px 18px !important;
  background: #fff !important;
  border: 1px solid rgba(226,233,239,.95) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 32px -28px rgba(18,33,46,.4) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.sm-app.sm-studio .sm-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(72,160,232,.38) !important;
  box-shadow: 0 20px 36px -24px rgba(40,96,144,.35) !important;
}
body.sm-app.sm-studio .sm-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(40,96,144,.1);
}
body.sm-app.sm-studio .sm-stat-card--wait .sm-stat-icon { background: rgba(241,164,7,.16); }
body.sm-app.sm-studio .sm-stat-card--wait .sm-stat-icon .iconsax { --Iconsax-Color: #c47d00 !important; }
body.sm-app.sm-studio .sm-stat-card--active .sm-stat-icon { background: rgba(72,160,232,.16); }
body.sm-app.sm-studio .sm-stat-card--wallet .sm-stat-icon { background: rgba(40,96,144,.12); }
body.sm-app.sm-studio .sm-stat-card--rating .sm-stat-icon { background: rgba(241,164,7,.14); }
body.sm-app.sm-studio .sm-stat-card--rating .sm-stat-icon .iconsax { --Iconsax-Color: #c47d00 !important; }
body.sm-app.sm-studio .sm-stat-body { gap: 3px; }
body.sm-app.sm-studio .sm-stat-value {
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  color: var(--navy-ink) !important;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
body.sm-app.sm-studio .sm-stat-label {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  color: var(--ink-3) !important;
}
body.sm-app.sm-studio .sm-stat-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
}

body.sm-app.sm-studio .sm-job-row {
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.sm-app.sm-studio .sm-job-row:last-child { margin-bottom: 0; }
body.sm-app.sm-studio a.sm-job-row:hover {
  border-color: rgba(72,160,232,.4);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -22px rgba(40,96,144,.35);
}
body.sm-app.sm-studio .sm-job-card,
body.sm-app.sm-studio .sm-row-card {
  border-color: var(--rule);
  border-radius: 16px;
  box-shadow: 0 10px 24px -22px rgba(18,33,46,.35);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.sm-app.sm-studio .sm-job-card:hover,
body.sm-app.sm-studio .sm-row-card:hover {
  transform: translateY(-2px);
  border-color: rgba(72,160,232,.35);
  box-shadow: 0 18px 32px -24px rgba(40,96,144,.28);
}
body.sm-app.sm-studio .sm-job-tabs {
  padding: 4px;
  background: #f3f7fb;
  border-radius: 999px;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}
body.sm-app.sm-studio .sm-job-tabs__item {
  background: transparent;
  padding: 8px 14px;
}
body.sm-app.sm-studio .sm-job-tabs__item.is-active {
  background: #fff;
  color: var(--navy-ink);
  box-shadow: 0 6px 16px -10px rgba(22,50,76,.35);
}
body.sm-app.sm-studio .sm-job-badge {
  background: #eef5fb;
  color: var(--navy);
}
body.sm-app.sm-studio .sm-empty {
  padding: 22px 8px;
  text-align: center;
  color: var(--ink-3);
}
body.sm-app.sm-studio .sm-empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 16px 28px;
}
body.sm-app.sm-studio .sm-empty-state__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #eef5fb;
  margin-bottom: 4px;
}
body.sm-app.sm-studio .sm-empty-state__icon .iconsax {
  --Iconsax-Color: var(--navy) !important;
  --Iconsax-Size: 24px !important;
}
body.sm-app.sm-studio .sm-empty-state p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  max-width: 36ch;
}
body.sm-app.sm-studio .sm-form .form-control,
body.sm-app.sm-studio .sm-form select,
body.sm-app.sm-studio .sm-form textarea {
  border-radius: 12px;
  border-color: #d7e4f0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.sm-app.sm-studio .sm-form .form-control:focus,
body.sm-app.sm-studio .sm-form select:focus,
body.sm-app.sm-studio .sm-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(72,160,232,.14);
  outline: none;
}
body.sm-app.sm-studio .sm-hour-day,
body.sm-app.sm-studio .sm-hour-row {
  background: #fff;
  border-color: var(--rule);
}
body.sm-app.sm-studio .sm-support-chat {
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px -32px rgba(18,33,46,.4);
}

@media (max-width: 1100px) {
  body.sm-app.sm-studio .sm-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  body.sm-app.sm-studio .sm-studio-hero { padding: 22px 18px 20px; }
  body.sm-app.sm-studio .sm-account-panel { padding: 16px !important; }
  body.sm-app.sm-studio .sm-job-tabs {
    width: 100%;
    border-radius: 14px;
  }
}

/* Services */
body.sm-app.sm-studio .sm-service-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.sm-app.sm-studio .sm-service-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body.sm-app.sm-studio .sm-service-card:hover {
  transform: translateY(-2px);
  border-color: rgba(72,160,232,.35);
  box-shadow: 0 16px 30px -24px rgba(40,96,144,.28);
}
body.sm-app.sm-studio .sm-service-card__media {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  overflow: hidden;
  background: #eef3f8;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  color: var(--navy);
}
body.sm-app.sm-studio .sm-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.sm-app.sm-studio .sm-service-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
body.sm-app.sm-studio .sm-service-card__body h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
}
body.sm-app.sm-studio .sm-service-card__price {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--navy-ink);
}
body.sm-app.sm-studio .sm-service-card__meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
body.sm-app.sm-studio .sm-service-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
}
body.sm-app.sm-studio .sm-service-card__links a,
body.sm-app.sm-studio .sm-service-card__links button {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  color: var(--navy) !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* Job lifecycle */
body.sm-app.sm-studio .sm-job-badge--wait { background: #fff4d6; color: #8a5a00; }
body.sm-app.sm-studio .sm-job-badge--booked { background: #e8f1fa; color: var(--navy); }
body.sm-app.sm-studio .sm-job-badge--progress { background: #e7f6ee; color: #1f6b3a; }
body.sm-app.sm-studio .sm-job-badge--done { background: #e7f6ee; color: #1f6b3a; }
body.sm-app.sm-studio .sm-job-badge--muted { background: #eef1f4; color: #5a7082; }
body.sm-app.sm-studio .sm-job-card__ref {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
body.sm-app.sm-studio .sm-job-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
body.sm-app.sm-studio .sm-job-hero h1 {
  margin: 4px 0 0;
  padding: 0;
  font-size: clamp(22px, 2.6vw, 28px) !important;
}
body.sm-app.sm-studio .sm-job-hero h1::before { display: none; }
body.sm-app.sm-studio .sm-job-hero__ref {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-3);
}
body.sm-app.sm-studio .sm-job-hero__when {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
}
body.sm-app.sm-studio .sm-job-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}
body.sm-app.sm-studio .sm-job-steps__item {
  position: relative;
  padding: 10px 8px;
  border-radius: 12px;
  background: #f3f7fb;
  text-align: center;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
}
body.sm-app.sm-studio .sm-job-steps__item.is-done {
  background: #e7f6ee;
  color: #1f6b3a;
}
body.sm-app.sm-studio .sm-job-steps__item.is-current {
  background: var(--navy);
  color: #fff;
}
body.sm-app.sm-studio .sm-job-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 16px;
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(40,96,144,.08), rgba(72,160,232,.08));
  border: 1px solid rgba(40,96,144,.12);
}
body.sm-app.sm-studio .sm-job-now h2 {
  margin: 0 0 4px;
  font-size: 15px;
}
body.sm-app.sm-studio .sm-job-now p { margin: 0; color: var(--ink-2); font-size: 14px; }
body.sm-app.sm-studio .sm-job-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
body.sm-app.sm-studio .sm-job-fact {
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.sm-app.sm-studio .sm-job-fact strong {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
}
body.sm-app.sm-studio .sm-job-fact span { font-size: 13px; color: var(--ink-3); }
body.sm-app.sm-studio .sm-job-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
body.sm-app.sm-studio .sm-job-page .sm-profile-card { margin: 0; }
body.sm-app.sm-studio .sm-job-timeline li.is-current {
  border-left-color: var(--navy);
}
body.sm-app.sm-studio .sm-job-timeline li.is-current strong { color: var(--navy); }
body.sm-app.sm-studio .sm-job-page .sm-field__value a { color: var(--navy); font-weight: 700; }

/* Addresses */
body.sm-app.sm-studio .sm-address-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.sm-app.sm-studio .sm-address-card {
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: #fff;
}
body.sm-app.sm-studio .sm-address-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
body.sm-app.sm-studio .sm-address-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
body.sm-app.sm-studio .sm-address-card__line { margin-top: 4px !important; color: var(--ink) !important; }
body.sm-app.sm-studio .sm-address-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 12px;
}
body.sm-app.sm-studio .sm-address-card__links button {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  color: var(--navy) !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
body.sm-app.sm-studio .sm-empty-state .sm-text-link {
  border: 0;
  background: none;
  cursor: pointer;
}

@media (max-width: 800px) {
  body.sm-app.sm-studio .sm-job-facts,
  body.sm-app.sm-studio .sm-job-split,
  body.sm-app.sm-studio .sm-address-list,
  body.sm-app.sm-studio .sm-job-steps {
    grid-template-columns: 1fr;
  }
  body.sm-app.sm-studio .sm-service-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  body.sm-app.sm-studio .sm-service-card__media {
    width: 64px;
    height: 64px;
  }
}

/* Customer bookings — same calm language as Studio */
body.sm-app.sm-bookings,
body.sm-app.sm-customer {
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(72,160,232,.12), transparent 58%),
    #f3f6f9;
}
body.sm-app.sm-bookings .sm-breadcrumb--compact {
  background: transparent;
  border-bottom: 0;
  padding: 10px 0 6px;
}
body.sm-app.sm-bookings .sm-breadcrumb h1,
body.sm-app.sm-bookings .sm-breadcrumb p { display: none; }
body.sm-app.sm-bookings .sm-account-heading h1::before { display: none; }
body.sm-app.sm-bookings .sm-account-heading h1 { padding-left: 0; }
body.sm-app.sm-bookings .sm-job-tabs {
  padding: 4px;
  background: #f3f7fb;
  border-radius: 999px;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}
body.sm-app.sm-bookings .sm-job-tabs__item { background: transparent; }
body.sm-app.sm-bookings .sm-job-tabs__item.is-active {
  background: #fff;
  color: var(--navy-ink);
  box-shadow: 0 6px 16px -10px rgba(22,50,76,.35);
}
body.sm-app.sm-bookings .sm-job-badge--wait { background: #fff4d6; color: #8a5a00; }
body.sm-app.sm-bookings .sm-job-badge--booked { background: #e8f1fa; color: var(--navy); }
body.sm-app.sm-bookings .sm-job-badge--progress { background: #e7f6ee; color: #1f6b3a; }
body.sm-app.sm-bookings .sm-job-badge--done { background: #e7f6ee; color: #1f6b3a; }
body.sm-app.sm-bookings .sm-job-badge--muted { background: #eef1f4; color: #5a7082; }
body.sm-app.sm-bookings section.sm-account {
  padding-top: 20px;
  padding-bottom: 48px;
}
body.sm-app.sm-bookings .sm-job-card {
  border-color: var(--rule);
  border-radius: 16px;
  box-shadow: 0 10px 24px -22px rgba(18,33,46,.35);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.sm-app.sm-bookings .sm-job-card:hover {
  transform: translateY(-2px);
  border-color: rgba(72,160,232,.35);
  box-shadow: 0 18px 32px -24px rgba(40,96,144,.28);
}
body.sm-app.sm-bookings .sm-job-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
body.sm-app.sm-bookings .sm-booking-next {
  margin-top: 8px !important;
  color: var(--navy-ink) !important;
  font-weight: 600;
}
body.sm-app.sm-bookings .sm-job-hero,
body.sm-app.sm-bookings .sm-account-panel > header {
  position: static !important;
  inset: auto !important;
  width: auto !important;
}
body.sm-app.sm-bookings .sm-job-hero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 18px;
}
body.sm-app.sm-bookings .sm-job-hero__media {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  background: #eef3f8;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  color: var(--navy);
}
body.sm-app.sm-bookings .sm-job-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.sm-app.sm-bookings .sm-job-hero h1 {
  margin: 4px 0 0;
  padding: 0;
  font-size: clamp(22px, 2.6vw, 28px) !important;
}
body.sm-app.sm-bookings .sm-job-hero h1::before { display: none; }
body.sm-app.sm-bookings .sm-job-hero__ref {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-3);
}
body.sm-app.sm-bookings .sm-job-hero__when { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
body.sm-app.sm-bookings .sm-job-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}
body.sm-app.sm-bookings .sm-job-steps__item {
  padding: 10px 8px;
  border-radius: 12px;
  background: #f3f7fb;
  text-align: center;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
}
body.sm-app.sm-bookings .sm-job-steps__item.is-done { background: #e7f6ee; color: #1f6b3a; }
body.sm-app.sm-bookings .sm-job-steps__item.is-current { background: var(--navy); color: #fff; }
body.sm-app.sm-bookings .sm-job-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(40,96,144,.08), rgba(72,160,232,.08));
  border: 1px solid rgba(40,96,144,.12);
}
body.sm-app.sm-bookings .sm-job-now h2 { margin: 0 0 4px; font-size: 15px; }
body.sm-app.sm-bookings .sm-job-now p { margin: 0; color: var(--ink-2); font-size: 14px; }
body.sm-app.sm-bookings .sm-job-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
body.sm-app.sm-bookings .sm-job-fact {
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.sm-app.sm-bookings .sm-job-fact strong { font-family: var(--display); font-size: 15px; }
body.sm-app.sm-bookings .sm-job-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
body.sm-app.sm-bookings .sm-job-card__ref { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
body.sm-app.sm-bookings .sm-text-link {
  color: var(--navy);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
}
body.sm-app.sm-bookings .sm-empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 16px;
}
body.sm-app.sm-bookings .sm-job-actions__dispute {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
body.sm-app.sm-bookings .sm-job-actions__dispute .form-control { flex: 1; min-width: 180px; }
body.sm-app.sm-bookings .sm-job-now .sm-job-actions { justify-content: flex-end; }
body.sm-app.sm-bookings .sm-profile-card .btn,
body.sm-app.sm-bookings .sm-form__actions .btn {
  width: auto !important;
  align-self: flex-start;
}
body.sm-app.sm-bookings .sm-dispute {
  width: 100%;
  margin-top: 8px;
}
body.sm-app.sm-bookings .sm-dispute summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy);
  list-style: none;
}
body.sm-app.sm-bookings .sm-dispute summary::-webkit-details-marker { display: none; }
body.sm-app.sm-bookings .sm-dispute p {
  margin: 8px 0 10px;
  color: var(--ink-2);
  font-size: 13.5px;
}
body.sm-app.sm-bookings .sm-bill {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.sm-app.sm-bookings .sm-bill li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
}
body.sm-app.sm-bookings .sm-bill__total {
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-weight: 700;
}
body.sm-app.sm-bookings .sm-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
body.sm-app.sm-bookings .sm-proof-grid figure { margin: 0; }
body.sm-app.sm-bookings .sm-proof-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
}
body.sm-app.sm-bookings .sm-proof-grid figcaption {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
@media (max-width: 800px) {
  body.sm-app.sm-bookings .sm-job-facts,
  body.sm-app.sm-bookings .sm-job-split,
  body.sm-app.sm-bookings .sm-job-steps { grid-template-columns: 1fr; }
  body.sm-app.sm-bookings .sm-job-hero { grid-template-columns: 64px minmax(0, 1fr); }
  body.sm-app.sm-bookings .sm-job-hero .sm-job-badge { grid-column: 1 / -1; }
  body.sm-app.sm-bookings .sm-job-tabs { width: 100%; border-radius: 14px; }
}

body.sm-app.sm-bookings .sm-review-modal { z-index: 1080; }
body.sm-app.sm-bookings.modal-open .modal-backdrop { z-index: 1070; }
body.sm-app.sm-bookings .sm-review-modal .modal-dialog {
  max-width: 440px;
  min-height: 0;
  margin: 12vh auto;
}
body.sm-app.sm-bookings .sm-review-modal .modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 48px -28px rgba(18,33,46,.45);
}
body.sm-app.sm-bookings .sm-review-modal .modal-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--rule);
  padding: 18px 20px 14px;
}
body.sm-app.sm-bookings .sm-review-modal .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
body.sm-app.sm-bookings .sm-review-modal .modal-header p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
}
body.sm-app.sm-bookings .sm-review-modal .modal-body { padding: 16px 20px; }
body.sm-app.sm-bookings .sm-review-modal .modal-footer {
  border-top: 1px solid var(--rule);
  padding: 12px 20px 16px;
  gap: 8px;
}
body.sm-app.sm-bookings .sm-review-modal .btn {
  width: auto !important;
  flex: 0 0 auto;
}
body.sm-app.sm-bookings .sm-stars { margin: 0 0 14px; border: 0; padding: 0; }
body.sm-app.sm-bookings .sm-stars legend { margin-bottom: 8px; }
body.sm-app.sm-bookings .sm-stars__row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
body.sm-app.sm-bookings .sm-stars__row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.sm-app.sm-bookings .sm-stars__row label {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  color: #d5dee6;
  cursor: pointer;
}
body.sm-app.sm-bookings .sm-stars__row input:checked ~ label,
body.sm-app.sm-bookings .sm-stars__row label:hover,
body.sm-app.sm-bookings .sm-stars__row label:hover ~ label {
  color: #f1a407;
}

/* ==========================================================================
   Address cards + form modal
   Shared by customer /account/address, studio profile, and booking checkout.
   ========================================================================== */
body.sm-app .sm-job-badge--done { background: #e7f6ee; color: #1f6b3a; }
body.sm-app .sm-job-badge--muted { background: #eef1f4; color: #5a7082; }

body.sm-app .sm-address-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.sm-app .sm-address-list .sm-address-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: #fff;
  cursor: default;
  min-width: 0;
}
body.sm-app .sm-address-list .sm-address-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
body.sm-app .sm-address-list .sm-address-card__head strong {
  font-family: var(--display);
  font-size: 15px;
  min-width: 0;
  overflow-wrap: anywhere;
}
body.sm-app .sm-address-list .sm-address-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
body.sm-app .sm-address-list .sm-address-card__line { margin-top: 4px !important; color: var(--ink) !important; }
body.sm-app .sm-address-list .sm-address-card__meta { font-size: 13px; color: var(--ink-3); }
body.sm-app .sm-address-list .sm-address-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 12px;
}
body.sm-app .sm-address-list .sm-address-card__links form { display: contents; }
body.sm-app .sm-address-list .sm-address-card__links button {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  margin: 0 !important;
  color: var(--navy) !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

body.sm-app .sm-empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 16px 28px;
  grid-column: 1 / -1;
}
body.sm-app .sm-empty-state__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #eef5fb;
  margin-bottom: 4px;
}
body.sm-app .sm-empty-state__icon .iconsax {
  --Iconsax-Color: var(--navy) !important;
  --Iconsax-Size: 24px !important;
}
body.sm-app .sm-empty-state p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  max-width: 36ch;
}
body.sm-app .sm-text-link {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--navy);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  padding: 0;
  width: auto !important;
}

/* Address form */
body.sm-app .sm-address-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.sm-app .sm-address-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.sm-app .sm-address-form .sm-field { display: block; min-width: 0; margin: 0; }
body.sm-app .sm-address-form .sm-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
body.sm-app .sm-address-form .form-control,
body.sm-app .sm-address-form select {
  width: 100%;
  border-radius: 12px;
  border-color: #d7e4f0;
}
body.sm-app .sm-address-form .form-control:focus,
body.sm-app .sm-address-form select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(72,160,232,.14);
  outline: none;
}
body.sm-app .sm-address-type { border: 0; margin: 0; padding: 0; }
body.sm-app .sm-address-type legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 8px;
}
body.sm-app .sm-address-type__row { display: flex; flex-wrap: wrap; gap: 8px; }
body.sm-app .sm-address-type__opt { position: relative; margin: 0; cursor: pointer; }
body.sm-app .sm-address-type__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.sm-app .sm-address-type__opt span {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--rule);
  background: #fff;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-2);
}
body.sm-app .sm-address-type__opt input:checked + span {
  border-color: var(--navy);
  background: rgba(40,96,144,.08);
  color: var(--navy);
}
body.sm-app .sm-phone {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}
body.sm-app .sm-phone__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 92px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid #d7e4f0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: auto !important;
  margin: 0 !important;
}
body.sm-app .sm-phone__toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-3);
}
body.sm-app .sm-phone.is-open .sm-phone__toggle {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(72,160,232,.14);
}
body.sm-app .sm-phone__panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(18,33,46,.45);
  padding: 8px;
  max-height: min(320px, 50vh);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
body.sm-app .sm-phone__panel[hidden] { display: none !important; }
body.sm-app .sm-phone__search {
  width: 100%;
  border: 1px solid #d7e4f0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
  pointer-events: auto;
}
body.sm-app .sm-phone__list {
  overflow-y: auto;
  max-height: 240px;
  display: flex;
  flex-direction: column;
}
body.sm-app .sm-phone__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
body.sm-app .sm-phone__opt:hover,
body.sm-app .sm-phone__opt.is-active { background: #eef5fb; }
body.sm-app .sm-phone__opt[hidden],
body.sm-app .sm-phone__opt.is-filtered {
  display: none !important;
}
body.sm-app .sm-phone__opt-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.sm-app .sm-phone__opt-code {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-weight: 700;
}
body.sm-app .sm-address-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

/* Theme .modal is z-index 6 — under the sticky nav (80). Lift every app modal. */
body.sm-app .modal { z-index: 1080 !important; }
body.sm-app .modal-backdrop { z-index: 1070 !important; }
body.sm-app .select2-container--open { z-index: 1100 !important; }
.pac-container { z-index: 1200 !important; }

body.sm-app .address-modal .modal-dialog {
  max-width: 560px;
  width: calc(100% - 32px);
  margin: 16px auto;
  max-height: calc(100dvh - 24px);
  height: auto;
}
body.sm-app .address-modal .modal-dialog-scrollable {
  height: auto;
  max-height: calc(100dvh - 24px);
}
body.sm-app .address-modal .modal-content,
body.sm-app .delete-modal .modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 48px -28px rgba(18,33,46,.45);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.sm-app .address-modal .modal-header,
body.sm-app .delete-modal .modal-header {
  flex: 0 0 auto;
  align-items: flex-start;
  border-bottom: 1px solid var(--rule);
  padding: 18px 20px 14px;
}
body.sm-app .address-modal .modal-title,
body.sm-app .delete-modal .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
body.sm-app .address-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100dvh - 200px);
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 8px;
  scrollbar-gutter: stable;
}
body.sm-app .address-modal .modal-footer,
body.sm-app .delete-modal .modal-footer {
  flex: 0 0 auto;
  position: relative;
  background: #fff;
  border-top: 1px solid var(--rule);
  padding: 12px 20px 16px;
  gap: 8px;
  flex-wrap: wrap;
}
body.sm-app .modal .btn,
body.sm-app .modal .btn-solid,
body.sm-app .modal .btn-outline {
  width: auto !important;
  flex: 0 0 auto;
  margin-top: 0 !important;
}

/* ==========================================================================
   App-wide responsiveness
   Keep pages inside the viewport on phones and small tablets.
   ========================================================================== */
html { overflow-x: clip; }
body.sm-app {
  overflow-x: hidden;
  max-width: 100%;
}
body.sm-app img,
body.sm-app video,
body.sm-app canvas,
body.sm-app iframe {
  max-width: 100%;
}
body.sm-app img.bg-img,
body.sm-app .service-detail-slider img,
body.sm-app .service-img img {
  width: 100%;
  height: auto;
}
body.sm-app .row > [class*="col-"],
body.sm-app [class*="col-xxl-"],
body.sm-app [class*="col-xl-"],
body.sm-app [class*="col-lg-"],
body.sm-app [class*="col-md-"],
body.sm-app [class*="col-sm-"],
body.sm-app .col {
  min-width: 0;
  max-width: 100%;
}
body.sm-app table {
  max-width: 100%;
}
body.sm-app .table-responsive,
body.sm-app .dataTables_wrapper,
body.sm-app .cart-table,
body.sm-app .wishlist-table,
body.sm-app .sm-wallet-table,
body.sm-app .custom-scrollbar:has(table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.sm-app .select2-container { width: 100% !important; max-width: 100%; }
body.sm-app .swiper { max-width: 100%; overflow: hidden; }
body.sm-app .breadcrumb,
body.sm-app nav.breadcrumb {
  flex-wrap: wrap;
  row-gap: 4px;
  max-width: 100%;
}
body.sm-app .wrap {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

body.sm-filter-open { overflow: hidden; }
body.sm-filter-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(18, 33, 46, .42);
  z-index: 1035;
}

@media (max-width: 1199.98px) {
  body.sm-app .service-list-section > .container-fluid-lg > .row > .filter-sidebar,
  body.sm-app .col-custom-3 {
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }
  body.sm-app .booking-sec .filter,
  body.sm-app .service-list-section .filter,
  body.sm-app .col-custom-3 .filter {
    position: fixed !important;
    top: 0 !important;
    left: -110% !important;
    width: min(320px, 88vw) !important;
    max-width: 88vw !important;
    height: 100dvh !important;
    z-index: 1040 !important;
    overflow: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    background: #fff;
    box-shadow: 12px 0 32px -18px rgba(18, 33, 46, .45);
  }
  body.sm-app .booking-sec .filter.open,
  body.sm-app .service-list-section .filter.open,
  body.sm-app .col-custom-3 .filter.open {
    left: 0 !important;
  }
  body.sm-app .col-custom-9,
  body.sm-app .no-data-col-custom-9,
  body.sm-app .no-data-col-custom-9:has(.no-data-found) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  body.sm-app .sm-account-sidebar.profile-wrapper,
  body.sm-app .profile-body-wrapper .profile-wrapper.sm-account-sidebar {
    z-index: 1040;
  }
}

@media (max-width: 991.98px) {
  body.sm-app .sm-address-list,
  body.sm-app.sm-studio .sm-address-list { grid-template-columns: 1fr; }
  body.sm-app .sm-address-form__row { grid-template-columns: 1fr; }
  body.sm-app .service-list-section .row > [class*="col-"],
  body.sm-app .cart .row > [class*="col-"],
  body.sm-app .service-section .row > [class*="col-"],
  body.sm-app .about-us .row > [class*="col-"],
  body.sm-app .contact-section .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  body.sm-app .service-detail-slider,
  body.sm-app .ratio_45 {
    max-width: 100%;
    overflow: hidden;
  }
  body.sm-app .service-img img,
  body.sm-app .ratio_45 img {
    width: 100% !important;
    max-height: 280px;
    object-fit: cover;
  }
  body.sm-app .sticky.amount,
  body.sm-app .amount.sticky,
  body.sm-app .col-xxl-4 .sticky {
    position: static !important;
    top: auto !important;
  }
  body.sm-app .chatting-main-box,
  body.sm-app .right-sidebar-chat,
  body.sm-app .sm-support-chat {
    min-width: 0;
    max-width: 100%;
  }
  body.sm-app .favorite-tab,
  body.sm-app .provider-detail-tab .nav-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }
  body.sm-app .image-grp {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.sm-app .image-grp img { width: 100%; }
}

@media (max-width: 720px) {
  body.sm-app .container-fluid-lg,
  body.sm-app .container-fluid-xl,
  body.sm-app .container-fluid-md,
  body.sm-app .container-fluid-sm,
  body.sm-app .container {
    padding-inline: 16px;
  }
  body.sm-app .sm-account .container-fluid-md { padding-inline: 16px; }
  body.sm-app .row { --bs-gutter-x: 0.75rem; }
  body.sm-app .sm-account-heading,
  body.sm-app .profile-body-wrapper .profile-main > .card > .card-header,
  body.sm-app .favorite-tab,
  body.sm-app .cart-header,
  body.sm-app .detail-content .title,
  body.sm-app .amount-header {
    flex-direction: column;
    align-items: stretch;
  }
  body.sm-app .sm-account-heading .btn,
  body.sm-app .sm-account-heading .btn-solid,
  body.sm-app .filter-div .filter-btn,
  body.sm-app .filter-btn.btn {
    width: 100% !important;
    justify-content: center;
  }
  body.sm-app .modal-dialog {
    margin: 12px;
    max-width: calc(100vw - 24px);
    width: calc(100vw - 24px);
  }
  body.sm-app .address-modal .modal-dialog {
    width: calc(100vw - 24px);
    margin: 12px auto;
  }
  body.sm-app .address-modal .modal-content,
  body.sm-app .delete-modal .modal-content {
    max-height: calc(100dvh - 24px);
  }
  body.sm-app .sm-phone { grid-template-columns: auto minmax(0, 1fr); }
  body.sm-app .modal-footer { justify-content: stretch; }
  body.sm-app .modal-footer .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  body.sm-app .service-card__footer,
  body.sm-app .provider-box,
  body.sm-app .blog-box,
  body.sm-app .finder,
  body.sm-app .servmall-proximity-bar,
  body.sm-app .cart-item,
  body.sm-app .cart-detail {
    min-width: 0;
  }
  body.sm-app .nav-in { padding-inline: 16px; gap: 12px; }
  body.sm-app .nav-drawer {
    inset: 74px 0 0 0;
    height: calc(100dvh - 74px);
    max-height: calc(100dvh - 74px);
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
    background: #fff !important;
  }
  body.sm-app .sm-job-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.sm-app .sm-job-tabs::-webkit-scrollbar { display: none; }
  body.sm-app .sm-job-tabs__item { flex: 0 0 auto; }
  body.sm-app .sm-job-actions,
  body.sm-app .sm-form__actions {
    width: 100%;
  }
  body.sm-app .sm-job-actions .btn,
  body.sm-app .sm-form__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  body.sm-app .cart-item .cart-heading,
  body.sm-app .cart-item .cart-detail,
  body.sm-app .cart .cart-body .cart-item {
    flex-direction: column;
    align-items: stretch;
  }
  body.sm-app .cart-img img { height: auto !important; max-height: 200px; width: 100%; object-fit: cover; }
  body.sm-app .msger-inputarea,
  body.sm-app .sm-support-chat .msger-inputarea {
    flex-wrap: wrap;
  }
  body.sm-app .chat-top-box,
  body.sm-app .common-space {
    min-width: 0;
    flex-wrap: wrap;
  }
  body.sm-app .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  body.sm-app .login-main {
    padding: 24px 16px 40px;
    min-height: 100dvh;
    height: auto;
    display: block;
  }
  body.sm-app .log-in-section { height: auto; min-height: 100dvh; overflow: auto; }
  body.sm-app .login-card { width: 100%; max-width: 100%; }
  body.sm-app .login-title h2 { font-size: clamp(22px, 7vw, 28px); }
  body.sm-app .item-list {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  body.sm-app .servmall-proximity-bar {
    flex-wrap: wrap;
  }
  body.sm-app .btn { white-space: normal; }
  body.sm-app .sm-page-band { padding-top: 16px !important; padding-bottom: 32px !important; }
}

@media (max-width: 480px) {
  body.sm-app .sm-address-type__opt span { flex: 1 1 auto; justify-content: center; }
  body.sm-app .sm-address-type__row { width: 100%; }
  body.sm-app h1 { font-size: clamp(22px, 7vw, 32px) !important; }
  body.sm-app .cats { grid-template-columns: 1fr 1fr; }
  body.sm-app .service-grid.row-cols-sm-2 > .col { flex: 0 0 100%; width: 100%; max-width: 100%; }
  body.sm-app .expert-content .row > .col { flex: 0 0 100%; width: 100%; max-width: 100%; }
  body.sm-app .sm-hour-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Studio / account drawers — win over the theme on resize
   Theme paints .profile white (name vanished), caps height so the menu
   clips at Banners, and leaves the sticky nav sitting on top of the drawer.
   ========================================================================== */
body.sm-filter-open { overflow: hidden; }
body.sm-filter-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(18, 33, 46, .5);
  z-index: 1090;
}
body.sm-filter-open nav:has(> .nav-in) { z-index: 1; }
body.sm-filter-open .nav-drawer { display: none !important; }

@media (max-width: 1199.98px) {
  body.sm-app .sm-account .profile-body-wrapper > .row > [class*="col-"],
  body.sm-app .sm-account-shell > .row > [class*="col-"],
  body.sm-app .profile-body-wrapper > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  body.sm-app .sm-account-sidebar.profile-wrapper,
  body.sm-app .profile-body-wrapper .profile-wrapper.sm-account-sidebar,
  body.sm-app.sm-studio .sm-account-sidebar.profile-wrapper,
  body.sm-app.sm-studio .profile-body-wrapper .profile-wrapper.sm-account-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -110% !important;
    width: min(320px, 88vw) !important;
    max-width: 88vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 16px 12px 28px !important;
    border-radius: 0 !important;
    border: 0 !important;
    z-index: 1100 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 12px 0 40px -16px rgba(14, 33, 53, .55);
    background:
      linear-gradient(165deg, rgba(255,255,255,.08) 0%, transparent 38%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%) !important;
  }
  body.sm-app .sm-account-sidebar.profile-wrapper.open,
  body.sm-app .profile-body-wrapper .profile-wrapper.sm-account-sidebar.open,
  body.sm-app.sm-studio .sm-account-sidebar.profile-wrapper.open,
  body.sm-app.sm-studio .profile-body-wrapper .profile-wrapper.sm-account-sidebar.open {
    left: 0 !important;
  }

  /* Theme sets .profile to $section-bg on <1200, which is white. */
  body.sm-app .sm-account-sidebar .profile,
  body.sm-app .sm-account-sidebar .sm-account-user,
  body.sm-app.sm-studio .sm-account-sidebar .profile,
  body.sm-app.sm-studio .sm-account-sidebar .sm-account-user {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    padding: 28px 8px 16px !important;
  }
  body.sm-app .sm-account-sidebar .sm-account-user__meta h5,
  body.sm-app .sm-account-sidebar .profile-detail h5,
  body.sm-app .sm-account-sidebar .sm-account-user__meta p,
  body.sm-app .sm-account-sidebar .profile-detail p {
    color: #fff !important;
  }
  body.sm-app .sm-account-sidebar__close {
    display: grid !important;
    z-index: 4;
  }
}

@media (max-width: 1020px) {
  body.sm-app .nav-drawer {
    z-index: 105;
    inset: 74px 0 0 0;
    height: calc(100dvh - 74px);
    max-height: calc(100dvh - 74px);
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}