/* ============================================================
   Ticket Card — כרטיס כניסה (Live theme on dark stage)
   Figma: Design-System Qw3YeURNIL8V1wdGubxIWQ · 11645:7992
   3 variants: cover (הראשי) · regular (כרטיס רגיל) · seating (כרטיס כולל ישיבה)
   ============================================================ */

/* ---- Stage: dark, color varies per event (always dark) ---- */
.tc-stage{
  /* --stage-bg מוגדר פעם אחת ב-:root של העמוד (מקור-אמת יחיד). כאן רק צורכים. */
  width:375px;
  background:var(--stage-bg,#1a1a19);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-lg);
  padding:38px 0 var(--space-xl);
  font-family:var(--font-family-live);   /* Rubik */
  direction:rtl;
  overflow:hidden;
}

/* ---- Carousel ---- */
.tc-viewport{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tc-viewport::-webkit-scrollbar{display:none;}
.tc-track{
  display:flex;
  align-items:flex-start;
  gap:var(--space-lg);
  padding-inline:22px;            /* (375-330)/2 — lets edge cards center-snap */
}

/* ============================================================
   CARD
   ============================================================ */
.tc-card{
  position:relative;
  flex:0 0 auto;
  width:330px;
  scroll-snap-align:center;
}
.tc-card__inner{
  position:relative;
  height:675px;
  background:var(--tl-color-bg-baseAlt);
  border-radius:30px;
  overflow:clip;
  display:flex;
  flex-direction:column;
  color:var(--tl-color-text-inverse-default);   /* black */
}
/* ---- Tear-off notches — הוחלפו בפס קריעה מנוקד עגול (border-dotted על ה-band) ---- */
.tc-notch{ display:none; }
/* notches sit on the bottom gray band's two dashed lines (band = y466..y576 on all cards) */
.tc-notch--tr{top:450px;right:-16px;}
.tc-notch--tl{top:450px;left:-16px;}
.tc-notch--br{top:560px;right:-16px;}
.tc-notch--bl{top:560px;left:-16px;}

/* ---- Shared text ---- */
.tc-title{
  font-weight:var(--font-weight-bold);font-size:var(--font-size-heading-card);line-height:1.3;   /* הוקטן ל-16 לבקשת מוטי */
  text-align:center;word-break:break-word;   /* כותרת ארוכה נגלשת בחופשיות — הכרטיס מתארך, בלי חיתוך */
  margin-inline:var(--space-lg);              /* רווח צדדים — הכותרת לא נוגעת בקצוות הכרטיס */
}
.tc-title--buyer{font-size:var(--font-size-body-small);}   /* שם הלקוח בלבד → 14 */
.tc-venue{
  font-weight:var(--font-weight-regular);font-size:var(--font-size-body-small);line-height:1.2;
  text-align:center;
}
.tc-header .tc-venue{font-size:var(--font-size-body-small);}   /* מספר עסקה/הזמנה → 14, כמו שם הלקוח */
/* מס' עסקה + מס' כרטיסים במסך-הכניסה — «בקטן» (חוק 5): caption 12, אפור-משני, כמו מספר-הכרטיס שמתחת לברקוד */
.tc-txn{font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);line-height:1.2;text-align:center;color:var(--tl-color-text-inverse-subtle);margin:0;}
/* ---- Ticket name / type (כמו שם הכרטיס בטופס הרכישה) — שורה: תמונה ריבועית + שם ---- */
.tc-ticket-name{                                       /* טקסט בלבד על רקע surface אפור — שם/סוג הכרטיס מתחת לשם המופע */
  align-self:stretch;margin-inline:var(--space-lg);   /* רוחב מלא עם רווח צדדים (16px) */
  background:var(--tl-color-bg-surface-inv, rgba(0,0,0,.05));   /* הרקע האפור העדין — הוחזר */
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--border-radius-lg,12px);
  font-weight:var(--font-weight-regular);font-size:var(--font-size-body-small);line-height:1.3;
  color:var(--tl-color-text-inverse-default,#000);text-align:center;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;   /* עד 2 שורות; מעבר לכך נחתך ב-… */
}
/* וריאנט נגישות — סמל כחול בתוך ה-pill האפור (במקום תג נפרד שהוסיף גובה) */
.tc-ticket-name--a11y{
  --tc-a11y-blue:var(--color-blue-600);   /* כחול נגישות = טוקן color/blue/600 (#0055b2) */
  display:flex;align-items:center;gap:var(--space-sm);text-align:start;-webkit-line-clamp:unset;overflow:visible;
}
.tc-tn-ico{
  flex:none;width:24px;height:24px;border-radius:var(--border-radius-full,999px);
  background:var(--tc-a11y-blue);display:flex;align-items:center;justify-content:center;
}
.tc-tn-ico img{width:14px;height:14px;filter:brightness(0) invert(1);}
.tc-tn-txt{
  flex:1 1 auto;min-width:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;   /* עד 2 שורות */
}

/* ---- Date / time row (geometric LTR axis: date left, time right) ---- */
.tc-datetime{
  display:flex;align-items:flex-end;justify-content:center;
  gap:var(--space-2xl);direction:rtl;   /* מתחיל + פתיחה שערים, ותאריך בסוף (שמאל) */
}
/* סדר מימין לשמאל: תאריך | פתיחה שערים | מתחיל (DOM: תאריך, מתחיל, פתיחה) */
.tc-datetime > :nth-child(1){order:1;}   /* תאריך → ימין (ראשון) */
.tc-datetime > :nth-child(2){order:3;}   /* מתחיל → סוף (שמאל) */
.tc-datetime > :nth-child(3){order:2;}   /* פתיחה שערים → אמצע */
.tc-dt{display:flex;align-items:center;gap:var(--space-sm);direction:ltr;}
.tc-dt span{font-weight:var(--font-weight-regular);font-size:var(--font-size-body-small);line-height:1.2;}
.tc-ic{width:18px;height:18px;display:block;}
/* date + מתחיל + פתיחה שערים columns (Figma 11310:24551, 11671:2257) */
.tc-dt-col{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-xs);direction:ltr;}
.tc-dt-label{
  font-weight:var(--font-weight-regular);font-size:var(--font-size-caption);line-height:1.2;
  color:var(--tl-color-text-inverse-default,#000);
}

/* ---- Bands (black05 + dashed top & bottom) ---- */
.tc-band{
  width:100%;
  position:relative;
  background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* פס קריעה — פס דק תחתון בלבד (הפס העליון הוסר) */
.tc-stub::after,.tc-details::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;
  background:var(--tl-color-border-inverse-subtle, rgba(0,0,0,.1));
  pointer-events:none;
}
/* כותרת — מפריד עדין בלבד בתחתית (בלי חורים, בלי קו בראש הכרטיס) */
.tc-header{gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border-bottom:1px dotted var(--ta-color-border-subtle);}   /* content-height + 16px vertical (Figma 11645:7750) */
/* bottom gray band — uniform 110px on all cards (Figma 11310:24549) */
.tc-stub{gap:var(--space-md);padding:var(--space-xl) var(--space-md);}   /* גובה אוטומטי, 24 למעלה/למטה */
.tc-details{min-height:110px;gap:var(--space-md);padding:var(--space-xl) var(--space-md);}   /* גובה גמיש + רווחים אנכיים (לא צפוף) */

/* ---- White middle ---- */
.tc-white{
  flex:1 1 auto;
  min-height:0;                 /* גובה תוכן קבוע — ממלא את השטח שבין header ל-stub; רק ה-QR בפנים מתכווץ/גדל */
  width:100%;
  background:var(--tl-color-bg-baseAlt);
  display:flex;flex-direction:column;align-items:center;
  overflow:clip;
}

/* ---- Poster (cover) ---- */
.tc-poster{flex:1 1 auto;width:100%;overflow:clip;background:#0e3a5c;}  /* רקע כחול עמוק — מתמזג עם רקע המכולה של הפוסטר */
.tc-poster img{width:100%;height:100%;object-fit:contain;display:block;}  /* פוסטר במלואו בפרופורציה קבועה, בלי חיתוך */
/* כרטיס ה-cover: רוחב 330 קבוע, פוסטר בפרופורציה 466:652 (~461 גובה). כותרת ארוכה → הכרטיס מתארך, וה-fit מקטין בזום */
.tc-card--cover .tc-card__inner{height:auto;}
.tc-card--cover .tc-poster{flex:none;aspect-ratio:466/652;}

/* ---- "נסרק" status banner — diagonal corner ribbon, clipped by the card edge.
   Taken from Toggle Burn (general/toggle.css .toggle-burn pressed state):
   warning gradient + fire 3D icon + orange label, but STATIC and NO white knob.
   Lives INSIDE .tc-card__inner so the rounded corner (overflow:clip) cuts both
   ends → reads as a ribbon embedded across the corner, not a floating pill. ---- */
.tc-burn{
  position:absolute;
  top:14px;right:-44px;
  width:178px;height:28px;        /* band thickness stays thin — fixed */
  z-index:5;
  pointer-events:none;
  overflow:hidden;                /* fire lives INSIDE the stripe → cut by its edges */
  display:flex;align-items:center;justify-content:center;gap:0;
  padding:0;
  /* fire sits at the LEFT end (→ top, near the corner), text at the RIGHT end.
     gradient: cream under the text (right) so the orange label reads,
     orange under the fire (left) — no orange-on-orange. */
  background:linear-gradient(to left,
    var(--ta-color-state-warning-bg,#fff2d6) 42%,
    var(--ta-color-state-warning-main,#f28c00) 120%);
  box-shadow:0 2px 8px rgba(255,0,0,.30);
  transform:rotate(45deg);
  transform-origin:center;
}
/* fire is bigger than the band → cut by the stripe (overflow:hidden above).
   nudged down a touch inside the stripe. */
.tc-burn__icon{width:46px;height:46px;object-fit:contain;display:block;flex:none;position:relative;top:4px;}
.tc-burn__label{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-semibold,600);
  font-size:var(--font-size-body-small);line-height:16px;white-space:nowrap;
  color:var(--color-oranges-400,#f28c00);
}

/* ---- "פתוח" state — same ribbon, turquoise gradient + ticket icon (Toggle Burn default) ---- */
.tc-burn--open{
  background:linear-gradient(to left,
    var(--ta-color-brand-subtle,#e0fbff) 42%,
    var(--ta-color-brand-main,#8eedff) 120%);
  box-shadow:0 2px 8px rgba(31,111,122,.30);
}
.tc-burn--open .tc-burn__label{color:var(--color-turquoise-700,#1f6f7a);}

/* ---- "היום" state (cover only) — Live-brand yellow, no cut icon, just the word ---- */
.tc-burn--today{
  background:linear-gradient(to left,
    var(--tl-color-brand-subtle,#fff8db) 42%,
    var(--tl-color-brand-main,#ffcc00) 120%);
  box-shadow:0 2px 8px rgba(168,95,0,.30);
}
.tc-burn--today .tc-burn__icon{display:none;}   /* date label carries no illustration */
.tc-burn--today .tc-burn__label{          /* centered (visually) + black + bold */
  color:var(--tl-color-text-inverse-default,#000);
  font-weight:var(--font-weight-bold,700);
  /* the stripe is clipped asymmetrically by the corner; nudge the word down the
     diagonal so it sits in the VISIBLE centre of the band */
  transform:translateX(16px);
}

/* ---- inline pill variant — same stripe + cut icon, but NOT rotated/positioned.
   Used as a standalone status pill (e.g. under the enlarged QR). ---- */
.tc-burn--inline{
  position:static;transform:none;
  width:auto;height:32px;
  border-radius:100px;            /* pill */
  padding:0 var(--space-lg);gap:var(--space-sm);
}

/* ---- full-width horizontal banner variant (cover "היום"/"נסרק") — same gradient,
   but spans the whole card top instead of the diagonal corner ribbon. ---- */
.tc-burn--strip{
  position:static;transform:none;transform-origin:initial;
  top:auto;right:auto;
  order:-1;                        /* sit at the very top of .tc-card__inner */
  width:100%;height:40px;flex:none;
  border-radius:0;box-shadow:none;
  gap:var(--space-sm);
}
/* Figma TicketStatusStrip: every variant — icon 63px (ph-burnicon-R / fire, cut by the 40px strip),
   label 20px Bold (font-size/heading-modal). Base label = כתום (Scanned); --open/--today recolor it. */
.tc-burn--strip .tc-burn__icon{width:63px;height:63px;position:relative;top:9px;}  /* גדול + נחתך בתחתית הפס (overflow:hidden) */
.tc-burn--strip .tc-burn__label{font-size:var(--font-size-body);font-weight:var(--font-weight-bold,700);}
.tc-burn--strip.tc-burn--today .tc-burn__label{transform:none;}  /* horizontal → no diagonal nudge */

/* ---- מצב סריקה בפס ("נסרק X מתוך Y") — הכל ממורכז, האש בצד ימין צמודה לטקסט ---- */
/* "עסקה שרופה" (--burned) חולק את עיצוב "נסרק" (--scanned) בדיוק — אסף 2026-07-24 */
.tc-burn--strip.tc-burn--scanned,
.tc-burn--strip.tc-burn--burned{gap:0;padding-left:var(--space-2xl);box-sizing:border-box;}  /* gap 0 + יישור: padding-left 2xl לאיזון אש 63px מימין (נשאב מ-Figma State=Scanned) */
.tc-burn--strip.tc-burn--scanned .tc-burn__icon,
.tc-burn--strip.tc-burn--burned .tc-burn__icon{order:-1;}                                   /* אש ראשונה → ימין ב-RTL; center נשאר → ממורכז */
.tc-burn--strip.tc-burn--scanned .tc-burn__label,
.tc-burn--strip.tc-burn--burned .tc-burn__label{color:var(--color-oranges-600,#a85f00);}    /* "נסרק"/"עסקה שרופה" — כתום 600 */
.tc-burn--strip.tc-burn--scanned .tc-burn__details{margin-inline-start:var(--space-sm);}     /* רווח 8 בין "נסרק" לתאריך */

/* ---- "נסרק" strip (Figma TicketStatusStrip / State=Scanned) — scan date+time on the left ----
   RTL order: נסרק (right) · fire icon (center) · scan details (left). */
.tc-burn__details{                          /* Body: Rubik 16/20 regular, color/Grays/700 */
  font-family:'Google Sans',var(--font-family-live,'Rubik',sans-serif);
  font-size:var(--font-size-caption);                       /* font-size/caption (12) */
  line-height:var(--line-height-body,20px);                 /* line-height/body (dimension-5) */
  font-weight:var(--font-weight-bold,700);                  /* כמו תווית "נסרק" */
  color:var(--color-oranges-600,#a85f00);                   /* כמו תווית "נסרק" — אותו כתום בדיוק (אחיד) */
  white-space:nowrap;
}
.tc-burn__details:empty{display:none;}      /* פתוח / היום → no details, no phantom gap */

/* ---- "מחר" state — turquoise (like פתוח) + word only ---- */
.tc-burn--tomorrow{
  background:linear-gradient(to left,
    var(--ta-color-brand-subtle,#e0fbff) 42%,
    var(--ta-color-brand-main,#8eedff) 120%);
  box-shadow:0 2px 8px rgba(31,111,122,.30);
}
.tc-burn--tomorrow .tc-burn__icon{display:none;}
.tc-burn--tomorrow .tc-burn__label{color:var(--color-turquoise-700,#1f6f7a);font-weight:var(--font-weight-bold,700);}

/* ---- countdown (< 24h) — Live-brand yellow + live timer on the left ---- */
.tc-burn--countdown{
  background:linear-gradient(to left,
    var(--tl-color-brand-subtle,#fff8db) 42%,
    var(--tl-color-brand-main,#ffcc00) 120%);
  box-shadow:0 2px 8px rgba(168,95,0,.30);
}
.tc-burn--countdown .tc-burn__icon{display:none;}
.tc-burn--countdown .tc-burn__label{color:var(--tl-color-text-inverse-default,#000);font-weight:var(--font-weight-bold,700);}
/* br.ticket.entry.countdown (מוטי 2026-07-20): מבנה קבוע ימים·שעות·דקות — בלי שניות אף פעם.
   כל יחידה = מספר עם תווית קטנה מתחתיו. (מתחת ליממה מוצגת התגית «מחר/היום» במקום השעון.) */
.tc-burn--countdown .tc-burn__details{
  display:flex;
  align-items:center;
  gap:var(--space-md,12px);
  color:var(--tl-color-text-inverse-default,#000);
  font-variant-numeric:tabular-nums;          /* ספרות יציבות */
  line-height:1;
}
.tc-cd__tile{display:flex;flex-direction:column;align-items:center;gap:0;}
.tc-cd__num{
  font-family:'Google Sans',var(--font-family-live,'Rubik',sans-serif);
  font-size:var(--font-size-body);            /* 16 — כמו התווית */
  font-weight:var(--font-weight-bold,700);
  line-height:1;
}
.tc-cd__unit{
  font-family:'Google Sans',var(--font-family-live,'Rubik',sans-serif);
  font-size:var(--font-size-caption);         /* 12 — הצעד הקטן ביותר ב-DS (תווית-יחידה) */
  font-weight:var(--font-weight-medium,500);
  line-height:1;
  color:var(--tl-color-text-inverse-default,#000);            /* שחור מלא — כמו המספר והתווית */
}
/* ---- "בוטל" state (Figma TicketStatusStrip / State6 12223:3179) — red gradient + 3D X icon ---- */
.tc-burn--cancelled{
  background:linear-gradient(to left,
    var(--color-reds-50,#ffcccc) 57.7%,
    var(--color-reds-400,#ff0000) 120%);
  box-shadow:0 2px 8px rgba(204,0,0,.30);
}
.tc-burn--cancelled .tc-burn__label{color:var(--color-reds-600,#cc0000);font-weight:var(--font-weight-bold,700);}
/* X is a symmetric disc (unlike the flame) → centred in the strip, not nudged down. Figma: 67px, tilted 14°. */
/* order:-1 → first in flow → rightmost in RTL (X on the right, like Figma) */
.tc-burn--cancelled .tc-burn__icon{display:block;width:67px;height:67px;top:0;order:-1;transform:rotate(14deg);}
.tc-burn--cancelled .tc-burn__details{display:none;}

/* ---- "אירוע שחלף" state (Figma TicketStatusStrip / State7 12262:3494) — gray gradient + 3D calendar icon ---- */
.tc-burn--expired{
  background:linear-gradient(to left,
    var(--color-grays-300,#ccc) 57.7%,
    var(--color-grays-700,#333) 120%);
  box-shadow:0 2px 8px rgba(51,51,51,.30);
}
.tc-burn--expired .tc-burn__label{color:var(--tl-color-text-inverse-subtle,rgba(0,0,0,0.4));font-weight:var(--font-weight-bold,700);}
/* calendar 50.5px, tilted 10.87° (Figma); order:-1 → first in flow → rightmost in RTL (אסף: אייקון לימין) */
.tc-burn--expired .tc-burn__icon{display:block;width:50.5px;height:50.5px;top:0;order:-1;transform:rotate(10.87deg);}
.tc-burn--expired .tc-burn__details{display:none;}

/* ---- "עסקה שרופה" state (br.ticket.entry.transaction_status, מוטי 2026-07-20) —
   כל כרטיסי-העסקה נסרקו ונכנסו. מוצג במפלס-העליון של השער. עיצוב זהה ל"נסרק" (אסף) —
   מקופל לתוך כללי .tc-burn--scanned למעלה; רק הטקסט שונה ("עסקה שרופה"). ---- */

.tc-burn--strip .tc-burn__label,
.tc-burn--strip .tc-burn__details{display:flex;align-items:center;line-height:1;font-size:var(--font-size-body);}   /* same size (16) + vertical-centre (נסרק + ספירה) */

/* מספר כרטיס מתחת לברקוד — קטן, אפור, צמוד */
.tc-ticketno{font-family:var(--font-family-live);font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);color:var(--tl-color-text-inverse-subtle);text-align:center;margin-top:var(--space-xs);}
.tc-qr + .tc-ticketno{margin-top:calc(-1 * var(--space-xl));}   /* צמוד מקסימלית לברקוד */

/* ---- Banner strip (regular / seating) ---- */
.tc-banner{width:100%;aspect-ratio:1024/223;flex:none;overflow:clip;}
.tc-banner img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- QR ---- */
.tc-qr{overflow:clip;flex:none;}
.tc-qr img{width:100%;height:100%;margin:0;display:block;}
/* QR ריבועי — גמיש לגובה (גדל למקום הפנוי) תוך שמירת פרופורציה 1:1, בלי לחרוג מרוחב הכרטיס */
.tc-qr--big,.tc-qr--small{flex:1 1 auto;min-height:0;aspect-ratio:1;width:auto;height:auto;max-width:200px;max-height:200px;}

/* regular middle body */
.tc-white--regular{justify-content:flex-start;}
.tc-regbody{
  flex:1 1 auto;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-md);padding:var(--space-md) 0;   /* רווח אנכי קבוע 12px למעלה ולמטה */
}

/* seating middle body — מירכוז אנכי (כמו הרגיל), ה-QR ממלא את הרווח */
.tc-white--seating{justify-content:center;gap:var(--space-md);padding:var(--space-md) 0;}   /* רווח אנכי קבוע 12px */

/* ---- Seating data tiles ---- */
/* stretch — כל הקוביות באותו גובה, התוויות (גוש/שורה/כסא) מיושרות על קו תחתון אחיד (אסף 2026-07-11) */
.tc-tiles{display:flex;align-items:stretch;justify-content:center;gap:var(--space-sm);width:100%;direction:rtl;}
.tc-white .tc-tiles{padding-inline:var(--space-lg);}   /* שוליים צדדיים 16px על הכרטיס — קוביית הגוש הגמישה לא נוגעת בקצה (אסף 2026-07-10) */
.tc-ticketno + .tc-tiles{margin-top:var(--space-xl);}   /* מרווח בין שורת המספר למשבצות */
/* שורת אולם מעל הקוביות — "אולם: <שם>" (אסף 2026-07-10) */
.tc-hallline{display:flex;justify-content:center;gap:4px;min-width:0;max-width:100%;
  font-size:var(--font-size-body-small);font-weight:var(--font-weight-regular);color:var(--color-grays-600,#666);white-space:nowrap;}
.tc-hallline b{font-weight:var(--font-weight-bold);color:var(--tl-color-text-inverse-default);overflow:hidden;text-overflow:ellipsis;}
.tc-ticketno + .tc-hallline{margin-top:var(--space-xl);}
/* צמוד לקוביות — רק ה-gap של הקונטיינר (12px), בלי margin נוסף (אסף 2026-07-10) */
/* הקובייה בדמו = המקור (66×66); הפיגמה (tile-gate 11772-30677) עודכנה להתאים לדמו — החלטת אסף 2026-07-09 */
/* מספר ארוך (שורה/כיסא 1000+) מרחיב את הקובייה; מינימום 66 שומר על הריבוע במספרים קצרים (אסף 2026-07-11) */
.tc-tile{
  width:auto;min-width:66px;height:auto;min-height:66px;flex:none;
  padding-inline:var(--space-sm);padding-block:var(--space-sm);box-sizing:border-box;
  background:var(--tl-color-bg-baseAlt);
  border:1px solid var(--ta-color-border-subtle);
  border-radius:var(--border-radius-lg);
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-xs);
}
/* המספר/שם מתמרכז בשטח שמעל התווית; התווית מעוגנת לתחתית — קו ישר בין הקוביות */
.tc-tile__num{font-weight:var(--font-weight-bold);font-size:var(--font-size-heading-modal);line-height:1;
  flex:1;display:flex;align-items:center;justify-content:center;}
.tc-tile__label{font-weight:var(--font-weight-regular);font-size:var(--font-size-caption);line-height:normal;color:var(--tl-color-text-inverse-default);}   /* Regular במקום SemiBold — תיקון אסף 2026-07-12 (מעדכן את 004) */
/* וריאנט גוש — רוחב גמיש לפי התוכן עם הגבלה (מעדכן את 005): שם קצר = קובייה קטנה כמו
   שורה/כסא; שם ארוך מתרחב עד השטח שנשאר, נשבר עד 2 שורות בלי "…", והפונט מתכווץ באחוזים
   עד רצפה בגודל התווית "גוש" (12px, caption). המספרים לעולם לא נחתכים (אסף 2026-07-11) */
.tc-tile--block{width:auto;flex:0 1 auto;min-width:66px;padding-inline:var(--space-md);}
.tc-tile--block .tc-tile__num{max-width:100%;min-width:0;overflow:hidden;white-space:normal;
  text-align:center;line-height:1.15;max-height:2.3em;}
/* מוצא אחרון: גם ברצפת הפונט צריך יותר מ-2 שורות → "…" בסוף השורה השנייה (fitBlockTiles מדליק) */
.tc-tile--block .tc-tile__num.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

/* ---- Stub chips ---- */
.tc-chips{display:flex;gap:var(--space-md);align-items:flex-start;}

/* ============================================================
   CARD 4 — INFO & TRANSACTION DETAILS (כרטיס מידע נוסף ופרטי עסקה)
   ============================================================ */
/* white middle: a vertical list of info blocks — sized so EVERYTHING fits the fixed
   635px card with NO internal scroll (the carousel wheel-handler would hijack it anyway).
   flex:1 lets it absorb any slack; content is tightened to stay within bounds. */
.tc-white--info{
  flex:1 1 auto;min-height:0;
  justify-content:flex-start;align-items:stretch;
  gap:var(--space-xl);padding:var(--space-lg);          /* 24px אוויר בין הבלוקים + 16px padding */
  overflow:hidden auto;overscroll-behavior:contain;text-align:right;   /* גלילה אנכית פנימית */
}
/* פס גלילה קבוע (רמז שהתוכן נגלל) */
.tc-white--info::-webkit-scrollbar{width:6px;}
.tc-white--info::-webkit-scrollbar-track{background:var(--tl-color-bg-surface-inv);border-radius:100px;margin:var(--space-xs) 0;}
.tc-white--info::-webkit-scrollbar-thumb{background:var(--tl-color-bg-surface-inv-selected);border-radius:100px;}
/* key/value rows (מחיר עסקה, הנחה, קופון, מספר פריטים) */
.tc-kv{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;}
.tc-kv__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);
  font-size:var(--font-size-body-small);line-height:1.25;
}
.tc-kv__row dt{color:var(--tl-color-text-inverse-default);font-weight:var(--font-weight-regular);}
.tc-kv__row dd{font-weight:var(--font-weight-semibold);color:var(--tl-color-text-inverse-default);}
.tc-kv__row dd.is-discount{color:var(--tl-color-state-success-main,#465b17);}        /* הנחה — ירוק success (טוקן) */
/* dashed divider between blocks (matches the card's tear-off language) */
.tc-sep{
  border:none;border-top:1px dotted var(--ta-color-border-subtle);
  width:100%;margin:0;flex:none;   /* המרווח מגיע מ-gap של ההורה (אוויר אחיד) */
}
/* labelled info block (מזמין / מפיק / כתובת) */
.tc-iblock{width:100%;display:flex;flex-direction:column;gap:var(--space-xs);}
.tc-iblock__h{font-size:var(--font-size-body-small);font-weight:var(--font-weight-bold);color:var(--tl-color-text-inverse-default);line-height:1.25;margin-bottom:var(--space-xs);}
.tc-iblock__line{font-size:var(--font-size-body-small);font-weight:var(--font-weight-regular);color:var(--tl-color-text-inverse-default,#000);line-height:1.3;}
/* address row: text on the right, nav button on the left */
.tc-addr{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-md);}
.tc-addr__txt{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0;}
/* "שדות נוספים" — opens extra fields in a separate popup */
.tc-morefields{
  width:100%;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  font-family:var(--font-family-live);font-size:var(--font-size-body-small);font-weight:var(--font-weight-semibold);color:var(--tl-color-text-inverse-default);
  padding:var(--space-xs) 0;
}
.tc-morefields svg{width:16px;height:16px;flex:none;}

/* actions band — round-icon buttons (הדפסה, שיתוף, פינוק…); 4-col grid.
   RTL grid flows right→left, so a partial last row stays right-aligned under
   the top row (יישור לימין ומסודר). */
.tc-acts{
  width:100%;flex:none;
  padding:var(--space-sm) var(--space-md);
  background:var(--tl-color-bg-surface-inv);
  border-top:1px dotted var(--ta-color-border-subtle);
  border-bottom:1px dotted var(--ta-color-border-subtle);
  transition:padding .34s cubic-bezier(.4,0,.2,1);
}
/* the 4-col grid lives in __full so it can collapse smoothly (max-height animatable) */
.tc-acts__full{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--space-md) var(--space-lg);
  overflow:hidden;max-height:280px;opacity:1;
  transition:max-height .34s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.tc-act{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);   /* 4px — תואם רווח tc-act בפיגמה */
  font-family:var(--font-family-live);color:var(--tl-color-text-inverse-default);
}
.tc-acts__title{
  grid-column:1/-1;text-align:center;
  font-family:var(--font-family-live);font-weight:var(--font-weight-bold);font-size:var(--font-size-body-small);color:var(--tl-color-text-inverse-default);
  margin-bottom:var(--space-xs);
}
/* collapse-to-kebab on scroll-down (expands on scroll-up) — smooth height+fade */
.tc-acts__kebab{
  display:flex;align-items:center;justify-content:center;width:100%;
  height:0;overflow:hidden;opacity:0;
  border:none;background:none;cursor:pointer;color:var(--tl-color-text-inverse-default);
  transition:height .34s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.tc-acts.is-collapsed{padding-top:var(--space-xs);padding-bottom:var(--space-xs);}   /* shorter gray band when collapsed */
.tc-acts.is-collapsed .tc-acts__full{max-height:0;opacity:0;}
.tc-acts.is-collapsed .tc-acts__kebab{height:22px;opacity:1;}
.tc-act__ic{
  width:32px;height:32px;flex:none;border-radius:100px;   /* תואם Button Category 32×32 בפיגמה */
  background:var(--tl-color-bg-baseAlt);
  box-shadow:0 2px 6px rgba(0,0,0,0.12);   /* צללית עדינה לעיגול */
  display:flex;align-items:center;justify-content:center;
}
.tc-act__ic svg{width:20px;height:20px;display:block;}
.tc-act__lbl{font-size:var(--font-size-caption,12px);font-weight:var(--font-weight-medium);line-height:1.15;text-align:center;white-space:nowrap;}
/* ביטול כרטיס — אדום: אייקון + מסגרת לעיגול + תווית על רקע אדום עדין */
.tc-act--danger .tc-act__ic{ color:var(--color-reds-400,#e02424); border:1.5px solid var(--color-reds-400,#e02424); }
.tc-act--danger .tc-act__lbl{ color:var(--color-reds-400,#e02424); background:rgba(224,36,36,0.1); border-radius:100px; padding:var(--space-xs) var(--space-sm); }

/* ---- Card 5 — ending card (תודה + טיקצ׳אק logo + producer logo + live-page links) ---- */
.tc-header--brand{padding:var(--space-lg) var(--space-md);}             /* header holds the Tickchak brand logo, centred */
.tc-brand-logo{height:42px;width:auto;display:block;}        /* big */
.tc-white--end{justify-content:center;align-items:center;text-align:center;gap:var(--space-2xl);}  /* content centred vertically */
.tc-white--end .tc-iblock{align-items:center;}              /* center label + logo + chips */
.tc-thanks__title{font-family:var(--font-family-live);font-weight:var(--font-weight-bold);font-size:var(--font-size-heading-modal);line-height:1.2;color:var(--tl-color-text-inverse-default);}
.tc-thanks__sub{font-family:var(--font-family-live);font-weight:var(--font-weight-regular);font-size:var(--font-size-body-small);line-height:1.3;color:var(--tl-color-text-inverse-default,#000);margin-top:var(--space-xs);}
.tc-prod-logo{height:66px;width:auto;display:block;margin-top:var(--space-sm);}  /* big */
/* live-page links — Button System CTA buttons with the entity name (no category label above) */
.tc-live-logo{display:block;height:28px;width:auto;margin:0 auto;}   /* Tickchak Live logo in place of the section title */
.tc-livelinks{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);width:100%;margin-top:var(--space-sm);}
.tc-livechip{gap:var(--space-sm);}                                   /* artist button: avatar + name */
.tc-livechip__av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;margin-inline-start:-12px;}  /* 16px CTA padding − 12 = 4px gap on the right (RTL) */

/* ---- Footer (logo + terms) ---- */
.tc-footer{
  flex:none;height:60px;width:100%;     /* Figma 11772:29828 — 330×60 (לוגו ממורכז; פדינג לא קריטי) */
  background:#fff;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);
  padding:var(--space-sm) var(--space-lg) var(--space-sm);   /* 8/16/8 — מעוגל לטוקנים */
}
.tc-footer--end{justify-content:center;}   /* ending card: terms only (no duplicate logo) */
.tc-logo{
  height:30px;width:105px;flex:none;
  display:block;object-fit:contain;
}
.tc-footer > .tc-logo:only-child{margin-inline:auto;}   /* כשאין תנאי שימוש לצדו — לוגו ממורכז */
.tc-terms{
  font-weight:var(--font-weight-regular);font-size:var(--font-size-caption);line-height:16px;
  color:var(--tl-color-text-inverse-default);text-decoration:underline;
}

/* ============================================================
   SHARED CHROME (below carousel)
   ============================================================ */
.tc-dots{display:flex;align-items:center;gap:var(--space-sm);direction:rtl;}
.tc-dot{
  width:6px;height:6px;border-radius:999px;
  background:var(--tl-color-bg-surface-hover);   /* ~white 30% */
  transition:width .25s ease, background .25s ease;
}
.tc-dot.is-active{width:18px;background:var(--tl-color-bg-baseAlt);}

.tc-actions{display:flex;align-items:flex-start;gap:var(--space-lg);padding:var(--space-lg) 0;direction:ltr;}
/* each action = icon button + label below (icons alone weren't clear) */
.tc-aitem{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);}
.tc-abtn__lbl{
  font-family:var(--font-family-live);font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);line-height:1.1;
  color:var(--tl-color-text-default);
  white-space:nowrap;text-align:center;direction:rtl;
}
.tc-abtn{
  width:44px;height:44px;flex:none;
  border:none;cursor:pointer;
  background:var(--tl-color-bg-surface);     /* rgba(255,255,255,.2) */
  border-radius:100px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.tc-abtn:hover{background:var(--tl-color-bg-surface-hover);}
.tc-abtn img{width:22px;height:22px;display:block;}

/* Swipe hint — a FLOATING tooltip in the exact "בחר את הכמות" qty-tooltip design
   (dark #333 bubble, radius 10, padding 8/16, diamond pointer). It floats fixed,
   hugged to the LEFT edge and vertically centred (not in the bottom chrome), with a
   hand/gesture icon + text. Pops in with a spring, then periodically nudges LEFT —
   the swipe direction. The glint version read as decoration; users didn't swipe. */
.tc-hint{
  position:fixed;left:14px;top:50%;
  transform:translateY(-50%);
  z-index:40;pointer-events:none;
  transition:opacity .3s ease;
}
/* shown only on the first card; once the user navigates it's gone for good */
.tc-hint.is-gone{opacity:0;}
/* vertical layout (icon ON TOP, text below) keeps the bubble compact — the
   side-by-side version was too wide. */
.tc-hint__bubble{
  position:relative;
  display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-sm);
  background:rgba(28,28,30,0.55);color:var(--tl-color-text-default);   /* dark glass */
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--tl-color-border-subtle);   /* white 20% */
  padding:var(--space-md) var(--space-lg);border-radius:14px;
  font-family:var(--font-family-live);white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  animation:tc-hint-pop .5s cubic-bezier(.34,1.6,.64,1) both;   /* once */
}
.tc-hint__bubble span{font-weight:var(--font-weight-regular);font-size:var(--font-size-body-small);line-height:1;color:var(--tl-color-text-default);}
/* bigger hand icon — it does a clear swipe motion itself, looping for attention
   (the whole hint is dismissed in JS after the first card change). */
.tc-hint__ic{
  width:32px;height:32px;flex:none;display:block;
  transform-origin:60% 80%;
  animation:tc-hint-swipe 2s ease-in-out .4s infinite;
}
/* spring pop-in (runs once) */
@keyframes tc-hint-pop{
  from{opacity:0;transform:translateX(8px) scale(.9);}
  to  {opacity:1;transform:translateX(0) scale(1);}
}
/* the HAND demonstrates the swipe — a big, clear sweep right→left with a tilt
   (like a real hand swiping), holds at each end, loops cleanly. */
@keyframes tc-hint-swipe{
  0%,14%  {transform:translateX(13px) rotate(11deg);}
  54%,70% {transform:translateX(-15px) rotate(-11deg);}
  100%    {transform:translateX(13px) rotate(11deg);}
}
@media (prefers-reduced-motion:reduce){
  .tc-hint__ic{animation:none;}
}