/* =========================
   AUTH PAGE
========================= */
.auth-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}

.auth-wrapper{
    width:100%;
    max-width:390px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* =========================
   CARD
========================= */
.auth-card{
    padding:28px 24px;
    border-radius:28px;
    background:
        radial-gradient(120% 120% at top, rgba(124,140,255,.14), transparent 60%),
        linear-gradient(180deg,var(--bg-card),var(--bg-card-soft));
    border:1px solid var(--border-soft);
    box-shadow:0 35px 90px rgba(0,0,0,.6);
    animation:fadeUp .5s ease both;
}

.auth-title{
    font-size:18px;
    font-weight:900;
    text-align:center;
    margin-bottom:6px;
}

.auth-subtitle{
    font-size:12px;
    color:var(--text-muted);
    text-align:center;
    margin-bottom:24px;
}

/* =========================
   STEPS
========================= */
.step{
    display:none;
    flex-direction:column;
    gap:14px;
}
.step.active{ display:flex; }

/* =========================
   INPUTS – READABILITY FIX
========================= */
.form-control{
    border-radius:18px;
    padding:14px 16px;

    background:var(--bg-panel);
    border:1px solid var(--border-soft);

    /* 👇 خوانایی */
    color:#f2f4ff;              /* روشن‌تر از text-body */
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;

    caret-color:var(--accent-main);
}

/* Focus */
.form-control:focus{
    background:var(--bg-panel);
    border-color:var(--accent-border);
    box-shadow:0 0 0 3px var(--accent-soft);
    color:#ffffff;
}

/* Placeholder */
.form-control::placeholder{
    color:rgba(180,190,230,.55);
    font-weight:500;
}

/* مخصوص کد OTP */
#code{
    font-size:18px;
    font-weight:900;
    letter-spacing:6px;
    text-align:center;
}


/* =========================
   BUTTONS
========================= */
.btn-auth{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    padding:12px;
    font-size:14px;
    font-weight:900;
    color:#fff;
    border:none;
    background:linear-gradient(135deg,var(--cta-blue),var(--cta-blue-dark));
    box-shadow:0 14px 40px var(--cta-blue-glow);
    transition:.25s;
}

.btn-auth:hover{
    transform:translateY(-1px);
    box-shadow:0 20px 55px rgba(47,107,255,.65);
}

.btn-auth:active{
    transform:none;
}

/* loading */
.btn-auth .spinner{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    animation:spin .7s linear infinite;
    display:none;
}

.btn-auth.loading span{ visibility:hidden; }
.btn-auth.loading .spinner{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

/* =========================
   OTP META
========================= */
.otp-meta{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:var(--text-muted);
}

.otp-meta button{
    background:none;
    border:none;
    color:var(--accent-main);
    font-weight:700;
    cursor:pointer;
}

/* =========================
   MESSAGE
========================= */
.auth-message{
    display:none;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(15,20,34,.95);
    border:1px solid var(--border-soft);
    box-shadow:0 18px 50px rgba(0,0,0,.55);
    animation:slideUp .35s ease both;
}

.auth-message.show{ display:flex; }
.auth-message.success{ border-color:rgba(63,209,139,.45); }
.auth-message.error{ border-color:rgba(255,107,107,.45); }

.auth-message .icon{
    margin-left:10px;
    font-size:18px;
}

.auth-message .text{
    font-size:12px;
    line-height:1.7;
    color:var(--text-main);
}

/* =========================
   ANIMATIONS
========================= */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes fadeUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1} }
@keyframes slideUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1} }