/* ==========================================================================
   Subscription Card — Tickchak Live (post-purchase, holder view)
   Figma: Qw3YeURNIL8V1wdGubxIWQ — node 9749:22618 (Subscription Card)
   Variants: pending | active | exhausted | redeeming | expired | canceled
     expired  (פג תוקף) → credits muted, progress gray, .sub-card__status-badge--expired  (Grays/600)
     canceled (מבוטלת)  → credits muted, progress gray, .sub-card__status-badge--canceled (Reds/600)
   Required: tokens.css, button.css, stickers/star-pattern.png

   Hero (top) has 3 stacked layers:
     1. solid accent color (--sub-card-accent, default brand brown)
     2. linear gradient L→R: rgba(0,0,0,.30) → rgba(0,0,0,1)
     3. star pattern PNG exported from Figma (tile ~20px)

   Bottom is white (--tl-color-bg-baseAlt), height fixed --dim-22 (88px).

   DOM order matches Figma (LTR). Cards are RTL → all flex rows use
   row-reverse so the visual order matches Figma exactly.
   ========================================================================== */

.sub-card{
  position:relative;
  display:flex;flex-direction:column;
  width:100%;                  /* fluid — fills its container */
  height:208px;                /* Figma exact — fixed across all variants */
  box-sizing:border-box;
  border-radius:var(--border-radius-lg);
  overflow:hidden;
  font-family:var(--font-family-live);
  box-shadow:0 4px 9px 1px rgba(0,0,0,.25);
  --sub-card-accent:#dd9868;   /* warm brown — overridable per sticker category */
}

/* ===== Hero (3-layer bg) — fills remaining space (208 - 88 bottom = 120) ===== */
.sub-card__hero{
  position:relative;
  flex:1;
  padding:var(--space-lg);
  background-color:var(--sub-card-accent);
  box-sizing:border-box;
  overflow:hidden;
}
.sub-card__hero::before,
.sub-card__hero::after{
  content:"";position:absolute;inset:0;
  pointer-events:none;
}
.sub-card__hero::before{
  background:linear-gradient(to right, rgba(0,0,0,.30) 0%, rgba(0,0,0,1) 100%);
  opacity:0.5;       /* Figma layer opacity */
}
.sub-card__hero::after{
  background-image:url("stickers/star-pattern.png");
  background-size:18px 18px;
  background-repeat:space;          /* maximizes gap between tiles */
  background-position:0 0;
  mix-blend-mode:color-burn;        /* fallback */
  mix-blend-mode:plus-darker;       /* Figma exact (Safari/modern) */
  opacity:.5;
}
.sub-card__hero > *{ position:relative; z-index:1; }

/* Top row: title-block (right visually) ↔ left-cluster (left visually) */
.sub-card__top-row{
  display:flex;
  flex-direction:row-reverse;        /* preserve Figma LTR visual in RTL HTML */
  justify-content:space-between;     /* Figma SPACE_BETWEEN — itemSpacing is min only */
  align-items:flex-start;
  width:100%;
}

/* Left cluster (kebab + sticker) */
.sub-card__left{
  display:flex;
  flex-direction:row-reverse;        /* Figma DOM: kebab, sticker → kebab leftmost */
  align-items:flex-start;
  gap:var(--space-sm);
  flex-shrink:0;
}
/* Shrink kebab button to icon size so visual gap = gap token (8) */
.sub-card__left .btn.icon-only.chip{
  width:16px;min-width:0;height:auto;
  background:transparent;
}
/* No hover state on kebab (used inside accent hero — hover bg looks out of place) */
.sub-card__left .btn.icon-only.chip:hover:not(.disabled){background:transparent !important;}

.sub-card__sticker{
  width:80px;height:80px;
  overflow:hidden;
  flex-shrink:0;
  display:block;
}
.sub-card__sticker img{
  width:100%;height:100%;object-fit:contain;display:block;
}
/* Image variant — user photo / event image fills the square */
.sub-card__sticker--image{
  border-radius:var(--border-radius-sm, 4px);
}
.sub-card__sticker--image img{
  object-fit:cover;
}

/* Right cluster (title + badges) — fluid, takes remaining width after sticker+kebab */
.sub-card__title-block{
  display:flex;flex-direction:column;
  align-items:flex-start;            /* RTL column: flex-start = right (per feedback_rtl_flex) */
  justify-content:space-between;     /* flexible gap — title top, badges bottom */
  flex:1 1 0;min-width:0;            /* fluid — wraps text within available space */
  align-self:stretch;
  gap:var(--space-md);               /* minimum gap when content tight */
  min-height:88px;                   /* Figma Frame 23067 exact (matches sticker+8) */
}

.sub-card__title{
  margin:0;width:100%;
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-bold);     /* always bold per Figma */
  font-size:var(--font-size-body);
  line-height:var(--dim-5);
  color:var(--tl-color-text-default);
  text-align:right;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.sub-card__badges{
  display:flex;
  flex-direction:row-reverse;        /* Figma: pending badge first, series badge last */
  align-items:flex-start;
  justify-content:flex-end;
  gap:var(--space-sm);
}

.sub-card__badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--dim-6);
  padding:0 var(--space-sm);
  border-radius:var(--border-radius-sm);   /* Figma 5 → token sm 4 */
  background:rgba(0,0,0,.30);              /* color/Black Alphas/black30 */
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-caption);
  line-height:var(--dim-4);
  color:var(--tl-color-text-default);
  white-space:nowrap;
  box-sizing:border-box;
}
.sub-card__badge--pending{
  border:1px solid var(--tl-color-state-error-border);
}
.sub-card__badge--series{
  border:1px solid var(--tl-color-border-default);
  gap:var(--space-xs);
  flex-direction:row-reverse;        /* pink dot on RIGHT side (visually) */
}
.sub-card__badge-dot{
  width:10px;height:10px;             /* Figma exact */
  border-radius:var(--border-radius-full);
  background:var(--color-pink-200);
  display:inline-block;
}

/* ===== Bottom (white section) — fixed height per Figma ===== */
.sub-card__bottom{
  background:var(--tl-color-bg-baseAlt);
  padding:var(--space-md) var(--space-lg);
  display:flex;flex-direction:column;
  justify-content:flex-end;            /* Figma pri:MAX */
  gap:var(--space-sm);
  height:88px;                          /* Figma exact — no --dim-22 token exists */
  flex-shrink:0;
  box-sizing:border-box;
}

/* מצב "אורח" (לא מחובר) — בלי קרדיטים/progress, הכרטיס מתכווץ כדי לא להשאיר לבן ריק */
.sub-card--guest{ height:auto; }
.sub-card--guest .sub-card__hero{ flex:0 0 120px; }      /* שומר על גובה ה-hero המקורי */
.sub-card--guest .sub-card__bottom{ height:auto; }        /* hug — רק הכפתורים + padding */

.sub-card__bottom-row{
  display:flex;
  flex-direction:row-reverse;          /* Figma DOM: button leftmost, credits rightmost */
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-xs);
}

.btn.sub-card__details-btn{                  /* extra specificity to beat .btn.chip bold */
  flex-shrink:0;
  font-weight:var(--font-weight-regular);   /* Figma: Rubik Regular, not DS chip Bold */
  font-size:var(--font-size-body-small);    /* Figma: 14, not DS chip 12 */
}

/* שני כפתורי הפעולה "לפני מימוש" — מימוש (brand) + לרכישה (neutral) (Figma 9749:22618 action=redeem) */
.sub-card__actions{
  display:flex;
  align-items:center;
  gap:var(--space-sm);    /* 8px בין הכפתורים */
  flex-shrink:0;
}
.btn.sub-card__action-btn{                   /* אותו 14/Regular כמו details, גובר על chip Bold */
  flex-shrink:0;
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body-small);
}

/* Credits readout (right visually) */
.sub-card__credits{
  display:flex;flex-direction:column;
  align-items:flex-start;            /* RTL column: flex-start = right (per feedback_rtl_flex) */
  gap:var(--space-xs);
  flex:1 0 0;min-width:0;
}
.sub-card__credits-row{
  display:flex;
  align-items:flex-end;justify-content:flex-end;
  gap:0;                                     /* Figma: denom + num glued together */
  line-height:.7;
  color:var(--tl-color-text-inverse-default);
  white-space:nowrap;
  /* dir="ltr" set on the element itself — keeps "10/5" bidi correct */
}
.sub-card__credits-num{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-semibold);
  font-size:28px;line-height:.7;       /* Figma exact — no matching font-size token */
}
.sub-card__credits-denom{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body-small);
  line-height:.7;
}
.sub-card__credits-check{
  width:var(--dim-5);height:var(--dim-5);
  border-radius:var(--border-radius-full);
  background:var(--tl-color-state-success-bg);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  margin-inline-start:var(--space-xs);     /* gap to the count group (Figma: 4) */
}
.sub-card__credits-check svg{display:block;}
.sub-card__credits-label{
  margin:0;
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-caption);
  line-height:1;
  color:var(--tl-color-text-inverse-default);
}

/* Progress bar — מיושר לקומפוננט ProgressBar המשותף (10368:22545): מסלול Grays/200 בכל המצבים.
   מילוי: accent (מותג) במצב active · Grays/600 במצב disabled (expired/canceled). */
.sub-card__progress{
  width:100%;height:6px;               /* Figma exact — no token */
  background:var(--color-grays-200);   /* ProgressBar track (היה grays-300 — לא תאם) */
  border-radius:var(--border-radius-sm);
  overflow:hidden;
}
.sub-card__progress-fill{
  height:100%;
  background:var(--sub-card-accent);
  border-radius:var(--border-radius-sm);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

/* ===== Redeeming variant — stepper replaces details button ===== */
.sub-card--redeeming .sub-card__bottom-row{
  align-items:center;
}
.sub-card__stepper{
  display:flex;
  flex-direction:row-reverse;          /* Figma DOM: +, "0", - → + leftmost */
  align-items:center;
  gap:var(--space-lg);
  flex-shrink:0;
}
.sub-card__stepper-num{
  font-family:var(--font-family-live);
  font-weight:300;                     /* Rubik Light */
  font-size:50px;line-height:50px;     /* Figma exact */
  color:var(--tl-color-text-inverse-default);
  min-width:30px;text-align:center;
  display:inline-block;
}
@keyframes ssc-bump{
  0%   {transform:scale(1);}
  35%  {transform:scale(1.18);}
  100% {transform:scale(1);}
}
.sub-card__stepper-num.is-bumped,
.sub-card__credits-num.is-bumped{animation:ssc-bump .3s cubic-bezier(.34,1.56,.64,1);}

/* Stepper button press feedback */
.sub-card__stepper .btn{transition:transform .12s ease-out, background .15s, opacity .15s;}
.sub-card__stepper .btn:active:not(.disabled):not(.dim){transform:scale(.88);}

/* Stepper buttons — black outline on white bottom regardless of theme (live/app).
   Demo + purchase form share the SAME markup (.btn icon-only category neutral live inverse). */
.sub-card__stepper .btn.icon-only.category{
  background:transparent !important;
  color:var(--ta-color-text-default, #000) !important;
  border:1px solid var(--ta-color-text-default, #000) !important;
}
/* Disabled state (legacy .dim + standard .disabled both supported) */
.sub-card__stepper .btn.icon-only.category.dim,
.sub-card__stepper .btn.icon-only.category.disabled,
.sub-card__stepper .btn.icon-only.category[disabled]{
  color:var(--ta-color-text-disabled) !important;
  border-color:rgba(0,0,0,0.15) !important;
  cursor:default;
  pointer-events:none;
}

/* ===== Expired / Canceled variants (Figma 11303:31289 · 11303:27296) =====
   שניהם: קרדיטים מושתקים · סרגל אפור · באדג'-סטטוס בתחתית (על הרקע הלבן).
   ההבדל היחיד — צבע הבאדג': פג-תוקף=Grays/600 · מבוטלת=Reds/600. */
.sub-card--expired  .sub-card__credits-row,
.sub-card--expired  .sub-card__credits-label,
.sub-card--canceled .sub-card__credits-row,
.sub-card--canceled .sub-card__credits-label{
  color:var(--tl-color-text-inverse-disabled);   /* rgba(0,0,0,.3) — Figma */
}
.sub-card--expired  .sub-card__progress-fill,
.sub-card--canceled .sub-card__progress-fill{ background:var(--color-grays-600); }  /* ProgressBar state=disabled: מילוי Grays/600 (המסלול כבר Grays/200) */

/* באדג'-הסטטוס — פיל HUG על הרקע הלבן התחתון, מחליף את כפתור «פרטי המנוי» */
.sub-card__status-badge{
  display:inline-flex;align-items:center;
  height:var(--dim-6);
  padding:0 var(--space-sm);
  border-radius:var(--border-radius-sm);          /* Figma 5 → token sm 4 */
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-caption);
  line-height:1;
  background:transparent;
  white-space:nowrap;
  flex-shrink:0;
  box-sizing:border-box;
}
.sub-card__status-badge--expired{                 /* פג תוקף → Grays/600 */
  border:1px solid var(--color-grays-600);
  color:var(--color-grays-600);
}
.sub-card__status-badge--canceled{                /* מבוטל → Reds/600 */
  border:1px solid var(--color-reds-600);
  color:var(--color-reds-600);
}

/* ============================================================
   SubscriptionsStack (subs-stack) — wrapper for 1/2/3+ cards
   - data-count="1"   → single full-width card
   - data-count="2"   → 2 cards, stack visual (front + back peeking above)
   - data-count="3+"  → same stack visual, but with a slider:
                        only 2 visible at a time (front+back), rest "hidden"
                        Dots act as the slider control.
   ============================================================ */
.subs-stack{
  /* Local tokens — based on tokens.css; can be overridden per-page.
     Only real tokens from tokens.css are referenced (no invented names). */
  --subs-peek-top:        var(--space-3xl);            /* 40px — how far the front drops below back */
  --subs-peek-inline:     var(--space-md);             /* 12px — back card horizontal inset */
  --subs-hidden-inline:   var(--space-xl);             /* 24px — hidden card horizontal inset */
  --subs-hidden-top:      calc(-1 * var(--space-md));  /* -12px */
  --subs-card-height:     208px;                       /* Figma exact for .sub-card */
  --subs-dots-mt:         var(--space-md);             /* 12px */
  --subs-dots-gap:        6px;                         /* no exact spacing token */
  --subs-dot-size:        6px;
  --subs-dot-active-w:    18px;
  /* dots sit on the surrounding page background. The defaults work on light
     backgrounds (purchase form, component demo); for a dark host, override
     these two CSS vars on the .subs-stack element. */
  --subs-dot-bg:          rgba(0,0,0,0.2);
  --subs-dot-active-bg:   var(--ta-color-bg-surface-selected, rgba(0,0,0,0.3));   /* 18/08 (אסף, פיגמה 103:91199): הפעילה אפורה 30%, לא שחורה */
  --subs-transition:      .55s cubic-bezier(.4,0,.2,1);
  width:100%;
}
.subs-stack[data-count="1"]{display:block;}

.subs-stack[data-count="2"],
.subs-stack[data-count="3+"]{
  position:relative;
  height:calc(var(--subs-peek-top) + var(--subs-card-height));
}
.subs-stack[data-count="2"] > .sub-card,
.subs-stack[data-count="3+"] > .sub-card{
  position:absolute;
  width:auto;
  transition:
    top     var(--subs-transition),
    left    var(--subs-transition),
    right   var(--subs-transition),
    opacity .4s ease;
}
.subs-stack[data-count="2"]  > .sub-card[data-stack-pos="front"],
.subs-stack[data-count="3+"] > .sub-card[data-stack-pos="front"]{
  top:var(--subs-peek-top); left:0; right:0;
  z-index:2;
  opacity:1;
}
.subs-stack[data-count="2"]  > .sub-card[data-stack-pos="back"],
.subs-stack[data-count="3+"] > .sub-card[data-stack-pos="back"]{
  top:0;
  left:var(--subs-peek-inline);
  right:var(--subs-peek-inline);
  z-index:1;
  opacity:1;
  cursor:pointer;
}
.subs-stack[data-count="3+"] > .sub-card[data-stack-pos="hidden"]{
  top:var(--subs-hidden-top);
  left:var(--subs-hidden-inline);
  right:var(--subs-hidden-inline);
  z-index:0;
  opacity:0;
  pointer-events:none;
}

/* Pagination dots — sibling of .subs-stack (not a child), so include the
   defaults inline as var() fallbacks. Override per-page if needed. */
.subs-stack-dots{
  display:flex;
  justify-content:center;
  gap:var(--subs-dots-gap, 6px);
  margin-top:var(--subs-dots-mt, var(--space-md, 12px));
}
.subs-stack-dots:empty{margin-top:0;}
.subs-stack-dots__dot{
  width:var(--subs-dot-size, 6px);
  height:var(--subs-dot-size, 6px);
  border-radius:50%;
  background:var(--subs-dot-bg, rgba(0,0,0,0.2));
  cursor:pointer;
  transition:background .25s ease, width .25s ease, border-radius .25s ease;
}
.subs-stack-dots__dot.is-active{
  background:var(--subs-dot-active-bg, #000);
  width:var(--subs-dot-active-w, 18px);
  border-radius:3px;
}

/* ===== Stack — multiple subscription cards (front + back peeking out)
   Peek = 48px: enough to show the back card's title first line as a hint */
.sub-card-stack{
  position:relative;
  width:100%;
  padding-top:48px;
}
.sub-card-stack .sub-card{
  transition:
    transform .45s cubic-bezier(.34,1.2,.5,1),
    box-shadow .35s ease,
    filter .35s ease;
}
.sub-card-stack .sub-card[data-stack-pos="front"]{
  position:relative;
  z-index:2;
  transform:scale(1);
}
.sub-card-stack .sub-card[data-stack-pos="back"]{
  position:absolute;
  top:0;left:0;right:0;
  z-index:1;
  transform:scale(.95);
  transform-origin:top center;             /* scale from TOP so back card top stays at top:0 */
  filter:brightness(.85);
  cursor:pointer;
}
.sub-card-stack .sub-card[data-stack-pos="back"]:hover{
  transform:scale(.96);
  filter:brightness(.92);
}

/* Swap — Phase 1: back rises alone (front holds). Phase 2: back descends to front, front recedes to back. */
@keyframes ssc-stack-to-front{
  0%   {transform:scale(.95) translateY(0);filter:brightness(.85);transform-origin:top center;}
  40%  {transform:scale(1.02) translateY(-60px);filter:brightness(1.05);transform-origin:top center;}
  100% {transform:scale(1) translateY(48px);filter:brightness(1);transform-origin:top center;}
}
@keyframes ssc-stack-to-back{
  0%,40% {transform:scale(1) translateY(0);filter:brightness(1);}
  100%   {transform:scale(.95) translateY(-48px);filter:brightness(.85);transform-origin:top center;}
}
.sub-card-stack .sub-card.is-swapping-to-front{
  animation:ssc-stack-to-front .7s cubic-bezier(.4,.0,.2,1) both;
  z-index:4;            /* lifted card is above everything during animation */
}
.sub-card-stack .sub-card.is-swapping-to-back{
  animation:ssc-stack-to-back .7s cubic-bezier(.4,.0,.2,1) both;
  z-index:1;            /* stays behind */
}

/* ===== Celebration animation (when credits fully cover the order) =====
   Wrapper must be position:relative — particles burst from its center.
   Class names kept as .ssc-* for backward-compat with existing JS. */
.ssc-wrap{position:relative;width:100%;}
.ssc-wrap > .sub-card{position:relative;z-index:1;}
.sub-card.is-celebrate{animation:ssc-celebrate-pulse 1s ease;}
@keyframes ssc-celebrate-pulse{
  0%,100%{box-shadow:0 4px 9px 1px rgba(0,0,0,.25);}
  35%   {box-shadow:0 0 0 6px var(--sub-card-accent), 0 8px 48px var(--sub-card-accent);}
}
.ssc-celebrate-particle{
  position:absolute;
  left:50%;top:50%;
  border-radius:50%;
  pointer-events:none;
  z-index:0;          /* behind the card */
  opacity:0;
  animation:ssc-particle-burst 1.8s cubic-bezier(.18,.68,.28,1) forwards;
}
@keyframes ssc-particle-burst{
  0%   {transform:translate(-50%,-50%) scale(0);opacity:0;}
  15%  {transform:translate(-50%,-50%) scale(1.2);opacity:1;}
  100% {transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.5) rotate(var(--r,0deg));opacity:0;}
}