/* =========================================
       Login Page
       ========================================= */

.login-page {
    direction: rtl;
    min-height: 100vh;

    padding: 45px 15px 60px;

    /* بک‌گراند آبی تیره */
    background:
            radial-gradient(
                    circle at top center,
                    rgba(30, 75, 125, 0.35),
                    transparent 45%
            ),
            #071a2d;
}


/* =========================================
   Header
   ========================================= */

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 193, 7, 0.10);

    border: 1px solid rgba(255, 193, 7, 0.35);

    color: #ffc107;

    font-size: 28px;

    box-shadow:
            0 0 25px rgba(255, 193, 7, 0.08);
}

.login-header h1 {
    margin: 0;

    color: #fff;

    font-size: 27px;
    font-weight: 700;
}

.login-header h1 span {
    display: block;

    margin-top: 5px;

    color: #ffc107;

    font-size: 14px;
    font-weight: 500;
}


/* =========================================
   Container
   ========================================= */

.login-container {
    width: 100%;
    max-width: 500px;

    margin: 0 auto;
}


/* =========================================
   Main Box
   ========================================= */

.login-box {
    background: #fff;

    padding: 30px;

    border-radius: 18px;

    border: 1px solid rgba(255, 255, 255, 0.8);

    box-shadow:
            0 20px 55px rgba(0, 0, 0, 0.30);
}


/* =========================================
   Title
   ========================================= */

.login-title {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 28px;

    padding-bottom: 20px;

    border-bottom: 1px solid #eee;
}

.login-title .icon {
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(255, 193, 7, 0.12);

    color: #dfa900;

    font-size: 22px;
}

.login-title h3 {
    margin: 0;

    color: #263238;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.7;
}

.login-title h3 small {
    display: block;

    margin-top: 2px;

    color: #888;

    font-size: 12px;
    font-weight: 400;
}


/* =========================================
   Form
   ========================================= */

.login-form .form-group {
    margin-bottom: 18px;
}

.login-form .control-label {
    display: block;

    margin-bottom: 8px;

    color: #555;

    font-size: 13px;
    font-weight: 600;
}

.login-form .form-control {
    height: 48px;

    padding: 0 14px;

    border: 1px solid #ddd;

    border-radius: 11px;

    background: #fff;

    color: #333;

    font-size: 14px;

    direction: rtl;

    transition: all 0.2s ease;
}

.login-form .form-control::placeholder {
    color: #aaa;
}

.login-form .form-control:focus {
    border-color: #ffc107;

    box-shadow:
            0 0 0 3px rgba(255, 193, 7, 0.12);
}


/* =========================================
   Remember Me
   ========================================= */

.login-remember {
    margin-top: 0;
    margin-bottom: 17px;
}

.login-remember .form-check {
    padding-right: 1.7em;
    padding-left: 0;
}

.login-remember .form-check-input {
    float: right;

    margin-right: -1.7em;
    margin-left: 0;

    margin-top: 0.25em;

    cursor: pointer;
}

.login-remember .form-check-input:checked {
    background-color: #ffc107;

    border-color: #ffc107;
}

.login-remember .form-check-label {
    color: #666;

    font-size: 13px;

    cursor: pointer;
}


/* =========================================
   Forgot Password
   ========================================= */

.login-forgot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 22px;

    padding: 12px 14px;

    border-radius: 10px;

    background: #f8f9fa;

    font-size: 12px;

    color: #777;
}

.login-forgot i {
    color: #dfa900;

    font-size: 15px;
}

.login-forgot a {
    color: #c89500;

    font-weight: 600;

    text-decoration: none;

    transition: 0.2s;
}

.login-forgot a:hover {
    color: #9f7600;

    text-decoration: underline;
}


/* =========================================
   Login Button
   ========================================= */

.login-btn {
    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    position: relative;

    border: 0;
    border-radius: 11px;

    background: #ffc107;

    color: #17202a;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            background 0.2s ease;
}

.login-btn:hover {
    background: #eab000;

    transform: translateY(-1px);

    box-shadow:
            0 8px 20px rgba(255, 193, 7, 0.25);
}

.login-btn:active {
    transform: translateY(0);
}

.login-btn .btn-icon {
    font-size: 17px;
}

.login-btn .arrow {
    position: absolute;

    left: 14px;

    font-size: 15px;
}


/* =========================================
   Signup Link
   ========================================= */

.login-signup {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid #eee;

    color: #777;

    font-size: 13px;
}

.login-signup a {
    color: #c89500;

    font-weight: 700;

    text-decoration: none;
}