/* =========================================================
   Stage 3: settings hub, tap-to-pick time, the business site and its themes
   ========================================================= */

[hidden] { display: none !important; }

/* ---------- Pickers ---------- */
select.tsel { width: auto; min-width: 92px; min-height: 40px; padding: 6px 10px; font-variant-numeric: tabular-nums; text-align: center; font-weight: 600; }
.hrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hrow > span { color: var(--mute); font-size: 13px; font-weight: 600; }
.ic-btn.sm { width: 32px; height: 32px; border-radius: 10px; }
.ic-btn.sm svg { width: 16px; height: 16px; }
.pick { background: var(--soft); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pick-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pick .days { margin: 0 -12px; padding: 2px 12px 6px; }
.pick h4 { margin: 4px 0 0; font-size: 13px; color: var(--mute); }
.day.sm { width: 54px; padding: 5px 0; border-radius: 13px; }
.day.sm b { font-size: 18px; }
.day.sm small { font-size: 11px; }
.slots.sm { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.slots.sm .slot { height: 40px; font-size: 15px; }
.slot.on { background: var(--acc); color: var(--ink-on-acc, var(--acc-ink)); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 35%, transparent); }
.pick-x { display: flex; justify-content: flex-start; }
.ap-buf { position: absolute; inset-inline: 7px; border-radius: 0 0 8px 8px; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 18%, transparent) 0 4px, transparent 4px 8px); pointer-events: none; z-index: 0; }
.ap.rep::after { content: '↻'; position: absolute; top: 3px; inset-inline-end: 6px; font-size: 11px; color: var(--mute); }
.center { text-align: center; }

/* ---------- Settings hub ---------- */
.set-link { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 14%, var(--card)), var(--card)); }
.sl-top { display: flex; align-items: center; gap: 12px; }
.sl-top b { display: block; font-size: 17px; }
.sl-top code { font-size: 12.5px; color: var(--mute); }
/* The terms' tick before the first booking (and in opening an account), and the separate marketing opt-in. */
.bk-agree, .auth-agree { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 4px; font-size: 14px; line-height: 1.5; }
.bk-agree input, .auth-agree input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--acc); }
.bk-agree.mkt { color: var(--mute); margin-top: 2px; margin-bottom: 10px; }
.bk-agree small { display: block; font-size: 12px; }
.set-g { margin: 22px 6px 8px; font-size: 13px; color: var(--mute); font-weight: 700; letter-spacing: .3px; }
.set-list { padding: 4px; }
.set-list + .set-list { margin-top: 0; }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border: 0; background: none; border-radius: 14px; text-align: start; color: var(--ink); }
.set-row:hover { background: var(--soft); }
.set-row + .set-row { border-top: 1px solid var(--line); border-radius: 0; }
.set-row + .set-row:hover { border-radius: 14px; }
.set-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accs); color: var(--acc-tx, var(--acc)); flex: none; }
.set-ic svg { width: 20px; height: 20px; }
.set-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-tx b { font-size: 15.5px; }
.set-tx small { color: var(--mute); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-go { color: var(--mute); display: grid; }
.set-go svg { width: 18px; height: 18px; }

/* Hours editor */
.hdays { display: flex; flex-direction: column; gap: 8px; }
.hday { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); overflow: hidden; transition: border-color .15s; }
.hday.open { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.hday-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.hday-top .sw { grid-row: auto; }
.hday-name { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border: 0; background: none; padding: 4px 0; color: var(--ink); text-align: start; }
.hday-name b { font-size: 15.5px; }
.hday-name small { color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.hday.off .hday-name b { color: var(--mute); }
.hday-body { display: none; padding: 4px 12px 12px; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 12px; }
.hday.open .hday-body { display: flex; }
.hday-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hday-acts .chip svg { width: 15px; height: 15px; margin-inline-end: 2px; }
.hrow.st { padding: 6px 0; border-bottom: 1px solid var(--line); }
.hrow.st .sw { grid-row: auto; min-width: 74px; }
.hrow.st.dim { opacity: .45; }

/* Special days */
.sd { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; background: var(--bg); }
.sd.closed { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.sd.short { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.sd-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sd-h small { color: var(--mute); font-size: 13px; }
.sd-seg { align-self: stretch; display: flex; }
.sd-seg button { flex: 1; padding: 7px 4px; font-size: 13.5px; }
.sd.closed .sd-seg button.on { color: var(--bad); }
#sdays h4 { margin: 14px 0 8px; color: var(--mute); font-size: 13px; }
.mv-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mv-cmp > div { background: var(--soft); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.mv-cmp small { color: var(--mute); }
.mv-cmp s { color: var(--mute); }
.chips.tok .chip { min-height: 30px; font-size: 13px; padding: 0 10px; }

/* Page settings */
.pg-set h4 { margin: 10px 0 0; font-size: 14px; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.theme { border: 2px solid var(--line); border-radius: 16px; padding: 8px; background: var(--card); display: flex; flex-direction: column; gap: 6px; align-items: stretch; color: var(--ink); font-size: 13px; }
.theme.on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accs); }
.th-prev { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: 54px; border-radius: 10px; overflow: hidden; }
.th-prev i:first-child { grid-row: span 2; }
.th-prev.th-violet i:nth-child(1) { background: linear-gradient(135deg, #6d5efc, #a35cf2); } .th-prev.th-violet i:nth-child(2) { background: #f5f4fa; } .th-prev.th-violet i:nth-child(3) { background: #fff; }
.th-prev.th-noir i:nth-child(1) { background: linear-gradient(135deg, #1b1720, #0f0d12); } .th-prev.th-noir i:nth-child(2) { background: #d4a95a; } .th-prev.th-noir i:nth-child(3) { background: #25212b; }
.th-prev.th-blush i:nth-child(1) { background: linear-gradient(135deg, #f6c1c9, #e2728c); } .th-prev.th-blush i:nth-child(2) { background: #fff6f5; } .th-prev.th-blush i:nth-child(3) { background: #fff; }
.th-prev.th-ocean i:nth-child(1) { background: linear-gradient(135deg, #0e9aa7, #5fd3c7); } .th-prev.th-ocean i:nth-child(2) { background: #effbfb; } .th-prev.th-ocean i:nth-child(3) { background: #fff; }
.th-prev.th-forest i:nth-child(1) { background: linear-gradient(135deg, #2f7d5b, #a7c9a0); } .th-prev.th-forest i:nth-child(2) { background: #f3f6f1; } .th-prev.th-forest i:nth-child(3) { background: #fff; }
.th-prev.th-sand i:nth-child(1) { background: linear-gradient(135deg, #a8713f, #e3c9a6); } .th-prev.th-sand i:nth-child(2) { background: #faf6f0; } .th-prev.th-sand i:nth-child(3) { background: #fff; }
.th-prev.th-mono i:nth-child(1) { background: linear-gradient(135deg, #111, #444); } .th-prev.th-mono i:nth-child(2) { background: #fff; } .th-prev.th-mono i:nth-child(3) { background: #eee; }
.colors.acc button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; padding: 2px; background: none; }
.colors.acc button.on { border-color: var(--ink); }
.colors.acc i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 700; }
.colors.acc i.auto { background: conic-gradient(#6d5efc, #e2728c, #0e9aa7, #d4a95a, #6d5efc); color: #fff; }
.cover-prev { height: 140px; border-radius: 16px; background: var(--img) center/cover, var(--soft); }
.cover-prev.empty { display: grid; place-items: center; color: var(--mute); font-size: 13px; text-align: center; padding: 10px; border: 2px dashed var(--line); background: none; }
.cover-set, .logo-set { display: flex; flex-direction: column; gap: 8px; }
.logo-set { flex-direction: row; align-items: center; gap: 14px; }
.gal-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.g-it, .g-add { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.g-it img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--soft); }
.g-x { position: absolute; top: 4px; inset-inline-end: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; padding: 0; }
.g-x svg { width: 14px; height: 14px; }
.g-add { border: 2px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--mute); cursor: pointer; font-size: 12.5px; }
label.btn { cursor: pointer; position: relative; }
/* A file input inside its label: out of sight but still in the tab order, and the label shows the focus. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: -1px; padding: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; }
label.btn:focus-within, .g-add:focus-within { outline: 2px solid var(--acc); outline-offset: 2px; }
.logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.logo:has(.logo-img) { background: var(--card); box-shadow: 0 0 0 1px var(--line); }

/* =========================================================
   The business site (public). Themes set --acc etc. on <html class="public th-*">
   ========================================================= */
html.public { --font-h: var(--font); --hero-a: #6b5cf8; --hero-b: #8c4fd6; --site-r: 22px; }
/* Light designs keep light-page status colors even when the phone is in dark mode (the root's dark ones were for dark pages). */
html.public:is(.th-blush, .th-ocean, .th-forest, .th-sand, .th-mono) { --ok: #13794a; --oks: #e3f6ec; --warn: #9a5b00; --warns: #fdf1dc; --bad: #b8233a; --bads: #fde8eb; --on-bad: #fff; }
html.public.th-noir { color-scheme: dark; --bg: #0d0c10; --card: #17151b; --soft: #211e26; --ink: #f6efe4; --mute: #a59c90; --line: #2c2832; --accs: #2b2418; --hero-a: #1b1720; --hero-b: #3a2e1c; --font-h: 'Frank Ruhl Libre', serif;
  --ok: #3cc785; --oks: #12301f; --warn: #f0a842; --warns: #35270e; --bad: #ff6b7f; --bads: #3a1820; --on-bad: #2b0a10; /* status colors for a dark page */ }
html.public.th-noir:not([style*="--acc"]) { --acc: #d4a95a; }
html.public.th-blush { color-scheme: light; --bg: #fff7f6; --card: #fff; --soft: #fdecec; --ink: #3a2328; --mute: #7e6066; --line: #f4dfe1; --accs: #fde3e9; --hero-a: #b84a6a; --hero-b: #93385a; --font-h: 'Frank Ruhl Libre', serif; }
html.public.th-blush:not([style*="--acc"]) { --acc: #d65f7c; }
html.public.th-ocean { color-scheme: light; --bg: #f0fafa; --card: #fff; --soft: #e2f4f4; --ink: #10313a; --mute: #506e75; --line: #d5ebec; --accs: #d8f2f1; --hero-a: #0b7d88; --hero-b: #0e6b70; --font-h: 'Rubik', sans-serif; }
html.public.th-ocean:not([style*="--acc"]) { --acc: #087680; }
html.public.th-forest { color-scheme: light; --bg: #f3f6f1; --card: #fff; --soft: #e7eee3; --ink: #1f2d24; --mute: #5d6c61; --line: #dfe7da; --accs: #e0eedf; --hero-a: #2f7d5b; --hero-b: #3f6e3a; --font-h: 'Frank Ruhl Libre', serif; }
html.public.th-forest:not([style*="--acc"]) { --acc: #2f7d5b; }
html.public.th-sand { color-scheme: light; --bg: #faf6f0; --card: #fffdf9; --soft: #f2e9dc; --ink: #3a2c20; --mute: #766352; --line: #ece1d1; --accs: #f3e5d2; --hero-a: #9a6236; --hero-b: #7a5530; --font-h: 'Frank Ruhl Libre', serif; }
html.public.th-sand:not([style*="--acc"]) { --acc: #a0652f; }
html.public.th-mono { color-scheme: light; --bg: #f6f6f6; --card: #fff; --soft: #efefef; --ink: #111; --mute: #696969; --line: #e4e4e4; --accs: #eee; --hero-a: #111; --hero-b: #3a3a3a; --font-h: 'Rubik', sans-serif; --site-r: 10px; }
html.public.th-mono:not([style*="--acc"]) { --acc: #111; }
html.public.th-violet:not([style*="--acc"]) { --acc: #5b4cf0; }
html.public body { background: var(--bg); }
html.public .logo { background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #fff)); }

.site { max-width: 760px; margin: 0 auto; min-height: 100vh; padding-bottom: 96px; }
.site .owner-bar { padding: 10px 16px; position: relative; z-index: 3; }
.hero { position: relative; margin: 0 0 0; min-height: 360px; display: flex; align-items: flex-end; justify-content: center; text-align: center; color: #fff; overflow: hidden; border-radius: 0 0 32px 32px; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 85% 0%, var(--hero-b) 0%, transparent 55%), linear-gradient(160deg, var(--hero-a), var(--hero-b)); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.2px); background-size: 18px 18px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.hero.has-img .hero-bg { background: var(--img) center/cover; transform: scale(1.02); }
.hero.has-img .hero-bg::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .72) 100%); mask: none; }
.hero-in { padding: 64px 20px 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.hero-logo { width: 92px; height: 92px; border-radius: 28px; font-size: 42px; box-shadow: 0 12px 34px rgba(0, 0, 0, .28); border: 3px solid rgba(255, 255, 255, .9); background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #fff)); }
.hero h1 { font: 800 clamp(30px, 7vw, 44px)/1.1 var(--font-h); letter-spacing: -.5px; margin-top: 6px; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
html.th-noir .hero h1, html.th-blush .hero h1, html.th-forest .hero h1, html.th-sand .hero h1 { font-weight: 900; letter-spacing: 0; }
.hero-sub { margin: 0; opacity: .92; font-size: 15.5px; }
.hero .open { background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(8px); display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; }
.hero .open i { width: 8px; height: 8px; border-radius: 50%; background: #ffb4b4; }
.hero .open.on i { background: #5ff0a5; box-shadow: 0 0 0 4px rgba(95, 240, 165, .25); }
.hero-cta { margin-top: 10px; min-width: 210px; background: #fff; color: #111; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
html.public .hero .btn.hero-cta { background: #fff; color: var(--acc-on-white, var(--acc)); }
html.public.th-noir .hero .btn.hero-cta { background: var(--acc); color: var(--ink-on-acc, #120f0a); }
.quick-row { display: flex; justify-content: center; gap: 10px; padding: 0 16px; margin: -26px auto 0; position: relative; z-index: 2; flex-wrap: wrap; }
.quick-row .q { background: var(--card); box-shadow: var(--sh); min-width: 72px; padding: 11px 8px; border-radius: 18px; }
.site-main { padding: 6px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.s-block { padding: 18px 0 6px; }
.s-block h2 { font: 800 22px/1.2 var(--font-h); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.s-block h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to left, var(--line), transparent); }
.svc-grid { display: flex; flex-direction: column; gap: 10px; }
.svc2 { display: flex; align-items: center; gap: 14px; text-align: start; padding: 16px 18px; border-radius: var(--site-r); border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .03); transition: transform .12s, box-shadow .15s, border-color .15s; position: relative; overflow: hidden; }
.svc2::before { content: ''; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.svc2:hover { border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); box-shadow: var(--sh); transform: translateY(-1px); }
.svc2:active { transform: scale(.99); }
.svc2-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.svc2-t b { font-size: 17px; }
.svc2-t small { color: var(--mute); font-size: 13.5px; line-height: 1.4; }
.svc2-t em { font-style: normal; color: var(--mute); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.svc2-t em svg { width: 14px; height: 14px; }
.svc2-p { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.svc2-p b { font-size: 17px; font-variant-numeric: tabular-nums; }
.svc2-p i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--acc-tx, var(--acc)); background: var(--accs); padding: 4px 10px 4px 6px; border-radius: 99px; display: inline-flex; align-items: center; gap: 2px; }
.svc2-p i svg { width: 14px; height: 14px; }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 6px; border-radius: var(--site-r); overflow: hidden; }
.gal.few { grid-template-columns: repeat(2, 1fr); }
.gal.few .gal-it:first-child { grid-column: auto; grid-row: auto; }
.gal-it { padding: 0; border: 0; aspect-ratio: 1; overflow: hidden; background: var(--soft); }
.gal-it:first-child { grid-column: span 2; grid-row: span 2; }
.gal-it img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.gal-it:hover img { transform: scale(1.04); }
.s-about p { margin: 0; font-size: 16px; line-height: 1.7; white-space: pre-line; }
.team { display: flex; gap: 18px; flex-wrap: wrap; }
.mate { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; }
.mate .av.lg { width: 64px; height: 64px; font-size: 24px; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px color-mix(in srgb, var(--acc) 35%, transparent); }
.hours-tbl { background: var(--card); border: 1px solid var(--line); border-radius: var(--site-r); overflow: hidden; }
.hours-tbl > div { display: flex; justify-content: space-between; padding: 11px 16px; font-size: 15px; }
.hours-tbl > div + div { border-top: 1px solid var(--line); }
.hours-tbl .today { background: var(--accs); font-weight: 700; }
.hours-tbl em { font-style: normal; font-size: 12px; color: var(--acc-tx, var(--acc)); margin-inline-start: 6px; }
.hours-tbl b { font-variant-numeric: tabular-nums; font-weight: 600; }
.closures { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13.5px; color: var(--mute); }
.s-loc p { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.s-loc p svg { color: var(--acc-tx, var(--acc)); flex: none; }
.s-policy p, .policy { margin: 0; padding: 12px 14px; background: var(--soft); border-radius: 14px; font-size: 14px; }
.my-up .card { padding: 4px 8px; }
.cta-bar { position: fixed; bottom: 0; inset-inline: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); z-index: 10; display: flex; justify-content: center; }
.cta-bar .btn { max-width: 560px; }
html.public .btn.pri { background: var(--acc); }
html.th-noir .btn.pri { color: var(--ink-on-acc, #120f0a); }
.site .bk-foot { margin-top: 26px; }
@media (min-width: 760px) { .hero { border-radius: 0 0 40px 40px; min-height: 420px; } .svc-grid { display: grid; grid-template-columns: 1fr 1fr; } .gal { grid-template-columns: repeat(4, 1fr); } }

/* Booking steps inside the site */
.mini-h { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.mini-h .logo { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
.mini-h b { font: 700 17px var(--font-h); }
.steps-view .site-main { padding-top: 10px; }
.steps-view .steps { margin: 12px 0 14px; }
.picked { border-inline-start: 4px solid var(--c, var(--acc)); }
.first-free { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--line)); background: linear-gradient(135deg, var(--accs), var(--card)); color: var(--ink); text-align: start; }
.first-free > svg:first-child { color: var(--acc-tx, var(--acc)); width: 26px; height: 26px; flex: none; }
.first-free span { flex: 1; display: flex; flex-direction: column; font-size: 13px; color: var(--mute); }
.first-free b { font-size: 16.5px; color: var(--ink); }
.first-free > svg:last-child { color: var(--acc-tx, var(--acc)); }
.lb { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lb-img img { max-width: 100%; max-height: 72vh; border-radius: 16px; display: block; }
.lb-nav { display: flex; align-items: center; gap: 16px; color: var(--mute); }
.sheet-card.wide { max-width: 860px; }

/* ---------- AI assistant ---------- */
.ai-fab { position: fixed; bottom: calc(146px + env(safe-area-inset-bottom)); inset-inline-start: 18px; height: 46px; padding: 0 16px 0 14px; border-radius: 99px; border: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5b4cf0, #8e44c9 60%, #c2366b); box-shadow: 0 10px 28px rgba(123, 109, 255, .45); z-index: 19; }
.ai-fab svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .ai-fab { bottom: 28px; inset-inline-start: 28px; height: 52px; padding: 0 20px 0 16px; } }
.ai { display: flex; flex-direction: column; gap: 10px; height: min(78vh, 720px); }
.ai-h { display: flex; align-items: center; gap: 12px; padding-inline-end: 40px; }
.ai-h div { flex: 1; display: flex; flex-direction: column; }
.ai-h small { color: var(--mute); font-size: 13px; }
.ai-badge { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #5b4cf0, #8e44c9 60%, #c2366b); flex: none; }
.ai-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; overscroll-behavior: contain; }
.ai-empty { margin: auto 0; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ai-empty p { font: 700 20px var(--font); margin: 0; }
.ai-empty .chips { justify-content: center; }
.ai-m { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.55; }
.ai-m p { margin: 0 0 4px; } .ai-m p:last-child { margin: 0; }
.ai-m ul { margin: 4px 0; padding-inline-start: 18px; }
.ai-m.me { align-self: flex-start; background: var(--acc); color: var(--ink-on-acc, var(--acc-ink)); border-end-start-radius: 6px; }
.ai-m.bot { align-self: flex-end; background: var(--soft); border-end-end-radius: 6px; }
.ai-m.err { align-self: center; background: var(--bads); color: var(--bad); font-size: 14px; }
.ai-tool { align-self: flex-end; font-size: 12.5px; color: var(--mute); display: flex; align-items: center; gap: 4px; }
.ai-tool svg { width: 14px; height: 14px; }
.ai-ask { align-self: stretch; border: 1px solid color-mix(in srgb, var(--acc) 40%, var(--line)); background: var(--accs); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ai-ask b { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--acc-tx, var(--acc)); }
.ai-ask b svg { width: 16px; height: 16px; }
.ai-ask p { margin: 0; font-weight: 600; }
.ai-ask.done { opacity: .7; background: var(--soft); border-color: var(--line); }
.ai-ask small { color: var(--mute); }
.typing { display: flex; gap: 4px; padding: 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ai-in { display: flex; gap: 8px; align-items: center; }
.ai-in input { flex: 1; border-radius: 99px !important; padding-inline: 18px !important; }
.ic-btn.pri { background: var(--acc); color: var(--ink-on-acc, var(--acc-ink)); border-color: transparent; width: 46px; height: 46px; border-radius: 50%; }
.note-box.sm { font-size: 13px; margin: 0; }

/* ---------- Getting started, share kit ---------- */
.setup { margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(135deg, var(--accs), var(--card) 70%); }
.setup header { display: flex; justify-content: space-between; align-items: flex-start; }
.setup header div { display: flex; flex-direction: column; }
.setup header b { font-size: 17px; }
.setup header small { color: var(--mute); font-size: 13px; }
.setup-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.setup-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), #a35cf2); border-radius: 99px; transition: width .4s; }
.setup-list { display: flex; gap: 8px; flex-wrap: wrap; }
.setup-it { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; }
.setup-it span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; }
.setup-it.ok { color: var(--mute); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--mute) 50%, transparent); }
.setup-it.ok span { background: var(--ok); border-color: var(--ok); color: #fff; }
.setup-it.ok span svg { width: 13px; height: 13px; stroke-width: 3; }
/* The share kit and the business's QR code (extras.js, 2026-11-10): a card as it looks printed, always on white. */
.kit { align-items: center; text-align: center; }
.kit-card { margin: 0; width: min(100%, 320px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 18px 16px; border-radius: 28px; background: #fff; color: #17152b; box-shadow: 0 10px 30px rgba(23, 21, 43, .12), 0 0 0 1px rgba(23, 21, 43, .06); position: relative; overflow: hidden; }
.kit-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--qa, var(--acc)); }
.kit-card figcaption { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.kit-card figcaption b { font-size: 19px; font-weight: 800; color: #17152b; overflow-wrap: anywhere; }
.kit-card figcaption span { font-size: 14px; color: #5c5975; font-weight: 600; }
.kit-qr { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.kit-qr canvas { width: 100%; height: 100%; display: block; }
.kit-url { font-size: 13px; color: #5c5975; background: #f3f2f8; padding: 6px 12px; border-radius: 99px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-fix { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ok) 12%, var(--card)); color: var(--ink); font-size: 13.5px; line-height: 1.45; text-align: start; width: 100%; }
.kit-fix svg { width: 18px; height: 18px; color: var(--ok); flex: none; stroke-width: 2.4; margin-top: 1px; }
.kit-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.kit-dl .btn.pri { grid-column: span 2; min-height: 52px; font-size: 16.5px; }
.kit-dl .btn svg { width: 19px; height: 19px; }
.kit-h { align-self: stretch; margin: 10px 0 0; font-size: 15px; text-align: start; color: var(--mute); }
.kit-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; width: 100%; }
.kit-acts .btn { padding-inline: 8px; }
.kit .note-box { text-align: start; width: 100%; }
@media (max-width: 340px) { .kit-acts { grid-template-columns: 1fr 1fr; } .kit-acts .btn:last-child { grid-column: span 2; } }
.steps-ol { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; }
.legal-foot { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; margin-top: 8px; }
.legal-foot a { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Page notice ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: var(--site-r, 18px); background: linear-gradient(135deg, var(--accs), var(--card)); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--line)); }
.notice span { color: var(--acc-tx, var(--acc)); flex: none; display: grid; }
.notice p { margin: 0; white-space: pre-line; line-height: 1.65; font-size: 15px; }

/* ---------- Hero with a cover photo: the photo as a banner, the profile picture overlapping its edge ---------- */
.hero.has-img { display: block; min-height: 0; border-radius: 0; color: var(--ink); text-align: center; overflow: visible; }
.hero.has-img .hero-bg { position: relative; inset: auto; z-index: 0; height: clamp(200px, 56vw, 340px); border-radius: 0 0 30px 30px; transform: none; background: var(--img) center/cover, var(--soft); }
.hero.has-img .hero-bg::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, .35)); border-radius: inherit; }
.hero.has-img .hero-in { padding: 0 20px 26px; margin-top: -62px; position: relative; z-index: 1; }
.hero.has-img .hero-logo { width: 116px; height: 116px; border-radius: 50%; border: 4px solid var(--bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.hero.has-img h1 { text-shadow: none; color: var(--ink); }
.hero.has-img .hero-sub { color: var(--mute); opacity: 1; }
.hero.has-img .open { background: var(--soft); color: var(--mute); backdrop-filter: none; }
.hero.has-img .open.on { color: var(--ok); }
html.public .hero.has-img .btn.hero-cta { background: var(--acc); color: var(--ink-on-acc, var(--acc-ink)); box-shadow: 0 10px 28px color-mix(in srgb, var(--acc) 40%, transparent); }
html.public.th-noir .hero.has-img .btn.hero-cta { color: #120f0a; }
.hero.has-img + .quick-row { margin-top: 4px; }
.gal-it { position: relative; }
.gal-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font: 800 26px var(--font); backdrop-filter: blur(1px); }
.s-block h2 small { font: 500 13px var(--font); margin-inline-start: 4px; }

/* ---------- WhatsApp fallback, Google rating ---------- */
.wa-msg { background: var(--soft); border-radius: 16px 16px 4px 16px; padding: 12px 14px; font-size: 15px; line-height: 1.6; border-inline-start: 4px solid #25d366; }
html .wa-fb .btn.pri, html.public.th-noir .wa-fb .btn.pri { background: #25d366; color: #fff; box-shadow: 0 8px 20px rgba(37, 211, 102, .35); }
.rating { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.rating .stars { color: #f5b301; letter-spacing: 1px; }
.rating small { color: var(--mute); font-weight: 500; }

/* ---------- Slot chooser, week grid, heatmap ---------- */
.chooser { gap: 8px; }
.ch-it { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-align: start; }
.ch-it:hover { border-color: var(--acc); }
.ch-it > svg { width: 22px; height: 22px; color: var(--acc-tx, var(--acc)); flex: none; }
.ch-it span { display: flex; flex-direction: column; }
.ch-it small { color: var(--mute); }
.wkg .cal-heads { grid-template-columns: 52px repeat(7, 1fr); }
.wkg-h { flex-direction: column; justify-content: center; border: 0; background: none; color: var(--ink); gap: 0; padding: 8px 0; }
.wkg-h small { color: var(--mute); font-weight: 500; }
.wkg-h b { font-size: 18px; }
.wkg-h.today b { color: var(--ink-on-acc, var(--acc-ink)); background: var(--acc); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; }
.ap.mini { padding: 1px 6px; font-size: 11.5px; border-inline-start-width: 3px; justify-content: center; }
.ap.mini b { font-weight: 600; font-size: 11.5px; }
.heat { margin-top: 14px; }
.heat-g { display: grid; grid-template-columns: 26px repeat(var(--c), minmax(0, 1fr)); gap: 3px; margin-top: 10px; direction: ltr; } /* the hours run left to right, as the chart above */
.heat-g small { text-align: center; font-size: 10.5px; color: var(--mute); }
.heat-g b { font-size: 12px; color: var(--mute); display: grid; place-items: center; }
.heat-g i { aspect-ratio: 1; border-radius: 5px; background: color-mix(in srgb, var(--acc-tx, var(--acc)) calc(var(--v) * 85% + 6%), var(--soft)); font-style: normal; font-size: 10px; display: grid; place-items: center; color: color-mix(in srgb, #fff calc(var(--v) * 100%), var(--mute)); }
.heat-g i { aspect-ratio: auto; height: 30px; }
@media (max-width: 600px) { .heat-g i { height: 24px; font-size: 9px; } }

/* ---------- Support chat with Tormate's team (js/support.js, 2026-11-09) ---------- */
/* Above the page (sheets are 50), under the toasts (60); a screenshot opened from the chat comes above it. */
.sup { position: fixed; inset: 0; z-index: 55; display: none; background: color-mix(in srgb, #000 40%, transparent); }
.sup.on { display: flex; justify-content: center; align-items: stretch; }
body.sup-on { overflow: hidden; }
body.sup-on .sheet { z-index: 58; }
.sup-card { width: 100%; max-width: 560px; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; height: 100vh; height: 100dvh; box-shadow: var(--sh-lg); }
@media (min-width: 700px) { .sup.on { align-items: center; padding: 24px; } .sup-card { height: min(86vh, 820px); border-radius: var(--r); overflow: hidden; } }
.sup-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--card); border-bottom: 1px solid var(--line); }
.sup-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accs); color: var(--acc-tx, var(--acc)); font-weight: 800; font-size: 17px; flex: none; overflow: hidden; }
.sup-av img { width: 34px; height: 34px; }
.sup-av.sm { width: 34px; height: 34px; font-size: 15px; }
.sup-av svg { width: 20px; height: 20px; }
.sup-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sup-who b { font-size: 16px; }
.sup-who small { color: var(--mute); font-size: 12.5px; display: flex; align-items: center; gap: 6px; line-height: 1.35; }
.sup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); flex: none; }
.sup-dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--oks); }
.sup-hum { white-space: nowrap; }
.sup-hum[disabled] { opacity: .7; }
/* Back to the assistant (2026-11-10): the same button, in the assistant's colors, and a link under "נציג יענה כאן". */
.sup-hum.bot { background: var(--accs); border-color: transparent; color: var(--acc-tx, var(--acc)); }
/* (hours like 9:00–19:00 never break in the middle) */
.sup-h bdi, .sup-sys bdi { white-space: nowrap; }
.sup-back { display: inline; margin-inline-start: 4px; font-size: 13px; font-weight: 700; }
.sup-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; overscroll-behavior: contain; }
.sup-m { max-width: 86%; display: flex; flex-direction: column; gap: 2px; }
.sup-m.me { align-self: flex-start; align-items: flex-start; }
.sup-m.a, .sup-m.b, .sup-m.u { align-self: flex-end; align-items: flex-end; }
.sup-bub { padding: 9px 13px; border-radius: 18px; font-size: 15px; line-height: 1.55; background: var(--card); border: 1px solid var(--line); overflow-wrap: anywhere; }
.sup-bub span { display: block; }
.sup-m.me .sup-bub { background: var(--acc); color: var(--acc-ink); border-color: transparent; border-end-start-radius: 6px; }
.sup-m.me .sup-bub a { color: inherit; text-decoration: underline; }
.sup-m:not(.me) .sup-bub { border-end-end-radius: 6px; }
.sup-m.b .sup-bub { background: var(--soft); }
.sup-m.b.intro .sup-bub { background: var(--card); }
.sup-m.pend { opacity: .72; }
.sup-by { font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 4px; padding-inline: 6px; }
.sup-by svg { width: 14px; height: 14px; }
.sup-t { font-size: 11.5px; color: var(--mute); padding-inline: 6px; }
.sup-sys { align-self: center; text-align: center; font-size: 13px; color: var(--mute); background: var(--soft); border-radius: 12px; padding: 6px 12px; margin: 4px 0; max-width: 92%; }
.sup-day { align-self: center; font-size: 12px; color: var(--mute); margin: 8px 0 2px; }
.sup-day span { background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.sup-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.sup-img { display: block; border: 0; padding: 0; background: none; border-radius: 12px; overflow: hidden; margin-bottom: 4px; max-width: 220px; cursor: zoom-in; }
.sup-img img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover; }
.sup-img-ph { display: grid; place-items: center; width: 160px; height: 110px; background: var(--soft); font-size: 28px; }
.sup-typing { display: flex; gap: 4px; padding: 13px 14px; }
.sup-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: blink 1.2s infinite; }
.sup-typing i:nth-child(2) { animation-delay: .2s; } .sup-typing i:nth-child(3) { animation-delay: .4s; }
.sup-rate { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin: 6px 0; }
.sup-rate div { display: flex; gap: 8px; }
.sup-foot { background: var(--card); border-top: 1px solid var(--line); padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
.sup-in { display: flex; align-items: flex-end; gap: 6px; }
.sup-in textarea { flex: 1; resize: none; min-height: 44px; max-height: 132px; border-radius: 22px !important; padding: 10px 16px !important; line-height: 1.45; font-size: 16px; }
.sup-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; flex: none; cursor: pointer; }
.sup-send svg { width: 20px; height: 20px; }
.sup-send:disabled { opacity: .5; }
.sup-att { flex: none; }
.sup-me { display: flex; flex-direction: column; gap: 8px; background: var(--accs); border-radius: var(--r-sm); padding: 10px 12px; }
.sup-me b { font-size: 14px; }
.sup-me .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sup-me-a { display: flex; gap: 14px; align-items: center; }
.sup-urg { margin: 0; font-size: 13px; color: var(--mute); text-align: center; }
.sup-full img { display: block; max-width: 100%; height: auto; margin: 0 auto 12px; border-radius: 12px; }
.sup-welcome { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.sup-welcome > div { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.sup-welcome small { color: var(--mute); font-size: 13px; }
.cm-help { width: 100%; border: 0; border-top: 1px solid var(--line); background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.cm-help .dot-n { position: static; margin-inline-start: auto; }
/* The admin's inbox (ניהול Tormate › פניות) and Tormate's number (› וואטסאפ) */
.supa-cfg summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.supa-cfg .form { margin-top: 12px; }
.supa-f { margin: 12px 0 10px; }
.supa-row { display: flex; gap: 10px; align-items: flex-start; }
.supa-row.is-new { box-shadow: inset -3px 0 0 var(--acc); }
.supa-row .li-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.supa-row time { font-size: 12px; color: var(--mute); white-space: nowrap; }
.supa-row .cm-tag { white-space: nowrap; display: inline-block; font-size: 12px; padding: 2px 10px; vertical-align: middle; }
.supa-sheet { display: flex; flex-direction: column; gap: 10px; }
.supa-h { display: flex; gap: 12px; align-items: flex-start; }
.supa-h h3 { margin: 0 0 2px; font-size: 17px; }
.supa-h p { margin: 2px 0; }
.supa-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.supa-log { flex: none; max-height: 46vh; min-height: 180px; background: var(--bg); border-radius: var(--r-sm); border: 1px solid var(--line); }
.supa-quick { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.supa-quick::-webkit-scrollbar { display: none; }
.supa-quick .chip { flex: none; white-space: nowrap; }
.supa-in textarea { border-radius: 16px !important; }
.bad-t { color: var(--bad); }
.waa h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.waa-chk { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.waa-chk .ok { color: var(--ok); } .waa-chk .no { color: var(--bad); }
.waa-steps { padding-inline-start: 18px; margin: 4px 0 10px; color: var(--mute); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.waa-conn summary { cursor: pointer; }
.waa-conn .form, .waa-test { margin-top: 10px; }