:root { --bg: #0E0D0B; --card: #1A1815; --card-2: #24211C; --line: #2E2A24; --line-2: #3A352D; --text: #F3EEE4; --text-2: #D8D0C0; --muted: #A39B8C; --accent: #C9A45C; --accent-ink: #17140F; --danger: #E8A08C; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Assistant', system-ui, sans-serif; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; }
.shell { max-width: 480px; margin: 0 auto; min-height: 100vh; padding: calc(28px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(110px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 16px; }
.serif { font-family: 'Frank Ruhl Libre', Georgia, serif; }
.head { display: flex; align-items: center; gap: 12px; }
.logo { width: 44px; height: 44px; border-radius: 22px; border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: 20px; flex-shrink: 0; overflow: hidden; }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.grow { flex-grow: 1; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cta { height: 56px; border-radius: 16px; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.cta:disabled { background: var(--line); color: #7A7264; cursor: default; }
.ghost { height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0 14px; }
.ghost.danger { color: var(--danger); border-color: #5A2E24; }
.iconbtn { width: 44px; height: 44px; border-radius: 22px; background: var(--card); border: 0; display: grid; place-items: center; flex-shrink: 0; }
.option { min-height: 68px; border-radius: 16px; padding: 14px 16px; background: var(--card); border: 1.5px solid var(--line); display: flex; align-items: center; gap: 14px; text-align: start; width: 100%; }
.option.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.option .price { color: var(--accent); font-weight: 700; }
.service-selection-check { width: 28px; height: 28px; flex-shrink: 0; border: 2px solid var(--muted); border-radius: 8px; display: grid; place-items: center; }
.option.on .service-selection-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* כמות לשירות: השם בצד אחד, והכפתורים − מספר + תמיד בשורה אחת (גם בטלפון צר) */
.quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quantity-row > .grow { min-width: 0; }
.quantity-row > [role="group"] { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; flex-shrink: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.day { min-width: 56px; height: 68px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.day b { font-size: 19px; }
.day.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.day:disabled { color: #5A5448; background: transparent; border-color: #24211C; cursor: default; }
.times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.time { height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font-weight: 700; font-size: 15px; }
.time.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bar { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px calc(20px + env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
.bar > * { max-width: 440px; margin: 0 auto; }
.progress { display: flex; gap: 6px; }
.progress:not(.labeled) span { flex-grow: 1; height: 4px; border-radius: 2px; background: var(--line); }
.progress:not(.labeled) span.on { background: var(--accent); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.field input, .field textarea { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 16px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.err { background: #3A1F18; color: #F3C6B8; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--card-2); color: var(--text-2); white-space: nowrap; }
.chip.ok { background: #1F2A1F; color: #9CC5A1; }
.chip.gold { background: #2E2718; color: var(--accent); }
.chip.bad { background: #3A1F18; color: var(--danger); }
.msg { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.msg.unread { border-color: var(--accent); }
.tabs { position: fixed; bottom: 0; left: 0; right: 0; min-height: 76px; height: auto; background: #141210; border-top: 1px solid var(--line); display: flex; justify-content: space-around; align-items: center; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.tabs button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; font-weight: 600; min-width: 64px; position: relative; }
.tabs button.on { color: var(--accent); font-weight: 700; }
.badge { position: absolute; top: -4px; left: 16px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.check { width: 96px; height: 96px; border-radius: 48px; border: 2px solid var(--accent); display: grid; place-items: center; margin: 30px auto 0; color: var(--accent); }
label.opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
label.opt input { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 2px; }

/* Customer experience: calm surfaces with tenant-specific brand colors. */
:root { --bg:#F6F7FA; --card:#FFFFFF; --card-2:#EDF0F5; --line:#E3E7EE; --line-2:#CFD6E0; --text:#182438; --text-2:#435168; --muted:#647187; --accent:#2B5EC8; --accent-ink:#FFFFFF; --danger:#AD3447; --brand-primary:#203D61; --brand-ink:#FFFFFF; }
html, body { font-family:'Assistant','Segoe UI',Arial,sans-serif; line-height:1.55; }
body { background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%),var(--bg); }
[hidden] { display:none !important; }
button, a, input, textarea { -webkit-tap-highlight-color:transparent; }
button, a { touch-action:manipulation; }
button:focus-visible, a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
button { transition:background .16s,border-color .16s,transform .16s; }
button:active:not(:disabled) { transform:translateY(1px); }
.shell { max-width:640px; padding:calc(32px + env(safe-area-inset-top,0px)) calc(28px + env(safe-area-inset-right,0px)) calc(112px + env(safe-area-inset-bottom,0px)) calc(28px + env(safe-area-inset-left,0px)); gap:22px; }
.serif { font-family:inherit; font-weight:700; letter-spacing:-.5px; }
.grow { min-width:0; }
.logo { width:58px; height:58px; border-radius:18px; background:var(--card); border:1px solid var(--line); font-family:inherit; color:var(--text); }
.logo img { object-fit:contain; }
.business-header { padding:2px 0 0; margin-bottom:0; }
.card, .service-card, .option { --text:var(--card-ink); --text-2:var(--card-ink); --muted:var(--card-ink); color:var(--card-ink); }
.birthday-control { display:flex; gap:8px; align-items:center; }
.birthday-picker { position:relative; flex:1; min-width:0; min-height:48px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:space-between; background:var(--card); }
.birthday-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.birthday-picker:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.business-header { --logo-base:160px; }
.business-header .logo { width:calc(var(--logo-base) * var(--logo-scale, 1)); height:calc(var(--logo-base) * var(--logo-scale, 1)); font-size:calc(var(--logo-base) * .4 * var(--logo-scale, 1)); }
.business-header .logo:has(img) { border:0; border-radius:0; background:transparent; overflow:visible; }
/* לוגו שנחתכו ממנו השוליים הריקים: המסגרת בדיוק בגבולות הציור (היחס שלו), בגודל המקסימלי שנבחר */
.business-header .logo.logo-trimmed { position:relative; overflow:hidden; display:block;
  width:calc(var(--logo-base) * var(--logo-scale, 1) * min(1, var(--logo-ar, 1)));
  height:calc(var(--logo-base) * var(--logo-scale, 1) * min(1, 1 / var(--logo-ar, 1))); }
/* השם מיושר לקו התחתון של הלוגו בכל גודל, עם מרווח קבוע מהלוגו */
.business-header { align-items:flex-end; gap:16px; }
.business-header > .grow { min-width:0; padding-bottom:0; }
.business-name { font-size:21px; letter-spacing:-.3px; display:block; line-height:1.1; }
.online-label { font-size:11px; font-weight:700; border:1px solid var(--line); border-radius:30px; padding:5px 10px; white-space:nowrap; color:var(--text-2); background:var(--card); }
.welcome-hero { position:relative; isolation:isolate; overflow:hidden; padding:32px; border-radius:28px; background:var(--brand-primary); color:var(--brand-ink); display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.welcome-hero::after { content:''; width:250px; height:250px; position:absolute; left:-130px; top:-70px; border:1px solid currentColor; border-radius:50%; opacity:.1; box-shadow:0 0 0 40px #ffffff18,0 0 0 80px #ffffff0c; z-index:-1; }
.hero-eyebrow { font-size:14px; opacity:.85; }
.hero-account { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; width:100%; }
.hero-logout { min-height:44px; padding:8px 14px; border:1px solid currentColor; border-radius:12px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.hero-logout:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.welcome-hero h1 { font-size:42px; line-height:1.14; letter-spacing:-1px; }
.welcome-hero p { margin:0; max-width:36ch; font-size:16px; opacity:.9; }
.welcome-hero .cta { margin-top:6px; }
.hero-note { width:100%; text-align:center; font-size:12px; opacity:.85; }
.cta { min-height:54px; height:auto; padding:14px 20px; border-radius:15px; font-size:17px; box-shadow:0 5px 15px #14233d0a; }
.cta-arrow { margin-inline-start:auto; font-size:23px; line-height:1; }
.cta:disabled { color:#6D7889; background:#E3E7EE; box-shadow:none; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:4px; }
.section-heading h2, .contact-card h2 { font-size:21px; letter-spacing:-.3px; }
.service-list { display:grid; gap:12px; }
.service-card { display:flex; align-items:center; gap:16px; width:100%; padding:22px; background:var(--card); border:1px solid var(--line); border-radius:20px; text-align:start; box-shadow:0 4px 16px #1d2a4004; }
.service-card:hover, .option:hover:not(:disabled), .time:hover:not(:disabled) { border-color:var(--accent); }
.service-card b { display:block; font-size:19px; }
.service-number { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 10%,white); color:var(--text-2); font-size:14px; font-weight:700; flex-shrink:0; }
.service-thumb { width:64px; height:64px; border-radius:14px; object-fit:cover; flex-shrink:0; background:color-mix(in srgb,var(--accent) 10%,white); }
.service-description { display:block; font-size:14px; color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.duration { display:inline-block; margin-top:7px; font-size:12px; color:var(--card-ink,var(--muted)); background:color-mix(in srgb,var(--card-ink,#182438) 8%,var(--card)); padding:3px 9px; border-radius:6px; }
.service-price { font-size:23px; font-weight:700; white-space:nowrap; }
.service-price span { display:block; font-size:11px; font-weight:600; color:var(--muted); margin-top:5px; }
.contact-card { display:flex; flex-direction:column; gap:14px; padding:24px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--accent) 3%,white); }
.contact-card p { margin:0; padding-top:14px; border-top:1px solid var(--line); }
.contact-actions { display:flex; gap:10px; flex-wrap:wrap; }
.contact-actions:empty { display:none; }
.contact-actions > * { flex:1; }
.contact-address { display:flex; align-items:center; gap:8px; font-size:14px; }
.powered-by { text-align:center; font-size:11px; color:var(--muted); padding:4px; }
.powered-by a { color:var(--text-2, inherit); text-decoration:underline; font-size:13px; display:inline-block; padding:10px 4px; }
/* לוגו תוריו בחבילה הבסיסית: על רקע בהיר קבוע כדי שייראה גם בערכות נושא כהות */
.powered-by a.toryou-credit { display:inline-flex; align-items:center; gap:6px; text-decoration:none; background:#fff; color:#1c3555; border-radius:999px; padding:6px 12px; margin-top:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.powered-by a.toryou-credit img { height:20px; width:auto; display:block; }
.card, .msg { border-radius:20px; padding:24px; box-shadow:0 4px 20px #1d2a4004; }
.card > b:first-child { font-size:21px; }
.ghost { min-height:46px; height:auto; padding:11px 16px; background:var(--card); gap:6px; }
.ghost.danger { border-color:#EBCBD1; }
.iconbtn { border:1px solid var(--line); border-radius:14px; }
.option { min-height:82px; padding:20px; }
.option .price { color:var(--text); }
.option.on { background:color-mix(in srgb,var(--accent) 7%,white); }
.day { min-width:65px; height:84px; }
.day:disabled { color:#939BA7; background:#F0F2F5; border-color:var(--line); }
.days { padding:4px 2px 12px; scrollbar-width:thin; }
.time { height:50px; }
.bar { padding:14px calc(24px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px)); background:#FFFFFFF5; box-shadow:0 -5px 24px #1d2a4006; }
.bar > * { max-width:584px; }
.progress { gap:8px; padding:2px 0 8px; }
.progress:not(.labeled) span { height:5px; }
.field { font-weight:600; gap:8px; }
.field input, .field textarea { width:100%; min-width:0; background:#FAFBFD; padding:14px 16px; font-weight:400; }
.field textarea { resize:vertical; }
.channel-choices .opt { padding:14px; border:1px solid var(--line); border-radius:13px; align-items:center; background:#FAFBFD; }
.channel-choices .opt:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,white); }
.channel-choices .opt:has(input:disabled) { opacity:.55; }
label.opt input { flex-shrink:0; }
.err { color:#942D40; background:#FFF0F2; border:1px solid #F4D5DC; line-height:1.7; }
.chip.ok { background:#EAF5EF; color:#2D684A; }
.chip.gold { background:#FFF4DF; color:#855E13; }
.chip.bad { background:#FFF0F2; color:#AD3447; }
.tabs { left:50%; right:auto; transform:translateX(-50%); width:min(640px,100%); height:calc(80px + env(safe-area-inset-bottom)); padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:#FFFFFFF5; border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0; box-shadow:0 -4px 28px #1d2a4008; z-index:5; }
.tabs button { min-height:52px; flex:1; border-radius:12px; gap:4px; }
.tabs button.on { color:var(--text); background:color-mix(in srgb,var(--accent) 10%,white); }
.badge { left:calc(50% - 24px); top:0; }
.check { background:color-mix(in srgb,var(--accent) 9%,white); }
.empty { padding:38px 18px; line-height:1.8; }
@media (max-width:440px) {
 .shell { padding:calc(20px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(106px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px)); gap:18px; }
 .welcome-hero { padding:26px 24px; border-radius:24px; }
 .welcome-hero h1 { font-size:36px; }
 .online-label { display:none; }
 .business-name { font-size:20px; }
 .service-card { gap:12px; padding:18px 16px; }
 .service-number { display:none; }
 .service-thumb { width:56px; height:56px; border-radius:12px; }
 .service-price { font-size:21px; }
 .card,.msg,.contact-card { padding:20px; }
 .section-heading h2 { font-size:20px; }
 .times { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }

.booking-context { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.picker-title { font-size:16px; font-weight:700; }

.ghost:disabled { opacity:.5; cursor:not-allowed; background:var(--card-2); }

/* Compact booking form for embedding in the business website. */
html.embedded, .embedded body { background:transparent; min-height:0; }
.embedded .shell { min-height:0; max-width:680px; padding:8px 8px 16px; gap:20px; }
.embedded .card { border:0; box-shadow:none; background:var(--embed-card-background,transparent); padding:var(--embed-card-padding,0); border-radius:0; }
.embedded .shell > .card > b:first-child { font-size:24px; font-weight:700; color:#614848; }
.embedded .field { font-size:15px; gap:8px; }
.embedded .field input, .embedded .field textarea { background:#fff; color:#182438; border:1px solid #e1d5d2; border-radius:8px; min-height:48px; }
.embedded .cta { background:var(--button-bg,#936565); color:var(--button-ink,#fff); border-radius:8px; box-shadow:none; height:50px; }
.embedded .cta:disabled { background:#eee6e4; color:#827773; }
.embedded .channel-choices label.opt { background:#fff; color:#182438; border:1px solid #e1d5d2; border-radius:8px; padding:13px 16px; }
.embedded .channel-choices label.opt:has(input:checked) { border-color:#936565; background:#faf5f3; }
/* השדות והאפשרויות בהטמעה תמיד על רקע לבן, ולכן הטקסט שלהם כהה גם כשהעסק בחר כרטיסים כהים עם טקסט בהיר */
.embedded .field input::placeholder, .embedded .field textarea::placeholder { color:#647187; }
.embedded .channel-choices label.opt:has(input:disabled) { opacity:.5; }
.embedded .ghost, .embedded .option, .embedded .day, .embedded .time { border-radius:8px; }
.embedded .bar { position:static; padding:12px 0; border:0; background:transparent; }
.embedded .bar > * { max-width:none; }
/* בהטמעה אין לכותרת השלבים רקע משלה (--bg שקוף), ולכן היא לא נדבקת לראש החלון: תוכן שנגלל לא עובר מתחת לטקסט שלה */
.embedded .booking-chrome { position:static; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.embedded .embed-links { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; padding-top:16px; border-top:1px solid #eee5e2; font-size:14px; color:#735553; }
.embedded .embed-links button { color:inherit; border:0; background:none; padding:6px 0; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.embedded .logo { display:none; }
.existing-appointments:not([hidden]) { display:grid; gap:12px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface, #fff); }
.embedded .existing-appointments:not([hidden]) { border-color:#e8dad6; background:#faf6f4; }
.embedded .existing-appointments .appointment-summary { padding:14px; border:1px solid #eadfdb; border-radius:10px; background:#fff; }

/* Catalog appears only in the standalone Yael booking page. */
.store-search { display:flex; gap:10px; }
.store-search input { flex:1; min-width:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--text); font:inherit; }
.store-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.store-product { display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid var(--line); border-radius:18px; background:white; min-width:0; }
.store-product img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:10px; }
.store-product h2 { font-size:17px; margin:0; overflow-wrap:anywhere; }
.store-product .ghost { margin-top:auto; font-size:14px; text-align:center; }
@media(max-width:360px) { .store-grid { grid-template-columns:1fr; } }
.customer-session { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 14px; background:white; border:1px solid var(--line); border-radius:14px; }
.customer-session .grow { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.customer-session .ghost { min-height:40px; width:auto; padding:8px 14px; }
.customer-session .session-help { flex-basis:100%; }

.home-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.home-action { min-height:120px; padding:18px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; text-decoration:none; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:20px; font-size:15px; font-weight:600; overflow-wrap:break-word; hyphens:none; }
.home-action:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--card)); }
.home-action:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.home-action-icon { font-family:Arial,sans-serif; font-size:38px; line-height:1; color:var(--accent); }
.cta { background:var(--button-bg,var(--accent)); color:var(--button-ink,var(--accent-ink)); }
.home-action { background:var(--menu-bg,var(--card)); color:var(--menu-ink,var(--text)); }
.home-action:hover { background:var(--menu-bg,var(--card)); filter:brightness(.97); }
.home-action-icon { color:var(--menu-icon,var(--accent)); }
@media(max-width:350px) { .home-actions { gap:8px; } .home-action { min-height:106px; font-size:14px; padding:14px 5px; } }

.welcome-hero { padding:24px; }
.welcome-hero h1 { font-size:clamp(26px,6vw,36px); margin:6px 0; }

/* Theme surfaces retain readable text for light and dark palettes. */
.tabs, .contact-card { background:var(--card); --text:var(--card-ink); --muted:var(--card-ink); color:var(--card-ink); }
.tabs button.on { background:color-mix(in srgb,var(--accent) 15%,var(--card)); }

/* Keep branded surfaces and their text paired across booking and embedded screens. */
.custom-text-color .hero-eyebrow, .custom-text-color .welcome-hero p, .custom-text-color .hero-note { opacity:1; }
.ghost:not(.danger), .field input, .field textarea, .store-search input, .birthday-picker { background:var(--card); color:var(--card-ink); }
.field input::placeholder, .field textarea::placeholder { color:var(--card-ink); opacity:1; }
.option.on, .channel-choices .opt:has(input:checked), .embedded .channel-choices .opt:has(input:checked) { background:color-mix(in srgb,var(--accent) 7%,var(--card)); }
.channel-choices .opt { background:var(--card); color:var(--card-ink); }
.service-number { background:color-mix(in srgb,var(--accent) 10%,var(--card)); }
.bar { background:var(--bg); }
.embedded .shell > .card > b:first-child { color:var(--card-ink); }
.embedded .embed-links { color:var(--text); }
.embedded .existing-appointments:not([hidden]) { background:var(--card); }


/* ---------- mobile comfort ---------- */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
.store-search input { font-size: 16px; min-height: 48px; }
.booking-chrome {
  position: sticky;
  top: 0;
  z-index: 6;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 0 10px;
  margin-inline: -4px;
  padding-inline: 4px;
}
.days { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.day { scroll-snap-align: start; }
.booking-context { flex-wrap: wrap; }
@media (max-width: 440px) {
  .business-header { --logo-base: 96px; gap: 12px; }
  .home-actions { gap: 10px; }
  .home-action { min-height: 110px; font-size: 15px; padding: 14px 6px; }
  .home-action-icon { font-size: 32px; }
  .times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid2 { grid-template-columns: 1fr; }
  .option { min-height: 72px; padding: 16px; }
  .bar .ghost, .card .ghost { min-height: 44px; }
  .contact-actions > * { flex: 1 1 calc(50% - 10px); min-width: 140px; }
  .customer-session { gap: 8px; }
}
@media (max-width: 360px) {
  .times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- overnight UX: booking empty + loading ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 42px 18px; color: var(--muted);
}
.empty-state-icon {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}
.empty-state-title { color: var(--text); font-size: 17px; font-weight: 700; }
.empty-state-hint { margin: 0; max-width: 320px; line-height: 1.7; font-size: 14px; }
.loading-block {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 36px 16px; color: var(--muted); font-size: 14px;
}
.loading-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: book-spin .7s linear infinite;
}
@keyframes book-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; } }

/* Booking step comfort */
.booking-chrome { display: flex; flex-direction: column; gap: 12px; }
.progress { margin-block: 4px; }
.opt + .opt { margin-top: 4px; }
.prefs-card { gap: 12px; }
.prefs-card .opt { padding: 10px 0; border-bottom: 1px solid var(--line); }
.prefs-card .opt:last-of-type { border-bottom: 0; }

/* ---------- day UX: labeled progress, cancel/move, inbox, contrast ---------- */
.progress.labeled {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px;
}
.progress-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0; color: var(--muted);
}
.progress-index {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--card); color: var(--card-ink, var(--text));
  border: 2px solid var(--line);
}
.progress-step.on .progress-index {
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border-color: var(--accent); color: var(--accent);
}
.progress-step.current .progress-index {
  background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent);
}
.progress-step.done .progress-index { background: var(--accent); color: var(--accent-ink, #fff); }
.progress-label {
  font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.progress-step.on .progress-label, .progress-step.current .progress-label { color: var(--text); }

.cancel-summary {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border: 1px solid var(--line);
}
.danger-cta, .cta.danger-cta {
  background: #C0392B; color: #fff;
}
.danger-cta:hover { filter: brightness(.96); }

.move-compare {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
  padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  border: 1px solid var(--line);
}
.move-from, .move-to { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.move-arrow { font-size: 20px; color: var(--accent); font-weight: 700; }

.inbox-head { align-items: center; gap: 12px; margin-bottom: 4px; }
.inbox-day {
  font-size: 13px; font-weight: 700; color: var(--muted);
  margin: 14px 0 6px; letter-spacing: .02em;
}
.msg {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--card); color: var(--card-ink, var(--text));
  border: 1px solid var(--line);
}
.msg.unread {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Dark-brand-safe muted text: keep readable on navy/primary backgrounds */
.small.muted, .muted, .hero-note, .session-help {
  color: color-mix(in srgb, var(--text) 72%, var(--bg));
  opacity: 1;
}
.custom-text-color .small.muted,
.custom-text-color .muted,
.custom-text-color .hero-note {
  color: color-mix(in srgb, var(--text) 82%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light dark; }
}

/* ---------- cycle2: confirmation + waitlist + session ---------- */
.done-summary { align-items: center; }
.done-actions {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  max-width: 420px; margin: 0 auto;
}
.done-actions .cta, .done-actions .ghost { width: 100%; min-height: 48px; }
.waitlist-joined { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.waitlist-card .chip { flex-shrink: 0; }
.customer-session .ghost { min-height: 40px; }

/* ---------- cycle3: share, slot skeleton, prefs channels, trust ---------- */
.share-actions {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 420px; margin: 0 auto;
}
.share-actions .ghost { width: 100%; min-height: 44px; }
.times-skeleton {
  position: relative;
}
.times-skeleton .skeleton-hint {
  grid-column: 1 / -1; text-align: center; padding-top: 4px;
}
.skeleton-slot, .skeleton-day {
  pointer-events: none; border-style: solid;
  background: linear-gradient(90deg, var(--card-2) 0%, color-mix(in srgb, var(--card) 70%, var(--line)) 50%, var(--card-2) 100%);
  background-size: 200% 100%;
  animation: book-shimmer 1.1s ease-in-out infinite;
  color: transparent !important; border-color: var(--line);
}
.skeleton-day { min-width: 56px; height: 68px; border-radius: 14px; display: inline-block; }
@keyframes book-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-slot, .skeleton-day { animation: none; background: var(--card-2); }
}
.channel-guide {
  margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--text-2); line-height: 1.55;
}
.channel-guide b { color: var(--text); }
.booking-for {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}
.trust-card { gap: 12px; }
.trust-row {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 14px; color: var(--text-2);
}
.trust-row b { color: var(--text); font-size: 13px; }
.trust-card .contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* תאריך לידה: שלוש רשימות בשורה */
.birthday-selects { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.25fr); gap:8px; width:100%; }
.birthday-selects select { min-width:0; min-height:48px; padding:10px 8px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--card-ink,var(--text)); font:inherit; font-size:16px; }
.birthday-selects select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* כיתה (גן עד י״ב) בטופס בן משפחה ובפרופיל של לקוח קטין */
.grade-select { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--card-ink,var(--text)); font:inherit; font-size:16px; }
.grade-select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.link-btn { align-self:flex-start; min-height:32px; padding:4px 0; border:0; background:none; color:inherit; font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; opacity:.8; }
/* לוגו חסר: עיגול קטן בצבע המותג עם האות הראשונה, במקום ריבוע לבן ענק */
.business-header .logo:not(:has(img)) { width:calc(64px * var(--logo-scale, 1)); height:calc(64px * var(--logo-scale, 1)); font-size:calc(28px * var(--logo-scale, 1)); border-radius:50%; border:0; background:var(--accent); color:var(--accent-ink); }
/* מיקום הלוגו ביחס לשם העסק (הגדרות האפליקציה ← מיתוג): start = מימין לשם (ברירת המחדל), end = משמאל לשם, top = במרכז מעל השם */
.business-header.logo-end > .grow { order:0; }
.business-header.logo-end > .logo { order:1; }
.business-header.logo-end > .lang-select { order:2; }
.business-header.logo-top { flex-direction:column; align-items:center; text-align:center; position:relative; gap:14px; }
.business-header.logo-top > .grow { flex:none; margin-inline:0 !important; padding-bottom:0 !important; }
/* בחירת השפה: בשורה משלה מעל הלוגו, בפינה השמאלית העליונה של הדף (ב-RTL: inset-inline-end). לא נוגעת בלוגו ובשם בשום גודל */
.business-header { position:relative; padding-top:38px; }
.business-header > .lang-select { position:absolute; top:0; inset-inline-end:0; z-index:1; }
.lang-select.lang-menu { min-height:0; padding:0; border:0; background:transparent; }
.lang-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:34px; padding:0; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--card-ink, var(--text)); cursor:pointer; }
.lang-btn:focus-visible, .lang-list button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.lang-list { position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:30; min-width:160px; padding:6px; display:grid; gap:2px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--card-ink, var(--text)); box-shadow:0 12px 32px rgba(0,0,0,.16); }
.lang-list[hidden] { display:none; }
.lang-list button { display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:6px 10px; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; font-size:15px; text-align:start; cursor:pointer; }
.lang-list button b { min-width:22px; font-size:12px; letter-spacing:.4px; opacity:.65; }
.lang-list .lang-name { flex:1; }
.lang-flag { display:inline-flex; line-height:0; }
.lang-flag svg { border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.14); }
.lang-btn { width:46px; }
.lang-list button:hover { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.lang-list button.on { background:color-mix(in srgb, var(--accent) 18%, transparent); font-weight:700; }
.business-header.logo-end > .grow { flex:0 1 auto; }

/* קביעת תור: הפעולה הראשית בעמוד הבית, בולטת ובשורה מלאה */
.home-action.primary { grid-column:1 / -1; min-height:76px; flex-direction:row; gap:14px; font-size:18px; font-weight:700; background:var(--button-bg,var(--accent)); color:var(--button-ink,var(--accent-ink)); border-color:transparent; }
.home-action.primary .home-action-icon { color:inherit; font-size:30px; }
.home-action.primary:hover { background:var(--button-bg,var(--accent)); filter:brightness(1.05); }
/* רכיבים על רקע כרטיס: הטקסט בצבע של הכרטיס (ולא בצבע של רקע הדף, שיכול להיות בהיר על רקע כהה) */
.customer-session, .iconbtn, .day, .time, .msg, .logo, .online-label, .booking-context, .tabs, .contact-card, .channel-choices .opt, .existing-appointments {
  --text:var(--card-ink); --text-2:var(--card-ink); --muted:var(--card-ink); color:var(--card-ink);
}
.customer-session .muted, .msg .muted, .contact-card .muted { opacity:.75; }
/* תור קבוע: בחירת תדירות ומספר תורים */
.series-fields select { width:100%; min-width:0; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--card-ink,var(--text)); font:inherit; font-size:16px; }
.series-fields select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* הפניית חברים */
.referral-card { gap:8px; }
.referral-dots { display:flex; flex-wrap:wrap; gap:8px; }
.referral-dots span { width:22px; height:22px; border-radius:50%; border:2px solid var(--accent); }
.referral-dots span.on { background:var(--accent); }
.referral-reward { padding:10px 12px; border-radius:12px; background:var(--card-2); font-weight:700; }
.referral-card > b:first-child { font-size:17px; }

/* ביקורות בדף ההזמנה */
.reviews-card { display:grid; gap:12px; }
.reviews-score { display:flex; align-items:center; gap:10px; }
.reviews-score b { font-size:34px; line-height:1; }
.review-stars { color:var(--accent); letter-spacing:2px; direction:ltr; unicode-bidi:isolate; }
.reviews-quotes { display:grid; gap:10px; }
.review-quote { margin:0; padding:14px 16px; background:var(--card); --text:var(--card-ink); --muted:var(--card-ink); color:var(--card-ink); border:1px solid var(--line); border-radius:16px; display:grid; gap:6px; }
.review-quote figcaption { opacity:.75; }
.review-quote blockquote { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* בחירת שפה */
.lang-select { flex:none; width:auto; min-height:36px; padding:4px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--card-ink, var(--text)); font:inherit; font-size:14px; }
[dir="ltr"] .iconbtn svg { transform:scaleX(-1); }

/* הוספה למסך הבית */
.install-sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.install-card{width:100%;max-width:440px;padding:18px;display:grid;gap:12px;border-radius:18px;animation:install-up .18s ease-out}
.install-head{display:flex;align-items:center;gap:12px}
.install-head img{border-radius:12px;flex:none}
.install-head b{flex:1;font-size:17px}
.install-x{background:none;border:0;font-size:18px;padding:6px;cursor:pointer;color:inherit}
.install-body{display:grid;gap:10px;line-height:1.6}
.install-body p{margin:0}
.install-steps{margin:0;padding-inline-start:20px;display:grid;gap:6px}
@keyframes install-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.install-card{animation:none}}

/* תמונות שהעסק העלה לשירותים ולאנשי צוות */
.item-thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.staff-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* "קצת עלינו" בדף ההזמנה: טקסט חופשי של העסק */
.about-card .about-text { margin:0; padding-top:0; border-top:0; white-space:pre-line; line-height:1.75; font-size:15px; overflow-wrap:anywhere; }
.about-card .about-more { align-self:flex-start; background:none; border:0; padding:0; font:inherit; font-size:14px; font-weight:700; color:var(--accent); text-decoration:underline; cursor:pointer; }

/* שדה תאריך DD/MM/YYYY (core.js dateInput): שדה טקסט + כפתור לוח שנה */
.date-wrap { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; }
.date-wrap > input[data-date] { flex: 1 1 auto; min-width: 0; }
.date-pick { flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
/* מבנה לפי משימות: כפתור קביעת התור הראשי בראש מסך הבית, והתור הקרוב מתחתיו */
.home-book { margin-block: 4px 2px; font-size: 18px; min-height: 58px; }
.home-book svg { flex: none; }
.profile-links { gap: 8px; }
.profile-links .ghost { justify-content: flex-start; gap: 8px; }

/* דף ההזמנה בעברית: שדה שנכתב משמאל לימין (טלפון, דוא״ל, מספרים) מיושר לימין כמו שאר השדות. בלי משקל (where), כך שרכיב שממרכז שדה נשאר ממורכז */
:where(html[dir="rtl"]) :where(input[dir="ltr"]:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { text-align: right; }

/* password field with an eye icon (show / hide) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 50px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; }
.pw-toggle:hover { color: var(--text); }
.link-btn { background: none; border: 0; padding: 4px 2px; min-height: 36px; color: inherit; font-size: 14px; cursor: pointer; }