/* ==========================================================================
   Payment Screens — Tickchak Design System
   Shared screens for payment flow: method selection, CC form, processing,
   error, complete. Includes confetti celebration.
   Required: tokens.css, button.css, live-form-field.css
   ========================================================================== */

/* ========== PAYMENT METHODS GRID ========== */
.pay-methods-title{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-body-small);
  line-height:1.4;
  color:var(--ta-color-text-default,#000);
  text-align:center;
  direction:rtl;
  width:100%;
  margin-bottom:var(--space-lg);
  box-sizing:border-box;
}
.pay-methods-title.balance{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body);
  line-height:var(--line-height-body);
  border:1px solid var(--ta-color-border-subtle,rgba(0,0,0,0.1));
  border-radius:var(--border-radius-md,8px);
  padding:var(--space-md,12px);
}
.pay-methods-title.balance b{font-weight:var(--font-weight-bold);}
/* היררכיית שתי-שורות בבאנר-היתרה (מוטי 21/07, gap.subscriptions_purchase.payment_hierarchy_ui):
   שורה עליונה בולטת = הסכום שנותר · שורה תחתונה = השאלה */
.pay-balance__amount{
  font-size:var(--font-size-heading-sub);
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-body);
}
.pay-balance__prompt{
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-body);
  margin-top:var(--space-xs);
}

.pay-methods-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 12px;
  width:100%;
  direction:rtl;
}
.pay-method-card{
  background:var(--ta-color-bg-surface);
  border:1px solid var(--ta-color-border-subtle,rgba(0,0,0,0.1));
  border-radius:20px;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  width:100%;
  aspect-ratio:1;
  box-sizing:border-box;
  transition:background 0.2s,border-color 0.2s,transform 0.15s;
}
.pay-method-card:active{
  background:var(--ta-color-bg-surface-hover);
  transform:scale(0.98);
}
.pay-method-card.selected{
  border-color:#00AEF8;
  background:#f0faff;
}
.pay-method-label{
  font-family:'Google Sans','Rubik',sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:20px;
  color:var(--ta-color-text-default);
  text-align:center;
  direction:rtl;
}
.pay-method-icon{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
}
.pay-method-icon img,
.pay-method-icon svg{width:100%;height:100%;}

/* ========== PAYMENT SCREEN (container) ========== */
.payment-screen{
  gap:16px;
  padding:16px;
  box-sizing:border-box;
}
.payment-title{
  font-family:'Google Sans','Assistant',sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--ta-color-text-default);
  text-align:right;
  direction:rtl;
}
.payment-summary-card{
  width:100%;
  background:var(--ta-color-bg-surface);
  border-radius:16px;
  padding:12px;
  display:flex;flex-direction:column;
  gap:10px;
  direction:rtl;
}
.payment-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:15px;
  color:var(--ta-color-text-default);
}
.payment-row.credits-row .payment-val{
  font-weight:700;
  color:#465b17;
}
.payment-row.total-row{
  font-weight:700;
  font-size:17px;
}
.payment-divider{
  width:100%;height:1px;
  background:rgba(0,0,0,0.1);
}

/* ========== CREDIT CARD FORM ========== */
.payment-form-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2xl);
  padding-bottom:120px;
  width:100%;
  direction:rtl;
}
.cc-mockup{
  position:relative;
  width:261px;height:158px;
  flex-shrink:0;
  perspective:1000px;
}
.cc-mockup__inner{
  position:absolute;
  inset:0;
  transition:transform 0.6s cubic-bezier(.4,0,.2,1);
  transform-style:preserve-3d;
}
.cc-mockup.flipped .cc-mockup__inner{transform:rotateY(180deg);}
.cc-face{
  position:absolute;
  inset:0;
  border-radius:16.58px;
  overflow:hidden;
  box-shadow:6.63px 8.29px 13.27px 0 rgba(0,0,0,0.05);
  border:0.83px solid rgba(255,255,255,0.6);
  background:linear-gradient(to top right,#121212 0%,#5571ae 100%);   /* פיגמה 2412:100700 (אסף 18/08): שחור→כחול-פלדה, משמאל-למטה לימין-למעלה; היה סגול */
  color:#fff;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  direction:ltr;
  unicode-bidi:isolate;
}
.cc-face .cc-brand,
.cc-face .cc-number,
.cc-face .cc-name,
.cc-face .cc-date{direction:ltr;unicode-bidi:isolate;}
.cc-face--back{transform:rotateY(180deg);}
.cc-back-strip{
  position:absolute;
  top:24px;left:0;right:0;height:36px;
  background:#000;
}
.cc-back-cvv{
  position:absolute;
  top:80px;right:16px;
  width:160px;height:28px;
  background:rgba(255,255,255,0.85);
  border-radius:4px;
  color:#000;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:2px;
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 10px;
}
.cc-back-label{
  position:absolute;
  top:110px;right:16px;
  font-family:'Manrope',sans-serif;
  font-size:9px;
  color:rgba(255,255,255,0.7);
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.cc-mockup .cc-lines{
  position:absolute;
  bottom:-58px;left:50%;
  transform:translateX(calc(-50% + 19px));
  width:540px;height:182px;
  opacity:0.35;
  pointer-events:none;
  filter:brightness(0) invert(1);
}
.cc-mockup .cc-brand{
  position:absolute;
  top:15.8px;left:15.7px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13.27px;
  line-height:1;
  color:#fff;
}
.cc-mockup .cc-paypass{
  position:absolute;
  top:15.8px;right:15.7px;
  width:16.53px;height:19.96px;
  filter:brightness(0) invert(1);
}
.cc-mockup .cc-name{
  position:absolute;
  top:105.6px;left:12.4px;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:9.95px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#fff;
}
.cc-mockup .cc-date{
  position:absolute;
  top:105.6px;left:90px;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:9.95px;
  letter-spacing:0.5px;
  color:#fff;
}
.cc-mockup .cc-number{
  position:absolute;
  top:125.6px;left:12.4px;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:13.27px;
  letter-spacing:1.99px;
  color:#fff;
  white-space:nowrap;
}
.cc-mockup .cc-logo-box{
  position:absolute;
  top:117.3px;left:209.9px;
  width:37.47px;height:26.61px;
  background:rgba(255,255,255,0.1);
  border-radius:3.32px;
  display:flex;align-items:center;justify-content:center;
}
.cc-mockup .cc-logo-box img{
  width:24px;height:15px;
  display:block;
}

/* Fluid LFF fields inside card form */
.payment-form-wrap .lff-wrap{width:100%;}
.payment-form-wrap .lff__value,
.payment-form-wrap .lff__placeholder,
.payment-form-wrap input{
  direction:rtl;
  text-align:right;
  unicode-bidi:plaintext;
}
/* Error/success variants must use flex-end → icon on the left in RTL */
.payment-form-wrap .lff--error,
.payment-form-wrap .lff--success{justify-content:space-between;}
.payment-form-wrap .lff--error .lff__value,
.payment-form-wrap .lff--success .lff__value{
  flex:1;min-width:0;
}

/* Payment form row (CVV + expiry side-by-side) */
.payment-form-wrap .payment-row{
  display:flex;
  gap:var(--space-sm);
  width:100%;
  direction:rtl;
  align-items:flex-start;
}
.payment-form-wrap .payment-row .lff-wrap{flex:1;min-width:0;}

/* ========== CONFETTI (completion celebration) ========== */
.confetti-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:10;
}
.confetti-piece{
  position:absolute;
  top:-20px;
  width:10px;height:14px;
  opacity:0;
  animation:confettiFall linear forwards;
  will-change:transform,opacity;
}
@keyframes confettiFall{
  0%   {opacity:1;transform:translate3d(0,-20px,0) rotate(0deg);}
  10%  {opacity:1;}
  100% {opacity:0;transform:translate3d(var(--dx,0),110vh,0) rotate(var(--r,720deg));}
}

/* ========== PROCESSING SCREEN ========== */
.processing-screen{
  background:white;
  align-items:center;
  justify-content:center;
  padding:48px 16px;
  gap:24px;
  flex:1;
}
.processing-spinner{
  width:56px;height:56px;
  border:4px solid rgba(0,0,0,0.08);
  border-top-color:#00AEF8;
  border-radius:50%;
  animation:processSpin 0.8s linear infinite;
}
@keyframes processSpin{to{transform:rotate(360deg);}}
.processing-title{
  font-family:'Google Sans','Rubik',sans-serif;
  font-weight:600;
  font-size:22px;
  color:var(--ta-color-text-default);
  text-align:center;
  direction:rtl;
}
.processing-sub{
  font-family:'Google Sans','Assistant',sans-serif;
  font-weight:400;
  font-size:14px;
  color:rgba(0,0,0,0.5);
  text-align:center;
  direction:rtl;
  line-height:1.5;
}

/* ========== ERROR SCREEN ========== */
.error-screen{
  background:white;
  align-items:center;
  justify-content:center;
  padding:48px 16px;
  gap:16px;
  flex:1;
}
.error-icon{
  width:72px;height:72px;
  border-radius:50%;
  background:#ef4444;
  display:flex;align-items:center;justify-content:center;
  animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.error-title{
  font-family:'Google Sans','Rubik',sans-serif;
  font-weight:600;
  font-size:24px;
  color:var(--ta-color-text-default);
  text-align:center;
  direction:rtl;
  padding:8px 0 0;
}
.error-sub{
  font-family:'Google Sans','Assistant',sans-serif;
  font-weight:400;
  font-size:14px;
  color:rgba(0,0,0,0.6);
  text-align:center;
  direction:rtl;
  line-height:1.5;
  margin-bottom:8px;
}
.error-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  padding:0 16px;
  box-sizing:border-box;
}
@keyframes popIn{
  0%  {transform:scale(0);opacity:0;}
  100%{transform:scale(1);opacity:1;}
}

/* ========== COMPLETION SCREEN ========== */
.complete-screen{
  background:white;
  align-items:center;
  padding:48px 16px 16px;
  gap:16px;
  flex:1;
  position:relative;
}
.complete-img{
  width:227px;height:189px;
  object-fit:contain;
  pointer-events:none;
  animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.complete-title{
  font-family:'Google Sans','Rubik',sans-serif;
  font-weight:600;
  font-size:28px;
  line-height:1.15;
  color:var(--ta-color-text-default);
  text-align:center;
  direction:rtl;
  padding:8px 0;
}
.complete-summary{
  width:100%;
  background:var(--ta-color-bg-surface);
  border:1px solid var(--ta-color-border-subtle);
  border-radius:16px;
  padding:12px;
  display:flex;flex-direction:column;
  gap:12px;
  box-sizing:border-box;
  direction:rtl;
}
.complete-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.complete-summary-label{
  display:flex;
  align-items:center;
  gap:6px;
  direction:ltr;
  font-family:'Google Sans','Assistant',sans-serif;
  font-weight:400;
  font-size:13px;
  line-height:1;
  color:var(--ta-color-text-subtle);
}
.complete-summary-label svg{
  width:13px;height:13px;
  flex-shrink:0;
}
.complete-summary-val{
  font-family:'Google Sans','Assistant',sans-serif;
  font-weight:400;
  font-size:13px;
  line-height:1;
  color:var(--ta-color-text-subtle);
  white-space:nowrap;
}
.complete-summary-row.discount .complete-summary-val{
  font-weight:700;
  color:#465b17;
}
.complete-summary-divider{
  width:100%;height:1px;
  background:rgba(0,0,0,0.1);
}
.complete-summary-row.balance{padding:8px 0;}
.complete-summary-row.balance .complete-summary-label,
.complete-summary-row.balance .complete-summary-val{
  font-weight:700;
  color:var(--ta-color-text-default);
}
.complete-summary-row.balance .complete-summary-val{
  font-size:16px;
  line-height:16px;
}
.complete-actions{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  direction:rtl;
  padding-top:8px;
}
.complete-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:70px;
}
.complete-action-label{
  font-family:'Google Sans','Assistant',sans-serif;
  font-weight:400;
  font-size:11px;
  line-height:14px;
  color:var(--ta-color-text-subtle);
  text-align:center;
}

/* ═══ pm2 — שיטות-תשלום v2 (אסף 18/08) ═══════════════════════════════════════
   פיגמה: Cart·Desktop 2412:178838 · Cart·Mobile 103:102813. ערכים מדויקים מהנוד:
   פאנל #f8fafc ר-12 פדינג 24/16 רווח 20 · כרטיס לבן ר-16 פדינג 16,
   מסגרת #e2e8f0 (נבחר: #293e51 = Blue-Grays/900) · צל 0 4 4 rgba(15,23,42,.04) ·
   רדיו 20 #ccc (נבחר: check-selected.svg) · שם 14 · גלולת-אייקון rgba(0,0,0,.05)
   ר-999 פדינג 8/12 · קו-חוצץ #3D698C ב-40%. */
.pm2-panel{
  background:#f8fafc;
  border-radius:12px;
  padding:24px 16px;
  display:flex;flex-direction:column;gap:20px;
  width:100%;box-sizing:border-box;
  direction:rtl;
}
.pm2-title{
  font-family:var(--font-family-live);
  font-size:var(--font-size-body-small,14px);
  font-weight:var(--font-weight-regular);
  line-height:20px;
  color:var(--tl-color-text-inverse-default,#000);
  text-align:right;
}
.pm2-card{
  background:var(--color-solids-white,#fff);
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:16px;
  filter:drop-shadow(0 4px 4px rgba(15,23,42,0.04));
  display:flex;align-items:center;justify-content:flex-end;   /* בלי רדיו — התוכן נשאר צמוד-ימין (אסף 27/08) */
  flex-direction:row-reverse;
  width:100%;box-sizing:border-box;
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .1s;
}
.pm2-card:active{transform:scale(0.99);}
.pm2-card--selected{border-color:var(--color-slate-900,#293e51);}
/* הרדיו ירד (אסף 27/08) — לחיצה על כרטיס עוברת מיד לשלב הבא, אין מצב-בחירה
   שצריך לסמן. ה-markup נשאר בטופס — מוסתר כאן לכל הדפים. */
.pm2-check.checkin{display:none;}
.pm2-check.checkin .shape{display:flex;}
/* הוי בקנה-המידה של עיגול-20 (פיגמה 2412:178842: 8.5×7.1) — הקומפוננט בנוי ל-24 */
.pm2-check.checkin .check{width:8.5px;height:7.1px;}
.pm2-check.checkin .check img{width:100%;height:100%;display:block;}   /* הוי = ה-SVG מהפיגמה, לא ציור */

/* כל הכרטיסים באותו גובה (פיגמה 2412:178854 — Apple Pay עם אייקון 36 מגביה) */
.pm2-card{height:70px;}                       /* גובה אחיד לכולם — פיגמה 2412:178854 */
.pm2-main{height:36px;}
.pm2-ico-32{width:32px;height:32px;display:block;object-fit:contain;}

/* hover — רמז עדין לפני הבחירה */
.pm2-card:hover:not(.pm2-card--selected){
  border-color:var(--color-slate-300,#a3c1d6);
  background:#fcfdfe;
}
.pm2-main{
  display:flex;align-items:center;gap:24px;
  flex-direction:row-reverse;      /* השם משמאל לגלולה — הגלולה בקצה הימני */
}
.pm2-name{
  font-family:var(--font-family-live);
  font-size:14px;font-weight:var(--font-weight-regular);
  color:var(--ta-color-text-default,#000);
  white-space:nowrap;
}
/* הגלולה — מידה קבועה כמו בפיגמה (PaymentMethodCard › icon-pill: 80×36, רדיוס מלא, שחור 5%) */
.pm2-icon-pill{
  background:var(--ta-color-bg-surface-disabled,rgba(0,0,0,0.05));
  border-radius:999px;
  width:80px;height:36px;flex:0 0 80px;
  padding:0;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
}
.pm2-icon-pill--wide{width:80px;}
.pm2-ico-32{width:32px;height:32px;display:block;}
.pm2-ico-20{width:20px;height:20px;display:block;}
.pm2-ico-wide{width:50px;height:20px;display:block;object-fit:contain;}   /* Google Pay 50×20 */
.pm2-ico-bit{width:40px;height:24px;display:block;object-fit:contain;}     /* bit 40×24 */
.pm2-ico-apple{width:64px;height:32px;display:block;}   /* פיגמה: Apple Pay icon 64×32 בתוך הגלולה */
.pm2-divider{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-family-live);
  font-size:12px;line-height:16px;
  color:rgba(61,105,140,0.4);
  white-space:nowrap;
  width:100%;
}
.pm2-divider::before,
.pm2-divider::after{
  content:'';flex:1;height:1px;
  background:rgba(61,105,140,0.4);
}

/* ═══ מסך-האשראי — פאנל v2 (פיגמה 2412:100273, אסף 18/08) ══════════════════
   כמו מסך-הבחירה: רקע Blue-Grays/50 · פינות 12 · פדינג 24 למעלה, 24 בצדדים;
   כרטיס-הדמה מרוכז; השדות ברווח 16 בין שורות, cvv/תוקף חצי-חצי (רווח 8). */
.payment-form-wrap{
  background:var(--color-slate-50,#f8fafc);
  border-radius:12px;
  padding:24px 24px 120px;
  gap:16px;                                   /* רווח-שדות אנכי 16 (אסף 18/08, פיגמה 2412:100817) */
  box-sizing:border-box;
}
.payment-form-wrap .payment-row{gap:8px;}    /* שדות זה-לצד-זה (תאריך | CVV) — 8 (אסף 18/08) */