/* ==========================================================================
   Cart Popover — Tickchak Design System
   Independent drop-down cart overlay from top of form-container.
   Triggered from ActionBar cart badge click; clones content from #cartScreen.
   Required: tokens.css, cart-card.css
   Usage:
     <div id="cartPopBackdrop"></div>
     <div id="cartPop">
       <div class="cp-hdr"><h2>סל קניות</h2></div>
       <div class="cp-body" id="cartPopBody"></div>
       <div class="cp-actionbar"></div>
     </div>
     <button class="cp-float-x" id="cartPopClose"><svg .../></button>
   ========================================================================== */

/* Backdrop */
#cartPopBackdrop{
  position:fixed;inset:0;z-index:1099;
  background:rgba(0,0,0,0.5);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
#cartPopBackdrop.is-open{opacity:1;pointer-events:auto;}

/* Popover — slides down from top, 80% height
   🔴 משטח לבן (dec.cart.white_background_everywhere, אשי→מוטי→אסף 29/07).
   היה `--color-grays-700` כהה; אותה תבנית שכבר בשימוש בדף — משטח לבן על דף-לייב
   הוא `--tl-color-bg-baseAlt` עם טקסט `--tl-color-text-inverse-default` (כמו .cfp-card). */
#cartPop{
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;right:0;
  height:80%;z-index:1100;
  background:var(--tl-color-bg-baseAlt,#fff);
  color:var(--tl-color-text-inverse-default,#000);
  border-radius:0 0 32px 32px;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
  font-family:'Google Sans','Rubik',sans-serif;
  transform:translateY(-100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}
#cartPop.is-open{transform:translateY(0);pointer-events:auto;}

/* ── מובייל: הגובה לפי תוכן, עד תקרה של 80% (אסף 31/07) ─────────────────────
   קודם הפופ היה **תמיד** 80% — סל ריק תפס 650px מתוך 812 בשביל שורת-טקסט אחת.
   בנייח זה כבר עבד ככה (`height:auto; max-height:min(560px,70vh)` בדף-מרכז),
   אז זה גם מיישר בין השניים. הבקשה נאמרה במפורש על מובייל בלבד. */
@media(max-width:1023px){
  #cartPop{height:auto;max-height:80%;}
}


#cartPop .cp-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:max(var(--space-xl),env(safe-area-inset-top)) var(--space-xl) var(--space-lg);
}
#cartPop .cp-hdr h2{
  font-size:var(--font-size-heading-page);
  font-weight:var(--font-weight-semibold);
}

#cartPop .cp-body{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding:0 var(--space-lg);
  /* Text color inherited from #cartPop (black on the white surface) */
}

/* אין עוד גוון-כהה בפופ: הכרטיסים והסיכום נשארים בגוון `default` של הרכיב
   (רקע לבן + מסגרת subtle). `cart-card--inverse` / `cart-grand--inverse` הוסרו
   מהדמואים — הם היו שם רק בגלל המשטח הכהה. הרכיב עצמו עדיין תומך בשניהם. */

#cartPop .c-scroll{
  flex:1;overflow-y:auto;
  display:flex;flex-direction:column;
  gap:var(--space-lg);
  padding-bottom:var(--space-lg);
}
/* 🔴 30/07 (אסף): פס-גלילה עדין — «שיבינו שיש גלילה».
   קודם הוא היה מוסתר לגמרי (`display:none`), והסל נראה כאילו זה כל התוכן.
   הפיד בתחתית מרמז שיש עוד, אבל הוא לא אומר **כמה** ואי-אפשר לתפוס אותו.
   4px, בלי מסילה, בגוון הטקסט-המשני — נוכח מספיק כדי להיקרא, שקט מספיק
   כדי לא להתחרות בתוכן. */
#cartPop .c-scroll{
  scrollbar-width:thin;                                   /* Firefox */
  scrollbar-color:var(--tl-color-text-inverse-subtle,rgba(0,0,0,0.4)) transparent;
}
#cartPop .c-scroll::-webkit-scrollbar{width:4px;}
#cartPop .c-scroll::-webkit-scrollbar-track{background:transparent;}
#cartPop .c-scroll::-webkit-scrollbar-thumb{
  background:var(--tl-color-text-inverse-subtle,rgba(0,0,0,0.4));
  border-radius:100px;
}
#cartPop .c-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--tl-color-text-inverse-default,rgba(0,0,0,0.7));
}
/* 🔴 31/07 (אסף): «על הפנים» — הכפתור, ה-X והסל נקראו כשלושה גופים מרחפים
   על הדף, שאף אחד מהם אינו שייך לשני. הכפתור נכנס **לתוך הסל**, בתחתיתו —
   בדיוק מה שאסף אמר בדף-מרכז («הכפתור הצהוב יושב בתוך הפופ, כמו בנייח»).
   שם זה הפך למורף רק מפני שהיה סרגל-ניווט להתמרף ממנו; כאן אין. */
#cartPop .cp-actionbar{display:none;}
/* «לתשלום» על כל רוחב הסרגל — בכל דף (אסף 21/08: באירוע עבד יפה, במנוי יצא
   גלולה צרה; הכלל ישב רק ב-CSS המקומי של דף-מרכז ועבר לכאן, לרכיב). */
#cartPop .cp-actionbar .btn{width:100%;justify-content:center;}
#cartPop .cp-actionbar:not(:empty){
  /* flex+gap — «תן רווח נורמלי» (אסף 04/08) בין «סיכום עגלה» לכפתור. התיקון
     נכתב אז רק בדף-מרכז; ב-21/08 אסף תפס שבטופס-המנוי אין אותו («תיאום
     מוחלט») — עבר לכאן. */
  display:flex;flex-direction:column;gap:var(--space-lg);
  /* 🔴 flex-shrink:0 — הסל הוא flex column, והסרגל הזה היה **נדחס** כשהתוכן
     מגיע לתקרת-הגובה (80% במובייל, סל עם הרבה פריטים). כשהוא נדחס נדחס איתו
     גם הריפוד-התחתון של 88px שהוזמן במיוחד כדי שהסרגל הצף ינחת מתחת לסיכום
     — ואז הוא נחת **על** «סיכום עגלה». נתפס ע"י אסף במובייל, 02/08.
     הכלל שהזמין את המקום נכתב 29/07; זה מה שהיה חסר כדי שהוא יחזיק. */
  flex-shrink:0;
  padding:var(--space-md) var(--space-lg) max(var(--space-lg),env(safe-area-inset-bottom));
}

/* ── כללים שעברו מדף-מרכז לרכיב (21/08, «תיאום מוחלט») ─────────────────── */
/* «פיד» — שקוף→רקע בתחתית התוכן הנגלל: מסמן שיש עוד מתחת, לא חוסם לחיצות */
#cartPop .cp-body{position:relative;}
#cartPop .cp-body::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:40px;pointer-events:none;
  background:linear-gradient(to top, var(--tl-color-bg-baseAlt,#fff), transparent);
}
/* גובה-הספרה לגלגול — נגזר מגובה-השורה של הסכום עצמו (22px × 1.2) */
#cartPop .cart-grand__total{--num-h:1.2em;display:flex;align-items:center;}
/* גלולת-השעון — רווח וגודל-טקסט (אסף 02/08) */
#cartPop .cart-clock{gap:var(--space-sm,8px);font-size:var(--font-size-body-small,14px);}


/* ── «סיכום עגלה» — קבוע בתחתית הסל, בשלושת המשטחים (אסף 31/07) ─────────────
   ההכרעה נולדה בדף-מרכז 29/07 («קבוע מעל הכפתור, לא נגלל»), ועד היום חלה רק שם.
   בשני טפסי-הרכישה הסיכום היה דווקא **בראש** הסל (`order:-1`) — אסף: «זה לא נכון,
   זה צריך למטה… שווה שכולם ביחד, אחד». הסיכום בא אחרי מה שהוא מסכם.
   בדף-מרכז הוא יושב מחוץ לגולל (`.cp-actionbar`); כאן הוא האיבר האחרון **בתוך**
   הגולל, ולכן `sticky` נותן את אותה התנהגות בלי לגעת בקוד-השכפול של הדפים. */
/* ⚠️ מכוון ל**בן-הישיר של הגולל** בלבד. בדף-מרכז הסיכום יושב ב-`.cp-actionbar`,
   כלומר כבר קבוע מחוץ לאזור-הגלילה — כלל רחב היה מוסיף לו ריפוד שלא היה שם. */
/* ⚠️ `.cp-body` ולא `.c-scroll`: שני טפסי-הרכישה משכפלים את הסל אחרת —
   «כרטיסים» מעתיק את המעטפת (`outerHTML`, ולכן יש `.c-scroll` בפנים) ו«מינוי»
   מעתיק רק את התוכן (`innerHTML`, ואין מעטפת). סלקטור על `.c-scroll` תפס רק
   את הראשון, ולכן ב«מינוי» הסיכום נשאר מכוסה. `.cp-body` נכון לשניהם —
   ומדלג על דף-מרכז, שבו הסיכום יושב ב-`.cp-actionbar` מחוץ לגולל. */
#cartPop .cp-body .cart-grand{
  order:0;
  position:sticky;bottom:0;z-index:2;
  margin-top:var(--space-md);
  padding-block:var(--space-md);
  background:var(--tl-color-bg-baseAlt,#fff);
}
#cartPop .is-empty > .cart-grand{display:none;}

/* ── מקום לכפתור הצף בתוך הסל (מובייל, טפסי-הרכישה) ─────────────────────────
   הסרגל צף על תחתית-הסל ותופס שם 100px (76 גובה + 24 חפיפה). בלי לפנות לו
   מקום הוא נוחת בדיוק על «סיכום עגלה» ומסתיר אותו — זה מה שאסף ראה.
   הסיכום הוא sticky, ולכן מרימים את **קצה-ההצמדה** שלו ולא רק את הריפוד. */
@media(max-width:1023px){
  /* «לתשלום» שבתוך הסל מיותר במובייל — בכל המשטחים ה-CTA הוא הסרגל הצף
     (בדף-מרכז: סרגל-המובייל; בטפסים: סרגל-הטופס שעולה מעל הסל). הכלל ישב
     רק בדף-מרכז, ובטופס-המנוי נוצר כפל-כפתור (אסף 21/08: «באג קשה»). */
  #cartPop .cp-actionbar .btn{display:none;}
  /* ...ומפנים לסרגל הצף מקום מתחת ל«סיכום עגלה» (88 = גובה-הסרגל 64 + 24 ריחוף).
     `:not(:empty)` — כדי לנצח את כלל-הבסיס הספציפי (ראו ההיסטוריה בדף-מרכז, 29/07→02/08). */
  #cartPop .cp-actionbar:not(:empty){padding-bottom:calc(88px + max(var(--space-lg),env(safe-area-inset-bottom)));}
  /* 🔴 מקום אחד בלבד. בגרסה הקודמת הריפוד ישב גם על `.cp-body` וגם על
     `.c-scroll` — 200px במקום 100 — ולכן נפער חלל לבן ענק והשורה האחרונה
     נחתכה (אסף: «התוכן נחתך, לא ממלא כמו שצריך»).
     הריפוד על `.cp-body` **מקטין את תיבת-הגלילה עצמה**, ולכן הסיכום ה-sticky
     נצמד ל-100px מעל תחתית-הסל בלי שום היסט נוסף — שם בדיוק יושב הכפתור. */
  #cartPop{ --cart-cta-room:100px; }
  /* 🔴 `:has(.cart-grand)` — 02/08. הכלל נכתב לטפסי-הרכישה, שם הסיכום יושב
     **בתוך** הגולל וצריך לפנות לו מקום. הסלקטור חל על כל דף, וב**דף-מרכז**
     הסיכום יושב ב-`.cp-actionbar` מחוץ לגולל — ולכן 100 הפיקסלים שם היו
     חור לבן ריק, והרשימה נחתכה מוקדם (אסף: «תוכן נחתך הרבה לפני»).
     עכשיו המקום מוזמן רק היכן שיש באמת סיכום בתוך הגולל. */
  #cartPop .cp-body:has(.cart-grand){ padding-bottom:var(--cart-cta-room); }
}

/* Empty state — simple centered text, hides cart-card */
#cartPop .c-scroll.is-empty{
  align-items:center;justify-content:center;
  padding:var(--space-3xl) var(--space-xl);
}
#cartPop .c-scroll.is-empty > .cart-card{display:none;}
#cartPop .c-empty{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);
  text-align:center;
}
#cartPop .c-scroll.is-empty > .c-empty{display:flex;}
#cartPop .c-empty__img{
  width:211px;height:176px;object-fit:contain;
}
#cartPop .c-empty__text{
  font-family:var(--font-family-live);
  font-size:var(--font-size-heading-page);
  font-weight:var(--font-weight-semibold);
  line-height:1.2;
  color:var(--tl-color-text-inverse-default,#000);
}
#cartPop .c-empty__sub{
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  color:var(--tl-color-text-inverse-subtle,rgba(0,0,0,0.4));
}

/* ActionBar when "freed" — fixed above popover, spring bounce up */
/* ⚠️ ה-24px נמדדים מ**תחתית-הסל בפועל**, לא מ-20% מלמטה. עד 31/07 הפופ היה
   בגובה קבוע ולכן «מה שנשאר מתחתיו» היה תמיד 20%; מרגע שהגובה נגזר מהתוכן,
   הנוסחה הישנה הייתה מנתקת את הכפתור מהסל — בדיוק הבאג של 30/07.
   `--cart-below` מתפרסם ב-general/cart-popover.js; ברירת-המחדל 20% משחזרת
   בדיוק את ההתנהגות הקודמת אם הסקריפט לא נטען. */
#formActionbar.ab-free{
  position:fixed !important;
  /* 🔴 31/07: **מתחת** לסל, לא עליו. קודם הוא ישב 24px מעל קצה-הסל — חפיפה
     שהייתה בלתי-מזיקה כשהסל היה 650 קבוע, אבל מרגע שהגובה נגזר מהתוכן היא
     נחתה בדיוק על שורת «סה״כ» והסתירה אותה (נתפס ע"י אסף בדמו).
     בדף-מרכז החפיפה נשארת במכוון — שם הכפתור אמור לצוף על הסל, ויש ריפוד
     שמור בשבילו בתחתית. כאן אין, ולכן הוא יורד. */
  /* 🔴 31/07 (אסף): «צריך להיות **על** פופ ולא מחוץ לפופ» — הסרגל חוזר לצוף
     על תחתית-הסל, 24px מעל קצהו, כפי שהיה. מה שהשתנה: ה-24 נמדדים מהגובה
     האמיתי (`--cart-below`) ולא מ-20% קבוע, כי הגובה נגזר עכשיו מהתוכן.
     ⚠️ החפיפה הזו היא שהסתירה את «סה״כ» — ולכן הסל מפנה לה מקום בתחתיתו,
     ראה `--cart-cta-room` למטה. אותו פתרון בדיוק כמו בדף-מרכז (30/07). */
  bottom:calc(var(--cart-below, 20%) + 24px) !important;
  top:auto !important;
  left:var(--space-lg) !important;
  right:var(--space-lg) !important;
  z-index:1102 !important;
  width:auto !important;
  transition:bottom .6s cubic-bezier(.175,.885,.32,1.275) !important;
}
#formActionbar.ab-free .actionbar__back{display:none;}
#formActionbar.ab-free .actionbar__cta{flex:1;}

/* 🔴 31/07 (אסף): **המסגרת הזכוכיתית נשארת.** ניסינו לכבות אותה כאן כמו
   בסרגל המתמרף של דף-מרכז — ואסף פסל: «תחזיר מסגרת זכוכית». ההבדל מדף-מרכז:
   שם הגלולה עצמה **הופכת** לכפתור, ולכן מסגרת סביבה היא כפילות; כאן הסרגל
   נשאר סרגל שמרחף מתחת לסל, והזכוכית היא מה שמפריד אותו מהתוכן שמאחור. */

/* Floating X below popover — spring bounce from bottom */
.cp-float-x{
  display:flex;
  position:fixed;
  left:50%;top:calc(var(--cart-h, 80%) + 16px);bottom:auto;   /* צמוד מתחת לסל; הכפתור צף בתוכו ולא מתחרה עליו */
  z-index:1101;
  width:56px;height:56px;
  /* 🔴 30/07 (אסף): הכפתור לבן. היה שחור-70% עם מסגרת לבנה — נבנה כשהסל היה כהה,
     ומאז הסל התהפך (dec.cart.white_background_everywhere). ה-X עצמו לוקח את
     `currentColor`, ולכן הוא מתהפך לשחור יחד עם הרקע בלי גרסה שנייה. */
  background:var(--tl-color-bg-baseAlt,#fff);
  color:var(--tl-color-text-inverse-default,#000);
  border:none;
  box-shadow:0 6px 20px rgba(0,0,0,0.22);
  border-radius:100px;
  cursor:pointer;
  align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:translateX(-50%) translateY(100px);
  opacity:0;
  transition:transform .6s cubic-bezier(.175,.885,.32,1.275) .15s, opacity .2s .15s;
  pointer-events:none;
}
#cartPop.is-open ~ .cp-float-x{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
}

/* Hidden source cartScreen — populated dynamically, cloned into #cartPop */
#cartScreen{display:none;}

/* ── נייח: הסל נפתח כמגירה מצד שמאל (פיגמה «פלואו סל קניות» 2412:90645,
   אסף 21/08 — מחליף את התפריט-המעוגן-לכפתור מ-29/07). אותה הנדסה כמו
   מגירת טופס-הרכישה: 500 מוצמד-שמאל, פינות 32 בקצה החיצוני (ימין, אין
   טוקן-רדיוס 32), X צף מחוץ למגירה, רקע מעומעם. חל בכל דף — הרכיב אחד. ── */
@media(min-width:900px){   /* = סף מצב-המגירה (purchase-drawer.js) — פופ-על-פופ בכל רוחב שיש בו מגירה */
  #cartPop{
    top:0;bottom:0;left:0;right:auto;
    width:min(500px,100vw);
    height:100%;
    border-radius:0 32px 32px 0;
    transform:translateX(-100%);
  }
  #cartPop.is-open{transform:translateX(0);}
  /* ה-X הצף — מחוץ למגירה, צמוד לפינה העליונה (כמו סגירת מגירת-הטופס) */
  .cp-float-x{
    left:calc(min(500px,100vw) + 16px);
    top:16px;
    width:44px;height:44px;
    transform:translateY(-8px);
  }
  #cartPop.is-open ~ .cp-float-x{transform:translateY(0);}
}

/* ── סל מתוך הטופס בנייח — פופ-על-פופ = **מגירה** (אסף 21/08, ערב: «לא טור…
   התכוונתי מגירה»): אותה מגירת-סל של הדף — 500, גובה מלא, נכנסת מהשמאל
   ומכסה את מגירת-הטופס. המיקום והתנועה הם כללי-הבסיס של ‎#cartPop‎ בנייח
   (למעלה); כאן רק ההבדלים: חץ-חזרה בכותרת במקום X שני (כפל-X היה נקרא
   כ«יציאה מהטופס»), וההחשכה על רצועת-הטופס בלבד.
   (הגרסה הקודמת — גיליון שעולה מלמטה בתוך הרצועה — ירדה לבקשת אסף.) ── */
.cp-back{display:none;}
@media(min-width:900px){   /* = סף מצב-המגירה (purchase-drawer.js) */
  body.pf-drawer-mode #cartPopBackdrop.pf-in-form{right:auto;width:min(500px,100vw);}
  body.pf-drawer-mode #cartPop.pf-in-form ~ .cp-float-x{display:none;}
  /* חץ-החזרה בכותרת ירד (אסף 21/08: «כפתור אפור עם חץ — למחוק»): החזרה היא
     הכפתור הצף שמחוץ למגירה (X של הטופס שהופך חץ) — בדיוק כמו סל-הדף בנייח. */
}