/* ==========================================================================
   Action Bar — Tickchak Design System
   Floating bottom bar with back + CTA, optional cart badge overlay
   Button System: CTA size (44px), Brand variant, pill radius
   Required: tokens.css
   Usage: <div class="actionbar live"> ... </div>
   ========================================================================== */

/* Liquid Glass — matches Figma Glass effect parameters:
   Refraction 100 · Depth 24 · Dispersion 100 · Frost 4 · Splay 67 · Light 0°/80% */
.actionbar{
  /* Glass tunables — overridable via inline style or demo controls */
  --glass-frost:4px;
  --glass-tint:rgba(255,255,255,0.25);
  --glass-border:rgba(255,255,255,0.38);
  --glass-highlight:rgba(255,255,255,0);
  --glass-splay:0px;
  --glass-depth:rgba(0,0,0,0);
  --glass-outer:rgba(0,0,0,0.08);

  position:relative;
  background:transparent;
  border-radius:var(--border-radius-full);
  padding:var(--space-lg);
  box-shadow:
    0 10px 40px var(--glass-outer),
    0 2px 8px rgba(0,0,0,0.06);
  width:100%;
  isolation:isolate;
  overflow:hidden;
}
/* Layer 1: Frost — backdrop blur */
.actionbar::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  backdrop-filter:blur(var(--glass-frost));
  -webkit-backdrop-filter:blur(var(--glass-frost));
  z-index:0;
}
/* Refraction layer — captures background via backdrop-filter:blur(0) and distorts it.
   Separate element avoids Safari bug with filter+backdrop-filter on same pseudo. */
.actionbar__refraction{
  position:absolute;inset:0;
  border-radius:inherit;
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
  filter:url(#glass-distortion);
  z-index:-1;
  pointer-events:none;
}
/* Layer 2: Depth + Light + Splay — inset shadows for glass thickness and top highlight */
.actionbar::after{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background:var(--glass-tint);
  box-shadow:
    inset 0 2px 2px 0 var(--glass-highlight),
    inset 0 0 var(--glass-splay) 0 rgba(255,255,255,0.3),
    inset 0 -2px 6px 0 var(--glass-depth),
    inset 0 0 0 1px var(--glass-border);
  z-index:1;
  pointer-events:none;
}
/* Content floats above */
.actionbar > *{position:relative;z-index:2;}
.actionbar__inner{
  display:flex;
  gap:var(--space-md);
  align-items:center;
}

/* === Back button — CTA size, Primary (surface) variant === */
.actionbar__back{
  height:var(--dim-11);                 /* 44px — CTA size */
  background:
    linear-gradient(var(--ta-color-bg-surface),var(--ta-color-bg-surface)),
    #fff;
  color:var(--ta-color-text-default);
  border:none;
  border-radius:100px;
  padding:0 var(--space-lg);
  display:flex;align-items:center;
  gap:var(--space-sm);
  cursor:pointer;
  font-size:var(--font-size-button-primary); /* 16px */
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-button-primary);
  white-space:nowrap;
  transition:background .2s;
}
.actionbar__back:hover{background:linear-gradient(var(--ta-color-bg-surface-hover),var(--ta-color-bg-surface-hover)),#fff;}
.actionbar__back img,
.actionbar__back svg{
  width:var(--dim-5);height:var(--dim-5);
  display:block;flex-shrink:0;
}

/* Back button — icon-only variant (square, no text) */
.actionbar__back.icon-only{
  width:var(--dim-11);
  padding:0;
  justify-content:center;
}
.actionbar__back.icon-only .label{display:none;}

/* === CTA — Brand variant, flex:1 (Figma: pad 0/8, gap 4) === */
.actionbar__cta{
  position:relative;
  flex:1;
  height:var(--dim-11);                 /* 44px */
  border:none;
  border-radius:100px;
  padding:0 var(--space-sm);            /* 8px — Figma spec */
  display:flex;align-items:center;
  justify-content:center;
  gap:var(--space-xs);                  /* 4px — Figma spec */
  cursor:pointer;
  font-size:var(--font-size-button-primary);
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-button-primary);
  color:var(--ta-color-text-default);
  white-space:nowrap;
  transition:background .2s;
}
.actionbar__cta img,
.actionbar__cta svg{
  width:var(--dim-5);height:var(--dim-5);
  display:block;flex-shrink:0;
}

/* === Font per theme — Live=Rubik, App=Assistant === */
.actionbar.live,
.actionbar.live button{font-family:var(--font-family-live);}
.actionbar.app,
.actionbar.app  button{font-family:var(--font-family-app);}

/* === CTA themes — Brand fills === */
.actionbar.live .actionbar__cta{background:linear-gradient(var(--tl-color-brand-main),var(--tl-color-brand-main)),#fff;}
.actionbar.live .actionbar__cta:hover:not(:disabled){background:linear-gradient(var(--tl-color-brand-hover),var(--tl-color-brand-hover)),#fff;}
.actionbar.app  .actionbar__cta{background:linear-gradient(var(--ta-color-brand-main),var(--ta-color-brand-main)),#fff;}
.actionbar.app  .actionbar__cta:hover:not(:disabled){background:linear-gradient(var(--ta-color-brand-hover),var(--ta-color-brand-hover)),#fff;}

/* === CTA disabled — משפחת disabled-Brand: אפורים בכוונה (פיגמה Purchase-Components 154:2501,
   הכרעת אסף 26/08). לא slate — brand/disabled=Grays/200 · text/disabled-brand=Grays/400 === */
.actionbar__cta:disabled{
  background:linear-gradient(var(--ta-color-brand-disabled),var(--ta-color-brand-disabled)),#fff!important;
  color:var(--ta-color-text-disabled-brand);
  cursor:default;
}
/* Dim only direct content (arrow), not the badge's icons */
.actionbar__cta:disabled > img,
.actionbar__cta:disabled > svg{opacity:0.35;}

/* === When CTA holds a badge — align text+arrow to end (left in RTL) === */
.actionbar__cta.has-badge{
  justify-content:flex-end;
  padding-right:calc(var(--space-sm) + 90px);
}

/* === Cart badge — inside CTA, right (start) edge, dark pill === */
/* Always Rubik (nominal number), regardless of parent actionbar theme */
.actionbar__cta .actionbar__badge{
  position:absolute;
  top:50%;right:var(--space-sm);
  transform:translateY(-50%);
  height:var(--dim-8);                      /* 32 — נמדד מהפיגמה (Frame 22160), אסף 20/07 */
  background:var(--color-slate-900);        /* הכרעת אסף 26/08: הגלולה slate-900, לא שחור — «זה היה טוב ומעניין» */
  color:var(--ta-color-text-inverse);       /* slate-50 — הזוג של slate-900 */
  border-radius:var(--border-radius-full);
  padding:0 var(--space-md);
  display:flex;align-items:center;
  gap:var(--space-sm);
  font-family:var(--font-family-live);      /* Rubik — nominal numbers */
  font-size:var(--font-size-caption);       /* 12px */
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);
  white-space:nowrap;
  pointer-events:none;
  z-index:2;
}
.actionbar__cta .actionbar__badge img,
.actionbar__cta .actionbar__badge svg{
  width:14px;height:14px;
  display:block;
  filter:brightness(0) invert(1);           /* icons originally dark → flip to white */
}

/* === וריאנט «מונה-כרטיסים» — Figma ActionBar (הבאדג': node 7106-13763), מוטי 2026-07-20 ===
   במקום אייקון-עגלה + «X ש״ח»: מחיר עם ₪ משמאל, ולידו אייקון-כרטיס לבן שהספרה
   יושבת בתוכו בשחור. תוכן מספרי בלבד → הבאדג' ב-LTR, מחיר משמאל וכרטיס מימין כמו בפיגמה.
   כל הגדלים נמדדו מהפיגמה ומוצמדים לטוקנים. */
.actionbar__cta .actionbar__badge--tickets{
  direction:ltr;
  padding:var(--space-xs) var(--space-md);  /* 4/12 — הגובה נשאר 28 (dim-7) */
}
/* המחיר — ₪ קטן (12/16) והמספר גדול (16/20), צמודים בלי רווח (Frame 22155, gap 0) */
.actionbar__cta .actionbar__badge .ab-price{
  display:flex;align-items:center;gap:0;
}
.actionbar__cta .actionbar__badge .ab-price__cur{
  font-size:var(--font-size-caption);       /* 12 */
  line-height:var(--dim-4);                 /* 16 */
  font-weight:var(--font-weight-regular);
}
.actionbar__cta .actionbar__badge .ab-price__val{
  font-size:var(--font-size-body);          /* 16 */
  line-height:var(--dim-5);                 /* 20 */
  font-weight:var(--font-weight-regular);
  --num-h:var(--dim-5);                     /* גובה ספרה לגלגול */
}
/* אייקון-הכרטיס — 24 × 18.1 בפיגמה (Frame 23082) לספרה אחת, **ומתרחב לפי הספרות**:
   הספרה יושבת בזרימה וקובעת את הרוחב, והצורה נמתחת מאחוריה (preserveAspectRatio="none").
   כך «7» · «12» · «135» מקבלים כרטיס שגדל איתם, בלי לחתוך ובלי אוויר מיותר (אסף 20/07). */
.actionbar__cta .actionbar__badge .ab-tickets{
  position:relative;
  min-width:24px;                           /* מידת-הפיגמה — הרצפה, לספרה אחת */
  height:18.1px;flex:none;
  padding-inline:var(--space-sm);           /* 8 מכל צד — האוויר סביב הספרה */
  box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
}
.actionbar__cta .actionbar__badge .ab-tickets svg{
  position:absolute;inset:0;
  width:100%;height:100%;                   /* נמתח לרוחב שהספרות קבעו */
  filter:none;                              /* הווקטור כבר לבן — בלי היפוך */
}
.actionbar__cta .actionbar__badge .ab-tickets__count{
  position:relative;                        /* בזרימה — הוא שקובע את רוחב הכרטיס */
  display:flex;align-items:center;justify-content:center;
  font-size:var(--font-size-body-small);    /* 14 */
  font-weight:var(--font-weight-medium);    /* Medium 500 */
  line-height:var(--dim-4);                 /* 16 */
  color:var(--tl-color-text-inverse-default); /* שחור — על גבי הכרטיס הלבן */
  --num-h:var(--dim-4);                     /* גובה ספרה לגלגול */
}

/* === גלגול-ספרות (אודומטר) — אסף 2026-07-20 ===
   כל ספרה היא סרט אנכי 0-9 שמחליק למקומה, כמו מונה-קילומטרים.
   הגובה נקבע מבחוץ ב---num-h כדי שיתאים לגובה-השורה של אותו טקסט. */
/* tabular-nums — לכל הספרות אותו רוחב, כך שהכרטיס לא "רועד" בין 1 ל-8 בזמן הגלגול */
.num{display:inline-flex;direction:ltr;vertical-align:bottom;font-variant-numeric:tabular-nums;}
.num__d{display:block;overflow:hidden;height:var(--num-h,1em);}
.num__strip{
  display:flex;flex-direction:column;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.num__strip > span{display:block;height:var(--num-h,1em);text-align:center;}
/* ספרה שנוספה (9 → 10) נכנסת ברכות במקום לקפוץ */
@keyframes num-digit-in{
  from{opacity:0;transform:translateY(35%) scale(.6);}
  to  {opacity:1;transform:translateY(0)   scale(1);}
}
.num__d.is-new{animation:num-digit-in .35s cubic-bezier(.22,1,.36,1);}

/* === אנימציית-הוספה (אסף 2026-07-20) ===
   הוספת כמות: הכרטיס קופץ ומתיישב, הספרה החדשה עולה מלמטה, וטבעת בצבע-המותג
   נפתחת מהבאדג' והולכת. הורדת כמות: שקיעה קצרה בלבד — בלי חגיגה. */
@keyframes ab-ticket-bump{
  0%  {transform:scale(1)    rotate(0);}
  35% {transform:scale(1.28) rotate(-7deg);}
  62% {transform:scale(.94)  rotate(3deg);}
  100%{transform:scale(1)    rotate(0);}
}
@keyframes ab-ticket-dip{
  0%  {transform:scale(1);}
  45% {transform:scale(.86);}
  100%{transform:scale(1);}
}
@keyframes ab-count-in{
  0%  {opacity:0;transform:translateY(7px) scale(.7);}
  55% {opacity:1;transform:translateY(-1px) scale(1.06);}
  100%{opacity:1;transform:translateY(0)   scale(1);}
}
@keyframes ab-badge-ring{
  0%  {box-shadow:0 0 0 0 var(--tl-color-brand-main);}
  100%{box-shadow:0 0 0 10px rgba(255,204,0,0);}
}
.actionbar__cta .actionbar__badge .ab-tickets.is-bump{
  animation:ab-ticket-bump .42s cubic-bezier(.34,1.56,.64,1);
}
.actionbar__cta .actionbar__badge .ab-tickets.is-bump .ab-tickets__count{
  animation:ab-count-in .34s cubic-bezier(.34,1.56,.64,1);
}
.actionbar__cta .actionbar__badge .ab-tickets.is-dip{
  animation:ab-ticket-dip .26s ease;
}
.actionbar__cta .actionbar__badge.is-bump{
  animation:ab-badge-ring .5s ease-out;
}
/* נגישות — מי שביקש פחות תנועה מקבל את העדכון בלי אנימציה */
@media (prefers-reduced-motion:reduce){
  .actionbar__cta .actionbar__badge .ab-tickets.is-bump,
  .actionbar__cta .actionbar__badge .ab-tickets.is-dip,
  .actionbar__cta .actionbar__badge .ab-tickets.is-bump .ab-tickets__count,
  .actionbar__cta .actionbar__badge.is-bump{animation:none;}
}

/* === CTA only (no back) — fills full row === */
.actionbar.no-back .actionbar__cta{flex:1 1 100%;}
/* ⚡ ניסוי-ביצועים (אסף 18/08 «הדף איטי, גם בענן»): שכבת-השבירה משתמשת בפילטר-SVG
   (feTurbulence+feDisplacementMap) על backdrop — מחושב מחדש בכל פריים של גלילה מתחת לסרגל.
   כבוי זמנית; הטשטוש (::before) והגוון (::after) נשארים. אם ההבדל מורגש — נשאיר כבוי או נחליף בזול יותר. */
.actionbar__refraction{display:none;}