/* ============================================================
   auth.css — ظاهر لطیف و مدرن برای فرم‌های ورود/ثبت‌نام دانش‌آموز
   ============================================================ */

.auth-wrap { padding: 46px 0 64px; }

.auth-card {
    background: #fff;
    border: 1px solid #eef3f3;
    border-radius: 26px;
    padding: 40px 36px;
    box-shadow: 0 24px 60px -26px rgba(50, 155, 145, .28), 0 8px 26px rgba(15, 40, 40, .05);
    position: relative;
    overflow: hidden;
}
.auth-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 5px;
    background: linear-gradient(90deg, #329B91, #6ccabf, #329B91);
}

/* سربرگ کارت */
.auth-head { text-align: center; margin-bottom: 28px; }
.auth-logo {
    display: inline-flex;
    width: 64px; height: 64px;
    border-radius: 19px;
    background: linear-gradient(135deg, #329B91, #277b74);
    align-items: center; justify-content: center;
    box-shadow: 0 12px 24px -8px rgba(50, 155, 145, .6);
    margin-bottom: 16px;
}
.auth-head h1 { margin: 4px 0 6px; font-size: 1.6rem; color: #15302d; }
.auth-head p { margin: 0; color: #7c8a89; font-size: .98rem; }

/* چیدمان فیلدها */
.af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.af-grid .full { grid-column: 1 / -1; }

.af-field { display: flex; flex-direction: column; gap: 8px; }
.af-field > label {
    font-size: .9rem;
    color: #44524f;
    font-weight: 600;
    padding-inline-start: 4px;
}

/* جعبه‌ی ورودی با آیکن */
.af-input { position: relative; display: flex; align-items: center; }
.af-input .af-ico {
    position: absolute;
    right: 15px;
    color: #a3bab6;
    display: flex;
    pointer-events: none;
    transition: color .2s ease;
}
.af-input input,
.af-input select {
    width: 100%;
    border: 1.5px solid #e6efed;
    background: #f6faf9;
    border-radius: 15px;
    padding: 13px 46px 13px 16px;   /* فضای آیکن در سمت راست (شروع در RTL) */
    font: inherit;
    font-size: 1rem;
    color: #1e2c2a;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.af-input input::placeholder { color: #aab9b6; }

.af-input input:focus,
.af-input select:focus {
    border-color: #329B91;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(50, 155, 145, .13);
}
.af-input:focus-within .af-ico { color: #329B91; }

/* فلش سفارشی برای منوهای کشویی */
.af-input.is-select::after {
    content: "";
    position: absolute;
    left: 16px;
    width: 9px; height: 9px;
    border-inline-end: 2px solid #8aa3a0;
    border-bottom: 2px solid #8aa3a0;
    transform: rotate(45deg);
    margin-top: -4px;
    pointer-events: none;
}
.af-input.is-select select { padding-left: 38px; cursor: pointer; }

/* دکمه‌ی ثبت */
.auth-submit {
    width: 100%;
    margin-top: 8px;
    background: linear-gradient(135deg, #329B91, #2a847c);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    border: none;
    border-radius: 15px;
    padding: 15px;
    cursor: pointer;
    box-shadow: 0 14px 28px -12px rgba(50, 155, 145, .7);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.auth-submit:hover { filter: brightness(1.05); box-shadow: 0 18px 34px -12px rgba(50, 155, 145, .8); }
.auth-submit:active { transform: translateY(1px); }

/* پاورقی و لینک */
.auth-foot { text-align: center; margin-top: 22px; color: #6b7878; font-size: .96rem; }
.auth-foot a { color: #329B91; font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* هشدار خطا */
.auth-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 15px;
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: .93rem;
    line-height: 1.9;
}
.auth-alert ul { margin: 0; padding-inline-start: 18px; }

@media (max-width: 560px) {
    .af-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 30px 20px; border-radius: 22px; }
}