/* ==========================================================================
   Coupon Popup — Tickchak Design System
   Coupon/benefit redemption popup with gradient header
   Figma: Qw3YeURNIL8V1wdGubxIWQ node 3536:14684
   Required: tokens.css, button.css
   Usage: <div class="coupon-popup"> ... </div>
   ========================================================================== */

/* Container — flexible, max 375px wide
   Figma: radius 32 (space-2xl), pad-top 16 (space-lg), gap 16, VERTICAL */
.coupon-popup{
  width:100%;
  max-width:375px;
  min-height:724px;
  border-radius:var(--space-2xl);
  background:linear-gradient(to right,var(--color-coupon-red),var(--color-coupon-orange));
  display:flex;flex-direction:column;
  gap:var(--space-lg);
  padding-top:var(--space-lg);
  align-items:center;
  position:relative;
  overflow:visible;
}

/* Top row with close (right) and optional back (left) */
.coupon-popup__top{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:0 var(--space-lg);
  flex-shrink:0;
}
/* Close button — default: right edge when no back button */
.coupon-popup__close{
  align-self:flex-start;
  margin-right:var(--space-lg);
  width:var(--dim-11);height:var(--dim-11);
  border-radius:100px;
  background:var(--tl-color-bg-surface);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.coupon-popup__close img{width:var(--dim-5);height:var(--dim-5);}
/* When inside top row, reset align-self and margin */
.coupon-popup__top .coupon-popup__close{
  align-self:auto;
  margin-right:0;
}
/* Back button — same styling as close, positioned at left */
.coupon-popup__back{
  width:var(--dim-11);height:var(--dim-11);
  border-radius:100px;
  background:var(--tl-color-bg-surface);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.coupon-popup__back img{width:var(--dim-5);height:var(--dim-5);}
/* חץ ה-DS החדש (3083:11020) כבר מצביע ימינה — אין צורך ב-flip (הוסר 9/7/2026) */

/* Logo image for benefitApplied state */
.coupon-popup__logo{
  width:210px;
  height:58px;
  object-fit:contain;
  align-self:center;
}

/* Friends icon + label (big circular display for friendsConnect) */
.coupon-popup__friends-icon-big{
  width:70px;
  height:70px;
  display:block;
}
.coupon-popup__friends-header{
  display:flex;flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}
.coupon-popup__friends-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);
  background:linear-gradient(to right,var(--color-coupon-red),var(--color-coupon-orange));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* === friendsApplied: user info block === */
.coupon-popup__user-block{
  display:flex;flex-direction:column;
  gap:var(--space-md);
  align-items:flex-start;
  padding:0 var(--space-lg);
  width:100%;
  flex-shrink:0;
}
.coupon-popup__user-row{
  display:flex;align-items:center;
  gap:var(--space-xs);
  align-self:center;
}
.coupon-popup__user-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-inverse);
  white-space:nowrap;
}
.coupon-popup__user-avatar{
  width:var(--dim-8);
  height:var(--dim-8);
  border-radius:var(--border-radius-full);
  object-fit:cover;
  flex-shrink:0;
}
.coupon-popup__audience{
  width:100%;
  height:var(--dim-11);
  border-radius:var(--border-radius-full);
  background:var(--ta-color-bg-base);
  border:none;cursor:pointer;
  padding:0 var(--space-lg);
  display:flex;align-items:center;
  gap:var(--space-sm);
}
.coupon-popup__audience-text{
  flex:1;
  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);
  background:linear-gradient(to right,var(--color-coupon-red),var(--color-coupon-orange));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-align:right;
}
.coupon-popup__audience-arrow{
  width:var(--dim-6);
  height:var(--dim-6);
  flex-shrink:0;
}

/* friendsApprovedWithCoupon: row with audience pill + logout button */
.coupon-popup__audience-row{
  display:flex;align-items:center;
  gap:var(--space-sm);
  width:100%;
}
.coupon-popup__logout{
  width:var(--dim-11);
  height:var(--dim-11);
  border-radius:100px;
  background:var(--tl-color-bg-surface);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.coupon-popup__logout img{
  width:var(--dim-5);
  height:var(--dim-5);
}

/* Body subtitle text (dark, inside white card) */
.coupon-popup__body-subtitle{
  font-family:var(--font-family-app);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  line-height:1.4;
  color:var(--ta-color-text-default);
  text-align:center;
  width:100%;
}

/* Header text area — padding xl horizontal, md vertical */
.coupon-popup__header{
  display:flex;flex-direction:column;
  gap:var(--space-sm);
  align-items:flex-start;
  padding:var(--space-md) var(--space-xl);
  text-align:right;
  color:var(--ta-color-text-inverse);
  width:100%;
  flex-shrink:0;
}
/* Title — Rubik SemiBold 28/115% (heading-page) */
.coupon-popup__title{
  font-family:var(--font-family-live);
  font-size:var(--font-size-heading-page);
  font-weight:var(--font-weight-semibold);
  line-height:1.15;
  width:100%;
}
/* Subtitle — Rubik Regular 16/20 (body) */
.coupon-popup__subtitle{
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-button-primary);
  width:100%;
}

/* Friends button — white pill with gradient text */
.coupon-popup__friends-btn{
  width:calc(100% - var(--space-2xl));
  margin:0 var(--space-lg);
  height:var(--dim-11);
  border-radius:var(--border-radius-full);
  background:var(--ta-color-bg-base);
  border:1px solid var(--ta-color-bg-base);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  gap:10px;
  flex-shrink:0;
}
.coupon-popup__friends-text{
  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);
  background:linear-gradient(to right,var(--color-coupon-red),var(--color-coupon-orange));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.coupon-popup__friends-icon{
  width:var(--dim-5);height:var(--dim-5);
}

/* White content card — flex grow, gap 16, rounded top */
.coupon-popup__body{
  flex:1;min-height:0;
  width:100%;
  background:var(--ta-color-bg-base);
  border-radius:var(--space-xl) var(--space-xl) var(--space-2xl) var(--space-2xl);
  padding:var(--space-2xl) var(--space-lg);
  display:flex;flex-direction:column;
  gap:var(--space-lg);
  align-items:stretch;
  overflow-y:auto;
}

/* Section title — Assistant Regular 16/140% (body, 140% lh) */
.coupon-popup__section-title{
  font-family:var(--font-family-app);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  line-height:1.4;
  color:var(--ta-color-text-default);
  text-align:center;
  width:100%;
}

/* Divider with text — Assistant Regular 16/140%, black */
.coupon-popup__divider{
  display:flex;align-items:center;
  gap:var(--space-md);
  width:100%;
}
.coupon-popup__divider-line{
  flex:1;height:1px;
  background:var(--ta-color-border-subtle);
}
.coupon-popup__divider-text{
  font-family:var(--font-family-app);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  line-height:1.4;
  color:var(--ta-color-text-default);
  text-align:center;
  white-space:nowrap;
}

/* Help circle "?" — Assistant Bold 13.33/110% white on black */
.coupon-popup__help{
  width:var(--dim-6);height:var(--dim-6);
  border-radius:var(--border-radius-full);
  background:var(--ta-color-text-default);
  color:var(--ta-color-text-inverse);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-family-app);
  font-size:13.33px;
  font-weight:var(--font-weight-bold);
  line-height:1.1;
  flex-shrink:0;
}

/* CTAs inside coupon popup — Rubik Regular (not Bold) per Figma */
.coupon-popup .btn.cta{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
}

/* === Coupon Applied state === */
.coupon-popup__success{
  display:flex;flex-direction:column;
  align-items:center;
  gap:var(--space-lg);
  width:100%;
}
/* Big green check — from Figma export (74×74 SVG with embedded circle) */
.coupon-popup__success-check{
  width:74px;height:74px;
  flex-shrink:0;
  display:block;
}
.coupon-popup__success-check.is-animating{
  animation:cpCheckBounce .8s ease-out;
}
@keyframes cpCheckBounce{
  0%{transform:scale(0) rotate(-180deg);opacity:0;}
  50%{transform:scale(1.1) rotate(10deg);}
  70%{transform:scale(.9) rotate(-5deg);}
  100%{transform:scale(1) rotate(0deg);opacity:1;}
}
/* Success title — Rubik Regular 20/120% (Figma exact, fixed not responsive) */
.coupon-popup__success-title{
  font-family:var(--font-family-live);
  font-size:20px;
  font-weight:var(--font-weight-regular);
  line-height:1.2;
  color:var(--ta-color-text-default);
  text-align:center;
}
/* Coupon code box — Figma 3994:13201: pad:8/16/8/8, gap:8, radius:8, subtle border */
.coupon-popup__code-box{
  width:100%;
  background:transparent;
  border:1px solid var(--ta-color-border-subtle, rgba(0,0,0,0.1));
  border-radius:var(--border-radius-md);
  padding:var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
  display:flex;align-items:center;
  gap:var(--space-sm);
}
/* Trash button — 40×44 transparent (Subtle variant), icon 16×16 black */
.coupon-popup__code-delete{
  width:40px;
  height:var(--dim-11);     /* 44 */
  background:transparent;
  border:none;cursor:pointer;
  outline:none;
  border-radius:var(--border-radius-full);
  padding:0 var(--space-md); /* 0/12/0/12 */
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.coupon-popup__code-delete:focus,
.coupon-popup__code-delete:focus-visible{outline:none;}
.coupon-popup__code-delete img{
  width:var(--dim-4);        /* 16 */
  height:var(--dim-4);
}
/* Vertical divider 1px × 44px — subtle to match code box border */
.coupon-popup__code-divider{
  width:1px;
  height:var(--dim-11);      /* 44 */
  background:var(--ta-color-border-subtle, rgba(0,0,0,0.1));
  flex-shrink:0;
}
/* Info frame — Figma: flex-col, gap:4, align-end */
.coupon-popup__code-info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  gap:var(--space-xs);       /* 4 */
  text-align:right;
  align-items:flex-start;
}
/* Code line with label + number (voucher) */
.coupon-popup__code-line{
  display:flex;align-items:center;
  gap:var(--space-xs);       /* 4 */
}

/* Tall code box for benefit state (with bank logo + 2 rows) */
.coupon-popup__code-box--tall .coupon-popup__code-delete{
  height:68px;  /* matches taller content area */
}
.coupon-popup__code-box--tall .coupon-popup__code-divider{
  height:68px;
}
/* Bank logo inside code-info — h:32, w:auto */
.coupon-popup__code-logo{
  height:32px;
  width:auto;
  object-fit:contain;
  flex-shrink:0;
}

/* === Input rows (voucherApplied state) === */
.coupon-popup__input-row{
  display:flex;align-items:center;
  gap:11px;
  width:100%;
}
/* Row trash button — 32×32 transparent (Subtle) per Figma spec */
.coupon-popup__row-delete{
  width:var(--dim-8);   /* 32 */
  height:var(--dim-8);  /* 32 */
  background:transparent;
  border:none;cursor:pointer;
  border-radius:var(--border-radius-full);
  padding:0;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.coupon-popup__row-delete img{
  width:var(--dim-4);
  height:var(--dim-4);
}
.coupon-popup__code-number{
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-button-primary);
  color:var(--ta-color-text-default);
}
.coupon-popup__code-desc{
  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);
}

/* Gift illustration — absolute top center */
.coupon-popup__illustration{
  position:absolute;
  top:-52px;
  left:50%;
  transform:translateX(-50%);
  width:115px;height:112px;
  object-fit:contain;
  pointer-events:none;
  z-index:2;
}

/* ==========================================================================
   Coupon Code Sheet — popup-over-popup (bottom sheet)
   Opens on top of .coupon-popup when user clicks "הזינו קוד קופון או שובר".
   Cream bg, rounded top, matches Figma Make design (jEjKsHaiLFPeNsvY7978Wy).
   Uses .lff (live-form-field) for the input and .btn (button system) for CTAs.
   ========================================================================== */

/* Backdrop — covers entire coupon-popup including overflow above */
.coupon-code-backdrop{
  position:absolute;
  inset:-60px 0 0 0;
  background:rgba(0,0,0,0.5);
  border-radius:var(--space-2xl);
  z-index:10;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.coupon-code-backdrop.is-open{
  opacity:1;pointer-events:auto;
}

/* Sheet — absolute, anchored to bottom of .coupon-popup, slides up / slides down */
.coupon-code-sheet{
  position:absolute;
  bottom:0;left:0;right:0;
  background:var(--tl-color-bg-baseAlt,#fff);
  border-radius:20px 20px var(--space-2xl) var(--space-2xl);
  padding:var(--space-xl) var(--space-lg);
  z-index:11;
  display:flex;flex-direction:column;
  gap:var(--space-lg);
  opacity:0;visibility:hidden;
  transform:translateY(100%);
  transition:
    transform .4s cubic-bezier(.32,.72,0,1),
    opacity .28s ease,
    visibility 0s linear .4s;
  overflow:visible; /* failed/success icon floats above the sheet */
}
.coupon-code-sheet.is-open{
  opacity:1;visibility:visible;
  transform:none;   /* none ולא translateY(0): אב עם transform «תופס» את ה-input הקבוע (ראו סוף הקובץ) */
  transition:
    transform .4s cubic-bezier(.32,.72,0,1),
    opacity .28s ease,
    visibility 0s linear 0s;
}

/* Sub-views — toggle via [data-view] on parent */
.coupon-code-sheet__view{display:none;flex-direction:column;gap:var(--space-lg);width:100%;}
.coupon-code-sheet[data-view="input"] .coupon-code-sheet__view--input{display:flex;}
.coupon-code-sheet[data-view="success"] .coupon-code-sheet__view--success{display:flex;align-items:center;text-align:center;padding-top:90px;}
.coupon-code-sheet[data-view="failed"] .coupon-code-sheet__view--failed{display:flex;align-items:center;text-align:center;padding-top:90px;}

/* Button row */
.coupon-code-sheet__buttons{
  display:flex;
  gap:var(--space-lg);
  width:100%;
}

/* Confirm button — loading state: gray bg + spinner (matches Figma Make disabled look) */
.coupon-code-sheet__confirm-spinner{display:none;}
.coupon-code-sheet__confirm.is-loading{
  background:var(--color-grays-200,#e0e0e0) !important;
}
.coupon-code-sheet__confirm.is-loading .coupon-code-sheet__confirm-label{display:none;}
.coupon-code-sheet__confirm.is-loading .coupon-code-sheet__confirm-spinner{
  display:inline-block;
  width:20px;height:20px;
  border:2.5px solid rgba(0,0,0,0.2);
  border-top-color:var(--color-grays-500,#999);
  border-radius:50%;
  animation:coupon-spin .8s linear infinite;
}
@keyframes coupon-spin{to{transform:rotate(360deg);}}

/* Failed view — 144px red circle floats above the sheet (top:-72px) */
.coupon-code-sheet__floating-icon{
  position:absolute;
  left:50%;top:-72px;
  width:144px;height:144px;
  margin-left:-72px;
  pointer-events:none;
}
.coupon-code-sheet__floating-icon--error{
  animation:coupon-error-pop .8s ease-out;
}
.coupon-code-sheet__floating-icon--success{
  animation:coupon-check-bounce .8s ease-out;
}
@keyframes coupon-check-bounce{
  0%{transform:scale(0) rotate(-180deg);opacity:0;}
  50%{transform:scale(1.1) rotate(10deg);}
  70%{transform:scale(.9) rotate(-5deg);}
  100%{transform:scale(1) rotate(0deg);opacity:1;}
}
@keyframes coupon-error-pop{
  0%{transform:scale(0) rotate(0deg);opacity:0;}
  50%{transform:scale(1.1) rotate(5deg);}
  60%{transform:scale(.95) rotate(-5deg);}
  70%{transform:scale(1.05) rotate(3deg);}
  100%{transform:scale(1) rotate(0deg);opacity:1;}
}
.coupon-code-sheet__headline{
  font-family:var(--font-family-live);
  font-size:44px;
  font-weight:var(--font-weight-regular);
  line-height:1;
  color:var(--ta-color-text-default);
  animation:coupon-shake .6s ease-out .2s;
}
.coupon-code-sheet__headline--success{
  animation:coupon-bounce .6s ease-out .2s;
}
@keyframes coupon-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@keyframes coupon-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-10px);}
  75%{transform:translateX(10px);}
}
.coupon-code-sheet__msg{
  font-family:var(--font-family-live);
  font-size:18px;
  font-weight:var(--font-weight-regular);
  line-height:1.2;
  color:var(--ta-color-text-default);
  max-width:280px;
}

/* lff override inside the sheet — width 100% (lff-wrap defaults to 351px fixed) */
.coupon-code-sheet .lff-wrap{width:100%;}

/* Hidden native input inside the lff wrap — absolute over the lff element */
.coupon-code-sheet .lff-wrap input[type="text"]{
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;height:100%;
  border:none;background:transparent;outline:none;
  text-align:right;
}

/* ==========================================================================
   Club Selector — miniPopup overlay inside coupon-popup
   Opens when user clicks "יש לי קוד דרך מועדון / ועד".
   Same popup-over-popup pattern as the coupon code sheet.
   ========================================================================== */

/* Backdrop — covers entire coupon-popup including overflow (illustration above) */
.club-popup-backdrop{
  position:absolute;
  inset:-60px 0 0 0;
  background:rgba(0,0,0,0.5);
  border-radius:var(--space-2xl);
  z-index:10;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.club-popup-backdrop.is-open{
  opacity:1;pointer-events:auto;
}

/* Wrap — positions the miniPopup inside coupon-popup */
.club-popup-wrap{
  position:absolute;
  inset:0;
  z-index:11;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.club-popup-wrap.is-open{
  opacity:1;visibility:visible;
  pointer-events:auto;
  transition:opacity .3s ease, visibility 0s linear 0s;
  overscroll-behavior:contain;
  overflow:hidden;
}

/* miniPopup inside the wrap — fixed height so search doesn't resize */
.club-popup-wrap .minipopup{
  width:100%;
  border-radius:var(--r-2xl, 24px) var(--r-2xl, 24px) var(--space-2xl) var(--space-2xl);
  box-shadow:none;
  animation:none;
  height:80%;
  max-height:80%;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* Slot override — scrollable list, fixed height so search doesn't resize popup */
.club-popup__list{
  flex:1;min-height:200px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0;
}

/* Item row — 64px, pad xl, gap sm, RTL: name(right) logo(left) */
.club-popup__item{
  display:flex;align-items:center;
  gap:var(--space-sm);
  height:64px;
  padding:0 var(--space-xl);
  cursor:pointer;
  transition:background .15s;
}
.club-popup__item:hover{
  background:var(--ta-color-bg-surface);
}
.club-popup__item:active{
  background:var(--ta-color-bg-surface-hover);
}

/* Club name — Rubik Regular 16/20 */
.club-popup__name{
  flex:1;min-width:0;
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-button-primary);
  color:var(--ta-color-text-default);
  text-align:right;
}

/* Logo — 48px circle (real image or placeholder) */
.club-popup__logo{
  width:48px;height:48px;
  border-radius:70px;
  flex-shrink:0;
  object-fit:contain;
  background:#fff;
  padding:6px;
  border:1px solid var(--ta-color-border-subtle);
}
/* Placeholder variant — colored circle with letter */
.club-popup__logo--placeholder{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-family-live);
  font-size:20px;
  font-weight:var(--font-weight-bold);
  color:#fff;
}

/* ==========================================================================
   External Clubs — "קבלו קופון דרך מועדון"
   Items with logo + name + description + yellow CTA button
   ========================================================================== */

.ext-club__list{
  flex:1;min-height:200px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0;
}

/* Item row — RTL: logo(right/first) → text(middle) → button(left/last) */
.ext-club__item{
  display:flex;align-items:center;
  gap:var(--space-md);
  padding:var(--space-md) var(--space-lg);
  border-bottom:1px solid var(--ta-color-border-subtle);
}
.ext-club__item:last-child{border-bottom:none;}

/* Logo — 48px circle */
.ext-club__logo{
  width:48px;height:48px;
  border-radius:70px;
  flex-shrink:0;
  object-fit:contain;
  background:#fff;
  padding:6px;
  border:1px solid var(--ta-color-border-subtle);
}

/* Text column */
.ext-club__text{
  flex:1;min-width:0;
  text-align:right;
}
.ext-club__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);
}
.ext-club__desc{
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption, 12px);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-button-chip, 16px);
  color:var(--ta-color-text-default);
}

/* Empty state — no search results */
.club-popup__empty,
.ext-club__empty{
  display:none;
  padding:var(--space-3xl) var(--space-xl);
  text-align:center;
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  line-height:1.4;
  color:var(--color-grays-500, #999);
}

/* CTA button — uses button system brand chip */
.ext-club__cta{
  flex-shrink:0;
  white-space:nowrap;
}

/* Responsive — small screens */
@media(max-width:400px){
  .coupon-popup{
    border-radius:var(--space-xl);
  }
  .coupon-popup__header{
    padding:var(--space-md) var(--space-lg);
  }
  .coupon-popup__body{
    padding:var(--space-xl) var(--space-lg);
  }
  .coupon-popup__title{
    font-size:24px;
  }
}

/* ==========================================================================
   Applied state — full gradient (no white body)
   Figma: 3536:14682 (couponApplied), 3782:18298 (voucherApplied)
   ========================================================================== */
.coupon-popup__body--full-gradient{
  background:transparent;
  border-radius:0;
}
.coupon-popup__body--full-gradient .coupon-popup__success{
  gap:var(--space-lg);
  align-items:center;
  flex:1;
  width:100%;
}
.coupon-popup__body--full-gradient .cp-applied-replace{display:none;}   /* ירד בעיצוב החדש (585:99896) */
/* רווחים בעיצוב החדש: מתנה → כותרת → קופסה, 48 בין כל שניים (נמדד בפיגמה) */
.coupon-popup__body--full-gradient .coupon-popup__success{gap:48px;justify-content:center;}

/* === Applied title — Rubik SemiBold 20 white (פיגמה 585:99896, אסף 27/08 — היה 28) === */
.cp-applied-title{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-semibold);
  font-size:20px;
  line-height:1.15;
  color:var(--tl-color-text-default,#fff);
  text-align:center;
  width:100%;
}

/* === Applied code box — Figma 8206:18973 === */
/* פיגמה 585:99896 (אסף 27/08): 280 רוחב · מסגרת לבנה מלאה · רדיוס 8 · ריפוד 8 —
   בלי פח ובלי קו-מפריד (מוסתרים למטה) */
.cp-applied-box{
  width:280px;max-width:100%;
  display:flex;
  align-items:center;justify-content:center;
  gap:var(--space-sm);
  padding:var(--space-sm);
  border:1px solid #f8fafc;
  border-radius:8px;
  direction:rtl;
}
.cp-applied-box__info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  gap:var(--space-xs);
  text-align:center;
}
.cp-applied-box__number{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body);
  line-height:var(--line-height-body);
  color:var(--tl-color-text-default);
  display:flex;flex-wrap:wrap;gap:var(--space-xs);
  justify-content:center;
}
.cp-applied-box__desc{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-body);
  line-height:var(--line-height-body);
  color:var(--tl-color-text-default);
}
.cp-applied-box__divider{display:none;}   /* ירד בעיצוב החדש (585:99896) */
.cp-applied-box__delete{display:none;}   /* ירד בעיצוב החדש (585:99896) */
.cp-applied-box__delete-old{
  background:none;border:none;cursor:pointer;
  padding:var(--space-sm);
  align-items:center;justify-content:center;
  flex-shrink:0;
}
.cp-applied-box__delete img{
  width:20px;height:20px;
  filter:brightness(0) invert(1);
}

/* === Applied replace button — white border, pill === */
.cp-applied-replace{
  width:100%;height:var(--dim-11);
  display:flex;align-items:center;justify-content:center;
  gap:var(--space-sm);
  border:1px solid var(--tl-color-border-default);
  border-radius:100px;
  background:transparent;
  cursor:pointer;
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-button-primary);
  line-height:var(--line-height-button-primary);
  color:var(--tl-color-text-default);
  padding:0 var(--space-lg);
}
.cp-applied-replace img{
  width:var(--dim-5);height:var(--dim-5);
  filter:brightness(0) invert(1);
}
/* Dark variant — white bg, black border+text, right-aligned (voucher "הזן שובר נוסף") */
.cp-applied-replace--dark{
  background:#fff;
  border-color:var(--tl-color-border-inverse-default);
  color:var(--tl-color-text-inverse-default);
  font-weight:var(--font-weight-regular);
  justify-content:flex-start;
  direction:rtl;
}
.cp-applied-replace.cp-applied-replace--dark img{
  filter:none;
  width:var(--dim-5);height:var(--dim-5);
}

/* === Applied illustration — static, centered === */
.cp-applied-illustration{
  width:120px;height:auto;
  object-fit:contain;
  display:block;
}

/* === Bank chip inside code box === */
.cp-bank-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  height:var(--dim-8);
  padding:0 var(--space-sm);
  background:rgba(255,255,255,0.9);
  border-radius:var(--border-radius-full);
  align-self:center;
}
.cp-bank-chip img{
  width:20px;height:20px;
  border-radius:var(--border-radius-sm);
  object-fit:contain;
}
.cp-bank-chip span{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-body-small);
  line-height:var(--line-height-body);
  color:var(--ta-color-text-default);
}

/* === Benefit state — club name + logo === */
.cp-benefit-club{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  width:100%;
  direction:rtl;
}
.cp-benefit-club__logo{
  width:32px;height:32px;
  border-radius:var(--border-radius-md);
  object-fit:contain;
  flex-shrink:0;
}
.cp-benefit-club__name{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-heading-page,28px);
  line-height:1.15;
  color:var(--ta-color-text-default);
}
.cp-benefit-subtitle{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body);
  line-height:1.4;
  color:var(--ta-color-text-default);
  text-align:center;
  width:100%;
}

/* ── שדה ביריעה: לא קופץ + 24 מתחת (אסף 22/08, פיגמה Cart·Mobile 166:66340) ──
   השדה→כפתורים = 24 תמיד. הודעת-השגיאה צפה בתוך אותם 24 (גובהה בדיוק 24:
   16 שורה + 4+4 ריפוד) ולא תופסת מקום בזרימה — היריעה לא גדלה והשדה לא קופץ. */
.coupon-code-sheet__view--input{gap:var(--space-xl);}
.coupon-code-sheet .lff-wrap{position:relative;}
.coupon-code-sheet .lff__error-text{position:absolute;top:100%;right:0;left:0;}
/* iOS: הרצועה שבין תחתית היריעה למקלדת מציגה את רקע-הדף — נצבע לבן כל עוד יריעה פתוחה */
html.pf-sheet-open, body.pf-sheet-open{background:#fff !important;}

/* ── «מעלה לכולם» (אסף 23/08): כשה-input יושב בתחתית המסך, ספארי-iOS גולל
   את כל הדף כדי להביא אותו מעל המקלדת — גם הטופס שמאחורי היריעה עלה.
   הפתרון: לרגע פתיחת-המקלדת בלבד (pf-lifting על העוטף) ה-input קופץ לראש
   החלון, בלתי-נראה — אין מה לגלול; ברגע שהמקלדת למעלה הוא חוזר לשדה
   (שכבר מורם מעליה). בדף-מרכז ה-input הוא השדה הנראה עצמו, ולכן אסור
   להזיז אותו דרך-קבע (ניסיון קודם, אותו יום). */
.lff-wrap.pf-lifting input[type="text"],
.lff-wrap.pf-lifting input{
  position:fixed !important;inset:auto !important;top:0 !important;right:0 !important;
  width:1px !important;height:1px !important;padding:0 !important;
  opacity:0 !important;pointer-events:none;
  color:transparent !important;-webkit-text-fill-color:transparent;caret-color:transparent !important;
  clip-path:inset(100%);
}

/* שדה-הקוד + «הפעל» בתוך הפופ — נייח בלבד (purchase-drawer.css מדליק); במובייל הגיליון */
.cp-inline-code{display:none;}

/* ── פופ בחירת-מועדון — יישור לפיגמה 102:119571 (אסף 23/08) ── */
.cp-sub-overlay .mp-search{padding:var(--space-lg,16px);}          /* שוליים 16, לא 24 */
.club-popup__item.is-selected{background:var(--tl-color-bg-surface-inv,rgba(0,0,0,.05));}

/* ── מצב אינפוט-יחיד (פיגמה Coupon/Popup 585:94291, אסף 27/08) ──
   שדה אחד לכל ההטבות + «הפעלה» בגרדיאנט-הפופ. הכותרת נשארת; תת-הכותרת
   והאפשרויות הישנות (#cpLegacyOptions) מוסתרות. */
.coupon-popup__subtitle{display:none;}
/* רווחים מדויקים מהפיגמה (585:94291, נמדד 27/08): גיליון 28/24 · טקסט→שדה 40 ·
   שדה→כפתור 11 · התוכן ממורכז אנכית בגיליון */
#cpBodyDefault{padding:28px 24px;}
.cp-single{
  display:flex;flex-direction:column;align-items:center;
  gap:0;margin:auto 0;   /* ממורכז אנכית בגוף, כמו בפיגמה */
}
/* כותרת + הסבר — סונכרנו מהפיגמה 585:79961 (נעמי 27/08): הכותרת מודגשת,
   ההסבר תחתיה רגיל ואפרפר, ורק אחריו מגיע הרווח לשדה. */
.cp-single__title{
  font-family:var(--font-family-live);font-weight:700;
  font-size:var(--font-size-body,16px);line-height:22px;
  color:#000;text-align:center;
  margin-bottom:12px;
}
.cp-single__text{
  font-family:var(--font-family-live);font-weight:400;
  font-size:var(--font-size-body,16px);line-height:22px;
  color:#000;text-align:center;
  margin-bottom:40px;   /* פיגמה: 16 רווח-גיליון + 24 ריפוד-הבלוק */
}
/* תחתית-המסך (585:79961) — הזמנה לרשימת-ההטבות המלאה */
.cp-single__footer{margin-top:64px;text-align:center;}
.cp-single__footer-text{
  font-family:var(--font-family-live);font-weight:400;
  font-size:var(--font-size-body,16px);line-height:22px;color:#000;
}
.cp-single__footer-link{
  font-family:var(--font-family-live);font-weight:400;
  font-size:var(--font-size-body,16px);line-height:22px;
  color:#000;background:none;border:none;padding:0;
  text-decoration:underline;cursor:pointer;
}
.cp-single__wrap{margin-bottom:11px;}   /* פיגמה: 11 בין השדה ל«הפעלה» */
/* השדה = lff (LIVE שדה תיבה טקסט) — החיווי מהקומפוננט; כאן רק ההתאמות:
   תוכן ממורכז, פלייסהולדר גלוי (אין תווית צפה), אייקון-מתנה צמוד לטקסט. */
.cp-single__wrap{width:100%;}
.cp-single__lff{justify-content:center;cursor:text;}
.cp-single__lff .lff__placeholder{
  display:block;
  font-family:var(--font-family-live);font-size:var(--font-size-body,16px);
  color:#325572;   /* פיגמה 585:94311 */
}
.cp-single__lff.lff--filled .lff__placeholder{display:none;}
/* בהקלדה — הטקסט מיושר לימין, צמוד לאייקון-המתנה (אסף 27/08); הפלייסהולדר נשאר ממורכז */
.cp-single__lff.lff--filled{justify-content:flex-start;}
.cp-single__lff .lff__value{text-align:right;}
/* האייקון תמיד בצד ימין של השדה (אסף 27/08) — ראשון בשורה ב-RTL */
.cp-single__gift{width:20px;height:20px;pointer-events:none;}
.cp-single__apply{
  width:100%;height:44px;border:none;cursor:pointer;
  border-radius:var(--r-full,999px);
  background:linear-gradient(270deg,#ee3c5c,#fa6203);   /* RTL: אותו גרדיאנט כמו ראש-הפופ */
  font-family:'Google Sans','Rubik',sans-serif;font-size:var(--font-size-body,16px);font-weight:500;
  color:#f8fafc;
  transition:opacity .15s, transform .1s;
}
.cp-single__apply:disabled{opacity:.45;cursor:default;}
.cp-single__apply:not(:disabled):active{transform:scale(0.98);}
/* טעינה בתוך הכפתור (אסף 27/08) — הגרדיאנט נשאר, ספינר לבן במקום הטקסט;
   בסיום → «קופון הופעל» + קונפטי, כמו מסך-ההצלחה בתשלום */
.cp-single__apply-spinner{display:none;}
.cp-single__apply.is-loading{opacity:1;cursor:default;}
.cp-single__apply.is-loading .cp-single__apply-label{display:none;}
.cp-single__apply.is-loading .cp-single__apply-spinner{
  display:inline-block;
  width:20px;height:20px;
  border:2.5px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:coupon-spin .8s linear infinite;
}

/* ── מעבר-הצלחה מכפתור «הפעלה» (אסף 27/08) — עיגול שגדל מנקודת-הכפתור,
   בדיוק כמו מעבר תשלום→הצלחה (v2StageExpand). הגוף-המופעל שקוף בדרך-כלל
   (הגרדיאנט מהפופ שמאחור), לכן בזמן האנימציה הוא הופך לשכבה עליונה עם
   גרדיאנט משלו, שנחתכת בעיגול מעל המסך הקודם שנשאר מתחת. ── */
#cpBodyApplied.is-revealing{
  position:absolute;inset:0;z-index:60;margin:0;
  background:linear-gradient(to right,var(--color-coupon-red),var(--color-coupon-orange));
  border-radius:var(--space-2xl);
  clip-path:circle(0 at var(--cp-reveal-x,50%) var(--cp-reveal-y,70%));
  -webkit-clip-path:circle(0 at var(--cp-reveal-x,50%) var(--cp-reveal-y,70%));
  animation:cpSuccessReveal .9s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes cpSuccessReveal{
  to{clip-path:circle(150% at var(--cp-reveal-x,50%) var(--cp-reveal-y,70%));
     -webkit-clip-path:circle(150% at var(--cp-reveal-x,50%) var(--cp-reveal-y,70%));}
}

/* ══ מסך ניהול-ההטבות (פיגמה 589:77925, אסף 27/08) ══
   הפופ הופך ללבן; כותרת + X משלו; «הזן קופון נוסף» עם אותו שדה-lff;
   רשימת ההטבות שהוזנו — כרטיס עם מתג, צ'יפ-קוד, מחירים וחיסכון. */
.coupon-popup.is-manager{background:#fff;padding-top:0;gap:0;}
/* שורת-הראש של הפופ-הגרדיאנט (X העגול הישן) — מוסתרת כולה, אחרת היא משאירה
   רווח לבן גדול מעל הכותרת (אסף 27/08) */
.coupon-popup.is-manager .coupon-popup__top{display:none;}
/* רווחים 1:1 מהפיגמה (589:77925): שורת-הכותרת = בלוק עם ריפוד 24 מעל ומתחת;
   ממנה ועד «הזן קופון נוסף» עוד 16 (= 40 מתחתית-הטקסט). בין סעיפי-הגוף — 12. */
.coupon-popup__body--manager{
  background:var(--ta-color-bg-base,#fff);
  padding:0 var(--space-lg,16px) var(--space-xl,24px);
  gap:var(--space-md,12px);
  align-items:stretch;
}
/* פיגמה 589:77925: ה-X בקצה הימני, הכותרת צמודה אליו משמאלו (רווח 8) */
.cpm-head{display:flex;flex-direction:row-reverse;align-items:center;gap:var(--space-sm,8px);padding:var(--space-xl,24px) 0;margin:0;}
.cpm-title{flex:1;text-align:right;font-family:var(--font-family-live);font-weight:var(--font-weight-bold);font-size:var(--font-size-heading-page,20px);color:var(--ta-color-text-default,#000);}
.cpm-close{
  width:32px;height:32px;border:none;border-radius:100px;cursor:pointer;
  background:rgba(0,0,0,0.05);display:flex;align-items:center;justify-content:center;flex:none;
}
.cpm-section-title{font-family:var(--font-family-live);font-weight:var(--font-weight-medium,500);font-size:var(--font-size-body,16px);color:var(--ta-color-text-default,#000);}
.cpm-input-wrap{margin-bottom:0;}
.coupon-popup__body--manager .cp-single__apply{margin-bottom:8px;}
.cpm-list-head{display:flex;flex-direction:column;gap:2px;/* פיגמה: 2 */margin-top:var(--space-xs,4px);}
.cpm-hint{font-family:var(--font-family-live);font-size:var(--font-size-body-small,14px);color:rgba(0,0,0,0.5);   /* פיגמה: black/50% — אין טוקן תואם */}
/* כרטיס-הטבה: לבן, מסגרת slate-200, רדיוס 12, ריפוד 16; המתג בקצה השמאלי */
.cpm-row{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--ta-color-bg-base,#fff);border:1px solid var(--color-slate-200,#cedde9);
  border-radius:var(--r-lg,12px);padding:var(--space-lg,16px);
}
.cpm-row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-sm,8px);}
.cpm-row__top{display:flex;align-items:center;gap:var(--space-sm,8px);}
.cpm-row__name{font-family:var(--font-family-live);font-weight:var(--font-weight-bold);font-size:var(--font-size-body,16px);color:var(--color-slate-900,#293e51);}
.cpm-chip{
  font-family:var(--font-family-live);font-size:var(--font-size-caption,12px);color:var(--color-green-400,#b9ca20);
  border:1px solid var(--color-green-400,#b9ca20);border-radius:5px;/* פיגמה: 5 — אין טוקן */padding:3px var(--space-sm,8px);direction:ltr;
}
.cpm-row__desc{font-family:var(--font-family-live);font-size:var(--font-size-body-small,14px);color:rgba(0,0,0,0.5);}
.cpm-row__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm,8px);}
.cpm-prices{display:flex;align-items:center;gap:var(--space-xs,4px);font-family:var(--font-family-live);font-size:var(--font-size-caption,12px);direction:ltr;}
.cpm-prices b{font-weight:var(--font-weight-bold);color:var(--color-slate-900,#293e51);}
.cpm-prices s{color:rgba(61,105,140,0.6);   /* slate-600/60% (פיגמה) */}
.cpm-saved{
  display:flex;align-items:center;gap:var(--space-xs,4px);
  font-family:var(--font-family-live);font-size:var(--font-size-caption,12px);
  background:linear-gradient(to left,var(--color-coupon-red,#ee3c5c),var(--color-coupon-orange,#fa6203));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cpm-saved__badge{
  width:20px;height:20px;border-radius:100px;flex:none;
  background:linear-gradient(to left,var(--color-coupon-red,#ee3c5c),var(--color-coupon-orange,#fa6203));
  display:flex;align-items:center;justify-content:center;
}
.cpm-saved__badge img{width:12px;height:12px;display:block;}
/* המתג — קומפוננט-DS (general/toggle.css) עם המצב הירוק; אין כאן CSS משלו */

/* רשימת-ההטבות נערמת למטה (589:78078); הטוגל לא מתכווץ — מידות-הקומפוננט (64×28) */
.cpm-list{display:flex;flex-direction:column;gap:var(--space-md,12px);}
.cpm-row .toggle{flex:0 0 auto;width:64px;height:28px;}

/* ── כרטיס-הטבה כבוי (פיגמה 589:78209, אסף 27/08): הצ'יפ מאפיר (grays-400)
   ושורת המחירים/החיסכון נעלמת; המתג עצמו — מצב off של הקומפוננט ── */
.cpm-row.is-off .cpm-chip{color:var(--color-grays-400,#b1b1b1);border-color:var(--color-grays-400,#b1b1b1);}
.cpm-row.is-off .cpm-row__bottom{display:none;}

/* אזהרת-התנגשות על קופון כבוי (589:78209) — אדום-הקופון, 12 */
.cpm-row__note{font-family:var(--font-family-live);font-size:var(--font-size-caption,12px);color:var(--color-coupon-red,#ee3c5c);}

/* ── אישור-מסך-מלא לקוד שאינו הראשון (נעמי 27/08) — משתלט על כל הפופ כמו
   מסך-ההצלחה, ואז חוזרים למסך הראשי; החגיגה עם קופסת-הקופון שמורה לראשון. ── */
.cp-confirm-sub{font-family:var(--font-family-live);font-size:var(--font-size-body,16px);color:rgba(255,255,255,0.85);text-align:center;}

/* ══ רשימת-ההטבות המלאה (פיגמה 604:107340, נעמי 27/08) ══════════════════════
   שורה = כפתור צהוב «אני חייב כזה» (שמאל) · שם + גובה-הנחה · לוגו (ימין).
   הכפתור יוצא לאתר חיצוני — ולכן הוא כפתור, לא בחירה בתוך הזרימה. */
.benefits-popup__list{overflow-y:auto;}
.benefits-popup__item{
  display:flex;align-items:center;gap:var(--space-md,12px);
  padding:var(--space-md,12px) var(--space-lg,16px);
  border-bottom:1px solid var(--ta-color-border-subtle,rgba(61,105,140,0.25));
}
.benefits-popup__info{flex:1;min-width:0;text-align:right;}
.benefits-popup__name{
  font-family:var(--font-family-live);font-weight:var(--font-weight-bold,700);
  font-size:var(--font-size-body,16px);line-height:20px;
  color:var(--tl-color-text-inverse-default,#000);
}
.benefits-popup__desc{
  font-family:var(--font-family-live);font-weight:var(--font-weight-regular,400);
  font-size:var(--font-size-caption,12px);line-height:20px;
  color:var(--tl-color-text-inverse-default,#000);
}
/* הכיתוב והצבע מהפיגמה: צהוב-המותג #fc0, טקסט כהה, פינות מלאות */
.benefits-popup__cta{
  flex-shrink:0;height:32px;padding:0 var(--space-lg,16px);
  background:var(--tl-color-brand-main,#fc0);border:none;border-radius:100px;
  font-family:var(--font-family-live);font-weight:var(--font-weight-bold,700);
  font-size:var(--font-size-button-category,14px);line-height:16px;
  color:var(--ta-color-text-default,#293e51);cursor:pointer;
}
.benefits-popup__cta:active{filter:brightness(.95);}