:root {

    --primary: #4285f4;
    --primary-dark: #2563c7;

    --secondary: #db4437;

    --dark: #172033;
    --text: #687080;

    --light: #f5f8fd;

    --border: #e3e8f0;

    --white: #ffffff;
}


* {
    box-sizing: border-box;
}


body {

    margin: 0;

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

    color: var(--dark);

    background: #f5f8fd;
}


/* ===================================
   Auth Page
=================================== */

.auth-page {

    min-height: 100vh;

    padding: 35px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(66,133,244,.12),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(219,68,55,.08),
            transparent 30%
        ),

        #f6f9ff;
}


/* ===================================
   Logo
=================================== */

.auth-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;
}


.logo-icon {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #75a9ff
        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

    box-shadow:
        0 8px 20px rgba(66,133,244,.2);
}


.logo-text {

    font-size: 27px;

    font-weight: 800;

    direction: ltr;
}


.logo-text span {

    color: var(--primary);
}


.logo-text strong {

    color: var(--secondary);
}


/* ===================================
   Card
=================================== */

.auth-card {

    width: 100%;

    max-width: 900px;

    background: white;

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

    border-radius: 24px;

    padding: 38px;

    box-shadow:
        0 20px 60px rgba(20,40,80,.08);
}


.login-card {

    max-width: 500px;

    padding: 45px;
}


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

.auth-header {

    text-align: center;

    margin-bottom: 35px;
}


.auth-icon {

    width: 65px;

    height: 65px;

    margin: 0 auto 15px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf2ff;

    color: var(--primary);

    font-size: 29px;
}


.auth-header h1 {

    font-size: 28px;

    font-weight: 800;

    margin-bottom: 8px;
}


.auth-header p {

    color: var(--text);

    margin: 0;

    font-size: 14px;
}


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

.form-section {

    padding: 25px 0;

    border-bottom: 1px solid var(--border);
}


.form-section:last-of-type {

    border-bottom: none;
}


.section-heading {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 17px;

    font-weight: 800;

    margin-bottom: 20px;

    color: var(--dark);
}


.section-heading i {

    color: var(--primary);

    font-size: 20px;
}


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

.form-label {

    font-weight: 700;

    font-size: 14px;

    margin-bottom: 8px;
}


.form-label span {

    color: var(--secondary);
}


.form-control {

    height: 50px;

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

    border-radius: 10px;

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

    font-size: 14px;

    padding: 10px 15px;

    transition: .25s;
}


.form-control:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(66,133,244,.12);
}


.input-icon {

    position: relative;
}


.input-icon i {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #929aaa;

    z-index: 2;
}


.input-icon .form-control {

    padding-right: 43px;
}


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

.password-input {

    position: relative;
}


.password-input .form-control {

    padding-left: 50px;
}


.password-toggle {

    position: absolute;

    left: 5px;

    top: 5px;

    width: 40px;

    height: 40px;

    border: none;

    background: transparent;

    color: #7c8492;

    border-radius: 8px;

    cursor: pointer;
}


.password-toggle:hover {

    background: #f1f4f8;

    color: var(--primary);
}


/* ===================================
   Terms
=================================== */

.terms-box {

    background: #f7f9fc;

    border-radius: 12px;

    padding: 15px;

    margin: 25px 0;
}


.form-check-input {

    cursor: pointer;
}


.form-check-input:checked {

    background-color: var(--primary);

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


.form-check-label {

    font-size: 13px;

    color: var(--text);
}


.form-check-label a {

    color: var(--primary);

    font-weight: 700;
}


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

.btn-auth {

    width: 100%;

    height: 52px;

    border: none;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #2f73dc
        );

    color: white;

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

    font-size: 16px;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    cursor: pointer;

    transition: .3s;

    box-shadow:
        0 8px 20px rgba(66,133,244,.2);
}


.btn-auth:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(66,133,244,.3);
}


.btn-auth i {

    transition: .3s;
}


.btn-auth:hover i {

    transform: translateX(-4px);
}


/* ===================================
   Footer
=================================== */

.auth-footer {

    text-align: center;

    margin-top: 22px;

    color: var(--text);

    font-size: 14px;
}


.auth-footer a {

    color: var(--primary);

    font-weight: 800;

    margin-right: 4px;
}


.copyright {

    margin-top: 25px;

    color: #929aaa;

    font-size: 12px;

    text-align: center;
}


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

.forgot-password {

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;
}


.forgot-password:hover {

    color: var(--primary-dark);
}


.remember-check {

    color: var(--text);

    font-size: 13px;
}


.back-home {

    margin-top: 22px;

    color: var(--text);

    font-size: 13px;

    text-decoration: none;

    transition: .2s;
}


.back-home:hover {

    color: var(--primary);
}


/* ===================================
   Responsive
=================================== */

@media (max-width: 767px) {

    .auth-page {

        padding: 20px 12px;
    }


    .auth-card {

        padding: 25px 18px;

        border-radius: 18px;
    }


    .login-card {

        padding: 30px 22px;
    }


    .auth-header h1 {

        font-size: 24px;
    }


    .form-section {

        padding: 20px 0;
    }


    .logo-text {

        font-size: 23px;
    }

}