/* ============================================================
   נופש בקליק — גיליון יחיד
   ------------------------------------------------------------
   ⚠⚠ קובץ אחד לכל ארבע הערכות ולכל המסכים. ההבדל בין הערכות
   נעשה במחלקה על ה-body (‏.layout-experience וכו') ולא בקובץ
   נפרד — החלפת ערכה בדשבורד היא שינוי מחלקה, בלי טעינה ובלי
   מסך לבן.

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

   ⚠⚠⚠ כל צבע שנוגע בזהות הדייר הוא משתנה שנכתב ב-theme.js.
   ‏hex קשיח כאן הוא צבע שלא ישתנה אצל אף לקוח, לנצח.
   ============================================================ */

:root {
  /* נכתבים בזמן ריצה ע"י theme.js — הערכים כאן הם רק כדי
     שהמסך לא יהיה שבור בשנייה שלפני. */
  --bk-primary: #2f6f5e;
  --bk-primary-dark: #23574a;
  --bk-primary-soft: #e8f2ee;
  --bk-on-primary: #ffffff;
  --bk-accent: #c9a227;
  --bk-on-accent: #15202b;
  --bk-font: system-ui, sans-serif;

  /* ⚠ גופן התצוגה לכותרות. נכתב ב-theme.js יחד עם --bk-font,
     ובאותה בקשת רשת אחת (css2 מקבל כמה משפחות). ראו את ההערה
     ב-loadFont: שתי בקשות היו מוסיפות סיבוב לנתיב ה-LCP. */
  --bk-font-display: var(--bk-font);

  /* ============================================================
     ניטרליים — אינם תלויים בדייר
     ------------------------------------------------------------
     ⚠ שונו 9.9.2026. הקודמים היו לבן-צח (#ffffff) על אפור-כחלחל
     (#f7f8fa), וזה מה שגרם לאתר להיראות כמו תבנית SaaS ולא כמו
     אתר של מקום אירוח. השמנת החמה היא הרקע שעליו תצלום של טבע
     נראה כמו תצלום ולא כמו קובץ.
     ⚠⚠ עדיין ניטרליים לחלוטין — אין כאן שום גוון שנלחם בצבע
     שדייר בחר. דייר עם פלטה כחולה מקבל את אותה שמנת.
     ============================================================ */
  --ink: #23282a;
  --ink-soft: #6d7671;
  --line: #e6e1d8;
  --bg: #ffffff;
  --bg-soft: #faf7f2;
  --canvas: #f4f1ea;
  --danger: #b3261e;

  /* ============================================================
     ⚠⚠ מדרג רדיוסים, ולא ערך אחד
     ------------------------------------------------------------
     ‏--radius היה 14px בכל מקום: כפתור, כרטיס, שדה ותמונה קיבלו
     את אותה עגלגלות, ולכן שום דבר לא נראה גדול או קטן יותר
     מהאחר. ⚠ --radius נשאר כשם הכללי כי הערכות דורסות אותו
     (‏.layout-boutique { --radius: 4px }) — הסרתו הייתה שוברת
     אותן בשקט.
     ============================================================ */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ============================================================
     ⚠⚠⚠ צללים במקום מסגרות
     ------------------------------------------------------------
     כל כרטיס במוצר היה ‏1px solid var(--line). מסגרת מפרידה
     אבל אינה מרימה, ולכן ‏.card, ‏.pick ו-.gcard נראו כאותו
     אלמנט בגדלים שונים. ⚠ הצל מדורג: מנוחה, ריחוף, ומורם.
     ⚠⚠ שחור עם אלפא נמוך ולא אפור אטום — צל אטום על רקע שמנת
     הופך לכתם אפור.
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(35,40,42,.04),
               0 2px 6px rgba(35,40,42,.04);
  --shadow: 0 4px 12px rgba(35,40,42,.05),
            0 1px 3px rgba(35,40,42,.04);
  --shadow-lg: 0 12px 32px rgba(35,40,42,.10),
               0 4px 10px rgba(35,40,42,.05);
  --shadow-xl: 0 24px 60px rgba(35,40,42,.14),
               0 8px 20px rgba(35,40,42,.06);

  /* מרווחים — "אוויר" הוא מדרג, לא מספר יחיד. */
  --sp-1: 6px;  --sp-2: 12px; --sp-3: 18px; --sp-4: 24px;
  --sp-5: 36px; --sp-6: 52px; --sp-7: 76px;

  --wrap: 1080px;

  /* ============================================================
     ⚠⚠⚠ בכמה רצועת ההזמנה חופפת את תמונת הפתיחה
     ------------------------------------------------------------
     המספר הזה מופיע בשני מקומות שחייבים להסכים: ‏margin שלילי
     על ‏.bookbar, ו-padding תחתון על ‏.hero__text שמפנה לה מקום.

     ⚠ כשהם היו שני מספרים קשיחים, כפתור «בדיקת זמינות» נחתך
     ‏10px ע"י הרצועה — נמדד בדפדפן 9.9.2026, ‏ctaBottom=636 מול
     ‏bookbarTop=626. ⚠⚠ וזה כשל שקט: הכפתור נראה, מגיב לריחוף,
     ורק העשירית התחתונה שלו אינה לחיצה. משתנה אחד = אי אפשר
     לשנות אחד ולשכוח את השני.
     ============================================================ */
  --hero-lift: 46px;

  /* ⚠ עקומת האטה אחת לכל המוצר. תנועות שנעות בעקומות שונות
     נקראות כשתי מערכות שהודבקו יחד. */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ⚠⚠ אין ערכת לילה באתר הציבורי, ובכוונה. אתר של צימר הוא
   מצגת עם תמונות שצולמו באור מסוים; היפוך צבעים אוטומטי הופך
   אותן לזרות. ⚠ הדשבורד ירש ערכת לילה כשתהיה בקשה אמיתית. */

* { box-sizing: border-box; }

/* ⚠⚠⚠ **חייב להופיע לפני כל כלל שקובע display.**
   התכונה ‏hidden מקבלת ‏display:none מגיליון הדפדפן בלבד, וכל
   כלל שלנו גובר עליה. ‏.boot מוגדר ‏display:grid — כלומר
   ‏boot.hidden = true ב-ui.mount() לא הסתיר כלום, ומסך הפתיחה
   נשאר תלוי מעל האתר של הצימר.

   ⚠ נתפס בפועל בבדיקה מול השרת ב-7.9.2026, לא בקריאת הקוד:
   אין כאן שום שגיאה, שום אזהרה בקונסולה, וה-JS "עבד". */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--bk-font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  /* ⚠ 16px מינימום. פחות מזה גורם ל-iOS לזום על מיקוד בשדה,
     והמשתמש נשאר עם דף מוגדל באמצע טופס ההזמנה. */
  font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: var(--bk-primary-dark); }

/* ============================================================
   ⚠⚠⚠ טיפוגרפיה — ההיררכיה היא העיצוב
   ------------------------------------------------------------
   קודם היה ‏h1 בין 1.7 ל-2.6rem ו-h2 בין 1.25 ל-1.7rem, שניהם
   באותו גופן ובאותו משקל כמו הגוף. ⚠ ההפרש בין כותרת לפסקה
   היה כמה פיקסלים, ולכן הדף נקרא כמסמך אחיד — וזה הדבר היחיד
   שמבדיל אתר של מקום אירוח מטופס.

   ⚠⚠ שלושה שינויים, וכל אחד עושה עבודה אחרת:
     · גופן תצוגה נפרד (סריף) לכותרות מול סן-סריף לממשק
     · טווח רחב יותר, כלומר קפיצה אמיתית בין המדרגות
     · ‏letter-spacing שלילי בגדלים הגדולים — גופן עברי בגודל
       40px+ נראה מרוח בלי זה
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--bk-font-display);
  line-height: 1.15;
  margin: 0 0 .45em;
  font-weight: 600;
  letter-spacing: -.015em;
  /* ⚠ מונע יתום בסוף כותרת עברית קצרה. */
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.6vw, 3.4rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.45rem, 3.4vw, 2.15rem); }
h3 { font-size: clamp(1.08rem, 2vw, 1.28rem); letter-spacing: -.01em; }
/* ⚠ הפסקאות **אינן** מקבלות את גופן התצוגה. סריף בגוף טקסט
   עברי ארוך נקרא פחות טוב, וזו בדיוק הפסקה שמוכרת את המקום. */
p { max-width: 68ch; }

/* ⚠⚠ כותרת-על קטנה מעל h2. היא מה שנותן לבלוק מקום בסדר של
   הדף בלי להוסיף עוד מדרגה של גודל. */
.eyebrow {
  display: block; font-family: var(--bk-font);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--bk-primary); margin: 0 0 var(--sp-1);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* ⚠ 42px → מדרג נשימה. "מרווחים צפופים ואחידים מדי" היה
   הפריט שחזר הכי הרבה בהערכה, וזו השורה שמתקנת אותו. */
.block { padding: var(--sp-6) 0; }
@media (min-width: 900px) { .block { padding: var(--sp-7) 0; } }
.empty, .fineprint { color: var(--ink-soft); font-size: .9rem; }
.fineprint em { font-style: normal; opacity: .75; }
.fineprint--rule { border-inline-start: 3px solid var(--bk-accent);
                   padding-inline-start: 10px; }
.note, .notice { background: var(--bg-soft); border: 1px solid var(--line);
                 border-radius: var(--radius); padding: 12px 14px;
                 margin: 14px 0; }
.back { display: inline-block; margin: 16px 0; color: var(--ink-soft);
        text-decoration: none; }

/* ------------------------------------------------------------
   מסך הפתיחה והשגיאה
   ------------------------------------------------------------ */
/* ⚠⚠⚠ 38vh ולא 60vh. מסך הפתיחה תופס את המסך הראשון עד
   שה-JS מסיים, ולכן כל מי שמצלם את הדף בלי להריץ JS — סורק,
   בודק אוטומטי, תצוגה מקדימה — ראה ספינר וכלום. הבלוק הסטטי
   שמתחתיו (#staticFoot) הוא כל התוכן שיש לנו להראות לו, והוא
   היה נדחף מתחת לקפל. ⚠ קרה ב-8.9.2026 בבדיקת אישור הדומיין
   של Paddle: "looks offline or under construction".
   ⚠⚠ עדיין נקרא כטעינה לגולש אנושי — זו לא הסתרה של הספינר. */
.boot { min-height: 38vh; display: grid; place-items: center; gap: 14px; }

/* ⚠⚠⚠ כשיש JS, מסך הטעינה ממלא את המסך.
   זה מה שמחליף את הסתרת #staticFoot ב-t=0: התוכן
   הסטטי נשאר ב-DOM ונצבע, אבל יושב מתחת לקפל —
   כלומר סורק קורא אותו, וגולש אנושי לא רואה הבזק.
   ⚠ בלי JS הכלל לא חל, והעמוד נפתח ישר על התוכן. */
html.js #boot { min-height: 100vh; align-content: center; }

/* שורת הקישורים המשפטיים של מסך הטעינה — ראו index.html.
   ⚠ position:fixed כדי שתשב בתחתית המסך הנראה ולא
   בתחתית המסמך: צילום מסך של חלון התצוגה חייב
   לכלול אותה. */
.bootlegal {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 16px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  font-size: .82rem; color: var(--ink-soft);
}
.bootlegal a { color: inherit; text-decoration: underline;
               text-underline-offset: 2px; }
.bootlegal__en { display: flex; flex-wrap: wrap; gap: 6px 16px; opacity: .75; }
/* ⚠ מסך צר: האנגלית היא לבודקים, ואין לה מקום שם. */
@media (max-width: 520px) { .bootlegal__en { display: none; } }
.boot__text { color: var(--ink-soft); }
.boot__spinner, .spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--bk-primary);
  animation: spin .8s linear infinite; margin: 24px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ⚠ מכבד העדפת תנועה מופחתת. מסתובב אינסופי הוא בדיוק מה
   שההעדפה הזו נועדה לכבות. */
@media (prefers-reduced-motion: reduce) {
  .boot__spinner, .spin { animation-duration: 3s; }
}
.fatal { max-width: 540px; margin: 18vh auto; padding: 0 24px;
         text-align: center; }
.fatal__body { color: var(--ink-soft); }

/* ------------------------------------------------------------
   כפתורים
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid transparent; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
  /* ⚠⚠ 44px גובה מגע מינימלי. כפתור "הזמן" שקשה לפגוע בו
     בנייד הוא בדיוק אחוז ההמרה שהמוצר מוכר. */
  min-height: 44px;
}
.btn:disabled { opacity: .5; cursor: default; }

/* ⚠ תנועה על כפתור היא משוב, לא קישוט: היא מה שאומר "נלחץ"
   במסך מגע שאין בו ריחוף. ⚠⚠ מכובה תחת prefers-reduced-motion
   בכלל הגורף בתחתית הקובץ. */
.btn { transition: background .18s var(--ease), box-shadow .18s var(--ease),
                   transform .12s var(--ease), border-color .18s var(--ease); }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn--primary { background: var(--bk-primary); color: var(--bk-on-primary);
                box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--bk-primary-dark);
                      box-shadow: var(--shadow); }
.btn--ghost { background: var(--bg); color: var(--bk-primary-dark);
              border-color: var(--line); }
.btn--ghost:hover { border-color: var(--bk-primary); background: var(--bg-soft); }

/* ⚠⚠ כפתור ההדגשה — צבע ה-accent של הדייר. קיים בשביל ה-CTA
   הראשי על תמונת הפתיחה, שם כפתור בצבע הראשי נבלע בתצלום.
   ⚠ ‏--bk-on-accent מחושב לפי ניגודיות ב-theme.js, ולכן זהב
   מקבל טקסט כהה ולא לבן. */
.btn--accent { background: var(--bk-accent); color: var(--bk-on-accent);
               box-shadow: var(--shadow); }
.btn--accent:hover { box-shadow: var(--shadow-lg); }
.btn--wa { background: #25d366; color: #06281a; }
.btn--copy { background: var(--bk-accent); color: var(--bk-on-accent); }
.btn--sm { padding: 8px 14px; min-height: 38px; font-size: .9rem; }
.btn--wide { width: 100%; }

/* ------------------------------------------------------------
   כותרת ראשית
   ------------------------------------------------------------ */
.hero { position: relative; display: grid; }
.hero__img { width: 100%; height: min(78vh, 680px); object-fit: cover; }

/* ============================================================
   ⚠⚠⚠ שתי שכבות מעל התמונה, ולא אחת
   ------------------------------------------------------------
   קודם הייתה שכבה אחת: הדרגתי שחור מלמטה על ‏.hero__text בלבד.
   ⚠ התוצאה — הטקסט נקרא, אבל התמונה נשארה "תצלום עם כיתוב"
   ולא כותרת. שתי שכבות עושות שני דברים שונים:

     ‏::before  ניגודיות — הדרגתי כהה מלמטה, שקוף למעלה.
               ⚠⚠ הוא זה שמאפשר טקסט לבן על תצלום בהיר.
     ‏::after   עומק — ‏vignette עדין בפינות.

   ⚠⚠⚠ שתיהן ‏pointer-events:none. בלי זה השכבה מכסה את ה-CTA
   שמתחתיה, והכפתור הראשי של האתר מפסיק להיות לחיץ — כשל
   שקט לחלוטין: הכפתור נראה, מגיב לריחוף, ולא נלחץ.
   ============================================================ */
.hero::before, .hero::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
}
.hero::before {
  background: linear-gradient(to top,
    rgba(20,22,20,.74) 0%, rgba(20,22,20,.42) 26%,
    rgba(20,22,20,.10) 52%, rgba(20,22,20,0) 74%);
}
.hero::after {
  background: radial-gradient(120% 90% at 50% 38%,
    rgba(0,0,0,0) 42%, rgba(0,0,0,.22) 100%);
}

.hero__text {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  z-index: 1;
  /* ⚠⚠ התחתון מפנה מקום לרצועה הצפה ועוד נשימה. ראו
     ‏--hero-lift: השניים חייבים להסכים. */
  padding: var(--sp-6) 24px calc(var(--hero-lift) + var(--sp-4));
  color: #fff;
  max-width: var(--wrap); margin: 0 auto;
}
/* ⚠ צל טקסט עדין **בנוסף** להדרגתי. ההדרגתי מטפל ברקע כהה,
   וזה מטפל בשמיים בהירים שנופלים בדיוק מאחורי הכותרת. */
.hero__title { margin: 0; color: #fff;
               text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.hero__tag { margin: .35em 0 var(--sp-4); opacity: .94;
             font-size: clamp(1rem, 2.1vw, 1.22rem); max-width: 46ch;
             text-shadow: 0 1px 12px rgba(0,0,0,.4); }

/* ⚠⚠ ‏hero בלי תמונה. **לא** ההדרגתיים שלמעלה — הם נועדו
   להכהות תצלום, ועל רקע צבע מלא הם רק מלכלכים אותו. */
.hero--plain { background:
  linear-gradient(155deg, var(--bk-primary), var(--bk-primary-dark));
  min-height: 52vh; place-items: center; }
.hero--plain::before, .hero--plain::after { display: none; }
/* ⚠ גם ה-hero חסר-התמונה נושא את הרצועה מתחתיו, ולכן אותה
   הפרשה בדיוק. ‏padding-block: var(--sp-6) לבדו היה מחזיר את
   החיתוך של הכפתור בכל דייר שלא הגדיר תמונת פתיחה. */
.hero--plain .hero__text { position: static; text-align: center;
                           padding-block: var(--sp-6)
                                          calc(var(--hero-lift) + var(--sp-4)); }
.hero--plain .hero__title, .hero--plain .hero__tag { text-shadow: none; }

/* ============================================================
   ⚠⚠ הכותרת הצפה — זכוכית
   ------------------------------------------------------------
   מופיעה בגלילה בלבד (‏.is-on נקבע ב-site.js מתוך
   IntersectionObserver על ה-hero, ולא מ-scroll listener:
   ‏listener על גלילה רץ בכל פריים גם כשאין מה לעשות).

   ⚠⚠⚠ ‏backdrop-filter אינו נתמך בכל מקום, ולכן הרקע כאן הוא
   **צבע אטום למחצה שעומד בפני עצמו**. דפדפן בלי טשטוש מקבל
   רצועת שמנת שקופה-למחצה וקריאה; דפדפן עם טשטוש מקבל זכוכית.
   ⚠ הסדר הפוך — רקע ‏rgba(255,255,255,.06) שנשען על הטשטוש —
   היה נותן כותרת בלתי-קריאה על תצלום בהיר בכל ספארי ישן.
   ============================================================ */
.siteheader {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 70;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px max(24px, env(safe-area-inset-left)) 10px
              max(24px, env(safe-area-inset-right));
  background: rgba(250,247,242,.86);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  opacity: 0; visibility: hidden;
  transition: transform .34s var(--ease), opacity .24s var(--ease),
              visibility .34s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .siteheader { background: rgba(250,247,242,.72);
                -webkit-backdrop-filter: saturate(1.6) blur(14px);
                backdrop-filter: saturate(1.6) blur(14px); }
}
.siteheader.is-on { transform: none; opacity: 1; visibility: visible;
                    border-bottom-color: var(--line);
                    box-shadow: var(--shadow-sm); }
.siteheader__logo { max-height: 40px; max-width: 150px; width: auto;
                    object-fit: contain; }
.siteheader__name { font-family: var(--bk-font-display); font-weight: 600;
                    font-size: 1.05rem; letter-spacing: -.01em;
                    white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; }
/* ⚠ ה-CTA נדחף לקצה הנגדי. ‏margin-inline-start ולא margin-left:
   האתר RTL, ו-left היה מצמיד אותו לכותרת. */
.siteheader__cta { margin-inline-start: auto; flex: 0 0 auto; }
@media (max-width: 560px) {
  .siteheader { padding-inline: 16px; gap: var(--sp-2); }
  .siteheader__logo { max-height: 32px; max-width: 104px; }
  .siteheader__name { display: none; }
}

/* ============================================================
   ⚠⚠⚠ רצועת הזמינות הצפה
   ------------------------------------------------------------
   יושבת על הקצה התחתון של ה-hero וחופפת אותו. ⚠ היא **אינה**
   ווידג'ט ההזמנה — היא קיצור־דרך שמזניק אליו (הווידג'ט האמיתי
   הוא ‏BK.book.mountWidget, ומימוש שני שלו היה מימוש שני של
   בחירת תאריכים; ראו את ההערה ב-site.js).

   ⚠⚠ ‏margin-block-end שלילי, לא ‏position:absolute. אבסולוטי
   היה מוציא אותה מזרימת המסמך, והבלוק הבא היה נכנס מתחתיה
   ומוסתר. שלילי מרים אותה **ומקצר את המסמך בדיוק באותו שיעור**.
   ============================================================ */
.bookbar {
  position: relative; z-index: 2;
  /* ⚠⚠⚠ ‏width ולא max-width, ובכוונה גמורה.
     ‏max-width + ‏margin-inline:auto נראה כמו אותו דבר, ואינו:
     בגריד, **מרווח auto מבטל את ה-stretch** — הוא בולע את
     המקום הפנוי במקום למתוח את הפריט. התוצאה בערכה המפוצלת
     הייתה רצועה ברוחב 413px (max-content) במקום 940, ממורכזת
     ולכן נראית "מכוונת". ⚠ נמדד בדפדפן 9.9.2026.
     ⚠⚠ עם רוחב מוגדר, ה-auto ממרכז — בגריד ובפלקס כאחד. */
  width: min(940px, calc(100% - 40px));
  margin: calc(-1 * var(--hero-lift)) auto var(--sp-5);
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
}
.bookbar__lead { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.bookbar__title { font-family: var(--bk-font-display); font-weight: 600;
                  font-size: 1.12rem; }
.bookbar__note { color: var(--ink-soft); font-size: .88rem; }
.bookbar__cta { flex: 0 0 auto; }
@media (max-width: 620px) {
  /* ⚠ בנייד היא לא צפה — היא כרטיס רגיל מתחת לתמונה. חפיפה
     שלילית על מסך צר מכסה את הכיתוב של ה-hero.
     ⚠⚠ אפס כאן מכבה **גם** את ההפרשה התחתונה ב-.hero__text,
     כי שניהם נגזרים מ--hero-lift. בלי זה היו נשארים 46px של
     ריק מתחת לכפתור בדיוק במסך שבו שטח הוא המשאב היקר. */
  :root { --hero-lift: 0px; }
  .bookbar { margin-top: var(--sp-3); max-width: calc(100% - 32px); }
  .bookbar__cta { width: 100%; }
}

/* ------------------------------------------------------------
   רשתות וכרטיסים
   ------------------------------------------------------------ */
.grid { display: grid; gap: var(--sp-4); }
.grid--units { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                 gap: var(--sp-2); }
.tile img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
            width: 100%; }
.tile { margin: 0; overflow: hidden; border-radius: var(--radius); }
.tile img { transition: transform .5s var(--ease); }
.tile:hover img { transform: scale(1.05); }

/* ============================================================
   ⚠⚠⚠ הכרטיס — צל במקום מסגרת, ותמונה שהיא רוב הכרטיס
   ------------------------------------------------------------
   שלושה דברים השתנו, וכל אחד מהם היה פריט בהערכה:

   ‏1. **מסגרת → צל.** מסגרת 1px מפרידה בין כרטיס לרקע אבל
      אינה מרימה אותו מעליו. ⚠ זו הסיבה ש-.card, .pick ו-.gcard
      נראו כאותו אלמנט: כולם היו מלבן עם קו.

   ‏2. **התמונה מקבלת ‏aspect-ratio 3/2 במקום 4/3.** ⚠ יחד עם
      גוף קומפקטי זה מביא את התמונה לכ-60% מגובה הכרטיס — היא
      מה שמוכר לינה, והטקסט הוא האישור.

   ‏3. **ריחוף: התמונה מתקרבת והכרטיס עולה.** ⚠⚠ הזום הוא על
      ה-img בתוך ‏.card__media שהוא ‏overflow:hidden — זום על
      הכרטיס עצמו היה מגדיל גם את הטקסט ומטשטש אותו.
   ============================================================ */
.card {
  border: 0; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}
/* ⚠ ‏:focus-within ולא רק :hover — הכרטיס מכיל קישור, ומשתמש
   מקלדת חייב לראות את אותה הרמה. */
.card:hover, .card:focus-within { box-shadow: var(--shadow-lg);
                                  transform: translateY(-3px); }

.card__media { position: relative; overflow: hidden;
               background: var(--bg-soft); }
.card__img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%;
             transition: transform .55s var(--ease); }
.card:hover .card__img, .card:focus-within .card__img {
  transform: scale(1.06); }

.card__body { padding: var(--sp-4); display: grid; gap: var(--sp-1);
              align-content: start; flex: 1; }
.card__title { margin: 0; font-size: 1.22rem; }
.card__meta { color: var(--ink-soft); font-size: .9rem; margin: 0; }
/* ⚠ המחיר הוא העוגן. ‏tabular-nums כדי ששורת מחירים בכמה
   כרטיסים לא תרקוד לרוחב. */
.card__price { margin: var(--sp-1) 0 var(--sp-2);
               font-variant-numeric: tabular-nums; }
.card__price strong { font-family: var(--bk-font-display);
                      font-size: 1.4rem; font-weight: 600;
                      letter-spacing: -.02em; }
.card__price--none { color: var(--ink-soft); }
/* ⚠ הכפתור נדבק לתחתית הכרטיס: כרטיסים עם שם באורך שונה
   נראים כשורה אחת רק אם ה-CTA מיושר. */
.card__body > .btn { margin-top: auto; justify-self: start; }
.card--secrets { padding: 6px 14px; }

/* ============================================================
   ⚠⚠ רשת המתקנים — אייקונים דקים
   ------------------------------------------------------------
   ⚠ האייקונים הם ‏stroke-only ב-currentColor (ראו amenityIcon
   ב-site.js), ולכן הם יורשים את צבע הדייר בלי שורת CSS לכל
   סמל. ⚠⚠ ‏vector-effect אינו בשימוש בכוונה: העובי נשלט
   ב-stroke-width, וסקייל אחיד שומר עליו דק בכל גודל.
   ============================================================ */
.amen { list-style: none; padding: 0; margin: var(--sp-3) 0 0;
        display: grid; gap: var(--sp-3);
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.amen li { display: flex; align-items: center; gap: 10px;
           font-size: .95rem; color: var(--ink); }
.amen svg { width: 26px; height: 26px; flex: 0 0 auto;
            color: var(--bk-primary); stroke-width: 1.25; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.chips li { background: var(--bk-primary-soft); border-radius: 999px;
            padding: 5px 12px; font-size: .88rem; }

/* ------------------------------------------------------------
   טופס ההזמנה
   ------------------------------------------------------------ */
.bookbox { margin: var(--sp-4) 0; }
.bookform, .form {
  display: grid; gap: var(--sp-3);
  /* ⚠ 150px → 200px. הכלל עצמו לא השתנה (‏auto-fit על minmax),
     רק המינימום: ב-150 נפתחו עד שש עמודות בטופס רחב, ושדה
     תאריך בעמודה של 155px נקרא כשדה שבור. ⚠⚠ הכלל
     ‏grid-column:1/-1 שמתחת נשאר הכרחי בדיוק כמו קודם. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 0; border-radius: var(--radius-lg);
  padding: var(--sp-4); background: var(--bg);
  box-shadow: var(--shadow);
}
.field { display: grid; gap: var(--sp-1); font-size: .84rem;
         color: var(--ink-soft); }
/* ⚠ התווית נקראת כתווית ולא כטקסט: משקל, לא גודל. הקטנה
   נוספת הייתה הופכת אותה לבלתי-קריאה בנייד. */
.field > span { font-weight: 600; letter-spacing: .01em; }
.field--full { grid-column: 1 / -1; }

/* ============================================================
   ⚠⚠⚠ מה שאינו שדה — פורש על כל הרוחב
   ------------------------------------------------------------
   ‏.form הוא ``repeat(auto-fit, minmax(150px, 1fr))``, כלומר
   בטופס רחב נפתחות **שש עמודות**. זה נכון לשדות (שניים-שלושה
   זה לצד זה), ו**שגוי לכל השאר**: כותרת, פסקה, fieldset או
   כפתור רחב שנופלים לעמודה של 155px נמעכים לרצועה גבוהה
   וצרה, והטקסט נשבר אנכית.

   ⚠ כך בדיוק נראה בורר המסלולים ב-/host: כרטיס ברוחב 100px
   וגובה 395px, וכפתור «המשך לתשלום» כגלולה אנכית. נמצא
   9.9.2026 בבדיקה בדפדפן.

   ⚠⚠ ‏.btn רגיל **אינו** נכלל בכוונה — כפתור שליחה בעמודה
   אחת נראה תקין, וזה המצב הקיים בעשרה טפסים. רק ‏.btn--wide,
   שמצהיר על עצמו כרחב, פורש.
   ============================================================ */
.form > h2, .form > h3, .form > h4,
.form > p, .form > fieldset, .form > hr,
.form > .notice, .form > .picks,
.form > .btn--wide,
.bookform > h2, .bookform > h3, .bookform > p {
  grid-column: 1 / -1;
}
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-soft); width: 100%;
  transition: border-color .16s var(--ease), background .16s var(--ease),
              box-shadow .16s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: var(--ink-soft); }
/* ⚠⚠ טבעת מיקוד רכה בצבע הדייר, **בנוסף** ל-outline ולא
   במקומו: ‏box-shadow אינו נראה במצב ניגודיות גבוהה בחלונות,
   וה-outline הוא מה שנשאר שם. */
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--bg); border-color: var(--bk-primary);
  box-shadow: 0 0 0 4px var(--bk-primary-soft);
}
.field input:focus-visible, .field select:focus-visible,
.field textarea:focus-visible, .btn:focus-visible, .tab:focus-visible {
  /* ⚠ מסגרת מיקוד גלויה. הסרתה היא אתר שאי אפשר למלא במקלדת,
     וזה גם דרישת נגישות וגם משתמשים אמיתיים. */
  outline: 3px solid var(--bk-accent); outline-offset: 2px;
}
.field input[type=color] { padding: 4px; height: 44px; }
.guestfields { grid-column: 1 / -1; display: grid; gap: 14px; }
.row { grid-column: 1 / -1; display: grid; gap: 12px;
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.quote { grid-column: 1 / -1; }
.quote__lines { list-style: none; padding: 0; margin: 0 0 8px;
                display: grid; gap: 2px; font-size: .92rem; }
.quote__lines li { display: flex; justify-content: space-between; }
.quote__lines .is-weekend { font-weight: 600; }
.quote__total { display: flex; justify-content: space-between;
                border-top: 1px solid var(--line); padding-top: 8px;
                margin: 0; font-size: 1.1rem; }
.quote__err { color: var(--danger); margin: 0; }

.done { text-align: center; padding: 8vh 20px; }
.done__id code { background: var(--bg-soft); padding: 3px 8px;
                 border-radius: 6px; }

/* ------------------------------------------------------------
   הקונסיירז'
   ------------------------------------------------------------ */
.room { padding-bottom: 40px; }
.room__head { padding: 22px 0 8px; }
.room__stay { color: var(--ink-soft); margin: 0 0 12px; }
.room__contact { display: flex; gap: 8px; flex-wrap: wrap; }
.secret { display: flex; align-items: center; justify-content: space-between;
          gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.secret:last-child { border-bottom: 0; }
.secret__label { display: block; font-size: .82rem; color: var(--ink-soft); }
.secret__value { font-size: 1.15rem; font-weight: 700; word-break: break-all; }
.secret__hint { display: block; font-size: .8rem; color: var(--ink-soft); }
.upsells, .guide, .links { list-style: none; padding: 0; display: grid;
                           gap: 12px; }
.upsell { display: flex; justify-content: space-between; align-items: center;
          gap: 12px; border: 1px solid var(--line);
          border-radius: var(--radius); padding: 12px 14px; }
.upsell h4, .guide__item h4 { margin: 0 0 2px; }
.upsell p, .guide__item p { margin: 0; color: var(--ink-soft);
                            font-size: .9rem; }
.guide__item { border-inline-start: 3px solid var(--bk-accent);
               padding-inline-start: 12px; }

/* ------------------------------------------------------------
   פרסומות
   ------------------------------------------------------------
   ⚠⚠⚠ מוגבל לשלושת המקומות המותרים. הסגנון כאן **אינו** ההגנה
   — ההגנה היא ב-ads.js — אבל הוא חלק מהחוזה: פרסומת חייבת
   להיראות כמו פרסומת, עם תווית, ולא כמו המלצה של הצימר.
   ------------------------------------------------------------ */
.ad { border: 1px dashed var(--line); border-radius: var(--radius);
      padding: 10px; margin: 22px 0; background: var(--bg-soft); }
.ad__tag { font-size: .72rem; letter-spacing: .04em; color: var(--ink-soft);
           text-transform: uppercase; }
.ad__slot { min-height: 90px; display: grid; place-items: center; }

/* ------------------------------------------------------------
   תחתית
   ------------------------------------------------------------ */
.foot { border-top: 1px solid var(--line); padding: var(--sp-6) 0 var(--sp-4);
        margin-top: var(--sp-6); background: var(--bg-soft);
        color: var(--ink-soft); font-size: .9rem;
        position: relative; overflow: hidden; }
.foot__by a { color: inherit; }
.contact__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ============================================================
   ⚠⚠⚠ סימן המים של הלוגו בתחתית
   ------------------------------------------------------------
   הלוגו של **הדייר**, גדול, מונוכרומטי ודהוי — עוגן לסוף הדף.

   ⚠ ‏grayscale + opacity ולא גרסה שנייה של הקובץ: לדייר יש
   קובץ אחד, והוא לא יעלה שני. הפילטר עושה את ההמרה בדפדפן.

   ⚠⚠ ‏aria-hidden ו-alt ריק ב-site.js — זו אותה תמונה שכבר
   הוקראה ב-brandband, וקורא מסך שמכריז את שם הצימר פעמיים
   בסוף הדף אינו מוסיף מידע.

   ⚠⚠⚠ ‏pointer-events:none. הוא ‏position:absolute ורחב, ובלי
   זה הוא מכסה את קישורי התחתית ואת כפתור הוואטסאפ — כלומר
   בדיוק את מה שהאורח בא ללחוץ. כשל שקט: הקישורים נראים.
   ============================================================ */
.foot__mark {
  position: absolute; pointer-events: none; user-select: none;
  inset-block-end: -14%; inset-inline-end: -4%;
  width: min(340px, 46%); height: auto;
  filter: grayscale(1); opacity: .07;
  z-index: 0;
}
/* ⚠ התוכן מעל סימן המים. בלי ‏position ה-z-index אינו חל. */
.foot > .wrap { position: relative; z-index: 1; }
@media (max-width: 700px) { .foot__mark { width: 58%;
                                          inset-block-end: -8%; } }

/* ------------------------------------------------------------
   דשבורד
   ------------------------------------------------------------ */
/* ⚠⚠⚠ ‏width:100% ולא רק max-width.
   ‏#app הוא ‏flex-direction:column, ו-.dash הוא פריט בו. בלי
   רוחב מפורש הפריט נמדד לפי **תוכן מקסימלי**, ו-.tabs היא
   שורת כפתורים עם white-space:nowrap — כלומר שמונה לשוניות
   מותחות את כל לוח הבקרה לרוחב ~673px.
   ⚠ התוצאה בנייד: הדשבורד נגלל אופקית, והתוכן יוצא מהמסך.
   ‏max-width לבדו אינו עוזר — הוא תקרה, לא רוחב.
   ⚠⚠ ‏.tabs עצמה כן גוללת (overflow-x:auto), וזו ההתנהגות
   הרצויה: שמונה לשוניות בטלפון נסרקות בהחלקה. */
.dash { width: 100%; max-width: var(--wrap); margin: 0 auto;
        padding: var(--sp-4) var(--sp-4) var(--sp-7); }

/* ============================================================
   ⚠⚠ קנבס אפור מאחורי לוח הבקרה
   ------------------------------------------------------------
   ‏SaaS נקרא כ-SaaS כשהתוכן לבן והרקע אינו. ⚠ ‏.dash עצמו
   מוגבל ב-max-width, ולכן רקע עליו היה רצועה ממורכזת ולא קנבס.

   ⚠⚠⚠ ולכן פסאודו קבוע מאחורי הכול, ולא ‏class על ה-body:
   ‏theme.js כותב ‏body.className **מחדש** בכל החלה (ראו את
   ההערה שם על אידמפוטנטיות), כלומר כל שמירה בדשבורד הייתה
   מוחקת מחלקה כזו — והרקע היה נעלם אחרי השמירה הראשונה.
   ============================================================ */
.dash::before { content: ''; position: fixed; inset: 0;
                background: var(--canvas); z-index: -1; }

.dash__head { display: flex; justify-content: space-between;
              align-items: center; gap: var(--sp-3); flex-wrap: wrap;
              padding-block: var(--sp-2) var(--sp-3); }
.dash__head h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }

/* ⚠⚠ הלוגו של בעל הצימר בראש לוח הבקרה. המערכת נמכרת כמערכת
   **שלו**, והמסך שהוא פותח כל בוקר הוא המקום שבו זה נמדד.
   ⚠ מרונדר רק כשיש לוגו — ראו dashBrand() ב-dash.js. */
.dash__brand { display: flex; align-items: center; gap: var(--sp-3);
               min-width: 0; }
.dash__logo { max-height: 46px; max-width: 168px; width: auto;
              object-fit: contain; flex: 0 0 auto; }

/* ============================================================
   ⚠⚠ הלשוניות — קו תחתון, לא גלולות
   ------------------------------------------------------------
   גלולה ממולאת בצבע המותג היא כפתור פעולה. תשע גלולות בשורה
   נקראות כתשע פעולות אפשריות, ולא כ"איפה אני נמצא".
   ⚠ הקו התחתון + משקל מודגש הם ניווט: הם מסמנים מיקום.

   ⚠⚠⚠ הסימון אינו צבע-בלבד — יש גם ‏font-weight וגם הקו עצמו.
   זו אותה דרישה שכבר נאכפת ב-.pick וב-.layoutpick.
   ⚠ ‏overflow-x:auto נשאר: תשע לשוניות בטלפון נסרקות בהחלקה.
   ============================================================ */
.tabs { display: flex; gap: var(--sp-4); overflow-x: auto;
        padding: 0; margin-bottom: var(--sp-4);
        border-bottom: 1px solid var(--line);
        scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { font: inherit; font-size: .95rem; padding: 12px 2px;
       border: 0; border-bottom: 2px solid transparent;
       background: none; color: var(--ink-soft);
       cursor: pointer; white-space: nowrap; min-height: 44px;
       transition: color .16s var(--ease), border-color .16s var(--ease); }
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--bk-primary-dark); font-weight: 700;
             border-bottom-color: var(--bk-primary); }
/* ⚠ ‏outline-offset שלילי: הלשונית צמודה לקו התחתון, ומסגרת
   מיקוד שיוצאת החוצה נחתכת ע"י ה-overflow של ‏.tabs. */
.tab:focus-visible { outline-offset: -3px; }

.dash__body { padding: 0 0 var(--sp-4); display: grid; gap: var(--sp-4); }

/* ⚠⚠ כל טופס בלוח הבקרה הוא כרטיס לבן על הקנבס. ‏.form כבר
   נושא צל ורקע לבן מהכלל הכללי — כאן רק המרווח הפנימי גדל,
   כי בדשבורד יש הרבה יותר שדות בכרטיס אחד. */
.dash .form { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.dash .tbl { background: var(--bg); border-radius: var(--radius-lg);
             box-shadow: var(--shadow); overflow: hidden; }
.dash .tbl th, .dash .tbl td { padding: 13px 14px; }
.dash .tbl th { background: var(--bg-soft); }

.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { text-align: start; padding: 9px 8px;
                   border-bottom: 1px solid var(--line); }
.tbl th { color: var(--ink-soft); font-weight: 600; }
/* ⚠ טבלה גולשת אופקית בנייד במקום לדחוס עמודות לבלתי קריא. */
.dash__body { overflow-x: auto; }

.pill { border-radius: 999px; padding: 2px 10px; font-size: .82rem;
        background: var(--bg-soft); }
.pill--confirmed { background: #e6f4ea; }
.pill--request { background: #fff4d6; }
.pill--cancelled, .pill--expired, .pill--suspended { background: #fde8e6; }

/* ⚠ סטטוסי תור הדומיינים. הצבע הוא **הדבר שנסרק** — סופר-אדמין
   שעובר על התור מחפש את הפתוחות, ולא קורא מילה-מילה. */
.pill--new { background: #ffe8cc; }
.pill--checking, .pill--quoted { background: #fff4d6; }
.pill--paid { background: #e3ecfd; }
.pill--live { background: #e6f4ea; }
.pill--declined { background: #fde8e6; }

/* פקדים בתוך תא טבלה: קטנים, בשורה אחת, ולא נמתחים לרוחב. */
.sel--sm, .inp--sm { font: inherit; font-size: .86rem; padding: 5px 7px;
                     border: 1px solid var(--line); border-radius: 8px;
                     background: var(--bg); max-width: 190px;
                     vertical-align: middle; }
.inp--sm { width: 160px; }
/* ⚠ ‏min-height 36 ולא פחות: אלה פקדים שנלחצים גם מהטלפון. */
.sel--sm { min-height: 36px; }

/* ============================================================
   נפילה רכה של תמונה
   ------------------------------------------------------------
   ⚠ יורש את מחלקת התגית שהוחלפה (hero__img / tile img /
   card__img), ולכן המידות כבר נכונות — כאן רק הרקע והאמוג׳י.
   ============================================================ */
.imgfall { display: flex; align-items: center; justify-content: center;
           background: linear-gradient(135deg, #d7e6df 0%, #eef1e6 55%,
                       #e8ded0 100%);
           color: #4a5a52; font-size: clamp(2rem, 9vw, 5rem);
           line-height: 1; user-select: none; }
/* ⚠ ההירו נמדד בגובה ולא בתוכן — בלי זה הוא קורס לגובה האמוג׳י. */
.hero__img.imgfall { min-height: 46vh; }
.card__img.imgfall, .tile .imgfall { aspect-ratio: 4 / 3; width: 100%; }

/* בורר סיומת מהיר לדומיין */
.tldrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
          margin: -4px 0 10px; }
.tldrow__lbl { font-size: .85rem; color: var(--ink-soft); }
.tldchip { font: inherit; font-size: .85rem; direction: ltr;
           padding: 5px 11px; min-height: 34px; cursor: pointer;
           border: 1px solid var(--line); border-radius: 999px;
           background: var(--bg); }
.tldchip:hover { border-color: var(--bk-primary); }

/* ⚠⚠ הודעת תוכן ההדגמה. בולטת בכוונה: כל עוד היא על המסך
   הצימר **אינו** מופיע בספרייה הציבורית, וזה הדבר שהבעלים
   צריך לדעת. */
.starter { border: 2px solid var(--bk-accent); border-radius: var(--radius);
           padding: 14px 16px; background: #fffdf5; }
.starter h3 { margin: 0 0 6px; font-size: 1.02rem; }
.starter p { margin: 0 0 8px; }

/* ============================================================
   ⚠⚠⚠ פס מצב ההשתלטות
   ------------------------------------------------------------
   ‏sticky ולא fixed: ‏fixed היה מכסה את התוכן העליון בנייד,
   ו-sticky נשאר גלוי בגלילה בלי לגזול מקום קבוע.
   ⚠ אין לו כפתור סגירה, בכוונה — ראו dash.js.
   ============================================================ */
.ghostbar { position: sticky; top: 0; z-index: 60;
            display: flex; flex-wrap: wrap; gap: 8px;
            align-items: center; justify-content: center;
            padding: 9px 14px; font-size: .92rem;
            background: #ffd84d; color: #3d2f00;
            border-bottom: 2px solid #c9a227; }
.ghostbar__warn { font-weight: 600; }
.ghostbar__out { margin-inline-start: auto; color: #3d2f00;
                 text-decoration: underline; white-space: nowrap; }
/* ⚠ פס צהוב בראש הדף דוחף את התוכן; מרווח קטן מונע הצמדה. */
.dash--ghost { padding-top: 6px; }

/* מדריך הסנכרון */
.guide { border: 1px solid var(--line); border-inline-start: 4px solid
         var(--bk-primary); border-radius: var(--radius);
         padding: 14px 16px; background: var(--bg-soft); }
.guide h2 { margin: 0 0 8px; font-size: 1.05rem; }
.guide__steps { margin: 10px 0; padding-inline-start: 20px;
                display: grid; gap: 10px; }
.guide__steps li { line-height: 1.55; }

/* ============================================================
   בחירת מסלול — כרטיסי תמחור
   ------------------------------------------------------------
   ⚠ הרדיו עצמו מוסתר חזותית אבל **נשאר במסמך** ובר-מיקוד:
   ‏display:none היה מוציא אותו מסדר הטאבים ומקורא המסך.

   ⚠⚠ נבנה כ**כרטיס תמחור** ולא ככפתור: הכפתור בעמוד הזה הוא
   «המשך לתשלום», ואם גם הבחירה נראית ככפתור המשתמש אינו יודע
   מה לוחצים כדי להתקדם. היררכיה: מחיר → שם → מה מקבלים.
   ============================================================ */
.picks { border: 0; padding: 0; margin: 4px 0 2px; display: grid;
         gap: 12px; }
.picks > legend { padding: 0; margin: 0 0 10px; font-weight: 600;
                  font-size: .95rem; color: var(--ink); float: right;
                  width: 100%; }
@media (min-width: 700px) {
  .picks { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.pick { position: relative; display: block; cursor: pointer;
        border: 1px solid var(--line); border-radius: 14px;
        padding: 18px 20px; background: var(--bg);
        transition: border-color .15s, box-shadow .15s, background .15s; }
.pick:hover { border-color: var(--bk-primary); }

.pick input { position: absolute; opacity: 0; width: 1px; height: 1px;
              margin: 0; pointer-events: none; }
.pick:focus-within { outline: 2px solid var(--bk-accent);
                     outline-offset: 3px; }

/* ⚠ הנבחר מסומן בשלושה אמצעים — מסגרת, רקע וסימן וי — ולא
   בצבע בלבד: הבחנה שנשענת על צבע אינה נגישה לעיוורי צבעים. */
.pick.is-on { border-color: var(--bk-primary); border-width: 2px;
              padding: 17px 19px; background: var(--bg-soft);
              box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.pick.is-on::after {
  content: '✓'; position: absolute; top: 14px; inset-inline-end: 16px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bk-primary); color: var(--bk-on-primary);
  font-size: .78rem; line-height: 22px; text-align: center;
  font-weight: 700;
}

.pick__body { display: block; }

/* המחיר הוא העוגן הוויזואלי. */
.pick__price { display: block; font-size: 2rem; font-weight: 700;
               line-height: 1.05; letter-spacing: -.02em;
               margin-bottom: 2px; }
.pick__price em { font-size: .8rem; font-weight: 400; font-style: normal;
                  color: var(--ink-soft); letter-spacing: 0; }

.pick__title { display: block; font-weight: 600; font-size: 1.02rem;
               margin: 6px 0 4px; }
.pick__desc { display: block; font-size: .88rem; color: var(--ink-soft);
              line-height: 1.55; }

/* ⚠ תגית «מומלץ» על המסלול המלא — הוא גם היקר וגם זה שמשאיר
   לצימר את שטח הפרסום, כלומר מה שבאמת כדאי לו. */
.pick__flag { position: absolute; top: -9px; inset-inline-start: 16px;
              background: var(--bk-accent); color: #1c1c1c;
              font-size: .72rem; font-weight: 700; letter-spacing: .02em;
              padding: 2px 9px; border-radius: 999px; }

.btn--wide { width: 100%; margin-top: 14px; min-height: 50px;
             font-size: 1.05rem; font-weight: 600; }

/* ⚠ קישורי התאימות של Paddle — חייבים להיראות כקישורים. */
.complylinks { margin-top: 10px; text-align: center; }
.complylinks a { text-decoration: underline; }

/* ============================================================
   ⚠⚠ התוכן הסטטי של המעטפת
   ------------------------------------------------------------
   ראו את ההערה ב-index.html. הוא מעוצב כדי להיראות כמו עמוד
   אמיתי ולא כמו טקסט חירום — בודק שרואה אותו צריך לראות אתר,
   ולא שלד.
   ============================================================ */
/* ⚠⚠⚠ הבלוק הסטטי נעלם רק כשיש JavaScript. המחלקת
   נקבעת ב-head לפני הצביעה הראשונה, ולכן אין הבזק.
   ⚠⚠ סורק שאינו מריץ JS לעולם לא מקבל את המחלקה,
   ורואה את כל התוכן — וזו כל מטרת הבלוק.
   ⚠ fatal() ורשת הביטחון מחזירים אותו עם display מובנה,
   שגובר על הכלל הזה. */
/* ⚠⚠⚠ התנאי הוא "האפליקציה נצבעה", ולא "יש JavaScript".
   זה התיקון עצמו. קודם לכן הכלל היה html.js, כלומר
   התוכן נעלם ב-t=0 לכל מי שמריץ JS — גם למי שלעולם
   לא יגיע לראות את האפליקציה. בין 0 ל-1712ms העמוד
   היה ריק לחלוטין, וזה בדיוק החלון שבו בוטים מצלמים.
   ⚠⚠ app-ready נקבע ב-ui.js::mount בלבד, ומוסר ב-ui.js::fatal. */
html.app-ready #staticFoot,
html.app-ready #bootLegal { display: none; }

.staticfoot { max-width: 760px; margin: 0 auto; padding: 32px 20px 48px;
              line-height: 1.65; color: var(--ink); }
.staticfoot h1 { font-size: 1.35rem; margin: 0 0 12px; }
.staticfoot h2 { font-size: 1.08rem; margin: 22px 0 8px; }
.staticfoot p { margin: 0 0 12px; }
.staticfoot__links { display: flex; flex-wrap: wrap; gap: 8px 18px;
                     margin: 18px 0 14px; }
.staticfoot__links a { text-decoration: underline; }
.staticfoot__by { font-size: .88rem; color: var(--ink-soft);
                  border-top: 1px solid var(--line); padding-top: 14px; }
.staticfoot__noscript { max-width: 760px; margin: 0 auto 32px;
                        padding: 12px 20px; border-inline-start: 4px solid
                        var(--bk-accent); color: var(--ink-soft); }

/* ⚠ שם המוצר במסך הטעינה. בלעדיו צילום מסך של הרגע הראשון
   נראה כמו דף ריק עם ספינר — וזה בדיוק מה שבודק אוטומטי
   מפרש כ"אתר בבנייה". */
.boot__brand { font-weight: 700; font-size: 1.05rem; margin: 10px 0 2px; }

/* ============================================================
   ⚠⚠⚠ הערכה המפוצלת (זיגזג)
   ------------------------------------------------------------
   ‏CSS בלבד, על אותם בלוקים ובאותו סדר DOM — ראו את הכלל בראש
   ‏site.js. אין כאן מסלול רינדור שני.

   ⚠⚠ האתר הוא RTL, ולכן **טור 1 הוא הימני**. זה מה שמיישר את
   הפריסה לשרטוט של הלקוח: תמונה מימין מול לוח הזמינות משמאל,
   טקסט מימין מול גלריה משמאל, טיולים מימין מול אוכל משמאל.
   ⚠ מי שיהפוך את המספרים "כי ככה זה נראה נכון" יהפוך את כל
   השרטוט.

   ⚠ בלוק שאין לו תוכן נושא [hidden] או אינו מרונדר כלל, ולכן
   אינו תופס תא ומשאיר חור בגריד.
   ============================================================ */
@media (min-width: 900px) {
  .layout-split #app { display: grid; grid-template-columns: 1fr 1fr;
                       align-items: center; column-gap: 8px; }

  /* ============================================================
     ⚠⚠⚠ רצועת המותג — תיקון תקלה קיימת
     ------------------------------------------------------------
     ‏.brandband **לא הייתה** ברשימה הזו. היא ילד של ‏#app, ולכן
     בערכה המפוצלת היא קיבלה תא של חצי טור: הלוגו של «הקן» —
     לקוח משלם — הוצג ברוחב 628px מתוך 1265, צמוד לצד אחד,
     עם רקע השמנת שנגמר באמצע המסך. ⚠ נמדד בדפדפן 9.9.2026.

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

     ⚠ ‏order:0 מפורש — הוא ברירת המחדל, אבל ה-hero הוא 1 וכל
     השאר ממוספרים; מספר משתמע בתוך רשימה ממוספרת הוא בדיוק
     מה שמישהו ישבור בערכה הבאה.
     ============================================================ */
  .layout-split .brandband { grid-column: 1 / -1; order: 0; }

  /* חוצי-רוחב */
  .layout-split .hero,
  .layout-split .bookbar,
  .layout-split .block--units,
  .layout-split .block--contact,
  .layout-split .foot,
  .layout-split .ad { grid-column: 1 / -1; }

  /* ============================================================
     ⚠⚠⚠ רצועת הזמינות בתוך הגריד המפוצל
     ------------------------------------------------------------
     ‏.bookbar היא ילד חדש של ‏#app, ובערכה הזו ‏#app הוא **גריד**
     עם ‏order מפורש לכל בלוק. ⚠ ילד בלי ‏order מקבל 0 — כלומר
     הוא היה קופץ **לפני** תמונת הפתיחה (order:1) ומפרק את כל
     הזיגזג. כשל שקט: שום דבר לא נשבר, הסדר פשוט שגוי.

     ⚠⚠ ‏order:1 כמו ה-hero, ולא 1.5 (אין דבר כזה) ולא מספור
     מחדש של העשרה שמתחת. פריטים באותו ‏order נסדרים לפי סדר
     ה-DOM, ו-.bookbar מרונדרת אחרי ה-hero ב-site.js — כלומר
     היא נוחתת בדיוק במקום שבו היא צריכה להיות.
     ============================================================ */
  .layout-split .bookbar { order: 1; }

  .layout-split .hero            { order: 1; }
  .layout-split .block--media2   { grid-column: 1; order: 2; }
  .layout-split .block--book     { grid-column: 2; order: 3; }
  .layout-split .block--about    { grid-column: 1; order: 4; }
  .layout-split .block--gallery  { grid-column: 2; order: 5; }
  .layout-split .block--units    { order: 6; }
  .layout-split .block--guide-trip { grid-column: 1; order: 7; }
  .layout-split .block--guide-eat  { grid-column: 2; order: 8; }
  .layout-split .block--contact  { order: 9; }
  .layout-split .foot            { order: 10; }

  /* ⚠ ‏.wrap מגביל רוחב וממרכז — נכון לעמוד בטור אחד, וחונק
     בתוך חצי טור. בתוך הגריד הוא נפתח למלוא התא. */
  .layout-split #app > .block > .wrap { max-width: none; padding: 22px 24px; }

  /* בגלריה שבתוך חצי טור מספיקות שתי עמודות. */
  .layout-split .block--gallery .grid--gallery {
    grid-template-columns: 1fr 1fr; }
}

/* ⚠ מתחת ל-900 הכול חוזר לטור אחד — הגריד פשוט לא מוגדר.
   בנייד הזיגזג אינו קריא, וזה גם רוב התנועה של צימרים. */

/* ============================================================
   רצועת המותג
   ------------------------------------------------------------
   ⚠ רקע בהיר ונייטרלי ולא ``var(--bg)``: לוגו אקוורל נסרק על
   נייר שמנת, ורקע לבן-צח יוצר מלבן גלוי סביבו. ⚠⚠ ולא צבע
   המותג של הדייר — הלוגו כבר נושא את הצבעים שלו, ורקע צבעוני
   מאחוריו נלחם בהם.
   ============================================================ */
.brandband { background: #faf7f2; text-align: center;
             padding: 18px 20px 16px;
             border-bottom: 1px solid var(--line); }
.brandband__img { max-height: 132px; max-width: min(360px, 78vw);
                  width: auto; height: auto; display: inline-block;
                  object-fit: contain; }
@media (max-width: 700px) {
  .brandband { padding: 14px 16px 12px; }
  .brandband__img { max-height: 96px; }
}
/* ⚠ נפילה רכה: אם הכתובת שבורה, ImgFallback מחליף ב-div —
   בלי גובה מפורש הוא קורס לאפס והרצועה נראית כפס ריק. */
.brandband__img.imgfall { height: 96px; width: 96px;
                          font-size: 3rem; line-height: 96px; }

/* הלוגו על כרטיס ה-QR המודפס. */
.qrcard__logo { display: block; margin: 0 auto 10px;
                max-height: 56px; max-width: 190px;
                width: auto; object-fit: contain; }

.media2__img { width: 100%; height: min(46vh, 420px); object-fit: cover;
               border-radius: var(--radius); display: block; }
.media2__img.imgfall { height: min(46vh, 420px); }

/* כרטיסי המדריך בחלון הראווה */
.grid--guide { display: grid; gap: 10px;
               grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.gcard { border: 1px solid var(--line); border-radius: var(--radius);
         padding: 12px 14px; background: var(--bg); }
.gcard__title { margin: 0 0 4px; font-size: 1rem; }
.gcard__note { margin: 0 0 8px; font-size: .9rem; color: var(--ink-soft);
               line-height: 1.5; }
.gcard__waze { font-size: .88rem; text-decoration: underline; }

/* עורך המדריך בלוח הבקרה */
.guiderow { border: 1px solid var(--line); border-radius: var(--radius);
            padding: 12px 14px; margin-bottom: 12px; }
.guiderow__act { display: flex; gap: 8px; margin-top: 8px; }

/* ⚠ דוגמית לבורר הערכות — שני טורים, כמו הפריסה עצמה. */
/* מתג הפרימיום הידני בטבלת הסופר-אדמין. */
.switch { display: inline-flex; align-items: center; gap: 6px;
          cursor: pointer; font-size: .85rem; }
.switch input { width: 34px; height: 20px; cursor: pointer; margin: 0; }
/* ⚠ שורה מסומנת ולא רק טקסט — ראו ההערה ב-admin.js. */
.tbl tr:has(.switch input:checked) { background: #fff8e6; }

.prev--split { background:
  linear-gradient(90deg, var(--bk-primary) 0 48%, var(--bg-soft) 48% 100%); }

/* ============================================================
   נקודת סריקה — המסך שהאורח רואה
   ------------------------------------------------------------
   ⚠ נייד תחילה, ובגדול. האורח עומד מול מכונת קפה עם טלפון
   ביד ואור לא אידיאלי; זה לא מסך שמישהו קורא בישיבה.
   ============================================================ */
.scan { max-width: 560px; padding-top: 18px; }
.scan__img { width: 100%; height: min(38vh, 300px); object-fit: cover;
             border-radius: var(--radius); display: block; }
.scan__img.imgfall { height: min(38vh, 300px); }
.scan__title { margin: 16px 0 10px; font-size: 1.5rem; }
.scan__body { line-height: 1.7; font-size: 1.02rem; }
.scan__body p { margin: 0 0 12px; }
.scan__gate { margin: 20px 0 8px; padding: 14px 16px;
              border: 1px solid var(--line); border-radius: var(--radius);
              background: var(--bg-soft); }
.scan__gate p { margin: 0 0 6px; }
.scan__back { display: inline-block; margin-top: 18px; }

/* עורך נקודות הסריקה */
.tagrow { border: 1px solid var(--line); border-radius: var(--radius);
          padding: 12px 14px; margin-bottom: 12px; }
.tagrow__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ============================================================
   ⚠⚠ כרטיס ה-QR וההדפסה
   ------------------------------------------------------------
   בלי ספריית PDF: הדפדפן מדפיס SVG בעצמו. ‏@media print מסתיר
   את כל השאר ומשאיר את הכרטיס לבדו על הדף.
   ============================================================ */
.qrout { margin-top: 18px; }
.qrout__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qrcard { border: 1px solid var(--line); border-radius: var(--radius);
          padding: 20px; text-align: center; background: #fff;
          max-width: 340px; }
.qrcard__title { margin: 0 0 12px; font-size: 1.1rem; color: #111; }
.qrcard__svg svg { width: 100%; height: auto; max-width: 260px; }
.qrcard__cap { margin: 12px 0 0; font-size: .9rem; color: #444;
               word-break: break-all; }

@media print {
  /* ⚠⚠ מסתירים הכל ומראים רק את הכרטיס. ‏visibility ולא
     display: display:none על ההורים היה מוריד גם את הכרטיס. */
  body * { visibility: hidden !important; }
  #qrCard, #qrCard *,
  /* ⚠⚠ גיליון «הדפסת הכל» — אותו מנגנון בדיוק, ריבוי כרטיסים.
     ראו ‏printAllQr ב-dash.js. */
  #qrSheet, #qrSheet * { visibility: visible !important; }
  #qrCard { position: absolute; inset-inline-start: 0; top: 0;
            border: 0; box-shadow: none; max-width: none;
            width: 70mm; padding: 0; }
  #qrSheet { position: absolute; inset-inline-start: 0; top: 0;
             width: 100%; display: grid; gap: 8mm;
             grid-template-columns: 1fr 1fr; }
  /* ⚠⚠⚠ ‏break-inside:avoid — בלעדיו כרטיס נחתך בין שני דפים,
     וחצי QR הוא נייר שנזרק. ‏page-break-inside לתאימות אחורה. */
  #qrSheet .qrcard { break-inside: avoid; page-break-inside: avoid;
                     border: 1px dashed #bbb; box-shadow: none;
                     max-width: none; width: 100%; padding: 6mm; }
  .qrcard__svg svg { max-width: 60mm; }
  /* ⚠ הפס הצהוב של מצב ההשתלטות אינו אמור להגיע למדפסת. */
  .ghostbar { display: none !important; }
}

.pending { border: 2px solid var(--bk-accent); border-radius: var(--radius);
           padding: 14px; }
.pend { display: flex; justify-content: space-between; gap: 12px;
        flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pend:last-child { border-bottom: 0; }
.pend__act { display: flex; gap: 8px; }

.alert { border: 2px solid var(--danger); border-radius: var(--radius);
         padding: 14px; }
.alert h2 { color: var(--danger); }

.feed { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
        padding: 10px 0; border-bottom: 1px solid var(--line); }
.feed__meta { color: var(--ink-soft); font-size: .86rem; }
.feed__err { color: var(--danger); font-size: .86rem; }

.unitrow { margin-bottom: 16px; }
.row--upsell { border-top: 1px dashed var(--line); padding-top: 10px; }

.layouts { grid-column: 1 / -1; display: grid; gap: 12px;
           grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* ⚠ ‏position:relative — בלעדיו ה-input ה-absolute שבפנים בורח
   לאב הממוקם הקרוב (או לעמוד כולו), ומשאיר שטח לחיץ בלתי-נראה
   במקום אקראי במסך. */
.layoutpick { position: relative; display: grid; gap: 6px;
              cursor: pointer; font-size: .86rem;
              border: 2px solid var(--line); border-radius: var(--radius);
              padding: 10px; transition: border-color .15s; }
.layoutpick:hover { border-color: var(--bk-primary); }
.layoutpick.is-on { border-color: var(--bk-primary);
                    background: var(--bg-soft); }
/* ⚠⚠ סימן וי בנוסף למסגרת: הבחנה שנשענת על צבע בלבד אינה
   נגישה, וכאן היא גם דקה מדי כדי להיתפס במבט. */
.layoutpick.is-on::after {
  content: '✓'; position: absolute; top: 8px; inset-inline-end: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bk-primary); color: var(--bk-on-primary);
  font-size: .72rem; line-height: 20px; text-align: center;
  font-weight: 700;
}
/* ⚠ נשאר במסמך ובר-מיקוד — ‏display:none היה מוציא אותו
   מסדר הטאבים ומקורא המסך. */
.layoutpick input { position: absolute; opacity: 0;
                    width: 1px; height: 1px; margin: 0;
                    pointer-events: none; }
.layoutpick:focus-within { outline: 2px solid var(--bk-accent);
                           outline-offset: 3px; }
.layoutpick__prev { height: 64px; border-radius: 8px; display: block;
                    background: var(--bg-soft); }
/* ⚠ תצוגה מקדימה סכמטית ולא צילום מסך. צילום מסך הופך לשקר
   ברגע שמישהו משנה את ה-CSS, ואיש לא יזכור לעדכן אותו. */
.prev--experience { background: linear-gradient(180deg, var(--bk-primary) 60%,
                    var(--bg-soft) 60%); }
.prev--converter  { background: linear-gradient(180deg, var(--bg-soft) 45%,
                    var(--bk-primary) 45%); }
.prev--boutique   { background: linear-gradient(180deg, var(--bg) 30%,
                    var(--bk-primary) 30%, var(--bk-primary) 40%,
                    var(--bg) 40%); }
.prev--rustic     { background: repeating-linear-gradient(90deg,
                    var(--bk-accent) 0 22%, var(--bg-soft) 22% 25%); }

.switch { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.switch input { width: 22px; height: 22px; }
.signin, .landing { max-width: 620px; margin: 10vh auto; text-align: center; }
.landing__lead { font-size: 1.15rem; }
.landing__points { text-align: start; display: grid; gap: 8px;
                   padding-inline-start: 20px; }

/* ------------------------------------------------------------
   הודעה קצרה
   ------------------------------------------------------------ */
.toast {
  position: fixed; inset-block-end: 18px; inset-inline: 16px;
  margin: 0 auto; max-width: 460px; background: var(--ink); color: #fff;
  padding: 12px 16px; border-radius: 12px; text-align: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .18s, transform .18s; z-index: 90;
}
.toast--on { opacity: 1; transform: none; }

/* ============================================================
   ארבע הערכות
   ------------------------------------------------------------
   ⚠⚠ סדר ודגש בלבד. אותו DOM, אותם בלוקים — ראו את ההערה
   בראש screens/site.js.
   ============================================================ */

/* --- החוויה: תמונה גדולה, סיפור, הזמנה בהמשך --- */
.layout-experience .hero__img { height: min(76vh, 640px); }

/* --- הממיר: ווידג'ט ההזמנה עולה למעלה, גיבוב לחיצות --- */
.layout-converter .hero__img { height: min(44vh, 380px); }
.layout-converter .block--units { order: -1; }
.layout-converter .block--about { padding-top: 12px; }
.layout-converter .bookbox { order: -1; margin-top: 0; }
.layout-converter .unit { display: flex; flex-direction: column; }
/* ⚠ ה-CTA דביק בנייד. זו כל ההבדל של הערכה הזו: הכפתור תמיד
   על המסך. ⚠⚠ **לא** בשולחני — שם הוא רק גוזל שטח. */
@media (max-width: 700px) {
  .layout-converter .hero__cta {
    position: fixed; inset-block-end: 12px; inset-inline: 16px;
    z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.22);
  }
  /* ⚠ מרווח בתחתית כדי שהכפתור הדביק לא יכסה את התחתית. */
  .layout-converter .foot { padding-bottom: 76px; }
}

/* --- הבוטיק: שקט, מרווח, טיפוגרפיה --- */
.layout-boutique { --radius: 4px; }
.layout-boutique .block { padding: 72px 0; }
.layout-boutique .wrap { max-width: 900px; }
.layout-boutique h1, .layout-boutique h2 { font-weight: 300;
                                           letter-spacing: .01em; }
.layout-boutique .grid--gallery {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.layout-boutique .btn { border-radius: 2px; }

/* --- הכפרי: גלריה ראשונה, גוונים חמים, פחות כרומים --- */
.layout-rustic { --bg-soft: #f6f1e8; --line: #e0d6c6; --radius: 10px; }
.layout-rustic .block--gallery { order: -1; padding-top: 0; }
.layout-rustic .hero__img { height: min(58vh, 480px); }
.layout-rustic .card { border-width: 2px; }
.layout-rustic .tile img { aspect-ratio: 1 / 1; }

/* ⚠⚠ ‏order עובד רק בתוך מיכל flex/grid. ה-main הוא המיכל,
   ובלי ההצהרה הזו ‏order בערכות למעלה אינו עושה **כלום** —
   וזו תקלה שקטה לחלוטין: הכול "עובד", והערכות פשוט נראות זהות. */
#app { display: flex; flex-direction: column; }
#app > * { flex: 0 0 auto; }

@media print {
  /* ⚠ הצימר מדפיס את מסך הקונסיירז' ותולה בחדר. */
  .btn, .ad, .tabs, .toast { display: none !important; }
}

/* ============================================================
   פורטל ה-B2C
   ------------------------------------------------------------
   ⚠⚠ הפורטל אינו נושא ערכה של דייר — הוא הדף שלנו, ולכן הוא
   משתמש בברירות המחדל של ‎:root. אין כאן layout-* כי אין דייר.
   ============================================================ */
.phero { background: var(--bk-primary); color: var(--bk-on-primary);
         padding: 54px 0 44px; text-align: center; }
.phero h1 { margin: 0 0 .3em; }
.phero__lead { margin: 0; opacity: .95; font-size: 1.05rem; }

.strip h2 { margin-bottom: .2em; }
.zcard { position: relative; }
/* ⚠ הקישור עוטף את כל הכרטיס. אזור לחיצה קטן בנייד הוא
   אחוזי המרה, וזה בדיוק מה שהפורטל מוכר לדיירים. */
.zcard__link { display: flex; flex-direction: column; height: 100%;
               text-decoration: none; color: inherit; }
.zcard__where { color: var(--ink-soft); }
.card__img--none { display: block; aspect-ratio: 4 / 3;
                   background: linear-gradient(140deg, var(--bk-primary-soft),
                                               var(--bg-soft)); }

/* ⚠⚠⚠ תגים, ולא מונים ולא כוכבים. ראו directory_api.py:
   כל מספר גלוי הופך את הפורטל ללוח מובילים, ובלוח מובילים
   רוב הלקוחות המשלמים מפסידים. */
.badges { display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
          padding: 0; margin: 0 0 2px; }
.badge { font-size: .74rem; font-weight: 600; padding: 3px 9px;
         border-radius: 999px; background: var(--bk-primary-soft);
         color: var(--bk-primary-dark); }
.badge--new { background: #fff4d6; color: #6b5200; }
.badge--region_top, .badge--booked { background: var(--bk-accent);
                                     color: var(--bk-on-accent); }

.chips--regions li a { display: inline-flex; gap: 6px; align-items: center;
                       text-decoration: none; color: inherit; }
.chip__n { opacity: .6; font-size: .82rem; }

.block--pitch { background: var(--bg-soft); border-top: 1px solid var(--line); }
.empty-portal { text-align: center; padding: 6vh 0; }

/* ⚠ תיבת סימון בתוך שורת שדות: ‏.field מוגדר grid ומותח את
   התיבה לרוחב מלא. כאן היא נשארת בגודלה, לצד התווית. */
.field--check { flex-direction: row; align-items: center; gap: 8px;
                display: flex; padding-top: 22px; }
.field--check input { width: 20px; height: 20px; flex: 0 0 auto; }

/* ------------------------------------------------------------
   ‏/host והדפים המשפטיים
   ------------------------------------------------------------ */
.feats { list-style: none; padding: 0; display: grid; gap: 18px;
         grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feat h3 { margin: 0 0 .3em; }
.feat p { margin: 0; color: var(--ink-soft); }

.tiers { display: grid; gap: 16px; margin: 18px 0;
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tier-card { border: 1px solid var(--line); border-radius: var(--radius);
             padding: 18px; background: var(--bg); }
/* ⚠ המסלול המלא מודגש. הוא ברירת המחדל וגם מה שעדיף לצימר —
   מסלול הפרסומות הוא הנחה, לא המוצר. */
.tier-card--main { border-color: var(--bk-primary); border-width: 2px; }
.tier-card h3 { margin: 0 0 .1em; }
.tier-card__note { margin: 0 0 .6em; color: var(--ink-soft);
                   font-size: .9rem; }
.host-cta { text-align: center; }
.host-cta code { background: var(--bg-soft); padding: 2px 6px;
                 border-radius: 6px; }

/* ⚠⚠ טקסט משפטי: שורה צרה יותר. שורות ארוכות במסמך ארוך הן
   מה שגורם לאנשים לא לקרוא אותו — וכאן זה בדיוק מה שנדרש
   מאיתנו שיקרה. */
.legal { max-width: 680px; padding-bottom: 40px; }
.legal h2 { margin-top: 1.6em; font-size: 1.15rem; }
.legal ul { padding-inline-start: 20px; }
.legal li { margin-bottom: .4em; }

.foot__links { display: flex; flex-wrap: wrap; gap: 14px;
               margin-bottom: 10px; }
.foot__links a { color: inherit; }

/* ⚠ שורת הנתיב בטופס ההרשמה. הקידומת מוצגת כטקסט לא-ניתן
   לעריכה כדי שיהיה ברור מה בדיוק הלקוח בוחר — הוא בוחר את
   הסוף, לא את הכתובת כולה. */
.slugline { display: flex; align-items: center; gap: 2px;
            border: 1px solid var(--line); border-radius: 10px;
            background: var(--bg); padding-inline-start: 10px;
            color: var(--ink-soft); font-size: .92rem;
            direction: ltr; }
.slugline input { border: 0; border-radius: 0 10px 10px 0; flex: 1;
                  min-width: 0; }
.slugline input:focus-visible { outline-offset: -2px; }

/* ⚠ כניסת מארחים על הפורטל. קטנה ובפינה: היא נחוצה למי
   שמחפש אותה, ואסור שתתחרה על תשומת הלב עם מטרת הדף —
   שהיא למצוא צימר. */
.phero { position: relative; }
.phero__host {
  position: absolute; inset-block-start: 12px; inset-inline-start: 16px;
  color: var(--bk-on-primary); opacity: .85; font-size: .88rem;
  text-decoration: none; border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: 6px 14px; min-height: 34px;
  display: inline-flex; align-items: center;
}
.phero__host:hover { opacity: 1; background: rgba(255,255,255,.12); }
.phero__host--inline { position: static; color: var(--bk-primary-dark);
                       border-color: var(--line); opacity: 1; }
.regionbar { display: flex; justify-content: space-between;
             align-items: center; gap: 12px; flex-wrap: wrap; }
.block--login { background: var(--bk-primary-soft); }

/* ⚠ באנר חסות פרטית. ‏object-fit: contain ולא cover — באנר של
   מפרסם נחתך זה לוגו חתוך, וזה בדיוק מה שהצימר מכר. */
.ad--sponsor { border-style: solid; }
.ad__img { width: 100%; max-height: 160px; object-fit: contain;
           border-radius: 8px; }
.ad__link { display: block; }

/* מודול שירות בתשלום בתוך לשונית — נבדל מהשדות סביבו. */
.promo { border: 1px solid var(--bk-accent); border-radius: var(--radius);
         padding: 16px; background: var(--bg); grid-column: 1 / -1; }
.promo code { background: var(--bg-soft); padding: 2px 6px;
              border-radius: 6px; direction: ltr; display: inline-block; }

/* ============================================================
   ⚠⚠⚠ מחולל הלוגו — החלונית
   ------------------------------------------------------------
   ‏dialog מובנה ולא div עם overlay: ‏showModal() נותן מלכודת
   מיקוד, סגירה ב-Esc ו-inert על הרקע **בלי שורת JS אחת**.
   ⚠ מימוש עצמאי של שלושת אלה הוא בדיוק המקום שבו חלונית
   הופכת ללא-נגישה, ואיש לא בודק את זה בדשבורד.
   ============================================================ */
.lgmodal { border: 0; padding: 0; background: transparent;
           max-width: min(880px, 94vw); width: 100%; }
.lgmodal::backdrop { background: rgba(24,26,24,.52);
                     -webkit-backdrop-filter: blur(3px);
                     backdrop-filter: blur(3px); }
.lgmodal__card { background: var(--bg); border-radius: var(--radius-xl);
                 box-shadow: var(--shadow-xl);
                 padding: var(--sp-5); max-height: 88vh; overflow-y: auto; }
.lgmodal__head { display: flex; align-items: flex-start;
                 gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lgmodal__head h2 { margin: 0; }
.lgmodal__x { margin-inline-start: auto; }

/* ⚠⚠ שלושה רעיונות, ולכל אחד שלוש ערכות צבע — כלומר תשע
   אפשרויות. ⚠ הן מסודרות **לפי רעיון** ולא לפי צבע: הבחירה
   האמיתית היא הצורה, והצבע הוא ואריאציה עליה. */
/* ⚠⚠ ‏min-width:0 — ל-fieldset יש ‏min-width:min-content מובנה
   בגיליון הדפדפן, והוא מונע ממנו להצטמצם בתוך מיכל צר. */
.lgset { border: 0; padding: 0; margin: 0 0 var(--sp-5); min-width: 0; }

/* ============================================================
   ⚠⚠⚠ ‏legend כבלוק — ובלי float
   ------------------------------------------------------------
   הדפוס ב-.picks הוא ‏float:right + width:100%, והוא נכון שם
   כי ‏.picks **עצמו** הוא הגריד — מיכל גריד מתעלם מ-float,
   וההצהרה רק הופכת את הכותרת לשורה מלאה.

   ⚠ כאן ‏.lgset הוא fieldset רגיל והגריד הוא ילד שלו, ולכן
   ה-float **בלע את כל שורת הטקסט**: ‏.lgrow קיבל רוחב 0,
   ושלושת הכרטיסים גלשו אל מחוץ למסך (‏left:-48). נמדד
   בדפדפן 9.9.2026 — ‏row=0x208, picks ברוחב 123 מחוץ למיכל.

   ⚠⚠ ‏display:block על legend מותר כאן רק מפני של-fieldset
   אין מסגרת; אחרת הכותרת הייתה יוצאת מהחריץ שבמסגרת.
   ============================================================ */
.lgset__name { font-family: var(--bk-font-display); font-weight: 600;
               font-size: 1.05rem; margin: 0 0 var(--sp-2);
               padding: 0; display: block; width: 100%; float: none; }
.lgrow { display: grid; gap: var(--sp-2);
         grid-template-columns: repeat(3, 1fr); }

.lgpick { position: relative; display: grid; gap: var(--sp-2);
          justify-items: center; cursor: pointer;
          padding: var(--sp-3); border-radius: var(--radius);
          border: 2px solid var(--line); background: var(--bg-soft);
          transition: border-color .16s var(--ease),
                      box-shadow .16s var(--ease); }
.lgpick:hover { border-color: var(--bk-primary); box-shadow: var(--shadow); }
/* ⚠ נשאר במסמך ובר-מיקוד — display:none היה מוציא אותו מסדר
   הטאבים. אותו דפוס בדיוק כמו ב-.pick וב-.layoutpick. */
.lgpick input { position: absolute; opacity: 0; width: 1px; height: 1px;
                margin: 0; pointer-events: none; }
.lgpick:focus-within { outline: 2px solid var(--bk-accent);
                       outline-offset: 3px; }
/* ⚠⚠ מסגרת **וסימן וי**, לא צבע בלבד. */
.lgpick.is-on { border-color: var(--bk-primary); background: var(--bg); }
.lgpick.is-on::after {
  content: '✓'; position: absolute; top: 8px; inset-inline-end: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bk-primary); color: var(--bk-on-primary);
  font-size: .72rem; line-height: 20px; text-align: center;
  font-weight: 700;
}
/* ⚠⚠⚠ כאן קורה "הטריק": ה-SVG מצויר כולו ב-currentColor,
   ולכן הערכה כולה נקבעת ע"י ‏color על העטיפה — שורה אחת,
   בלי לגעת ב-fill או ב-stroke של אף צומת.
   ⚠ החלפת מחרוזות ב-fill/stroke (מה שנראה מתבקש) נשברת על
   ‏<g> מקונן, על gradient ועל fill="none" — וכל אחד מהם מופיע
   בפלט של המודל. */
.lgpick__art { width: 84px; height: 84px; display: grid;
               place-items: center; }
.lgpick__art svg { width: 100%; height: 100%; display: block; }
.lgpick__lbl { font-size: .8rem; color: var(--ink-soft); }

/* מצב הנעילה היומית. ⚠ נראה כהסבר ולא כשגיאה — הבעלים לא
   עשה שום דבר לא תקין, הוא רק כבר ניסה היום. */
.lglock { background: var(--bg-soft); border-radius: var(--radius);
          border-inline-start: 3px solid var(--bk-accent);
          padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0 0;
          color: var(--ink-soft); font-size: .9rem; }

/* ============================================================
   ⚠⚠ חשיפת המותג
   ------------------------------------------------------------
   ⚠⚠⚠ **לא** מסך פתיחה עם הלוגו. הוא לא אפשרי כאן: מסך
   הפתיחה נצבע לפני שמסמך הדייר נקרא, ולכן כתובת הלוגו עדיין
   אינה ידועה — ראו את ההערה ב-index.html. ספלאש שממתין למסמך
   היה מוסיף השהיה לנתיב שכבר נמדד ב-1712ms.

   ⚠ במקום זה: הרצועה נחשפת ברגע שהיא נצבעת, בלי לעכב כלום.
   ============================================================ */
@keyframes bkReveal {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.brandband__img { animation: bkReveal .55s var(--ease) both; }


/* ============================================================
   ⚠⚠ מסך ההקמה שאחרי התשלום
   ------------------------------------------------------------
   ראו את ההערה ב-billing.js::provisioning. ⚠ זה מסך שרואים
   פעם אחת בחיי הלקוח, ובדיוק אחרי שהוא שילם.
   ============================================================ */
.prov { max-width: 560px; margin: 0 auto; padding: 12vh 24px 8vh;
        text-align: center; }
.prov__title { margin: 0 0 var(--sp-1); }
.prov__slug { color: var(--ink-soft); font-size: .95rem; direction: ltr;
              margin: 0 0 var(--sp-5); }
.prov__slug strong { color: var(--bk-primary-dark); }

/* ⚠ הסמל פועם. ‏transform ו-opacity בלבד — שניהם מורצים
   ב-compositor ואינם גורמים ל-layout, וזה מסך שרץ 40 שניות
   ברקע בזמן שהדפדפן ממתין לרשת. */
@keyframes bkPulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.prov__mark {
  width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
              var(--bk-primary) 0 42%, var(--bk-primary-soft) 43% 100%);
  box-shadow: 0 0 0 10px var(--bk-primary-soft);
  animation: bkPulse 1.9s var(--ease) infinite;
}

.prov__step { font-family: var(--bk-font-display); font-size: 1.18rem;
              color: var(--ink); margin: 0 auto var(--sp-4);
              min-height: 1.6em; max-width: none; }

/* ⚠⚠ הרשימה מסומנת בשלושה מצבים ולא בצבע בלבד: אטימות,
   משקל וסימן. אותה דרישה כמו ב-.pick ו-.layoutpick. */
.prov__list { list-style: none; padding: 0; margin: 0 auto var(--sp-5);
              display: grid; gap: 10px; text-align: start;
              max-width: 340px; }
.prov__list li { color: var(--ink-soft); font-size: .93rem; opacity: .45;
                 display: flex; align-items: center; gap: 10px;
                 transition: opacity .3s var(--ease); }
.prov__list li::before {
  content: '○'; flex: 0 0 auto; width: 1.2em; text-align: center;
  color: var(--line);
}
.prov__list li.is-on { opacity: 1; color: var(--ink); font-weight: 600; }
.prov__list li.is-on::before { content: '◐'; color: var(--bk-primary); }
.prov__list li.is-done { opacity: .8; }
.prov__list li.is-done::before { content: '✓'; color: var(--bk-primary); }

.prov__note { color: var(--ink-soft); font-size: .88rem; margin: 0 auto; }

/* ============================================================
   ⚠⚠ מדריך למארח — לשונית התיעוד החי
   ------------------------------------------------------------
   ⚠ ‏<details>/<summary> מובנים ולא אקורדיון ב-JS: פתיחה,
   סגירה, מקלדת, ‏aria-expanded וחיפוש-בדף (Ctrl+F פותח
   ‏details סגור בדפדפנים מודרניים) מגיעים בחינם. אקורדיון
   שנכתב ביד מאבד את כולם, ובעיקר את האחרון.
   ============================================================ */
.hguide { display: grid; gap: var(--sp-2); }
.hguide__lead { color: var(--ink-soft); margin: 0 0 var(--sp-2); }
.hg { background: var(--bg); border-radius: var(--radius-lg);
      box-shadow: var(--shadow); overflow: hidden;
      transition: box-shadow .2s var(--ease); }
.hg[open] { box-shadow: var(--shadow-lg); }
.hg > summary {
  cursor: pointer; list-style: none; padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--bk-font-display); font-weight: 600; font-size: 1.06rem;
  min-height: 56px;
}
/* ⚠ ‏::-webkit-details-marker לספארי הישן; ‏list-style:none
   לבדו אינו מסיר שם את המשולש. */
.hg > summary::-webkit-details-marker { display: none; }
.hg > summary::after {
  content: '⌄'; margin-inline-start: auto; color: var(--bk-primary);
  font-size: 1.3rem; line-height: 1;
  transition: transform .22s var(--ease);
}
.hg[open] > summary::after { transform: rotate(180deg); }
.hg > summary:focus-visible { outline: 3px solid var(--bk-accent);
                              outline-offset: -3px; }
.hg__tag { font-size: .7rem; font-weight: 700; letter-spacing: .04em;
           padding: 3px 9px; border-radius: 999px;
           background: var(--bk-primary-soft); color: var(--bk-primary-dark); }
.hg__body { padding: 0 var(--sp-4) var(--sp-4); }
.hg__body p { margin: 0 0 var(--sp-2); color: var(--ink-soft); }
.hg__body ol, .hg__body ul { margin: 0 0 var(--sp-2);
                             padding-inline-start: 22px; }
.hg__body li { margin-bottom: 6px; line-height: 1.6; }
.hg__body strong { color: var(--ink); }

/* ============================================================
   ⚠⚠⚠ מסך הצעדים הראשונים
   ------------------------------------------------------------
   מוצג כל עוד ``contentPlaceholder`` דלוק — כלומר לבעלים
   שנחת זה עתה מ-pollSignup ועדיין רואה את תוכן ההדגמה שלנו.

   ⚠ הוא **אינו** אשף שחוסם את הדשבורד. בעל צימר שנחסם ע"י
   אשף בן ארבעה מסכים לפני שראה מה קנה הוא בעל צימר שסוגר
   את הלשונית. הכרטיס יושב מעל הלשוניות, והן פתוחות לצידו.
   ============================================================ */
.onb { background: var(--bg); border-radius: var(--radius-xl);
       box-shadow: var(--shadow-lg); padding: var(--sp-5);
       margin-bottom: var(--sp-4); }
.onb__head { margin-bottom: var(--sp-4); }
.onb__head h2 { margin: 0 0 var(--sp-1); }
.onb__lead { color: var(--ink-soft); margin: 0; }

/* ⚠ מונה ולא פס אחוזים: שלושה צעדים הם מספר שאפשר לספור,
   ו-"33%" הוא מספר שצריך לתרגם. */
.onb__count { font-size: .8rem; font-weight: 700; letter-spacing: .1em;
              color: var(--bk-primary); text-transform: uppercase; }

.onb__steps { display: grid; gap: var(--sp-2); }
.onbs { border: 1px solid var(--line); border-radius: var(--radius);
        overflow: hidden; }
.onbs--now { border-color: var(--bk-primary); border-width: 2px;
             box-shadow: 0 0 0 4px var(--bk-primary-soft); }
.onbs__top { display: flex; align-items: center; gap: var(--sp-3);
             padding: var(--sp-3) var(--sp-4); }
.onbs__n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
           background: var(--bg-soft); color: var(--ink-soft);
           font-weight: 700; font-size: .9rem;
           display: grid; place-items: center; }
.onbs--now .onbs__n { background: var(--bk-primary);
                      color: var(--bk-on-primary); }
.onbs--done .onbs__n { background: var(--bk-primary-soft);
                       color: var(--bk-primary-dark); }
.onbs__t { font-family: var(--bk-font-display); font-weight: 600;
           font-size: 1.06rem; }
.onbs__go { margin-inline-start: auto; }
.onbs__body { padding: 0 var(--sp-4) var(--sp-4); }
.onbs__why { color: var(--ink-soft); margin: 0 0 var(--sp-3);
             line-height: 1.65; }
.onbs__why strong { color: var(--ink); }

/* ============================================================
   ⚠⚠ תצוגה מקדימה חיה של תמונת הפתיחה
   ------------------------------------------------------------
   ⚠⚠⚠ היא מדמה את ה-hero האמיתי — אותו יחס, אותו הדרגתי,
   אותה כותרת. תצוגה מקדימה שאינה נאמנה גרועה מכלום: היא
   מאשרת לבעלים תמונה שתיראה אחרת באתר, והוא יגלה את זה רק
   כשאורח יראה אותה.
   ============================================================ */
/* ============================================================
   ⚠⚠ אזור ההדבקה — נראה כמו Dropzone, ואינו
   ------------------------------------------------------------
   ⚠⚠⚠ **מכוון, ומסוכן אם עושים אותו חצי.** ריבוע מקווקו גדול
   הוא הסימן המוסכם ל"גרור לכאן קובץ", ואין במוצר העלאת קבצים
   (‏Cloud Storage אינו מופעל בפרויקט — ראו storage.rules).
   בעל צימר שיגרור לכאן JPEG ולא יקרה כלום יסיק שהמערכת שבורה.

   ⚠ ולכן שלושה דברים מקזזים את הרמז החזותי:
     · הכיתוב אומר «הדביקו קישור», לא «גררו קובץ»
     · האייקון הוא חוליית-שרשרת (קישור), לא ענן-העלאה
     · ‏ondrop מיירט גרירת קובץ ומסביר, במקום לבלוע אותה בשקט
   ============================================================ */
.dz {
  position: relative; display: grid; gap: var(--sp-2);
  justify-items: center; text-align: center;
  padding: var(--sp-5) var(--sp-4);
  border: 2px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--bg-soft);
  transition: border-color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease);
}
/* ⚠ ‏focus-within ולא :focus — הטבעת צריכה לעטוף את כל האזור
   כשהמיקוד נמצא ב-input שבתוכו. */
.dz:hover { border-color: var(--ink-soft); }
.dz:focus-within {
  border-color: var(--bk-accent); border-style: solid;
  background: var(--bg);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bk-accent) 22%, transparent);
}
/* ⚠⚠ נפילה לדפדפן בלי color-mix: טבעת בצבע ההדגשה, בלי שקיפות.
   פחות רכה, אבל נראית — ולא נעלמת. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .dz:focus-within { box-shadow: 0 0 0 3px var(--bk-accent); }
}
.dz.is-drag { border-color: var(--danger); border-style: solid; }
.dz__icon { width: 30px; height: 30px; color: var(--bk-primary);
            stroke-width: 1.25; }

/* ⚠ תווית צפה. ‏placeholder=" " (רווח) הוא מה שמפעיל את
   ‏:placeholder-shown — placeholder ריק לגמרי אינו נחשב מוצג. */
.dz__field { position: relative; width: min(520px, 100%); }
.dz__input {
  font: inherit; font-size: 16px; color: var(--ink); direction: ltr;
  width: 100%; padding: 22px 14px 10px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color .16s var(--ease);
}
.dz__input:focus { outline: none; border-color: var(--bk-primary); }
.dz__label {
  position: absolute; inset-inline-start: 14px; top: 15px;
  color: var(--ink-soft); font-size: 1rem; pointer-events: none;
  transform-origin: inset-inline-start top;
  transition: transform .16s var(--ease), color .16s var(--ease),
              top .16s var(--ease);
  direction: rtl;
}
/* ⚠⚠ הבורר הוא "לא מוצג placeholder **או** יש מיקוד" — כלומר
   התווית עולה גם כשיש ערך וגם בזמן הקלדה. סדר ה-DOM חייב
   להיות input ואז label; ‏~ אינו עובד אחורה. */
.dz__input:focus + .dz__label,
.dz__input:not(:placeholder-shown) + .dz__label {
  top: 6px; transform: scale(.78);
  color: var(--bk-primary-dark); font-weight: 600;
}
.dz__hint { margin: 0; color: var(--ink-soft); font-size: .84rem; }

/* ============================================================
   ⚠⚠⚠ התצוגה המקדימה — קולנועית, ונאמנה
   ------------------------------------------------------------
   ⚠ היחס כאן (21/9) **רחב מה-hero האמיתי** (‏min(78vh,680px)
   על מלוא הרוחב ≈ 1.9). זו החמרה מכוונת ולא אי-דיוק: תצוגה
   רחבה יותר חותכת יותר, כלומר מה שנראה שלם כאן יישאר שלם
   באתר. הכיוון ההפוך — תצוגה צרה שמאשרת תמונה שתיחתך —
   הוא זה שהיה מסוכן.
   ⚠⚠ ההדרגתי והכותרת זהים ל-.hero, וזה מה שבאמת נבדק כאן.
   ============================================================ */
.heroprev { position: relative; border-radius: 12px;
            overflow: hidden; background: var(--bg-soft);
            aspect-ratio: 21 / 9; display: grid;
            margin-top: var(--sp-3);
            box-shadow: var(--shadow-lg);
            opacity: 0; transform: translateY(6px);
            transition: opacity .45s var(--ease),
                        transform .45s var(--ease),
                        box-shadow .3s var(--ease); }
/* ⚠ ‏.is-in נקבע ב-JS אחרי ש-onload נורה. בלעדיו הכרטיס
   מופיע ריק ואז התמונה "קופצת" לתוכו. */
.heroprev.is-in { opacity: 1; transform: none; }
.heroprev img { width: 100%; height: 100%; object-fit: cover; }
.heroprev::after { content: ''; position: absolute; inset: 0;
                   pointer-events: none;
                   background: linear-gradient(to top,
                     rgba(20,22,20,.74) 0%, rgba(20,22,20,.42) 26%,
                     rgba(20,22,20,.10) 52%, rgba(20,22,20,0) 74%); }
.heroprev__txt { position: absolute; inset-block-end: 0; inset-inline: 0;
                 z-index: 1; padding: var(--sp-3) var(--sp-4);
                 color: #fff; font-family: var(--bk-font-display);
                 font-size: clamp(1.1rem, 3vw, 1.7rem); font-weight: 600;
                 text-shadow: 0 2px 18px rgba(0,0,0,.5); }
/* מצב ריק — לא תמונה שבורה, ולא צל שמרחף סביב כלום. */
.heroprev--empty { place-items: center; color: var(--ink-soft);
                   font-size: .92rem; text-align: center;
                   padding: var(--sp-4); box-shadow: none;
                   border: 1px dashed var(--line); }
.heroprev--empty::after { display: none; }

/* ⚠⚠ טבעת מצב סביב התצוגה. ‏inset ולא מסגרת: מסגרת מזיזה את
   התוכן ב-2px וגורמת לתמונה "לקפוץ" בכל שינוי מצב. */
.heroprev.is-ok   { box-shadow: var(--shadow-lg), inset 0 0 0 3px #2e7d46; }
.heroprev.is-warn { box-shadow: var(--shadow-lg), inset 0 0 0 3px #c58a00; }
.heroprev.is-bad  { box-shadow: var(--shadow-lg),
                    inset 0 0 0 3px var(--danger); }

/* ============================================================
   ⚠⚠ תג האימות
   ------------------------------------------------------------
   ⚠ יושב **בתוך** התצוגה ולא מתחתיה: הוא מתייחס לתמונה, וטקסט
   שמופיע מתחת לכרטיס נקרא כהערה על הטופס.
   ⚠⚠ ‏role=status + aria-live: משתמש בקורא מסך חייב לשמוע את
   תוצאת הבדיקה, שאם לא כן היא קיימת רק בעין.
   ============================================================ */
@keyframes bkBadgeIn {
  from { opacity: 0; transform: translateY(-6px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
.vbadge {
  position: absolute; z-index: 2;
  inset-block-start: 12px; inset-inline-start: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; line-height: 1;
  background: rgba(255,255,255,.94); color: var(--ink);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  animation: bkBadgeIn .3s var(--ease) both;
  max-width: calc(100% - 24px);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .vbadge { background: rgba(255,255,255,.8);
            -webkit-backdrop-filter: saturate(1.5) blur(10px);
            backdrop-filter: saturate(1.5) blur(10px); }
}
.vbadge svg { width: 15px; height: 15px; flex: 0 0 auto; stroke-width: 2.4; }
.vbadge--ok   { color: #1d6b3a; }
.vbadge--warn { color: #8a6100; }
.vbadge--bad  { color: var(--danger); }
/* ⚠ הטקסט הארוך (למה זה לא טוב) נשבר לשורה שנייה בנייד ולא
   נחתך — זו ההסבר, ובלעדיו התג הוא רק צבע. */
.vbadge__t { white-space: normal; text-align: start; font-weight: 600; }

/* ⚠ משוב טקסטואלי מתחת — נשאר בשביל המקרה שאין תצוגה כלל
   (כתובת פסולה, טעינה נכשלה). ‏is-warn אינו שגיאה: התמונה
   תישמר בכל מקרה, וזו אזהרה שאפשר להתעלם ממנה במודע. */
.heroprev__meta { font-size: .86rem; margin: var(--sp-2) 0 0;
                  color: var(--ink-soft); }
.heroprev__meta.is-ok { color: #1d6b3a; font-weight: 600; }
.heroprev__meta.is-warn { color: #8a6100; font-weight: 600; }
.heroprev__meta.is-bad { color: var(--danger); font-weight: 600; }

.onbs__row { display: flex; gap: var(--sp-2); flex-wrap: wrap;
             margin-top: var(--sp-3); }
.onbs__row .btn { flex: 0 0 auto; }

/* ============================================================
   ⚠⚠⚠ רגע ההשקה
   ------------------------------------------------------------
   מחליף את כרטיס הצעדים ברגע ש-``contentPlaceholder`` מתנקה —
   כלומר כשהצימר עבר מ"הדגמה" ל"אמיתי" ונכנס לספרייה הציבורית.

   ⚠ קודם הכרטיס פשוט **נעלם**, וזה הרגע היחיד במוצר שבו
   הבעלים סיים משהו. היעלמות שקטה קוראת כ"נגמר", לא כ"הצלחת".

   ⚠⚠ הוא נשאר עד סגירה ידנית ואינו חוזר אחרי רענון: זו חגיגה,
   לא ווידג'ט קבוע. ‏launchMoment ב-dash.js הוא דגל סשן.
   ============================================================ */
@keyframes bkLaunchIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.launch {
  position: relative; overflow: hidden; text-align: center;
  background: var(--bg); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-4);
  animation: bkLaunchIn .55s var(--ease) both;
}
/* ⚠ הזוהר הוא ``--bk-primary-soft`` — נגזר מצבע הדייר ב-theme.js,
   ולכן הוא בגוון שלו ולא בירוק גנרי. ⚠⚠ ‏pointer-events:none:
   הוא פרוש על כל הכרטיס ובלעדיו הוא בולע את הכפתורים. */
.launch::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 78% at 50% 0%,
              var(--bk-primary-soft) 0%, transparent 62%);
}
.launch > * { position: relative; z-index: 1; }

/* ============================================================
   ⚠⚠ סימן הווי המצויר
   ------------------------------------------------------------
   ‏stroke-dashoffset שרץ ל-0 — הקו "נמתח". ⚠ שני עיכובים
   שונים: העיגול נסגר קודם, והווי נכתב אחריו. בלי ההשהיה
   השנייה שניהם מופיעים יחד וזה נראה כמו אייקון סטטי שדוהה.
   ⚠⚠ ‏dasharray של העיגול = היקפו (2πr, ‏r=30 → ~189). ערך
   קטן ממנו משאיר קטע שלא נמתח לעולם.
   ============================================================ */
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
.launch__mark { width: 76px; height: 76px; display: block;
                margin: 0 auto var(--sp-3); }
.launch__mark circle, .launch__mark path {
  fill: none; stroke: var(--bk-primary);
  stroke-linecap: round; stroke-linejoin: round;
}
.launch__mark circle { stroke-width: 2; opacity: .5;
                       stroke-dasharray: 189; stroke-dashoffset: 189;
                       animation: bkDraw .65s var(--ease) .05s forwards; }
.launch__mark path { stroke-width: 3.5;
                     stroke-dasharray: 40; stroke-dashoffset: 40;
                     animation: bkDraw .35s var(--ease) .5s forwards; }

.launch__eyebrow { display: block; font-size: .76rem; font-weight: 700;
                   letter-spacing: .16em; text-transform: uppercase;
                   color: var(--bk-primary); margin-bottom: var(--sp-1); }
.launch h2 { margin: 0 0 var(--sp-2); }
.launch__lead { color: var(--ink-soft); margin: 0 auto var(--sp-4);
                max-width: 46ch; }

/* ============================================================
   ⚠⚠ תיבת הכתובת
   ------------------------------------------------------------
   ⚠ ‏input[readonly] ולא <p>: אפשר לסמן, ללחוץ פעמיים ולבחור
   הכול, וב-iOS זה מה שמאפשר "העתק" מהתפריט הארוך. פסקה נותנת
   בחירה חלקית שגוררת רווחים.
   ⚠⚠ ‏readonly ולא disabled — disabled אינו ניתן למיקוד,
   כלומר לא ניתן לבחירה במקלדת ולא נקרא ע"י קורא מסך.
   ============================================================ */
.launch__urlrow { display: flex; gap: var(--sp-2); flex-wrap: wrap;
                  justify-content: center; align-items: stretch;
                  max-width: 620px; margin: 0 auto var(--sp-3); }
.launch__url {
  flex: 1 1 300px; min-width: 0;
  font: inherit; font-size: 1.02rem; font-weight: 600;
  direction: ltr; text-align: center; color: var(--ink);
  padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-soft);
  cursor: text;
}
.launch__url:focus { outline: 3px solid var(--bk-accent);
                     outline-offset: 2px; }

/* ⚠⚠⚠ מצב «הועתק». ‏!important על הרקע כי ‏.btn--primary
   מגדיר background ובאותה ספציפיות — בלי זה הכפתור מחליף
   טקסט ולא צבע, וזה נקרא כבאג. */
.btn.is-copied { background: #1d6b3a !important; color: #fff !important;
                 border-color: #1d6b3a !important; }

.launch__acts { display: flex; gap: var(--sp-2); flex-wrap: wrap;
                justify-content: center; margin-bottom: var(--sp-4); }

/* ============================================================
   ⚠⚠ ה-QR הקטן
   ------------------------------------------------------------
   ⚠ קיים בשביל פעולה אחת: לשלוף טלפון ולראות את האתר **על
   מסך אמיתי**, מיד. בעל צימר שבודק את האתר שלו רק בשולחני
   הוא בעל צימר שיגלה בעיה בנייד מאורח.
   ⚠⚠ ‏max-width קטן בכוונה — זה לא כרטיס ההדפסה (ראו .qrcard),
   זה סמן בדיקה.
   ============================================================ */
.launch__qr { display: inline-grid; gap: 8px; justify-items: center;
              padding: var(--sp-3); border-radius: var(--radius);
              background: #fff; box-shadow: var(--shadow-sm);
              border: 1px solid var(--line); }
.launch__qr svg { width: 118px; height: 118px; display: block; }
.launch__qrcap { font-size: .8rem; color: var(--ink-soft); }

.launch__done { margin-top: var(--sp-4); }

/* ============================================================
   ⚠⚠ תא הכתובת בטבלת הסופר-אדמין
   ------------------------------------------------------------
   ⚠ עמודה ראשונה ב-RTL, ולכן היא **תמיד** על המסך — בניגוד
   לעמודת הפעולות, שנחתכת משמאל בטבלה רחבה. ראו את ההערה
   ב-admin.js::row.
   ============================================================ */
.slugcell { white-space: nowrap; }
.slugcell__view { display: inline-flex; align-items: center; gap: 6px; }

/* ⚠ העיפרון דהוי עד ריחוף/מיקוד — הוא פעולה משנית בתא שרובו
   קישור. ⚠⚠ אבל **נראה תמיד** ולא רק ב-hover: פעולה שמתגלה
   רק בריחוף אינה קיימת במסך מגע, וזה בדיוק מה שקרה לכפתור
   הקודם. */
.slugcell__edit {
  font: inherit; font-size: .95rem; line-height: 1;
  padding: 4px 7px; min-height: 28px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink-soft); cursor: pointer;
  opacity: .65;
  transition: opacity .15s var(--ease), background .15s var(--ease),
              border-color .15s var(--ease);
}
.slugcell__edit:hover { opacity: 1; background: var(--bg-soft);
                        border-color: var(--line); }
.slugcell__edit:focus-visible { opacity: 1;
                                outline: 3px solid var(--bk-accent);
                                outline-offset: 1px; }

.slugcell__form { display: inline-flex; align-items: center; gap: 6px; }
.slugcell__inp {
  font: inherit; font-size: .9rem; direction: ltr;
  width: 130px; padding: 6px 9px; min-height: 34px;
  border: 1px solid var(--bk-primary); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
}
.slugcell__inp:focus { outline: none;
                       box-shadow: 0 0 0 3px var(--bk-primary-soft); }

/* ============================================================
   ⚠⚠⚠ העדפת תנועה מופחתת — כלל גורף אחד
   ------------------------------------------------------------
   ⚠ חייב לשבת **בסוף הקובץ**: הוא מנצח בזכות סדר המקור, ולכן
   כל אנימציה שתתווסף מעליו בעתיד מכוסה אוטומטית.
   ⚠⚠ ‏.01ms ולא 0 — משך אפס מדלג על אירוע animationend, וקוד
   שממתין לו נתקע. אין כזה כרגע, וזו בדיוק ההנחה שנשברת.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* ⚠ הזום על תמונה הוא transform ולא transition בלבד. */
  .card:hover .card__img, .tile:hover img,
  .card:focus-within .card__img { transform: none !important; }
}

/* ⚠ גיליון ה-QR על המסך. בהדפסה הוא נדרס ע"י ‏#qrSheet
   שב-@media print (שתי עמודות, ‏break-inside:avoid) — כאן זו
   רק תצוגה מקדימה שמראה לצימר מה יצא מהמדפסת. */
.qrsheet { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3);
           grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.qrsheet .qrcard { max-width: none; }

/* ============================================================
   ⚠⚠ פניות תמיכה — שני הצדדים
   ------------------------------------------------------------
   ⚠ משתמש ב-.hg (האקורדיון של «מדריך למארח»), כי זו בדיוק
   אותה תבנית: כותרת שנסרקת ברשימה, ותוכן שנפתח לפי בחירה.
   רכיב שני שנראה זהה הוא רכיב שיתפצל בעדכון הבא.
   ============================================================ */
.supcard__meta { font-size: .85rem; color: var(--ink-soft);
                 margin: 0 0 var(--sp-2); }

/* ⚠⚠⚠ ‏pre-wrap. גוף פנייה נכתב בשורות ע"י אדם, ו-HTML בולע
   אותן. ההמרה הידנית ל-<br> היא בדיוק המקום שבו נכנס תו שלא
   נמלט — ולכן הטקסט נכנס דרך esc() וה-CSS שומר על השורות. */
.supcard__body { white-space: pre-wrap; margin: 0 0 var(--sp-3);
                 color: var(--ink); line-height: 1.65; max-width: 68ch; }

.supcard__reply { background: var(--bg-soft); border-radius: var(--radius);
                  border-inline-start: 3px solid var(--bk-primary);
                  padding: var(--sp-3); }
.supcard__reply strong { display: block; margin-bottom: 6px;
                         color: var(--bk-primary-dark); font-size: .9rem; }

/* ⚠ תגית הסטטוס — שלושה מצבים, ולא צבע בלבד: הטקסט בתוכה
   אומר את המצב במילים. */
.hg__tag.sup--pending { background: #fff4d6; color: #6b5200; }
.hg__tag.sup--in_progress { background: #e3ecfd; color: #1e3a70; }
.hg__tag.sup--completed { background: #e6f4ea; color: #1d6b3a; }

/* ============================================================
   ⚠⚠ שורת ההעלאה לצד שדה תמונה
   ------------------------------------------------------------
   ⚠⚠⚠ ‏grid-column: 1/-1 — היא יושבת בתוך ‏.form, שהוא גריד
   של ‏repeat(auto-fit, minmax(200px,1fr)). מה שאינו שדה ונופל
   לעמודה בודדת נמעך לרצועה צרה וגבוהה; ראו את הכלל בראש הקובץ.
   ============================================================ */
.upline { grid-column: 1 / -1; display: flex; align-items: center;
          gap: var(--sp-2); flex-wrap: wrap;
          margin: calc(-1 * var(--sp-2)) 0 var(--sp-1); }
.upline__msg { font-size: .85rem; color: var(--ink-soft); }

/* אזור ההדבקה בצעדים הראשונים — «עיון» הוא הפעולה הראשית. */
.dz__acts { display: flex; align-items: center; gap: var(--sp-3);
            flex-wrap: wrap; justify-content: center; }
/* ⚠ "או" מופרד ודהוי: הוא מסמן שתי דרכים לאותו דבר, ולא שני
   שלבים שצריך לעשות בזה אחר זה. */
.dz__or { font-size: .85rem; color: var(--ink-soft); }

/* ============================================================
   ⚠⚠ התצוגה המקדימה החיה
   ------------------------------------------------------------
   ראו previewPanel/wirePreview ב-dash.js ו-startPreview ב-app.js.
   ============================================================ */
/* ⚠⚠⚠ ‏min-width:0 — בלעדיו הפאנל מתנפח ל-1330px.
   ‏.dash__body הוא **גריד**, ופריט גריד מקבל ‏min-width:auto
   שפירושו "לא קטן מהתוכן". התוכן כאן הוא iframe ברוחב 1280,
   ולכן הפריט סירב להצטמצם, ‏pvFit מדד 1280 וחישב scale(1) —
   כלומר התצוגה לא הוקטנה בכלל. ⚠ נמדד בדפדפן 10.9.2026:
   ‏dash__body=596px אבל ‏.pv=1330px. */
.pv { background: var(--bg); border-radius: var(--radius-lg);
      box-shadow: var(--shadow); padding: var(--sp-4);
      margin-top: var(--sp-4); min-width: 0; }
.pv__head { display: flex; align-items: center; gap: var(--sp-3);
            margin-bottom: var(--sp-1); }
.pv__head h2 { margin: 0; font-size: 1.15rem; }
.pv__head .btn { margin-inline-start: auto; }

/* ⚠⚠⚠ ‏overflow:hidden הוא מה שגוזר את המסגרת המוקטנת.
   ה-iframe עצמו רחב 1280px ומוקטן ב-transform — בלי החיתוך
   הוא היה גולש מהכרטיס והדשבורד היה נגלל אופקית. */
.pv__wrap { position: relative; overflow: hidden; max-width: 100%;
            border-radius: var(--radius); border: 1px solid var(--line);
            background: var(--bg-soft); margin-top: var(--sp-3); }

/* ⚠⚠ ‏transform-origin בפינה הימנית-עליונה. האתר RTL, ומקור
   שמאלי היה מקטין אותו אל מחוץ למסגרת בצד הלא נכון. */
.pv__frame { border: 0; display: block;
             transform-origin: top right;
             /* ⚠ הסקאלה נקבעת ב-JS (pvFit) לפי רוחב הכרטיס.
                ערך התחלתי כדי שלא יהיה הבזק ברוחב מלא. */
             transform: scale(.4); }

/* ⚠ במסך רחב הפאנל נצמד בזמן גלילה — הבעלים עורך למעלה ורואה
   את התוצאה בלי לגלול הלוך ושוב. מתחת לזה אין מקום לזה. */
@media (min-width: 1100px) {
  .pv { position: sticky; top: var(--sp-3); }
}

/* ⚠ תיבת יצירת החשבון ב-/host. ראו signupBox ב-host.js:
   היא קיימת כדי לפתור ביצה-ותרנגולת — אי אפשר להקים צימר
   בלי חשבון Auth, ולא היה מסלול ליצור אחד. */
.block--signin { background: var(--bg-soft);
                 border-top: 1px solid var(--line); }
.signin__ok { font-weight: 700; color: #1d6b3a; margin: 0 0 var(--sp-1); }
/* ⚠⚠ ‏dir=ltr ו-break-all: כתובת מייל ארוכה בתוך פסקה RTL
   נשברת ויזואלית, והלקוח מקריא אותה לנו בטלפון שגוי. */
.signin__mail { direction: ltr; font-weight: 700; font-size: 1.1rem;
                word-break: break-all; margin: 0 0 var(--sp-2);
                color: var(--bk-primary-dark); }

/* ============================================================
   ⚠⚠ פאנל «מי מנהל את הצימר» בטבלת הסופר-אדמין
   ------------------------------------------------------------
   שורה שנפתחת מתחת לדייר. ⚠ החליף ‏prompt() שלא הראה מי בכלל
   יש — ולכן "שינוי מייל" לא היה פעולה אפשרית.
   ============================================================ */
.ownrow > td { padding: 0 !important; background: var(--bg-soft); }
.ownbox { padding: var(--sp-3) var(--sp-4); }
.ownbox h3 { margin: 0 0 var(--sp-2); font-size: 1rem; }
.ownbox__tbl { box-shadow: none; background: transparent; margin-bottom: var(--sp-2); }
/* ⚠ ‏dir=ltr ו-break-all: כתובת ארוכה בתוך טבלה RTL נשברת
   ויזואלית והסלאשים קופצים. */
.ownbox__mail { direction: ltr; word-break: break-all; font-weight: 600; }
.ownbox__add { display: flex; gap: var(--sp-2); flex-wrap: wrap;
               align-items: center; margin-bottom: var(--sp-2); }
.ownbox__add input { min-width: 220px; }
.btn--danger { background: var(--danger); color: #fff; }