/* ═══════════════════════════════════════════════════════════
   תאי סושי — מערכת הזמנות
   צבע המותג נקבע ב-BIZ_COLOR (config.php), וכל הגוונים נגזרים ממנו
   מובייל-first · RTL · Heebo
   ═══════════════════════════════════════════════════════════ */

/* הגופן נטען מ-includes/layout.php ולא מכאן.

   @import בתוך גיליון סגנונות יוצר שרשרת סדרתית: הדפדפן חייב
   להוריד ולפענח את app.css לפני שהוא בכלל מגלה שיש גופן, ורק אז
   מתחיל להוריד את הגיליון של גוגל ואחריו את קובצי הגופן. שלושה
   סיבובי רשת בזה אחר זה לפני שהטקסט נצבע נכון.

   תגית <link> בראש העמוד מתגלה מיד עם ה-HTML ויורדת במקביל
   לקובץ הזה. */

/* ═══════════════════════════════════════════════════════════
   טוקנים — מקור אמת יחיד לעיצוב.
   לפני זה היו בקובץ 25 גדלי פונט שונים (10.5 / 11 / 11.5 / 12 …)
   ו-72 סגנונות מוטבעים ב-PHP. זה מה שיצר את התחושה שאף שני
   מסכים לא עוצבו ע״י אותו אדם. כל ערך חדש חייב לצאת מכאן.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── צבע ─────────────────────────────────────────────── */
  /* זהב עמוק במקום צהוב ניאון. #ffd400 קורא "פאסט-פוד"; הגוון הזה
     שומר על אותה זהות מותג אבל נראה מכובד יותר על רקע כהה. */
  --yellow:      #e0ac2b;
  --yellow-soft: #f2d68a;
  --yellow-dark: #b98a1c;
  --red:         #d60018;
  --green:       #16a34a;
  --dark:        #070707;
  --dark-2:      #11100f;
  --dark-3:      #1b1917;
  /* הטקסט עצמו היה צהבהב (#fff6c8) וזה מה שצבע את כל האתר, לא
     המבטאים. לבן-חמים כמעט ניטרלי משאיר את החמימות בלי הגוון. */
  --text:        #f5f2ec;
  --muted:       rgba(245, 242, 236, .62);
  --border:      rgba(255, 255, 255, .12);
  --glass:       rgba(12, 12, 12, .82);

  /* ── טיפוגרפיה — 8 מדרגות. כל צעד ≥10% מקודמו, אחרת
     ההבדל לא נקרא כהיררכיה אלא כחוסר דיוק. ─────────────── */
  --fs-xs:   11.5px;   /* תגיות, כיתוב עזר */
  --fs-sm:   13px;     /* טקסט משני, הערות */
  --fs-md:   15px;     /* גוף */
  --fs-lg:   16.5px;   /* שמות מנות, שדות קלט */
  --fs-xl:   19px;     /* כותרות מקטע */
  --fs-2xl:  23px;     /* כותרות עמוד */
  --fs-3xl:  27px;
  --fs-4xl:  32px;

  /* ── ריווח — סולם של 4 ───────────────────────────────── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;

  /* ── פינות ───────────────────────────────────────────── */
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ── הצללות ──────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md:  0 10px 28px rgba(0, 0, 0, .45);
  --shadow:     0 28px 80px rgba(0, 0, 0, .55);

  /* ── פריסה ───────────────────────────────────────────── */
  --nav-h:       68px;
  --bar-h:       76px;
  --wrap:        1120px;   /* רוחב תוכן — מנצל מסך רחב, נשאר קריא */

  /* ── שכבות ומסגרות ───────────────────────────────────────
     כל שכבות ה-rgba(255,255,255,.0X) שהיו פזורות בקובץ מרוכזות
     כאן. הן היו הדבר היחיד שמנע ערכת נושא בהירה: לבן בשקיפות
     נמוכה נעלם לגמרי על רקע בהיר.

     ארבע מדרגות מילוי ושתי מדרגות קו — במקור היו עשר רמות
     שקיפות שונות, וההבדל בין .06 ל-.07 לא נראה לעין אנושית.
     איחוד שלהן הוא גם פישוט וגם תנאי לתחזוקה של שתי ערכות. */
  --surf-1: rgba(255,255,255,.035);   /* מילוי עדין ביותר */
  --surf-2: rgba(255,255,255,.065);   /* מילוי כרטיס */
  --surf-3: rgba(255,255,255,.095);   /* מילוי מורם / ריחוף */
  --surf-4: rgba(255,255,255,.14);    /* מילוי פעיל */
  --line-1: rgba(255,255,255,.12);    /* קו שיער */
  --line-2: rgba(255,255,255,.16);    /* מסגרת מודגשת */
  --dim:    rgba(255,255,255,.16);    /* טקסט/אייקון כבוי (כוכב ריק) */

  /* טקסט מעל תמונת ההירו. לא נדרס בערכה הבהירה בכוונה: מתחתיו
     יש סקרים כהה מעל צילום, והרקע שם זהה בשתי הערכות. טוקן
     שהתהפך היה נותן טקסט כהה על תמונה כהה. */
  --on-photo:        rgba(255,255,255,.82);
  --on-photo-strong: rgba(255,255,255,.9);

  /* גוני המותג. color-mix ולא rgba קשיח — כך שינוי של --yellow
     אחד מחליף את כל הגוונים, וזה מה שיאפשר צבע מותג לכל לקוח. */
  --tint-1: color-mix(in srgb, var(--yellow) 5%,  transparent);
  --tint-2: color-mix(in srgb, var(--yellow) 12%, transparent);
  --tint-3: color-mix(in srgb, var(--yellow) 20%, transparent);
  --tint-4: color-mix(in srgb, var(--yellow) 35%, transparent);

  --surface-1: var(--dark-2);   /* כרטיס אטום */
  --surface-2: var(--dark-3);   /* כרטיס מורם אטום */

  /* ── צבעי מצב ─────────────────────────────────────────────
     --green/--red הם צבעי המילוי (רקע תג, נקודת שלב); ה-soft
     הם הגרסה הקריאה כ*טקסט*. על רקע כהה טקסט ירוק חייב להיות
     בהיר מהמילוי, ועל רקע בהיר כהה ממנו — ולכן שני התפקידים
     לא יכולים לחלוק ערך אחד. */
  --green-soft: #6ee7a0;
  --red-soft:   #ff97a2;
  /* ── פיצול תפקידי צבע המותג ───────────────────────────────
     --yellow משמש גם כמילוי (רקע כפתור) וגם כטקסט, ולשני
     התפקידים יש דרישות הפוכות על רקע בהיר: מילוי חייב להישאר
     זהב מזוהה, וטקסט חייב להיות כהה מספיק כדי להיקרא. ערך אחד
     לא יכול לספק את שניהם — כהיית ה-yellow לטובת הטקסט הפכה את
     כל הכפתורים לחומים עם כיתוב שחור בלתי קריא.

     --yellow      מילוי ומסגרת — נשאר זהב בשתי הערכות
     --accent-ink  טקסט — מתכהה בערכה הבהירה
     --yellow-soft הקצה הבהיר של גרדיאנטים — נשאר בהיר תמיד */
  --accent-ink: var(--yellow);

  --green-tint: color-mix(in srgb, var(--green) 16%, transparent);
  --red-tint:   color-mix(in srgb, var(--red)   16%, transparent);
  --red-line:   color-mix(in srgb, var(--red)   40%, transparent);
  --green-line: color-mix(in srgb, var(--green) 40%, transparent);
}

/* ─────────────────────────────────────────────────────────
   ערכת נושא בהירה.

   נדרסים כאן צבעים בלבד — לא ריווח, לא פינות ולא טיפוגרפיה.
   זה מה שמחזיק את שתי הערכות מסונכרנות: שינוי מבנה נעשה פעם
   אחת ב-:root ומשפיע על שתיהן.

   שים לב שהתפקידים מתהפכים ולא רק הערכים: --yellow-soft הוא
   זהב חיוור שנועד לזהור על שחור, ועל לבן הוא בלתי קריא. לכן
   הוא הופך לזהב עמוק. היפוך נאיבי של הצבעים היה שובר בדיוק
   את המקומות האלה.
   ───────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  /* המילוי נשאר זהב — כפתור חייב להיראות כמו המותג, וטקסט #111
     מעליו נקרא מצוין. הכהיה כאן הייתה הופכת אותו לחום בוצי. */
  --yellow:      #d9a326;
  --yellow-soft: #f0d38d;   /* קצה בהיר של גרדיאנט — בהיר בשתי הערכות */
  --yellow-dark: #a8760d;
  --accent-ink:  #8a6410;   /* טקסט זהב על לבן — כהה מספיק להיקרא */

  /* הקרקע אפורה-חמה ולא כמעט-לבנה. #faf9f6 מול כרטיס לבן הוא
     הפרש של 2% — הכרטיסים "צפו" בלי גבול ברור והעמוד נראה שטוח.
     גוון חם ולא אפור ניטרלי, כדי שהזהב לא ייראה עליו צהבהב. */
  --dark:        #f0eee9;   /* קרקע העמוד */
  --dark-2:      #ffffff;   /* כרטיסים — לבן מלא, בולט מהקרקע */
  --dark-3:      #e7e4dc;   /* משטח מורם */
  --text:        #17150f;
  --muted:       rgba(23,21,15,.62);
  --border:      rgba(0,0,0,.14);
  --glass:       rgba(255,255,255,.86);

  --surf-1: rgba(0,0,0,.025);
  --surf-2: rgba(0,0,0,.05);
  --surf-3: rgba(0,0,0,.075);
  --surf-4: rgba(0,0,0,.11);
  --line-1: rgba(0,0,0,.12);
  --line-2: rgba(0,0,0,.18);
  --dim:    rgba(0,0,0,.22);

  /* צללים על רקע בהיר חייבים להיות רכים בהרבה — אותה עוצמה
     שנראית טבעית על שחור נראית כמו לכלוך על לבן. */
  --shadow-sm:  0 1px 3px  rgba(23,21,15,.08);
  --shadow-md:  0 6px 18px rgba(23,21,15,.10);
  --shadow:     0 18px 50px rgba(23,21,15,.14);

  /* טקסט מצב מתהפך: על לבן הירוק הבהיר בלתי קריא לחלוטין. */
  --green-soft: #12783a;
  --red-soft:   #b3121f;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

/* אייקוני קו — יורשים את צבע הטקסט הסובב, לא אימוג'י תלוי-מכשיר */
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }

body {
  margin: 0;
  font-family: "Heebo", Arial, sans-serif;
  background: var(--dark);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ── חיווי פוקוס למקלדת ──────────────────────────────────────
   :focus-visible ולא :focus — מי שלוחץ בעכבר לא מקבל טבעת, מי
   שמנווט ב-Tab כן. בלי זה אי אפשר לדעת איפה נמצאים בעמוד.

   :where() ולא סלקטור רגיל: הוא בעל ספציפיות אפס, ולכן כללי
   פוקוס ממוקדים יותר (למשל .theme-btn) עדיין גוברים עליו.

   בלי border-radius — outline מודרני עוקב מעצמו אחרי הפינות של
   האלמנט, וקביעה כאן הייתה מרבעת כרטיס מנה בזמן פוקוס. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.container { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
/* עמודי טופס (עגלה, צ׳קאאוט, מעקב) — צר יותר, קריא יותר */
.container.narrow { max-width: 680px; }

/* ── כותרת ─────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.top-inner {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 13px;
  max-width: var(--wrap); margin: 0 auto; padding: 0 18px;
}

.brand { display: flex; align-items: center; gap: var(--sp-2); }
.logo { height: 46px; width: auto; object-fit: contain; }
/* ⚠️ **הכותרת תמיד נכנסת במסך** (07.10.2026, מתן: "בגלילה לצדדים משהו מוזר", תאי סושי בטלפון).
   בעורך הוגדל הלוגו (height:179px, max-width:none — !important ולכל גודל מסך). במחשב זה יפה; בטלפון
   הלוגו לא התכווץ, דחף את "התחבר / הרשם" 10px מחוץ למסך, וכל הדף זז הצידה. כאן הלוגו מתכווץ לפי המקום,
   והכפתורים לא; הבוררים ארוכים מספיק כדי לגבור על שכבת העורך (html:root body .logo). */
@media (max-width: 640px) {
  html:root body .top-inner .brand { min-width: 0; flex: 1 1 0; }
  /* רק רוחב — לא גובה. ⚠️ height:auto !important כאן (בגרסה הראשונה) גבר על "קטן יותר / גדול יותר" של העורך,
     ובטלפון אי אפשר היה לשנות את גודל הלוגו בכלל (מתן, 07.10: "אין איך להקטין את הלוגו?"). object-fit שומר
     על הצורה כשהרוחב נחתך. */
  html:root body .top-inner .brand .logo { max-width: 100% !important; object-fit: contain !important; }
  html:root body .top-inner .top-actions { flex: none; }
}
/* ורשת ביטחון: שום דבר שבורח מהמסך לא יגרום לכל הדף לזוז לצדדים. clip ולא hidden — hidden שובר sticky. */
html, body { overflow-x: clip; }

.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 900; font-size: var(--fs-xl); color: var(--accent-ink); letter-spacing: -.2px; }
.brand-sub  { font-size: var(--fs-xs); color: var(--muted); }
/* בטלפון הלוגו לבד: הוא כבר אומר TAI-SUSHI, והשם לידו היה חזרה שדחקה את כפתורי הסרגל */
/* כשיש לוגו הוא לבד בסרגל, בכל רוחב: הוא כבר אומר TAI-SUSHI, והשם לידו היה
   חזרה — ובדף ההזמנות הלוגו הגדול מופיע ממש מתחתיו */
.brand picture:has(.logo) + .brand-txt { display: none; }

/* ── Hero ──────────────────────────────────────────────── */
/* min-height + flex, לא height קבוע — כדי שהתוכן (במיוחד עם באנר
   ״סגור כרגע״ מעל) לעולם לא ידחוס את עצמו מתחת לכותרת הדביקה.
   הגרדיאנט הוקל — קודם היה כמעט שחור מלא בתחתית (.95), מטביע
   לגמרי את התמונה בדיוק איפה שהשם יושב עליה. */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(180px, 30vw, 300px);
  display: flex; align-items: flex-end;
  background: var(--dark-3);
}
/* התמונה כתגית <img> ולא כרקע ב-CSS.

   רקע מתגלה ע״י הדפדפן רק אחרי שגיליון הסגנונות ירד ופוענח,
   ולכן דווקא התמונה הגדולה בעמוד — זו שקובעת את תחושת מהירות
   הטעינה — מתחילה לרדת אחרונה. תגית בתוך ה-HTML נמצאת ע״י
   סורק הטעינה המקדים כבר בשורה הראשונה של המסמך.

   בונוס: <picture> נותן נפילה נקייה מ-webp ל-JPEG, מה
   ש-background-image לא יודע לעשות בלי image-set שנתמך חלקית. */
.hero-pic { position: absolute; inset: 0; z-index: 0; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; }

.hero::after {
  /* כהה מספיק לאורך כל האזור שהכיתוב יושב עליו (לא רק בקצה) —
     קריאות הטקסט קודמת לחשיפת התמונה */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(7,7,7,.45) 0%, rgba(7,7,7,.78) 50%, rgba(7,7,7,.93) 80%, rgba(7,7,7,.99) 100%);
}
.hero-body {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--wrap); margin: 0 auto; padding: 18px 18px 18px;
}
.hero-title {
  font-size: clamp(28px, 5vw, 42px); font-weight: 900; margin: 0 0 4px;
  color: #fff; letter-spacing: -.2px; text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
/* הלוגו במקום השם (menu.php, 29.09.2026) */
.hero-title--logo { margin: 0 0 10px; line-height: 0; }
.hero-title--logo img { width: clamp(150px, 18vw, 230px); height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)); }
.hero-sub { font-size: var(--fs-md); color: var(--on-photo); margin: 0 0 13px; }

/* ── רצועת מידע ────────────────────────────────────────── */
.info-strip {
  border-bottom: 1px solid var(--surf-2);
  background: var(--surf-1);
}
/* שורה אחת תמיד — לא נופל לשורה שנייה. אם אין מקום, גולל אופקית
   במקום לעטוף (עדיף פס אחד שאפשר להחליק בו על פני שני פסים גדולים) */
.info-strip-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 13px 18px;
  display: flex; gap: 9px; flex-wrap: nowrap; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  font-size: var(--fs-sm); color: var(--muted);
}
.info-strip-inner::-webkit-scrollbar { display: none; }
.hero-body .info-strip-inner { padding: 0; }

.info-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill); white-space: nowrap;
  background: rgba(0,0,0,.42); border: 1px solid var(--line-2);
  backdrop-filter: blur(6px); color: var(--on-photo-strong);
}
.info-chip b { color: #fff; font-weight: 800; }

/* ── חיפוש ─────────────────────────────────────────────── */
.search-wrap {
  max-width: var(--wrap); margin: 0 auto; padding: 16px 18px 0;
  position: relative;
}
.search-wrap input {
  width: 100%; padding: 14px 46px 14px 16px; font-size: var(--fs-md); font-family: inherit;
  background: var(--dark-2); border: 1px solid var(--line-1);
  border-radius: var(--radius-sm); color: var(--text);
}
.search-wrap input::placeholder { color: var(--muted); }
.search-wrap input:focus {
  outline: none; border-color: var(--accent-ink); background: var(--dark-3);
}
.search-wrap .icon {
  position: absolute; inset-inline-start: 32px; top: 50%; margin-top: 6px;
  transform: translateY(-50%); font-size: var(--fs-lg); opacity: .5; pointer-events: none;
}
.no-results { text-align: center; color: var(--muted); padding: 50px 18px; font-size: var(--fs-md); }

/* ── אודות ויצירת קשר ─────────────────────────────────────────
   בתחתית התפריט ולא בעמוד נפרד. מופרד בקו עליון כדי שלא ייקרא
   כהמשך של רשימת המנות, ומאופק בכוונה — הוא נדרש לחברת הסליקה
   ולמי שמחפש כתובת, ולא אמור להתחרות באוכל. */
.about-box {
  border-top: 1px solid var(--border);
  margin-top: 42px; padding: 30px 4px 10px;
  color: var(--muted); font-size: var(--fs-md); line-height: 1.9;
}
.about-box h2 { font-size: var(--fs-xl); color: var(--text); margin: 0 0 10px; }
.about-box h3 { font-size: var(--fs-lg); color: var(--text); margin: 24px 0 8px; }
.about-box p  { margin: 0 0 12px; }
.about-list { list-style: none; padding: 0; margin: 0; }
.about-list li { padding: 3px 0; }
.about-list b  { color: var(--text); font-weight: 700; }
.about-links { margin-top: 18px; font-size: var(--fs-sm); }

/* צ׳יפ הפתוח/סגור עבר לשורת המידע בהירו — כאן רק ה-dot שלו */
.status-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-chip.is-open   .dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.status-chip.is-closed .dot { background: var(--red);   box-shadow: 0 0 0 3px var(--red-tint); }

.acct-link {
  position: relative; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; font-size: var(--fs-xl); border-radius: 50%;
  background: var(--surf-2); border: 1px solid var(--surf-4);
}
/* דוחף את קבוצת הפעולות (צ׳יפ המשלוח + אייקוני החשבון) לקצה */
.top-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }

.delivery-chip {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
  background: var(--surf-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-pill); padding: 8px 13px; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.delivery-chip:hover { border-color: var(--accent-ink); background: var(--tint-2); }
.acct-dot {
  position: absolute; top: 3px; inset-inline-end: 3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--yellow); border: 2px solid var(--dark);
}

/* ── באנר סגור ─────────────────────────────────────────── */
.closed-banner {
  background: linear-gradient(180deg, var(--red-tint), var(--red-tint));
  border-bottom: 1px solid var(--red-line);
  padding: 12px 16px; text-align: center; font-weight: 600; font-size: var(--fs-md);
}

/* ── סרגל קטגוריות דביק ────────────────────────────────── */
.cats {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--glass); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }

.cats-inner {
  display: flex; gap: 8px; padding: 11px 18px;
  max-width: var(--wrap); margin: 0 auto;
}
/* במסך רחב הכל נכנס — עוטפים במקום לגלול, שלא ייחתך */
@media (min-width: 1000px) {
  .cats { overflow: visible; }
  .cats-inner { flex-wrap: wrap; }
}

.cat-chip {
  white-space: nowrap; font-size: var(--fs-md); font-weight: 700;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--surf-2); border: 1px solid var(--surf-3);
  color: var(--text); transition: background .18s, color .18s, border-color .18s;
  display: inline-flex; align-items: center; gap: 7px;
}
.cat-chip .icon { opacity: .75; }
.cat-chip.is-active .icon { opacity: 1; }
@media (hover: hover) { .cat-chip:hover { background: var(--tint-2); border-color: var(--border); } }
.cat-chip.is-active {
  background: linear-gradient(180deg, var(--yellow-soft), var(--yellow));
  color: #111; border-color: transparent;
  box-shadow: 0 4px 14px var(--tint-3);
}

/* ── סרגל קטגוריות: עיגולים עם תמונה (העיצוב הקלאסי, 29.09.2026) ──
   הלקוח בחר את הקלאסי, אבל ביקש שהמנות יישארו רשימה עם התיאור
   גלוי גם בטלפון. לכן מכל הקלאסי נלקחו רק העיגולים; כרטיסי המנות
   לא נגעו. */
.cats-inner { gap: 14px; padding-block: 12px 10px; align-items: flex-start; }
.cat-chip {
  flex-direction: column; gap: 7px; padding: 0; min-width: 98px; max-width: 116px;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  white-space: normal; text-align: center; line-height: 1.2; font-size: 13px;
  color: inherit;
}
.cat-chip > .icon { display: none; }
.cat-pic {
  display: grid; place-items: center; width: 92px; height: 92px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: var(--surf-2); color: var(--muted);
  border: 2px solid transparent; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cat-pic img { width: 100%; height: 100%; object-fit: cover; }
.cat-chip.is-active {
  background: none; color: inherit; box-shadow: none; font-weight: 800;
}
.cat-chip.is-active .cat-pic {
  border-color: var(--yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 22%, transparent);
}
@media (hover: hover) {
  .cat-chip:hover { background: none; border: 0; }
  .cat-chip:hover .cat-pic { transform: translateY(-2px); }
}
@media (max-width: 640px) {
  .cats-inner { gap: 10px; }
  .cat-chip { min-width: 82px; font-size: 12px; }
  .cat-pic { width: 76px; height: 76px; }
}

/* ── קטגוריה ───────────────────────────────────────────── */
.cat-block { padding-top: 34px; scroll-margin-top: calc(var(--nav-h) + 128px); }  /* סרגל העיגולים גבוה יותר מסרגל הכפתורים */
/* הקטגוריה הראשונה יושבת ישירות מתחת לסרגל הקטגוריות הדביק,
   שכבר מפריד בעצמו — 34px שם נקראים כרווח כפול ודוחפים את
   המנה הראשונה עוד למטה. בקטגוריות הבאות המרווח המלא נחוץ,
   כי מעליהן מסתיימת רשימת מנות ולא סרגל. */
.cat-block:first-of-type { padding-top: 16px; }
.cat-head { margin-bottom: 16px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cat-title {
  /* כותרת הקטגוריה בלבן — היא כבר בולטת בגודל ובמשקל, ולא צריכה
     גם צבע. הזהב נשאר לצ׳יפ הקטגוריה הפעיל ולכפתורי הפעולה. */
  font-size: var(--fs-3xl); font-weight: 900; margin: 0; color: var(--text);
}
.cat-sub   { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* ── כרטיס מוצר ────────────────────────────────────────── */
/* minmax(0,1fr) ולא 1fr — אחרת עמודת grid לא יורדת מתחת ל-min-content
   ומילים ארוכות (״תוספות250גרם״) דוחפות גלישה אופקית במובייל */
.prod-list { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px)  { .prod-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .prod-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.prod {
  display: flex; gap: 14px; align-items: stretch; width: 100%; text-align: start;
  background: var(--dark-2); border: 1px solid var(--surf-3);
  border-radius: var(--radius-md); padding: 15px;
  min-height: 142px;
  transition: border-color .18s, transform .14s, background .18s, box-shadow .18s;
}
.prod:active { transform: scale(.985); }
@media (hover: hover) {
  .prod:hover {
    border-color: var(--border); background: var(--dark-3);
    transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.45);
  }
  .prod:hover .prod-img { transform: scale(1.06); }
  .prod:hover .prod-add { background: var(--yellow); color: #111; }
}

.prod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* var(--text) ולא #fffcf0: הקרם היה כמעט-לבן ונעלם לגמרי על רקע
   בהיר — שם המנה הוא הטקסט הכי חשוב בעמוד, והוא היה זה שנשבר. */
.prod-name { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 5px; line-height: 1.3; color: var(--text); }
.prod-desc {
  font-size: var(--fs-sm); color: var(--muted); margin: 0 0 10px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.prod-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; }
/* המחיר בלבן ולא בזהב: כשכל מחיר בעמוד צועק, אף אחד לא בולט.
   הזהב נשמר לפעולה עצמה (כפתור ההוספה), וזה גם מה שמוביל את העין. */
.prod-price { font-size: var(--fs-xl); font-weight: 900; color: var(--text); }

/* עמודת התמונה — הכפתור יושב על פינת התמונה, כמו בוולט.
   align-self:flex-start קריטי — בלעדיו .prod-media נמתח לגובה
   הכרטיס כולו (בגלל align-items:stretch למעלה) והכפתור, שממוקם
   ביחס לתחתית העמודה, צף רחוק מהתמונה בכרטיסים גבוהים יותר. */
.prod-media { position: relative; flex: 0 0 112px; align-self: flex-start; }
.prod-img {
  width: 112px; height: 112px; border-radius: var(--radius-sm); object-fit: cover;
  transition: transform .25s ease; display: block;
}
.prod-img.placeholder {
  display: grid; place-items: center; color: var(--tint-2);
  background: radial-gradient(120% 120% at 30% 20%, var(--tint-2), var(--tint-1));
  border: 1px solid var(--border);
}
.prod-add {
  position: absolute; inset-block-end: -7px; inset-inline-start: -7px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--dark-3); border: 1.5px solid var(--yellow);
  color: var(--accent-ink); font-size: var(--fs-2xl); font-weight: 800; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  transition: background .16s, color .16s;
}

.badges { display: flex; gap: 5px; flex-wrap: wrap; }
.badge {
  font-size: var(--fs-xs); font-weight: 800; padding: 3px 8px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.badge.new     { background: var(--tint-2);  color: var(--accent-ink); border-color: var(--border); }
.badge.popular { background: var(--surf-3); color: var(--text); }
.badge.spicy   { background: var(--red-tint);   color: var(--red-soft); }
.badge.veg     { background: var(--green-tint);  color: var(--green-soft); }

.prod.sold-out { opacity: .45; pointer-events: none; }
.sold-tag { font-size: var(--fs-xs); font-weight: 800; color: var(--red); }
/* "רק באיסוף" — מנה בלי משלוח (on_delivery=0) כשההזמנה במשלוח. אפורה פחות
   מ"אזל": היא קיימת, רק לא בדרך הזו. ראה menu.php ($noDel). */
.prod.pickup-only { opacity: .6; pointer-events: none; }
.pickup-tag, .sheet-pickup {
  font-size: var(--fs-xs); font-weight: 800; color: var(--accent-ink);
  background: var(--tint-2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}
.sheet-pickup { display: block; margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); white-space: normal; line-height: 1.5; }
.nodel-note a { font-weight: 800; color: inherit; text-decoration: underline; margin-inline-start: 6px; }

/* קטגוריה בלי תמונות בכלל (למשל שתייה/סלטים) — שורת טקסט קומפקטית
   במקום רשת של אימוג׳ים זהים חוזרים, שנראית כמו רשת תמונות שבורה */
@media (min-width: 560px) { .prod-list--text { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .prod-list--text { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.prod--text { min-height: 0; padding: 13px 15px; }
.prod--text .prod-body { flex-direction: row; align-items: center; gap: 12px; }
.prod--text .prod-text { flex: 1; min-width: 0; }
.prod--text .prod-name { margin: 0 0 2px; }
.prod--text .prod-desc { -webkit-line-clamp: 1; margin: 0; }
.prod--text .prod-foot { margin-top: 0; flex: 0 0 auto; }
.prod--text .prod-add {
  position: static; width: 30px; height: 30px; font-size: var(--fs-xl);
  background: var(--dark-3); border: 1.5px solid var(--yellow); color: var(--accent-ink);
  border-radius: 50%; display: grid; place-items: center; box-shadow: none;
}

/* ── מודאל מוצר ────────────────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.72); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; z-index: 91; inset-inline: 0; bottom: 0;
  max-height: 92vh; display: flex; flex-direction: column;
  background: var(--dark-2);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateY(100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.32,.72,0,1), visibility .28s;
}
.sheet.is-open { transform: translateY(0); visibility: visible; }

/* במסך רחב — חלון ממורכז. inset+margin:auto במקום translate,
   כי translateX מתהפך ב-RTL וגורם לחלון להציץ בפינה. */
@media (min-width: 640px) {
  .sheet {
    inset-inline: 0; margin-inline: auto; bottom: 4vh;
    width: min(580px, 92vw); border-radius: var(--radius-xl); max-height: 86vh;
    transform: translateY(115%);
  }
  .sheet.is-open { transform: translateY(0); }
}

.sheet-grab {
  width: 42px; height: 4px; border-radius: var(--radius-pill);
  background: var(--surf-1); margin: 10px auto 0; flex: none;
}


/* ── תמונת המנה בחלון הבחירה ────────────────────────────────
   החלון הציג שם, תיאור ותוספות בלבד — הלקוח לחץ על המנה בגלל
   התמונה, ובדיוק במסך שבו מחליטים אם להוסיף לעגלה היא נעלמה.

   ⚠️ היא יושבת בתוך .sheet-body (אזור הגלילה) ולא כאלמנט אחיו
   מעליו, ולכן היא נגללת החוצה עם התוכן. כאלמנט קבוע היא גזלה
   כשליש מגובה החלון בכל רגע נתון ודחסה את רשימת התוספות למה
   שנשאר — נמדד בשימוש אמיתי. app.js בונה אותה, ולכן אין כאן
   מצב ״מוסתר״: למנה בלי תמונה פשוט לא נוצר אלמנט.

   השוליים השליליים מבטלים את ה-padding של .sheet-body
   (‎6px 20px 16px) כדי שהתמונה תיגע בקצוות החלון. חייבים
   להתעדכן יחד איתו.

   יחס 16:10 — זה היחס שבו התמונות צולמו (700×438), וכל יחס
   אחר היה חותך את הצלחת. */
.sheet-pic {
  margin: -6px -20px 14px;
  aspect-ratio: 16 / 10; background: var(--surf-1);
}
.sheet-pic img { width: 100%; height: 100%; object-fit: cover; }

/* תמונה צרה מ-400 פיקסלים (app.js מוסיף את המחלקה אחרי הטעינה) —
   בגודלה הטבעי ובמרכז הפס, במקום להימתח לרוחב ולהיטשטש. */
.sheet-pic--small {
  aspect-ratio: auto; display: flex; justify-content: center;
  padding-block: 16px 2px;
}
.sheet-pic--small img { width: auto; height: auto; max-width: 192px; border-radius: var(--radius-sm); }

/* עוטף <picture> בכרטיס המנה — inline כברירת מחדל, מה שמוסיף
   רווח שורה מתחת לתמונה ודוחף את כפתור ההוספה */
.prod-media picture { display: block; }
.sheet-head { padding: 14px 20px 12px; flex: none; border-bottom: 1px solid var(--surf-2); }
.sheet-title { font-size: var(--fs-2xl); font-weight: 900; margin: 0 0 5px; }
.sheet-desc  { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.55; }

.sheet-body { overflow-y: auto; padding: 6px 20px 16px; flex: 1; overscroll-behavior: contain; }

.sheet-foot {
  flex: none; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--surf-3); background: var(--dark-2);
  display: flex; gap: 12px; align-items: center;
}

.sheet-close {
  position: absolute; inset-inline-end: 14px; top: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surf-3); color: var(--text);
  font-size: var(--fs-xl); line-height: 1; display: grid; place-items: center;
}

/* ── קבוצת תוספות ──────────────────────────────────────── */
.optgroup { padding: 16px 0 4px; border-bottom: 1px solid var(--surf-2); }
.optgroup:last-of-type { border-bottom: 0; }

.optgroup-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.optgroup-label { font-size: var(--fs-md); font-weight: 800; margin: 0; }
/* ── הכלל והכלולים: טקסט שקט, לא תגיות ──────────────────────
   היו כאן גלולות צבעוניות — אדום ל״חובה״, ירוק ל״חינם״ — ונראו כמו
   תבנית (30.09.2026, מהשניצלן). עכשיו טקסט אפור קטן ליד הכותרת.
   צבע מופיע רק כשיש מה להגיד: אדום כשהלקוח ניסה להוסיף בלי לבחור
   (.missing), וזהב (צבע המחיר, כמו .opt-price) כשנוספת עולה כסף. */
/* ⚠️ המחלקה ״opt״ של התג (לא-חובה) היא גם המחלקה של שורת תוספת (.opt),
   ולכן התג ירש ממנה רקע, ריפוד ומסגרת. האיפוס כאן מבטל את זה —
   ו-.optgroup-head בסלקטור כדי לגבור על .opt שמוגדר מאוחר יותר בקובץ. */
.optgroup-head .optgroup-rule { font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
                  display: inline; background: none; border: 0; padding: 0; margin: 0; cursor: default; }
.optgroup-head .optgroup-rule.req { color: var(--text); }
.optgroup.missing .optgroup-rule { color: var(--red-soft); font-weight: 700; }
.optgroup-free { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.optgroup-free::before { content: '·'; margin-inline-end: 8px; color: var(--dim); }
.optgroup-free.on { color: var(--accent-ink); font-weight: 700; }

/* קבוצה שהכפתור הפנה אליה. הסימון נשאר עד שהבחירה נעשית —
   הרעידה מושכת את העין, המסגרת שומרת על היעד אחרי שהיא נגמרת. */
.optgroup.missing {
  border-radius: var(--radius-md);
  outline: 2px solid var(--red-soft);
  outline-offset: 7px;
  animation: missNudge .42s ease;
}
@keyframes missNudge {
  25% { transform: translateX(-7px); }
  60% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .optgroup.missing { animation: none; }
}

.opt {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; margin-bottom: 6px;
  border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surf-1); border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.opt:has(input:checked) { background: var(--tint-2); border-color: var(--border); }
.opt.disabled { opacity: .35; pointer-events: none; }

.opt input { accent-color: var(--accent-ink); width: 19px; height: 19px; flex: none; margin: 0; }
.opt-name  { flex: 1; font-size: var(--fs-md); line-height: 1.4; }
.opt-price { font-size: var(--fs-sm); font-weight: 800; color: var(--accent-ink); white-space: nowrap; }

/* מונה כמות בתוך שורת אפשרות — מאפשר לבחור פעמיים את אותה מנה */
.opt.picked { background: var(--tint-2); border-color: var(--border); }
.opt-qty {
  display: flex; align-items: center; gap: 2px; flex: none;
  background: var(--surf-2); border-radius: var(--radius-pill); padding: 3px;
}
.opt-qty button {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surf-3); color: var(--text);
  font-size: var(--fs-xl); font-weight: 800; line-height: 1; display: grid; place-items: center;
}
.opt-qty button:disabled { opacity: .28; cursor: default; }
.opt-qty .q-val {
  min-width: 22px; text-align: center; font-weight: 900; font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

.note-field {
  width: 100%; margin-top: 6px; padding: 12px 14px;
  background: var(--surf-1); border: 1px solid var(--surf-3);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: inherit; font-size: var(--fs-md); resize: vertical; min-height: 62px;
}
.note-field:focus { outline: 2px solid var(--border); border-color: transparent; }

/* ── "רוצה להוסיף?" — הגדלות מכירה במקטע מקופל ───────────────
   ב"עסקית השניצל הקלאסי" ארבע קבוצות ההגדלה הן 41 אפשרויות —
   40% מגוף החלון — בזמן שרק שלוש קבוצות בכל המנה הן בחירת חובה.
   הן היו פזורות באותה גלילה כמו ההרכבה עצמה, ולכן מי שרצה סתם
   עסקית גלל דרך כולן פעמיים: פעם בדרך להחלטות, ופעם בדרך
   לכפתור ההוספה.

   details ולא הסתרה ב-JS: הבחירות שבפנים נשארות ב-DOM גם כשהוא
   מקופל, ולכן livePrice ו-collectOptions ממשיכים לספור אותן
   בלי תנאי מיוחד. */
.upsell {
  margin-top: 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-1);
}
.upsell-head {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  font-size: var(--fs-md); font-weight: 800;
}
.upsell-head::-webkit-details-marker { display: none; }
.upsell-head::marker { content: ''; }
.upsell-title { flex: 1; }

/* ⚠️ border-right/bottom פיזיים ולא לוגיים. חץ הוא צורה ולא
   טקסט — הוא מצביע למטה בשתי השפות, ו-border-inline-end היה
   מסובב אותו באלכסון ב-RTL. */
.upsell-head::after {
  content: ''; flex: none;
  width: 8px; height: 8px; margin-bottom: 3px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.upsell[open] .upsell-head::after { transform: rotate(-135deg); margin: 3px 0 0; }

.upsell-count { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.upsell-count.on { color: var(--accent-ink); }

.upsell .optgroup { padding-inline: 16px; }
.upsell .optgroup:last-of-type { padding-bottom: 14px; }

/* ── שם על המנה ────────────────────────────────────────────
   שדה לכל מנה. עמודה אחת ולא רשת: השמות נקראים מלמעלה למטה
   באותו סדר שבו המנות ייארזו ויודפסו בבון, ורשת דו-טורית
   הייתה שוברת את ההתאמה בין "מנה 2" למה שהעין רואה שנייה. */
.pname-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
/* ״שם לרול 1״ — מעל השאלה הראשונה של כל משבצת בדיל */
.slot-name { padding: 14px 0 0; }
.slot-name .pname { width: 100%; }
.pname {
  width: 100%; padding: 11px 14px;
  background: var(--surf-1); border: 1px solid var(--surf-3);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: inherit; font-size: var(--fs-md);
}
.pname:focus { outline: 2px solid var(--border); border-color: transparent; }

/* התווית בעגלה ובמעקב. בולטת מספיק כדי שהעין תמצא "יוסי" בין
   שלוש שורות של אותה מנה, בלי להתחרות בשם המנה עצמו. */
.pname-tag {
  display: inline-block; padding: 1px 9px; margin-inline-end: 6px;
  border-radius: var(--radius-pill);
  background: var(--tint-2); border: 1px solid var(--tint-4);
  color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 800;
  vertical-align: middle;
}

/* ── מונה כמות ─────────────────────────────────────────── */
.qty { display: flex; align-items: center; gap: 4px; background: var(--surf-2);
       border-radius: var(--radius-pill); padding: 4px; flex: none; }
.qty button {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surf-3); color: var(--text);
  font-size: var(--fs-xl); font-weight: 800; line-height: 1; display: grid; place-items: center;
}
.qty button:disabled { opacity: .3; }
.qty span { min-width: 26px; text-align: center; font-weight: 900; font-size: var(--fs-lg); }

/* ── כפתורים ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 13px 24px; border-radius: var(--radius-md);
  font-size: var(--fs-lg); font-weight: 900; transition: transform .18s, box-shadow .18s, opacity .18s;
  width: 100%;
}
.btn-primary {
  background: linear-gradient(180deg, var(--yellow-soft), var(--yellow)); color: #111;
  box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 18px 40px var(--tint-2);
}
.btn-primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 5px 0 rgba(0,0,0,.35); }
.btn-primary:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }

.btn-dark {
  background: var(--surf-2); color: var(--text);
  border: 1px solid var(--line-2);
}
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line-2); }

/* ── סרגל עגלה תחתון ───────────────────────────────────── */
.cart-bar {
  position: fixed; z-index: 60; inset-inline: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--glass); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  transform: translateY(130%); transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.cart-bar.is-visible { transform: translateY(0); }
.cart-bar-inner { max-width: 620px; margin: 0 auto; }

.cart-bar .btn {
  justify-content: space-between; padding-inline: 20px;
}
.cart-bar .count {
  background: rgba(0,0,0,.22); border-radius: var(--radius-pill);
  padding: 3px 11px; font-size: var(--fs-md); font-weight: 900;
}

/* ── עגלה ──────────────────────────────────────────────── */
.cart-item {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--surf-2);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item-name { font-size: var(--fs-md); font-weight: 800; margin: 0 0 4px; }
/* עיפרון העריכה ליד שם המנה — קטן ושקט, אבל אזור לחיצה נוח לאצבע */
.ci-edit { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
           width: 30px; height: 30px; margin-inline-start: 4px; padding: 0; border: 0; border-radius: 50%;
           background: none; color: var(--muted); cursor: pointer; }
.ci-edit:hover, .ci-edit:focus-visible { color: var(--accent-ink); background: var(--surf-2); }
.cart-item-opts { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin: 0 0 8px; }
.cart-item-note { font-size: var(--fs-sm); color: var(--accent-ink); font-style: italic; margin: 0 0 8px; }
.cart-item-price { font-weight: 900; font-size: var(--fs-md); color: var(--accent-ink); white-space: nowrap; }

/* מתנה בעגלה — נבדלת ויזואלית משורה שמשלמים עליה */
.gift-item {
  background: var(--tint-2);
  border: 1px solid var(--tint-4); border-radius: var(--radius-sm);
  padding: 12px; margin: 8px 0;
}
.gift-item .qty { opacity: .55; pointer-events: none; }
.gift-price { color: var(--green-soft) !important; }

/* ── מדרגות הזמנה ──────────────────────────────────────── */
.ladder {
  margin: var(--sp-5) 0 var(--sp-3); padding: var(--sp-4);
  background: linear-gradient(180deg, var(--tint-2), var(--tint-1));
  border: 1px solid var(--tint-4); border-radius: var(--radius-md);
}
/* מצב "הכל הושג" נשאר בזהב של המותג ולא הופך לירוק:
   ירוק הוא צבע של הודעת מערכת ("בוצע"), זהב הוא צבע של פרס.
   בנוסף, פאנל שמתחלף לגמרי בצבע נראה כמו רכיב אחר ולא כמו
   אותו רכיב שהתקדם */
.ladder.maxed {
  border-color: var(--tint-2);
  background: linear-gradient(180deg, var(--tint-2), var(--tint-2));
}

.ladder-nudge {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-md); color: var(--text); line-height: 1.5;
}
.ladder-nudge b      { color: var(--accent-ink); }
.ladder-nudge .icon  { flex: 0 0 auto; color: var(--accent-ink); }
.ladder-nudge.done   { color: var(--accent-ink); font-weight: 800; }

.ladder-bar {
  height: 8px; border-radius: 99px; margin: var(--sp-3) 0 var(--sp-3);
  background: var(--surf-3); overflow: hidden;
}
.ladder-bar span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--yellow-dark), var(--yellow));
  transition: width .45s cubic-bezier(.3,0,.2,1);
}

/* כל המדרגות גלויות — לא רק הקרובה.
   שהושגה = מלאה בצהוב, שלא = קו מתאר דהוי. ההבדל הוא
   בבהירות ולא בגוון, כך שסורקים אותו במבט */
.ladder-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.ladder-step {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--surf-2); border: 1px solid var(--surf-4);
  font-size: var(--fs-xs); color: var(--muted); white-space: nowrap;
}
.ladder-step.on {
  background: var(--yellow); border-color: var(--accent-ink); color: #111;
  font-weight: 800;
}
.ladder-step.on .icon { color: #111; }

.ladder-got {
  display: flex; align-items: center; gap: 6px;
  margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--accent-ink);
}
.ladder-got .icon { flex: 0 0 auto; }
.ladder-got b { color: var(--text); }

/* הטבה שנבחרה כשהעגלה עדיין ריקה */
.gift-waiting {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--tint-2);
  border: 1px solid var(--tint-4); border-radius: var(--radius-md);
}
.gift-waiting-ic { font-size: 30px; line-height: 1; color: var(--accent-ink); flex: 0 0 auto; }
.gift-waiting b  { color: var(--accent-ink); font-size: var(--fs-lg); }
.gift-waiting p  { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }

.totals { padding: 16px 0 4px; }
.total-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: var(--fs-md); }
.total-row.muted { color: var(--muted); font-size: var(--fs-md); }
.total-row.discount { color: var(--green-soft); }
.total-row.grand {
  font-size: var(--fs-xl); font-weight: 900; color: var(--accent-ink);
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px;
}

/* ── התראות ────────────────────────────────────────────── */
.alert {
  padding: 13px 16px; border-radius: var(--radius-sm); font-size: var(--fs-md);
  font-weight: 600; line-height: 1.5; margin: 12px 0;
}
.alert-warn { background: var(--tint-2); border: 1px solid var(--border); color: var(--accent-ink); }
.alert-err  { background: var(--red-tint);  border: 1px solid var(--red-line); color: var(--red-soft); }
.alert-ok   { background: var(--green-tint); border: 1px solid var(--green-line); color: var(--green-soft); }

/* ── תיבת הסכמה ────────────────────────────────────────── */
/* אזור לחיצה גדול: על מובייל תיבת סימון בגודל ברירת המחדל
   כמעט בלתי אפשרית ללחיצה מדויקת, והלקוח מוותר */
.consent {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--muted);
}
.consent input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent-ink); }
.consent:has(input:checked) { border-color: var(--accent-ink); color: var(--text); }

/* ⚠️ הקישור בתוך תיבת ההסכמה חייב להיראות כקישור.
   הכלל הגלובלי `a { color: inherit; text-decoration: none }`
   מאפס כל עוגן באתר, והפך את "התקנון ומדיניות הביטולים"
   לטקסט אפור רגיל — הקישור היה שם, אף אחד לא ראה אותו.
   חברת הסליקה דורשת קישור *נראה* לצד תיבת האישור, ולקוח
   שלא מזהה קישור לא קרא תקנון. */
.consent a {
  color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 3px; font-weight: 700;
}

.toast {
  position: fixed; z-index: 120; inset-inline: 0; bottom: calc(var(--bar-h) + 18px);
  margin: 0 auto; width: max-content; max-width: 90vw;
  background: var(--yellow); color: #111; font-weight: 800; font-size: var(--fs-md);
  padding: 12px 22px; border-radius: var(--radius-pill); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(14px); transition: opacity .22s, transform .22s;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* ── טפסים ─────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; color: var(--muted); }
/* .input — טופס הביטול (cancel.php) השתמש במחלקה שלא הוגדרה, והשדות יצאו קופסאות לבנות קטנות (07.10.2026) */
.field input, .field select, .field textarea, input.input, textarea.input {
  width: 100%; padding: 13px 15px; font-size: var(--fs-lg); font-family: inherit;
  background: var(--surf-1); border: 1px solid var(--line-1);
  border-radius: var(--radius-sm); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus, input.input:focus, textarea.input:focus {
  outline: none; border-color: var(--accent-ink); background: var(--surf-2);
}
.field select option { background: var(--dark-2); color: var(--text); }
.field.err input, .field.err select { border-color: var(--red); }
.field .msg { font-size: var(--fs-sm); color: var(--red-soft); margin-top: 5px; display: none; }
.field.err .msg { display: block; }

/* ── דפוסים חוזרים ────────────────────────────────────────
   שלושת אלה הופיעו כ-style= מוטבע בכל עמוד עם ערכים מעט
   שונים בכל פעם. עכשיו מחלקה אחת, מקום אחד לשנות. */

/* כיתוב עזר קטן ומעומעם */
.hint { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin: 0; }

/* כפתור שנראה כמו קישור — "הסרה", "שליחה חוזרת" */
.link-btn {
  background: none; border: 0; padding: 0; font-family: inherit;
  font-size: var(--fs-sm); color: var(--muted);
  text-decoration: underline; cursor: pointer;
}
.link-btn.accent { color: var(--accent-ink); }

/* שדה קוד האימות — ספרות מרווחות וממורכזות */
.code-input {
  flex: 1; text-align: center; letter-spacing: 6px;
  font-size: var(--fs-xl); font-weight: 800;
}

.use-location-btn {
  flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink);
  background: var(--tint-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 6px 12px; white-space: nowrap;
  transition: background .15s;
}
.use-location-btn:hover:not(:disabled) { background: var(--tint-2); }
.use-location-btn:disabled { opacity: .6; cursor: default; }

/* ── מסך משלוח/איסוף בכניסה ──────────────────────────────── */
/* טאבים ולא אשף: שתי האפשרויות תמיד גלויות, מעבר בלחיצה אחת */
.dtabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px 20px 4px; flex: none;
}
.dtab {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 10px; border-radius: var(--radius-sm);
  background: var(--surf-2); border: 1px solid var(--line-1);
  color: var(--muted); font-size: var(--fs-md); font-weight: 800;
  transition: background .15s, color .15s, border-color .15s;
}
.dtab.is-on {
  background: var(--yellow); border-color: var(--accent-ink); color: #111;
}
.dtab .icon { flex: 0 0 auto; }

.dsub { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 16px; line-height: 1.55; }

/* רחוב ומספר בית זה לצד זה — ככה אנשים כותבים כתובת */
.daddr-row { display: grid; grid-template-columns: 1fr 90px; gap: 10px; align-items: end; }
/* שתי הכותרות חייבות אותו גובה: כפתור "מיקום שלי" מגביה את שורת
   הרחוב בכ-14px, ובלי היישור הזה תיבת מס׳ הבית יושבת גבוה יותר
   ושתי התיבות נראות עקומות. align-items:end הוא רשת הביטחון. */
.dlabel-row,
.daddr-row > .field > label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; min-height: 32px;
}
.dlabel-row label { margin-bottom: 0; min-height: 0; }

.dmap-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 10px; color: var(--muted); font-size: var(--fs-sm);
}
.dmap-sep::before, .dmap-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--line-1);
}

/* הסיכה קבועה במרכז והמפה זזה מתחתיה — אין צורך לפגוע
   בנקודה קטנה עם האצבע */
.dmap {
  position: relative; height: 190px; border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--line-1); background: var(--dark-3);
}
.dmap::after {
  content: ''; position: absolute; inset-inline-start: 50%; top: 50%;
  width: 22px; height: 22px; margin: -22px 0 0 -11px; pointer-events: none;
  background: var(--yellow); border: 3px solid #111; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.dmap-hint { text-align: center; margin: 7px 0 0; font-size: var(--fs-xs); }

.dmore { margin-top: 16px; }
.dmore summary {
  cursor: pointer; color: var(--accent-ink); font-size: var(--fs-sm);
  font-weight: 700; padding: 6px 0;
}

/* כרטיס הסניף באיסוף — שעות ומצב פתיחה במקום שבו מחליטים */
.dbranch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px; border-radius: var(--radius-md);
  background: var(--surf-1); border: 1px solid var(--line-1);
}
.dbranch b    { display: block; font-size: var(--fs-lg); font-weight: 900; }
.dbranch span { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.dbranch .is-open   { color: var(--green-soft); font-weight: 700; }
.dbranch .is-closed { color: var(--red-soft); font-weight: 700; }
.dbranch-nav {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 9px 13px; border-radius: var(--radius-pill);
  background: var(--tint-2); border: 1px solid var(--tint-4);
  color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 800; text-decoration: none;
}

/* הכפתור חסום *עם סיבה* — עדיף מלהעניש אחרי לחיצה */
.dfoot { flex-direction: column; align-items: stretch; gap: 8px; }
.dfoot .btn:disabled {
  opacity: 1; background: var(--surf-3); color: var(--muted);
  border-color: transparent; cursor: not-allowed;
}
.dwhy {
  margin: 0; text-align: center; font-size: var(--fs-sm);
  color: var(--yellow-soft, var(--yellow)); opacity: .85;
}
.dfoot .link-btn { align-self: center; color: var(--muted); }

/* ── מסך הכניסה (17.10.2026, מסיטורה 0309771 + 57b5c9c): משלוח/איסוף → כתובת → מתי ──
   מסך מלא מעל התפריט, על תמונת התפריט המוחשכת. הכרטיסים הם var(--dark-2)
   כמו כל משטח באתר — פחם בערכה הכהה, לבן בבהירה — ולכן שדות הכתובת
   הקיימים (.field, .daddr-row, .dmore) נראים בהם נכון בלי עיצוב נוסף.

   ⚠️ z-index 80: מעל הכותרת (50) וסרגל העגלה (60), ו*מתחת* לכפתור הנגישות
   (85) — הצהרת הנגישות מחייבת שהוא יהיה זמין בכל מסך, וזה המסך הראשון
   שכל לקוח רואה. ההודעות הקופצות (120) מעליו.

   ⚠️ צבע המותג באייקונים ובקישורים מעורב בצבע הטקסט (57b5c9c): כשהמותג
   והכרטיס באותו גוון האייקון נעלם; התערובת תמיד קריאה, ובתאי סושי היא
   נשארת זהב. */
.gate {
  position: fixed; inset: 0; z-index: 80;
  overflow-y: auto; overscroll-behavior: contain;
  background: #0d0c0b; color: #fff;
  display: flex; flex-direction: column; align-items: center;
  /* 84px למטה: כפתור הנגישות (קבוע בפינה) ישב על כרטיס "איסוף עצמי" בטלפון */
  padding: max(18px, env(safe-area-inset-top)) 16px max(84px, env(safe-area-inset-bottom));
}
body:has(.gate) { overflow: hidden; }

.gate-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.gate-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px); transform: scale(1.04); }
.gate-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,7,.66) 0%, rgba(7,7,7,.8) 55%, rgba(7,7,7,.92) 100%);
}

.gate-step {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px; margin-block: auto;
  display: flex; flex-direction: column;
}
.gate-step[hidden] { display: none; }

.gate-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px; padding: 8px 2px; background: none; border: 0;
  color: #fff; font: inherit; font-size: var(--fs-md); font-weight: 700;
  text-decoration: none; cursor: pointer;
}
/* חץ "אחורה" מצביע ימינה בעברית — ההפך מ"הבא". האייקון הוא chevron-left, ולכן כאן הוא מתהפך. */
.gate-back .icon { transform: scaleX(-1); }

/* ── 1. כניסה ── */
.gate-start { text-align: center; }
.gate-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* הלוגו הזהוב של תאי סושי (לא עיגול כמו בסיטורה — הוא רחב) */
.gate-logo { width: min(210px, 56vw); height: auto; filter: drop-shadow(0 6px 22px rgba(0,0,0,.55)); }
.gate-status {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-size: var(--fs-sm); font-weight: 700; color: rgba(255,255,255,.85);
}
.gate-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #6ee7a0;
}
.gate-status.is-closed::before { background: #ff97a2; }

.gate-hello { margin: 20px 0 0; }
.gate-hello:empty { display: none; }
.gate-hello-q { margin: 0; font-size: var(--fs-md); font-weight: 700; color: rgba(255,255,255,.9); }
/* משנית בכוונה — הבחירה למטה היא החובה */
.gate-login { color: var(--yellow-soft); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.gate-q { margin: 26px 0 14px; font-size: var(--fs-xl); font-weight: 800; }
.gate-ways { display: grid; gap: 12px; }
.gate-way {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 124px; padding: 16px; border-radius: var(--radius-xl);
  background: var(--dark-2); color: var(--text); border: 1px solid var(--line-1);
  font: inherit; font-size: var(--fs-xl); font-weight: 900; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .12s ease, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.gate-way small { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.gate-way .icon { color: var(--accent-ink); color: color-mix(in srgb, var(--accent-ink) 55%, currentColor); margin-bottom: 2px; }
.gate-way:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .gate-way:hover { border-color: var(--accent-ink); } }
.gate-way:disabled { opacity: .6; }
/* מסך רחב — שתי הדרכים זו לצד זו */
@media (min-width: 640px) { .gate-ways { grid-template-columns: 1fr 1fr; } }

/* ── 2/3. כרטיס הצעד ── */
.gate-card {
  background: var(--dark-2); color: var(--text);
  border: 1px solid var(--line-1); border-radius: var(--radius-xl);
  padding: 22px 18px 20px; box-shadow: var(--shadow);
}
.gate-title { margin: 0 0 6px; font-size: var(--fs-2xl); font-weight: 900; }

.gate-mapbtn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: var(--radius-pill);
  background: var(--tint-2); border: 1px solid var(--tint-4, var(--line-1));
  color: color-mix(in srgb, var(--accent-ink) 55%, currentColor); font: inherit; font-size: var(--fs-md); font-weight: 800;
  text-decoration: none; cursor: pointer;
}
.gate-mapbtn[hidden] { display: none; }
#dMapWrap { margin-top: 10px; }
#dMapWrap[hidden] { display: none; }

.gate-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px; }
.gate-foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.gate-foot .btn:disabled {
  opacity: 1; background: var(--surf-3); color: var(--muted);
  border-color: transparent; box-shadow: none; cursor: not-allowed;
}
.gate-foot .dwhy { color: color-mix(in srgb, var(--accent-ink) 55%, currentColor); opacity: 1; }
.gate-foot .link-btn { align-self: center; font-size: var(--fs-md); font-weight: 700; min-height: 44px; }
.gate-foot .link-btn[hidden] { display: none; }

/* בחירת "מתי" — שתי שורות גדולות, לא רדיו קטן */
.gate-opts { display: grid; gap: 10px; margin-top: 14px; }
.gate-opt {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: var(--radius-md); border: 1.5px solid var(--line-1);
  background: var(--surf-1); cursor: pointer;
}
.gate-opt[hidden] { display: none; }
.gate-opt:has(input:checked) { border-color: var(--accent-ink); background: var(--tint-2); }
.gate-opt input { width: 20px; height: 20px; flex: none; accent-color: var(--yellow); margin: 0; }
.gate-opt b     { display: block; font-size: var(--fs-lg); font-weight: 800; }
.gate-opt small { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

.gate-dest {
  display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--surf-1); border: 1px solid var(--line-1);
  font-size: var(--fs-md); font-weight: 700;
}
.gate-dest[hidden], .gate-card .dbranch[hidden], .gate-card .field[hidden], .gate-card .hint[hidden] { display: none; }
.gate-dest .icon { color: color-mix(in srgb, var(--accent-ink) 55%, currentColor); flex: none; }
.gate-dest span  { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gate-card .dbranch { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .gate-way { transition: none; }
}

/* ── כתובות אחרונות במכשיר — במסך הכניסה ובחלון "שינוי" ── */
#dSaved[hidden], #dForm[hidden] { display: none; }
.gate-addrs { display: grid; gap: 10px; margin: 6px 0 14px; }
.gate-addr  { display: flex; align-items: stretch; gap: 6px; }
.gate-addr-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 14px;
  border-radius: var(--radius-md); border: 1.5px solid var(--line-1); background: var(--surf-1);
  color: var(--text); font: inherit; text-align: start; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .gate-addr-pick:hover:not(:disabled) { border-color: var(--accent-ink); } }
.gate-addr-pick:disabled { cursor: default; }
.gate-addr-pick > .icon:first-child { color: color-mix(in srgb, var(--accent-ink) 55%, currentColor); flex: none; }
.gate-addr-pick > .icon:last-child  { color: var(--muted); flex: none; }
.gate-addr-txt { flex: 1; min-width: 0; }
.gate-addr-txt b     { display: block; font-size: var(--fs-md); font-weight: 800; overflow-wrap: anywhere; }
.gate-addr-txt small { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.gate-addr.is-out .gate-addr-pick { opacity: .6; cursor: not-allowed; }
.gate-addr.is-out small { color: var(--red-soft); }
.gate-addr-x {
  flex: none; width: 44px; display: grid; place-items: center;
  border-radius: var(--radius-md); border: 1px solid var(--line-1);
  background: none; color: var(--muted); cursor: pointer;
}
/* "כתובת מלאה" לבד בשורה כשמספר הבית לא נדרש */
.daddr-row:has(#dHouseWrap[hidden]) { grid-template-columns: 1fr; }

/* ── מה נבחר במסך הכניסה, בראש התפריט ── */
.fcard {
  margin: 14px 0 4px; overflow: hidden;
  background: var(--dark-2); border: 1px solid var(--line-1); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.fcard-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; }
.fcard-ico {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--tint-2); color: color-mix(in srgb, var(--accent-ink) 55%, currentColor);
}
.fcard-txt  { flex: 1; min-width: 0; }
.fcard-k    { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.fcard-addr { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.fcard-edit {
  flex: none; padding: 9px 15px; border-radius: var(--radius-pill);
  background: var(--tint-2); border: 1px solid var(--tint-4); color: color-mix(in srgb, var(--accent-ink) 55%, currentColor);
  font-size: var(--fs-sm); font-weight: 800; text-decoration: none;
}
/* שורת העובדות — תאים שווים, ערך גדול ותווית קטנה מתחתיו */
.fcard-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line-1); }
.fcard-stats > * {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; color: inherit; text-decoration: none; text-align: center; min-width: 0;
}
.fcard-stats > * + * { border-inline-start: 1px solid var(--line-1); }
.fcard-stats b {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-md); font-weight: 900; white-space: nowrap;
}
.fcard-stats span { font-size: var(--fs-xs); color: var(--muted); }
.fcard-free {
  margin: 0; padding: 9px 14px; display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--line-1); background: var(--tint-2);
  font-size: var(--fs-sm); font-weight: 700; color: color-mix(in srgb, var(--accent-ink) 55%, currentColor);
}
/* חלון "שינוי" — אותן שורות כמו ברשימת הכתובות במסך הכניסה */
.ch-k { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: var(--fs-sm); font-weight: 800; color: color-mix(in srgb, var(--accent-ink) 55%, currentColor); }
#chSheet .gate-addrs { margin: 0 0 10px; }
#chSheet .gate-addrs:empty { display: none; }
#chSheet .sheet-head { padding-inline-end: 56px; }
.gate-addr.is-current .gate-addr-pick { border-color: var(--accent-ink); background: var(--tint-2); }
.gate-addr.is-current .gate-addr-pick > .icon:last-child { color: var(--green-soft); }
.ch-when { display: block; margin: 16px 0 4px; text-align: center; color: var(--muted); font-size: var(--fs-sm); text-decoration: underline; }

/* לקוח שכבר אומת */
.verified-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; margin-bottom: 14px; border-radius: var(--radius-sm);
  background: var(--green-tint); border: 1px solid var(--green-tint);
  color: var(--green-soft); font-size: var(--fs-md);
}
.verified-box b { color: #fff; }
.verified-box button {
  background: none; color: var(--muted); font-size: var(--fs-sm); text-decoration: underline;
}

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ── בחירת סוג הזמנה ───────────────────────────────────── */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.seg label {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 15px 10px; border-radius: var(--radius-md); cursor: pointer;
  background: var(--surf-1); border: 1.5px solid var(--surf-3);
  font-weight: 800; font-size: var(--fs-md); transition: all .18s;
}
.seg label small { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.seg input { display: none; }
.seg label:has(input:checked) {
  background: var(--tint-2); border-color: var(--accent-ink); color: var(--accent-ink);
}
.seg label:has(input:checked) small { color: var(--accent-ink); }

.section-title {
  font-size: var(--fs-xl); font-weight: 900; margin: 26px 0 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--border); color: var(--accent-ink);
}

/* ── עמוד מעקב ─────────────────────────────────────────── */
.track { padding-block: 26px; }   /* block בלבד — "26px 0" דרס את ה-18px של .container, והעמוד נגע בקצוות */
.track-num { font-size: var(--fs-md); color: var(--muted); }
.track-status { font-size: var(--fs-3xl); font-weight: 900; color: var(--accent-ink); margin: 6px 0 4px; }

/* ── מסך המעקב ─────────────────────────────────────────────
   הסטטוס תופס את המסך הראשון כמעט במלואו. הלקוח שפתח את הדף
   הזה בא לשאלה אחת — "מה קורה עם ההזמנה שלי" — ולפני השינוי
   התשובה הייתה שורה אחת שנלחצה בין באנר תשלום לרשימת מנות.
   פרטי ההזמנה לא נעלמו, הם פשוט ירדו אל מתחת לקיפול.

   svh ולא vh: בנייד שורת הכתובת של הדפדפן נכנסת ויוצאת, ו-vh
   מודד את המסך בלי השורה — כלומר ההירו היה נחתך בדיוק בטעינה
   הראשונה, כשהשורה עוד מוצגת. */
.track-hero {
  min-height: 74svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px 0 8px;
}
.track-hero .track-status {
  font-size: var(--fs-4xl); line-height: 1.15; margin: 8px 0 10px;
}
.track-eta {
  font-size: var(--fs-lg); font-weight: 700; color: var(--text);
  min-height: 1.4em;   /* בלי זה הכל קופץ כשהטקסט מתחלף בעדכון חי */
}

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

   מוצג רק כשיש מה לספור — באיסוף עד שהמנה מוכנה, במשלוח עד
   שהיא יוצאת. לעולם לא עד ההגעה: ראה order_countdown(). */
.track-clock { margin: 18px 0 4px; display: grid; place-items: center; }

.ring { position: relative; width: 220px; max-width: 62vw; aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }  /* מתחיל מלמעלה */

.ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring .ring-bg { stroke: var(--line-1); }
.ring .ring-fg {
  stroke: var(--yellow);
  /* המעבר הוא בדיוק שנייה ולינארי — כל עקומת האצה הופכת את
     הזחילה האחידה לקפיצות קטנות שנראות כמו תקלה */
  transition: stroke-dashoffset 1s linear;
}

/* המרכז יושב מעל ה-SVG ולא מסתובב איתו */
.ring-mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.ring-label { font-size: var(--fs-md); font-weight: 700; color: var(--muted); }
.ring-time {
  font-size: 46px; font-weight: 900; color: var(--accent-ink); line-height: 1;

  /* ספרות ברוחב אחיד. בלעדיו הרוחב משתנה בכל שנייה כשספרה צרה
     מתחלפת ברחבה, והשעון כולו רועד במרכז הטבעת. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";

  /* העמוד RTL, והנקודתיים בין שני מספרים הן תו ניטרלי — בלי
     כפיית כיוון הדפדפן עלול להציג 32:04 במקום 04:32. */
  direction: ltr; unicode-bidi: isolate;
}
/* כשהזמן נגמר אין מה לספור — נשאר הטקסט בלבד, בלי 00:00 תקוע */
.ring-soon { font-size: var(--fs-xl); font-weight: 900; color: var(--accent-ink); line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .ring .ring-fg { transition: none; }
}

/* ── ההצעה להתראות ─────────────────────────────────────────
   בולטת ומיד אחרי ההזמנה, כי זה הרגע היחיד שבו ללקוח באמת
   אכפת. כפתור קטן וצנוע כאן פשוט לא נלחץ. */
.notify-ask {
  margin-top: 24px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--tint-2); text-align: center;
}
.notify-ask-txt { font-weight: 800; font-size: var(--fs-lg); margin-bottom: 3px; }
.notify-ask-sub { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 13px; }

/* ── ביטול עצמי ────────────────────────────────────────────
   ההפך הגמור מ-.notify-ask שמעליו, ובכוונה: זו אפשרות שצריכה
   להיות *נמצאת* למי שמחפש אותה, לא מוצעת למי שלא. בלי מסגרת,
   בלי רקע, בגודל של הערת שוליים. */
/* ── תשלום בהעברה (ביט/פייבוקס) בעמוד המעקב ─────────────────
   הפעולה היחידה שהלקוח צריך לעשות, ולכן מעל הסטטוס: סכום ומספר
   גדולים עם העתקה, כפתור שפותח את האפליקציה, ו"שילמתי". */
.xfer {
  margin: 14px 0 6px; padding: 16px; border-radius: var(--radius-md);
  background: var(--tint-2); border: 1px solid var(--border);
}
.xfer-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: 900; color: var(--accent-ink); margin-bottom: 10px; }
.xfer-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px dashed var(--line-2);
}
.xfer-lbl { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.xfer-amt { font-size: var(--fs-3xl); font-weight: 900; line-height: 1.1; }
.xfer-num { font-size: var(--fs-xl); font-weight: 900; letter-spacing: .5px; text-align: right; }
.xfer-copy {
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--surf-2); border: 1px solid var(--line-2); color: var(--text);
  font-size: var(--fs-sm); font-weight: 800;
}
.xfer-go { margin-top: 12px; }
.xfer-hint { margin-top: 8px; text-align: center; }
.xfer-done { margin-top: 12px; }
.xfer-done[hidden], .xfer-ok[hidden] { display: none; }
/* רגוע ולא ירוק זוהר (מתן, 20.10.2026): מילוי ניטרלי וטקסט רגיל של האתר. הירוק נשאר
   רק ב-✓ — זה עוד לא "שולם", רק "סימנת ששילמת", ולא צריך לצעוק. */
.xfer-ok {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); text-align: center;
  background: var(--surf-1); border: 1px solid var(--border); color: var(--text); font-weight: 700;
}
.xfer-ok .xfer-ok-v { color: var(--green-soft); font-weight: 900; }
.xfer-err:empty { display: none; }
.xfer-err { color: var(--red); text-align: center; margin-top: 8px; }

.track-cancel { margin-top: 20px; text-align: center; }
.track-cancel .btn { font-size: var(--fs-sm); padding: 7px 16px; }
.track-cancel .hint { margin: 7px 0 0; font-size: var(--fs-xs); }

/* הלחיצה הראשונה — הכפתור מפסיק להיות ניטרלי ואומר מה עומד
   לקרות. אדום רק כאן, ולא לפני שהמשתמש כבר בחר בכיוון. */
.track-cancel .btn.is-armed {
  border-color: var(--red, #d60018);
  color: var(--red, #d60018);
  font-weight: 700;
}

/* חיווי שיש עוד תוכן מתחת. בלעדיו מסך שממלא בדיוק את הצג
   נראה כמו כל העמוד, ואיש לא גולל לפרטי ההזמנה. */
.track-more {
  display: block; text-align: center; margin-top: 26px;
  font-size: var(--fs-sm); color: var(--muted); text-decoration: none;
}
.track-more span { display: block; font-size: var(--fs-lg); animation: trackBob 1.9s ease-in-out infinite; }
@keyframes trackBob { 50% { transform: translateY(5px); } }

/* עדכון חי — הבהוב עדין שמסמן שהמצב באמת השתנה עכשיו */
.track-bump { animation: trackBump .7s ease-out; }
@keyframes trackBump {
  0%   { transform: scale(1);    filter: brightness(1); }
  35%  { transform: scale(1.04); filter: brightness(1.5); }
  100% { transform: scale(1);    filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .track-more span, .track-bump { animation: none; }
}

.steps { margin: 26px 0; }
.step { display: flex; gap: 14px; padding-bottom: 22px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ''; position: absolute; inset-inline-start: 13px; top: 30px; bottom: 0;
  width: 2px; background: var(--line-1);
}
.step:last-child::before { display: none; }
.step-dot {
  width: 28px; height: 28px; border-radius: 50%; flex: none; z-index: 1;
  display: grid; place-items: center; font-size: var(--fs-md); font-weight: 900;
  background: var(--surf-3); color: var(--muted);
}
.step.done .step-dot { background: var(--green); color: #fff; }
.step.done::before { background: var(--green); }
.step.current .step-dot {
  background: var(--yellow); color: #111;
  box-shadow: 0 0 0 5px var(--tint-2);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 11px transparent; } }
.step-label { font-weight: 800; font-size: var(--fs-md); padding-top: 3px; }
.step:not(.done):not(.current) .step-label { color: var(--muted); font-weight: 600; }

/* ── נקודות מועדון ─────────────────────────────────────── */
.points-box {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 15px; margin-top: 18px; border-radius: var(--radius-md);
  background: var(--tint-2); border: 1px solid var(--border);
  font-size: var(--fs-md); line-height: 1.5; transition: background .16s;
}
.points-box.on { background: var(--tint-2); }
.points-box input { accent-color: var(--accent-ink); width: 21px; height: 21px; flex: none; margin: 0; }
.points-box b { color: var(--accent-ink); }

.points-note {
  font-size: var(--fs-sm); color: var(--muted); margin: 16px 0 0;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surf-1); border: 1px solid var(--surf-2);
}
.points-note b { color: var(--accent-ink); }

/* ── הכספת ─────────────────────────────────────────────── */
.vault-head  { padding: 26px 0 18px; }
.vault-title { font-size: var(--fs-3xl); font-weight: 900; margin: 0; color: var(--accent-ink); }
.vault-sub   { font-size: var(--fs-md); color: var(--muted); margin: 4px 0 0; }

/* שורת סיכום ולא כרטיסים: מאז שהאריחים מוצגים רק כשיש בהם ערך,
   לרוב יש אחד או שניים — ובגריד של ארבע עמודות אריח בודד נראה
   כמו קופסה יתומה. צ׳יפים נצמדים לתוכן ומסתדרים בכל כמות. */
.vault-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.v-tile {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surf-1);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 9px 15px;
}
.v-tile .v-emoji { font-size: var(--fs-md); display: inline-flex; margin: 0; color: var(--accent-ink); }
.v-tile b        { display: inline; font-size: var(--fs-lg); font-weight: 800; color: var(--accent-ink); }
.v-label         { font-size: var(--fs-sm); color: var(--muted); }
.v-hint          { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }

.v-tier {
  margin-top: 12px; padding: 16px;
  background: var(--dark-2); border: 1px solid var(--surf-3);
  border-radius: var(--radius-md);
}
.v-tier-top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-md); }
.v-tier-top b { font-size: var(--fs-lg); font-weight: 900; color: var(--accent-ink); }
.v-bar {
  height: 7px; border-radius: var(--radius-pill); background: var(--surf-3);
  margin: 12px 0 8px; overflow: hidden;
}
.v-bar span {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--yellow-dark), var(--yellow));
}
.v-tier-note { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.v-tier-note b { color: var(--text); }

/* ההטבות שהדרגה נותנת בפועל */
.v-perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.v-perks span {
  background: var(--tint-2); border: 1px solid var(--tint-4);
  border-radius: var(--radius-pill); padding: 4px 11px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-ink);
}

.v-expiry {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 12px 0 0; padding: 11px 13px;
  background: var(--surf-1); border: 1px solid var(--surf-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.55;
}
.v-expiry .icon { flex: 0 0 auto; margin-top: 2px; }
.v-expiry.soon { border-color: var(--tint-4); color: var(--yellow-soft, var(--yellow)); }

/* ── ההתקדמות למימוש הבא ────────────────────────────────── */
.v-progress {
  margin: var(--sp-4) 0 var(--sp-2); padding: var(--sp-4);
  background: linear-gradient(180deg, var(--tint-2), var(--tint-1));
  border: 1px solid var(--tint-4); border-radius: var(--radius-md);
}
.v-progress.ready { border-color: var(--tint-2); }
.v-progress-top {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: var(--fs-md); line-height: 1.5; color: var(--text);
}
.v-progress-top b     { color: var(--accent-ink); }
.v-progress-top .icon { flex: 0 0 auto; color: var(--accent-ink); }
.v-progress-note { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.v-progress .v-bar { margin-top: var(--sp-3); }
.v-progress .btn   { width: auto; padding-inline: 26px; min-height: 0; }

/* ── תנועות נקודות ──────────────────────────────────────── */
.v-log {
  background: var(--dark-2); border: 1px solid var(--surf-3);
  border-radius: var(--radius-md); overflow: hidden;
}
.v-log-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 13px 15px; border-bottom: 1px solid var(--surf-2);
}
.v-log-row:last-child { border-bottom: 0; }
.v-log-what {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-sm); color: var(--text); min-width: 0;
}
.v-log-what small   { color: var(--muted); font-size: var(--fs-xs); }
.v-log-what .dimmer { color: var(--muted); }
/* LTR מאולץ — אחרת ב-RTL הסימן קופץ לצד השני ו"50+" נראה
   כמו "50 ומשהו" במקום "פלוס 50" */
.v-log-pts {
  font-weight: 900; font-size: var(--fs-lg); white-space: nowrap;
  color: var(--green-soft); direction: ltr; unicode-bidi: embed; text-align: end;
}
.v-log-pts i {
  display: block; font-style: normal; font-size: var(--fs-xs);
  font-weight: 700; color: var(--muted);
}
.v-log-row.used    .v-log-pts { color: var(--accent-ink); }
.v-log-row.pending .v-log-pts { color: var(--muted); }

.v-items { display: grid; gap: 10px; }
.v-item {
  display: flex; align-items: center; gap: 13px;
  background: var(--dark-2); border: 1px solid var(--surf-3);
  border-radius: var(--radius-md); padding: 14px;
}
.v-item.locked {
  border-color: var(--accent-ink);
  background: linear-gradient(140deg, var(--tint-2), var(--tint-1));
  animation: vGlow 2.6s ease-in-out infinite;
}
@keyframes vGlow {
  50% { box-shadow: 0 0 0 3px var(--tint-2); }
}
.v-item-emoji { font-size: var(--fs-4xl); flex: none; }
.v-item-body { flex: 1; min-width: 0; }
.v-item-body h3 { font-size: var(--fs-md); font-weight: 800; margin: 0 0 3px; }
.v-item-body p  { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.5; }
.v-btn {
  flex: none; padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 800;
  background: var(--surf-3); color: var(--text);
  border: 1px solid var(--line-2);
}
.v-btn.open {
  background: linear-gradient(180deg, var(--yellow-soft), var(--yellow)); color: #111; border-color: transparent;
}
.v-btn:disabled { opacity: .5; }

.v-empty {
  text-align: center; padding: 40px 20px; color: var(--muted);
  background: var(--surf-1); border: 1px dashed var(--line-1);
  border-radius: var(--radius-md); line-height: 1.7; font-size: var(--fs-md);
}

/* אייקון הכספת בכותרת */
.vault-link { position: relative; }
.vault-link.has-new { animation: vShine 3s ease-in-out infinite; }
@keyframes vShine {
  50% { box-shadow: 0 0 0 4px var(--tint-2); border-color: var(--accent-ink); }
}
.vault-badge {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--red); color: #fff; border: 2px solid var(--dark);
  font-size: var(--fs-xs); font-weight: 900; display: grid; place-items: center;
}

/* ── אזור אישי ─────────────────────────────────────────── */
.acct-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 26px 0 16px;
}
.acct-name  { font-size: var(--fs-3xl); font-weight: 900; margin: 0; color: var(--accent-ink); }
.acct-phone { font-size: var(--fs-md); color: var(--muted); margin: 3px 0 0; }
.acct-out {
  background: var(--surf-2); color: var(--muted);
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: var(--fs-sm); font-weight: 700;
}

.acct-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.acct-stat {
  background: var(--dark-2); border: 1px solid var(--surf-3);
  border-radius: var(--radius-md); padding: 15px 10px; text-align: center;
}
.acct-stat b    { display: block; font-size: var(--fs-2xl); font-weight: 900; color: var(--accent-ink); }
.acct-stat span { font-size: var(--fs-sm); color: var(--muted); }

/* ── מועדון ────────────────────────────────────────────── */
/* רצועה בולטת מתחת ל-hero. גבול צהוב ולא רקע צהוב מלא —
   מושכת עין בלי להתחרות בכפתורי ההזמנה עצמם */
.club-banner {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: var(--sp-4) 0 0; padding: var(--sp-4);
  background: linear-gradient(180deg, var(--tint-2), var(--tint-1));
  border: 1px solid var(--tint-4); border-radius: var(--radius-md);
  text-decoration: none; color: var(--text);
}
.club-banner-ic  { flex: 0 0 auto; color: var(--accent-ink); display: flex; }
.club-banner-txt { flex: 1; min-width: 0; }
.club-banner-txt b {
  display: block; font-size: var(--fs-lg); font-weight: 900; color: var(--accent-ink);
}
.club-banner-txt small {
  display: block; margin-top: 2px; font-size: var(--fs-sm);
  color: var(--muted); line-height: 1.5;
}
.club-banner-cta {
  flex: 0 0 auto; background: var(--yellow); color: #111;
  font-weight: 900; font-size: var(--fs-sm); white-space: nowrap;
  padding: 9px 15px; border-radius: var(--radius-pill);
}
.club-banner:active { background: var(--tint-2); }

@media (max-width: 420px) {
  .club-banner     { flex-wrap: wrap; }
  .club-banner-cta { width: 100%; text-align: center; }
}

/* "התחבר / הרשם" בכותרת — טקסט ולא אייקון, כדי שיהיה ברור מה זה */
.login-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--radius-pill);
  background: var(--yellow); color: #111;
  font-size: var(--fs-sm); font-weight: 900; text-decoration: none;
  white-space: nowrap;
}
.login-pill:active { background: var(--yellow-soft, #e6c000); }

.club-perks { list-style: none; padding: 0; margin: 0 0 24px; }
.club-perks li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--surf-2);
  color: var(--muted); font-size: var(--fs-md); line-height: 1.6;
}
.club-perks li:last-child { border-bottom: 0; }
.club-perks .icon { flex: 0 0 auto; color: var(--accent-ink); margin-top: 2px; }
.club-perks b { color: var(--text); }

/* במסך ההתחברות הרשימה מיושרת לימין, מתחת לכותרת הממורכזת */
.club-intro { display: block; margin-bottom: var(--sp-4); }
.login-box .club-perks { text-align: start; margin-bottom: 0; }

/* איסוף יום הולדת — אחרי ההצטרפות, לא בטופס עצמו */
.bday-box {
  display: grid; gap: var(--sp-2);
  margin: var(--sp-4) 0; padding: var(--sp-4);
  background: var(--dark-2); border: 1px solid var(--surf-3);
  border-radius: var(--radius-md);
}
.bday-box b { color: var(--accent-ink); font-size: var(--fs-md); }
.bday-row { display: flex; gap: var(--sp-2); }
.bday-row select { flex: 1; min-width: 0; }
.bday-row .btn  { width: auto; flex: 0 0 auto; padding-inline: 18px; min-height: 0; }

/* תקנון — טקסט ארוך, צריך אוויר בין הסעיפים */
.terms { color: var(--muted); line-height: 1.85; font-size: var(--fs-md); }
.terms h2 {
  color: var(--text); font-size: var(--fs-lg); font-weight: 800;
  margin: var(--sp-6) 0 var(--sp-2);
}
.terms p  { margin: 0 0 var(--sp-3); }
.terms ul { margin: 0 0 var(--sp-3); padding-inline-start: 20px; }
.terms li { margin-bottom: 6px; }
.terms b  { color: var(--text); }

/* בצ׳קאאוט ההצטרפות מקבלת מסגרת צהובה — היא לא "עוד תיבה" */
.consent-club { border-color: var(--tint-4); }
.consent-club b { color: var(--accent-ink); }

.club-strip {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3); padding: var(--sp-4);
  background: var(--dark-2); border: 1px solid var(--tint-4);
  border-radius: var(--radius-md); color: var(--muted);
  font-size: var(--fs-md); text-decoration: none;
}
.club-strip > span   { flex: 1; }
.club-strip b        { color: var(--accent-ink); }
.club-strip .icon    { flex: 0 0 auto; }
.club-strip:active   { background: var(--dark-3); }

.acct-order {
  background: var(--dark-2); border: 1px solid var(--surf-3);
  border-radius: var(--radius-md); padding: 15px; margin-bottom: 11px;
}
.acct-order-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.acct-order-num { font-weight: 900; font-size: var(--fs-lg); color: var(--accent-ink); }
.acct-order-date { font-size: var(--fs-sm); color: var(--muted); }
.acct-order-status {
  margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 800;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surf-3); color: var(--muted);
}
.acct-order-status.live {
  background: var(--tint-2); color: var(--accent-ink); border: 1px solid var(--border);
}
.acct-order-items {
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.acct-order-foot { display: flex; align-items: center; gap: 9px; }
.acct-order-total { font-weight: 900; font-size: var(--fs-lg); color: var(--text); margin-inline-end: auto; }
.acct-btn {
  padding: 9px 16px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 800;
  background: var(--surf-2); color: var(--text);
  border: 1px solid var(--line-2);
}
.acct-btn.primary {
  background: linear-gradient(180deg, var(--yellow-soft), var(--yellow)); color: #111; border-color: transparent;
}
.acct-btn:disabled { opacity: .5; }

.acct-addr {
  background: var(--surf-1); border: 1px solid var(--surf-3);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; font-size: var(--fs-md);
}
.acct-ok { color: var(--green-soft); font-size: var(--fs-xs); font-weight: 700; margin-inline-start: 6px; }

/* רצועת ״הזמן שוב״ בראש התפריט ללקוח חוזר */
.again {
  background: linear-gradient(135deg, var(--tint-2), var(--tint-1));
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 15px; margin: 16px 0 4px;
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
}
.again-txt { flex: 1; min-width: 190px; }
.again-hi  { font-weight: 900; font-size: var(--fs-md); margin: 0 0 3px; }
.again-sub { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.5; }

/* ── פוטר ──────────────────────────────────────────────── */
.foot {
  margin-top: 44px; padding: 26px 0 34px;
  border-top: 1px solid var(--surf-3);
  text-align: center; font-size: var(--fs-sm); color: var(--muted); line-height: 1.9;
}
.foot a { color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ══ חנות הנקודות ומסך המועדון ═══════════════════════════════
   Mobile-first: כרטיס אחד ברוחב מלא, ומ-520px ומעלה גריד.
   כל האנימציות מכובדות ל-prefers-reduced-motion בסוף הקובץ. */

/* ── כותרת: המספר הגדול ── */
.v-hero {
  background: linear-gradient(160deg, var(--dark-3), var(--dark-2));
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 22px 18px 18px; margin-bottom: 16px; text-align: center;
}
.v-hero-main { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.v-hero-num {
  font-size: 46px; font-weight: 900; line-height: 1;
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.v-hero-unit { font-size: var(--fs-sm); color: var(--muted); letter-spacing: .04em; }
.v-hero-money { font-size: var(--fs-md); font-weight: 700; margin-top: 4px; }
.v-hero-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
.v-hero-stats div { display: flex; flex-direction: column; gap: 2px; }
.v-hero-stats b { font-size: var(--fs-xl); font-weight: 800; }
.v-hero-stats span { font-size: var(--fs-xs); color: var(--muted); }

/* ── כרטיסי החנות ── */
.v-shop-sub { color: var(--muted); font-size: var(--fs-sm); margin: -6px 0 14px; }
.v-shop { display: grid; gap: 12px; }
@media (min-width: 520px) { .v-shop { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .v-shop { grid-template-columns: repeat(3, 1fr); } }

.v-card {
  display: flex; gap: 12px; padding: 12px;
  background: var(--dark-2); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.v-card.ready { border-color: var(--tint-4); }
.v-card.out   { opacity: .55; }
@media (hover: hover) {
  .v-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

.v-card-img {
  flex: 0 0 74px; width: 74px; height: 74px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--dark-3);
  display: grid; place-items: center;
}
.v-card-img img { width: 100%; height: 100%; object-fit: cover; }
.v-card-ph { color: var(--muted); }

.v-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.v-card-body h3 {
  margin: 0; font-size: var(--fs-lg); font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v-card-price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.v-card-pts { font-weight: 800; color: var(--accent-ink); }
.v-card-price s { color: var(--muted); font-size: var(--fs-sm); }

/* פס ההתקדמות — נפתח באנימציה מרוחב 0 לרוחב שנקבע ב---w */
.v-card-bar {
  height: 7px; border-radius: var(--radius-pill);
  background: var(--surf-3); overflow: hidden;
}
.v-card-bar > span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--yellow-dark), var(--yellow));
  animation: vGrow .9s cubic-bezier(.22,1,.36,1) .15s forwards;
}
@keyframes vGrow { to { width: var(--w); } }

.v-card-note { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.v-card.ready .v-card-note { color: var(--accent-ink); }

.v-card-btn {
  margin-top: auto; align-self: flex-start;
  padding: 7px 18px; border-radius: var(--radius-pill);
  font-weight: 800; font-size: var(--fs-sm);
  background: var(--yellow); color: var(--dark-3); border: 0;
  transition: filter .15s, transform .1s;
}
.v-card-btn:hover:not(:disabled) { filter: brightness(1.08); }
.v-card-btn:active:not(:disabled) { transform: scale(.97); }
.v-card-btn:disabled {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .v-card-bar > span { animation: none; width: var(--w); }
  .v-card { transition: none; }
}

/* הטבה שכבר נבחרה לעגלה — נבדלת חזותית כדי שהלקוח לא ילחץ
   "השתמש" פעם שנייה ויחשוב שמשהו לא נקלט */
.v-item.in-cart { border-color: var(--tint-4); background: var(--tint-1); }
.v-item.in-cart .v-btn { background: transparent; color: var(--accent-ink); border: 1px solid var(--yellow); }

/* ── כרטיס יום הולדת ──────────────────────────────────────
   בולט בכוונה: זו בקשת מידע, והיא צריכה להצדיק את עצמה
   בשנייה הראשונה. נעלם ברגע שהתאריך נשמר. */
.v-bday {
  margin: 14px 0; padding: 16px;
  background: linear-gradient(150deg, var(--tint-2), var(--surf-1));
  border: 1px solid var(--tint-4); border-radius: var(--radius-md);
}
.v-bday-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.v-bday-cake { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.v-bday-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 800; }
.v-bday-head p  { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }

.v-bday-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.v-bday-form select {
  background: var(--dark-3); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: var(--fs-md); min-width: 0;
}
.v-bday-btn {
  padding: 10px 20px; border: 0; border-radius: var(--radius-sm);
  background: var(--yellow); color: var(--dark-3); font-weight: 800;
  font-size: var(--fs-md); white-space: nowrap;
}
.v-bday-btn:active { transform: scale(.97); }

/* ── חלון המועדון (חד-פעמי במסך הכניסה) ────────────────────
   מופיע רק אחרי שגיליון משלוח/איסוף נסגר, כדי ששני מודאלים
   לא יתחרו על אותה שנייה. */
.cpop {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
/* שתי הגנות, כי שכבה שחוסמת את כל האתר היא תקלה שקטה וקשה
   לאבחון: [hidden] נותן display:none רק בעדיפות דפדפן ו-.cpop
   גובר עליו, ולכן צריך את הכלל המפורש. pointer-events הוא
   רשת הביטחון — אותו דפוס שכבר משמש ב-.sheet-backdrop. */
.cpop[hidden] { display: none; }
.cpop.on { opacity: 1; pointer-events: auto; }
body.cpop-open { overflow: hidden; }

.cpop-card {
  position: relative; width: 100%; max-width: 380px;
  background: linear-gradient(165deg, var(--dark-3), var(--dark-2));
  border: 1px solid var(--tint-4); border-radius: var(--radius-xl);
  padding: 26px 22px 20px; text-align: center;
  box-shadow: var(--shadow);
  transform: translateY(14px) scale(.97);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.cpop.on .cpop-card { transform: none; }

.cpop-x {
  position: absolute; inset-block-start: 8px; inset-inline-end: 12px;
  background: none; border: 0; color: var(--muted);
  font-size: 26px; line-height: 1; padding: 4px 8px; cursor: pointer;
}
.cpop-x:hover { color: var(--text); }

.cpop-ic    { color: var(--accent-ink); margin-bottom: 6px; }
.cpop-title { margin: 0; font-size: var(--fs-2xl); font-weight: 900; }
.cpop-sub   { margin: 4px 0 16px; font-size: var(--fs-sm); color: var(--muted); }

.cpop-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 11px; text-align: start; }
.cpop-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; }
.cpop-list svg { flex: 0 0 auto; color: var(--accent-ink); margin-top: 1px; }

.cpop-cta {
  display: block; padding: 13px; border-radius: var(--radius-pill);
  background: var(--yellow); color: var(--dark-3);
  font-weight: 800; font-size: var(--fs-md); text-decoration: none;
}
.cpop-cta:active { transform: scale(.98); }
.cpop-later {
  display: block; width: 100%; margin-top: 10px; padding: 9px;
  background: none; border: 0; color: var(--muted);
  font-size: var(--fs-sm); cursor: pointer;
}
.cpop-later:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .cpop, .cpop-card { transition: none; }
}

/* ── מתג ערכת הצבעים ──────────────────────────────────────
   מוצג רק כש-BIZ_THEME='both'. האייקון מראה את מה *שיקרה*
   בלחיצה ולא את המצב הנוכחי — שמש = "עבור לבהיר". מתג שמראה
   את המצב הקיים גורם לחצי מהמשתמשים ללחוץ לכיוון ההפוך. */
.theme-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  background: var(--surf-2); color: var(--text);
  border: 1px solid var(--line-1); border-radius: var(--radius-pill);
  cursor: pointer; transition: background .15s, color .15s;
}
.theme-btn:hover  { background: var(--surf-3); color: var(--accent-ink); }
.theme-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.theme-btn .th-moon { display: none; }
:root[data-theme="light"] .theme-btn .th-sun  { display: none; }
:root[data-theme="light"] .theme-btn .th-moon { display: block; }

/* התמונה בהירו כהה בשתי הערכות (הכיתוב לבן מעליה), אבל על רקע
   עמוד בהיר המעבר לקצה התמונה נעשה חד. ריכוך רק בערכה הבהירה. */
:root[data-theme="light"] .hero { box-shadow: inset 0 -60px 60px -60px var(--dark); }

/* ── הצעות השלמה בעגלה ───────────────────────────────────────
   רצועה אופקית ולא רשת: ההצעות נספחות לעגלה ואסור להן להתחרות
   ברשימת הפריטים עצמה. גלילה אופקית משאירה אותן על שורה אחת
   גם עם שמונה הצעות במסך צר, ובלי לדחוף את הסיכום מתחת לקיפול. */
.suggest { margin: var(--sp-5) 0 0; }
.suggest-title {
  margin: 0 0 var(--sp-3); font-size: var(--fs-sm);
  font-weight: 800; color: var(--text);
}
/* ── כרטיסי ההשלמה ─────────────────────────────────────────
   קודם עמדה כאן שורת שבבי טקסט. שבב הוא רשימה, וכרטיס עם
   תמונה הוא הצעה — וזה ההבדל בין תפריט שני לבין הזמנה לקחת
   עוד משהו. הגודל (108) נבחר כך ששלושה וחצי כרטיסים נראים
   במסך טלפון: חצי כרטיס חתוך הוא מה שמסמן שיש עוד, בלי לדרוש
   פס גלילה. */
/* ⚠️ בלי זליגה שלילית לשוליים. ניסיתי margin שלילי כדי שהשורה
   תיגע בקצוות המסך כמו בוולט, והתוצאה הייתה גלישה אופקית של
   **כל העמוד**: המכל כאן אינו חותך, ולכן 16 פיקסלים מכל צד
   דחפו את הכותרת ואת התחתית אל מחוץ למסך. נראה בצילום מיד.
   השורה נשארת בתוך הרוחב של העגלה, והגלילה עובדת בדיוק אותו
   דבר. */
.sg-row {
  display: flex; gap: 10px; overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.sg-row::-webkit-scrollbar { display: none; }

.sg-card {
  flex: 0 0 108px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 0 9px; border-radius: var(--radius-md);
  background: var(--surf-2); border: 1px solid var(--surf-4);
  font: inherit; color: var(--text); text-align: start;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s, transform .12s;
}
.sg-card:hover, .sg-card:focus-visible { border-color: var(--accent-ink); }
.sg-card:active { transform: scale(.97); }

.sg-media {
  position: relative; display: block; aspect-ratio: 1;
  background: var(--surf-3); overflow: hidden;
}
.sg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* אין תמונה — אייקון הקטגוריה, כמו .prod-img.placeholder בתפריט */
.sg-ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--muted); background: var(--tint-1);
}

/* ה-+ יושב על התמונה, כמו בכרטיס המנה בתפריט: הוא מה שאומר
   שהכרטיס ניתן ללחיצה ושהלחיצה מוסיפה — ולא פותחת. */
.sg-plus {
  position: absolute; inset-block-end: 6px; inset-inline-end: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--yellow); color: #111; font-weight: 800; font-size: 16px;
  line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.sg-name {
  margin-top: 7px; padding-inline: 9px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.3;
  /* שתי שורות ואז חיתוך: "חומוס נקי בצד 250 מ״ל" חייב להיכנס,
     אבל כרטיס שגדל לפי השם הארוך ביותר שובר את השורה כולה. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sg-price {
  padding-inline: 9px; font-size: var(--fs-xs); color: var(--muted); font-weight: 700;
}

/* נוסף — עד שהעמוד מתרענן */
.sg-card.is-added { border-color: var(--green, #16a34a); opacity: .55; }
/* font-size:0 מסתיר את ה-+ עצמו; ה-✓ בא מ-::after ומקבל גודל
   משלו. בלי זה השניים היו מופיעים זה לצד זה. */
.sg-card.is-added .sg-plus {
  background: var(--green, #16a34a); color: #fff; font-size: 0;
}
.sg-card.is-added .sg-plus::after { content: '✓'; font-size: 13px; }

.suggest-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--radius-pill);
  background: var(--surf-2); border: 1px solid var(--surf-4);
  font: inherit; font-size: var(--fs-xs); color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.suggest-chip:hover, .suggest-chip:focus-visible {
  border-color: var(--accent-ink); background: var(--tint-1);
}
.suggest-price { color: var(--muted); font-weight: 700; }

/* ── הזמנה מרוכזת ──────────────────────────────────────────
   group.php. הכל נבנה מהטוקנים הקיימים ולא מצבעים קשיחים —
   אחרת המסך היה עובד בערכה הכהה ונשבר בבהירה, וזו בדיוק
   הסיבה שהטוקנים רוכזו מלכתחילה. */

.grp-card {
  background: var(--surf-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
/* רשימה שהשורות בה נוגעות בקצה — הריווח עובר לשורה עצמה */
.grp-card--flush { padding: 0; gap: 0; overflow: hidden; }

.grp-head { margin-bottom: var(--sp-4); }
.grp-head h1 { margin: 0 0 2px; font-size: var(--fs-2xl); }

.grp-note {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surf-1);
  border: 1px solid var(--line-1);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.grp-note--ok {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 34%, transparent);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

/* ── ההזמנות של המזמין ─────────────────────────────────── */
.grp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-1);
  color: inherit; text-decoration: none;
}
.grp-row:last-child { border-bottom: 0; }
.grp-row:hover { background: var(--surf-1); }
.grp-row-main { display: grid; gap: 2px; min-width: 0; }
.grp-row-main b { font-size: var(--fs-md); }
.grp-row-main small { font-size: var(--fs-sm); color: var(--muted); }

.grp-st {
  font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surf-3); color: var(--muted);
  white-space: nowrap; flex: 0 0 auto;
}
.grp-st--open {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 15%, transparent);
}
.grp-st--placed { color: var(--accent-ink); background: var(--surf-4); }

/* ── מי הזמין מה ───────────────────────────────────────── */
.grp-empty {
  text-align: center; color: var(--muted);
  font-size: var(--fs-sm); padding: var(--sp-5) var(--sp-4);
}

.grp-person { border-bottom: 1px solid var(--line-1); padding: var(--sp-3) var(--sp-4); }
.grp-person:last-child { border-bottom: 0; }

.grp-person-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.grp-person-head b    { font-size: var(--fs-md); }
.grp-person-head span { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

.grp-item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 3px 0; font-size: var(--fs-sm);
}
.grp-item-name  { flex: 1 1 auto; min-width: 0; color: var(--muted); }
.grp-item-name small { display: block; font-size: var(--fs-xs); opacity: .75; }
.grp-item-price { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* אזור לחיצה גדול מהסימן עצמו — נלחץ באגודל על סלולרי */
.grp-rm {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: var(--fs-md); line-height: 1;
  padding: 2px 6px; margin: -2px -6px 0 0; border-radius: var(--radius-sm);
}
.grp-rm:hover { color: var(--red); background: var(--surf-3); }
.grp-rm:disabled { opacity: .4; cursor: default; }

.grp-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--surf-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
}
.grp-total span { font-size: var(--fs-sm); color: var(--muted); }
.grp-total b    { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }

/* ── פעולות המזמין ─────────────────────────────────────── */
.grp-host h2 { margin: 0; font-size: var(--fs-lg); }
.grp-host .field { margin: 0; }
/* הקישור נבחר ומועתק, לא נקרא — גופן אחיד מונע בלבול בין
   תווים דומים אצל מי שמעתיק ידנית מצילום מסך */
.grp-host #shareLink { font-family: ui-monospace, monospace; font-size: var(--fs-sm); }

.grp-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.grp-acts .btn { flex: 1 1 auto; min-width: 140px; }

/* ── כפתור ההזמנה הקבוצתית בכותרת ─────────────────────────
   יושב ליד אייקוני החשבון והמועדון. גלולה עם טקסט ולא אייקון
   בלבד — ״הזמנה קבוצתית״ אינו מושג שאפשר לנחש מציור, וזה אותו
   נימוק שכבר כתוב על .login-pill.

   ⚠️ לא צהוב כמו .login-pill: הצהוב שמור לפעולה שהעסק הכי רוצה
   שיעשו (הרשמה), ושני כפתורים צהובים זה לצד זה מבטלים זה את
   ההדגשה של זה. */
.group-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--surf-2); border: 1px solid var(--surf-4);
  color: var(--text); font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.group-pill:hover { background: var(--surf-3); border-color: var(--line-2); }
.group-pill .icon { color: var(--accent-ink); flex: none; }

/* מתחת ל-560px נשאר האייקון בלבד, בגודל של שכניו העגולים —
   שם אין רוחב לשלוש מילים, וממילא אף אחד לא מארגן הזמנה
   משרדית מהטלפון בעמידה. ה-title נשאר כהסבר. */
@media (max-width: 560px) {
  .group-pill { width: 40px; height: 40px; padding: 0; border-radius: 50%;
                justify-content: center; }
  .group-pill span { display: none; }
}

/* ── בחירת מי משלם ─────────────────────────────────────────
   שתי אפשרויות שרואים יחד. רדיו ולא select — הבחירה משנה
   אילו שדות קיימים בטופס, וזה צריך להיות גלוי לפני הלחיצה. */
.grp-mode {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-1);
  cursor: pointer;
  margin-bottom: var(--sp-2);
}
.grp-mode:last-child { margin-bottom: 0; }
.grp-mode input { width: 19px; height: 19px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent-ink); }
.grp-mode span  { display: grid; gap: 2px; min-width: 0; }
.grp-mode b     { font-size: var(--fs-md); font-weight: 700; }
.grp-mode small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.grp-mode:has(input:checked) { border-color: var(--accent-ink); background: var(--surf-2); }
/* אפשרות שאינה זמינה עדיין — נראית, מוסברת, ולא נלחצת */
.grp-mode.is-off { opacity: .55; cursor: default; }
.grp-mode.is-off:has(input:checked) { border-color: var(--line-1); background: var(--surf-1); }

/* ההתקדמות אל המשלוח החינם בהזמנה קבוצתית.
   ⚠️ צבע ניטרלי מתחת לסף ולא אדום/אזהרה: זה פיתוי ולא חסימה,
   וההזמנה עוברת בכל מקרה. אדום שם היה אומר "אי אפשר". */
.grp-free {
  padding: var(--sp-3) var(--sp-4);
  margin: calc(var(--sp-4) * -1) 0 var(--sp-4);
  border: 1px solid var(--line-1);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--surf-1);
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
}
.grp-free b { color: var(--text); font-variant-numeric: tabular-nums; }
.grp-free.is-on {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

/* ── ההירו במסך רחב ────────────────────────────────────────
   התמונה היא 700×438. במסך 2500px היא נמתחת פי 3.6, ובגובה
   300px נראית ממנה רצועה אופקית דקה — וזו תמונת פלאט-ליי,
   כלומר פריסה שנקראת רק כשרואים אותה בשלמותה. החיתוך הזה
   הפך אותה לשברי כריכים.

   הפתרון כאן: לא למתוח. עותק מטושטש ממלא את הרוחב, והתמונה
   עצמה יושבת במרכז ברוחב שפוי — הגדלה של פי 1.7 במקום 3.6.

   ⚠️ **הקלה ולא פתרון.** צילום ברוחב 1600+ מייתר את כל הבלוק
   הזה, ואז אפשר למחוק אותו. */

/* עד 1100px התמונה גדולה מהמסך ממילא — נשארת חדה ומכסה. */
.hero-pic--main { display: none; }

@media (min-width: 1100px) {
  /* גובה גדול יותר = פרוסה גדולה יותר מהפלאט-ליי. ההגדלה
     נקבעת ברוחב ולכן לא מחמירה מכך. */
  .hero { min-height: 380px; }

  .hero-pic--blur img {
    filter: blur(34px) brightness(.62) saturate(1.08);
    /* scale מעל 1 — אחרת הטשטוש חושף קצוות שקופים בשוליים */
    transform: scale(1.18);
  }

  .hero-pic--main {
    display: block;
    inset: 0; margin-inline: auto;
    width: min(100%, 1150px);
    /* דהייה לצדדים כדי שלא יהיה תפר אנכי חד מול הטשטוש */
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg,
      transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}

/* ── הזמנה קבוצתית: המסך המחודש ────────────────────────────
   נוסף על הבלוק שמעל ולא במקומו — .grp-card, .grp-person
   ו-.grp-total לא השתנו, ורק מה שהמסך החדש הצמיח יושב כאן. */

/* ⚠️ **ניגודיות, לא סגנון.** --muted הגלובלי הוא .62 שקיפות,
   וזה עובד על כותרת משנית בודדת. במסך הזה הוא צובע שבע שורות
   הסבר ברצף, ובטלפון בשמש הן פשוט לא נקראו. ההעלאה מקומית
   לעמוד הקבוצתי בלבד: שינוי הטוקן הגלובלי הוא החלטה על כל
   האתר, וזה לא מה שנבדק כאן. */
.grp-page { --muted: color-mix(in srgb, var(--text) 80%, transparent); }

/* ⚠️ **בלי השורה הזו כל אזור מקופל במסך נפתח מעצמו.** התכונה
   hidden מקבלת display:none מגיליון הדפדפן בלבד, וכל כלל שלנו
   שקובע display (grid ב-.grp-addr-edit, flex ב-.btn) גובר עליה
   בספציפיות. נמדד: בורר הכתובת, שדות מועד הסגירה וכפתור
   ״סיימתי לבחור״ הופיעו כולם בטעינה, בזמן ש-JS חשב שהם סגורים.

   ‎!important ולא סלקטור מדויק יותר: הכלל צריך לגבור על כל
   מחלקה עתידית שתוסיף display לאותם אזורים, וזו בדיוק ההערה
   שכבר כתובה ליד .cpop[hidden] למעלה. */
.grp-page [hidden] { display: none !important; }

/* ── פקדי הטופס בערכה הכהה ─────────────────────────────────
   ⚠️ **בלי זה כפתור רדיו *כבוי* נראה כמו דלוק.** הדפדפן מצייר
   רדיו, צ׳קבוקס ובורר תאריך לפי color-scheme, וברירת המחדל
   שלו היא בהירה — כלומר עיגול לבן מלא. על רקע שחור הוא נקרא
   כסימון, ובשדה ״עד מתי אפשר לבחור מנות״ שתי האפשרויות נראו
   מסומנות בבת אחת. נמדד בצילום מסך מהמסך החי.

   נגזר מ-data-theme ולא נעול על 'dark': העסק יכול לנעול ערכה
   בהירה (BIZ_THEME), ו-color-scheme:dark קבוע היה הופך שם את
   אותם פקדים לכהים על רקע לבן — בדיוק אותה תקלה, הפוכה. */
:root .grp-page                    { color-scheme: dark; }
:root[data-theme="light"] .grp-page { color-scheme: light; }

.grp-lead {
  color: var(--muted); font-size: var(--fs-md); line-height: 1.6;
  margin: 0 0 var(--sp-4);
}

/* המשפט שמחליף את בחירת המשלם כל עוד אין סליקה למשתתף.
   מסגרת ולא hint: זו אמירה על איך ההזמנה עובדת, ולא הערת
   שוליים לשדה שמעליה. */
.grp-model {
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-1);
  font-size: var(--fs-md); font-weight: 700; color: var(--text);
}

/* מה שקורה — ומה שלא קורה — בלחיצה על הכפתור הראשי. */
.grp-fine {
  margin: calc(var(--sp-3) * -1) 0 0;
  font-size: var(--fs-sm); color: var(--muted); text-align: center; line-height: 1.6;
}
.grp-go { margin-top: var(--sp-2); }

/* ── כתובת: מה שנבחר, ואיך משנים ─────────────────────────── */
.grp-addr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-1);
}
.grp-addr--static { background: var(--surf-2); }
.grp-addr-main { display: grid; gap: 3px; min-width: 0; }
.grp-addr-main b     { font-size: var(--fs-md); overflow-wrap: anywhere; }
.grp-addr-main small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.grp-addr .link-btn  { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 800; }

.grp-addr-edit { display: grid; gap: var(--sp-2); }
/* הרחוב רחב פי שלושה ממספר הבית — זה היחס שבו הם נכתבים */
.grp-addr-row { display: grid; grid-template-columns: 3fr 1fr; gap: var(--sp-2); }
.grp-addr-acts { display: flex; gap: var(--sp-2); }
.grp-addr-acts .btn { min-height: 44px; font-size: var(--fs-md); padding: 10px 16px; }

/* ── הודעת שדה ────────────────────────────────────────────
   שלושה מצבים ולא שניים: ״עוד לא בחרתם״ אינו שגיאה, וצביעתו
   באדום הייתה אומרת למשתמש שהוא עשה משהו רע כשהוא רק עוד לא
   הגיע לשדה. */
.grp-msg {
  margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted);
}
.grp-msg.is-ok   { color: var(--green); }
.grp-msg.is-warn { color: var(--accent-ink); }
.grp-msg.is-err  { color: var(--red); }

/* ── שדה סכום ─────────────────────────────────────────────
   ה-₪ מודבק לשדה ולא נמצא רק בהסבר: מספר עירום בשדה תקציב
   נקרא גם כאחוזים וגם כמספר מנות. */
.grp-money { position: relative; }
.grp-money span {
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 800; pointer-events: none;
}
.grp-money input { padding-inline-start: 34px; }

/* ── אפשרויות נוספות ──────────────────────────────────── */
.grp-more {
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-1);
}
.grp-more > summary {
  padding: var(--sp-3);
  font-size: var(--fs-md); font-weight: 800; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: var(--sp-2);
}
.grp-more > summary::-webkit-details-marker { display: none; }
/* חץ שמצביע למטה ומסתובב בפתיחה. ⚠️ **border-right/bottom
   פיזיים ולא inline-end לוגי.** בעמוד RTL הצד הלוגי מתהפך,
   והחץ הצביע שמאלה — כלומר נקרא כמו כפתור ״חזרה״ ולא כמו
   ״נפתח למטה״. הכיוון כאן אינו טקסט ולכן אינו אמור להתהפך. */
.grp-more > summary::before {
  content: ''; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s;
  margin-block-start: -4px;
}
.grp-more[open] > summary::before { transform: rotate(225deg); margin-block-start: 3px; }
.grp-more-body {
  padding: 0 var(--sp-3) var(--sp-3);
  border-top: 1px solid var(--line-1);
  padding-top: var(--sp-3);
}
.grp-more-body .field:last-child { margin-bottom: 0; }
/* ״עד מתי אפשר לבחור״ הוא שאלה אחרת מהתקציב וממספר המשתתפים,
   ובלי קו הוא נקרא כהמשך של ההערה שמעליו. */
.grp-more-body > .field {
  border-top: 1px solid var(--line-1);
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
}

.grp-dl { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ── ראש המסך המשותף: סיכום הקבוצה ─────────────────────────
   ⚠️ **כרטיס אחד עם שורות, לא ארבעה כרטיסים.** הגרסה הקודמת
   הייתה ארבע קופסאות בגריד — כל אחת עם מסגרת, ריפוד וכותרת
   משלה — שתפסו יחד כ-600px לפני שהמשתמש הגיע לשדה הראשון
   שאפשר לגעת בו, ואחת מהן נשארה יתומה בשורה שנייה.

   תווית מימין, ערך משמאל, קו דק בין שורות. אותו מידע בשליש
   הגובה, וקל יותר לסריקה: העין רצה על עמודת התוויות. */
.grp-sum {
  margin: var(--sp-3) 0 0;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-1);
  overflow: hidden;
}
.grp-sum-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-1);
}
.grp-sum-row:last-child { border-bottom: 0; }
.grp-sum dt {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
}
.grp-sum dd {
  margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere;
}
/* השורה השנייה — תעריף, שעות, תקרה — קטנה ומתחת לערך */
.grp-sum dd small {
  display: block; font-size: var(--fs-xs); color: var(--muted);
  line-height: 1.5; margin-top: 1px;
}
/* הכתובת ארוכה ולכן מקבלת את כל הרוחב מתחת לתווית */
@media (max-width: 380px) {
  .grp-sum-row--wide { grid-template-columns: 1fr; gap: 2px; }
}

/* ── סיימתי לבחור ─────────────────────────────────────────
   כפתור ניטרלי ולא ראשי: הפעולה הראשית במסך הזה היא לבחור
   מנה, וכפתור צהוב שני היה מתחרה בה. */
.grp-done { min-height: 44px; font-size: var(--fs-md); background: var(--surf-2);
            border: 1px solid var(--line-2); color: var(--text); }
.grp-done.is-on {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

/* תגית ליד שם משתתף ברשימה */
.grp-tag {
  display: inline-block; margin-inline-start: 8px;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surf-3); color: var(--muted);
  vertical-align: middle;
}
.grp-tag--ok {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 15%, transparent);
}

/* ── מה שהמזמין רואה לפני שהוא סוגר ──────────────────────── */
.grp-ready {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-1);
  font-size: var(--fs-sm);
}
.grp-ready-k  { font-weight: 800; color: var(--text); }
.grp-ready-w  { color: var(--accent-ink); font-weight: 700; }
.grp-ready-ok { color: var(--green); font-weight: 700; }
.grp-ready-t  {
  margin-inline-start: auto; font-size: var(--fs-lg); font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* ⚠️ ירוק וואטסאפ ולא צהוב: הכפתור נלחץ לפי הצבע שהמשתמש
   כבר מזהה, וצהוב שני ליד ״העתקת הקישור״ מבטל את ההיררכיה
   של הכפתור הראשי בהמשך המסך. */
.btn-wa {
  background: #1faa53; color: #fff; border: 1px solid #1faa53;
}
.btn-wa:hover { background: #199247; border-color: #199247; }

/* ── מובייל ────────────────────────────────────────────────
   מתחת ל-430px שני שדות זה לצד זה נדחסים עד שהתאריך נחתך,
   ושורת פעולות אופקית דוחפת את הכפתור השני מהמסך. */
@media (max-width: 430px) {
  .grp-addr-row  { grid-template-columns: 1fr; }
  .grp-addr-acts { flex-direction: column; }
  .grp-ready-t   { margin-inline-start: 0; }
}

/* משתתף שטרם שילם — במצב ״כל אחד משלם על עצמו״ */
.grp-tag--due {
  color: var(--accent-ink);
  background: var(--tint-2);
}

/* הדלת שמונעת קבוצה תקועה — ״אני משלם על הכל״ */
.grp-takeover { display: grid; gap: var(--sp-2); }
.grp-takeover .btn { min-height: 44px; font-size: var(--fs-md); }

/* ── העגלה הפרטית של המשתתף ────────────────────────────────
   מובחנת מהרשימה המשותפת: מסגרת זהב דקה אומרת ״זה שלך, ואיש
   עוד לא רואה את זה״. בלי ההבחנה הזו היא נקראת כעוד כרטיס
   ברשימה, וזו בדיוק אי-ההבנה שהעגלה נועדה לפתור. */
.grp-mine { border-color: color-mix(in srgb, var(--accent-ink) 45%, var(--line-1)); }
.grp-mine-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
}
.grp-mine-head h2 { margin: 0; font-size: var(--fs-lg); }
.grp-mine-head span { font-size: var(--fs-sm); color: var(--muted); }
.grp-mine .grp-item { border-bottom: 1px solid var(--line-1); padding: var(--sp-2) 0; }
.grp-mine .grp-item:last-child { border-bottom: 0; }

/* מתג התפקידים של המארגן — צר יותר מ-.seg הרגיל, כי הוא ניווט
   ולא בחירה שנשלחת עם הטופס */
.grp-tabs { margin: var(--sp-3) 0 0; }
.grp-tabs label { padding: 10px 8px; font-size: var(--fs-sm); }

/* הודעת הפרטיות בעת איסוף המידע (checkout.php) */
.privacy-note { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.privacy-note a { color: var(--accent-ink); text-decoration: underline; }

/* ══ order.php: "ההזמנה התקבלה!" + מעקב במסך מלא (17.10.2026, מהשניצלן 15.10) ══
   שלושה מסכים באותו דף: מסך הפתיחה (רק מיד אחרי השליחה), המעקב על כל המסך,
   ופרטי ההזמנה במסך משלהם. הצבעים מהמשתנים בלבד — הערכה הבהירה עובדת לבד.
   ⚠️ בביט/פייבוקס שעוד לא שולם בלוק ההעברה (.xfer) יושב *מעל* המעקב, ואז
   המעקב לא נמתח לגובה מסך — הוא מתחיל מיד מתחת לתשלום. */

/* ── מסך הפתיחה ──
   z-index 80 כמו מסך הכניסה: מעל הכותרת וסרגל העגלה, מתחת לכפתור הנגישות (85).
   84px למטה — כדי שהכפתור הקבוע בפינה לא ישב על כפתור "למעקב". */
.osplash {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: max(24px, env(safe-area-inset-top)) 16px max(84px, env(safe-area-inset-bottom));
  background:
    radial-gradient(80% 46% at 50% 26%, var(--tint-3), transparent 72%),
    var(--dark);
  color: var(--text);
}
.osplash[hidden] { display: none; }
.osplash.is-leaving { opacity: 0; transition: opacity .28s ease; }
body.osplash-on { overflow: hidden; }
.osplash-in { width: 100%; max-width: 420px; text-align: center; animation: osIn .45s ease-out both; }
.osplash-check {
  width: 108px; height: 108px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center; color: #111;
  background: linear-gradient(180deg, var(--yellow-soft), var(--yellow));
  box-shadow: 0 0 0 10px var(--tint-2), 0 14px 40px rgba(0,0,0,.4);
  animation: osPop .5s cubic-bezier(.2, 1.4, .4, 1) .1s both;
}
.osplash-check .icon { stroke-width: 3; }
.osplash-t   { margin: 0; font-size: clamp(32px, 9vw, 44px); font-weight: 900; line-height: 1.1; color: var(--accent-ink); }
.osplash-num { margin: 8px 0 0; font-size: var(--fs-lg); color: var(--muted); }
.osplash-sum {
  margin: 24px 0; padding: 16px; display: grid; gap: 11px; text-align: start;
  border-radius: var(--radius-md); background: var(--dark-2); border: 1px solid var(--line-1);
  box-shadow: var(--shadow-md);
}
.osplash-sum p { margin: 0; display: flex; align-items: flex-start; gap: 10px; font-weight: 700; line-height: 1.45; }
.osplash-sum span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.osplash-sum .icon { flex: none; margin-top: 1px; color: color-mix(in srgb, var(--accent-ink) 70%, currentColor); }
.osplash-go { min-height: 56px; }
.osplash-note { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); }
@keyframes osPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes osIn  { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── המעקב על כל המסך ── */
.track-hero[hidden], .track-details[hidden], .track-wait[hidden] { display: none; }
.track:has(> .track-hero:not(.is-closed):not([hidden])):not(:has(> .xfer, > .alert)) { padding-top: 0; }
.track-hero:not(.is-closed) {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--nav-h));
  align-items: center; justify-content: center; text-align: center;
  padding: 18px 0 22px;
}
/* הילה זהובה מאחורי השעון, מקצה לקצה — מעבר לשוליים של .container */
.track-hero:not(.is-closed)::before {
  content: ''; position: absolute; z-index: -1;
  inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(70% 38% at 50% 42%, var(--tint-3), transparent 72%),
    linear-gradient(180deg, var(--dark-2) 0%, var(--dark) 100%);
}
/* עם תשלום פתוח מעליו — המעקב מתחיל מיד מתחת, לא מסך שלם אחרי הגלילה */
.track:has(> .xfer, > .alert-err) > .track-hero:not(.is-closed) { min-height: 0; padding-top: 22px; }
/* ...ובלי פס הרקע — אחרת נוצר קו חד בדיוק מתחת לבלוק התשלום */
.track:has(> .xfer, > .alert-err) > .track-hero:not(.is-closed)::before {
  background: radial-gradient(70% 38% at 50% 42%, var(--tint-2), transparent 72%);
}

.track-hero:not(.is-closed) .track-num {
  display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill);
  background: var(--surf-2); border: 1px solid var(--line-1);
  font-size: var(--fs-sm); font-weight: 700;
}
.track-sched {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--tint-2); border: 1px solid var(--tint-4);
  color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 800;
}
.track-hero:not(.is-closed) .track-status {
  margin: 12px 0 2px; font-size: clamp(30px, 5.2svh, 44px); line-height: 1.15;
  text-shadow: 0 4px 24px var(--tint-4);
}
.track-hero .track-clock { margin: 14px 0 0; }
.track-hero .ring { width: min(270px, 34svh, 72vw); max-width: none; }
.track-hero .ring svg { filter: drop-shadow(0 0 14px var(--tint-4)); }
.track-hero .ring circle { stroke-width: 8; }
.track-hero .ring-time { font-size: clamp(42px, 7svh, 62px); }
.track-hero .ring-label { font-size: var(--fs-sm); }

/* ממתין לאישור — טבעת מסתובבת בגודל השעון, עד שהשעון עצמו מופיע */
.track-wait {
  position: relative; width: min(180px, 23svh, 50vw); aspect-ratio: 1; margin: 16px auto 0;
  display: grid; place-items: center; color: var(--accent-ink);
}
.track-wait-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 7px solid var(--line-1); border-top-color: var(--yellow);
  box-shadow: 0 0 32px var(--tint-2);
  animation: twSpin 1.6s linear infinite;
}
@keyframes twSpin { to { transform: rotate(360deg); } }
.track-hero:has(#trackClock:not([style*="none"])) .track-wait { display: none; }

/* השלבים בשורה אחת — טור של ארבע שורות לקח חצי מסך */
.track-hero .steps {
  width: 100%; margin: 22px 0 4px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.track-hero .step { flex-direction: column; align-items: center; gap: 7px; padding-bottom: 0; text-align: center; }
/* הקו ממרכז השלב אל מרכז הבא — הבא יושב בצד הסוף של השורה */
.track-hero .step::before { inset-inline-start: 50%; top: 13px; bottom: auto; width: 100%; height: 2px; }
.track-hero .step-label { padding-top: 0; font-size: var(--fs-sm); line-height: 1.25; }
.track-hero .step.current .step-label { color: var(--accent-ink); }

/* מה שמתחת לשעון — קומפקטי, כדי שהמעקב יישאר הכוכב */
.track-pay { width: 100%; }
.track-pay .alert { margin: 14px 0 0; padding: 10px 14px; font-size: var(--fs-sm); }
.track-hero .notify-ask, .track-hero .track-cancel { width: 100%; }
.track-hero .notify-ask { margin-top: 12px; padding: 12px 14px; }
.track-hero .notify-ask-sub { margin-bottom: 9px; }
.track-hero .notify-ask .btn { min-height: 44px; padding-block: 8px; }
.track-hero .track-cancel { margin-top: 8px; }
.track-hero .track-cancel .btn {
  width: auto; min-height: 40px; border: 0; background: none; box-shadow: none; padding: 4px 8px;
  color: var(--muted); text-decoration: underline; font-weight: 600;
}
.track-hero .track-cancel .btn.is-armed { color: var(--red-soft, var(--red)); }
.track-open { margin-top: 14px; gap: 6px; }
.track-contact { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.track-contact a { color: var(--accent-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* הזמנה סגורה — אין מה לעקוב, ולכן גם אין מסך שלם לתשובה */
.track-hero.is-closed { min-height: 0; justify-content: flex-start; padding: 12px 0 4px; }
.track-hero.is-closed .track-eta:empty { display: none; }

/* ── מסך הפרטים ── */
.track-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 2px; padding: 8px 2px;
  background: none; border: 0; color: var(--muted); font: inherit;
  font-size: var(--fs-md); font-weight: 700; cursor: pointer;
}
/* "חזרה" מצביע ימינה בעברית — chevron-left מתהפך, כמו במסך הכניסה */
.track-back .icon { transform: scaleX(-1); }
.track-details-h { margin: 6px 0 0; font-size: var(--fs-2xl); font-weight: 900; }
.track-details-h span { font-size: var(--fs-md); font-weight: 700; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .osplash-in, .osplash-check, .track-wait-ring { animation: none; }
  .osplash.is-leaving { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   הקופה בשלושה מסכים — checkout.php (17.10.2026, מהשניצלן 15.10)
   טלפון → פרטי ההזמנה → תשלום. אותו טופס, מחולק להצגה בלבד.
   הכרטיסים הם אותו משטח כמו מסך הכניסה והכרטיס בראש התפריט
   (.gate-card / .fcard): var(--dark-2) עם קו שיער, אייקון בעיגול זהוב.
   ═══════════════════════════════════════════════════════════ */
.co { padding-bottom: 32px; }
.co-step[hidden] { display: none; }

.co-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 2px; padding: 8px 2px;
  min-height: 44px; background: none; border: 0; color: var(--muted); font: inherit;
  font-size: var(--fs-md); font-weight: 700; text-decoration: none; cursor: pointer;
}
/* "חזרה" מצביע ימינה בעברית — chevron-left מתהפך, כמו .gate-back */
.co-back .icon { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .co-back:hover { color: var(--text); } }

.co-h     { margin: 4px 0 14px; font-size: var(--fs-2xl); font-weight: 900; }
.co-title { margin: 0 0 6px; font-size: var(--fs-2xl); font-weight: 900; }
.co-lead  { margin: 0 0 18px; }
.co-sec   { margin: 22px 0 12px; font-size: var(--fs-xl); font-weight: 900; }

.co-card {
  background: var(--dark-2); border: 1px solid var(--line-1);
  border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.co-card--lead { border-radius: var(--radius-xl); padding: 22px 18px 18px; margin-top: 4px; }

/* שדה + כפתור באותה שורה (טלפון/שלח קוד, קוד/אימות) */
.co-inline { display: flex; gap: 9px; }
.co-inline input { flex: 1; min-width: 0; }
.co-inline .btn { width: auto; flex: none; min-height: 0; padding-inline: 18px; white-space: nowrap; font-size: var(--fs-md); }
.co-inline .btn:disabled { opacity: .6; cursor: default; }

/* מי מזמין */
.co-one .field { margin-bottom: 12px; }
.co-name-show {
  margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--fs-lg); overflow-wrap: anywhere;
}
.co-name-show[hidden], .co-name-field[hidden] { display: none; }
.co-name-show .link-btn { flex: none; min-height: 44px; font-weight: 700; }
.co-phone {
  margin: 2px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--muted);
}
.co-phone .icon { color: var(--green-soft); }
.co-phone b { color: var(--text); }
.co-phone .link-btn { min-height: 32px; }

/* מה שנבחר במסך הכניסה — שורה אחת עם "שינוי", לא טופס שני */
.co-sum { display: flex; align-items: center; gap: 12px; }
.co-sum-ico {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--tint-2);
  color: color-mix(in srgb, var(--accent-ink) 55%, currentColor);
}
.co-sum-txt { flex: 1; min-width: 0; }
.co-sum-txt small { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.co-sum-txt b     { display: block; margin-top: 1px; font-size: var(--fs-md); font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.co-sum-txt span  { display: block; margin-top: 3px; font-size: var(--fs-sm); color: var(--muted); }
.co-sum-txt span[hidden] { display: none; }
.co-edit {
  flex: none; padding: 7px 13px; min-height: 36px; border-radius: var(--radius-pill);
  background: var(--tint-2); border: 1px solid var(--tint-4); color: var(--accent-ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 800; cursor: pointer;
}
.co-one .co-sum { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-1); }
.co-one .seg { margin: 14px 0 12px; }
.co-one #slotField { margin-bottom: 4px; }

/* נבחר בכניסה: הבורר, השעה (אם ידועה) והכתובת עצמה מוסתרים — ונשלחים.
   "שינוי" מסיר את is-chosen (openChosen ב-checkout.php). */
#checkoutForm.is-chosen #typeSeg,
#checkoutForm.is-chosen .co-when-known,
#checkoutForm.is-chosen .co-core { display: none !important; }
#checkoutForm.is-chosen #deliveryFields { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line-1); }
#deliveryFields .co-sec { margin-top: 18px; }

/* מקופלים: פרטי השליח והערה להזמנה */
.co-more > summary {
  cursor: pointer; padding: 10px 0; min-height: 44px; display: flex; align-items: center; gap: 6px;
  list-style: none; color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 700;
}
.co-more > summary::-webkit-details-marker { display: none; }
.co-more > summary::before { content: '+'; width: 1em; flex: none; text-align: center; font-weight: 900; }
.co-more[open] > summary::before { content: '−'; }
.co-more-k { flex: none; font-weight: 700; white-space: nowrap; }
.co-courier > summary span { min-width: 0; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
/* בלי בחירה מהכניסה פרטי השליח פתוחים כחלק מהטופס — בלי שורת סיכום */
#checkoutForm:not(.is-chosen) .co-courier > summary { display: none; }
.co-notes { border-top: 1px solid var(--line-1); margin-top: 4px; }

.co-next { margin: 18px 0 8px; }

/* מסך התשלום */
.co-recap { padding: 12px 14px; }
.co-totals { margin-top: 4px; }
.co .consent { margin-top: 4px; }

/* מינימום הזמנה — עבר לכאן מ-<style> מוטבע בקופה */
.min-warn { font-size: var(--fs-md); }
.min-warn-title { font-weight: 800; font-size: 1.08em; }
.min-warn-sub { font-weight: 500; margin-top: 4px; }
.min-warn-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.min-warn-acts .btn { flex: 1 1 140px; margin: 0; }

@media (max-width: 380px) {
  .co-card { padding: 14px 12px; }
  .co-card--lead { padding: 20px 14px 16px; }
  .co-inline .btn { padding-inline: 14px; }
}
/* ═══ סוף הקופה בשלושה מסכים ═══ */

/* ── "לצאת מההזמנה?" — נפתח ב"חזרה" בתפריט כשיש משהו בעגלה ──
   ראה initLeaveGuard ב-app.js (25.10.2026, מהשניצלן). מעל חלון המנה. */
.leave-dlg {
  position: fixed; inset: 0; z-index: 130;
  display: none; place-items: center; padding: 16px;
  background: rgba(0,0,0,.72); backdrop-filter: blur(3px);
}
.leave-dlg.is-open { display: grid; animation: leave-fade .18s ease-out; }
.leave-card {
  width: 100%; max-width: 360px; padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--dark-2); color: var(--text); text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  animation: leave-pop .22s cubic-bezier(.32,.72,0,1);
}
.leave-card h3 { margin: 0; font-size: var(--fs-xl); font-weight: 900; }
.leave-card p  { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--fs-md); }
@keyframes leave-fade { from { opacity: 0; } }
@keyframes leave-pop  { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .leave-dlg.is-open, .leave-card { animation: none; }
}

/* ══ נגישות AA — ניגודיות שדות (25.10.2026, מהשניצלן 0badba4, בדיקה מול ת״י 5568) ══
   1.4.3 — הטקסט האפור בתוך שדה ("050-0000000") היה ברירת המחדל של הדפדפן, #757575:
   3.5:1 על הרקע הכהה. --muted עובר 4.5 בשתי הערכות.
   1.4.11 — מסגרת השדה הייתה --line-1 (12% לבן) = 1.4:1 מול הכרטיס, כלומר שדה בלי גבול
   נראה. צריך 3:1: 38% לבן בערכה הכהה, 50% שחור בבהירה. שגיאה ופוקוס — כמו קודם.
   2.4.7 — שדה השם למנה והערה למנה סימנו פוקוס ב-var(--border), כמעט שקוף. */
:root { --field-line: rgba(255, 255, 255, .38); }
:root[data-theme="light"] { --field-line: rgba(0, 0, 0, .5); }
.field input, .field select, .field textarea, input.input, textarea.input, .pname, .note-field { border-color: var(--field-line); }
.pname:focus, .note-field:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

/* טקסט לקורא מסך בלבד */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* כפתור הנגישות קבוע בפינה וכיסה בטלפון את "הצהרת נגישות" — השורה האחרונה בעמוד.
   רווח בתחתית הפוטר בגובה הכפתור והמיקום שלו (ראה accessibility_widget.php). */
@media (max-width: 720px) {
  .foot { padding-bottom: calc(var(--bar-h, 76px) + 96px); }
}

/* ── הודעה ללקוחות בראש התפריט (25.10.2026) — ראה includes/notice.php ── */
.site-notice-wrap { margin-top: 18px; }
.site-notice {
  padding: 14px 16px; border-radius: var(--radius-md); line-height: 1.6;
  background: var(--dark-2); color: var(--text); border: 1px solid var(--accent-ink);
  border-inline-start-width: 4px; font-size: var(--fs-md); font-weight: 600;
}