/* ==========================================================================
   Cart Card — Tickchak Design System
   Cart/checkout summary card — works for subscriptions AND tickets
   Figma ref: CheckoutSummaryCard 1438:152260
   Required: tokens.css
   Usage:
     <div class="cart-card [cart-card--collapsed]">
       header → divider → items → optional mini-summary
     </div>
     <div class="cart-grand"> ... grand total ... </div>
   ========================================================================== */

/* ===== Card container =====
   Tunable via CSS variables — override on .cart-card to customize: */
.cart-card{
  --cc-pad-x:var(--space-md);     /* horizontal padding of header/item rows — Figma 12 */
  --cc-pad-y:var(--space-md);     /* vertical padding of the card — Figma 12 */
  --cc-gap:var(--space-md);       /* gap between header / divider / item — Figma 12 (was 16) */
  --cc-row-gap:var(--space-sm);   /* gap inside item info group — Figma 8 */
  --cc-actions-gap:var(--space-md); /* gap inside item actions group — Figma 12 */
  --cc-sep-h:24px;
  --cc-sep-color:var(--color-grays-300);

  border:1px solid var(--ta-color-border-subtle);
  border-radius:var(--space-md);
  background:var(--ta-color-bg-base);
  display:flex;flex-direction:column;
  gap:var(--cc-gap);
  padding:var(--cc-pad-y) 0;
}

/* ===== Header: chevron LEFT + info + sticker RIGHT (per Figma 7648:29635 — DOM[chevron, info, sticker] with LTR axis) ===== */
.cart-card__header{
  display:flex;align-items:center;            /* Figma: P=CENTER */
  direction:ltr;          /* DOM order = visual LTR: chevron LEFT, sticker RIGHT */
  gap:var(--space-lg);
  padding:0 var(--cc-pad-x);
}
/* Restore RTL on text-bearing children so Hebrew renders correctly */
.cart-card__header .cart-card__info,
.cart-card__header .cart-card__name,
.cart-card__header .cart-card__meta,
.cart-card__header .cart-card__meta-row,
.cart-card__header .cart-card__badge{
  direction:rtl;
}
.cart-card__header > .btn.chip{
  align-self:center;
}
.cart-card__sticker{
  width:44px;height:44px;
  border-radius:3px;                           /* Figma StickerOption ref: ~2.93 */
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cart-card__sticker img{
  width:36px;height:36px;object-fit:contain;
}
.cart-card__info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  gap:7px;
  align-items:flex-start;
  text-align:right;
}
.cart-card__name{
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-button-primary);
  color:var(--ta-color-text-default);
  max-width:100%;
  word-break:break-word;
}
.cart-card__meta{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-regular);
  color:var(--color-grays-600);
  line-height:var(--line-height-caption);
  display:inline-flex;
  gap:4px;
  align-items:baseline;
  flex-wrap:nowrap;
  white-space:nowrap;
  width:auto;
  justify-content:flex-start;
}
.cart-card__meta .cart-card__meta-bold{
  font-weight:var(--font-weight-regular);   /* Figma default: Regular */
  color:var(--ta-color-text-default);
}
/* Inverse theme — meta bold is actually Bold per Figma state=*,theme=inverse */
.cart-card--inverse .cart-card__meta .cart-card__meta-bold{
  font-weight:var(--font-weight-bold);
  color:var(--tl-color-text-default);
}
.cart-card__badge{
  background:var(--color-pink-200);
  border-radius:5px;
  padding:0 var(--space-sm);
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-regular);
  line-height:100%;
  white-space:nowrap;flex-shrink:0;
  color:var(--ta-color-text-default);
  height:20px;
  display:flex;align-items:center;
}
/* Meta-row holds the badge + count info on the same line below the title */
.cart-card__meta-row{
  display:flex;align-items:center;
  gap:var(--space-md);
  flex-wrap:nowrap;
  max-width:100%;
  min-width:0;
}

/* Icon-only chip inside cart-card — square 28×28 circular, centered in row */
.cart-card .btn.chip{
  width:28px;height:28px;padding:0;
  align-self:center;
}
.cart-card .btn.chip .btn-ico{
  width:var(--dim-4);height:var(--dim-4);
  display:flex;align-items:center;justify-content:center;
}

/* Chevron toggle — appears only on collapsible cards */
.cart-card__toggle{
  width:var(--dim-7);height:var(--dim-7);
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;
  align-self:center;
  color:var(--ta-color-text-default);
  border-radius:100px;
  transition:transform .25s cubic-bezier(.4,0,.2,1), background .2s;
}
.cart-card__toggle:hover{background:var(--ta-color-bg-surface);}
.cart-card__toggle img,
.cart-card__toggle svg{width:var(--dim-4);height:var(--dim-4);display:block;}
.cart-card--collapsed .cart-card__toggle{
  transform:rotate(180deg);
}
/* Collapse — hide items + item-dividers (but keep subtotal-frame visible, per Figma state=collapsed) */
.cart-card--collapsed > .cart-card__item,
.cart-card--collapsed > .cart-card__group,
.cart-card--collapsed > .cart-card__divider{
  display:none;
}

/* ===== Divider ===== */
.cart-card__divider{
  height:1px;
  background:var(--ta-color-border-subtle);
}

/* ===== Item row (works for subscription item or ticket type) ===== */
.cart-card__item{
  display:flex;align-items:center;            /* Figma: C=CENTER */
  justify-content:space-between;
  padding:0 var(--cc-pad-x);
  gap:var(--cc-row-gap);
  min-height:32px;                            /* Figma baseline 32, grows if name wraps */
}
/* Left group — trash | sep | price | qty-pill (Figma: DOM[trash,sep,price,qty], LTR axis, gap 12) */
.cart-card__item-actions{
  display:flex;align-items:center;
  direction:ltr;                  /* trash LEFT, qty RIGHT within group, per Figma */
  gap:var(--cc-actions-gap);                  /* Figma: 12 */
  flex-shrink:0;
  height:100%;
}
.cart-card__item-info{
  flex:1;min-width:0;
  text-align:right;
  display:flex;flex-direction:column;
  align-items:flex-start;
  gap:2px;                          /* פיגמה: Item Lines / Seat Lines — רווח 2 */
}
/* New Figma structure — when item has both name + sibling sticker, render as row */
.cart-card__item-info-row{
  flex:1;min-width:0;
  display:flex;flex-direction:row-reverse;align-items:center;
  gap:var(--space-sm);
  height:100%;
}
.cart-card__item-info-row .cart-card__item-name{flex:1;min-width:0;}
/* 30/07: שורה שיש בה גם כמות — הכמות צמודה לשם, לא נזרקת לקצה השני.
   השם מפסיק להתמתח, והשלושה נדחפים יחד אל צד-המדבקה. כך בפיגמה (Frame 23030),
   שבה הכותרת HUG והרווח ביניהן 8. */
.cart-card__item-info > .cart-card__item-info-row:has(.cart-card__item-qty){width:auto;max-width:100%;}
.cart-card__item-info-row:has(.cart-card__item-qty) .cart-card__item-name{flex:0 1 auto;}
/* 30/07: כשהשורה יושבת בתוך עמודת-המידע (שם למעלה, כמות מתחתיו) — אסור לה
   למתוח את עצמה לגובה כל התא, אחרת שורת-הכמות נדחקת החוצה. */
.cart-card__item-info > .cart-card__item-info-row{flex:0 0 auto;height:auto;width:100%;}

/* ===== מפלס שני — סוג-כרטיס ומתחתיו אפשרויותיו (Figma CheckoutSummaryCard view=pricing) =====
   סוג-כרטיס יכול לשאת כמה שורות-בנות, ושתיהן אותו דבר בדיוק — פריט מלא עם מחיר,
   כמות ומחיקה (הכרעת אסף 29/07). שני השימושים:
     · אפשרויות הכרטיס — נכה · סטודנט · תוספות
     · פירוט המושב — גוש · שורה · כסא   (br.cart.items_scope באפיון)
   כשלסוג-כרטיס יש בנות, שורת-האב נושאת שם ומדבקה בלבד — המחיר יורד לבנות. */
/* קיבוץ: סוג-כרטיס יחד עם הבנות שלו (Figma Frame 23094 → Frame 23068, אסף 29/07).
   בלי הקיבוץ אי-אפשר יהיה לכווץ סוג-כרטיס עם כל הבנות שלו כיחידה אחת. */
.cart-card__group{
  display:flex;flex-direction:column;
  gap:var(--cc-gap);                 /* 12 — בין שורת-האב לבנות */
}
/* בין הבנות עצמן: בלי חוצץ, ורווח כפול (24) — הרווח הוא ההפרדה (אסף 29/07, בפיגמה) */
.cart-card__children{
  display:flex;flex-direction:column;
  gap:var(--space-xl);
}
.cart-card__item--parent .cart-card__item-actions{display:none;}
.cart-card__item--child{
  padding-inline-start:var(--space-xl);          /* Figma: 24 בצד-ההתחלה מול 12 בשורה רגילה */
}
/* סמן-ההסתעפות — הווקטור מפיגמה (13297:70684), לא תו-טקסט: התו נראה אחרת בכל גופן.
   מוטמע כמסכה כדי שייקח את צבע-הטקסט של השורה, ולכן עובד גם ב-inverse בלי גרסה שנייה. */
.cart-card__item-branch{
  flex-shrink:0;
  /* המסגרת מפיגמה (13301:70689): 8×22.5 — החץ צמוד למעלה, 8 רווח מתחתיו.
     כך ראש-החץ יושב בגובה השורה הראשונה של הטקסט ולא במרכזו האופטי. */
  width:8px;height:22.5px;
  background-color:currentColor;
  transform:scaleX(-1);            /* מראה ל-RTL — הרגל מימין, ראש-החץ שמאלה */
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207.872%2014.56'%3E%3Cpath%20d='M0%2012.016V0H1.136V10.88H4.976C4.48%2010.32%203.952%209.456%203.44%208.336H4.352C5.472%209.632%206.656%2010.608%207.872%2011.216V11.68C6.656%2012.288%205.472%2013.248%204.352%2014.56H3.44C3.952%2013.44%204.48%2012.576%204.976%2012.016H0Z'/%3E%3C/svg%3E") no-repeat top center/8px 14.56px;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207.872%2014.56'%3E%3Cpath%20d='M0%2012.016V0H1.136V10.88H4.976C4.48%2010.32%203.952%209.456%203.44%208.336H4.352C5.472%209.632%206.656%2010.608%207.872%2011.216V11.68C6.656%2012.288%205.472%2013.248%204.352%2014.56H3.44C3.952%2013.44%204.48%2012.576%204.976%2012.016H0Z'/%3E%3C/svg%3E") no-repeat top center/8px 14.56px;
}
/* שורת-בת בשתי שורות (הכרעת אסף 29/07): שם-הגוש למעלה, שורה+כסא מתחתיו בקטן.
   הסיבה: שם-גוש עלול להיות ארוך, ופרטי-המושב הם בדיוק מה שהקונה צריך כדי לזהות
   מה קנה — חיתוך בשלוש-נקודות היה מוחק אותם.
   ⚠️ הכרעה הפוכה מ-Decision 005 בכרטיס-הכניסה (שורה אחת + חיתוך), במכוון:
   שם זו קובייה גמישה על מסך שלם, כאן שורה צרה בסל. */
/* סמן-ההסתעפות יושב **מחוץ** לעמודת-הטקסט — אחרת השורה הראשונה מוסטת פנימה
   והשנייה מתחילה מהקצה, ושתיהן לא מיושרות (נתפס 29/07 מול המסך). */
.cart-card__item--child{
  align-items:flex-start;
  gap:var(--space-sm);
}
/* (רווח 2 עבר לכלל הבסיס של item-info — כל שורה, לא רק שורת-בת.) */
.cart-card__item--child .cart-card__item-actions{align-self:center;}
/* 30/07: שני כללי-ה-`:has` שהיו כאן נמחקו. הם הסתירו את התיאור כששורת-הפריט
   הכילה גלולת-כמות, והחזירו אותו בשורת-בת — היגיון שנולד מהפריסה הישנה, שבה
   הכמות ישבה בשורת-הפעולות. עכשיו הכמות היא שורה בעמודת-הטקסט, ושתיהן חיות יחד. */
/* בצבע הטקסט הרגיל, לא אפור (הכרעת אסף 29/07): שורה וכסא הם מידע-זיהוי ולא
   הערת-שוליים — רק גודל-הטקסט מבדיל בין שתי השורות. אותם טוקנים כמו item-name,
   ולכן שתי שורות — אחת לכל ערכת-נושא. */
.cart-card__item--child .cart-card__item-desc{
  color:var(--ta-color-text-default);
  font-size:var(--font-size-body);                  /* זהה ל-item-name — לא טקסט-משנה */
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-button-primary);
}
.cart-card--inverse .cart-card__item--child .cart-card__item-desc{color:var(--tl-color-text-default);}
.cart-card__item-name{
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);   /* Figma: expanded item title = Regular */
  line-height:var(--line-height-button-primary);
  color:var(--ta-color-text-default);
  white-space:normal;                          /* allow wrap — no ellipsis */
  word-break:break-word;
  width:100%;
}
/* Single variant — item title is Bold per Figma state=single */
.cart-card--single .cart-card__item-name{
  font-weight:var(--font-weight-bold);
}
.cart-card__item-desc{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-regular);
  color:var(--color-grays-600);
  line-height:var(--line-height-caption);
}
/* 🔴 30/07 (אסף): המסגרת הוסרה — הכמות היא **טקסט**, לא מרובע.
   המרובע נראה כשדה-כמות שאפשר לערוך, בעוד שהפעולה היחידה על פריט היא מחיקה
   (br.cart.item_actions). הפיגמה יושרה לזה (CheckoutSummaryCard 1433:151987, 16 מקומות).
   נשאר ליד המחיר **רק בשורת-מושב**, שבה השורה-שמתחת כבר תפוסה ב«שורה · כסא»
   (dec.cart.seat_row_two_lines). בכל שורה אחרת הכמות יורדת מתחת לשם — ראה item-desc. */
.cart-card__item-qty{
  background:transparent;
  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, rgba(0,0,0,0.4));
  line-height:var(--line-height-caption);
  white-space:nowrap;flex-shrink:0;
}
/* הכהה — הטוקן המשלים של אותה משפחה, בדיוק כמו שם-הפריט
   (TL/color/text/subtle מול TL/color/text/inverse/subtle). כך בפיגמה. */
.cart-card--inverse .cart-card__item-qty{
  color:var(--tl-color-text-subtle, rgba(255,255,255,0.6));
}
/* ⚠️ «סיכום הזמנה»/קבלה — **לא** הסל, ולכן לא נגעתי: המסגרת נשמרת שם במפורש.
   ושם היא גם נחוצה — השורה-שמתחת לשם כבר תפוסה בתיאור («בהצגת תעודת זהות»),
   כך שאין לכמות לאן לרדת. אם אסף יחליט שגם שם היא יורדת — למחוק את הבלוק הזה. */
.sub-accordion__body-inner .cart-card__item-qty,
.order-summary__body .cart-card__item-qty{
  border:1px solid var(--ta-color-border-subtle, rgba(0,0,0,0.1));
  border-radius:var(--space-xs);
  padding:var(--space-xs) var(--space-sm);
  display:flex;align-items:center;justify-content:center;
}
.cart-card__item-price{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-caption);
  white-space:nowrap;
  color:var(--ta-color-text-default);
  text-align:center;flex-shrink:0;
  min-width:40px;
}
/* Coupon pricing in cart — original + discounted + badge */
.cart-card__item-prices{
  display:none;align-items:center;gap:var(--space-sm);
  flex-shrink:0;
}
.cart-card__item.has-coupon .cart-card__item-price{display:none;}
.cart-card__item.has-coupon .cart-card__item-prices{display:flex;}
.cart-card__item-original{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);
  color:rgba(255,255,255,0.4);
  text-decoration:line-through;
  white-space:nowrap;
}
.cart-card__item-discounted{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-caption);
  color:#fff;
  white-space:nowrap;
}
.cart-card__coupon-badge{
  display:flex;align-items:center;gap:4px;
  background:linear-gradient(to right, var(--color-coupon-red, #ee3c5c), var(--color-coupon-orange, #fa6203));
  border-radius:100px;
  padding:var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs);
  flex-shrink:0;
}
.cart-card__coupon-badge .badge-icon{width:10px;height:10px;flex-shrink:0;}
.cart-card__coupon-badge .badge-info{
  width:16px;height:16px;border-radius:100px;
  background:#000;color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cart-card__coupon-badge .badge-info svg{width:10px;height:10px;display:block;}

/* Vertical divider before delete — separates action from content */
.cart-card__item-sep{
  width:1px;
  background:var(--cc-sep-color);
  flex-shrink:0;
  align-self:stretch;
}
.cart-card__item-delete{
  flex-shrink:0;
  align-self:center;
}

/* ===== Per-card subtotal — DOM[₪40, סה״כ] with LTR axis = ₪40 LEFT, סה״כ RIGHT (per Figma 7648:29670) ===== */
.cart-card__subtotal{
  display:flex;align-items:center;
  direction:ltr;                          /* match Figma's geometric layout */
  justify-content:space-between;
  padding:0 var(--space-lg);
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  line-height:var(--line-height-caption);
  color:var(--ta-color-text-default);
  font-weight:var(--font-weight-regular);
}
.cart-card__subtotal-label{
  /* "סה״כ" Regular per Figma */
}
.cart-card__subtotal-value{
  font-weight:var(--font-weight-bold);    /* "₪40" Bold per Figma */
  flex-shrink:0;
}

/* ===== Collapsible body ===== */
.cart-card__body{
  display:flex;flex-direction:column;
  gap:var(--space-lg);
  overflow:hidden;
  max-height:2000px;
  transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s;
}
/* איפוס-הרווח נועד למבנה עם עטיפת `cart-card__body`: היא מתקפלת לגובה 0, ובלי איפוס
   היו נשארים שני רווחים ריקים סביבה. בכרטיס **בלי** עטיפה (וכך בנויים כל הכרטיסים
   בפועל — רכישת-כרטיסים · רכישת-מינוי · דף-מרכז) האיפוס מוחק את הרווח בין הכותרת
   לשורת-הסכום, והקו נצמד לתמונה. תוקן 29/07 (אסף): חל רק כשיש עטיפה.
   מצב collapsed בקובץ-הרכיב בנוי בדיוק כך — בלי פריטים, עם הרווח הרגיל. */
.cart-card--collapsed:has(> .cart-card__body){
  gap:0;
}
.cart-card--collapsed .cart-card__body{
  max-height:0;
  opacity:0;
  pointer-events:none;
}

/* ===== Grand total — minimal row, no frame/shadow (Figma 7364:5611) ===== */
.cart-grand{
  /* שוליים מהצדדים — «מרגיש שהכל ברח לצדדים» (מוטי 30/07).
     הסיכום יושב מעט פנימה מהכפתור שמתחתיו, ולכן קורא כבלוק אחד ולא כשתי קצוות. */
  padding:0 var(--space-sm);
  background:transparent;
  border:none;
  border-radius:0;
  display:flex;align-items:center;
  gap:var(--space-md);
}
.cart-grand__icon{
  width:var(--dim-11);height:var(--dim-11);
  border-radius:var(--border-radius-full);
  background:var(--ta-color-bg-surface);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cart-grand__icon img{
  width:var(--dim-6);height:var(--dim-6);
}
.cart-grand__info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  gap:2px;
}
.cart-grand__label{
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-button-primary);
  color:var(--ta-color-text-default);
}
.cart-grand__meta{
  font-family:var(--font-family-app);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);
  color:var(--color-grays-600);
}
.cart-grand__total{
  font-family:var(--font-family-live);
  /* הוקטן 02/08 מ-22 ל-18 (מוטי 30/07: «הסכום גדול מדי, בולט יתר על המידה»).
     18 הוא heading-sub — עדיין גדול מהתווית שלצדו, אבל לא צועק. */
  font-size:var(--font-size-heading-sub,18px);
  font-weight:var(--font-weight-regular);
  line-height:1.2;
  color:var(--ta-color-text-default);
  flex-shrink:0;
}

/* ==========================================================================
   Single variant — no header, one item row + subtotal-frame (divider + סה״כ row)
   Maps to Figma: state=single (8347:22087) and state=singleWithCoupon (8348:22092)
   ========================================================================== */
.cart-card--single{
  --cc-gap:var(--space-lg);       /* 16px between item row and subtotal-frame */
  padding:var(--cc-pad-y) 0;       /* keep 12 vertical, 0 horizontal */
}
.cart-card--single > .cart-card__header{
  display:none;                    /* single has no header */
}
.cart-card--single .cart-card__item{
  padding:0 var(--cc-pad-x);
}
/* Subtotal frame wraps divider + row with internal gap 8 per Figma (h=28) */
.cart-card__subtotal-frame{
  display:flex;flex-direction:column;
  gap:var(--space-sm);
}
/* Mini-sticker per item row (expanded) — Figma StickerOption sm-x, 24×24 */
.cart-card__item-sticker{
  width:24px;height:24px;
  border-radius:3px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:#68DBDD;
}
.cart-card__item-sticker img,
.cart-card__item-sticker svg{
  width:100%;height:100%;object-fit:cover;
}
/* Single variant — larger sticker (44×44, sm size per Figma) */
.cart-card--single .cart-card__item-sticker{
  width:44px;height:44px;
}
/* ==========================================================================
   Figma prop opt-outs — defaults match component defaults (all bools = true).
   Apply these modifier classes to opt OUT of a feature.
   ========================================================================== */

/* hasMiniSticker=false — hide all per-item mini-stickers */
.cart-card--no-mini-sticker .cart-card__item-sticker,
.cart-card.no-mini-sticker .cart-card__item-sticker{display:none;}

/* hasSeriesTag=false — hide the "סדרה פתוחה" badge in header */
.cart-card--no-series-tag .cart-card__badge{display:none;}

/* hasCoupon=false — hide all coupon-related UI in items + subtotal */
.cart-card--no-coupon .cart-card__coupon-badge,
.cart-card--no-coupon .cart-card__item-original,
.cart-card--no-coupon .cart-card__item-prices,
.cart-card--no-coupon .cart-card__coupon-pill,
.cart-card--no-coupon .cart-card__price-original,
.cart-card--no-coupon .cart-card__subtotal-original,
.cart-card--no-coupon .cart-card__subtotal-discount{display:none;}
/* Restore default price (non-coupon) when coupon is opted out */
.cart-card--no-coupon .cart-card__item.has-coupon .cart-card__item-price{display:inline-block;}

/* Single — DOM[sticker, info] = sticker RIGHT (RTL first child), info LEFT of sticker */
.cart-card--single .cart-card__single-content{
  display:flex;align-items:center;
  gap:var(--space-sm);
  flex-shrink:0;
}
.cart-card--single .cart-card__item-info{
  align-items:flex-start;            /* RTL: flex-start = right (text right-aligned) */
  text-align:right;
  flex:0 1 auto;
}
/* Title — Rubik Bold 16/20 per Figma (matches existing .cart-card__item-name) */
/* Qty — Rubik Regular 12/16 with 40% black opacity per Figma */
.cart-card--single .cart-card__item-desc{
  color:var(--ta-color-text-subtle);
}

/* Actions — DOM[trash, sep, price] with LTR axis: trash LEFT, price RIGHT within group */
.cart-card--single .cart-card__item-actions{
  direction:ltr;
  align-items:center;
}
/* Price — Rubik Bold 12/16 per Figma (matches existing .cart-card__item-price) */

/* Coupon row — gradient pill (icon-only) + price stack (original strikethrough TOP, discounted BOLD BOTTOM)
   Figma 8498:36595 — DOM[pill, price-stack] LTR = pill LEFT, prices RIGHT */
.cart-card__coupon-row{
  display:flex;align-items:center;
  gap:var(--space-xs);                        /* Figma: 4px between pill and stack */
  direction:ltr;
}
/* Vertical stack — original on top, discounted on bottom (Figma 8700:21837) */
.cart-card__price-stack{
  display:inline-flex;flex-direction:column;
  align-items:center;
  text-align:right;
  white-space:nowrap;
}
/* Figma 8498:36564: gradient circle, icon-only, padding 4, rounded full */
.cart-card__coupon-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--space-xs);                    /* Figma: 4px all sides */
  border-radius:100px;
  background:linear-gradient(90deg, #ee3c5c 0%, #fa6203 100%);
  flex-shrink:0;
}
.cart-card__coupon-pill svg,
.cart-card__coupon-pill img{
  width:12px;height:12px;flex-shrink:0;       /* Figma 8498:36565: 12×12 */
  display:block;
}
/* Figma 8498:36566: Bold 12, black (default) / white (inverse) */
.cart-card__coupon-amount{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-caption);
  color:var(--ta-color-text-default);
  white-space:nowrap;
}
.cart-card__price-original{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);
  color:var(--tl-color-text-disabled-brand);  /* Figma 8498:36567: disabled-brand #b1b1b1 */
  text-decoration:line-through;
  white-space:nowrap;
}

/* Single's separator — full row height */
.cart-card--single .cart-card__item-sep{
  width:1px;height:44px;
  background:var(--ta-color-border-subtle);
  flex-shrink:0;
}

/* ===== Subtotal — coupon variant: 3 sections (₪total+₪original | gradient discount | סה״כ) ===== */
.cart-card__subtotal--coupon{
  justify-content:space-between;
  gap:var(--space-sm);
}
/* Left cluster: final total + original (line-through), side by side */
.cart-card__subtotal-totals{
  display:inline-flex;align-items:center;
  gap:var(--space-xs);
  direction:ltr;                            /* DOM[value, original] → value LEFT, original RIGHT */
}
.cart-card__subtotal-original{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);
  color:var(--tl-color-text-disabled-brand,#b1b1b1);   /* Figma: gray strikethrough */
  text-decoration:line-through;
  white-space:nowrap;
}
.cart-card--inverse .cart-card__subtotal-original{
  color:var(--tl-color-text-subtle);
}
/* Middle cluster — «יותר פשוט» (אסף 21/08): בלי גלולה — אייקון-מתנה צבעוני
   וטקסט בגרדיאנט-הקופון, שורה אחת. DOM[amount, label, icon] LTR. */
.cart-card__subtotal-discount{
  display:inline-flex;align-items:center;
  gap:var(--space-xs);
  direction:ltr;
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);
  white-space:nowrap;
}
.cart-card__subtotal-discount > span,
.cart-card__subtotal-discount-amount,
.cart-card__subtotal-discount-text{
  background:linear-gradient(90deg, var(--color-coupon-red, #ee3c5c) 0%, var(--color-coupon-orange, #fa6203) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  white-space:nowrap;
}
/* Amount — Bold per Figma */
.cart-card__subtotal-discount > span:first-child,
.cart-card__subtotal-discount-amount,
.cart-card__subtotal-discount [data-discount-amount]{
  font-weight:var(--font-weight-bold);
}
/* אייקון-המתנה הצבעוני (gift-coupon.svg) — בלי היפוך-לבן */
.cart-card__subtotal-discount-icon{
  width:14px;height:14px;flex-shrink:0;
  display:block;
}
/* Inverse theme: ₪N amount is Bold per Figma singleWithCoupon inverse (node 8396:19844) */
.cart-card--inverse .cart-card__subtotal-discount-amount{
  font-weight:var(--font-weight-bold);
}

/* ==========================================================================
   Inverse theme — dark surface (for cart popover / dark containers)
   Matches Figma variants: `theme=inverse` on CheckoutSummaryCard
   Usage: add `cart-card--inverse` class to the .cart-card element
   ========================================================================== */
.cart-card--inverse{
  background:transparent;
  border-color:var(--tl-color-border-subtle);        /* white 20% */
}
/* Main text (titles, prices, totals, meta-bold, coupon amount) — white */
.cart-card--inverse .cart-card__name,
.cart-card--inverse .cart-card__item-name,
.cart-card--inverse .cart-card__item-price,
.cart-card--inverse .cart-card__meta-bold,
.cart-card--inverse .cart-card__subtotal-value,
.cart-card--inverse .cart-card__subtotal-label,
.cart-card--inverse .cart-card__coupon-amount{
  color:var(--tl-color-text-default);
}
/* Subtle text (meta, desc, qty chip, line-through originals) — Figma: disabled-brand grays/400 */
.cart-card--inverse .cart-card__meta,
.cart-card--inverse .cart-card__item-desc,
.cart-card--inverse .cart-card__price-original,
.cart-card--inverse .cart-card__subtotal-original{
  color:var(--tl-color-text-disabled-brand);
}
/* Dividers + separators — white 20% (same as border) */
.cart-card--inverse .cart-card__divider,
.cart-card--inverse .cart-card__item-sep,
.cart-card--inverse .cart-card__subtotal{
  background:var(--tl-color-border-subtle);
}
.cart-card--inverse .cart-card__divider,
.cart-card--inverse .cart-card__item-sep{
  background:var(--tl-color-border-subtle);
}
.cart-card--inverse .cart-card__subtotal{
  background:transparent;                           /* reset — the row itself isn't a divider */
}
.cart-card--inverse .cart-card__subtotal-frame .cart-card__divider{
  background:var(--tl-color-border-subtle);
}
/* Single variant — inner separator */
.cart-card--inverse.cart-card--single .cart-card__item-sep{
  background:var(--tl-color-border-subtle);
}
/* Chevron toggle + trash icons — invert black→white */
.cart-card--inverse .cart-card__toggle{
  color:var(--tl-color-text-default);
}
.cart-card--inverse .cart-card__toggle img,
.cart-card--inverse .cart-card__item-delete img,
.cart-card--inverse .cart-card__header > .btn.chip img{
  filter:brightness(0) invert(1);
}
/* Hover surface on chevron — white glaze */
.cart-card--inverse .cart-card__toggle:hover{
  background:var(--tl-color-bg-surface);
}
/* Cart grand total (when inside inverse container) — white */
.cart-card--inverse + .cart-grand .cart-grand__label,
.cart-card--inverse + .cart-grand .cart-grand__total,
.cart-grand--inverse .cart-grand__label,
.cart-grand--inverse .cart-grand__total{
  color:var(--tl-color-text-default);
}
.cart-grand--inverse .cart-grand__meta{
  color:var(--tl-color-text-subtle);
}
.cart-grand--inverse .cart-grand__icon{
  background:var(--tl-color-bg-surface);
}
.cart-grand--inverse .cart-grand__icon img{
  filter:brightness(0) invert(1);
}

/* ── תוכן כפתור «לתשלום» — שורת-טקסט אחת ───────────────────────────────────
   br.cart.content §2: «מספר הפריטים מופיע בתוך הכפתור — כמות הפריטים».

   **הכל טקסט אחד: «לתשלום (12) ‹»** (אסף 02/08).
   קודם היו שלושה ילדים נפרדים (טקסט · מספר · אייקון-חץ), ואז הרווחים ביניהם
   נקבעו ע"י `gap` של הכפתור ולא ע"י רווחי-הטקסט — מה שנתן מרווחים לא-אחידים
   ותחושה של שלושה גופים על כפתור אחד. עכשיו זו מחרוזת אחת, והרווחים הם
   פשוט רווחים.
   **החץ הוא האייקון של המערכת** (arrow-left-bold), לא תו. תו כיווני מתהפך
   לבד ב-RTL — «‹» נראה כ-«›» (נתפס ע"י אסף 02/08). ומכיוון שהתווית היא
   ילד **אחד**, נשאר בדיוק gap אחד בין הטקסט לחץ — הרווחים אחידים גם כך.
   ========================================================================== */
.cart-cta__label{
  display:inline;              /* גוף אחד — ולכן יש בדיוק מרווח אחד עד החץ */
  font-variant-numeric:tabular-nums;
}
/* מיושר לכפתור-ההמשך שבסרגל-הפעולה (`.actionbar__cta`), שהוא הכפתור שאסף
   הצביע עליו כנכון: מרווח 4 וחץ 20. מערכת-הכפתורים נותנת 8 ו-19, וההפרש
   נראה. נמדד בשני הדפים 02/08. */
.btn:has(> .cart-cta__label){ gap:var(--space-xs); }
.btn:has(> .cart-cta__label) .btn-ico,
.btn:has(> .cart-cta__label) .btn-ico img{ width:var(--dim-5); height:var(--dim-5); }