:root {
  /* Brand blue at 6.70:1 on white — comfortably past WCAG AA, with more headroom than the
     green it replaced (4.91:1). The gold is untouched: it is what keeps the marketplace from
     reading as a generic blue directory, and it clears 7.52:1 against --gold-fg. */
  --primary: #1d4ed8;
  --primary-glow: #3b82f6;
  --primary-deep: #163fae;   /* darker end of brand gradients */
  --primary-ink: #14224a;    /* deep brand surface: side rail, footer, promo band */
  /* Semantic green — "open now", "saved", "done". Deliberately NOT the brand colour, so
     switching the brand never changes what a green pill means to a reader. */
  --success: #0c8153;        /* the retired brand green, reused — 4.91:1, unlike the #0e8c5b
                                it replaces, which had been failing AA at 4.27:1 */
  --success-strong: #15a06a; /* backgrounds only, never text on white */
  --success-deep: #0d7a4f;
  --gold: #f5b544;
  --gold-fg: #3a2c00;
  --bg: #f7f9fc;
  --card: #ffffff;
  --fg: #16202e;
  --muted: #5c6a7d;
  --border: #e3e9f2;
  --radius: 18px;
  --shadow: 0 4px 16px -6px color-mix(in oklab, var(--primary) 22%, transparent);
  --shadow-lg: 0 14px 40px -10px color-mix(in oklab, var(--primary) 32%, transparent);
}

* { box-sizing: border-box; }
/* Both elements, deliberately: body's overflow only propagates to the viewport while html's
   is visible, so pinning html too makes the guard independent of that rule. It is a net,
   not the fix — real overflow sources get removed at the source. */
html { direction: rtl; overflow-x: clip; }
body {
  margin: 0;
  /* A single unbreakable token — a long URL, a slug, a mis-encoded string — must wrap
     rather than widen the page. */
  overflow-wrap: break-word;
  /* clip, not hidden: any too-wide child (a scrolling strip, a long unbroken string, the
     off-canvas drawer) would otherwise add a horizontal scrollbar, and in RTL that shifts
     the whole page — which throws off every position:fixed element centred on the viewport,
     the bottom nav's centre button included. `clip` keeps sticky working and never clips
     the fixed drawer, which lives outside the body's flow. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Heebo', 'Rubik', system-ui, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: 'Rubik', 'Heebo', sans-serif; letter-spacing: -.01em; }

.container { max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
.brand-gradient { background: linear-gradient(135deg, var(--primary), var(--primary-glow)); }
.hero-gradient {
  background:
    radial-gradient(60% 80% at 80% 0%, color-mix(in oklab, var(--primary-glow) 35%, transparent), transparent 60%),
    radial-gradient(50% 70% at 0% 20%, rgba(245, 181, 68, .25), transparent 60%),
    linear-gradient(180deg, var(--primary), var(--primary-deep));
}

/* header — two tiers. Tier 1 (dark) answers "who is this and where do I go";
   tier 2 (light) answers "where am I and what am I looking for". Cramming both into
   one row is what made the desktop header feel airless. */
.app-header { position: sticky; top: 0; z-index: 40; }
.hdr-brand { color: #fff;
  background:
    radial-gradient(60% 80% at 80% 0%, color-mix(in oklab, var(--primary-glow) 35%, transparent), transparent 60%),
    radial-gradient(50% 70% at 0% 20%, rgba(245, 181, 68, .25), transparent 60%),
    linear-gradient(180deg, var(--primary), var(--primary-deep));
}
.app-header .bar { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.app-header .bar-actions { margin-inline-start: auto; }

/* hamburger */
.burger { display: grid; gap: 4px; padding: 10px; border: 0; cursor: pointer; border-radius: 12px;
  background: rgba(255, 255, 255, .12); flex: none; }
.burger:hover { background: rgba(255, 255, 255, .2); }
.burger span { display: block; width: 17px; height: 2px; background: #fff; border-radius: 2px; }

/* logo lockup: the name is the question, the area beside it is the answer — and the area
   is also the site's ONE area control, so it is a button, not decoration. */
.lockup { display: flex; align-items: center; gap: 10px; color: #fff; flex: none; }
.lockup-word { font-family: 'Rubik', 'Heebo', sans-serif; font-weight: 800; font-size: 20px;
  line-height: 1; letter-spacing: -.02em; white-space: nowrap; color: #fff; }
.lockup-word em { font-style: normal; color: var(--gold); }
.lockup-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .3); flex: none; }
.lockup-place { display: flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer;
  border: 0; background: transparent; color: #fff; font: inherit; text-align: start;
  padding: 4px 8px; border-radius: 10px; }
.lockup-place:hover { background: rgba(255, 255, 255, .14); }
.lockup-place .areasel-caret { width: 14px; height: 14px; opacity: .75; flex: none; }
.lockup-emblem { width: 30px; height: 30px; object-fit: contain; flex: none; }
.lockup-name { font-weight: 700; font-size: 14px; line-height: 1.15; white-space: nowrap; }
.lockup-name small { display: block; font-size: 10.5px; font-weight: 500; opacity: .72; }
.lockup-sm .lockup-word { font-size: 17px; }
.lockup-sm .lockup-sep { height: 21px; }
.lockup-sm .lockup-name { font-size: 12.5px; }
.areasel-lockup { position: relative; min-width: 0; }

.nav { display: flex; gap: 4px; }
.nav a { padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; min-height: 40px; }
.nav a:hover { background: rgba(255, 255, 255, .14); }
.chip { background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 9px 14px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }

/* global header search + typeahead
   The search is a single icon at every width now, not a field competing for room in the
   bar. Tapping it drops a full-width search sheet under the header — one behaviour to
   learn instead of two, and the bar gets ~320px back. */
.hdr-search {
  display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 41;
  padding: 12px 16px; background: var(--card); box-shadow: var(--shadow-lg); border-radius: 0 0 18px 18px;
}
body.hs-open .hdr-search { display: block; }
.hdr-search .hs-form { background: var(--bg); border: 1px solid var(--border); }
.hdr-search .hs-form > svg { color: var(--muted); opacity: 1; }
.hdr-search .hs-form:focus-within > svg { color: var(--primary); }
.hdr-search .hs-form input { color: var(--fg); }
.hdr-search .hs-form input::placeholder { color: var(--muted); }
.hdr-search .hs-panel { position: static; margin-top: 8px; box-shadow: none; max-height: 60vh; }
.hs-form { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 8px 14px; min-height: 40px; position: static; }
.hs-form:focus-within { background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); }
.hs-form > svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.hs-form:focus-within > svg { color: var(--primary); opacity: 1; }
.hs-form input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: 14px; }
.hs-form input::placeholder { color: rgba(255, 255, 255, .82); }
.hs-form:focus-within input { color: var(--fg); }
.hs-form:focus-within input::placeholder { color: var(--muted); }
.hs-x { flex: none; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; opacity: .7; }
.hs-x:hover { opacity: 1; }

.hs-panel {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--card); color: var(--fg); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px;
  max-height: min(72vh, 540px); overflow-y: auto;
}
.hs-gh { font-size: 11px; font-weight: 800; color: var(--muted); padding: 10px 12px 4px; }
.hs-row { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: 10px; color: var(--fg); }
.hs-row:hover, .hs-row.on { background: color-mix(in oklab, var(--primary) 12%, transparent); }
.hs-t { font-weight: 700; font-size: 14px; }
.hs-sub { font-size: 12px; color: var(--muted); }
.hs-empty { padding: 16px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.hs-all { display: block; text-align: center; padding: 11px; margin-top: 4px; font-weight: 800; color: var(--primary); border-top: 1px solid var(--border); }
.hs-all:hover, .hs-all.on { background: color-mix(in oklab, var(--primary) 12%, transparent); }
.hs-toggle { display: inline-flex; }

/* hero */
.hero { color: #fff; padding: 22px 0 56px; position: relative; overflow: hidden; }
.hero .chip { background: rgba(245, 181, 68, .9); color: var(--gold-fg); }
.hero h1 { font-size: 38px; font-weight: 800; margin: 10px 0 4px; line-height: 1.1; }
.hero p { opacity: .92; margin: 0; }
.search {
  background: var(--card); color: var(--fg); border-radius: 24px; padding: 14px;
  margin-top: 22px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; flex-wrap: wrap;
}
.search input, .search select {
  flex: 1; min-width: 150px; border: 0; background: #eef4f1;
  border-radius: 14px; padding: 12px 14px; font: inherit; outline: none;
}

.btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; border-radius: 14px; padding: 12px 18px; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: #fff; }

/* sections */
section.block { padding: 28px 0; }
.block h2 { font-size: 22px; font-weight: 800; margin: 0 0 14px; }
.grid { display: grid; gap: 14px; }
.cats { grid-template-columns: repeat(2, 1fr); }
.cards { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
  .cats { grid-template-columns: repeat(5, 1fr); }
  .cards { grid-template-columns: repeat(4, 1fr); }
}

.cat {
  position: relative; border-radius: var(--radius); overflow: hidden; padding: 16px; min-height: 104px;
  color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
  box-shadow: var(--shadow); transition: transform .2s;
}
.cat:hover { transform: translateY(-3px); }
.cat .name { font-weight: 800; font-size: 16px; }
.cat .sub { opacity: .85; font-size: 12px; }

.lc {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.lc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lc .img {
  aspect-ratio: 5 / 4; position: relative; display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--muted);
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 12%, transparent), color-mix(in oklab, var(--primary-glow) 14%, transparent));
}
.lc .img img { width: 100%; height: 100%; object-fit: cover; }
.lc .body { padding: 12px; }
.lc .title { font-weight: 700; font-size: 14px; }
.lc .meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; margin-top: 8px; }
.price { font-weight: 800; color: var(--primary); font-size: 15px; }
.badge { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--gold); color: var(--gold-fg); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; }

.notice { background: #fff7e6; border: 1px solid #f5d98a; color: #7a5b00; border-radius: var(--radius); padding: 16px; }
/* shared status banners — use these instead of hand-rolled inline colors */
.notice-warn { background: #fff7e6; border: 1px solid #f5d98a; color: #7a5b00; }
.notice-ok { background: #e9f8f0; border: 1px solid #a9e0c5; color: var(--success-deep); }
.notice-err { background: #fdeaea; border: 1px solid #f0a9a9; color: #b03a3a; }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; opacity: .92; }
.crumbs a { text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { opacity: .7; }

/* skip-to-content link (visually hidden until focused) */
.skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 12px 0; font-weight: 700; }
.skip-link:focus { inset-inline-start: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* secondary / danger buttons (scale beyond .btn-primary) */
.btn-secondary { background: var(--muted); color: #fff; }
.btn-danger { background: #dc3545; color: #fff; }

.foot { margin-top: 30px; border-top: 1px solid var(--border); color: var(--muted); padding: 18px 0; font-size: 14px; }

/* dashboard shell (admin / business) */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.side { background: var(--primary-ink); color: #cfd9ec; padding: 18px 14px; }
.side .brand { font-weight: 800; color: #fff; font-size: 19px; margin-bottom: 6px; }
.side .brand .dot { color: var(--gold); }
.side .role { font-size: 12px; opacity: .7; margin-bottom: 18px; }
.side a { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; font-weight: 600; color: #cfd9ec; margin-bottom: 4px; }
.side a:hover, .side a.active { background: rgba(255, 255, 255, .12); color: #fff; }
.main { padding: 26px; }
.main h1 { margin: 0 0 18px; font-size: 26px; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 860px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.kpi .label { color: var(--muted); font-size: 13px; }
.kpi .value { font-size: 30px; font-weight: 800; margin-top: 6px; color: var(--primary); }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-top: 18px; }
.panel h2 { font-size: 18px; margin: 0 0 12px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: start; padding: 10px; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 600; }
@media (max-width: 720px) { .shell { grid-template-columns: 1fr; } .side { display: none; } }

/* ---- promo slider ---- */
.promo { position: relative; height: 210px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-top: 0; }
@media (min-width: 720px) { .promo { height: 280px; } }
.promo .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.promo .slide.on { opacity: 1; }
.promo .slide img { width: 100%; height: 100%; object-fit: cover; }
.promo .slide .ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 26px; color: #fff;
  background: linear-gradient(to left, color-mix(in oklab, var(--primary-deep) 90%, transparent), color-mix(in oklab, var(--primary) 40%, transparent) 60%, transparent); }
.promo .slide h3 { font-size: 24px; margin: 0 0 6px; }
.promo .slide p { margin: 0 0 12px; opacity: .95; }
.promo .pill { align-self: flex-start; background: #fff; color: var(--primary); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; }
.promo .dots { position: absolute; bottom: 10px; inset-inline: 0; display: flex; gap: 6px; justify-content: center; }
.promo .dots span { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .5); }
.promo .dots [data-promo-dot] { border: 0; padding: 0; cursor: pointer; }
.promo .dots span.on, .promo .dots [data-promo-dot].on { width: 22px; background: #fff; }
.promo-nav, .promo-pause {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(0,0,0,.32); color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.promo-nav:hover, .promo-pause:hover { background: rgba(0,0,0,.5); }
.promo-nav.prev { inset-inline-start: 10px; }
.promo-nav.next { inset-inline-end: 10px; }
.promo-pause { top: 12px; transform: none; inset-inline-end: 10px; width: 34px; height: 34px; font-size: 15px; }

/* ---- category icon ---- */
.cat .ico { align-self: flex-end; background: rgba(255, 255, 255, .18); border-radius: 14px; padding: 9px; display: inline-flex; }
.cat .ico svg { width: 22px; height: 22px; }
.cat .count { opacity: .9; font-size: 12px; }

/* ---- listing detail ---- */
.detail-hero { position: relative; height: 320px; }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero .ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 55%); display: flex; align-items: flex-end; }
.detail-hero .ov .c { color: #fff; padding: 24px; }
.detail-hero h1 { font-size: 30px; margin: 6px 0; }
.detail-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 360px; }
.detail-actions .btn { display: flex; gap: 8px; align-items: center; justify-content: center; }
.btn-soft { background: var(--card); border: 1px solid var(--border); color: var(--fg); }
.btn-success { background: var(--success-strong); color: #fff; }

/* ---- business profile (card page) ---- */
/* A card theme controls not just colour but the whole *look*: corner radius, border
   weight, surface shadow/elevation, section spacing, and heading treatment. Components
   read these via var(--c-*, <default>) so a theme only overrides what it wants to change,
   and each business card ends up visually distinct. */
.card-theme-emerald { --c-bg:#f7faf8; --c-surface:#fff; --c-text:#15241d; --c-muted:#5b6b63; --c-primary:#0e8c5b; --c-primary-fg:#fff; --c-accent:#f5b544; --c-accent-fg:#3a2c00; --c-border:#e4ece8;
  --c-radius:16px; --c-border-w:1px; --c-shadow:0 8px 22px -12px rgba(14,140,91,.35); --c-space:12px; }
.card-theme-noir { --c-bg:#121212; --c-surface:#1c1c1c; --c-text:#f3ead0; --c-muted:#b6a98a; --c-primary:#c9a84c; --c-primary-fg:#121212; --c-accent:#e7c873; --c-accent-fg:#121212; --c-border:rgba(255,255,255,.12);
  --c-radius:12px; --c-border-w:1px; --c-shadow:0 10px 30px -10px rgba(0,0,0,.7); --c-space:12px; --c-heading-spacing:.02em; }
.ct-bg { background: var(--c-bg); color: var(--c-text); }
.ct-surface { background: var(--c-surface); color: var(--c-text);
  border: var(--c-border-w,1px) solid var(--c-border); border-radius: var(--c-radius,16px); box-shadow: var(--c-shadow, none); }
.ct-primary { background: var(--c-primary); color: var(--c-primary-fg); }
.ct-accent { background: var(--c-accent); color: var(--c-accent-fg); }
.profile-cover { height: 270px; position: relative; }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-cover .veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3), transparent 45%, var(--c-bg)); }
.profile-head { max-width: 760px; margin: -92px auto 0; padding: 0 16px; text-align: center; position: relative; }
.profile-logo { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 6px solid var(--c-bg); margin: 0 auto; box-shadow: var(--shadow-lg); }
.profile-logo img { width: 100%; height: 100%; object-fit: cover; }
.profile-head h1 { font-size: 34px; margin: 14px 0 2px; color: var(--c-text); text-transform: var(--c-heading-transform, none); letter-spacing: var(--c-heading-spacing, -.01em); }
.profile-head .prof { color: var(--c-muted); }
.profile-meta { display: flex; gap: 16px; justify-content: center; color: var(--c-muted); font-size: 14px; margin-top: 8px; flex-wrap: wrap; }
.status-open { color: var(--success); font-weight: 800; }
.status-closed { color: #c0392b; font-weight: 800; }
/* Live "available now" (a doctor on shift) — overrides the schedule badge; gentle pulse to read as live. */
.status-live { color: var(--success); font-weight: 900; animation: sos-pulse 1.6s ease-in-out infinite; }
@keyframes sos-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .status-live { animation: none; } }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 520px; margin: 22px auto 0; }
@media (min-width: 640px) { .quick { grid-template-columns: repeat(6, 1fr); } }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--c-muted); font-size: 12px; }
.quick .ico { width: 54px; height: 54px; border-radius: var(--c-radius,16px); display: flex; align-items: center; justify-content: center; background: var(--c-surface); border: var(--c-border-w,1px) solid var(--c-border); box-shadow: var(--c-shadow, none); }
.quick .ico.accent { background: var(--c-accent); color: var(--c-accent-fg); border: 0; }
.quick .ico.primary { background: var(--c-primary); color: var(--c-primary-fg); border: 0; }
.psection { max-width: 760px; margin: calc(24px + var(--c-space,12px)) auto 0; padding: 0 16px; }
.psection h2 { display: flex; align-items: center; gap: 10px; color: var(--c-text); font-size: 22px; text-transform: var(--c-heading-transform, none); letter-spacing: var(--c-heading-spacing, -.01em); }
.psection h2:before { content: ""; width: 30px; height: 4px; border-radius: 999px; background: var(--c-accent); }
.svc { display: grid; gap: var(--c-space,10px); }
@media (min-width: 640px) { .svc { grid-template-columns: 1fr 1fr; } }
/* optional per-service icon (chosen in the builder's icon picker) */
.svc-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: calc(var(--c-radius,16px) * .6);
  background: color-mix(in oklab, var(--c-primary) 12%, transparent); color: var(--c-primary);
}
.svc-ico svg { width: 20px; height: 20px; }
/* responsive video embed (16:9) on the public card */
.pv-video { position: relative; padding-top: 56.25%; border-radius: var(--c-radius,14px); overflow: hidden; }
.pv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.svc .item { display: flex; flex-direction: column; gap: 12px; background: var(--c-surface); border: var(--c-border-w,1px) solid var(--c-border); border-radius: var(--c-radius,16px); box-shadow: var(--c-shadow, none); padding: 14px; }
.svc .svc-row { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.svc .price { color: var(--c-primary); font-weight: 800; white-space: nowrap; }
/* per-service "book via WhatsApp" deep-link CTA */
.svc-book { display: inline-flex; align-items: center; justify-content: center; gap: 7px; align-self: stretch; padding: 9px 14px; border-radius: 999px; background: var(--c-primary); color: var(--c-primary-fg); font-weight: 800; font-size: 14px; }
.svc-book svg { width: 17px; height: 17px; }
.svc-book:hover { filter: brightness(.95); }
.prod { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--c-space,10px); }
@media (min-width: 640px) { .prod { grid-template-columns: repeat(4, 1fr); } }
.prod .item { background: var(--c-surface); border: var(--c-border-w,1px) solid var(--c-border); border-radius: var(--c-radius,16px); box-shadow: var(--c-shadow, none); overflow: hidden; }
.prod .item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.prod .item .b { padding: 10px; display: flex; justify-content: space-between; align-items: center; }
.pgallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .pgallery { grid-template-columns: repeat(3, 1fr); } }
.pgallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--c-radius,14px); }
.faq { background: var(--c-surface); border: var(--c-border-w,1px) solid var(--c-border); border-radius: var(--c-radius,16px); box-shadow: var(--c-shadow, none); padding: 14px; margin-bottom: 8px; }
.faq summary { font-weight: 700; cursor: pointer; color: var(--c-text); }
.faq p { color: var(--c-muted); margin: 8px 0 0; }
.cform input, .cform textarea { width: 100%; border: var(--c-border-w,1px) solid var(--c-border); background: var(--c-surface); color: var(--c-text); border-radius: var(--c-radius,12px); padding: 12px; margin-bottom: 10px; font: inherit; }

/* ===== builder two-pane + modal ===== */
.builder-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .builder-grid { grid-template-columns: minmax(380px, 1fr) 1fr; } .builder-preview { position: sticky; top: 16px; } }
.preview-frame { width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sec-row { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--card); }
.sec-row.hidden-sec { opacity: .5; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--card); border-radius: 10px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; text-decoration: none; color: inherit; }
.iconbtn:hover { background: var(--muted); color: #fff; }
dialog.sec-modal { border: 0; border-radius: 18px; padding: 0; width: min(640px, 94vw); box-shadow: var(--shadow-lg); color: var(--fg); }
dialog.sec-modal::backdrop { background: rgba(0, 0, 0, .45); }
.sec-modal header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 800; }
.sec-modal .body { padding: 18px; max-height: 70vh; overflow: auto; }
.sec-modal .x { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.fld { display: block; font-weight: 700; margin-bottom: 10px; }
.fld input, .fld textarea, .fld select { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 10px; font: inherit; margin-top: 4px; }
.chk { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-weight: 600; }
.repeater { margin-bottom: 8px; }
.rep-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 8px; background: color-mix(in oklab, var(--bg) 55%, transparent); }
.btn-add { border: 1px dashed var(--primary); background: transparent; color: var(--primary); border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; font-weight: 700; }
.btn-remove { border: 0; background: #fdeaea; color: #b03a3a; border-radius: 8px; padding: 5px 10px; cursor: pointer; font: inherit; font-weight: 700; margin-top: 6px; }
.drag { cursor: grab; color: var(--muted); padding: 2px 6px; font-size: 18px; user-select: none; line-height: 1; }
.drag:active { cursor: grabbing; }
.sortable-ghost { opacity: .4; }
.sortable-chosen { box-shadow: var(--shadow); }
.dropzone { border: 2px dashed var(--border); border-radius: 12px; padding: 14px; text-align: center; cursor: pointer; margin-top: 4px; transition: border-color .15s, background .15s; }
.dropzone.drag-over { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 8%, transparent); }
.media-field { margin-top: 4px; }
.media-prev { max-width: 100%; max-height: 140px; border-radius: 10px; margin: 0 auto 8px; display: block; }
.media-hint { color: var(--muted); font-size: 13px; }
/* preview edit mode (click items to edit) */
.pv-edit [data-ei] { cursor: pointer; }
.pv-edit [data-ei]:hover { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 6px; }
.pv-add { display: inline-block; margin-top: 10px; border: 1px dashed var(--c-primary); background: transparent; color: var(--c-primary); border-radius: 10px; padding: 6px 12px; cursor: pointer; font: inherit; font-weight: 700; }

/* ===== system themes (data-theme on <html>) ===== */
[data-theme="indigo"] {
  --bg: oklch(0.985 0.005 270); --fg: oklch(0.18 0.05 270); --card: oklch(1 0 0);
  --primary: oklch(0.32 0.13 270); --primary-glow: oklch(0.55 0.18 268); --gold: oklch(0.83 0.15 78);
  --muted: oklch(0.5 0.03 270); --border: oklch(0.91 0.01 270);
}
[data-theme="sunset"] {
  --bg: oklch(0.985 0.012 60); --fg: oklch(0.2 0.04 40); --card: oklch(1 0 0);
  --primary: oklch(0.55 0.18 38); --primary-glow: oklch(0.72 0.18 55); --gold: oklch(0.78 0.15 80);
  --muted: oklch(0.5 0.04 40); --border: oklch(0.92 0.02 55);
}
[data-theme="plum"] {
  --bg: oklch(0.985 0.008 320); --fg: oklch(0.2 0.06 320); --card: oklch(1 0 0);
  --primary: oklch(0.4 0.16 320); --primary-glow: oklch(0.7 0.2 340); --gold: oklch(0.78 0.16 340);
  --muted: oklch(0.5 0.04 320); --border: oklch(0.92 0.02 320);
}
[data-theme="teal"] {
  --bg: oklch(0.98 0.005 220); --fg: oklch(0.18 0.03 230); --card: oklch(1 0 0);
  --primary: oklch(0.28 0.04 230); --primary-glow: oklch(0.7 0.13 195); --gold: oklch(0.74 0.14 195);
  --muted: oklch(0.5 0.02 230); --border: oklch(0.91 0.01 220);
}

/* ===== card themes (extra) — each ships a distinct layout personality ===== */
/* Cream: warm, generously rounded, soft airy elevation. */
.card-theme-cream { --c-bg: oklch(0.97 0.015 75); --c-surface: oklch(0.99 0.008 75); --c-text: oklch(0.22 0.04 50); --c-muted: oklch(0.5 0.03 50); --c-primary: oklch(0.48 0.08 50); --c-primary-fg: oklch(0.99 0.01 70); --c-accent: oklch(0.7 0.1 55); --c-accent-fg: oklch(0.18 0.04 50); --c-border: oklch(0.88 0.02 70);
  --c-radius:22px; --c-border-w:1px; --c-shadow:0 12px 34px -14px oklch(0.48 0.08 50 / .32); --c-space:14px; }
/* Aurora: dark, glassy, neon glow around every surface. */
.card-theme-aurora { --c-bg: oklch(0.16 0.04 270); --c-surface: oklch(0.22 0.05 265); --c-text: oklch(0.97 0.01 270); --c-muted: oklch(0.72 0.03 270); --c-primary: oklch(0.78 0.18 155); --c-primary-fg: oklch(0.14 0.04 270); --c-accent: oklch(0.72 0.17 305); --c-accent-fg: oklch(0.14 0.04 270); --c-border: oklch(1 0 0 / 14%);
  --c-radius:18px; --c-border-w:1px; --c-shadow:0 0 0 1px oklch(1 0 0 / .05), 0 10px 34px -8px oklch(0.78 0.18 155 / .4); --c-space:13px; }
/* Brutal: no radius, thick black borders, hard offset shadow, uppercase headings. */
.card-theme-brutal { --c-bg: oklch(1 0 0); --c-surface: oklch(1 0 0); --c-text: oklch(0.12 0 0); --c-muted: oklch(0.35 0 0); --c-primary: oklch(0.12 0 0); --c-primary-fg: oklch(1 0 0); --c-accent: oklch(0.68 0.22 35); --c-accent-fg: oklch(1 0 0); --c-border: oklch(0.12 0 0);
  --c-radius:0px; --c-border-w:2px; --c-shadow:5px 5px 0 0 oklch(0.12 0 0); --c-space:14px; --c-heading-transform:uppercase; --c-heading-spacing:.01em; }

/* Every --c-primary below clears WCAG AA (4.5:1) against white, so a white-on-primary
   button stays legible: azure 5.17, violet 5.70, sunset 5.18, slate 17.74. The mockup's
   lighter #059669 / #F97316 are deliberately demoted to --c-accent, where they sit under
   dark text instead of white. */
/* Azure: crisp and corporate — tight radius, cool grey ground, restrained elevation. */
.card-theme-azure { --c-bg:#f5f7fa; --c-surface:#fff; --c-text:#111827; --c-muted:#6b7280; --c-primary:#2563eb; --c-primary-fg:#fff; --c-accent:#f59e0b; --c-accent-fg:#3a2c00; --c-border:#e2e8f0;
  --c-radius:12px; --c-border-w:1px; --c-shadow:0 6px 18px -10px rgba(37,99,235,.35); --c-space:12px; }
/* Violet: elegant — borderless surfaces, generous radius, diffuse lift. */
.card-theme-violet { --c-bg:#faf9fe; --c-surface:#fff; --c-text:#1f2937; --c-muted:#6b7280; --c-primary:#7c3aed; --c-primary-fg:#fff; --c-accent:#a855f7; --c-accent-fg:#fff; --c-border:#e9e5f5;
  --c-radius:20px; --c-border-w:0px; --c-shadow:0 16px 40px -18px rgba(124,58,237,.45); --c-space:15px; }
/* Sunset: warm market palette — soft rounding, sandy ground, glowing accent. */
.card-theme-sunset { --c-bg:#fff7ed; --c-surface:#fff; --c-text:#7c2d12; --c-muted:#9a6b4f; --c-primary:#c2410c; --c-primary-fg:#fff; --c-accent:#f97316; --c-accent-fg:#43180a; --c-border:#fbe3ce;
  --c-radius:18px; --c-border-w:1px; --c-shadow:0 10px 28px -14px rgba(194,65,12,.4); --c-space:14px; }
/* Slate: minimal — hairline borders, no shadow, near-black primary. */
.card-theme-slate { --c-bg:#f3f4f6; --c-surface:#fff; --c-text:#111827; --c-muted:#6b7280; --c-primary:#111827; --c-primary-fg:#fff; --c-accent:#374151; --c-accent-fg:#fff; --c-border:#e5e7eb;
  --c-radius:8px; --c-border-w:1px; --c-shadow:none; --c-space:12px; --c-heading-spacing:.01em; }

/* ===== theme picker (settings) ===== */
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .swatches { grid-template-columns: repeat(3, 1fr); } }
.swatch { border: 2px solid var(--border); border-radius: 16px; padding: 12px; cursor: pointer; background: var(--card); text-align: start; transition: border-color .15s, box-shadow .15s; }
.swatch.active { border-color: var(--primary); box-shadow: var(--shadow); }
.swatch .bar { display: flex; height: 44px; border-radius: 12px; overflow: hidden; }
.swatch .bar span { flex: 1; }
.swatch .row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-weight: 700; }
.swatch .check { width: 22px; height: 22px; border-radius: 999px; background: var(--primary); color: #fff; display: none; align-items: center; justify-content: center; font-size: 13px; }
.swatch.active .check { display: inline-flex; }

/* ===== mobile bottom nav (React parity) ===== */
.bottomnav { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 84px; }
  /* Top nav (בית/קטגוריות/פרטיות) is redundant with the bottom nav on mobile. */
  .nav { display: none; }
  .bottomnav {
    display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    background: color-mix(in oklab, var(--card) 96%, transparent);
    border-top: 1px solid var(--border); backdrop-filter: blur(8px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottomnav ul { display: flex; align-items: flex-end; justify-content: space-between; max-width: 460px; margin: 0 auto; padding: 8px 12px 6px; list-style: none; }
  .bottomnav li { flex: 1; text-align: center; }
  .bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 600; }
  .bottomnav a.active, .bottomnav a:hover { color: var(--primary); }
  .bottomnav a svg { width: 22px; height: 22px; }
  .bottomnav .mid { margin-top: -28px; }
  .bottomnav .mid .fab {
    width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: #fff;
    box-shadow: var(--shadow-lg); border: 4px solid var(--bg); margin: 0 auto;
  }
  .bottomnav .mid .fab svg { width: 26px; height: 26px; }
}

/* ============================================================
   Phase 1 — bold, colorful marketplace polish + ad slots
   ============================================================ */

/* reveal-on-scroll (progressive: only hides once JS arms it) */
.reveal { transition: opacity .55s ease, transform .55s ease; }
body.reveal-on .reveal { opacity: 0; transform: translateY(16px); }
body.reveal-on .reveal.in { opacity: 1; transform: none; }

/* hero: glowing orbs + bigger type + trust stats */
.hero { padding-bottom: 60px; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; }
.hero::before { width: 320px; height: 320px; background: var(--gold); inset-block-start: -130px; inset-inline-start: -90px; opacity: .35; }
.hero::after { width: 360px; height: 360px; background: var(--primary-glow); inset-block-start: -150px; inset-inline-end: -120px; opacity: .45; }
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-size: 44px; }
@media (min-width: 720px) { .hero h1 { font-size: 56px; } }
.hero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 16px; }
.hero-stats .st { display: flex; align-items: baseline; gap: 6px; }
.hero-stats .st b { font-size: 22px; font-weight: 800; }
.hero-stats .st span { opacity: .85; font-size: 13px; }
.hero-stats .st.badge2 { background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 6px 13px; font-weight: 700; font-size: 13px; }

/* section header with a "see all" link */
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.head h2 { margin: 0; }
.head .seeall { color: var(--primary); font-weight: 800; font-size: 14px; white-space: nowrap; }
.head .seeall:hover { text-decoration: underline; }

/* colorful category tiles (accent cycles per tile) */
.cats .cat { background: linear-gradient(135deg, var(--ca, var(--primary)), var(--cb, var(--primary-glow))); }
.cats .cat:nth-child(8n+1) { --ca:#0e8c5b; --cb:#22c08b; }
.cats .cat:nth-child(8n+2) { --ca:#2563eb; --cb:#38bdf8; }
.cats .cat:nth-child(8n+3) { --ca:#d6452b; --cb:#f59e0b; }
.cats .cat:nth-child(8n+4) { --ca:#7c3aed; --cb:#ec4899; }
.cats .cat:nth-child(8n+5) { --ca:#0891b2; --cb:#14b8a6; }
.cats .cat:nth-child(8n+6) { --ca:#b45309; --cb:#f5b544; }
.cats .cat:nth-child(8n+7) { --ca:#be123c; --cb:#fb7185; }
.cats .cat:nth-child(8n+8) { --ca:#15803d; --cb:#84cc16; }
.cats .cat .count { background: rgba(0, 0, 0, .32); border-radius: 999px; padding: 2px 9px; align-self: flex-start; margin-top: 6px; }
/* Legibility scrim: guarantees white text/labels pass contrast on the lighter gradient
   tiles (e.g. gold/amber/pink) without dulling the bold palette. Sits above the optional
   photo but below the tile's text (which is z-index:1 via `.cat > *`). */
.cats .cat::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.34) 100%); }
.cats .cat .name { text-shadow: 0 1px 6px rgba(0,0,0,.4); }
/* "coming soon": de-emphasise empty categories instead of broadcasting emptiness. */
.cats .cat.cat-soon { opacity: .72; }
.cats .cat.cat-soon .count { background: rgba(0,0,0,.42); }

/* listing card: hover overlay + nicer featured badge */
.lc .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.3), transparent 42%); opacity: 0; transition: opacity .2s; }
.lc:hover .img::after { opacity: 1; }
.lc .img .seeon { position: absolute; inset-block-end: 8px; inset-inline-start: 10px; z-index: 1; color: #fff; font-weight: 800; font-size: 12px; opacity: 0; transform: translateY(6px); transition: .2s; }
.lc:hover .img .seeon { opacity: 1; transform: none; }
.badge.feat { background: linear-gradient(135deg, #f5b544, #f59e0b); color: #3a2c00; box-shadow: 0 4px 12px -3px rgba(245, 181, 68, .6); }

/* ---- business-card tile (matches the listing card, richer content) ---- */
.badge.biz-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: #fff; box-shadow: 0 4px 12px -3px color-mix(in oklab, var(--primary) 55%, transparent); }
.badge.biz-badge svg { width: 13px; height: 13px; }
.lc-biz .body { display: flex; flex-direction: column; }
.lc-biz .lc-prof { color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.35; }
.lc-biz .meta { flex-wrap: wrap; gap: 6px 10px; }
.lc-rating { display: inline-flex; align-items: center; gap: 4px; }
.lc-rating .stars { color: #f5b544; letter-spacing: 1px; font-size: 13px; }
.lc-rating b { color: var(--fg); font-weight: 800; }
.lc-rating .rc { color: var(--muted); }
.lc-cta { margin-top: 10px; color: var(--primary); font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.lc-biz:hover .lc-cta span { transform: translateX(-3px); transition: transform .2s; }

/* recently-viewed strip (home) — horizontal scroll of small business chips */
.rv-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.rv-item {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 104px; text-align: center; padding: 12px 8px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.rv-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rv-item img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #eee; }
.rv-item .rv-name { font-weight: 700; font-size: 12.5px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-item .rv-prof { color: var(--muted); font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* per-tile action buttons (view / share / business page) */
.lc-actions { display: flex; gap: 6px; padding: 0 12px 12px; }
.lc-act {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  border-radius: 12px; padding: 8px 6px; font-weight: 700; font-size: 12.5px; cursor: pointer;
  min-height: 40px; transition: background .15s, border-color .15s, color .15s;
}
.lc-act:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); border-color: var(--primary); color: var(--primary); }
.lc-act.primary { background: linear-gradient(135deg, var(--primary), var(--primary-glow)); border-color: transparent; color: #fff; }
.lc-act.primary:hover { filter: brightness(1.05); color: #fff; }
.lc-act svg { width: 15px; height: 15px; }
@media (max-width: 420px) { .lc-act span, .lc-act { font-size: 0; } .lc-act svg { width: 17px; height: 17px; } .lc-act svg + * { display: none; } }

/* ad slots */
.adslot { position: relative; display: flex; align-items: center; gap: 16px; overflow: hidden; border-radius: var(--radius); padding: 18px 22px; color: #fff; box-shadow: var(--shadow); }
.adslot.leaderboard { background: linear-gradient(120deg, #7c3aed, #2563eb 55%, #22c08b); min-height: 92px; }
.adslot.banner { background: linear-gradient(120deg, var(--primary-deep), var(--primary) 50%, var(--gold)); }
.adslot .ad-img { width: 120px; height: 74px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.adslot .ad-body { display: flex; flex-direction: column; gap: 2px; }
.adslot .ad-title { font-size: 19px; font-weight: 800; }
.adslot .ad-sub { opacity: .92; font-size: 14px; }
.adslot .ad-cta { margin-top: 8px; align-self: flex-start; background: #fff; color: #15241d; border-radius: 999px; padding: 7px 16px; font-weight: 800; font-size: 13px; }
.ad-label { position: absolute; top: 8px; inset-inline-end: 10px; background: rgba(0,0,0,.28); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px; }

/* sponsored card that fits inside a .cards grid cell */
.adcard { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 7px; text-align: center; padding: 20px; min-height: 180px; border-radius: var(--radius); color: #fff; box-shadow: var(--shadow); background: linear-gradient(150deg, var(--primary), var(--primary-glow)); border: 2px dashed rgba(255, 255, 255, .55); }
.adcard .ad-title { font-size: 17px; font-weight: 800; }
.adcard .ad-sub { font-size: 13px; opacity: .95; line-height: 1.5; }
.adcard .ad-cta { margin-top: 4px; align-self: center; background: #fff; color: var(--primary); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 13px; }

@media (max-width: 560px) {
  .adslot { flex-direction: column; align-items: flex-start; text-align: start; }
  .adslot .ad-img { width: 100%; height: 130px; }
}

/* upgraded footer */
.site-foot { margin-top: 36px; background: linear-gradient(180deg, var(--primary-ink), #0d1730); color: #cfd9ec; }
.site-foot .cols { display: grid; gap: 24px; grid-template-columns: 1fr; padding: 34px 0 18px; }
@media (min-width: 720px) { .site-foot .cols { grid-template-columns: 2fr 1fr 1fr; } }
.site-foot h4 { color: #fff; font-size: 15px; margin: 0 0 12px; }
.site-foot a { display: block; color: #cfd9ec; padding: 4px 0; font-size: 14px; }
.site-foot a:hover { color: #fff; }
.site-foot .brand { font-size: 22px; font-weight: 800; color: #fff; }
.site-foot .brand .dot { color: var(--gold); }
.site-foot .tag { opacity: .82; font-size: 14px; margin-top: 6px; max-width: 38ch; line-height: 1.6; }
.site-foot .social { display: flex; gap: 10px; margin-top: 14px; }
.site-foot .social a { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; padding: 0; }
.site-foot .social a:hover { background: var(--gold); color: #3a2c00; }
.site-foot .social svg { width: 18px; height: 18px; }
.site-foot .botbar { border-top: 1px solid rgba(255,255,255,.12); padding: 14px 0; font-size: 13px; opacity: .82; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   Phase 2/3 — interaction (favorites, toast, filter, back-to-top)
   + community sharing
   ============================================================ */

/* favorite heart on listing cards */
.lc { position: relative; }
.lc-link { display: block; color: inherit; }
.lc-fav {
  position: absolute; z-index: 3; top: 8px; inset-inline-end: 8px;
  width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #5b6b63;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .28); transition: transform .15s, color .15s;
}
.lc-fav:hover { transform: scale(1.1); }
.lc-fav svg { width: 18px; height: 18px; }
[data-fav].saved { color: #e0245e; }
[data-fav].saved svg { fill: #e0245e; }

/* save/share action row (card + listing pages) */
.actionrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 16px; }
.btn-fav { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--c-border, var(--border)); background: var(--c-surface, var(--card)); color: var(--c-text, var(--fg)); border-radius: 999px; padding: 9px 16px; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; }
.btn-fav.saved { color: #e0245e; border-color: #e0245e; }
.btn-fav svg { width: 18px; height: 18px; }

/* share buttons */
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share .lbl { font-weight: 700; color: var(--c-muted, var(--muted)); font-size: 13px; margin-inline-end: 2px; }
.share a, .share button { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 8px 14px; color: #fff; text-decoration: none; }
.share .wa { background: #25d366; }
.share .tg { background: #229ed9; }
.share .fb { background: #1877f2; }
.share .cp { background: var(--c-surface, var(--card)); color: var(--c-text, var(--fg)); border: 1px solid var(--c-border, var(--border)); }
.share .nt { background: linear-gradient(135deg, var(--primary), var(--primary-glow)); padding: 8px 12px; }
.share svg { width: 16px; height: 16px; }

/* back-to-top */
.to-top {
  position: fixed; inset-block-end: 20px; inset-inline-start: 20px; z-index: 45;
  width: 46px; height: 46px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: #fff;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .to-top { inset-block-end: 92px; } }

/* toasts */
.toasts { position: fixed; inset-block-end: 22px; inset-inline: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
@media (max-width: 760px) { .toasts { inset-block-end: 100px; } }
.toast { background: #15241d; color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 700; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px); transition: .25s; max-width: 90%; }
.toast.in { opacity: 1; transform: none; }

/* live filter bar */
.filterbar { display: flex; gap: 10px; margin: 0 0 14px; }
.filterbar input { flex: 1; border: 1px solid var(--border); background: var(--card); color: var(--fg); border-radius: 14px; padding: 11px 14px; font: inherit; outline: none; }
.filterbar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent); }
.filter-empty { color: var(--muted); padding: 8px 2px; }

/* ============================================================
   "Near me & open now"
   ============================================================ */

/* home CTA band */
.near-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; color: #fff; border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); background: linear-gradient(120deg, var(--primary-deep), var(--primary) 55%, var(--primary-glow)); }
.near-cta h2 { margin: 0 0 4px; font-size: 22px; }
.near-cta p { margin: 0; opacity: .92; font-size: 14px; }
.near-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-near { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 11px 18px; font-weight: 800; font-size: 14px; background: rgba(255, 255, 255, .16); color: #fff; }
.btn-near:hover { background: rgba(255, 255, 255, .28); }
.btn-near.doc { background: #fff; color: var(--primary); }
.btn-near.pharm { background: var(--gold); color: var(--gold-fg); }
.btn-near svg { width: 18px; height: 18px; }

/* /near controls */
.near-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.catchip { border: 1px solid var(--border); background: var(--card); color: var(--fg); border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.catchip.active { background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: #fff; border-color: transparent; }
.catchip svg { width: 16px; height: 16px; }
.near-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--fg); cursor: pointer; }
.near-locate { border: 0; cursor: pointer; font: inherit; font-weight: 800; border-radius: 999px; padding: 10px 18px; background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: #fff; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow); margin-inline-start: auto; }
.near-locate svg { width: 18px; height: 18px; }
.near-status { color: var(--muted); margin: 14px 0 4px; min-height: 20px; font-weight: 600; }
.near-empty { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); }

/* /near results */
/* list / map view toggle + Leaflet map on the "near me" page */
.near-viewtoggle { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin: 16px 0 8px; }
.nvt { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--muted); border-radius: 999px; padding: 7px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nvt svg { width: 16px; height: 16px; }
.nvt.active { background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: #fff; }
#near-map { height: 62vh; min-height: 340px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); z-index: 0; }
.near-pin span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.near-pin.is-open span { background: #12b76a; }
.near-pin.is-closed span { background: #98a2b3; }
.near-pin.is-you span { background: #2563eb; }
.mpop { min-width: 150px; text-align: start; }
.mpop b { font-size: 14px; }
.mpop-meta { color: #667085; font-size: 12px; margin: 4px 0 8px; }
.mpop a { color: var(--primary); font-weight: 800; font-size: 13px; }

.near-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .near-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .near-grid { grid-template-columns: 1fr 1fr 1fr; } }
.near-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.near-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.near-main { display: block; color: inherit; }
.near-thumb { height: 120px; position: relative; background-size: cover; background-position: center; background-color: color-mix(in oklab, var(--primary) 14%, var(--card)); }
.near-badge { position: absolute; top: 10px; inset-inline-start: 10px; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800; color: #fff; }
.near-badge.open { background: var(--success-strong); }
.near-badge.closed { background: #b03a3a; }
.near-body { padding: 12px 14px; }
.near-name { font-weight: 800; font-size: 16px; }
.near-prof { color: var(--muted); font-size: 13px; margin-top: 2px; }
.near-meta { display: flex; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-top: 8px; font-weight: 600; }
.near-hours { margin-top: 6px; font-size: 13px; font-weight: 700; }
.near-hours.is-open { color: var(--success); }
.near-hours.is-closed { color: #b03a3a; }
.near-actions { display: flex; gap: 8px; padding: 0 14px 14px; }
.near-actions .na { flex: 1; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
.near-actions .call { background: var(--primary); }
.near-actions .wa { background: #25d366; }
.near-actions .nav { background: #2563eb; }
.near-actions .na svg { width: 20px; height: 20px; }

/* ============================================================
   Header area picker + city filter
   ============================================================ */
/* nowrap: wrapping used to break the actions onto a ragged second line at mid widths.
   Items now drop out by priority in the media queries instead. */
.bar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }

/* account menu — consolidates favorites / language / logout into one dropdown
   so the header stops carrying 7 co-equal utility chips. Native <details> for
   zero-JS robustness; a tiny script closes it on outside-click / Escape. */
.acct { position: relative; }
.acct > summary { list-style: none; cursor: pointer; }
.acct > summary::-webkit-details-marker { display: none; }
.acct-trigger { display: inline-flex; align-items: center; gap: 6px; }
.acct-av { width: 24px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .26); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.acct-trigger > i[data-lucide="user"], .acct-trigger > svg { width: 18px; height: 18px; }
.acct-caret { width: 14px; height: 14px; opacity: .85; transition: transform .2s; }
.acct[open] .acct-caret { transform: rotate(180deg); }
.acct-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  width: 224px; max-width: calc(100vw - 24px); background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px;
}
.acct-name { padding: 8px 12px 4px; font-weight: 800; font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-panel a, .acct-panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  padding: 10px 12px; border-radius: 10px; color: var(--fg); font: inherit; font-weight: 600; font-size: 14px;
  background: transparent; border: 0; cursor: pointer;
}
.acct-panel a:hover, .acct-panel button:hover { background: color-mix(in oklab, var(--primary) 9%, transparent); }
.acct-panel a svg, .acct-panel a i, .acct-panel button svg, .acct-panel button i { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.acct-sep { height: 1px; background: var(--border); margin: 4px 6px; border: 0; }
/* area control — displays the current area and opens the language + area dialog */
.areasel { position: relative; }
.areasel-trigger {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 0; font: inherit;
  font-weight: 700; font-size: 13px; color: #fff; background: rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 7px 12px; transition: background .15s;
}
.areasel-trigger:hover { background: rgba(255, 255, 255, .28); }
.areasel-trigger svg { width: 16px; height: 16px; }
.areasel-trigger .areasel-caret { width: 14px; height: 14px; opacity: .85; }
.areasel-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* keep the he/ar switch reachable on mobile — collapse it to a globe-only chip */
@media (max-width: 760px) { .lang-toggle .lang-text { display: none; } }
/* de-clutter the header: secondary utilities (favorites/language/logout) now live
   in the account menu; the gold "open a business" CTA collapses once the bottom-bar
   FAB (which covers the same action) appears < 760px. */
@media (max-width: 760px) { .header-cta-optional { display: none; } }

/* ===== side drawer ===== */
/* Opens from the inline-start edge (right in RTL). Kept in the DOM and moved with a
   transform so it can animate; `body.drawer-open` drives it, matching the hs-open idiom. */
.drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(20, 34, 74, .5);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
body.drawer-open .drawer-scrim { opacity: 1; visibility: visible; }

/* Anchored to the inline-START edge — the same side as the hamburger that opens it,
   i.e. the right in RTL. It hides by sliding back out through that edge, so the
   direction of the transform has to flip with the writing direction too. */
.drawer { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 61; width: min(88vw, 300px);
  background: var(--card); color: var(--fg); display: flex; flex-direction: column;
  box-shadow: -20px 0 50px -22px rgba(0, 0, 0, .55);
  transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
html[dir="rtl"] .drawer { transform: translateX(100%); }
body.drawer-open .drawer { transform: translateX(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-scrim { transition: none; } }

.drawer-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--primary-ink); color: #fff; }
.drawer-x { margin-inline-start: auto; border: 0; cursor: pointer; background: rgba(255, 255, 255, .14);
  color: #fff; border-radius: 10px; width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
.drawer-x:hover { background: rgba(255, 255, 255, .24); }

.drawer-nav { padding: 10px; display: grid; gap: 2px; overflow-y: auto; }
.drawer-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px;
  font-weight: 600; font-size: 14.5px; color: var(--fg); }
.drawer-nav a:hover { background: color-mix(in oklab, var(--primary) 9%, transparent); color: var(--primary); }
.drawer-nav a .di { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--primary) 9%, transparent); color: var(--primary); }
.drawer-nav a .di i { width: 16px; height: 16px; }
.drawer-nav a.dr-sos .di { background: color-mix(in oklab, #e0362c 12%, transparent); color: #e0362c; }
.drawer-nav hr { border: 0; border-top: 1px solid var(--border); margin: 8px 12px; }

.drawer-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.drawer-cta { text-align: center; border-radius: 12px; padding: 11px; font-weight: 800; }
.drawer-lang { display: flex; gap: 6px; }
.drawer-lang span { flex: 1; text-align: center; padding: 8px; border-radius: 10px;
  border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--muted); }
.drawer-lang span.on { background: var(--primary); border-color: transparent; color: #fff; }

/* The burger is the drawer's only trigger, so it is always visible — on desktop it holds
   the overflow nav, on mobile it holds everything. */
@media (max-width: 1040px) { .nav a { padding: 10px 11px; font-size: 13.5px; } }
@media (max-width: 900px) { .nav { display: none; } }
/* On phones the area stays in the lockup — it is the point of the name, and now also the
   only way to change it — but the sub-label goes. */
@media (max-width: 620px) {
  .lockup { gap: 8px; }
  .lockup-word { font-size: 17px; }
  .lockup-name { font-size: 12.5px; }
  .lockup-name small { display: none; }
  .lockup-sep { height: 20px; }
  .lockup-place { padding: 4px 6px; }
}

/* ===== account preferences ===== */
.pref-h { font-size: 16px; font-weight: 800; margin: 0; }
.pref-sub { color: var(--muted); font-size: 13.5px; margin: 4px 0 12px; }
.pref-lang { display: flex; gap: 6px; max-width: 280px; }
.pref-lang span { flex: 1; text-align: center; padding: 10px; border-radius: 11px;
  border: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--muted); }
.pref-lang span.on { background: var(--primary); border-color: transparent; color: #fff; }
.pref-links { display: grid; gap: 4px; }
.pref-links a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 11px; font-weight: 650; }
.pref-links a:hover { background: color-mix(in oklab, var(--primary) 9%, transparent); color: var(--primary); }
.pref-links a svg { width: 17px; height: 17px; color: var(--primary); }
/* the picker's trigger is styled for the dark bar; on a light panel it needs a border */
.acct-prefs .areasel-trigger { background: var(--bg); border: 1px solid var(--border); color: var(--fg); }
.acct-prefs .areasel-trigger:hover { border-color: var(--primary); background: var(--card); }

/* ===== language + area dialog (the first-visit gate, and the header control's screen) ===== */
.welcome { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 20px; background: rgba(20, 34, 74, .72); overflow-y: auto; }
/* The rule above sets display, which outranks the [hidden] attribute's own display:none —
   so the closed state has to be spelled out or the dialog would be permanently open. */
.welcome[hidden] { display: none; }
.welcome-card { position: relative; background: var(--card); color: var(--fg); border-radius: 22px; padding: 26px 24px;
  width: min(100%, 440px); box-shadow: var(--shadow-lg); display: grid; gap: 16px; margin: auto; }
.welcome-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.welcome-close:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
.welcome-close svg { width: 18px; height: 18px; }
.welcome-brand { font-family: 'Rubik', 'Heebo', sans-serif; font-weight: 800; font-size: 26px;
  line-height: 1; letter-spacing: -.02em; color: var(--primary); }
.welcome-brand em { font-style: normal; color: var(--gold); }
.welcome-card h1 { font-size: 21px; margin: 0; }
.welcome-sub { margin: -10px 0 0; color: var(--muted); font-size: 14px; }
.welcome-field { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.welcome-field legend { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; padding: 0; margin-bottom: 2px; }
.welcome-opts { display: flex; gap: 8px; }
.welcome-areas { display: grid; gap: 6px; max-height: 190px; overflow-y: auto; padding-inline-end: 4px; }
.welcome-opt { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; font-weight: 650; font-size: 14px; }
.welcome-opt:hover { border-color: var(--primary); }
/* :has keeps the checked state on the label without any JS; browsers without it still show
   the radio itself, so the control never becomes unreadable. */
.welcome-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 8%, transparent); color: var(--primary); }
.welcome-opt input { accent-color: var(--primary); width: 17px; height: 17px; flex: none; }
.welcome-area { flex: none; }
.welcome-crest { width: 26px; height: 26px; object-fit: contain; flex: none; }
.welcome-go { width: 100%; border-radius: 14px; padding: 13px; font-size: 15px; }
.welcome-skip { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px;
  cursor: pointer; text-decoration: underline; padding: 0; justify-self: center; }
.welcome-skip:hover { color: var(--fg); }

/* honor reduced-motion: no reveal/animation, content always visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body.reveal-on .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== standalone card site — promo footer ("built with סוּק") ===== */
.site-promo { background: linear-gradient(180deg, var(--primary-deep), var(--primary-ink)); color: #fff; margin-top: 40px; padding: 32px 0; text-align: center; }
.site-promo .sp-brand { font-weight: 800; font-size: 22px; }
.site-promo .sp-brand .dot { color: var(--gold); }
.site-promo .sp-tag { opacity: .9; margin: 8px auto 16px; max-width: 46ch; line-height: 1.6; font-size: 14px; }
.site-promo .sp-cta { display: inline-block; background: var(--gold); color: var(--gold-fg); font-weight: 800; border-radius: 999px; padding: 12px 22px; font-size: 15px; }
.site-promo .sp-cta:hover { filter: brightness(1.05); }
@media (max-width: 560px) {
  .areasel.open::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 49; }
  .areasel-panel { position: fixed; inset-inline: 0; inset-block-end: 0; top: auto; width: auto; max-width: none; border-radius: 18px 18px 0 0; border-inline: 0; border-bottom: 0; }
  .areasel-list { max-height: 56vh; }
}

.cityfilter { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; box-shadow: var(--shadow); }
.cityfilter .area-ico { display: inline-flex; color: var(--primary); }
.cityfilter .area-ico svg { width: 16px; height: 16px; }
.cityfilter select { border: 0; background: transparent; color: var(--fg); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; outline: none; }

/* ===== auth (login / register) ===== */
.auth-input { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; font: inherit; margin-bottom: 10px; outline: none; }
.auth-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 1px solid var(--border); background: var(--card); color: var(--fg); border-radius: 12px; padding: 11px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.btn-google:hover { background: color-mix(in oklab, var(--primary) 6%, var(--card)); }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 14px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ===================== Events & Messages (What's New) ===================== */
.upd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.upd-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.upd-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.10); }
.upd-media { position: relative; aspect-ratio: 16 / 9; background: color-mix(in oklab, var(--primary) 8%, var(--card)); }
.upd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upd-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 44px; opacity: .55; }
.upd-kind { position: absolute; inset-inline-start: 10px; inset-block-start: 10px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: #143; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.uk-event { color: #0e6e47; } .uk-offer { color: #b06a00; } .uk-ann { color: #1f5fae; }
.upd-body { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 6px; }
.upd-title { font-weight: 800; font-size: 16px; line-height: 1.3; }
.upd-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.upd-text { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 2px 0 0; }
.upd-biz { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.upd-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.upd-empty { text-align: center; color: var(--muted); padding: 30px; border: 1px dashed var(--border); border-radius: 16px; }
/* Card-page "upcoming" variant */
.card-upd { margin: 6px 0 4px; }
.card-upd .upd-grid { grid-template-columns: 1fr; gap: 12px; }
.card-upd .upd-card { flex-direction: row; }
.card-upd .upd-media { aspect-ratio: auto; width: 110px; flex: 0 0 110px; }
.card-upd .upd-kind { font-size: 10.5px; padding: 2px 7px; }
/* Update detail page */
.upd-detail { max-width: 760px; margin: 0 auto; padding: 18px; }
.upd-detail .hero-img { width: 100%; border-radius: 18px; margin-bottom: 18px; }
.upd-detail h1 { margin: 6px 0 10px; }
.upd-detail .upd-when { display: inline-flex; gap: 8px; align-items: center; background: color-mix(in oklab, var(--primary) 10%, var(--card)); color: var(--primary); font-weight: 700; padding: 8px 14px; border-radius: 12px; margin-bottom: 14px; }

/* Follow button (card page) + notification bell + notifications page */
.btn-fav.is-following { background: color-mix(in oklab, var(--primary) 16%, var(--card)); color: var(--primary); border-color: var(--primary); }
.nb-chip { position: relative; }
.nb-badge { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 17px; height: 17px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: #e23b3b; color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 1; }
.push-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: color-mix(in oklab, var(--primary) 8%, var(--card)); border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent); border-radius: 16px; padding: 14px 18px; margin: 6px 0 16px; }
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-form { margin: 0; }
.notif { width: 100%; display: flex; align-items: center; gap: 14px; text-align: start; cursor: pointer; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; font: inherit; color: inherit; }
.notif:hover { background: color-mix(in oklab, var(--primary) 4%, var(--card)); }
.notif.unread { border-color: color-mix(in oklab, var(--primary) 45%, transparent); background: color-mix(in oklab, var(--primary) 6%, var(--card)); }
.notif-ico { font-size: 22px; flex: 0 0 auto; }
.notif-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-title { font-weight: 800; font-size: 14.5px; }
.notif-text { color: var(--muted); font-size: 13.5px; }
.notif-time { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.upd-detail .upd-bodytext { font-size: 16px; line-height: 1.8; white-space: pre-wrap; }

/* Sticky, thumb-reachable primary actions on the business card (mobile only). */
.card-actionbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: none; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--c-surface, #fff);
  border-top: 1px solid var(--c-border, rgba(0,0,0,.1)); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
.card-actionbar .cab-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; border-radius: 14px; font-weight: 800; font-size: 15px; }
.card-actionbar .cab-btn svg { width: 20px; height: 20px; }
.cab-wa { background: #25d366; color: #06331b; }
.cab-call { background: var(--c-primary, #0e8c5b); color: var(--c-primary-fg, #fff); }
.cab-nav { background: var(--c-surface, #fff); color: var(--c-text, #15241d); border: 1.5px solid var(--c-border, rgba(0,0,0,.15)); }
@media (max-width: 639px) {
  .card-actionbar { display: flex; }
  .js-card-root.has-actionbar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* Visible focus rings for keyboard users on the card's interactive controls (a11y). */
.card-actionbar .cab-btn:focus-visible, .svc-book:focus-visible, .quick a:focus-visible {
  outline: 3px solid var(--c-primary, #0e8c5b); outline-offset: 2px; }

/* Reviews & ratings (card page) */
.rev-summary { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.rev-avg { font-size: 30px; font-weight: 800; color: var(--c-primary, #0e8c5b); }
.rev-stars { color: #f5b544; letter-spacing: 2px; font-size: 20px; }
.rev-stars.sm { font-size: 14px; }
.rev-count { color: var(--c-muted, #777); font-size: 13px; }
.rev-thanks { background: var(--success-strong); color: #fff; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; font-weight: 700; }
.rev-form { border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.rev-form-row { display: flex; align-items: center; gap: 10px; }
.rev-form-row label { font-weight: 700; font-size: 14px; }
.rev-select { padding: 8px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 10px; font: inherit; }
.rev-form textarea { padding: 10px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 10px; font: inherit; resize: vertical; }
.rev-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.rev-item { border: 1px solid var(--border, rgba(0,0,0,.1)); border-radius: 14px; padding: 12px 14px; }
.rev-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rev-date { color: var(--c-muted, #999); font-size: 12px; margin-inline-start: auto; }
.rev-body { margin: 8px 0 0; line-height: 1.6; }
.rev-reply { margin-top: 10px; padding: 10px 12px; background: color-mix(in oklab, var(--c-primary, #0e8c5b) 8%, transparent); border-radius: 10px; font-size: 13.5px; }

/* ============================================================
   Homepage revamp — bright, travel-inspired hero + floating
   search + trust/feature strip.
   Everything here is scoped to `.hero-home` / new classes so the
   plain `.hero` banners on other pages are untouched.
   ============================================================ */

/* photographic hero: dark-green legibility veil over a landscape
   photo, with a solid brand gradient as a graceful fallback if the
   remote image fails to load. */
.hero-home {
  padding-top: 30px; padding-bottom: 64px;
  background:
    linear-gradient(180deg, rgba(6,52,34,.74) 0%, rgba(10,78,52,.60) 42%, rgba(9,58,39,.90) 100%),
    url("/img/hero-home.jpg") center 32% / cover no-repeat,
    linear-gradient(135deg, var(--primary), var(--primary-deep));
}
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.15fr .85fr; gap: 42px; } }

.hero-home h1 {
  font-size: 40px; line-height: 1.08; font-weight: 800; margin: 14px 0 12px;
  text-shadow: 0 2px 22px rgba(0,0,0,.28);
}
@media (min-width: 720px) { .hero-home h1 { font-size: 54px; } }
.hero-home .accent { color: var(--gold); font-style: normal; position: relative; white-space: nowrap; }
.hero-home .accent::after {
  content: ""; position: absolute; inset-inline: -2px; bottom: -6px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #f59e0b); opacity: .92;
}
.hero-lead { font-size: 17px; max-width: 46ch; opacity: .95; line-height: 1.6; margin: 0; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 16px; display: inline-flex; align-items: center; gap: 9px; }
.btn-lg svg { width: 18px; height: 18px; }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.22); }

.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.avstack { display: flex; }
.avstack span {
  width: 40px; height: 40px; border-radius: 999px; border: 2.5px solid #fff;
  margin-inline-start: -12px; box-shadow: 0 3px 8px rgba(0,0,0,.28);
}
.avstack span:first-child { margin-inline-start: 0; }
.avstack span:nth-child(1) { background: linear-gradient(135deg,#f5b544,#f59e0b); }
.avstack span:nth-child(2) { background: linear-gradient(135deg,var(--primary-glow),var(--primary)); }
.avstack span:nth-child(3) { background: linear-gradient(135deg,#38bdf8,#2563eb); }
.avstack span:nth-child(4) { background: linear-gradient(135deg,#fb7185,#be123c); }
.hero-trust .trust-text { font-size: 13.5px; opacity: .92; line-height: 1.35; }
.hero-trust .trust-text b { display: block; font-size: 18px; font-weight: 800; }

/* frosted-glass "market in numbers" card (real live counts) */
.hero-card {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 22px; padding: 22px; color: #fff; box-shadow: 0 22px 54px -20px rgba(0,0,0,.55);
}
.hc-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; background: rgba(255,255,255,.16); padding: 6px 12px; border-radius: 999px; }
.hc-eyebrow svg { width: 15px; height: 15px; color: var(--gold); }
.hc-stats { display: flex; gap: 12px; margin: 16px 0 12px; }
.hc-stats > div { flex: 1; background: rgba(255,255,255,.1); border-radius: 16px; padding: 14px 10px; text-align: center; }
.hc-stats b { display: block; font-size: 26px; font-weight: 800; line-height: 1; }
.hc-stats span { font-size: 12px; opacity: .88; }
.hc-badge { background: var(--gold); color: var(--gold-fg); font-weight: 800; font-size: 13px; text-align: center; border-radius: 12px; padding: 9px; }
.hc-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-weight: 800; font-size: 14px; color: #fff; padding: 10px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.5); }
.hc-link:hover { background: rgba(255,255,255,.12); }
.hc-link svg { width: 16px; height: 16px; }

/* Search-first hero: compact copy centered above a prominent search card. */
.hero-compact { padding-bottom: 40px; }
.hero-copy-center { text-align: center; max-width: 780px; margin: 0 auto; }
.hero-copy-center .hero-lead { margin-inline: auto; }
.hero-search { max-width: 860px; margin-inline: auto; }

/* floating search widget */
.searchcard {
  background: #fff; color: var(--fg); border-radius: 22px; padding: 16px;
  margin-top: 24px; position: relative; z-index: 2;
  box-shadow: 0 26px 60px -20px rgba(6,40,28,.55);
}
/* intent shortcuts under the search field */
.search-quick { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #eef4f1; }
.search-quick a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: var(--primary); }
.search-quick a:hover { text-decoration: underline; }
.search-quick svg { width: 16px; height: 16px; }
.search-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.stab { border: 0; background: #eef4f1; color: var(--muted); font: inherit; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background .15s, color .15s; }
.stab:hover { background: #e3ede8; }
.stab.active { background: linear-gradient(135deg, var(--primary), var(--primary-glow)); color: #fff; }
.searchcard .search { background: transparent; box-shadow: none; margin: 0; padding: 0; }
.searchcard .search .sf { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 8px; background: #eef4f1; border-radius: 14px; padding: 0 12px; }
.searchcard .search .sf svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.searchcard .search .sf input,
.searchcard .search .sf select { flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 2px; font: inherit; outline: none; }
.searchcard .search .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; }
.searchcard .search .btn-primary svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .searchcard .search { flex-direction: column; }
  .searchcard .search .sf, .searchcard .search .btn-primary { width: 100%; }
}

/* colored-icon feature / trust strip */
.features-block { padding-top: 26px; }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .features { grid-template-columns: repeat(5, 1fr); } }
.feature { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); }
.feature .fi { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.feature .fi svg { width: 22px; height: 22px; }
.feature b { display: block; font-size: 14px; }
.feature small { color: var(--muted); font-size: 12px; }
.fi-1 { background: #e8effc; color: var(--primary); }
.fi-2 { background: #e8f1ff; color: #2563eb; }
.fi-3 { background: #fdeede; color: #b45309; }
.fi-4 { background: #f2e9ff; color: #7c3aed; }
.fi-5 { background: #ffe9ee; color: #be123c; }

/* ============================================================
   Homepage — live "in numbers" stat band + browse-by-city tiles
   ============================================================ */

/* stat band: real, animated marketplace counts on a brand gradient */
.statband-block { padding-top: 6px; }
.statband {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
  background: linear-gradient(120deg, var(--primary-deep), var(--primary) 48%, var(--primary-glow));
}
@media (min-width: 720px) { .statband { grid-template-columns: repeat(6, 1fr); } }
.statband .stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 20px 10px; color: #fff; text-align: center;
  background: rgba(255, 255, 255, .04);
}
.statband .stat svg { width: 22px; height: 22px; opacity: .9; margin-bottom: 3px; color: var(--gold); }
.statband .stat b { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.statband .stat span { font-size: 12px; opacity: .9; font-weight: 600; }

/* browse-by-city tiles (real listing counts, click sets the area) */
.citytiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .citytiles { grid-template-columns: repeat(4, 1fr); } }
.citytile {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.citytile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.citytile .ct-ico { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--primary) 12%, var(--card)); color: var(--primary); }
.citytile .ct-ico svg { width: 18px; height: 18px; }
.citytile .ct-name { font-weight: 800; font-size: 16px; margin-top: 4px; }
.citytile .ct-count { color: var(--muted); font-size: 13px; font-weight: 600; }

/* ============================================================
   Design-system foundation (v2) — shared component layer
   (mirrors the Business app so both sites read as one system)
   ============================================================ */
:root {
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --ok-bg: #e9f8f0;     --ok-bd: #a9e0c5;  --ok-fg: var(--success-deep);
  --warn-bg: #fff7e6;   --warn-bd: #f5d98a; --warn-fg: #8a6400;
  --danger-bg: #fdeaea; --danger-bd: #f0a9a9; --danger-fg: #b03a3a;
  --info-bg: #eaf2ff;   --info-bd: #bcd4f5; --info-fg: #1f4e9c;
}

/* status pill (shared vocabulary) */
.status-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 3px 11px; font-size: 12px; font-weight: 700; line-height: 1.55; border: 1px solid transparent; white-space: nowrap; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .85; flex: 0 0 auto; }
.status-pill.no-dot::before { display: none; }
.status-pill.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg); }
.status-pill.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
.status-pill.danger { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-fg); }
.status-pill.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-fg); }
.status-pill.muted { background: var(--border); color: var(--muted); }
.notice-info { background: var(--info-bg); border: 1px solid var(--info-bd); color: var(--info-fg); }

/* canonical gold CTA — replaces the inline gold button repeated across the header/PWA */
.btn-gold { display: inline-flex; align-items: center; gap: 7px; background: var(--gold); color: var(--gold-fg);
  border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 13px; padding: 8px 15px; transition: filter .15s; }
.btn-gold:hover { filter: brightness(1.05); }
.btn-gold svg { width: 16px; height: 16px; }

/* shared empty state (warmer than a bare muted line) */
.empty-state { text-align: center; padding: 44px 20px; color: var(--muted);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.empty-state .es-ico { width: 62px; height: 62px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--primary) 10%, var(--card)); color: var(--primary); margin-bottom: 12px; }
.empty-state .es-ico svg { width: 30px; height: 30px; }
.empty-state h3 { font-size: 18px; margin: 0 0 4px; color: var(--fg); }
.empty-state p { margin: 0 auto 16px; max-width: 44ch; font-size: 14px; line-height: 1.6; }

/* Alternating full-bleed section band — breaks the endless same-bg scroll.
   THIS WAS THE HORIZONTAL SCROLL. It used `width: 100vw` with a negative inline inset to
   bleed past the container. But 100vw includes the scrollbar gutter, so on any page tall
   enough to scroll, the band was ~15px wider than the content area and dragged the whole
   document sideways — worst in RTL, where the overflow lands on the leading edge.
   No viewport units needed: .block is already a full-width section (only the .container
   inside it is constrained), so inset:0 covers exactly the right area, scrollbar or not. */
.block.alt { position: relative; }
.block.alt::before { content: ""; position: absolute; inset: 0;
  background: color-mix(in oklab, var(--primary) 4%, var(--bg)); z-index: 0; }
.block.alt > * { position: relative; z-index: 1; }

/* category tile hierarchy: a hero tile that anchors the grid */
.cats .cat.cat-lg { grid-column: span 2; min-height: 168px; }
@media (min-width: 720px) { .cats .cat.cat-lg { grid-column: span 2; grid-row: span 2; min-height: 100%; } }
.cats .cat.cat-lg .name { font-size: 22px; }
.cat .cat-photo { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; z-index: 0; opacity: .34; }
.cat > * { position: relative; z-index: 1; }

/* intermediate type step — lifts card titles / section subheads off the 12-14px band */
.title-md { font-size: 16px; font-weight: 700; line-height: 1.3; }
.head .head-sub { color: var(--muted); font-size: 13.5px; font-weight: 500; margin: 2px 0 0; }

/* ============================================================
   Global keyboard-focus indicator (a11y — WCAG 2.4.7 / 2.4.11).
   Placed last and marked !important so it wins over the various
   `outline:none` resets scattered through this sheet. currentColor
   tracks the visible text, so the ring stays legible on both the
   light pages and the green header. Only shows for keyboard users
   (:focus-visible), never on mouse click.
   ============================================================ */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px;
}

/* ============================================================
   SOS — live "available doctor now" (emergency discovery)
   ============================================================ */
/* Header nav pill + mobile bottom-nav SOS accent */
.nav-sos { background: #e0362c; color: #fff !important; border-radius: 999px; padding: 6px 14px !important; font-weight: 800; }
.nav-sos:hover { background: #c02a22; }
.bottomnav .bn-sos i { color: #e0362c; }
.bottomnav .bn-sos span { color: #e0362c; font-weight: 900; }
.bottomnav .bn-sos.active i, .bottomnav .bn-sos.active span { color: #c02a22; }

/* Home CTA — SOS button */
.btn-near.sos { background: #e0362c; color: #fff; }
.btn-near.sos:hover { background: #c02a22; }

/* SOS page hero */
.sos-hero { background: linear-gradient(135deg, #e0362c, #b02015); color: #fff; padding: 34px 0 30px; }
.sos-hero h1 { margin: 8px 0 6px; font-size: clamp(24px, 4vw, 34px); }
.sos-hero p { opacity: .95; }
.sos-mark, .sos-hero .sos-mark { display: inline-block; background: #fff; color: #e0362c; font-weight: 900; border-radius: 8px; padding: 0 8px; letter-spacing: 1px; }
.sos-locate { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #b02015; border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 800; font-size: 14px; cursor: pointer; }
.sos-locate svg { width: 18px; height: 18px; }

/* SOS result badge — strong green "available now" */
.sos-badge, .near-badge.sos-badge { background: var(--success); }
.sos-card { border-color: #bfe6d3; }

/* Owner-only live-availability toggle on the public card page */
.live-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  max-width: 460px; margin: 16px auto 0; padding: 12px 16px; border-radius: 16px;
  border: 1px solid var(--c-line, #e5e7eb); background: var(--c-surface, #fff); }
.live-toggle.on { border-color: #9be0c2; background: color-mix(in oklab, var(--success) 6%, transparent); }
.live-toggle .lt-state { display: flex; flex-direction: column; line-height: 1.2; }
.live-toggle .lt-state b { font-weight: 900; }
.live-toggle.on .lt-state b { color: var(--success); }
.live-toggle .lt-state small { color: var(--c-muted, #6b7280); font-size: 12px; }
.live-toggle .lt-btn { border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 800; font-size: 14px; cursor: pointer; color: #fff; }
.live-toggle.off .lt-btn { background: var(--success); }
.live-toggle.on .lt-btn { background: #b03a3a; }