/* =========================================
   RangMax Login
========================================= */

:root {

    --primary-blue:#0A3D62;
    --accent-yellow:#F4D03F;

    --text-main:#212529;
    --text-muted:#6c757d;

    --border:#dfe3e8;

    --font-family:'Vazirmatn',sans-serif;

    --transition:.35s cubic-bezier(.25,.8,.25,1);

}


/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {

    box-sizing:border-box;

    margin:0;

    padding:0;

}

html,
body {

    width:100%;

    height:100%;

}

body {

    font-family:var(--font-family);

    overflow:hidden;

}


/* =========================================
   PAGE
========================================= */

.login-page {

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:32px;

    overflow:hidden;

}


/* =========================================
   BACKGROUND
========================================= */

.login-background {

    position:absolute;

    inset:0;

    background-image:
        url("/static/images/login-background.jpg");

    background-size:cover;

    background-position:center;

    transform:scale(1.02);

}


.login-overlay {

    position:absolute;

    inset:0;

    background:rgba(4,25,40,.68);

}


/* =========================================
   LOGIN CARD
========================================= */

.login-card {

    position:relative;

    z-index:2;

    width:min(880px,100%);

    min-height:520px;

    display:grid;

    grid-template-columns:1fr 1fr;

    direction:ltr;

    overflow:hidden;

    border-radius:26px;

    background:rgba(255,255,255,.96);

    box-shadow:

        0 35px 80px rgba(0,0,0,.35),

        0 10px 25px rgba(0,0,0,.15);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}


/* =========================================
   BRAND SIDE
========================================= */

.login-brand {

    position:relative;

    direction:rtl;

    min-height:520px;

    padding:55px;

    display:flex;

    align-items:center;

    color:#fff;

    overflow:hidden;

    background:

        linear-gradient(
            145deg,
            rgba(10,61,98,.98),
            rgba(6,38,61,.96)
        );

}


.login-brand::before {

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

    border:1px solid rgba(244,208,63,.18);

    left:-140px;

    bottom:-140px;

}


.login-brand::after {

    content:"";

    position:absolute;

    width:210px;

    height:210px;

    border-radius:50%;

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

    right:-80px;

    top:-80px;

}


.brand-content {

    position:relative;

    z-index:2;

    max-width:350px;

}


.login-logo {

    width:125px;

    height:auto;

    margin-bottom:25px;

}


.brand-label {

    display:block;

    color:var(--accent-yellow);

    font-size:.68rem;

    font-weight:800;

    letter-spacing:2.5px;

    margin-bottom:14px;

}


.brand-content h1 {

    font-size:clamp(2.35rem,3.5vw,3.7rem);

    line-height:1.2;

    font-weight:900;

    margin-bottom:20px;

}


.brand-content p {

    color:rgba(255,255,255,.72);

    font-size:.9rem;

    line-height:2;

    max-width:330px;

}


.brand-divider {

    width:55px;

    height:3px;

    margin:27px 0;

    background:var(--accent-yellow);

    border-radius:10px;

}


.brand-features {

    display:flex;

    flex-direction:column;

    gap:14px;

}


.brand-features div {

    display:flex;

    align-items:center;

    gap:12px;

    color:rgba(255,255,255,.8);

    font-size:.8rem;

}


.brand-features i {

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    color:var(--accent-yellow);

    background:rgba(244,208,63,.09);

    border:1px solid rgba(244,208,63,.15);

}


/* =========================================
   FORM SIDE
========================================= */

.login-form-wrapper {

    direction:rtl;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:55px;

    background:#fff;

}


.login-form-content {

    width:100%;

    max-width:330px;

}


.login-heading {

    margin-bottom:30px;

}


.login-heading span {

    display:block;

    color:var(--primary-blue);

    font-size:.7rem;

    font-weight:800;

    margin-bottom:8px;

}


.login-heading h2 {

    font-size:1.95rem;

    color:var(--text-main);

    font-weight:900;

    margin-bottom:8px;

}


.login-heading p {

    color:var(--text-muted);

    font-size:.8rem;

}

/* =========================================
   FORM
========================================= */

.form-group {

    margin-bottom:20px;

}


.form-group label {

    display:block;

    margin-bottom:8px;

    color:var(--text-main);

    font-size:.78rem;

    font-weight:700;

}


/* =========================================
   INPUT
========================================= */

.form-group input {

    display:block;

    width:100%;

    height:52px;

    padding:0 16px;

    border:1px solid #d8dde3;

    border-radius:13px;

    outline:none;

    background:#f8fafb;

    color:var(--text-main);

    font-family:var(--font-family);

    font-size:.82rem;

    font-weight:500;

    line-height:normal;

    transition:

        border-color var(--transition),

        background var(--transition),

        box-shadow var(--transition);

    appearance:none;

    -webkit-appearance:none;

}


/* Placeholder */

.form-group input::placeholder {

    color:#a1a8b0;

    opacity:1;

}


/* Hover */

.form-group input:hover {

    border-color:#b8c0c8;

    background:#fff;

}


/* Focus */

.form-group input:focus {

    background:#fff;

    border-color:var(--primary-blue);

    box-shadow:

        0 0 0 3px rgba(10,61,98,.09);

}


/* =========================================
   LOGIN MESSAGES
========================================= */

.login-messages {

    margin-top:5px;

    margin-bottom:20px;

}


.login-message {

    padding:11px 14px;

    border-radius:11px;

    font-size:.75rem;

    line-height:1.8;

}


/* Error */

.login-message.error {

    background:#fff1f2;

    border:1px solid #fecdd3;

    color:#be123c;

}


/* Success */

.login-message.success {

    background:#ecfdf5;

    border:1px solid #a7f3d0;

    color:#047857;

}


/* Warning */

.login-message.warning {

    background:#fffbeb;

    border:1px solid #fde68a;

    color:#b45309;

}


/* Info */

.login-message.info {

    background:#eff6ff;

    border:1px solid #bfdbfe;

    color:#1d4ed8;

}


/* =========================================
   LOGIN BUTTON
========================================= */

.login-submit {

    width:100%;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:28px;

    padding:0 20px;

    border:1px solid var(--primary-blue);

    border-radius:13px;

    outline:none;

    background:var(--primary-blue);

    color:#fff;

    font-family:var(--font-family);

    font-size:.85rem;

    font-weight:800;

    line-height:1;

    cursor:pointer;

    transition:

        background var(--transition),

        border-color var(--transition),

        transform var(--transition),

        box-shadow var(--transition);

    appearance:none;

    -webkit-appearance:none;

    box-shadow:

        0 10px 22px rgba(10,61,98,.18);

}


.login-submit i {

    transition:transform var(--transition);

}


.login-submit:hover {

    background:#082f4c;

    border-color:#082f4c;

    transform:translateY(-2px);

    box-shadow:

        0 14px 28px rgba(10,61,98,.25);

}


.login-submit:hover i {

    transform:translateX(-4px);

}


.login-submit:active {

    transform:translateY(0);

    box-shadow:

        0 7px 15px rgba(10,61,98,.18);

}


.login-submit:focus-visible {

    box-shadow:

        0 0 0 4px rgba(10,61,98,.12),

        0 10px 22px rgba(10,61,98,.18);

}


/* =========================================
   FOOTER
========================================= */

.login-footer {

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:30px;

    padding-top:18px;

    border-top:1px solid #edf0f2;

    color:#9ca3af;

    font-size:.65rem;

}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:900px) {

    .login-page {

        padding:20px;

        overflow:auto;

    }


    .login-card {

        grid-template-columns:1fr;

        max-width:500px;

        min-height:auto;

    }


    .login-brand {

        min-height:auto;

        padding:40px;

    }


    .brand-content h1 {

        font-size:2.35rem;

    }


    .brand-features {

        display:none;

    }


    .login-form-wrapper {

        padding:40px;

    }

}


@media(max-width:520px) {

    .login-page {

        padding:0;

    }


    .login-card {

        min-height:100vh;

        border-radius:0;

    }


    .login-brand {

        padding:35px 25px;

    }


    .login-logo {

        width:110px;

    }


    .brand-content h1 {

        font-size:2.1rem;

    }


    .login-form-wrapper {

        padding:35px 25px;

    }


    .login-footer {

        flex-direction:column;

    }

}