/* ==========================================================================
   Coupon Banner — Tickchak Design System
   Horizontal promo banner with gradient, CTA button, message + close
   Figma: Qw3YeURNIL8V1wdGubxIWQ node 875:5997
   Required: tokens.css, button.css
   ========================================================================== */

.coupon-banner{
  width:100%;
  min-height:58px;
  border-radius:var(--border-radius-xl);
  background:linear-gradient(to right,var(--color-coupon-red),var(--color-coupon-orange));
  display:flex;align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
  padding:var(--space-md) var(--space-lg);
  overflow:hidden;
}

/* Right group (in RTL): message text + close */
.coupon-banner__text{
  flex:0 1 auto;min-width:0;
  font-family:var(--font-family-app);
  font-size:var(--font-size-body-small);
  font-weight:var(--font-weight-regular);
  line-height:1.2;
  color:var(--ta-color-text-inverse);
  text-align:right;
}
.coupon-banner__close{
  width:var(--dim-6);height:var(--dim-6);
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;
}
.coupon-banner__close img{
  width:14px;height:14px;
}

/* Left CTA pill — Button System: Chip/Compact Primary Live Inverse
   (white bg, gradient text), Rubik Regular per Figma */
.coupon-banner .btn.chip.primary.live.inverse,
.coupon-banner .btn.chip.primary.live.inverse:hover:not(.disabled){
  background:var(--ta-color-bg-base);
  flex-shrink:0;
}
.coupon-banner__cta-text{
  font-family:var(--font-family-live);
  font-size:12px;
  font-weight:var(--font-weight-regular);
  line-height:16px;
  color:var(--ta-color-text-default);
}

/* ==========================================================================
   Coupon Redeem Button — replaces coupon icon when coupon is active
   Figma Coupon/RedeemButton Variant2 (node 3497:19824):
   h=44, rounded-full, px=8, gap=4, gradient bg
   content: [black count badge (Rubik Bold 14 white)] + [gift icon 17×17]
   ========================================================================== */
.coupon-redeem-btn{
  display:none;align-items:center;justify-content:center;
  gap:var(--space-xs);                                              /* Figma: 4 */
  direction:ltr;                                                    /* DOM[count, icon] → count LEFT, icon RIGHT (Figma geometric order) */
  background:linear-gradient(to right,var(--color-coupon-red),var(--color-coupon-orange));
  border-radius:100px;
  height:var(--dim-11);                                             /* Figma: 44 */
  padding:0 var(--space-sm);                                        /* Figma: px=8 */
  cursor:pointer;
}
.coupon-redeem-count{
  display:inline-flex;align-items:center;justify-content:center;
  background:#000;
  border-radius:var(--border-radius-full);
  padding:var(--space-xs) var(--space-sm);                          /* Figma: py=4 px=8 */
  font-family:var(--font-family-live);
  font-size:var(--font-size-body-small);                            /* 14 */
  font-weight:var(--font-weight-bold);
  line-height:1;
  color:#fff;
  min-width:var(--space-xl);                                        /* square-ish for single digit */
}
.coupon-redeem-icon{width:17px;height:17px;display:block;}
.t-icon-btn.coupon.is-redeemed{
  width:auto;height:auto;min-width:auto;padding:0;background:transparent;
}
.t-icon-btn.coupon.is-redeemed:hover{background:transparent;}
.t-icon-btn.coupon.is-redeemed .coupon-icon{display:none;}
.t-icon-btn.coupon.is-redeemed .coupon-redeem-btn{display:inline-flex;}