/* =========================================================
   ANEET LAW ASSOCIATES
   CLIENT LOGIN
   LIGHT PROFESSIONAL THEME
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --login-primary: #1558a6;
    --login-primary-dark: #0d3f7d;
    --login-primary-light: #edf5ff;

    --login-text: #172033;
    --login-muted: #687386;

    --login-border: #e1e7ef;

    --login-bg: #f7f9fc;
    --login-white: #ffffff;

    --login-danger: #c62828;

    --login-radius: 16px;

    --login-shadow:
        0 25px 70px rgba(20, 45, 80, 0.10);

}


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

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        var(--login-bg);

    color:
        var(--login-text);

}


button,
input {

    font: inherit;

}


button {

    border: 0;

}


a {

    color: inherit;

    text-decoration: none;

}


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

.client-login-page {

    min-height: 100vh;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #f4f7fb 100%
        );

}


/* =========================================================
   WRAPPER
========================================================= */

.client-login-wrapper {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(460px, 0.95fr);

}


/* =========================================================
   BRAND PANEL
========================================================= */

.client-login-brand {

    position: relative;

    min-height: 100vh;

    padding:
        60px
        clamp(40px, 7vw, 110px);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f3f8ff 100%
        );

    border-right:
        1px solid
        rgba(21, 88, 166, 0.08);

}


.client-login-brand::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -180px;

    border-radius: 50%;

    background:
        rgba(21, 88, 166, 0.045);

}


.client-login-brand::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -130px;
    bottom: -130px;

    border-radius: 50%;

    background:
        rgba(21, 88, 166, 0.035);

}


.client-brand-content,
.client-brand-footer {

    position: relative;

    z-index: 2;

}


/* =========================================================
   BRAND LOGO
========================================================= */

.client-brand-logo {

    display: inline-flex;

    width: fit-content;

    margin-bottom: 55px;

}


.client-brand-logo img {

    display: block;

    width: 105px;

    height: auto;

    object-fit: contain;

}


/* =========================================================
   BRAND TEXT
========================================================= */

.client-brand-label {

    display: inline-block;

    margin-bottom: 16px;

    padding:
        7px
        13px;

    border-radius: 50px;

    background:
        var(--login-primary-light);

    color:
        var(--login-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.7px;

}


.client-brand-content h1 {

    max-width: 650px;

    font-size:
        clamp(40px, 5vw, 70px);

    line-height: 1.04;

    letter-spacing: -2.5px;

    font-weight: 750;

}


.client-brand-content h1 span {

    color:
        var(--login-primary);

}


.client-brand-content > p {

    max-width: 570px;

    margin-top: 25px;

    color:
        var(--login-muted);

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   FEATURES
========================================================= */

.client-login-features {

    display: grid;

    gap: 18px;

    max-width: 530px;

    margin-top: 42px;

}


.client-login-feature {

    display: flex;

    align-items: flex-start;

    gap: 14px;

}


.client-login-feature > span {

    flex: 0 0 auto;

    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--login-primary);

    color:
        #ffffff;

    font-size: 12px;

    font-weight: 800;

}


.client-login-feature strong {

    display: block;

    margin-bottom: 3px;

    font-size: 14px;

}


.client-login-feature small {

    display: block;

    color:
        var(--login-muted);

    font-size: 12px;

    line-height: 1.5;

}


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

.client-brand-footer {

    color:
        #8791a1;

    font-size: 12px;

}


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

.client-login-form-panel {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        40px;

    background:
        #ffffff;

}


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

.client-login-card {

    width: 100%;

    max-width: 470px;

}


/* =========================================================
   MOBILE LOGO
========================================================= */

.client-mobile-logo {

    display: none;

}


.client-mobile-logo img {

    display: block;

    width: 85px;

    height: auto;

}


/* =========================================================
   HEADING
========================================================= */

.client-login-heading {

    margin-bottom: 32px;

}


.client-login-heading > span {

    display: block;

    margin-bottom: 9px;

    color:
        var(--login-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.6px;

}


.client-login-heading h2 {

    font-size:
        clamp(32px, 4vw, 43px);

    line-height: 1.1;

    letter-spacing: -1.2px;

}


.client-login-heading p {

    margin-top: 12px;

    color:
        var(--login-muted);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   ALERT
========================================================= */

.client-login-alert {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

    padding:
        13px
        15px;

    border:
        1px solid
        #f1caca;

    border-radius: 10px;

    background:
        #fff7f7;

    color:
        var(--login-danger);

    font-size: 13px;

    line-height: 1.5;

}


.client-login-alert > span {

    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #fce3e3;

    font-weight: 800;

}


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

.client-form-group {

    margin-bottom: 21px;

}


.client-form-group label {

    display: block;

    margin-bottom: 9px;

    color:
        #303a4c;

    font-size: 13px;

    font-weight: 700;

}


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

.client-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}


.client-input-icon {

    position: absolute;

    left: 16px;

    width: 19px;
    height: 19px;

    display: flex;

    color:
        #8a96a8;

    pointer-events: none;

}


.client-input-icon svg {

    width: 100%;
    height: 100%;

}


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

.client-input-wrapper input {

    width: 100%;

    height: 55px;

    padding:
        0 48px;

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

    border-radius:
        11px;

    outline: none;

    background:
        #ffffff;

    color:
        var(--login-text);

    font-size: 14px;

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

}


.client-input-wrapper input::placeholder {

    color:
        #a0a9b7;

}


.client-input-wrapper input:hover {

    border-color:
        #cbd5e2;

}


.client-input-wrapper input:focus {

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

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(21, 88, 166, 0.09);

}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.client-password-toggle {

    position: absolute;

    right: 13px;

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background:
        transparent;

    color:
        #8a96a8;

    cursor: pointer;

}


.client-password-toggle:hover {

    background:
        #f2f5f9;

    color:
        var(--login-primary);

}


.client-password-toggle svg {

    width: 19px;
    height: 19px;

}


/* =========================================================
   LOGIN OPTIONS
========================================================= */

.client-login-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 4px;

    margin-bottom: 25px;

}


.client-remember {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        #697487;

    font-size: 13px;

    cursor: pointer;

}


.client-remember input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.client-remember span {

    width: 18px;
    height: 18px;

    border:
        1px solid
        #cbd4df;

    border-radius: 5px;

    background:
        #ffffff;

    transition:
        .2s ease;

}


.client-remember input:checked + span {

    background:
        var(--login-primary);

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

    box-shadow:
        inset 0 0 0 4px
        #ffffff;

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.client-login-submit {

    width: 100%;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    border-radius:
        11px;

    background:
        var(--login-primary);

    color:
        #ffffff;

    font-size: 14px;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(21, 88, 166, 0.17);

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

}


.client-login-submit:hover {

    background:
        var(--login-primary-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 30px
        rgba(21, 88, 166, 0.23);

}


.client-login-submit:active {

    transform:
        translateY(0);

}


.client-login-submit svg {

    width: 18px;
    height: 18px;

}


/* =========================================================
   HELP
========================================================= */

.client-login-help {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    color:
        #9aa3b0;

}


.client-login-help span {

    flex: 1;

    height: 1px;

    background:
        #e9edf2;

}


.client-login-help strong {

    color:
        #778293;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

    letter-spacing: .5px;

}


.client-login-contact {

    margin-top: 15px;

    text-align: center;

    color:
        #7b8595;

    font-size: 12px;

    line-height: 1.7;

}


.client-login-contact strong {

    color:
        var(--login-primary);

}


/* =========================================================
   BACK TO WEBSITE
========================================================= */

.client-back-website {

    display: flex;

    justify-content: center;

    margin-top: 22px;

    color:
        var(--login-primary);

    font-size: 13px;

    font-weight: 700;

}


.client-back-website:hover {

    text-decoration: underline;

}


/* =========================================================
   SECURITY
========================================================= */

.client-login-security {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 25px;

    color:
        #9aa3b0;

    font-size: 10px;

    letter-spacing: .4px;

}


.client-login-security svg {

    width: 15px;
    height: 15px;

}


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

@media (max-width: 1050px) {

    .client-login-wrapper {

        grid-template-columns:
            1fr
            0.95fr;

    }


    .client-login-brand {

        padding:
            45px;

    }


    .client-brand-content h1 {

        font-size:
            clamp(38px, 5vw, 55px);

    }

}


@media (max-width: 800px) {

    .client-login-wrapper {

        display: block;

    }


    .client-login-brand {

        display: none;

    }


    .client-login-form-panel {

        min-height: 100vh;

        padding:
            35px
            24px;

        background:
            linear-gradient(
                145deg,
                #f7faff,
                #ffffff
            );

    }


    .client-login-card {

        max-width: 500px;

    }


    .client-mobile-logo {

        display: flex;

        justify-content: center;

        margin-bottom: 35px;

    }


}


@media (max-width: 480px) {

    .client-login-form-panel {

        padding:
            25px
            18px;

    }


    .client-login-card {

        max-width: none;

    }


    .client-mobile-logo {

        margin-bottom: 28px;

    }


    .client-mobile-logo img {

        width: 75px;

    }


    .client-login-heading {

        margin-bottom: 26px;

    }


    .client-login-heading h2 {

        font-size: 31px;

    }


    .client-login-heading p {

        font-size: 13px;

    }


    .client-form-group {

        margin-bottom: 18px;

    }


    .client-input-wrapper input {

        height: 53px;

    }


    .client-login-submit {

        height: 53px;

    }


    .client-login-help {

        margin-top: 26px;

    }


}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

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

        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;

    }

}