/* ============================
   Auth Modal — Compact, Thoughtful Spacing
   Brand: #2B3186
   ============================ */

#psb-phone-auth-modal.psb-modal{
  position:fixed !important; inset:0 !important; z-index:999999 !important;
  display:none !important; align-items:center !important; justify-content:center !important;
  background:rgba(0,0,0,.45) !important; backdrop-filter:blur(6px) saturate(160%) !important;
}
#psb-phone-auth-modal.psb-modal.show{ display:flex !important; }
body.psb-modal-open{ overflow:hidden !important; }

/* Card */
#psb-phone-auth-modal .psb-modal-content{
  position:relative !important; background:#fff !important; border-radius:18px !important;
  width:min(94vw, 440px) !important;
  max-height:calc(100dvh - 64px) !important; overflow:auto !important;
  padding:24px !important;
  border:1px solid rgba(43,49,134,.08) !important; box-shadow:0 24px 64px rgba(2,6,23,.18) !important;
  animation:psb-in .18s ease-out both !important;
}
@keyframes psb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Close (size + hitbox + alignment fixed) */
#psb-phone-auth-modal .psb-modal-close{
  position:absolute !important; top:12px !important; right:12px !important;
  width:32px !important; height:32px !important; border-radius:10px !important; border:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:rgba(15,23,42,.06) !important; color:#0f172a !important;
  font-size:18px !important; line-height:1 !important; cursor:pointer !important;
}
#psb-phone-auth-modal .psb-modal-close:hover,
#psb-phone-auth-modal .psb-modal-close:focus-visible{background:rgba(15,23,42,.12) !important; outline:none !important}

/* Stepper */
#psb-phone-auth-modal .psb-stepper{display:flex !important; gap:14px !important; justify-content:center !important; margin:0 0 10px !important}
#psb-phone-auth-modal .psb-step{display:flex !important; gap:6px !important; align-items:center !important; opacity:.6 !important; font-weight:700 !important; color:#6b7280 !important; font-size:12px !important}
#psb-phone-auth-modal .psb-step.psb-step-active{opacity:1 !important; color:#2B3186 !important}
#psb-phone-auth-modal .psb-step-dot{width:6px !important; height:6px !important; border-radius:50% !important; background:#e5e7eb !important}
#psb-phone-auth-modal .psb-step.psb-step-active .psb-step-dot{background:#2B3186 !important}

/* Header */
#psb-phone-auth-modal .psb-auth-header{margin:10px 0 14px !important}
#psb-phone-auth-modal .psb-auth-header h3{margin:0 0 6px !important; font-size:20px !important; font-weight:800 !important; color:#0f172a !important}
#psb-phone-auth-modal .psb-auth-subtitle{margin:0 !important; font-size:14px !important; color:#6b7280 !important}

/* Steps (no !important so JS can toggle) */
#psb-phone-auth-modal .psb-auth-step{display:none}
#psb-phone-auth-modal .psb-auth-step.active{display:block}

/* Fields */
#psb-phone-auth-modal .psb-form-group{margin:16px 0 !important}
#psb-phone-auth-modal .psb-form-group label{display:block !important; margin-bottom:8px !important; font-weight:700 !important; font-size:13.5px !important; color:#111827 !important}

/* Inputs */
#psb-phone-auth-modal .psb-input-wrap{position:relative !important}
#psb-phone-auth-modal .psb-input-wrap input{
  width:100% !important; height:44px !important;
  padding:0 14px !important; border:1px solid #e5e7eb !important; border-radius:12px !important;
  background:#fff !important; color:#111827 !important; font-size:15px !important;
  transition:border-color .18s, box-shadow .18s !important;
}
#psb-phone-auth-modal .psb-input-wrap input:focus{outline:none !important; border-color:#2B3186 !important; box-shadow:0 0 0 3px rgba(43,49,134,.18) !important}
#psb-phone-auth-modal .psb-input-wrap input::placeholder{color:#9ca3af !important}

/* Phone input */
#psb-phone-auth-modal .psb-phone-input{
  display:flex !important; align-items:center !important; height:44px !important;
  border:1px solid #e5e7eb !important; border-radius:12px !important; overflow:hidden !important; background:#fff !important;
}
#psb-phone-auth-modal .psb-phone-input:focus-within{border-color:#2B3186 !important; box-shadow:0 0 0 3px rgba(43,49,134,.18) !important}
#psb-phone-auth-modal .psb-country-code{
  background:#eef0ff !important; color:#2B3186 !important; font-weight:800 !important;
  padding:0 14px !important; display:flex !important; align-items:center !important; height:100% !important; border-right:1px solid #e5e7eb !important; min-width:58px !important; justify-content:center !important;
}
#psb-phone-auth-modal .psb-phone-input input{border:0 !important; height:100% !important; padding:0 12px !important; flex:1 !important; font-size:15px !important}

/* Alerts */
#psb-phone-auth-modal .psb-inline-alert{
  display:flex !important; align-items:center !important; gap:8px !important;
  padding:10px !important; border-radius:10px !important; margin:8px 0 2px !important; font-size:14px !important;
}
#psb-phone-auth-modal .psb-inline-alert i{min-width:16px; text-align:center}
#psb-phone-auth-modal .psb-inline-alert-error{background:#fff1f2 !important; color:#dc3545 !important; border:1px solid #fecdd3 !important}
#psb-phone-auth-modal .psb-inline-alert-success{background:#ecfdf5 !important; color:#18a957 !important; border:1px solid #bbf7d0 !important}
#psb-phone-auth-modal .psb-field-error{color:#dc3545 !important; font-size:13px !important; margin-top:6px !important; min-height:0 !important}
#psb-phone-auth-modal .psb-field-error:empty{display:none !important}
#psb-phone-auth-modal .psb-inline-alert-text:empty{display:none !important}
#psb-phone-auth-modal .psb-inline-alert:has(.psb-inline-alert-text:empty){display:none !important}

/* OTP */
#psb-phone-auth-modal .psb-otp-inputs{
  display:grid !important; grid-template-columns:repeat(6, 44px) !important; gap:12px !important;
  justify-content:center !important; margin:8px 0 14px !important;
}
#psb-phone-auth-modal .psb-otp-input{
  width:44px !important; height:44px !important; text-align:center !important;
  border:1.5px solid #e5e7eb !important; border-radius:10px !important;
  font-size:18px !important; font-weight:800 !important; color:#111827 !important;
  transition:border-color .18s, box-shadow .18s, background-color .18s !important;
}
#psb-phone-auth-modal .psb-otp-input:focus{outline:none !important; border-color:#2B3186 !important; box-shadow:0 0 0 3px rgba(43,49,134,.18) !important}
#psb-phone-auth-modal .psb-otp-input.filled{background:#eef0ff !important; border-color:#2B3186 !important}

/* Timer */
#psb-phone-auth-modal .psb-otp-timer{text-align:center !important; color:#6b7280 !important; font-size:13px !important; margin:0 0 12px !important}
#psb-phone-auth-modal #psb-resend-otp[disabled]{opacity:.5 !important; pointer-events:none !important}

/* Buttons */
#psb-phone-auth-modal .psb-btn,
#psb-phone-auth-modal .psb-btn-primary{
  width:100% !important; height:46px !important;
  border:0 !important; border-radius:14px !important; padding:0 16px !important;
  font-weight:800 !important; font-size:15px !important; cursor:pointer !important;
  background:linear-gradient(135deg,#2B3186 0%, #23287B 100%) !important; color:#fff !important;
  box-shadow:0 10px 22px rgba(43,49,134,.18) !important;
}
#psb-phone-auth-modal .psb-btn:hover,
#psb-phone-auth-modal .psb-btn:focus-visible{filter:saturate(104%) brightness(1.02) !important; outline:none !important}
#psb-phone-auth-modal .psb-btn[disabled]{background:#F2F4F7 !important; color:#98A2B3 !important; cursor:not-allowed !important}
#psb-phone-auth-modal .psb-link-btn{background:none !important; border:none !important; color:#2B3186 !important; text-decoration:underline !important; padding:0 !important; margin-top:12px !important; font-weight:700 !important}
#psb-phone-auth-modal .psb-link-btn:hover{ text-decoration-thickness:2px !important }

/* Terms */
#psb-phone-auth-modal .psb-auth-terms{margin-top:14px !important; font-size:12.5px !important; color:#6b7280 !important; line-height:1.5 !important}

/* Legacy loader hidden */
#psb-phone-auth-modal #psb-auth-loading,
#psb-phone-auth-modal .psb-auth-loading{display:none !important}

/* Responsive */
@media (max-width:480px){
  #psb-phone-auth-modal .psb-modal-content{width:100% !important; max-height:100dvh !important; border-radius:16px !important; padding:18px !important}
  #psb-phone-auth-modal .psb-otp-inputs{grid-template-columns:repeat(6, 40px) !important; gap:10px !important}
  #psb-phone-auth-modal .psb-otp-input{width:40px !important; height:40px !important; font-size:17px !important}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #psb-phone-auth-modal .psb-modal-content{animation:none !important}
}