/* صفحه‌های ورود (شماره موبایل) و تأیید کد — جایگزین css/pages/login.css
   کلاس‌ها با au- شروع می‌شوند. رنگ‌ها از متغیرهای base.css می‌آیند (تم تیره هم پشتیبانی می‌شود). */

.au {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    max-width: 960px;
    margin: 10px auto 30px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(17, 24, 39, .16);
    border: 1px solid var(--line);
    background: var(--card)
}

/* ── پنل برند (سمت چپ/تیره) ── */
.au-brand {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 44px 36px;
    background: linear-gradient(135deg, #0b1220 0%, #3b0a14 58%, #c8102e 135%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px
}
.au-brand:before, .au-brand:after {
    content: ""; position: absolute; border-radius: 50%; border: 44px solid rgba(255, 255, 255, .06); pointer-events: none
}
.au-brand:before { width: 300px; height: 300px; left: -110px; top: -110px }
.au-brand:after { width: 220px; height: 220px; right: -90px; bottom: -90px; border-width: 34px }
.au-logo { font-size: 30px; font-weight: 700; letter-spacing: .5px; line-height: 1.2; margin-bottom: 22px }
.au-logo small { display: block; font-size: 12px; font-weight: 400; opacity: .7; letter-spacing: 0 }
.au-brand h2 { font-size: 22px; margin: 0 0 14px }
.au-brand ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; z-index: 1 }
.au-brand li { display: flex; gap: 12px; align-items: center; opacity: .92 }
.au-brand li i {
    font-style: normal; width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center; background: rgba(255, 255, 255, .12)
}

/* ── پنل فرم ── */
.au-panel {
    border: 0; border-radius: 0; box-shadow: none;
    padding: 36px 36px 28px
}
.au-panel h1 { font-size: 24px; margin: 4px 0 6px }
.au-sub { color: var(--muted); margin: 0 0 20px; line-height: 2; text-align: right }
.au-phone { color: var(--text); letter-spacing: .5px }
.au-link { color: var(--pri); font-weight: 500 }
.au-link:hover { text-decoration: underline !important }

/* مراحل */
.au-steps { list-style: none; display: flex; gap: 10px; margin: 0 0 22px; padding: 0 }
.au-steps li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; flex: 1 }
.au-steps li:not(:last-child):after { content: ""; flex: 1; height: 2px; background: var(--line); border-radius: 2px }
.au-steps b {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
    border: 2px solid var(--line); font-size: 13px; background: var(--card)
}
.au-steps li.on { color: var(--text); font-weight: 500 }
.au-steps li.on b { background: var(--pri); border-color: var(--pri); color: #fff }
.au-steps li.done b { background: var(--ok); border-color: var(--ok); color: #fff }
.au-steps li.done:not(:last-child):after { background: var(--ok) }

/* فیلد موبایل */
.au-field { position: relative }
.au-field input { padding: 13px 14px 13px 46px; font-size: 18px; letter-spacing: 1px; border-radius: 12px; margin-bottom: 6px }
.au-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; margin-top: -2px }
.au-hint { font-size: 12px; color: var(--warn); margin: 0 0 12px }
.au-err { display: block; color: var(--pri); font-size: 12px; margin: 0 0 10px }
.au-err:empty { display: none }

.au .btn.block { margin-top: 10px; border-radius: 12px }
.au .btn:disabled { opacity: .5; cursor: not-allowed }
.au-foot { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0 }

/* پیام خطا */
.alert-msg {
    background: var(--pri-soft); color: var(--pri); border: 1px solid transparent;
    border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px
}
.alert-msg:empty { display: none }

/* ── کد ۶ رقمی ── */
.au-otp { display: flex; gap: 10px; justify-content: center; margin: 6px 0 4px }
.au-otp input {
    width: 100%; max-width: 54px; height: 62px; padding: 0; margin: 0; text-align: center;
    font-size: 26px; font-weight: 700; border-radius: 12px; border: 2px solid var(--line)
}
.au-otp input:focus { border-color: var(--pri) }
.au-otp input.filled { border-color: var(--pri); background: var(--pri-soft) }
.au-otp.bad input { border-color: var(--pri); animation: au-shake .35s }
.au-real { text-align: center; font-size: 22px; letter-spacing: 8px }
.au-real.js { display: none }
@keyframes au-shake { 25% { transform: translateX(5px) } 75% { transform: translateX(-5px) } }

.au-timer { text-align: center; color: var(--muted); font-size: 13px; margin: 10px 0 4px; min-height: 24px }
.au-timer .au-link { font-size: 14px }

@media (max-width: 800px) {
    .au { grid-template-columns: 1fr; max-width: 480px }
    .au-brand { padding: 24px 22px }
    .au-brand ul, .au-brand h2 { display: none }
    .au-logo { margin: 0 }
    .au-panel { padding: 26px 20px 22px }
    .au-otp input { height: 54px; font-size: 22px }
}