/* =========================================

   Login (stable, RTL/LTR-safe, responsive)

   File: assets/css/login.css

========================================= */



/* ---------- Design tokens ---------- */

:root {

    --brand: #4d756a;

    --brand-strong: #3B6E4D;

    --ink: #444;

    --paper: #fff;

    --muted: rgba(0, 0, 0, .15);

    --radius-lg: 12px;

    --radius-md: 10px;

    --radius-sm: 8px;

    --shadow: 0 0 15px rgba(0, 0, 0, .15);

    --w-form: clamp(18rem, 48vw, 22rem);

    /* عرض ثابت و منطقی برای ورودی‌ها */

}



/* ---------- Reset ---------- */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box

}



html {

    font-size: 16px

}



body {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    /* ثابت؛ جهت‌دهی به محتوای داخلی واگذار می‌شود */

    position: relative;

    overflow: hidden;

    color: var(--ink);

    font-family: 'Modam', 'iranYekan', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

}



input {

    font-family: 'Modam', 'iranYekan', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;



}



button {

    font-family: 'Modam', 'iranYekan', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

}



/* تصویر پس‌زمینه: مسیر درست نسبت به محل این فایل */

body::before {

    content: "";

    position: absolute;

    inset: 0;

    background: url(../img/login/2.jpg) center/cover fixed;

    filter: blur(3px);

    z-index: -1;

}



@media (max-width:600px) {

    body::before {

        filter: blur(4px);

        background-attachment: scroll

    }

}



@media (prefers-reduced-motion:reduce) {

    * {

        transition: none !important;

        animation: none !important

    }

}



/* ---------- Back to site (اختیاری) ---------- */

.back-site {

    margin-block-start: 64px

}



.back-site a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-block-start: 12px;

    font-size: clamp(14px, 2.5vw, 18px);

    font-weight: 600;

    border: none;

    text-decoration: none;

    background: var(--brand-strong);

    color: #fff;

    inline-size: min(800px, 92vw);

    block-size: 40px;

    padding-inline: 14px;

    border-radius: 25px;

    transition: background .25s ease, transform .12s ease;

}



.back-site a:hover {

    background: var(--brand)

}



.back-site a:active {

    transform: translateY(1px)

}



.back-site a:focus-visible {

    outline: 3px solid #90dac0;

    outline-offset: 3px

}



/* ---------- Layout container ---------- */

.login {

    inline-size: 100%

}



.flex-login {

    /* Grid بجای فلکس برای ثبات کامل */

    display: grid;

    grid-template-columns: 1fr 1fr;

    /* تصویر | فرم */

    gap: 0;

    inline-size: min(56rem, 96vw);

    margin-inline: auto;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow);

    overflow: hidden;

    background: transparent;

    border: 1px solid rgba(0, 0, 0, .08);

}



/* ---------- Image panel ---------- */

.image {

    block-size: 28rem;

    inline-size: 100%;

    overflow: hidden;

}



.image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.02);

}



/* ---------- Form panel ---------- */

.full-login {

    background: var(--paper);

    padding: clamp(16px, 4vw, 28px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: clamp(12px, 2.6vw, 22px);

    border-inline-start: 1px solid rgba(0, 0, 0, .06);

    /* فقط برای جدا شدن از تصویر */

}



/* ---------- Headings ---------- */

.top-login {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    text-align: center

}



.top-login h1 {

    font-size: clamp(1rem, 2.2vw, 1.25rem);

    font-weight: 800;

    color: var(--ink)

}



.top-login p {

    font-size: clamp(.75rem, 1.8vw, .9rem);

    background: color-mix(in oklab, var(--brand) 65%, #000 0%);

    color: #fff;

    padding: 6px 10px;

    border-radius: var(--radius-md);

    font-weight: 500;

}



/* ---------- Form ---------- */

.center-login {

    display: flex;

    flex-direction: column;

    align-items: center;

    inline-size: 100%

}



.number-user {

    inline-size: 100%;

    display: flex;

    justify-content: center

}



.text-number {

    inline-size: var(--w-form);

    block-size: 2.35rem;

    padding-inline: 8px;

    border: none;

    outline: none;

    background: #fff;

    border-bottom: 2px solid var(--brand-strong);

    transition: border-color .2s ease, background-color .2s ease;

}



.text-number::placeholder {

    opacity: .85

}



.text-number:focus {

    border-bottom-color: var(--brand)

}



.number-user+.number-user {

    margin-block-start: 18px

}



/* ---------- Password eye (ثابت برای RTL/LTR) ---------- */

.password-wrap {

    position: relative;

    display: flex;

    justify-content: center

}



#togglePass {

    position: absolute;

    inset-inline-end: max(calc((100% - var(--w-form))/2 + 6px), 6px);

    inset-block-end: 6px;

    border: 0;

    cursor: pointer;

    color: var(--brand);

    padding: 6px;

    border-radius: 10px;

    line-height: 1;

    font-size: 16px;

    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;

}



#togglePass:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);

}



#togglePass:active {

    transform: translateY(0);

}



#togglePass:focus-visible {

    outline: 2px solid #90dac0;

    outline-offset: 2px

}



#togglePass svg {

    width: 18px;

    height: 18px;

    display: block

}



#togglePass .eye {

    position: absolute;

    inset: 0;

    transition: opacity .18s, transform .18s

}



#togglePass .eye-open {

    opacity: 1;

    transform: rotate(0) scale(1)

}



#togglePass .eye-closed {

    opacity: 0;

    transform: rotate(-8deg) scale(.9)

}



#togglePass.on .eye-open {

    opacity: 0;

    transform: rotate(8deg) scale(.9)

}



#togglePass.on .eye-closed {

    opacity: 1;

    transform: rotate(0) scale(1)

}



.peek-hint {

    position: absolute;

    inset-inline-end: 0;

    inset-block-end: 40px;

    padding: 6px 8px;

    font-size: 11px;

    color: #fff;

    background: rgba(0, 0, 0, .75);

    border-radius: 6px;

    white-space: nowrap;

    opacity: 0;

    transform: translateY(6px);

    transition: opacity .18s ease, transform .18s ease;

    pointer-events: none;

}



#togglePass:hover .peek-hint,

#togglePass:focus-visible .peek-hint {

    opacity: 1;

    transform: translateY(0)

}



/* ---------- Check & actions ---------- */

.check-box {

    margin-block-start: 16px;

    display: flex;

    gap: 8px;

    align-items: center;

    justify-content: flex-start;

    inline-size: var(--w-form);

}



.des-check {

    font-size: .85rem;

    color: var(--ink)

}



.bottom-login,

.bottom-login2 {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    inline-size: 100%

}



.bottom-login input[type="submit"] {

    margin-block-start: 14px;

    font-size: clamp(15px, 2.4vw, 18px);

    font-weight: 600;

    cursor: pointer;

    border: none;

    background: var(--brand);

    color: #fff;

    padding: 10px 12px;

    inline-size: min(16rem, 80%);

    border-radius: var(--radius-sm);

    transition: background .2s ease, transform .12s ease, opacity .2s ease;

}



.bottom-login input[type="submit"]:hover {

    background: var(--brand-strong)

}



.bottom-login input[type="submit"]:active {

    transform: translateY(1px)

}



.bottom-login input[type="submit"]:disabled {

    opacity: .55;

    cursor: not-allowed

}



.bottom-login2 {

    margin-block-start: 10px;

    gap: 8px;

    display: flex;

    flex-direction: row;

}



.bottom-login2 a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    color: var(--brand);

    border: 1px solid var(--brand);

    padding: 6px 10px;

    border-radius: var(--radius-sm);

    transition: color .2s ease, background .2s ease, transform .12s ease;

    inline-size: max-content;

    width: max-content;

}



.bottom-login2 a:hover {

    color: #fff;

    background: var(--brand)

}



.bottom-login2 a:active {

    transform: translateY(1px)

}



/* ---------- Form message ---------- */

#formMsg {

    min-block-size: 22px;

    margin-block-start: 8px;

    color: #b23;

    font-size: .9rem;

    text-align: center;

    inline-size: var(--w-form);

}



/* ---------- Language mini switch (اختیاری) ---------- */

.lang-mini {

    position: fixed;

    inset-block-start: 14px;

    inset-inline-end: 14px;

    z-index: 10;

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.lang-mini button {

    appearance: none;

    border: 1px solid var(--brand);

    background: #fff;

    color: var(--brand);

    padding: 6px 10px;

    border-radius: 18px;

    cursor: pointer;

    font-size: 12px;

    line-height: 1;

    transition: .2s;

}



.lang-mini button[aria-pressed="true"] {

    background: var(--brand);

    color: #fff

}



.lang-mini button:focus-visible {

    outline: 2px solid #90dac0;

    outline-offset: 2px

}



/* ---------- Responsive ---------- */

@media (max-width: 1024px) {

    .flex-login {

        inline-size: min(50rem, 96vw)

    }



    .image {

        block-size: 27rem

    }

}



@media (max-width: 820px) {

    .flex-login {

        grid-template-columns: 1fr;

        inline-size: min(36rem, 94vw)

    }



    .image {

        order: -1;

        block-size: 10rem

    }



    .full-login {

        border-inline-start: 0

    }

}



@media (max-width: 480px) {

    :root {

        --w-form: clamp(16rem, 84vw, 20rem)

    }



    .image {

        block-size: 9rem

    }

}



@media (max-width: 360px) {

    .image {

        block-size: 8rem

    }



    .top-login h1 {

        font-size: 1rem

    }



    .top-login p {

        font-size: .8rem

    }

}