/* Login / forgot-password / OTP modal — additive stylesheet, loaded alongside
   style.css. Structural classes (.signin-form-container, #loginForm, .otp-input,
   etc.) are the real contract public/dist/js/custom/site/login.js already listens
   for — kept identical to the old modal so login.js works with zero JS changes,
   only restyled with the .auth-* classes below. */

.auth-modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,20,28,.55);z-index:1000;align-items:center;justify-content:center;padding:20px}
.auth-modal{position:relative;background:#fff;border-radius:var(--radius);width:440px;max-width:100%;max-height:90vh;overflow-y:auto;padding:32px 28px 26px;box-shadow:var(--shadow-lg)}
.auth-modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;line-height:1}
.auth-modal-close:hover{color:var(--ink)}
.auth-modal-close svg{width:16px;height:16px;display:block}

.auth-tabs-nav{text-align:center;margin-bottom:20px}
.auth-tabs-nav .login-active{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.3px}

.auth-modal-title{text-align:center;margin-bottom:4px}
.auth-modal-title h1{font-size:18px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:-.2px;margin-bottom:6px}
.auth-modal-title p{font-size:12.5px;color:var(--muted)}
.auth-modal-title-strong{text-align:center;font-size:17px;font-weight:800;color:var(--ink);text-transform:uppercase;margin:14px 0 8px}
.auth-modal-sub{text-align:center;font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:6px}
.auth-modal-sub span{display:block}

.auth-field{position:relative;margin-bottom:14px}
.auth-input{width:100%;height:46px;border:1.5px solid var(--line);border-radius:10px;padding:0 16px;font-size:14px;font-family:'Inter',sans-serif;color:var(--ink);transition:border-color .15s}
.auth-input:focus{outline:none;border-color:var(--orange)}
.auth-input::placeholder{color:var(--muted)}
.auth-field-msg{display:block;font-size:11.5px;margin-top:5px;color:var(--muted)}
.auth-field-msg-error{color:var(--red)}

.auth-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;background:var(--ink);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;transition:background .15s}
.auth-btn:hover{background:var(--orange)}
.auth-btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.auth-btn-outline:hover{background:var(--bg);color:var(--ink)}
.auth-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:authSpin .7s linear infinite}
@keyframes authSpin{to{transform:rotate(360deg)}}

.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0 14px;font-size:11.5px;color:var(--muted);text-align:center}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-sso-row{display:flex;gap:10px}
.auth-sso-btn{flex:1;display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;color:#fff;font-size:12.5px;font-weight:700;text-decoration:none}
.auth-sso-google{background:#e0453c}
.auth-sso-google:hover{background:#c8392f}
.auth-sso-facebook{background:#3b5998}
.auth-sso-facebook:hover{background:#2f477a}

.auth-otp-note{background:var(--orange-light);color:var(--orange);border-radius:10px;padding:12px 16px;margin-top:14px;font-size:12.5px;text-align:center;line-height:1.6}
.auth-otp-row{display:flex;justify-content:center;gap:10px;margin:18px 0 6px}
.otp-input{width:46px;height:52px;text-align:center;font-size:18px;font-weight:700;color:var(--ink);border:1.5px solid var(--line);border-radius:10px}
.otp-input:focus{outline:none;border-color:var(--orange)}
.auth-center{text-align:center}
.auth-resend{text-align:center;font-size:12.5px;color:var(--muted);margin:14px 0}
.auth-resend a{color:var(--orange);font-weight:700;text-decoration:underline;cursor:pointer}

.auth-back-link{text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px}
.auth-back-link span{color:var(--ink);font-weight:700;cursor:pointer;text-decoration:underline}

.password-container{display:flex;align-items:center}
.password-container .auth-input{padding-right:52px}
.auth-toggle-eye,.auth-toggle-check{position:absolute;right:14px;top:14px;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;text-transform:uppercase}
.auth-toggle-check{color:#12b76a}

.auth-success-icon{width:64px;height:64px;margin:0 auto;border-radius:50%;background:#e9f9ee;color:#12b76a;display:flex;align-items:center;justify-content:center}
.auth-success-icon svg{width:32px;height:32px}

@media(max-width:480px){
  .auth-modal{padding:26px 18px 20px;border-radius:var(--radius-sm)}
  .auth-modal-title h1{font-size:16px}
  .otp-input{width:40px;height:46px;font-size:16px}
  .auth-otp-row{gap:8px}
}