/* ==========================================================================
   Subscription Frame — Tickchak Design System
   Props: state (withSuccess|noCredits) × compact (false|true)
   Figma: Qw3YeURNIL8V1wdGubxIWQ node 8319:31187 (SubscriptionFrame)
   Required: tokens.css

   Class naming:
     • New canonical:  .sub-frame, .sub-frame__header, .sub-frame__body etc.
     • Legacy alias:   .success-header, .success-body, .success-greeting etc.
       (kept so existing forms — טופס ישן + טופס חדש — work with no HTML changes)
   ========================================================================== */

.sub-frame{
  background:var(--ta-color-bg-base);
  border:1px solid var(--ta-color-border-subtle);
  border-radius:var(--border-radius-lg);
  padding:var(--space-md);
  display:flex;flex-direction:column;
  gap:var(--space-md);
  width:100%;
  font-family:var(--font-family-live);
  box-sizing:border-box;
}

/* === Header (success message + check + optional logout) === */
.sub-frame__header,
.success-header{
  width:100%;
  display:flex;align-items:center;justify-content:center;
  gap:var(--space-sm);
  padding-bottom:var(--space-md);
  border-bottom:1px solid var(--ta-color-border-subtle);
  position:relative;
}
.sub-frame__title,
.success-header span{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-caption);
  line-height:var(--line-height-caption);
  color:var(--ta-color-text-default);
}
.sub-frame__check,
.success-check{
  width:var(--dim-5);height:var(--dim-5);
  background:var(--color-green-400);
  border-radius:100px;
  display:flex;align-items:center;justify-content:center;
  padding:1px;flex-shrink:0;
  transform:scale(0);
  animation:subFrameCheckPop .4s cubic-bezier(.34,1.56,.64,1) .15s forwards;
}
@keyframes subFrameCheckPop{to{transform:scale(1);}}

.sub-frame__logout,
.success-logout-btn{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:24px;height:24px;
  border-radius:100px;
  background:var(--ta-color-bg-surface);
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;
  opacity:0;
  animation:subFrameFadeUp .35s ease .35s forwards;
}
.sub-frame__logout:hover,
.success-logout-btn:hover{background:var(--ta-color-bg-surface-hover);}

/* loggedIn=false — hide the "התחברת בהצלחה" header */
.sub-frame--no-login-header .sub-frame__header,
.sub-frame--no-login-header .success-header{display:none;}

/* === Body (greeting + progress) — no padding per Figma; frame's own padding handles inset === */
.sub-frame__body,
.success-body{
  display:flex;flex-direction:column;
  gap:var(--space-sm);
  width:100%;
  opacity:0;
  animation:subFrameFadeUp .45s ease .25s forwards;
}
@keyframes subFrameFadeUp{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

.sub-frame__greeting,
.success-greeting{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body-small);
  line-height:140%;
  color:var(--ta-color-text-default);
  text-align:right;
}
.sub-frame__greeting b,
.success-greeting b{font-weight:var(--font-weight-bold);}

/* === Progress bar (filled green + empty gray, LTR order) === */
.sub-frame__progress,
.success-progress{display:flex;flex-direction:column;gap:var(--space-xs);}
.sub-frame__bar-row,
.success-bar-row{
  display:flex;direction:ltr;
  gap:2px;width:100%;height:4px;
}
.sub-frame__bar,
.success-bar{
  height:4px;
  border-radius:var(--border-radius-full);
  transition:flex-grow .6s cubic-bezier(.4,0,.2,1);
  flex:0 1 0;min-width:0;
}
.sub-frame__bar--empty,
.success-bar--empty{background:var(--color-grays-200);}
.sub-frame__bar--filled,
.success-bar--filled{background:var(--color-green-400);}

/* No-credits — filled collapses, empty fills full width */
.sub-frame--no-credits .sub-frame__bar--filled{flex:0 0 0;}
.sub-frame--no-credits .sub-frame__bar--empty{flex:1 1 0;}

/* No-subscription — hide progress entirely (no credits to display) */
.sub-frame--no-subscription .sub-frame__progress,
.sub-frame--no-subscription .success-progress{display:none;}

/* Wrong-event — credits exist but for a different event; hide progress + warning emphasis */
.sub-frame--wrong-event .sub-frame__progress,
.sub-frame--wrong-event .success-progress{display:none;}
.sub-frame--wrong-event .sub-frame__greeting,
.sub-frame--wrong-event .success-greeting,
.sub-frame--no-subscription .sub-frame__greeting,
.sub-frame--no-subscription .success-greeting{
  display:flex;align-items:flex-start;gap:var(--space-sm);
}
.sub-frame__warn-icon{
  flex-shrink:0;
  width:var(--dim-5);height:var(--dim-5);
  display:flex;align-items:center;justify-content:center;
}
.sub-frame__warn-icon svg{width:100%;height:100%;display:block;}
.sub-frame__warn-text{flex:1;}
.sub-frame__warn-text .warn{font-weight:var(--font-weight-bold);}

/* noSubscription = error severity */
.sub-frame--no-subscription .sub-frame__warn-icon{color:var(--ta-color-state-error-main);}
.sub-frame--no-subscription .sub-frame__warn-text .warn{color:var(--ta-color-state-error-main);}

/* wrongEvent = warning severity */
.sub-frame--wrong-event .sub-frame__warn-icon{color:var(--ta-color-state-warning-main);}
.sub-frame--wrong-event .sub-frame__warn-text .warn{color:var(--ta-color-state-warning-main);}

/* === Stats row === */
.sub-frame__stats,
.success-stats{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs);
}
.sub-frame__stat,
.success-stat{
  font-family:var(--font-family-live);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-caption);
  line-height:var(--line-height-caption);
  color:var(--ta-color-text-subtle);
}
.sub-frame__sub-name,
.success-sub-name{opacity:0.8;}