/* ==========================================================================
   Cart Floating Timer — Tickchak Design System
   ---------------------------------------------------------------------------
   השעון הצף של סל-הקניות (br.cart.floating_timer, חוק 20).

   הצורה: **פס-התקדמות מתמעט סביב כפתור-הסל** + **טולטיפ צף** שמוצג תמיד
   (בנייד ובנייח, בלי ריחוף), וכל תוכנו הזמן הנותר בדקות:שניות.
   מקור: הצעת מוטי 2026-07-30 · אושרה ע"י אסף 2026-08-02.

   למה הוא נצמד לכפתור-הסל ולא צף בפני עצמו: הלחיצה עליו פותחת את הסל
   (חוק 20 §4), ולכן הוא יושב על הפעולה עצמה — ובמובייל הוא לא מתחרה על
   מקום עם סרגל-הסל התחתון, שכבר צף בתחתית ומוביל ל«לתשלום».

   Required: tokens.css
   Usage:
     <span class="cart-timer" data-cart-timer>
       <button class="form-icon-btn">…</button>
     </span>
     (הטבעת והטולטיפ מוזרקים ע"י cart-timer.js)
   ========================================================================== */

.cart-timer{
  position:relative;
  display:inline-flex;
  flex-shrink:0;
}

/* ── הטבעת ─────────────────────────────────────────────────────────────────
   בתוך שטח הכפתור 44×44 — הכרעת מוטי 04/08 (חוק 20 §7): בחוץ היא יצרה
   עומס והתנגשה עם הכפתורים השכנים בתפריט. pointer-events:none כדי
   שכל שטח-הלחיצה יישאר של הכפתור עצמו (44×44, לא נגרע). */
.cart-timer__ring{
  position:absolute;
  top:50%;left:50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  overflow:visible;
}
.cart-timer__ring circle{
  fill:none;
  stroke-width:3;                      /* עלה מ-2.5 יחד עם הגדלת הגלולה */
  stroke-linecap:round;
  /* מתחיל למעלה, ומתמעט נגד כיוון-השעון — כיוון-הקריאה בעברית */
  transform:rotate(-90deg) scaleX(-1);
  transform-origin:50% 50%;
}
.cart-timer__track{
  /* כהה יותר מקודם: החוגה הריקה היא חצי מהמסר — היא זו שאומרת
     «יש כאן סקאלה», ולכן אסור לה להיעלם. */
  stroke:var(--tl-color-border-inverse-subtle,rgba(0,0,0,0.1));
  stroke-width:3;
}
.cart-timer__arc{
  stroke:var(--tl-color-border-inverse-default,#000);
  transition:stroke-dasharray .95s linear, stroke .3s;
}
/* ── דריכה ────────────────────────────────────────────────────────────────
   הקשת **והמספר** עולים יחד מאפס, ב-JS פריים-אחר-פריים. לכן כאן מכבים
   את מעברי-ה-CSS: שתי הנפשות על אותה תכונה היו נאבקות, והקשת הייתה
   מפגרת אחרי המספר — בדיוק מה שאמור להיראות כתנועה אחת. */
.cart-timer.is-intro .cart-timer__arc{
  transition:none;
}

/* ── מונה-הפריטים ───────────────────────────────────────────────────────────
   ⚠️ באפיון מספר-הפריטים מופיע בשני מקומות בלבד (br.cart.content §2):
   כפתור-ההתקדמות וכפתור «לתשלום». המונה כאן הוא **מקום שלישי** — הרחבה
   שממתינה לאישור מוטי. (אסף 02/08.)

   פינה עליונה-שמאלית: שם הטבעת שלמה (החלל והקצה שלה בתחתית), אז המונה
   לא יושב על הקצה הנע. */
.cart-timer__count{
  position:absolute;
  top:-7px; left:-7px;
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius:var(--border-radius-full,999px);
  /* צהוב-מותג — הכרעת אסף 07/08: מונה סופר ולא מתריע, והבולטוּת חשובה.
     אותו צמד-טוקנים כמו כפתור «לתשלום». (החליף את האדום מ-02/08 ואת
     «שחור» של מוטי מ-04/08 — dec.cart.count_badge_yellow.) */
  background:var(--tl-color-brand-main,#fc0);
  color:var(--tl-color-text-inverse-default,#000);
  font-family:'Google Sans','Rubik',sans-serif;
  font-size:11px;
  line-height:18px;
  font-weight:var(--font-weight-semibold,600);
  font-variant-numeric:tabular-nums;
  text-align:center;
  direction:ltr;
  pointer-events:none;
  box-sizing:border-box;
  /* טבעת-הפרדה בצבע המשטח — אחרת המונה נבלע בקו-הטבעת שעובר מתחתיו */
  box-shadow:0 0 0 2px var(--tl-color-bg-baseAlt,#fff);
}
.cart-timer--inverse .cart-timer__count{
  box-shadow:0 0 0 2px var(--tl-color-bg-base,#000);
}
/* אין סל → אין מה למנות */
.cart-timer.is-idle .cart-timer__count{display:none;}

/* ── בלי הגלולה — data-cart-timer="no-tip" ─────────────────────────────────
   דף-מרכז: השעון-הצף הוסר משם ונשאר מוסר (חוק 20 §2, אושר 02/08) —
   אבל הקו שבתוך הכפתור כן חל (חוק 20 §7). האופציה מפרידה בין השניים. */
.cart-timer--no-tip .cart-timer__tip{display:none;}

/* ── הטולטיפ הצף ───────────────────────────────────────────────────────────
   מוצג תמיד — אין ריחוף במגע (חידוד מוטי 30/07). תוכנו הזמן בלבד,
   ולכן הוא קטן דיו כדי להישאר על המסך בלי להסתיר תוכן. */
.cart-timer__tip{
  position:absolute;
  top:calc(100% + 7px);
  left:50%;
  transform:translateX(-50%);
  /* הוגדל 02/08 לבקשת מוטי — היה caption/12 עם ריפוד 2×8 */
  padding:var(--space-xs,4px) var(--space-md,12px);
  border-radius:var(--border-radius-full,999px);
  background:var(--color-slate-900);   /* הכרעת אסף 26/08: גלולת-השעון slate-900 כמו גלולת-המחיר, לא שחור */
  color:var(--tl-color-text-default,#fff);
  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);
  /* ספרות ברוחב קבוע — אחרת הפעמון "רוקד" בכל שנייה */
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  direction:ltr;                       /* 14:32 — לא נהפך ב-RTL */
  white-space:nowrap;
  pointer-events:none;
  transition:background .3s, color .3s;
  display:flex;align-items:center;gap:var(--space-xs,4px);
}

/* אייקון-ההשהיה — רק במצב «עצור בסליקה» (חוק 20 §6) */
.cart-timer__pause{
  display:none;
  width:8px;height:10px;
  flex-shrink:0;
  fill:currentColor;
}
.cart-timer.is-paused .cart-timer__pause{display:block;}

/* רוחב-קבוע למספר: בדריכה הוא עולה מ-«0:00» ל-«15:00», ובספירה יורד
   בחזרה ל-4 תווים. בלי זה הגלולה מתרחבת ומתכווצת בכל מעבר. */
.cart-timer__time{
  min-width:5ch;
  text-align:center;
}
/* הזנב כלפי הכפתור */
.cart-timer__tip::before{
  content:'';
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-bottom-color:var(--color-slate-900);   /* הזנב באותו slate-900 של הגלולה */
  transition:border-bottom-color .3s;
}

/* ── משטח כהה ──────────────────────────────────────────────────────────────
   אותו רכיב על הקשר inverse — הטבעת לבנה, והגלולה מתהפכת ללבן-על-שחור. */
.cart-timer--inverse .cart-timer__track{
  stroke:var(--tl-color-border-subtle,rgba(255,255,255,0.2));
}
.cart-timer--inverse .cart-timer__arc{
  stroke:var(--tl-color-border-default,#fff);
}
.cart-timer--inverse .cart-timer__tip{
  background:var(--tl-color-bg-baseAlt,#fff);
  color:var(--tl-color-text-inverse-default,#000);
}
.cart-timer--inverse .cart-timer__tip::before{
  border-bottom-color:var(--tl-color-bg-baseAlt,#fff);
}

/* ── מצב «שתי הדקות האחרונות» ──────────────────────────────────────────────
   נצבע בצבע-האזהרה של המערכת — אותו צבע שבו קופץ פופאפ ההארכה
   (br.cart.expiry_extension), כדי שהמעבר בין השניים יקרא כרצף אחד. */
.cart-timer.is-warning .cart-timer__arc{
  stroke:var(--tl-color-state-warning-main,#f28c00);
}
.cart-timer.is-warning .cart-timer__tip{
  background:var(--tl-color-state-warning-main,#f28c00);
  color:var(--tl-color-state-warning-text,#fff);
}
.cart-timer.is-warning .cart-timer__tip::before{
  border-bottom-color:var(--tl-color-state-warning-main,#f28c00);
}

/* ── מצב «סל שפג» ──────────────────────────────────────────────────────────
   חוק 14 §4 + הכרעות אסף 07/08 (תואם ל-state=expired בפיגמה,
   Purchase-Components 1-1926): טבעת **שלמה** וגלולה באותו אפור-מנוטרל —
   טבעת חלקית הייתה נקראת כ«שארית זמן». המונה נשאר. בגלולה «חלף הזמן» —
   אותן מילים כמו מסך-«אופסס», שפה אחת. הטקסט נקבע ב-cart-timer.js. */
.cart-timer.is-expired .cart-timer__arc{
  stroke:var(--tl-color-icon-disabled,#b1b1b1);
  stroke-dasharray:none;               /* מבטל את קטע-הזמן שה-JS מצייר — עיגול שלם */
}
.cart-timer.is-expired .cart-timer__tip{
  background:var(--tl-color-icon-disabled,#b1b1b1);
  color:var(--tl-color-text-inverse-default,#000);
}
.cart-timer.is-expired .cart-timer__tip::before{
  border-bottom-color:var(--tl-color-icon-disabled,#b1b1b1);
}
.cart-timer.is-expired .cart-timer__time{
  min-width:0;                         /* מילים, לא ספרות — בלי רוחב-השעון הקבוע */
}

/* ── מצב «עצור בסליקה» ─────────────────────────────────────────────────────
   חוק 20 §6: השעון קופא ומהבהב עד לסיום התשלום. ההבהוב אינו קישוט —
   שעון שפשוט קופא נראה תקוע, וההבהוב אומר «עצרתי בכוונה, אני כאן». */
.cart-timer.is-paused .cart-timer__ring,
.cart-timer.is-paused .cart-timer__tip{
  animation:cart-timer-blink 1.1s ease-in-out infinite;
}
.cart-timer.is-paused .cart-timer__arc{
  transition:none;                     /* קפוא — בלי הזזה רכה של המחוג */
}
@keyframes cart-timer-blink{
  0%,100%{opacity:1;}
  50%{opacity:.35;}
}
@media(prefers-reduced-motion:reduce){
  .cart-timer.is-paused .cart-timer__ring,
  .cart-timer.is-paused .cart-timer__tip{
    animation:none;
    opacity:.6;                        /* חלופה סטטית — עדיין קורא כ«מושהה» */
  }
}

/* ── סל ריק / אין טיימר ────────────────────────────────────────────────────
   אין מה לספור — הכפתור חוזר להיות כפתור רגיל, בלי שריד של טבעת. */
.cart-timer.is-idle .cart-timer__ring{
  display:none;
}
/* הגלולה נכנסת ברכות ולא «קופצת» (אסף 18/08): במקום display:none —
   שקופה ומעט למעלה, ועם המעבר לפעיל מחליקה למקומה. */
.cart-timer__tip{
  transition:background .3s, color .3s, opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.cart-timer.is-idle .cart-timer__tip{
  opacity:0;
  transform:translateX(-50%) translateY(-6px);
  pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════════════════
   שעון-ההתראה הגדול — על פופאפ ההארכה (br.cart.expiry_extension, חוק 13)
   --------------------------------------------------------------------------
   «כשהפופ נפתח, השעון יהיה בגדול» (אסף 02/08).

   🔑 **הוא יושב על קו-הגיליון — חצי בחוץ וחצי בפנים, במקום פס-הגרירה**
   (אסף 02/08). פס-הגרירה יורד: השעון תופס את מקומו ואת תפקידו כסימן-האחיזה
   העליון, ובמקום עוד אלמנט קטן בראש הגיליון יש דבר אחד שאי-אפשר לפספס.

   זו **אותה טבעת** של כפתור-הסל, מוגדלת — לא רכיב חדש. הקו עבה יותר (10)
   כי בגודל הזה קו דק נקרא כקישוט; המספר בשחור ולא בכתום, כי הכתום נושא את
   הטון והמספר נושא את המידע — וטקסט כתום על לבן אינו קריא דיו.
   ══════════════════════════════════════════════════════════════════════════ */
.cart-expiry-clock{
  position:relative;
  width:120px;height:120px;
  flex-shrink:0;
  margin:-60px auto 0;                 /* חצי מעל קו-הגיליון */
  border-radius:50%;
  background:var(--tl-color-bg-baseAlt,#fff);   /* החצי החיצוני יושב על הרקע */
}
.cart-expiry-clock__ring{
  position:absolute;inset:0;
  width:120px;height:120px;
  overflow:visible;
}
.cart-expiry-clock__ring circle{
  fill:none;
  stroke-width:10;                     /* עבה — «וקו כתום יהיה עבה» */
  stroke-linecap:round;
  transform:rotate(-90deg) scaleX(-1); /* זהה לכפתור — מתחיל בתחתית, נגד השעון */
  transform-origin:50% 50%;
}
.cart-expiry-clock__track{
  stroke:var(--tl-color-border-inverse-subtle,rgba(0,0,0,0.1));
}
.cart-expiry-clock__arc{
  stroke:var(--tl-color-state-warning-main,#f28c00);
  transition:stroke-dasharray .95s linear;
}
.cart-expiry-clock__time{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Google Sans','Rubik',sans-serif;
  font-size:var(--font-size-text-metric-primary,32px);
  line-height:1;
  font-weight:var(--font-weight-bold,700);
  color:var(--tl-color-text-inverse-default,#000);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  direction:ltr;
}

/* ── באדג'-מונה ישן של הדף ─────────────────────────────────────────────────
   לפני הרכיב הזה, כל דף נשא מונה-פריטים משלו על אייקון-הסל. עכשיו המונה
   מגיע מהרכיב (`.cart-timer__count`), ושניהם יחד נראים כשני עיגולים אדומים
   זה על זה (אסף 02/08, ברכישת-כרטיסים).
   מוסתר ולא נמחק — קוד-הדף עדיין מעדכן אותו, ומחיקה הייתה שוברת אותו. */
.cart-timer .cart-badge,
.cart-timer .cart-badge.visible{ display:none !important; }