/* ═══════════════════════════════════════════════════════
   BASE CSS — مشترک بین همه قالب‌ها
   ═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2 supports variations'),
       url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Steps */
.wsa-step{display:none;animation:wsaStepIn .32s ease both}
.wsa-step.active{display:block}
@keyframes wsaStepIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}

/* Dots */
.wsa-dots{display:flex;justify-content:center;gap:6px;margin-bottom:18px}
.wsa-dot{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.12);transition:all .3s}
.wsa-dot.active{width:20px;border-radius:4px}
.wsa-dot.done{background:#22c55e}

/* OTP group */
.wsa-otp-group{display:flex;gap:7px;justify-content:center;direction:ltr;margin-bottom:12px}
.wsa-otp-input{width:46px;height:50px;border-radius:10px;font-size:1.4rem;font-weight:800;
  text-align:center;outline:none;transition:all .2s;direction:ltr;font-family:'Vazirmatn',sans-serif}
.wsa-otp-input.filled{background:var(--pale,#EBF4FF)}

/* Row 2 */
.wsa-row2{display:flex;gap:10px}
.wsa-row2 .wsa-field{flex:1}

/* Common inline icon wrapper */
.wsa-icon-inline{display:inline-flex;flex-shrink:0}
.wsa-icon-inline svg{width:16px;height:16px}

/* Eye button */
.wsa-eye{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  cursor:pointer;border:none;background:none;padding:2px;display:flex;align-items:center;line-height:1}
.wsa-eye svg{width:16px;height:16px}

/* Icon in field */
.wsa-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  pointer-events:none;display:flex;align-items:center}
.wsa-icon svg{width:17px;height:17px}

/* Back button */
.wsa-back{display:inline-flex;align-items:center;gap:5px;background:none;border:none;
  cursor:pointer;padding:0;margin-bottom:14px;transition:color .2s;font-family:'Vazirmatn',sans-serif;
  font-size:.79rem;font-weight:600}
.wsa-back svg{width:14px;height:14px}

/* ID preview */
.wsa-id-preview{border-radius:10px;padding:9px 14px;font-size:.82rem;font-weight:600;
  margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.wsa-change{background:none;border:none;font-size:.72rem;cursor:pointer;
  font-weight:600;text-decoration:underline;font-family:'Vazirmatn',sans-serif}

/* Help row */
.wsa-help-row{display:flex;justify-content:space-between;align-items:center;
  font-size:.75rem;margin-bottom:14px}
.wsa-help-row a{text-decoration:none;font-weight:600}

/* Remember */
.wsa-remember{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;cursor:pointer}
.wsa-remember input{width:15px;height:15px;flex-shrink:0;cursor:pointer}

/* Divider */
.wsa-divider{display:flex;align-items:center;gap:10px;font-size:.72rem;margin:13px 0}
.wsa-divider::before,.wsa-divider::after{content:'';flex:1;height:1px}

/* OTP hint */
.wsa-otp-hint{font-size:.75rem;text-align:center;margin-bottom:12px}
.wsa-timer{font-weight:700}

/* Resend */
.wsa-resend-row{text-align:center;margin-top:10px}
.wsa-resend{background:none;border:none;font-size:.75rem;font-weight:700;
  cursor:pointer;text-decoration:underline;font-family:'Vazirmatn',sans-serif}
.wsa-resend:disabled{text-decoration:none;cursor:not-allowed;opacity:.5}

/* Info box */
.wsa-info-box{border-radius:10px;padding:9px 12px;font-size:.78rem;margin-bottom:14px;
  display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.wsa-info-box svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}

/* Hint */
.wsa-hint{font-size:.73rem;line-height:1.6;display:flex;align-items:flex-start;gap:5px;margin-top:10px;}
.wsa-hint svg{width:13px;height:13px;flex-shrink:0;margin-top:2px;opacity:.6}

/* Terms */
.wsa-terms{font-size:.72rem;text-align:center;margin-top:12px;line-height:1.6}
.wsa-terms a{text-decoration:none}

/* Success */
.wsa-success{text-align:center;padding:12px 0 8px}
.wsa-success-icon{width:66px;height:66px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  animation:wsaPopIn .5s cubic-bezier(.34,1.56,.64,1) both .1s}
.wsa-success-icon svg{width:32px;height:32px}
@keyframes wsaPopIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.wsa-success h3{font-size:1.1rem;font-weight:800;margin-bottom:6px}
.wsa-success p{font-size:.82rem;line-height:1.6}

/* Spinner */
.btn-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:wsaSpin .7s linear infinite;flex-shrink:0}
@keyframes wsaSpin{to{transform:rotate(360deg)}}

@media(max-width:480px){
  .wsa-otp-input{width:40px;height:46px;font-size:1.2rem}
  .wsa-row2{flex-direction:column;gap:0}
}