/* ═══════════════════════════════════════════════════════════════════════════
   CALIO BOOKING — אתר זימון תורים לקוחות קצה.
   שפת עיצוב: מינימליסטי, נקי, app-like. התוכן יושב ישירות על קנבס נקי —
   ללא "card לבן בודד צף על אפור". cards משמשים *רק* לקיבוץ תוכן (שורה/סיכום/פריט).
   מותג: Heebo, ירוק #64BB73 מרוסן, נייטרלים מתוחכמים, צללים רכים נייטרליים, RTL מלא.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Heebo — self-hosted variable font (hebrew + latin subsets). קובץ אחד per-subset
   מכסה 400–800 דרך font-weight range. */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/book/assets/fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/book/assets/fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── מותג ── */
  --accent: #64BB73;
  --accent-dark: #4fa35e;
  --green: #64BB73;
  --green-600: #4fa35e;
  --green-700: #3d8a4b;
  --green-50: #f0f9f2;
  --green-100: #d9f0de;
  --green-200: #b3e1bc;
  /* טקסט/אייקון על-גבי הצבע המוביל (כפתורים מלאים). נדרס ב-JS לפי ניגודיות. */
  --on-accent: #fff;

  /* ── נייטרלים (ink scale) ── */
  --ink: #1c2430;
  --fg1: #1c2430;     /* כותרות / טקסט ראשי */
  --fg2: #5c6675;     /* טקסט משני */
  --fg3: #9aa3af;     /* רמזים / placeholder-ish */
  --muted: #5c6675;

  /* ── משטחים וקווים ── */
  --bg: #ffffff;      /* קנבס: לבן מלא. התוכן יושב ישירות עליו */
  --surface: #ffffff; /* משטח כרטיס-קיבוץ */
  --card: #ffffff;
  --border: #e7eaee;
  --line: #edf0f3;
  --hair: #f0f2f5;
  --field-border: #dde1e7;
  --field-bg: #f6f8f9;
  --ph: #e9edf0;
  --ph-ic: #aab3bd;

  /* ── סמנטי ── */
  --error: #e25555;
  --amber-50: #fff6e6;
  --amber-700: #b7791f;
  --red-50: #fdecea;
  --red-700: #c0392b;

  /* ── radius scale עקבי ── */
  --r-xs: 10px;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --radius: 14px;            /* alias תאימות */
  --radius-lg: 18px;
  --radius-ctrl: 14px;
  --radius-btn: 14px;
  --radius-dialog: 26px;
  --radius-pill: 999px;

  /* ── צללים: רכים, נייטרליים (לא glow צבעוני) ── */
  --sh-card: 0 1px 2px rgba(20, 28, 40, .04), 0 2px 8px -4px rgba(20, 28, 40, .06);
  --sh-raised: 0 2px 6px -2px rgba(20, 28, 40, .08), 0 8px 24px -12px rgba(20, 28, 40, .12);
  --sh-pop: 0 10px 40px -12px rgba(20, 28, 40, .22);
  --shadow: var(--sh-card);

  --ring: 0 0 0 4px rgba(100, 187, 116, .14);
  --cta-shadow: 0 4px 14px -8px rgba(20, 28, 40, .28);
  --cta-shadow-hover: 0 8px 22px -10px rgba(20, 28, 40, .32);

  --col: 480px;   /* רוחב עמודת-קריאה (auth/funnel) */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--fg1);
  direction: rtl;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── shell ──────────────────────────────────────────────────────────────────
   .root = קנבס בגובה-מלא. .screen = עמודת-קריאה ממורכזת *על* הקנבס (ללא card עוטף). */
.root { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; }
.screen {
  width: 100%; max-width: var(--col); padding: 22px 18px 40px;
  display: flex; flex-direction: column; gap: 16px;
}
.screen.center { flex: 1; justify-content: center; align-items: center; min-height: 100dvh; }

/* ── splash — לוגו Calio + סלוגן על רקע ירוק (צבע המותג). נעלם בסיום boot ── */
/* רקע ירוק-מותג קבוע (לא var(--green)) — נשאר שייך לקאליו גם כשלעסק יש צבע מותאם. */
.splash {
  position: fixed; inset: 0; z-index: 9999; background: #64BB73;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 32px;
  opacity: 1; transition: opacity .4s ease, visibility .4s;
}
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo { width: min(72vw, 300px); height: auto; display: block; animation: splash-pop .5s ease both; }
@keyframes splash-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
/* ספינר לבן על הספלאש — נשאר גלוי עד שהמסך האמיתי הראשון מוכן (ללא מסך-ביניים) */
.splash-spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .8s linear infinite;
}

/* .card — חוסל כ"קופסה עוטפת-מסך". כעת מיכל-זרימה שקוף בלבד (layout). cards
   אמיתיים לקיבוץ תוכן מוגדרים מפורשות (.choice/.booking-item/.summary/.stat-card…). */
.card {
  background: transparent; border: none; box-shadow: none; border-radius: 0;
  padding: 0; display: flex; flex-direction: column; gap: 14px;
}

/* ── topbar / appbar ── */
.topbar { display: flex; align-items: center; justify-content: space-between; }
.brandbar { display: flex; align-items: center; gap: 10px; }
.brandbar .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); flex: none; }
.brandbar .name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--fg1); }

/* ── typography ── */
.head { text-align: center; margin-bottom: 18px; }
.head .crumb { font-size: 12px; font-weight: 700; color: var(--green-600); letter-spacing: .03em; margin-bottom: 9px; }
.head h2 { font-size: 24px; font-weight: 800; line-height: 1.22; letter-spacing: -.015em; color: var(--fg1); margin: 0; }
.head p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--fg2); text-wrap: pretty; }
.head p b { color: var(--fg1); font-weight: 700; direction: ltr; unicode-bidi: embed; }
.title { font-size: 22px; font-weight: 800; margin: 4px 0 0; letter-spacing: -.01em; }
.subtitle { font-size: 15px; color: var(--fg2); margin: 0; }
/* תווית-קטע — uppercase-tracking עדין, לא "muted גדול" */
.section-label { font-size: 12.5px; font-weight: 700; color: var(--fg3); letter-spacing: .04em; margin: 4px 2px 2px; }
.section-head { font-size: 15px; font-weight: 800; color: var(--fg1); margin: 6px 2px 0; letter-spacing: -.01em; }

/* ── CTA ראשי ── */
.cta {
  position: relative; width: 100%; height: 54px; border: none; border-radius: var(--radius-btn);
  cursor: pointer; font-family: inherit; background: var(--green); color: var(--on-accent);
  font-size: 16.5px; font-weight: 700; letter-spacing: .1px; box-shadow: var(--cta-shadow);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease; overflow: hidden;
}
.cta:active { transform: scale(.985); }
.cta:hover:not(:disabled):not(.busy):not(.ok) { background: var(--green-600); transform: translateY(-1px); box-shadow: var(--cta-shadow-hover); }
.cta:disabled { cursor: default; opacity: .55; }
.cta.busy { background: var(--green-600); box-shadow: none; opacity: 1; }
.cta.ok { background: var(--green-700); }
.cta .ic { display: flex; }
.cta .cta-label { transition: opacity .15s ease; }
/* CTA אדום (פעולה הרסנית — הסרה מרשימת המתנה). דורס את צבע הירוק כולל hover/busy. */
.cta-danger { background: var(--red-700); }
.cta-danger:hover:not(:disabled):not(.busy) { background: #a5281a; }
.cta-danger.busy { background: #a5281a; }
.cta .cta-spin, .cta .cta-check { display: none; }
.cta.busy .cta-label, .cta.ok .cta-label { opacity: 0; }
.cta.busy .cta-spin { display: inline-flex; position: absolute; }
.cta.ok .cta-check { display: inline-flex; position: absolute; }

/* CTA דביק — נשאר גלוי בתחתית המסך מחוץ לגלילה (למשל "המשך לסיכום").
   bottom>0 משאיר מרווח קטן מקצה המסך. display:none מהקוד עדיין מסתיר לגמרי. */
.cta-sticky { position: sticky; bottom: 14px; z-index: 20; }

/* וריאנטים: קטן / ghost / מושתק */
.cta-sm { height: 44px; font-size: 14.5px; border-radius: var(--radius-ctrl); box-shadow: none; }
.cta-sm.cta-ghost { background: #fff; color: var(--fg1); border: 1.5px solid var(--field-border); box-shadow: none; }
.cta-sm.cta-ghost:hover { border-color: var(--green); color: var(--green-600); background: #fff; }
.cta-muted { background: var(--field-bg); color: var(--fg3); box-shadow: none; cursor: default; }
.cta-muted:hover { background: var(--field-bg); transform: none; }

/* כפתורי OAuth / secondary */
.sbtn {
  position: relative; width: 100%; height: 52px; background: #fff;
  border: 1.5px solid var(--field-border); border-radius: var(--radius-btn);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--fg1);
  transition: background .15s, border-color .15s, transform .1s; gap: 8px;
}
.sbtn:hover { background: #fafbfc; border-color: #cdd3da; }
.sbtn:active { transform: scale(.985); }
.sbtn .ic { position: absolute; right: 18px; display: flex; }

/* כפתורי legacy (.btn) — נשמרים לתאימות */
.btn {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 16px; font-weight: 700; border-radius: var(--radius-btn);
  padding: 14px 18px; transition: transform .06s ease, opacity .15s ease; width: 100%;
}
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: #fff; color: var(--fg1); border: 1.5px solid var(--field-border); }
.btn-soft { background: var(--green-50); color: var(--green-700); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { width: auto; flex: 1; }

.link-btn {
  background: none; border: none; color: var(--green-600); font-weight: 700;
  cursor: pointer; font-size: 14.5px; font-family: inherit; padding: 6px 4px;
  border-radius: 8px; transition: color .15s, background .15s;
}
.link-btn:hover { color: var(--green-700); background: var(--green-50); }

a.cta, a.sbtn { text-decoration: none; }

/* ── שדות ── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--fg1); padding-inline: 2px; }
.ctrl {
  display: flex; align-items: center; gap: 10px;
  background: var(--field-bg); border: 1.5px solid var(--field-border);
  border-radius: var(--radius-ctrl); padding: 0 15px; height: 52px;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.ctrl:focus-within { border-color: var(--green); background: #fff; box-shadow: var(--ring); }
.ctrl .glyph { color: var(--fg3); display: flex; flex: none; }
.ctrl input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; font-weight: 500; color: var(--fg1); min-width: 0;
}
.ctrl input::placeholder { color: #aeb5bd; font-weight: 400; }
.ctrl.ltr input { direction: ltr; text-align: left; }
.ctrl .eye { background: none; border: none; cursor: pointer; color: var(--fg3); display: flex; padding: 4px; flex: none; }
/* legacy plain input */
.input { font-family: inherit; font-size: 16px; padding: 13px 14px; border: 1.5px solid var(--field-border); border-radius: var(--radius-ctrl); background: #fff; width: 100%; }
.input:focus { outline: none; border-color: var(--accent); }

.forgot { margin: 2px 2px 0; font-size: 13.5px; font-weight: 600; color: var(--green-600); cursor: pointer; display: inline-block; background: none; border: none; font-family: inherit; }

.divider-or { display: flex; align-items: center; gap: 16px; margin: 18px 0; }
.divider-or span { flex: none; color: var(--fg3); font-size: 13px; font-weight: 500; }
.divider-or i { flex: 1; height: 1px; background: var(--border); }
.divider { height: 1px; background: var(--line); margin: 6px 0; }

/* ── שגיאה inline ── */
.error-text {
  color: var(--error); font-size: 13.5px; font-weight: 600; min-height: 18px;
  opacity: 0; transform: translateY(-3px); transition: opacity .2s, transform .2s; text-align: center;
}
.error-text.show { opacity: 1; transform: translateY(0); }

/* ── spinner / busy ── */
.spinner { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ספינר ה-CTA — currentColor כדי שיתהפך עם --on-accent (שחור/לבן) לפי הצבע המוביל. */
.spin { width: 20px; height: 20px; border: 2.5px solid currentColor; border-top-color: transparent; opacity: .9; border-radius: 50%; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.cta-check svg { width: 22px; height: 22px; }
.cta-check path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw .4s .04s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.muted-center { text-align: center; color: var(--fg2); font-size: 14px; padding: 18px 0; }
.subnote { margin-top: 14px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--fg3); }
.subnote a { color: var(--green-600); font-weight: 600; text-decoration: none; cursor: pointer; }
.ltrnum { direction: ltr; }

/* hero-ic — אייקון-hero בעיגול (verify / unavailable / dialogs) */
.hero-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--green-50); border: 1px solid var(--green-100); color: var(--green); display: flex; align-items: center; justify-content: center; margin: 4px auto 2px; }
.hero-ic svg { width: 30px; height: 30px; }
.hero-ic.warn { background: var(--amber-50); border-color: #f6e3b8; color: var(--amber-700); }

/* placeholder אחיד לאזורי תמונה ריקים (read-only) */
.img-ph { background: var(--ph); display: flex; align-items: center; justify-content: center; color: var(--ph-ic); }
.img-ph svg { width: 32px; height: 32px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS לקיבוץ-תוכן (לגיטימי ומקצועי) — לא "card על כל המסך"
   ═══════════════════════════════════════════════════════════════════════════ */

/* שורת-בחירה: שירות / שעה / כללי */
.choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-ctrl);
  background: #fff; cursor: pointer; font-size: 15.5px; font-weight: 600; text-align: start;
  color: var(--fg1); box-shadow: var(--sh-card);
  transition: border-color .15s, box-shadow .15s, transform .08s, background .15s;
}
.choice:hover { border-color: var(--green-200); box-shadow: var(--sh-raised); }
.choice:active { transform: scale(.99); }
.choice.selected { border-color: var(--accent); background: var(--green-50); }
.choice .meta { color: var(--fg2); font-size: 13px; font-weight: 500; }
.choice[disabled], .choice.disabled { opacity: .5; cursor: default; box-shadow: none; }

/* slot-grid (שעות) */
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
/* QA 16.10 — השעות ברשימה אנכית, מהמוקדמת למאוחרת, עם עיגול בחירה. */
.slot-list { display: flex; flex-direction: column; gap: 9px; }
.slot-list .slot { justify-content: flex-start; gap: 13px; padding: 15px 16px; font-size: 16.5px; }
.slot-list .slot-dot { flex: none; width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--field-border); background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.slot-list .slot.selected .slot-dot { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px #fff; }
.slot { text-align: center; justify-content: center; padding: 13px 6px; font-weight: 700; font-size: 15px; }

/* פריט-תור (my-bookings / classes / summary rows) */
.booking-item {
  background: #fff; border-radius: var(--radius-ctrl); border: 1.5px solid var(--border);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--sh-card);
}
.booking-item .topbar { gap: 10px; }
.booking-item .when { font-weight: 700; font-size: 15.5px; color: var(--fg1); }
.booking-item .biz { color: var(--fg2); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.booking-item .biz .ti { display: inline-flex; color: var(--fg3); flex: none; }
.booking-item .biz .ti svg { width: 15px; height: 15px; display: block; }
.booking-item .cta-sm { margin-top: 3px; }
/* שיפורי שיעור: אמוג'י לפני הכותרת, שורת תיאור, והערת אי-הרשאה (לא ניתן להצטרף) */
.booking-item .when .cls-emoji { margin-inline-end: 6px; font-size: 16px; line-height: 1; }
.booking-item .cls-desc { color: var(--fg2); font-size: 13px; display: block; }
.booking-item .cls-blocked { margin-top: 3px; align-self: flex-start; background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--fg3); cursor: pointer; text-align: start; }
.booking-item .cls-blocked:hover { color: var(--fg2); text-decoration: underline; }
/* "אתה כבר רשום" — chip סטטוס קומפקטי (לא פעולה): ירוק רך, מיושר להתחלה. */
.booking-item .cls-enrolled {
  margin-top: 3px; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-50); color: var(--green-700); font-size: 12.5px; font-weight: 700;
  padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap;
}
.booking-item .cls-enrolled .ci { display: inline-flex; }
.booking-item .cls-enrolled .ci svg { width: 14px; height: 14px; display: block; }

.badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.badge.full { background: #fdecec; color: var(--error); }
.badge.ok { background: var(--green-50); color: var(--green-700); }
.badge.pending { background: var(--amber-50); color: var(--amber-700); }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — דף פרופיל-עסק (venue page). image-forward, ממורכז, app-like.
   ═══════════════════════════════════════════════════════════════════════════ */
.home { padding: 0 0 30px; gap: 0; max-width: 720px; }
.scr-home { max-width: 720px; }

/* top bar — סרגל עליון דביק עם המבורגר (class ייעודי; לא .topbar הגלובלי) */
.home-bar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hair);
}
.home-menu {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: #fff;
  display: grid; place-items: center; color: var(--fg1); cursor: pointer; padding: 0; font-family: inherit;
}
.home-menu svg { width: 21px; height: 21px; }
.home-bar-ttl { font-weight: 700; font-size: 15px; color: var(--fg1); }
.home-bar-spacer { width: 40px; flex: none; }

/* hero — לוגו ממורכז שחופף את ה-cover */
.home-hero { position: relative; width: 100%; aspect-ratio: 16 / 7; max-height: 280px; background: var(--ph); overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.home-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,28,40,.18), transparent 42%); pointer-events: none; }
.home-logo-wrap { position: relative; height: 0; z-index: 2; }
.home-logo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 4px solid #fff; box-shadow: 0 6px 16px -6px rgba(20,28,40,.3);
  position: absolute; top: -48px; right: 50%; transform: translateX(50%); background: #fff;
}

.home-body { padding: 56px 18px 0; display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.home-name { font-size: 25px; font-weight: 800; text-align: center; margin: 0; letter-spacing: -.02em; color: var(--fg1); }

/* quick-actions — ממורכז; השורה כולה מוסתרת כשכולם כבויים (:empty) */
.quick-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.quick-actions:empty { display: none; }
.qa-btn {
  width: 64px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none;
  color: var(--fg2); font-weight: 600; font-size: 11.5px;
}
.qa-ic {
  width: 54px; height: 54px; border-radius: 16px; background: #fff; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--fg1); box-shadow: var(--sh-card); transition: transform .15s ease;
}
.qa-btn:active .qa-ic { transform: scale(.95); }
.qa-ic svg { width: 23px; height: 23px; display: block; }

/* CTA — מרכוז ומרווח */
.cta-wrap { margin-top: 20px; display: flex; justify-content: center; }
.home-body .cta { max-width: 420px; width: 100%; margin-inline: auto; }

/* row-link — כרטיס "התורים שלי" */
.row-link {
  margin-top: 12px; display: flex; align-items: center; gap: 13px; padding: 15px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-card);
  cursor: pointer; transition: transform .15s ease;
}
.row-link:active { transform: scale(.99); }
.row-link-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--green-50); display: grid; place-items: center; color: var(--green-600); flex: none; }
.row-link-ic svg { width: 20px; height: 20px; }
.row-link-tx { flex: 1; }
.row-link-tx b { display: block; font-size: 14.5px; font-weight: 700; color: var(--fg1); }
.row-link-tx small { font-size: 12.5px; color: var(--fg2); }
.row-link-chev { color: var(--fg3); display: flex; }
.row-link-chev svg { width: 18px; height: 18px; }

/* sections (עדכונים / גלריה) — class-ים ייעודיים, scoped */
.home-section { margin-top: 28px; }
.home-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 16px; font-weight: 700; color: var(--fg1); }
.home-sec-badge { width: 24px; height: 24px; border-radius: 8px; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; flex: none; }
.home-sec-badge svg { width: 14px; height: 14px; }

/* עדכונים */
.updates { display: flex; flex-direction: column; gap: 11px; }
/* אריח עדכון = "פתק" אלגנטי: גוון צהוב-בהיר אחיד (ללא גרדיאנט) ופינת-התחלה מקופלת (dog-ear). */
.update-card {
  position: relative; display: flex; padding: 15px;
  background: #fff8e3; border: 1px solid #f0dca6;
  border-radius: var(--r-xl); border-start-start-radius: 3px; /* פינת-ההתחלה "מיושרת" — בסיס לקיפול */
  box-shadow: 0 1px 2px rgba(160, 120, 20, .05), 0 7px 20px -12px rgba(190, 140, 30, .22);
}
/* קיפול-פינה (dog-ear) בפינת-ההתחלה העליונה — ההצצה למראה של פתק מודבק. גוון אחיד, מעט כהה מהרקע. */
.update-card::after {
  content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 16px; height: 16px;
  background: #ecdca3; clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-start-start-radius: 3px; box-shadow: -1px 1px 1.5px rgba(150, 110, 20, .12);
}
.update-ic svg { width: 18px; height: 18px; }
.update-tx { flex: 1; }
.update-title { font-weight: 700; margin-bottom: 2px; font-size: 14.5px; color: var(--fg1); }
.update-body { color: var(--fg2); font-size: 13px; white-space: pre-wrap; line-height: 1.55; }
.empty-note { padding: 26px 16px; text-align: center; background: var(--field-bg); border: 1px dashed var(--border); border-radius: var(--r-xl); color: var(--fg3); font-size: 13.5px; font-weight: 500; }

/* גלריה — carousel עם תמונה מרכזית גדולה ושכנות מציצות */
.carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 12%; direction: ltr; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.car-slide {
  flex: none; width: 76%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hair);
  scroll-snap-align: center; transform: scale(.9); opacity: .5; transition: transform .35s ease, opacity .35s ease;
}
.car-slide.is-active { transform: scale(1); opacity: 1; }
.car-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-empty { display: grid; place-items: center; background: var(--field-bg); color: var(--fg3); }
.car-empty svg { width: 34px; height: 34px; }
.home-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.home-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background .25s ease, width .25s ease; cursor: pointer; }
.home-dot.on { background: var(--green); width: 20px; border-radius: 99px; }

/* Calio promo */
.promo { margin-top: 30px; padding: 18px; background: linear-gradient(135deg, var(--green-50), #fff); border: 1px solid var(--green-100); border-radius: var(--r-xl); text-align: center; }
.promo p { font-size: 13.5px; color: var(--fg2); line-height: 1.6; margin-bottom: 12px; }
.promo p b { color: var(--fg1); font-weight: 700; }
.promo a { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--on-accent); background: var(--green); text-decoration: none; padding: 10px 20px; border-radius: var(--radius-pill); box-shadow: var(--sh-card); }
.promo a svg { width: 15px; height: 15px; }

/* drawer — shell פרזנטטיבי (נכנס מימין RTL, scrim כהה) */
.scrim { position: fixed; inset: 0; background: rgba(20,28,40,.42); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: 90; }
.scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; bottom: 0; right: 0; width: 84%; max-width: 340px; background: #fff; z-index: 100;
  border-radius: 24px 0 0 24px; box-shadow: -12px 0 40px -12px rgba(20,28,40,.35);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; padding: 22px;
}
.drawer.open { transform: translateX(0); }
.dr-close { align-self: flex-start; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: #fff; display: grid; place-items: center; color: var(--fg2); cursor: pointer; padding: 0; }
.dr-close svg { width: 18px; height: 18px; }
.dr-biz { display: flex; align-items: center; gap: 13px; padding: 16px 4px 18px; }
.dr-biz-lg { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
.dr-biz-lg.img-ph { border-radius: 50%; }
.dr-biz-tx b { display: block; font-size: 16px; font-weight: 800; color: var(--fg1); }
.dr-biz-tx small { font-size: 12.5px; color: var(--fg3); }
.dr-hr { height: 1px; background: var(--hair); margin: 6px 0 14px; }
.dr-item { display: flex; align-items: center; gap: 13px; padding: 13px 8px; border-radius: 13px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--fg1); }
.dr-item:hover { background: var(--field-bg); }
.dr-item svg { width: 20px; height: 20px; color: var(--fg2); }
.dr-label { font-size: 12px; font-weight: 700; color: var(--fg3); padding: 14px 8px 8px; }
.dr-contact { display: flex; gap: 10px; padding: 0 6px; }
.dr-contact-btn { width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--fg1); text-decoration: none; }
.dr-contact-btn svg { width: 21px; height: 21px; }
.dr-spacer { flex: 1; }
.dr-logout { display: flex; align-items: center; gap: 13px; padding: 14px 8px; border-radius: 13px; cursor: pointer; font-size: 15px; font-weight: 600; color: #c0392b; }
.dr-logout:hover { background: #fdf0ee; }
.dr-logout svg { width: 20px; height: 20px; }

/* אורח — הצעת כניסה בתחתית הדראוור. נבדלת מפריטי הניווט (dr-item) בכוונה:
   זו הפעולה שפותחת את כל השאר, ולא עוד שורה ברשימה. */
.dr-guest { padding: 4px 4px 2px; }
.dr-guest-tx { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--fg2); }
.dr-login { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 13px 14px; border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: var(--lead, #64BB73); transition: filter .15s ease, transform .12s ease; }
.dr-login:hover { filter: brightness(1.05); }
.dr-login:active { transform: scale(.985); }
.dr-login svg { width: 19px; height: 19px; }
.dr-login:focus-visible { outline: 3px solid rgba(0, 0, 0, .28); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH / VERIFY / OTP / DETAILS — עמודת-קריאה על הקנבס (ללא card עוטף)
   ═══════════════════════════════════════════════════════════════════════════ */
.scr-auth .brandbar, .scr-verify .brandbar, .scr-unavailable .brandbar,
.scr-otp .brandbar, .scr-details .brandbar { justify-content: center; margin-bottom: 8px; }
.scr-auth .head { margin-bottom: 8px; }
.scr-auth .social { display: flex; flex-direction: column; gap: 11px; }
.scr-auth .divider-or { margin: 8px 0; }
.scr-auth #toggle { align-self: center; margin-top: 4px; }
/* כפתור Google הרשמי (GIS/FedCM) — ממורכז, רוחב מלא כמו שאר הכפתורים */
/* כפתור Google: ה-#g המעוצב גלוי (זהה ל-Apple); כפתור GIS הרשמי מורנדר שקוף מעליו ותופס את הקליק.
   scaleY מותח את כפתור ה-40px של GIS לכיסוי מלא של ה-52px → אזור הקליק מכסה את כל הכפתור הגלוי. */
.scr-auth .gbtn { position: relative; }
.scr-auth .gslot {
  position: absolute; inset: 0; z-index: 2; opacity: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius-btn);
}
.scr-auth .gslot > div { width: 100% !important; transform: scaleY(1.45); transform-origin: center; }
/* topbar של מסכי הכניסה — ה-brandbar נשאר ממורכז בין כפתור החזרה למרווח. */
.scr-auth .auth-top, .scr-details .auth-top, .scr-otp .auth-top { margin-bottom: 4px; }
/* רמז in-app-webview — נסתר כברירת מחדל (hidden), מוצג רק כשמזוהה */
.auth-hint {
  display: flex; gap: 8px; margin-top: 12px; padding: 11px 13px;
  background: var(--green-50); border-radius: 12px;
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
.auth-hint[hidden] { display: none; }

/* שורת "מחוברים כ-" במסך השלמת הפרטים */
.acct-note {
  display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
  padding: 11px 13px; background: var(--green-50); border-radius: 12px;
  color: var(--muted); font-size: 13.5px;
}
.acct-note svg { color: var(--green-700); flex: none; }
.acct-note b { color: var(--ink); font-weight: 700; }

/* בורר מגדר (segmented) — מסך השלמת הפרטים. תווית "לא חובה" מעומעמת. */
.field label .opt { color: var(--fg3); font-weight: 500; font-size: 12px; }
.gender-seg {
  display: flex; border: 1.5px solid var(--field-border);
  border-radius: var(--radius-btn); overflow: hidden;
}
.gender-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 6px; background: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted);
  transition: background .15s, color .15s;
}
.gender-opt:not(:last-child) { border-inline-end: 1.5px solid var(--field-border); }
.gender-opt .gi { display: flex; }
.gender-opt:active { transform: scale(.98); }
.gender-opt.active { background: var(--green-50); color: var(--green-700); }
.scr-verify .head, .scr-unavailable .head { margin-bottom: 6px; }

/* otp: לוגו עסק בראש המסך (שדה קיים) */
.scr-otp .brand-logo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }

/* otp: input בודד יחיד (#code) שקוף מעל שכבת תאים פרזנטטיבית */
.scr-otp .otp { position: relative; width: 321px; max-width: 100%; height: 58px; margin: 4px auto 6px; direction: ltr; }
.scr-otp .otp .code-input {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none; outline: none;
  background: transparent; color: transparent; caret-color: transparent; z-index: 2; cursor: text;
  /* ⚠️ 16px ולא 1px: iOS מזנק זום אוטומטי בפוקוס על שדה מתחת ל-16px. כל עוד
     ‎user-scalable=no היה בתוקף זה לא קרה — עכשיו כשהזום מותר (WCAG 1.4.4),
     שדה קטן היה מקפיץ את המסך בכל הקלדת קוד. הטקסט ממילא שקוף, ולכן הגודל
     אינו נראה; השדה absolute ולכן גם אינו משפיע על הפריסה. */
  font-size: 16px;
}
.scr-otp .otp .cells { position: absolute; inset: 0; display: flex; justify-content: center; gap: 9px; pointer-events: none; z-index: 1; }
.scr-otp .otp .cell {
  width: 46px; height: 58px; border: 1.5px solid var(--field-border); border-radius: 14px; background: var(--field-bg);
  display: grid; place-items: center; font-size: 24px; font-weight: 700; color: var(--fg1);
  transition: border-color .16s, background .16s, box-shadow .16s, transform .12s;
}
.scr-otp .otp .cell.filled { border-color: var(--green-200); background: #fff; }
.scr-otp .otp .cell.active { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(100, 187, 116, .13); }
.scr-otp .otp .cell.pop { transform: scale(1.06); }

/* otp: resend (ללא טיימר — אין cooldown בצד-לקוח) */
.scr-otp .resend { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--fg2); }
.scr-otp .resend .resend-btn { background: none; border: none; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--green-600); cursor: pointer; padding: 0; }
.scr-otp .resend .resend-btn:hover { color: var(--green-700); }

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING — wizard ממוקד (tabs + funnel)
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs { display: flex; background: #edf0ef; border-radius: var(--radius-ctrl); padding: 4px; gap: 4px; }
.tab { flex: 1; text-align: center; padding: 11px; border-radius: 11px; font-weight: 700; font-size: 14.5px; cursor: pointer; color: var(--fg2); transition: background .18s, color .18s, box-shadow .18s; }
.tab.active { background: #fff; color: var(--fg1); box-shadow: var(--sh-card); }
.tab[data-dis] { opacity: .4; cursor: default; }
.scr-booking .tabs { margin-bottom: 4px; }

/* stepper — מחוון התקדמות ("שלב N מתוך M") */
.stepper { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.stepper .bars { display: flex; gap: 6px; }
.stepper .bars i { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--hair); transition: background .28s ease; }
.stepper .bars i.on { background: var(--green); }
.stepper .lbl { font-size: 12px; font-weight: 700; color: var(--green-600); letter-spacing: .02em; }

/* back link עדין */
.step-back { align-self: flex-start; margin-top: 4px; }

/* ── date calendar (לוח שבועיים) ── */
.daycal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; }
.daycal-title { font-size: 14.5px; font-weight: 700; color: var(--fg1); }
.daycal-arrow {
  width: 36px; height: 36px; flex: none; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: #fff; color: var(--fg1); font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s;
}
.daycal-arrow:hover { border-color: var(--green-200); background: var(--green-50); }
.daycal-arrow:disabled { opacity: .4; cursor: default; background: #fff; }
.daycal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.daycell {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
  padding: 9px 2px 7px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; font-family: inherit; color: var(--fg3);
  transition: border-color .15s, background .15s, transform .08s; box-shadow: var(--sh-card);
}
.daycell:hover { border-color: var(--green-200); }
.daycell:active { transform: scale(.97); }
.daycell .dc-wd { font-size: 11px; font-weight: 600; color: var(--fg3); }
.daycell .dc-num { font-size: 16px; font-weight: 700; color: var(--fg3); }
.daycell .dc-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
/* זמין — בולט; לא-זמין — מעומעם (לא מוסתר) */
.daycell.avail { color: var(--fg1); cursor: pointer; }
.daycell.avail .dc-wd { color: var(--fg2); }
.daycell.avail .dc-num { color: var(--fg1); }
.daycell.avail .dc-dot { background: var(--green); }
.daycell:not(.avail) { opacity: .55; }
.daycell.today { border-color: var(--green-200); }
.daycell.selected { border-color: var(--accent); background: var(--green-50); }
.daycell.selected .dc-num, .daycell.selected .dc-wd { color: var(--green-700); }
.daycal-msg { margin-top: 8px; }

/* ── confirm summary (סיכום ברור + פירוט מחיר) ── */
.summary { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-ctrl); box-shadow: var(--sh-card); overflow: hidden; }
.summary .srow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--hair); }
.summary .srow:last-child { border-bottom: none; }
.summary .srow .si { color: var(--green-600); display: flex; flex: none; }
.summary .srow .si svg { width: 19px; height: 19px; display: block; }
.summary .srow .sk { font-size: 12.5px; color: var(--fg3); font-weight: 600; }
.summary .srow .sv { font-size: 15px; color: var(--fg1); font-weight: 700; }
.summary .srow .scol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary .srow.total { background: var(--green-50); }
.summary .srow.total .sv { color: var(--green-700); font-size: 17px; }
.summary .srow.total .sk { color: var(--green-700); }

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE — פרופיל אישי (תצוגת נתונים + אבטחה). cards לקיבוץ-תוכן.
   ═══════════════════════════════════════════════════════════════════════════ */
.scr-profile .profile-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-ctrl); box-shadow: var(--sh-card); overflow: hidden; margin-bottom: 14px; }
.profile-hd { display: flex; align-items: center; gap: 13px; padding: 16px; }
.profile-av { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--green-50); color: var(--green-700); display: grid; place-items: center; flex: none; }
.profile-av svg { width: 24px; height: 24px; }
.profile-hd-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profile-hd-tx b { font-size: 16px; color: var(--fg1); }
.profile-hd-tx small { font-size: 12.5px; color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card .dr-hr { margin: 0; }
.profile-card .srow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--hair); }
.profile-card .srow:last-child { border-bottom: none; }
.profile-card .srow .si { color: var(--green-600); display: flex; flex: none; }
.profile-card .srow .si svg { width: 19px; height: 19px; display: block; }
.profile-card .srow .scol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-card .srow .sk { font-size: 12.5px; color: var(--fg3); font-weight: 600; }
.profile-card .srow .sv { font-size: 15px; color: var(--fg1); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-sec { padding: 14px 16px 16px; }
.profile-sec-ttl { font-size: 12.5px; font-weight: 700; color: var(--fg3); padding-bottom: 12px; }
.profile-note { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.profile-note svg { color: var(--green-700); flex: none; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECURITY CARD — שלב אשראי-ביטחון. עיצוב containers בלבד (cf-* + PayMe verbatim)
   ═══════════════════════════════════════════════════════════════════════════ */
.consent { display: flex; gap: 10px; align-items: flex-start; background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius-ctrl); padding: 13px 15px; margin: 4px 0 14px; }
.consent .ic { color: var(--green-700); flex: none; margin-top: 1px; display: flex; }
.consent p { font-size: 13.5px; color: var(--fg1); line-height: 1.55; margin: 0; }
.card-fields { display: flex; flex-direction: column; gap: 13px; }
.card-fields label { font-size: 13px; font-weight: 600; color: var(--fg1); display: block; margin-bottom: 7px; padding-inline: 2px; }
.cf-field { height: 52px; border: 1.5px solid var(--field-border); border-radius: var(--radius-ctrl); background: #fff; padding: 0 15px; display: flex; align-items: center; transition: border-color .16s, box-shadow .16s; }
.cf-field:focus-within { border-color: var(--green); box-shadow: var(--ring); }
.card-fields .ctrl { background: #fff; }
.cf-field.invalid { border-color: var(--error); }
.cf-row { display: flex; gap: 11px; }
.cf-row > * { flex: 1; min-width: 0; }
.cf-save { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--fg1); font-weight: 500; margin: 14px 0 2px; cursor: pointer; }
.cf-save input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
/* Z-Credit route-2 hosted capture (iframe). PayMe uses inline Hosted Fields above. */
.zc-frame-wrap { width: 100%; margin: 10px 0 4px; border: 1.5px solid var(--field-border); border-radius: var(--radius-ctrl); overflow: hidden; background: #fff; }
.zc-frame { width: 100%; height: 560px; max-width: 100%; border: 0; display: block; background: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING FUNNEL — provider card / inline slots / waitlist CTA / approval banner /
   policy consent + agree-checkbox. (Phase 1 — שינוי זרימה + UX)
   ═══════════════════════════════════════════════════════════════════════════ */

/* כרטיס נותן-שירות (שלב ראשון) */
.prov-card {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px;
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-card); cursor: pointer; font-family: inherit; text-align: start;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.prov-card:hover { border-color: var(--green-200); box-shadow: var(--sh-raised); }
.prov-card:active { transform: scale(.99); }
.prov-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #e8dcc8, #d8c7ab); display: grid; place-items: center; font-weight: 800; color: #8a7a63; font-size: 21px; flex: none; }
.prov-tx { flex: 1; min-width: 0; }
.prov-tx b { font-size: 16px; font-weight: 700; display: block; color: var(--fg1); }
.prov-tx small { font-size: 12.5px; color: var(--fg2); }
.prov-chev { color: var(--fg3); display: flex; flex: none; }
.prov-chev svg { width: 18px; height: 18px; }

/* multi-service: כרטיס שירות + stepper כמות + bottom-bar צבירה */
/* כרטיס סוג-שירות (single+multi) — בולט: גבוה, לבן עם צל + בורדר עדין בגוון הצבע המוביל
   (--green-200, נגזר ב-onColor), שם למעלה, משך מתחת, ומחיר בצד הנגדי.
   .sel (multi) = טבעת ירוקה מלאה מעל הבורדר העדין. */
.svc-card { display: flex; align-items: center; gap: 13px; width: 100%; padding: 17px 18px; background: #fff; border: 1.5px solid var(--green-200); border-radius: var(--radius-ctrl); box-shadow: var(--sh-card); margin-bottom: 11px; cursor: pointer; text-align: start; font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s, transform .08s; }
.svc-card:hover { box-shadow: var(--sh-raised); }
.svc-card:active { transform: scale(.99); }
.svc-card.sel { background: var(--green-50); box-shadow: 0 0 0 2px var(--green), var(--sh-card); }
.svc-card .si { flex: 1; min-width: 0; }
.svc-card .si b { font-size: 16px; font-weight: 700; display: block; color: var(--fg1); }
.svc-card .si small { font-size: 13px; color: var(--fg2); display: block; margin-top: 3px; }
.svc-card .price { font-weight: 800; font-size: 15.5px; color: var(--fg1); white-space: nowrap; margin-inline-start: 8px; }
.add-btn { flex: none; width: 34px; height: 34px; border-radius: 11px; border: 1.5px solid var(--green); background: #fff; color: var(--green-700); font-size: 22px; font-weight: 600; line-height: 1; display: grid; place-items: center; cursor: pointer; font-family: inherit; }
/* "צור קשר" — כפתור טקסט ברוחב התוכן, בשורה אחת (ה-34px של "+" שבר אותו לשתי שורות). */
.add-btn.contact-btn { width: auto; padding: 0 12px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.stepper-q { flex: none; display: flex; align-items: center; gap: 4px; background: #fff; border: 1.5px solid var(--green-200); border-radius: 11px; padding: 3px; }
.stepper-q button { width: 28px; height: 28px; border: none; background: var(--green-50); color: var(--green-700); border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.stepper-q span { min-width: 22px; text-align: center; font-weight: 800; font-size: 14px; }
/* קטגוריות שירותים (פר איש צוות): צ'יפים דביקים מתחת לסרגל העליון + כותרת לכל קטגוריה.
   הצ'יפים נגללים לרוחב; margin שלילי מחזיר אותם לרוחב העמודה המלא. */
.svc-cats {
  position: sticky; top: 40px; z-index: 15;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: -4px -18px 0; padding: 8px 18px 10px; background: var(--bg);
}
.svc-cats::-webkit-scrollbar { display: none; }
.svc-cat-chip {
  flex: none; height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--border); background: #fff; color: var(--fg1);
  font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .08s;
}
.svc-cat-chip:active { transform: scale(.97); }
.svc-cat-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.svc-cat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ⚠️ בלי אנימציה לסקשן: בבחירה מרובה הרשימה מצוירת מחדש בכל לחיצה, והכניסה הייתה
   מהבהבת. הכניסה הרכה באה מ-.card.fade-in העוטף. */
.svc-sec + .svc-sec { margin-top: 12px; }
.svc-sec-title { font-size: 17px; font-weight: 800; color: var(--fg1); letter-spacing: -.01em; margin: 4px 2px 11px; }
@media (prefers-reduced-motion: reduce) { .svc-cat-chip { transition: none; } }

/* ── כותרת השלב בסרגל העליון של הקביעה (QA 16.10) ── */
.mb-topbar.bk-bar .bk-ttl { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.015em; color: var(--fg1); line-height: 1.2; text-align: center; flex: 1; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── השלב ממלא את גובה המסך, כדי שהאזור הצף ישב תמיד בתחתית — גם כשהתוכן קצר
   (בלי זה, ביום בלי שעות הכפתור "ריחף" באמצע המסך). בתוכן ארוך — sticky. ── */
.scr-booking { min-height: 100dvh; }
.scr-booking #tabbody { flex: 1; display: flex; flex-direction: column; }
.scr-booking #tabbody > .card { flex: 1; }
.scr-booking .step-dock, .scr-booking .bb { margin-top: auto; }
.scr-booking:has(.step-dock), .scr-booking:has(.bb) { padding-bottom: 0; }

/* ── אזור צף בתחתית השלב (QA 16.10): הודעה + תוכן (תיבת אישור) + הכפתור. ── */
.step-dock {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 10px;
  margin: 6px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg); box-shadow: 0 -8px 20px rgba(20, 28, 40, .07); border-top: 1px solid var(--hair, #f0f2f5);
}
.step-dock .error-text:empty { display: none; }
.step-dock .cta.is-off, .step-dock .cta.is-off:hover { background: #cfd5dc; color: #fff; box-shadow: none; transform: none; cursor: not-allowed; }
.step-dock .agree { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-ctrl); padding: 12px 13px; box-shadow: var(--sh-card); transition: border-color .15s; }
.step-dock .agree.on { border-color: var(--green-200); }
.step-dock .agree .albl { font-size: 13.5px; }
.dock-tip {
  display: none; align-items: center; gap: 8px; padding: 10px 13px;
  border-radius: 12px; background: var(--red-50); color: var(--red-700); border: 1px solid #f3c5bf;
  font-size: 14px; font-weight: 700; line-height: 1.4;
}
.dock-tip .dt-ic { display: flex; flex: none; }
.dock-tip .dt-ic svg { width: 18px; height: 18px; }
.dock-tip.show { display: flex; animation: dock-tip-in .22s ease both; }
@keyframes dock-tip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nudge { animation: nudge .42s ease; }
@keyframes nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .dock-tip.show, .nudge, .slots-empty { animation: none; } }

/* .bb — בורר השירותים: בר תחתון *דביק* שנשאר גלוי בתחתית המסך מחוץ לגלילה.
   margin שלילי + padding מחזירים אותו לרוחב מלא של העמודה; gradient מרכך מעבר. */
.bb {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  margin: 6px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  /* QA 16.10 — רקע מלא + צל עדין למעלה: עם מעבר שקוף, כותרת קטגוריה "בצבצה" מתחת לטקסט. */
  background: var(--bg); box-shadow: 0 -8px 20px rgba(20, 28, 40, .07); border-top: 1px solid var(--hair, #f0f2f5);
}
.bb .info { flex: 1; min-width: 0; }
/* QA 16.10 — היה 14/12 וכמעט לא נקרא. */
.bb .info b { font-size: 17px; font-weight: 800; display: block; color: var(--fg1); }
.bb .info small { font-size: 14.5px; font-weight: 500; color: var(--fg2); }
.bb .cta { width: auto; padding: 0 30px; }
/* שורת-שירות בסיכום (multi) */
.svc-line { font-size: 13.5px; color: var(--fg1); padding: 2px 0; display: flex; justify-content: space-between; gap: 12px; }

/* שיעורים — אג'נדה: סרגל-סינון (הכל / סינון לפי יום) + כותרות-יום בין הקבוצות */
.cls-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; position: relative; }
.cls-fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 1.5px solid var(--field-border); border-radius: var(--radius-pill); background: #fff;
  font-size: 13.5px; font-weight: 600; color: var(--fg1); cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.cls-fchip:hover { border-color: var(--green-200); background: var(--green-50); }
.cls-fchip .ci { display: inline-flex; }
.cls-fchip .ci svg { width: 17px; height: 17px; display: block; }
.cls-fchip.active { border-color: var(--green); background: var(--green-50); color: var(--green-700); }
/* input[type=date] נסתר — משמש רק כבורר; ה-chip "סינון לפי יום" פותח אותו (showPicker). */
.cls-day-header { font-size: 13px; font-weight: 700; color: var(--fg2); margin: 16px 2px 8px; }
.cls-day-header:first-child { margin-top: 6px; }

/* כותרת אזור-השעות + מצבי טעינה/ריק (inline מתחת ללוח) */
.slots-head { margin-top: 18px; }
.slots-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 0; color: var(--fg3); font-size: 13px; }
.gspin { width: 30px; height: 30px; border: 3px solid var(--hair); border-top-color: var(--green); border-radius: 50%; animation: rot .7s linear infinite; }
/* QA 16.10 — "אין שעות פנויות" היה טקסט אפור וחלש; עכשיו כרטיס ברור. */
.slots-empty {
  display: flex; align-items: center; gap: 13px; margin-top: 4px; padding: 16px;
  border-radius: var(--radius-ctrl); background: #fff6e6; border: 1px solid #f6dfb3;
  animation: fade-in .25s ease both;
}
.slots-empty .se-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #b7791f; display: grid; place-items: center; }
.slots-empty .se-ic svg { width: 21px; height: 21px; }
.slots-empty .se-tx b { display: block; font-size: 16px; font-weight: 800; color: var(--fg1); }
.slots-empty .se-tx small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--fg2); }

/* כפתור רשימת המתנה (ghost ירוק, בתחתית כל יום) + באנר "כבר ברשימה" */
.wl-cta {
  width: 100%; min-height: 50px; margin-top: 14px; padding: 0 16px;
  border: 1.5px solid var(--green); background: #fff; color: var(--green-700);
  border-radius: var(--radius-btn); font-family: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .15s, border-color .15s;
}
.wl-cta:hover { background: var(--green-50); }
.wl-cta svg { width: 18px; height: 18px; flex: none; }
.wl-cta.done { background: var(--green-50); border-color: var(--green-100); color: var(--green-700); cursor: default; }
.booking-item .wl-cta { margin-top: 3px; }
/* ספינר ירוק קטן לכפתורי-ghost בהירים (רשימת המתנה לשיעור) */
.mini-spin { width: 18px; height: 18px; border: 2.5px solid var(--green-100); border-top-color: var(--green); border-radius: 50%; animation: rot .7s linear infinite; display: inline-block; }
.wl-banner { margin-top: 14px; background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius-ctrl); padding: 12px 15px; }
.wl-banner p { margin: 0 0 2px; font-size: 13.5px; color: var(--fg1); }
.wl-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.link-btn.danger { color: var(--danger, #c0392b); }
.link-btn.danger:hover { color: #a5281a; background: rgba(192, 57, 43, 0.07); }

/* באנר מידע (אישור-עסק) — ענבר */
.banner { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius-ctrl); font-size: 13.5px; line-height: 1.55; }
.banner p { margin: 0; }
.banner .bic { flex: none; margin-top: 1px; display: flex; }
.banner .bic svg { width: 20px; height: 20px; }
.banner.info { background: var(--amber-50); border: 1px solid #f6e3b8; color: #8a5a13; }
.banner.info b { color: var(--amber-700); }

/* צ׳קבוקס הסכמה למדיניות-ביטולים (מנעל את כפתור הקביעה) */
.agree { display: flex; align-items: flex-start; gap: 11px; padding: 4px 2px; cursor: pointer; }
.agree .abox { flex: none; width: 22px; height: 22px; border: 2px solid var(--field-border); border-radius: 7px; display: grid; place-items: center; transition: background .15s, border-color .15s; margin-top: 1px; }
.agree.on .abox { background: var(--green); border-color: var(--green); }
.agree .abox svg { width: 14px; height: 14px; color: var(--on-accent); opacity: 0; transition: opacity .15s; }
.agree.on .abox svg { opacity: 1; }
.agree .albl { font-size: 13px; color: var(--fg1); line-height: 1.5; }
.agree .albl b { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   SUCCESS / DIALOG / MY-BOOKINGS
   ═══════════════════════════════════════════════════════════════════════════ */
.scr-success .ok-badge {
  width: 84px; height: 84px; border-radius: 50%; background: var(--green-50); border: 1px solid var(--green-100);
  color: var(--green); display: flex; align-items: center; justify-content: center; margin: 6px auto 8px;
  animation: pop-in .35s cubic-bezier(.34, 1.56, .64, 1);
}
/* pending-approval variant — שעון-חול ענבר במקום הצ'ק הירוק (תור ממתין לאישור). */
.scr-success .ok-badge.pending { background: var(--amber-50); border-color: #f6e3b8; color: var(--amber-700); }
.scr-success .ok-badge svg { width: 42px; height: 42px; }
.scr-success .ok-badge path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .45s .15s ease forwards; }
/* לשעון-החול (pending) אין draw-stroke — מוצג מלא מיד. */
.scr-success .ok-badge.pending path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* my-bookings — סטטיסטיקה ככרטיס-קיבוץ אמיתי */
.stat-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-ctrl); box-shadow: var(--sh-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.stat-card .stat { font-size: 14px; color: var(--fg2); margin: 0; }
.stat-card .stat b { color: var(--green-600); font-weight: 800; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 26px 16px; color: var(--fg2); background: #fff; border: 1.5px dashed var(--border); border-radius: var(--radius-ctrl); }
.empty-state .hero-ic { width: 52px; height: 52px; margin: 0 0 2px; }
.empty-state .hero-ic svg { width: 24px; height: 24px; }
.empty-state p { margin: 0; font-size: 14px; }

/* dialog (overlay = אלמנט חיצוני עם listener — לא לשנות מבנה) */
.overlay { position: fixed; inset: 0; background: rgba(20,28,40,.42); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; animation: fade-in .2s ease; }
.dialog { background: #fff; border-radius: var(--radius-dialog); padding: 26px 22px; max-width: 380px; width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: center; box-shadow: var(--sh-pop); animation: pop-in-sm .26s cubic-bezier(.34,1.4,.64,1); }
@keyframes pop-in-sm { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dialog .head { margin-bottom: 4px; }
.dialog .head p { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETONS — חיווי טעינת תוכן
   ═══════════════════════════════════════════════════════════════════════════ */
.skel { position: relative; overflow: hidden; background: var(--hair); }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: skel 1.2s ease-in-out infinite;
}
@keyframes skel { to { transform: translateX(100%); } }
.skel-cell { height: 56px; border-radius: var(--r-sm); }
.skel-chip { height: 46px; border-radius: var(--radius-ctrl); }
.skel-line { height: 12px; border-radius: 7px; }
.skel-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-ctrl); padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sh-card); }

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATION — כניסת מסך/תוכן עדינה; prefers-reduced-motion מכובד
   ═══════════════════════════════════════════════════════════════════════════ */
.screen { animation: screen-in .34s cubic-bezier(.4,.05,.2,1); }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade-in .28s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .screen, .fade-in, .cta, .ctrl, .sbtn, .choice, .daycell, .overlay, .dialog, .scr-success .ok-badge,
  .car-slide, .home-dot, .drawer, .scrim, .qa-ic, .row-link, .splash, .splash-logo,
  .qb-row, .qr-card, .qr-tick {
    animation: none !important; transition: none !important;
  }
  /* ⚠️ ה-stagger עובד דרך animation-delay. ביטול האנימציה לבדו היה משאיר את
     ההשהיה בתוקף ואת הכרטיסים בלתי-נראים; לכן גם היא מתאפסת במפורש. */
  .qr-card { animation-delay: 0ms !important; opacity: 1 !important; transform: none !important; }
  .cta-check path, .scr-success .ok-badge path { animation: none; stroke-dashoffset: 0; }
  .spin { animation: rot 1.4s linear infinite; }
  .skel::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — web (לא טלפון ממורכז) ומובייל
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .screen { padding-top: 40px; padding-bottom: 56px; }
  .home-hero { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .slot-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .home { max-width: 760px; }
  .scr-home { max-width: 760px; }
  .home-hero { max-height: 320px; aspect-ratio: 21 / 8; }
  .home-body { padding-left: 28px; padding-right: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY BOOKINGS — "התורים שלי" (פרזנטטיבי בלבד; מחובר ל-screenMyBookings)
   ═══════════════════════════════════════════════════════════════════════════ */
/* top bar ייעודי למסך זה (back + כותרת ממורכזת). אינו ה-.topbar המשותף. */
.mb-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; background: var(--bg); }
.mb-topbar .mb-back { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff; display: grid; place-items: center; color: var(--fg1); cursor: pointer; padding: 0; }
.mb-topbar .mb-back svg { width: 21px; height: 21px; }
.mb-topbar .mb-ttl { font-weight: 700; font-size: 16px; color: var(--fg1); }
.mb-topbar .mb-spacer { width: 40px; }

/* stats strip */
.scr-mybookings .stats { display: flex; gap: 12px; }
.scr-mybookings .stat { flex: 1; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-xl); padding: 14px 16px; box-shadow: var(--sh-card); }
.scr-mybookings .stat .n { font-size: 23px; font-weight: 800; line-height: 1; color: var(--fg1); }
.scr-mybookings .stat .l { font-size: 12px; color: var(--fg2); font-weight: 600; margin-top: 6px; }

/* segmented control */
.scr-mybookings .segmented { display: flex; gap: 4px; padding: 4px; background: var(--field-bg); border: 1px solid var(--hair); border-radius: 14px; }
.scr-mybookings .seg { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--fg2); padding: 10px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: all .2s ease; }
.scr-mybookings .seg .cnt { font-size: 11px; font-weight: 700; background: var(--border); color: var(--fg2); border-radius: 99px; min-width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.scr-mybookings .seg.on { background: #fff; color: var(--fg1); box-shadow: var(--sh-card); }
.scr-mybookings .seg.on .cnt { background: var(--green-100); color: var(--green-700); }

/* list */
.scr-mybookings .list { display: flex; flex-direction: column; gap: 12px; }
.scr-mybookings .list[hidden] { display: none; }

/* appointment card */
.appt { display: flex; gap: 14px; padding: 15px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-card); }
.appt.past { background: var(--field-bg); box-shadow: none; }
.appt .date-chip { flex: none; width: 60px; border-radius: 14px; background: var(--green-50); border: 1px solid var(--green-100); text-align: center; padding: 10px 4px; align-self: flex-start; }
.appt.past .date-chip { background: #fff; border-color: var(--border); }
.appt .date-chip .dow { font-size: 11px; font-weight: 700; color: var(--green-700); }
.appt.past .date-chip .dow { color: var(--fg3); }
.appt .date-chip .dnum { font-size: 22px; font-weight: 800; color: var(--fg1); line-height: 1.1; }
.appt .date-chip .mon { font-size: 11px; font-weight: 600; color: var(--fg2); }
.appt .body { flex: 1; min-width: 0; }
.appt .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.appt .svc { font-size: 15.5px; font-weight: 700; color: var(--fg1); }
.appt .staff { font-size: 13px; color: var(--fg2); margin-top: 2px; }
/* שם איש הצוות — המידע שהלקוח באמת מחפש בשורה הזו; שם העסק נשאר משני. */
.appt .staff .who { color: var(--fg1); font-weight: 600; }
.appt .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.appt .when { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg2); font-weight: 500; }
/* ── תשלום על תור (שלב 8) ─────────────────────────────────────────────────
   .meta כבר space-between עם ילד יחיד; המחיר הוא הילד השני ולכן נדחף לקצה
   השני בלי שינוי בפריסה הקיימת. */
.appt .price { font-size: 13.5px; font-weight: 700; color: var(--fg1); display: inline-flex; align-items: center; gap: 6px; }
.appt .badge.b-paid { background: rgba(60,160,90,.12); color: #2f7d4f; }
.appt .badge.b-partial { background: rgba(230,160,30,.14); color: #96660a; }
.appt .badge.b-punch { background: rgba(90,120,220,.12); color: #3a54a8; }
/* ── שיעור ─────────────────────────────────────────────────────────────────
   אייטם שיעור היה זהה לחלוטין לתור אישי. שלושה סימנים מבחינים, מהחזק לעדין:
   תג "שיעור", ספירת נרשמים לצד השעה, ופס ימני בגוון השיעורים. */
.appt .badge.b-class { background: var(--green-50); color: var(--green-700); }
.appt .cls-count { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 10px; font-size: 12.5px; font-weight: 600; color: var(--fg2); }
.appt .cls-count .ti { display: inline-flex; color: var(--fg3); flex: none; }
.appt .cls-count .ti svg { width: 14px; height: 14px; display: block; }
.appt.is-class { border-inline-start: 3px solid var(--green-200); }
/* קבוצת המחיר — ילד יחיד ב-‎.meta, כדי ש-space-between ימשיך לעבוד כמתוכנן. */
.appt .pricegrp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* היתרה לתשלום — משנית למחיר, ולכן קטנה ומעומעמת ולא תג נוסף שמתחרה בו. */
.appt .rest { font-size: 12px; font-weight: 600; color: var(--fg2); }
/* 🔴 הפעולות מוערמות, לא בשורה: תשלום למעלה, ביטול מתחתיו. הן היו זו-לצד-זו
   כי ‎.actions היה ‎flex‎ בשורה — ההורה קבע, לא ה-HTML. */
.appt .actions { margin-top: 11px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* 🔴 גיאומטריה אחת לשני הכפתורים. "אותו כפתור, רק אדום" נשבר ברגע שכל אחד
   מקבל מידות משלו — ולכן הן מוגדרות פעם אחת, והצבע בלבד נפרד. */
.appt .mb-pay, .appt .mb-cancel {
  width: 100%; min-height: 40px; padding: 9px 14px; border: 0; cursor: pointer;
  border-radius: 10px; font-size: 14px; font-weight: 700; font-family: inherit;
  transition: transform .12s ease, opacity .15s ease;
  /* המרכוז מפורש ולא נסמך על ברירת המחדל של הדפדפן ל-<button>. */
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
}
.appt .mb-pay { background: var(--lead, #64BB73); color: #fff; }
.appt .mb-cancel { background: var(--red-700); color: #fff; }
.appt .mb-pay:disabled, .appt .mb-cancel:disabled { opacity: .75; cursor: default; }
.appt .mb-pay:not(:disabled):active,
.appt .mb-cancel:not(:disabled):active { transform: scale(.985); }
.appt .mb-pay.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* ספינר — חיווי עבודה בזמן שהבקשה בדרך והדף עומד לנווט החוצה. */
.appt .mb-pay .spin {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: calio-spin .6s linear infinite;
}
@keyframes calio-spin { to { transform: rotate(360deg); } }
/* המחיר והתגים נכנסים ברכות יחד עם הכרטיס, בלי לקפוץ. */
.appt .price, .appt .mb-receipt { animation: calio-rise .28s ease both; }
@keyframes calio-rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .appt .price, .appt .mb-receipt { animation: none; }
  .appt .mb-pay .spin { animation-duration: 1.6s; }
  .appt .mb-pay, .appt .mb-cancel { transition: none; }
}
/* הקישור למסמך נשאר קישור — הוא אינו פעולה, ולכן אינו נמתח לרוחב.
   הקו התחתון על הטקסט בלבד: קו שנמתח גם מתחת לאייקון נראה כמו תקלה. */
.appt .mb-receipt { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--fg2); text-decoration: none; }
.appt .mb-receipt .lbl { text-decoration: underline; text-underline-offset: 3px; }
.appt .mb-receipt .ti { display: inline-flex; flex: none; color: var(--fg3); }
.appt .mb-receipt .ti svg { width: 15px; height: 15px; display: block; }
.appt .when .ti { display: inline-flex; color: var(--fg3); flex: none; }
.appt .when .ti svg { width: 15px; height: 15px; display: block; }

/* status badge variants (B2: רק b-wait / b-cancel בשימוש; השאר מוגדרים לעקביות) */
.badge.b-ok { background: var(--green-50); color: var(--green-700); }
.badge.b-wait { background: var(--amber-50); color: var(--amber-700); }
.badge.b-done { background: var(--field-bg); color: var(--fg2); border: 1px solid var(--border); }
.badge.b-cancel { background: var(--red-50); color: var(--red-700); }

/* empty state */
.appt-empty { padding: 40px 16px; text-align: center; }
.appt-empty .ic { width: 64px; height: 64px; border-radius: 20px; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; margin: 0 auto 16px; }
.appt-empty .ic svg { width: 30px; height: 30px; }
.appt-empty h3 { font-size: 16px; font-weight: 700; color: var(--fg1); }
.appt-empty p { font-size: 13.5px; color: var(--fg2); margin-top: 6px; }
.appt-empty .empty-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; height: 48px; padding: 0 24px; border: none; border-radius: var(--radius-btn); background: var(--green); color: var(--on-accent); font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: var(--cta-shadow); }
.appt-empty .empty-cta:hover { background: var(--green-600); }
.appt-empty .empty-cta svg { width: 19px; height: 19px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM SHEET — דיאלוג שנפתח מלמטה
   ═══════════════════════════════════════════════════════════════════════════
   נבנה מאותם טוקנים של שאר האתר (--radius-dialog · --sh-pop · --green-50).
   למה גיליון ולא .dialog הממורכז: החלטת-ביטול היא מסך-משנה עם תוכן — כותרת,
   הסבר-מדיניות, סכום ושתי פעולות — ולא שאלת כן/לא. הגיליון נותן לזה מקום,
   נשאר קרוב לאגודל במובייל, ומרווח-הבטיחות התחתון (safe-area) מוגן.
   בדסקטופ הוא נשאר ברוחב עמודת-הקריאה (--col) וממורכז אופקית. */
.sheet-ov {
  position: fixed; inset: 0; background: rgba(20, 28, 40, .46);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 60; animation: fade-in .18s ease;
}
.sheet {
  width: 100%; max-width: var(--col); background: var(--surface);
  border-radius: var(--radius-dialog) var(--radius-dialog) 0 0;
  box-shadow: var(--sh-pop);
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 88dvh; overflow-y: auto;
  animation: sheet-up .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sheet-up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
/* ידית-אחיזה — הרמז הוויזואלי היחיד לכך שהמשטח נגרר/נסגר */
.sheet-grab { width: 42px; height: 4px; border-radius: 999px; background: var(--border); margin: 2px auto 16px; }
.sheet-head { text-align: center; margin-bottom: 14px; }
.sheet-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--fg1); margin: 0; }
.sheet-head p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg2); text-wrap: pretty; }
.sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

/* שורת-סכום — הנתון שמחייב החלטה. מסגרת עדינה, בלי אדום: זו עובדה, לא אזהרה. */
.amount-row {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--border); border-radius: var(--radius-ctrl);
  padding: 15px 16px; background: var(--surface);
}
.amount-row .k { font-size: 14px; color: var(--fg2); }
.amount-row .v { font-size: 21px; font-weight: 800; color: var(--fg1); letter-spacing: -.02em; }
.amount-row + .amount-note { margin: 9px 2px 0; font-size: 12.5px; color: var(--fg3); line-height: 1.55; }

/* פירוט-מדיניות — נייטרלי (אפור), לא צהוב-אזהרה. הטון הוא הסבר, לא נזיפה. */
.policy-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--field-bg); border: 1px solid var(--line);
  border-radius: var(--radius-ctrl); padding: 13px 15px; margin-bottom: 14px;
}
.policy-note .ic { color: var(--fg2); flex: none; margin-top: 1px; display: flex; }
.policy-note p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--fg2); }
.policy-note b { color: var(--fg1); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROCESSING — חסימה מלאה בזמן פעולה כספית
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ אין כאן שום דרך-סגירה: לא לחיצה על הרקע, לא Esc, לא כפתור. בזמן שהחיוב
   רץ בשרת, כל אינטראקציה נוספת עלולה להיקרא כניסיון שני. */
.proc-ov {
  position: fixed; inset: 0; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 90; animation: fade-in .16s ease;
}
.proc-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 32px; text-align: center; }
.proc-ring { width: 46px; height: 46px; border: 3px solid var(--green-100); border-top-color: var(--green); border-radius: 50%; animation: rot .75s linear infinite; }
.proc-card .t { font-size: 16px; font-weight: 700; color: var(--fg1); }
.proc-card .s { font-size: 13.5px; color: var(--fg2); line-height: 1.55; max-width: 260px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESULT — אייקון-תוצאה בגיליון
   ═══════════════════════════════════════════════════════════════════════════ */
.result-ic {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 2px auto 14px; background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-700);
  animation: result-pop .34s cubic-bezier(.34, 1.4, .64, 1) both;
}
.result-ic svg { width: 26px; height: 26px; }
.result-ic.neutral { background: var(--field-bg); border-color: var(--line); color: var(--fg2); }
@keyframes result-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* סיכום שורות בגיליון-התוצאה — key/value דקיק, בלי קופסה נוספת */
.sheet-lines { border-top: 1px solid var(--line); margin-top: 4px; }
.sheet-lines .ln { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.sheet-lines .ln .k { font-size: 13.5px; color: var(--fg2); }
.sheet-lines .ln .v { font-size: 14px; font-weight: 700; color: var(--fg1); }

@media (prefers-reduced-motion: reduce) {
  .sheet, .result-ic { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD CAPTURE — מצבי טעינה במסך הזנת הכרטיס
   ═══════════════════════════════════════════════════════════════════════════ */
/* פתיחת ה-session רצה בשרת. טקסט לבדו נקרא כמסך תקוע — הספינר הוא ההבדל. */
.zc-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 0 26px; }
.zc-loading p { margin: 0; font-size: 14px; color: var(--fg2); }

/* שכבה מעל ה-iframe עד שהעמוד המתארח נטען — במקום מלבן לבן ריק */
.zc-frame-wrap { position: relative; }
.zc-frame-load {
  position: absolute; inset: 0; background: #fff; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s ease;
}
.zc-frame-load.done { opacity: 0; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK BOOKING — "תור מהיר"
   טוקנים קיימים בלבד (--green / --fg* / --border / --radius-*). הכרטיס הוא
   וריאציה על .svc-card הקיים ולא רכיב זר — הפיצ'ר צריך להיראות כחלק מהאתר.
   ═══════════════════════════════════════════════════════════════════════════ */

/* כניסה — שורה בשפת ‎.row-link שכבר קיימת במסך הבית, ולא כפתור חדש. ההבדל
   היחיד הוא אריח האייקון בענבר: הוא מבדיל בלי להתחרות ב-CTA הירוק שמעליו,
   ומשתמש באותו צבע של האייקון במסך ההגדרות באפליקציה (#F39C12) — אותו פיצ'ר,
   אותו סימן, בשני הצדדים. */
.qb-row { margin-top: 10px; }
.qb-ic { background: #fef3e2; color: #d98218; }
.qb-row:hover { box-shadow: var(--sh-raised); }
.qb-row:focus-visible { outline: 3px solid #F39C12; outline-offset: 2px; }

/* הערת "המחיר משתנה" — מידע, לא אזהרה. נייטרלי ולא צהוב-מסוכן. */
.qb-note { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px;
  padding: 11px 13px; border-radius: var(--radius-ctrl);
  background: var(--field-bg); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.55; color: var(--fg2); }
.qb-note-ic { flex: none; color: var(--fg3); }
.qb-note-ic svg { width: 17px; height: 17px; display: block; }

/* סרגל תחתון קבוע לשני מסכי הזרימה */
.qb-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.qb-foot-tx { font-size: 13.5px; color: var(--fg2); margin-bottom: 11px; text-align: center; }

/* ── כרטיס תוצאה — היררכיה בשלוש רמות: מתי · אצל מי · כמה ── */
.qr-list { display: flex; flex-direction: column; gap: 11px; }
.qr-card { position: relative; display: grid; gap: 5px; width: 100%;
  padding: 15px 17px; text-align: start; cursor: pointer; font-family: inherit;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-ctrl); box-shadow: var(--sh-card);
  transition: border-color .15s, box-shadow .15s, background .15s, transform .08s;
  /* stagger — כל כרטיס נכנס 40ms אחרי קודמו. --qr-i מוזרק ב-JS. */
  animation: qr-in .32s cubic-bezier(.4,.05,.2,1) both;
  animation-delay: calc(var(--qr-i, 0) * 40ms); }
@keyframes qr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qr-card:hover { box-shadow: var(--sh-raised); border-color: var(--green-200); }
.qr-card:active { transform: scale(.99); }
.qr-card.sel { background: var(--green-50); border-color: var(--green);
  box-shadow: 0 0 0 1.5px var(--green), var(--sh-card); }
.qr-card:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.qr-when { font-size: 17.5px; font-weight: 800; color: var(--fg1); letter-spacing: -.2px; }
.qr-who { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--fg2); }
.qr-av { flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--green-50); color: var(--green-700); }
.qr-av svg { width: 14px; height: 14px; }
.qr-meta { font-size: 13px; color: var(--fg3); font-weight: 600; }

/* סימן הבחירה — מופיע רק בכרטיס הנבחר */
.qr-tick { position: absolute; inset-inline-end: 15px; top: 50%; transform: translateY(-50%) scale(.6);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #fff; opacity: 0;
  transition: opacity .16s ease, transform .16s cubic-bezier(.34,1.56,.64,1); }
.qr-tick svg { width: 15px; height: 15px; }
.qr-card.sel .qr-tick { opacity: 1; transform: translateY(-50%) scale(1); }

/* שלד — בגובה הכרטיס האמיתי, כדי שהמסך לא "יקפוץ" כשהתוצאות מגיעות */
.qr-card.qr-skel { cursor: default; animation: none; box-shadow: none; background: #fff; }
.qr-card.qr-skel:hover { border-color: var(--border); box-shadow: none; }

.qr-all { margin: 13px 0 0; text-align: center; font-size: 13px; color: var(--fg3); }

/* מצבי קצה — אין תוצאות / כשל רשת */
.qr-empty { display: grid; justify-items: center; gap: 9px; padding: 32px 18px 8px; text-align: center; }
.qr-empty-ic { display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--field-bg); color: var(--fg3); margin-bottom: 4px; }
.qr-empty-ic svg { width: 25px; height: 25px; }
.qr-empty b { font-size: 16.5px; font-weight: 800; color: var(--fg1); }
.qr-empty p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--fg2); max-width: 300px; }
.qr-empty .sbtn { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   הכרטיסיות שלי — כרטיסיות ניקוב באתר זימון התורים
   הכרטיס בנוי סביב **מספר אחד גדול**: כמה נותרו. כל השאר משני לו, כי זו
   השאלה היחידה שהלקוח באמת פותח את המסך בשבילה.
   ═══════════════════════════════════════════════════════════════════════════════ */

.is-hidden { display: none !important; }

.scr-punch .pc-tabs { display: flex; gap: 8px; margin: 12px 0 4px; }
.pc-tab {
  flex: 1; padding: 9px 6px; border-radius: 12px; border: 1.5px solid var(--border);
  background: #fff; color: var(--fg2); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.pc-tab.is-on { background: var(--green-50); border-color: var(--green-200); color: var(--green-700); }
/* טאב ריק נשאר לחיץ — הסתרתו הייתה מסתירה מהלקוח שהקטגוריה קיימת בכלל. */
.pc-tab[data-empty="1"] { opacity: .55; }
.pc-tab-n {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: 4px;
  border-radius: 9px; background: rgba(0,0,0,.06); font-size: 11px; line-height: 18px;
}
.pc-tab.is-on .pc-tab-n { background: var(--green-100); color: var(--green-700); }

.pc-list { display: flex; flex-direction: column; gap: 12px; }

.pc-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 18px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
/* כרטיסייה שאינה שמישה יורדת בבהירות — אבל נשארת קריאה לגמרי. */
.pc-card.pc-st-expired, .pc-card.pc-st-cancelled, .pc-card.pc-st-depleted { background: #fafbfc; }

.pc-hd { display: flex; align-items: center; gap: 10px; }
.pc-ic {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--green-50); color: var(--green-700); flex: none;
}
.pc-card.pc-st-expired .pc-ic, .pc-card.pc-st-cancelled .pc-ic,
.pc-card.pc-st-depleted .pc-ic { background: #f1f3f5; color: var(--fg3); }
.pc-hd-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-hd-tx b { font-size: 15px; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-hd-tx small { font-size: 11.5px; color: var(--fg3); }

.pc-badge {
  flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,.05); color: var(--fg2);
}
.pc-b-active { background: var(--green-100); color: var(--green-700); }
.pc-b-frozen { background: rgba(90,150,220,.14); color: #2f6ba8; }
.pc-b-pendingPayment { background: rgba(230,170,60,.16); color: #96650d; }
.pc-b-expired, .pc-b-cancelled { background: rgba(200,70,70,.10); color: #a33b3b; }
/* "נוצלה במלואה" אינה כישלון ואינה ביטול — הלקוח פשוט מימש את כל מה שקנה. */
.pc-b-depleted { background: rgba(0,0,0,.06); color: var(--fg2); }

.pc-balance { display: flex; align-items: baseline; gap: 7px; }
.pc-balance b { font-size: 30px; line-height: 1; color: var(--green-700); font-weight: 800; }
.pc-balance span { font-size: 12.5px; color: var(--fg2); }
.pc-balance.is-dim b { color: var(--fg3); }

.pc-meter { position: relative; height: 7px; border-radius: 99px; background: #eef0f3; overflow: hidden; display: flex; }
.pc-meter-used { background: var(--green); height: 100%; }
/* השמור בפס בהיר יותר — הוא עדיין של הלקוח, ולא נראה כמו ניקוב שאבד. */
.pc-meter-res { background: var(--green-200); height: 100%; }

.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chips:empty { display: none; }
.pc-chip { font-size: 11px; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.045); color: var(--fg2); }
.pc-chip-res { background: var(--green-50); color: var(--green-700); }
.pc-chip-burn { background: rgba(200,70,70,.08); color: #a33b3b; }

.pc-foot { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; border-top: 1px solid var(--border); }
.pc-exp { font-size: 11.5px; color: var(--fg2); padding-top: 7px; }
.pc-exp.is-warn { color: #96650d; font-weight: 600; }
.pc-cover { font-size: 11px; color: var(--fg3); }

.pc-empty { text-align: center; padding: 34px 16px; color: var(--fg2); }
.pc-empty-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #f1f3f5; color: var(--fg3); margin-bottom: 10px; }
.pc-empty p { font-size: 13.5px; margin: 0; }
.pc-retry {
  margin-top: 14px; padding: 9px 20px; border-radius: 12px; border: 1.5px solid var(--border);
  background: #fff; color: var(--fg1); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.row-link-ic.punch-ic { background: var(--green-50); color: var(--green-700); }

/* ── בלוק כיסוי כרטיסייה במסך הסיכום ───────────────────────────────────────── */
.pb-box {
  margin: 12px 0 0; padding: 12px; border-radius: 14px;
  border: 1.5px solid var(--green-200); background: var(--green-50);
}
.pb-skel { border-color: var(--border); background: #fafbfc; }
.pb-auto, .pb-hd { display: flex; align-items: center; gap: 10px; }
/* וריאנט הבחירה הוא עמודה (כותרת + בורר), ולא שורה כמו וריאנט ההודעה. */
.pb-choice { display: block; }
.pb-ic {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: #fff; color: var(--green-700);
}
.pb-tx { min-width: 0; display: flex; flex-direction: column; }
.pb-tx b { font-size: 13.5px; color: var(--fg1); }
.pb-tx small { font-size: 11.5px; color: var(--fg2); margin-top: 2px; }

/* בורר מחובר — שתי מחציות במסגרת אחת נקראות כבחירה אחת מבין שתיים.
   שני כפתורים נפרדים היו נקראים כשתי פעולות. */
.pb-toggle {
  display: flex; gap: 4px; margin-top: 10px; padding: 3px;
  background: #fff; border: 1.5px solid var(--green-200); border-radius: 12px;
}
.pb-opt {
  flex: 1; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent;
  color: var(--fg2); font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .16s, color .16s;
}
.pb-opt.is-on { background: var(--green); color: var(--on-accent); }

/* תג "כרטיסייה" על תור קיים — קיים כבר ב-.appt .badge.b-punch; כאן רק
   מוודאים שהוא נקרא גם בהיסטוריה, שבה הכרטיס מעומעם. */
.appt .badge.b-punch { font-weight: 700; }

/* תג כיסוי-כרטיסייה על אייטם שיעור ברשימה */
.cls-punch {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin: 2px 0 8px; padding: 4px 9px; border-radius: 9px;
  background: var(--green-50); color: var(--green-700);
  font-size: 11.5px; font-weight: 700;
}
.cls-punch .ti { display: inline-grid; place-items: center; }
.cls-punch .ti svg { width: 14px; height: 14px; }
/* "אפשר לנצל" — הכרעת הלקוח. גוון רך יותר, כדי שלא ייקרא כהבטחה. */
.cls-punch.is-opt { background: #fff; border: 1.3px solid var(--green-200); }

/* ═══════════════════════════════════════════════════════════════════════════
   CLIENT FORMS — טפסים לפני הקביעה / "הטפסים שלי" (forms-gate.js)
   ה-iframe של /f/embed בגובה מלא (הודעות height), בלי מסגרת — הטופס מצויר בתוך
   הדף כאילו הוא חלק ממנו. השלד נשאר עד 'ready' ואז ה-iframe נכנס ב-fade.
   ═══════════════════════════════════════════════════════════════════════════ */
.fm-gate .fm-intro { margin: -4px 2px 0; font-size: 14px; line-height: 1.55; color: var(--fg2); }
.fm-gate .fm-body { display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.fm-gate .fm-skel { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-card); }
.fm-gate .fm-frame { display: block; width: 100%; height: 0; border: 0; background: transparent; opacity: 0; transition: opacity .22s ease; }
.fm-gate .fm-frame.on { opacity: 1; }
.fm-gate .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* "הטפסים שלי" — שורה לכל טופס: אייקון, שם, תאריך/תוקף, תג (הוחלף / פג תוקף). */
.fm-list { display: flex; flex-direction: column; gap: 10px; }
.fm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; text-align: start; font-family: inherit; color: inherit; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-card); cursor: pointer; transition: border-color .15s ease, transform .12s ease; }
.fm-item:hover { border-color: var(--green-200); }
.fm-item:active { transform: scale(.99); }
.fm-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fm-item .fm-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--green-50); color: var(--green-700); }
.fm-item .fm-ic svg { width: 20px; height: 20px; }
.fm-item .fm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fm-item .fm-tx b { font-size: 15px; font-weight: 700; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-item .fm-tx small { font-size: 12.5px; color: var(--fg2); font-weight: 500; }
.fm-item .fm-chev { flex: none; display: inline-flex; color: var(--fg3); }
.fm-item .fm-chev svg { width: 18px; height: 18px; }
.badge.fm-b-old { background: var(--field-bg); color: var(--fg2); border: 1px solid var(--border); }

/* "מילוי טפסים" בכרטיס תור ב"התורים שלי" — כפתור משני, מעל התשלום והביטול. */
.appt .mb-forms { width: 100%; min-height: 40px; padding: 9px 14px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; border: 1.5px solid #f6e3b8; background: var(--amber-50); color: var(--amber-700); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .12s ease, opacity .15s ease; }
.appt .mb-forms svg { width: 17px; height: 17px; flex: none; }
.appt .mb-forms:disabled { opacity: .75; cursor: default; }
.appt .mb-forms:not(:disabled):active { transform: scale(.985); }
.appt .mb-forms .spin { width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
/* קישור "הטפסים שלי" מתחת לרשימה. */
.mb-forms-link { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; background: none; border: 0; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg2); cursor: pointer; }
.mb-forms-link svg { width: 16px; height: 16px; color: var(--fg3); }
.mb-forms-link span { text-decoration: underline; text-underline-offset: 3px; }
/* הכרטיס השמור ב"התורים שלי" — שורה שקטה בתחתית, עם הסרה (plan_security_card_chargeable_v1 §7). */
.mb-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 16px 0; padding: 10px 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; font-size: 13.5px; color: var(--fg2); opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
.mb-card.in { opacity: 1; transform: none; }
.mb-card .mb-card-tx { display: inline-flex; align-items: center; gap: 8px; }
.mb-card .mb-card-tx svg { width: 16px; height: 16px; color: var(--fg3); }
.mb-card .mb-card-tx.done svg { color: var(--ok, #16a34a); }
.mb-card .link-btn { margin: 0; padding: 4px 6px; font-size: 13.5px; }
/* שורת "טפסים" בסיכום אחרי מילוי. */
.srow .fm-done { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-weight: 700; }
.srow .fm-done svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .fm-gate .fm-frame, .fm-item, .appt .mb-forms { transition: none; }
  .appt .mb-forms .spin { animation-duration: 1.6s; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   הוספה ליומן — כפתור במסך ההצלחה, ב"התורים שלי", וחלון הבחירה Google / Apple
   (docs/plan_add_to_calendar_v1.md). הגיליון עצמו הוא ‎.sheet הקיים.
   ═══════════════════════════════════════════════════════════════════════════ */
.scr-success .cal-cta { margin-bottom: 10px; }
.scr-success .cal-cta .ic, .appt .mb-cal svg { color: var(--lead, #64BB73); }
/* אותה גיאומטריה כמו ‎.mb-forms — פעולה משנית, לבנה עם מסגרת, לא מתחרה בתשלום. */
.appt .mb-cal {
  width: 100%; min-height: 40px; padding: 9px 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; border: 1.5px solid var(--field-border); background: #fff; color: var(--fg1);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .12s ease, border-color .15s ease;
}
.appt .mb-cal svg { width: 17px; height: 17px; flex: none; }
.appt .mb-cal:hover { border-color: #cdd3da; }
.appt .mb-cal:active { transform: scale(.985); }

.cal-opts { display: flex; flex-direction: column; gap: 10px; }
.cal-opt {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px;
  border: 1.5px solid var(--field-border); border-radius: var(--radius-btn); background: #fff;
  color: var(--fg1); font-size: 15.5px; font-weight: 700; text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
  animation: calio-rise .28s ease both;
}
.cal-opt:nth-child(2) { animation-delay: .05s; }
.cal-opt:hover { border-color: #cdd3da; background: #fafbfc; }
.cal-sheet:focus { outline: none; }
.cal-opt:focus-visible { outline: 2px solid var(--lead, #64BB73); outline-offset: 2px; }
.cal-opt:active { transform: scale(.985); }
.cal-opt .ic { display: flex; width: 24px; justify-content: center; flex: none; color: var(--lead, #64BB73); }
.cal-opt .ic svg { width: 21px; height: 21px; }
.cal-opt .lbl { flex: 1; }
.cal-opt .chev, .cal-opt .done { width: 18px; height: 18px; flex: none; color: var(--fg3); }
.cal-opt .done { display: none; color: var(--green-700); }
.cal-opt.on { border-color: var(--lead, #64BB73); background: var(--green-50); }
.cal-opt.on .chev { display: none; }
.cal-opt.on .done { display: block; }
.cal-opt.on .done path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw .35s ease forwards; }
.cal-note {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid #f6e3b8;
  background: var(--amber-50); color: var(--amber-700); font-size: 13.5px; line-height: 1.55; text-align: center;
}
.cal-hint { margin: 12px 2px 0; font-size: 13px; line-height: 1.55; color: var(--fg2); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .cal-opt, .cal-opt.on .done path { animation: none; }
  .cal-opt.on .done path { stroke-dashoffset: 0; }
  .appt .mb-cal, .cal-opt { transition: none; }
}