/* ==========================================================================
   Cart States — מצבי-הסל שאינם «סל רגיל»
   --------------------------------------------------------------------------
   ארבעה מצבים שהאפיון מחייב, וכולם חיים על אותו רכיב-סל:
     · שעון בתוך הסל          — br.cart.timer_display (חוק 12)
     · הודעת «רוקן סל»         — br.cart.empty_action (חוק 4)
     · מצב הסל-שפג «אופסס»    — br.cart.expired_state (חוק 14)
     · פריט אחרי רכישה         — br.cart.post_purchase_item (חוק 15)

   כל הקופי כאן **מצוטט מהאפיון מילה-במילה** — מוטי הכתיב אותו 28/07.
   Required: tokens.css
   ========================================================================== */

/* ── 1. שעון בתוך הסל (חוק 12) ──────────────────────────────────────────────
   אותה שפה של השעון הצף — טבעת מתמעטת ומספר — בגודל קטן, בראש הסל ליד
   הכותרת. לא רכיב חדש: מי שראה את השעון על הכפתור מזהה אותו מיד. */
.cart-clock{
  display:inline-flex;align-items:center;gap:var(--space-sm,8px);
  padding:var(--space-xs,4px) var(--space-md,12px);
  border-radius:var(--border-radius-full,999px);
  background:var(--tl-color-bg-surface-inv,rgba(0,0,0,0.05));
  color:var(--tl-color-text-inverse-default,#000);
  font-family:'Google Sans','Rubik',sans-serif;
  font-size:var(--font-size-body-small,14px);
  line-height:var(--line-height-body,20px);
  font-weight:var(--font-weight-semibold,600);
  flex-shrink:0;
}
/* «נותרו» — הופך מספר יבש למשפט. בלי המילה, שעון בראש הסל יכול להיקרא
   כשעת-היום או כמשך-הזמן שכבר עבר (אסף 02/08). */
.cart-clock__label{
  font-weight:var(--font-weight-regular,400);
  color:var(--tl-color-text-inverse-subtle,rgba(0,0,0,.4));
}
/* אייקון-שעון פשוט ולא טבעת מתמעטת: בגודל הזה, ובלי רקע שיעגן אותה,
   הטבעת נקראה כמחוון-טעינה (אסף 02/08). הטבעת נשארת על כפתור-הסל, שם
   היא גדולה יותר ויושבת על אובייקט מוכר. */
.cart-clock__icon{width:18px;height:18px;flex-shrink:0;}

/* ℹ️ נוסה «?» לצד השעון (עיגול-עזרה, דפוס .tfc__badge-help) והוסר 02/08:
   הלחיצה לא הובילה לשום דבר, כי **האפיון אינו אומר מה ההסבר**. חוק 12 הוא
   משפט אחד על עצם קיום השעון. «?» שאינו מוביל לתוכן גרוע ממידע חסר.
   נפתחה שאלה למוטי: q.cart.timer_needs_explanation. */

/* ── 2. מצב הסל-שפג «אופסס» (חוק 14) ───────────────────────────────────────
   מחליף את תוכן-הסל. הטקסט מצוטט מהאפיון; המספר דינמי. */
.cart-expired{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--space-md,12px);
  padding:var(--space-2xl,32px) var(--space-xl,24px);
  font-family:'Google Sans','Rubik',sans-serif;
  color:var(--tl-color-text-inverse-default,#000);
}
/* 🔴 אותו איור של הסל-הריק, ולא אימוג'י (אסף 03/08). היה כאן ⏳ בעיגול-אזהרה
   — חריג יחיד בשפה: שני מצבי-הסל האחרים (ריק, אישור-ריקון) הם איורים.
   ואותו איור **גם נכון תוכנית**: סל שפג הוא סל שהתרוקן, רק לא ביוזמת הרוכש.
   המידות זהות ל-`.c-empty__img` (cart-popover.css) — אותו מקום על המסך. */
.cart-expired__img{
  width:211px;height:176px;object-fit:contain;flex-shrink:0;
}
.cart-expired__title{
  font-size:var(--font-size-heading-popup,22px);
  font-weight:var(--font-weight-bold,700);
  line-height:1.25;
}
/* 🔴 שחור ולא אפור-40% (אסף 03/08: «חשוב בגלל נגישות»). זו אינה הערת-שוליים
   אלא ההסבר למה הסל התרוקן — טקסט ב-40% על לבן נופל מתחת ליחס-הניגודיות
   הנדרש, ודווקא כאן הרוכש צריך להבין מה קרה. אותו תיקון נעשה בפיגמה בשלושת
   הפופים, ששם השורות האלה ישבו על 30%. */
.cart-expired__sub{
  font-size:var(--font-size-body-small,14px);
  line-height:var(--line-height-body,20px);
  color:var(--tl-color-text-inverse-default,#000);
  max-width:34ch;
}
/* «נותרו 4 פריטים שניתנים להוספה מחדש» — המספר הוא הלב, ולכן בולט */
.cart-expired__count{
  font-size:var(--font-size-body,16px);
  font-weight:var(--font-weight-semibold,600);
}
.cart-expired__count b{font-weight:var(--font-weight-bold,700);}

/* ── 3. פריט אחרי רכישה — מנוטרל עם «החזר לסל» (חוק 15) ────────────────────
   הפריט **נשאר לעיניים** אבל אינו פעיל: אין מחיקה, אין כמות. */
.cart-card__item.is-purchased{
  opacity:.55;
}
.cart-card__item.is-purchased .cart-card__item-delete,
.cart-card__item.is-purchased .cart-card__item-qty{display:none;}
.cart-card__item-restore{
  display:inline-flex;align-items:center;gap:var(--space-xs,4px);
  padding:var(--space-2xs,2px) var(--space-md,12px);
  border-radius:var(--border-radius-full,999px);
  border:1px solid var(--tl-color-border-inverse-default,#000);
  background:transparent;
  color:var(--tl-color-text-inverse-default,#000);
  font-family:'Google Sans','Rubik',sans-serif;
  font-size:var(--font-size-caption,12px);
  font-weight:var(--font-weight-semibold,600);
  line-height:20px;
  cursor:pointer;flex-shrink:0;
  opacity:1;                       /* הכפתור **פעיל** גם כשהשורה עמומה */
}
.cart-card__item.is-purchased .cart-card__item-restore{opacity:1;}
.cart-card__item-restore:hover{background:var(--tl-color-bg-surface-inv,rgba(0,0,0,.05));}

/* ══ «רוקן סל» — הכפתור שבראש הסל ══════════════════════════════════════ */
/* סל ריק ⇒ אין מה לרוקן. הכלל ישב רק בדף-מרכז — עבר לרכיב (21/08) */
.cart-empty-btn.is-hidden{display:none;}
.cart-empty-btn{
  display:inline-flex;align-items:center;gap:var(--space-xs,4px);
  margin-inline-start:auto;
  padding:var(--space-xs,4px) var(--space-md,12px);
  border-radius:var(--border-radius-full,999px);
  border:none;background:transparent;cursor:pointer;
  /* 🔴 שחור ולא 40% (אסף 03/08, נגישות). זהו **פקד לחיץ**, ופקד ב-40% על לבן
     נופל מתחת ליחס-הניגודיות — ובפיגמה הוא ממילא כבר נקשר לטוקן-הטקסט השחור,
     כך שזה גם מיישר את השניים. */
  color:var(--tl-color-text-inverse-default,#000);
  font-family:'Google Sans','Rubik',sans-serif;
  font-size:var(--font-size-body-small,14px);
  font-weight:var(--font-weight-medium,500);
  line-height:20px;flex-shrink:0;
  transition:background .2s,color .2s;
}
.cart-empty-btn svg{width:18px;height:18px;flex-shrink:0;}
.cart-empty-btn:hover{
  background:var(--tl-color-bg-surface-inv,rgba(0,0,0,.05));
  color:var(--tl-color-text-inverse-default,#000);
}
.cp-hdr__title{display:flex;align-items:center;gap:var(--space-md,12px);}

/* ══ אישור-הריקון ══════════════════════════════════════════════════════ */
#cartEmptyOverlay{
  position:fixed;inset:0;z-index:1300;      /* מעל הסל — נפתח מתוכו */
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
#cartEmptyOverlay.is-open{opacity:1;pointer-events:auto;}
#cartEmptyOverlay .ce-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);}
#cartEmptyOverlay .ce-wrap{
  position:relative;z-index:1;width:100%;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
}
#cartEmptyOverlay.is-open .ce-wrap{transform:translateY(0);}
#cartEmptyOverlay .minipopup{width:100%;height:auto;border-radius:var(--r-2xl,24px) var(--r-2xl,24px) 0 0;}
/* 🔴 האיור **חצי מעל הגיליון** ולא בתוכו (אסף 03/08). לכן הגיליון חייב
   `overflow:visible` — אחרת החצי העליון נחתך — והריפוד העליון פינה מקום
   לחצי שבולט החוצה. אין פס-גרירה: האיור הבולט הוא כבר הסימן. */
#cartEmptyOverlay .ce-sheet{overflow:visible;}
#cartEmptyOverlay .mp-slot{flex:0 0 auto;padding:var(--space-md,12px) var(--space-xl,24px) var(--space-xl,24px);overflow:visible;}
#cartEmptyOverlay .ce-copy{display:flex;flex-direction:column;gap:var(--space-sm,8px);align-items:center;text-align:center;}
#cartEmptyOverlay .ce-illus{
  width:150px;height:150px;object-fit:contain;
  margin-top:-75px;                       /* חצי מגובה האיור — בדיוק חצי בחוץ */
  margin-bottom:var(--space-xs,4px);
}
#cartEmptyOverlay .ce-title{
  font-family:'Google Sans','Rubik',sans-serif;font-size:var(--font-size-heading-popup,22px);
  font-weight:var(--font-weight-bold,700);color:var(--tl-color-text-inverse-default,#000);
}
/* שחור ולא אפור: זו לא הערת-שוליים — זו השאלה עצמה, והמספר שבתוכה הוא
   מה שהרוכש עומד לאבד. */
#cartEmptyOverlay .ce-sub{
  font-family:'Google Sans','Rubik',sans-serif;font-size:var(--font-size-body,16px);
  line-height:var(--line-height-body,20px);
  color:var(--tl-color-text-inverse-default,#000);max-width:34ch;
}
#cartEmptyOverlay .mp-footer{flex-direction:column;gap:var(--space-sm,8px);align-items:stretch;}
#cartEmptyOverlay .mp-footer .btn{flex:0 0 auto;width:100%;justify-content:center;}
@media(min-width:1024px){
  #cartEmptyOverlay{align-items:center;}
  #cartEmptyOverlay .ce-wrap{max-width:420px;transform:scale(.94);opacity:0;
    transition:transform .28s cubic-bezier(.34,1.4,.5,1),opacity .18s;}
  #cartEmptyOverlay.is-open .ce-wrap{transform:none;opacity:1;}
  #cartEmptyOverlay .minipopup{border-radius:var(--r-2xl,24px);}
  #cartEmptyOverlay .mp-handle{display:none;}
}

/* ══ מצב-הסל-הריק — מה שנעלם ═══════════════════════════════════════════
   נאכף מהמחלקה ולא מפקודות: הקוד שמנהל את הסרגל התחתון מחזיר אותו
   למצב-תשלום בכל פתיחת סל, ודרס כל כיבוי חד-פעמי. */
/* 🔴 «פג» נספח לכאן ב-03/08, ולא קיבל רשימה משלו. שני המצבים אומרים אותו
   דבר לממשק — **אין סל לשלם עליו** — ולכן אותו סט-היעלמויות. שעון שממשיך
   לרוץ מעל «אופסס, חלף הזמן» הוא סתירה על המסך. */
#cartPop.is-cart-empty .cp-actionbar,
#cartPop.is-cart-empty .cart-empty-btn,
#cartPop.is-cart-empty .cart-clock,
#cartPop.is-cart-expired .cp-actionbar,
#cartPop.is-cart-expired .cart-empty-btn,
#cartPop.is-cart-expired .cart-clock{display:none !important;}
#cartPop.is-cart-empty .cp-body::after,
#cartPop.is-cart-expired .cp-body::after{display:none;}  /* אין פיד — אין מה לגלול */
#cartPop.is-cart-empty .c-scroll.is-empty{justify-content:center;}
body.cart-is-empty .mobile-bar__cta,
body.cart-is-empty .mobile-bar__count,
body.cart-is-expired .mobile-bar__cta,
body.cart-is-expired .mobile-bar__count{display:none !important;}
body.cart-is-expired:has(#cartPop.is-open) #formActionbar{display:none !important;}
/* הכפתור נושא את כל רוחב-הגיליון — הוא הפעולה היחידה על המסך הזה */
.cart-expired__cta{width:100%;justify-content:center;margin-top:var(--space-sm,8px);}
/* בטפסי-הרכישה כפתור-התשלום הוא **סרגל-הפעולה של הטופס** ולא זה של הסל.
   🔴 מוסתר **רק כשהסל פתוח**: בטופס הסרגל נושא גם «המשך» ו«בחר מנוי»,
   ומי שסוגר סל ריק היה נשאר בלי סרגל בכלל — כלומר בלי דרך להתקדם
   (אסף 02/08). התנאי הוא «סל פתוח **וגם** ריק», לא «ריק». */
body.cart-is-empty:has(#cartPop.is-open) #formActionbar{display:none !important;}
/* ה-X יורד לתחתית-המסך. הוא נצמד בדרך-כלל מתחת לסל, ובסל הריק — שהוא
   קצר — הוא נחת באמצע, מחוץ להישג-אגודל. חל בשלושת הדפים. (אסף 02/08.) */
/* 🔴 «פג» נספח כאן ב-03/08, כמו בכלל שלמעלה — והפעם אחרי מדידה: בסל-שפג
   נמדד ה-X ב-y=586 בעוד הסל נגמר ב-y=438, כלומר 148px מתחת לו, באמצע הדף.
   זה אותו מקרה בדיוק שהכלל נכתב בשבילו — סל קצר — והוא פשוט לא נספח אז. */
/* 21/08: מוגבל למובייל — בנייח הסל הוא מגירה וה-X יושב קבוע בפינה העליונה
   (cart-popover.css, פיגמה 2412:90645); הצמדת-האגודל אינה רלוונטית שם. */
@media(max-width:1023px){
  body.cart-is-empty .cp-float-x,
  body.cart-is-expired .cp-float-x{
    top:auto !important;
    bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  }
}