/* TicketFormCard
   Figma: 8063:18417 (TicketFormCardnew)
   Layout (visual LTR): [qty stepper | info + sticker]
   Typography: ALL text is Rubik (Live theme), except stepper num (Inter)

   Tokens:
   - Card fill: TA/color/text/inverse/default | TA/color/bg/base (sold-out)
   - Card border: TA/color/border/subtle
   - Card radius: border-radius/border-radius-lg (12px)
   - Content padding: space-md (12px), gap: 12px
   - Sticker: 104×104, radius space-sm (8px)

   Stepper uses qty + qty--vertical from quantity-stepper.css
*/

/* === Card === */
.tfc {
  display: flex;
  direction: ltr;
  align-items: stretch;
  width: 352px;
  border-radius: var(--border-radius-lg, 12px);
  border: 1px solid var(--color-slate-100, #e9eff5);   /* 18/08 (DS 8063:18417): מסגרת Blue-Grays/100 — היה שחור 10% */
  background: var(--ta-color-text-inverse-default, #fff);
  overflow: hidden;
  box-sizing: border-box;
}
.tfc--sold-out { background: var(--color-slate-50, #f8fafc); }   /* 18/08: אזל-המלאי על Blue-Grays/50 */

/* sold-out / coming-soon: disabled number color */
.tfc--sold-out .qty__count,
.tfc--coming-soon .qty__count {
  color: var(--tl-color-text-inverse-disabled, rgba(0,0,0,0.3));
}

/* === Content === */
.tfc__content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-md, 12px);
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}
.tfc--sold-out .tfc__content,
.tfc--coming-soon .tfc__content {   /* 18/08: גם «ייפתח בקרוב» על משטח-מנוטרל (DS 8063:18417) */
  background: var(--ta-color-bg-surface-disabled, rgba(0,0,0,0.05));
}

/* === Info column — VERTICAL, SPACE_BETWEEN === */
.tfc__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: flex-start = RIGHT */
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  direction: rtl;
}

/* Top group — badge + title, stuck to top */
.tfc__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: flex-start = RIGHT */
  gap: var(--space-sm, 8px);
  width: 100%;
  direction: rtl;
}
/* מצב פעיל (Figma 8082:17891): כותרת ואז שורת תיוגים מתחתיה, gap 4px (space-xs) */
.tfc--available .tfc__top {
  gap: var(--space-xs, 4px);
}
/* שורת באדג'ים — "זמין במנוי" + שעון עצר באותה שורה, מתחת לכותרת (אין גובה בכרטיס לערום אותם).
   wrap מאופשר כגיבוי אם אין רוחב, gap 8px, מיושר ימין ב-RTL */
.tfc__badges-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-sm, 8px);
}

/* === Badge (stroke visible=false in Figma — no border) === */
.tfc__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: var(--border-radius-md, 8px);
  overflow: hidden;
  flex-shrink: 0;
}
/* Badge text — Rubik Regular 14/20px */
.tfc__badge-text {
  font-family: 'Google Sans','Rubik', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

/* Timer — color/green/200 bg */
.tfc__badge--timer {
  background: var(--color-green-200, #d4e468);
  padding: 0 var(--space-sm, 8px);
}
.tfc__badge--timer .tfc__badge-text {
  color: var(--ta-color-state-success-main, #465b17);
  /* ספרות ברוחב אחיד — אחרת הגלולה «רוקדת» בכל שנייה (אסף 18/08) */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  min-width: 8ch;                 /* 00:00:00 */
  text-align: center;
  direction: ltr;
}

/* Subscription availability — "זמין במנוי" — רכיב Tag/Subscription (DS 11166:2313, 18/08):
   Default: רקע Yellows/50 · מסגרת 1 Yellows/400 · טקסט Yellows/600 · ריפוד 0/8/0/4 (צד-האייקון 4)
   Hover:   רקע Yellows/400 · בלי מסגרת (הקו קיים אבל מוסתר) · טקסט Oranges/600
   לחיץ: פותח פופאפ "כרטיס זה ניתן למימוש בסדרות הבאות" (openRedeem) */
.tfc__badge--subscription {
  background: var(--color-yellows-50, #fffceb);
  border: 1px solid var(--color-yellows-400, #ffcc00);
  box-sizing: border-box;
  padding: 0 var(--space-sm, 8px) 0 var(--space-xs, 4px);
  gap: var(--space-xs, 4px);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tfc__badge--subscription:hover {
  background: var(--color-yellows-400, #ffcc00);
  border-color: transparent;
}
.tfc__badge--subscription .tfc__badge-text {
  color: var(--color-yellows-600, #735c00);
}
.tfc__badge--subscription:hover .tfc__badge-text {
  color: var(--color-oranges-600, #a85f00);
}
/* עיגול שחור 16 עם "?" לבן (Assistant Bold 12) — חיווי שהתיוג לחיץ; יושב במכל 24 (HelpCircle Small) */
.tfc__badge-help {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 4px;                       /* מכל 24 → העיגול 16 במרכז */
  border-radius: 50%;
  background: var(--color-solids-black, #000);
  color: var(--ta-color-bg-base, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Google Sans','Assistant', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* Sold out — TA/color/bg/baseAlt (black) */
.tfc__badge--sold-out {
  background: var(--ta-color-bg-baseAlt, #000);
  padding: 0 var(--space-sm, 8px);
}
.tfc__badge--sold-out .tfc__badge-text {
  color: var(--ta-color-text-inverse, #fff);
}

/* Coming soon — TA/color/bg/surface/selected */
.tfc__badge--coming-soon {
  background: var(--ta-color-bg-surface-selected, rgba(0,0,0,0.3));
  padding: 0 var(--space-md, 12px);
}
.tfc__badge--coming-soon .tfc__badge-text {
  color: var(--ta-color-text-inverse, #fff);
}

/* === Title — Rubik SemiBold 16/20px, right-aligned === */
.tfc__title {
  font-family: 'Google Sans','Rubik', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--ta-color-text-default, #000);
  text-align: right;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  direction: rtl;
}
.tfc--sold-out .tfc__title {
  color: var(--ta-color-text-disabled, rgba(0,0,0,0.3));
}

/* === Price row — pinned to bottom, space-between, gap:2px, LTR === */
.tfc__price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  direction: ltr;
}

/* Price (₪ + number) — gap space-xs, align bottom */
.tfc__price {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs, 4px);
  white-space: nowrap;
  color: var(--ta-color-text-default, #000);
  direction: ltr;
}
/* ₪ — Rubik Regular 14/14px */
.tfc__price-symbol {
  font-family: 'Google Sans','Rubik', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
}
/* Symbol column — wraps optional coupon indicator above the ₪ symbol (Figma 8565:25762) */
.tfc__price-symbol-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 12px;
}
/* Coupon indicator — 12px gradient circle with gift icon (Figma 8565:25783).
   Hidden by default; the parent must opt in via `.tfc--with-coupon`. */
.tfc__coupon-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 60px;
  background: linear-gradient(to right, var(--color-coupon-red, #ee3c5c), var(--color-coupon-orange, #fa6203));
  padding: 2.4px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.tfc--with-coupon .tfc__coupon-indicator {
  display: inline-flex;
}
.tfc__coupon-indicator img {
  width: 7.2px;
  height: 7.2px;
  display: block;
  filter: brightness(0) invert(1);
}
/* Amount — Rubik Regular 32/22px */
.tfc__price-amount {
  font-family: 'Google Sans','Rubik', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 22px;
}
/* Original (struck-through) price when coupon is active — Rubik Light 12px (Figma 8565:25724).
   Hidden by default; the parent must opt in via `.tfc--with-coupon`. */
.tfc__price-original {
  display: none;
  font-family: 'Google Sans','Rubik', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1;
  color: var(--ta-color-text-subtle, rgba(0,0,0,0.4));
  text-decoration: line-through;
  text-decoration-skip-ink: none;
  white-space: nowrap;
}
.tfc--with-coupon .tfc__price-original {
  display: inline;
}
.tfc--sold-out .tfc__price {
  color: var(--ta-color-text-disabled, rgba(0,0,0,0.3));
}
/* Coupon indicator + struck-through original — only when card is available */
.tfc--sold-out .tfc__coupon-indicator,
.tfc--sold-out .tfc__price-original,
.tfc--coming-soon .tfc__coupon-indicator,
.tfc--coming-soon .tfc__price-original {
  display: none;
}

/* "מידע נוסף" — Rubik Regular 12/16px, underlined text only (Figma 8565:26037) */
.tfc__more-info {
  font-family: 'Google Sans','Rubik', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--ta-color-text-default, #000);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-align: right;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

/* === StickerOption — 104 רוחב, נמתח לגובה הכרטיס (מינ' 104) כדי לא "להיצמד למעלה" בכותרת ארוכה === */
.tfc__sticker {
  width: 104px;
  align-self: stretch;
  height: auto;
  min-height: 104px;
  border-radius: var(--space-sm, 8px);
  overflow: hidden;
  flex-shrink: 0;
}
.tfc__sticker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* sticker=icon — colored bg + centered 3D icon */
.tfc__sticker--icon { display: flex; align-items: center; justify-content: center; }
/* האייקון ממלא את הקובייה (104) — היה 64 בתוך 104; מוזז טיפה למטה למרכוז אופטי (אסף 26/08) */
.tfc__sticker--icon img { width: 104px; height: 104px; object-fit: contain; transform: translateY(4px); }

/* === Stepper colors per card state (DS 8063:18417, 18/08) ===
   available: מסילה Blue-Grays/100 · כפתור-פעיל לבן · כפתור-מנוטרל Blue-Grays/200 · תיבת-מונה לבנה עם מסגרת Blue-Grays/300
   sold-out / coming-soon: מסילה שחור 5% · כפתורים שחור 5% · תיבה מסגרת שחור 10% · מספר 30% (ברירת-המחדל של הרכיב) */
.tfc--available .qty--vertical { background: var(--color-slate-100, #e9eff5); }
.tfc--available .qty--vertical .qty__btn:disabled { background: var(--color-slate-200, #cedde9); }
.tfc--available .qty--vertical .qty__count {
  background: var(--tl-color-bg-baseAlt, #fff);
  border-color: var(--color-slate-300, #a3c1d6);
}