/*
|--------------------------------------------------------------------------
| SYSTEMIDEA - CRM LOGIN
|--------------------------------------------------------------------------
*/

:root {

    --crm-bg: #25283f;
    --crm-bg-dark: #202337;

    --crm-card: #282b43;

    --crm-border: rgba(255, 255, 255, 0.16);

    --crm-text: #eeeeff;
    --crm-text-muted: #a8abc0;

    --crm-yellow: #ffbf00;
    --crm-yellow-hover: #ffc933;

    --crm-orange: #ff9638;

    --crm-green: #45dc94;

}


/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

html,
body {

    width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

}


body.crm-login-page {

    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 85% 45%,
            rgba(255, 150, 56, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 45% 110%,
            rgba(255, 191, 0, 0.08),
            transparent 25%
        ),
        var(--crm-bg);

    color: var(--crm-text);

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

}


/*
|--------------------------------------------------------------------------
| MAIN WRAPPER
|--------------------------------------------------------------------------
*/

.crm-login-wrapper {

    position: relative;

    min-height: 100vh;

    width: 100%;

    overflow: hidden;

}


/*
|--------------------------------------------------------------------------
| DECORATIVE BACKGROUND
|--------------------------------------------------------------------------
*/

.crm-bg-shape {

    position: absolute;

    pointer-events: none;

    z-index: 0;

}


.crm-bg-shape-top {

    width: 540px;
    height: 210px;

    top: -90px;
    left: 43%;

    background: rgba(93, 83, 77, 0.35);

    border-radius: 0 0 50% 50%;

}


.crm-bg-shape-bottom {

    width: 500px;
    height: 260px;

    left: -180px;
    bottom: -150px;

    background: rgba(76, 73, 66, 0.45);

    border-radius: 50%;

}


/*
|--------------------------------------------------------------------------
| BRAND
|--------------------------------------------------------------------------
*/

.crm-brand {

    position: absolute;

    top: 28px;
    left: 28px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: var(--crm-text);

}


.crm-brand img {

    width: 34px;
    height: 34px;

    object-fit: contain;

}


.crm-brand span {

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 0.3px;

}


/*
|--------------------------------------------------------------------------
| MAIN CONTAINER
|--------------------------------------------------------------------------
*/

.crm-login-container {

    position: relative;

    z-index: 5;

    min-height: 100vh;

    width: 100%;

    display: grid;

    grid-template-columns: minmax(0, 1fr) 500px;

    align-items: stretch;

    padding: 0 54px;

}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.crm-login-hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: 70px;

}


.crm-hero-content {

    width: 52%;

    min-width: 480px;

    padding-bottom: 20px;

}


.crm-hero-badge {

    display: inline-flex;

    align-items: center;

    padding: 7px 13px;

    margin-bottom: 26px;

    border-radius: 4px;

    background: rgba(255, 150, 56, 0.18);

    border: 1px solid rgba(255, 150, 56, 0.08);

}


.crm-hero-badge span {

    color: var(--crm-orange);

    font-size: 13px;

    font-weight: 600;

}


/*
|--------------------------------------------------------------------------
| HERO TITLE
|--------------------------------------------------------------------------
*/

.crm-hero-title {

    margin: 0 0 18px;

    color: #dedff0;

    font-size: clamp(38px, 3.2vw, 50px);

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -1px;

}


.crm-hero-title span {

    color: var(--crm-orange);

}


/*
|--------------------------------------------------------------------------
| HERO DESCRIPTION
|--------------------------------------------------------------------------
*/

.crm-hero-description {

    max-width: 570px;

    margin: 0 0 28px;

    color: #b4b6c8;

    font-size: 16px;

    line-height: 1.65;

}


/*
|--------------------------------------------------------------------------
| FEATURES
|--------------------------------------------------------------------------
*/

.crm-features {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.crm-feature {

    display: flex;

    align-items: center;

    gap: 14px;

}


.crm-feature-icon {

    width: 55px;
    height: 55px;

    flex: 0 0 55px;

    display: flex;

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

    border-radius: 6px;

    font-size: 23px;

}


.crm-feature-icon-yellow {

    color: var(--crm-yellow);

    background: rgba(255, 191, 0, 0.18);

}


.crm-feature-icon-green {

    color: var(--crm-green);

    background: rgba(69, 220, 148, 0.16);

}


.crm-feature-icon-orange {

    color: var(--crm-orange);

    background: rgba(255, 150, 56, 0.17);

}


.crm-feature-text {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.crm-feature-text strong {

    color: #dedff0;

    font-size: 14px;

    font-weight: 600;

}


.crm-feature-text span {

    color: #898ca4;

    font-size: 14px;

}


/*
|--------------------------------------------------------------------------
| QUOTE
|--------------------------------------------------------------------------
*/

.crm-quote {

    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    width: 540px;

    margin-top: 24px;

    padding: 17px 22px;

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

    border-radius: 5px;

    background: rgba(255, 255, 255, 0.055);

}


.crm-quote-symbol {

    color: rgba(255, 255, 255, 0.12);

    font-size: 58px;

    line-height: 1;

    font-weight: 700;

}


.crm-quote p {

    margin: 0 0 5px;

    color: #bfc1d2;

    font-size: 15px;

    font-style: italic;

}


.crm-quote small {

    color: #777b94;

    font-size: 11px;

}


/*
|--------------------------------------------------------------------------
| HERO ILLUSTRATION
|--------------------------------------------------------------------------
*/

.crm-hero-illustration {

    position: absolute;

    left: 48%;

    top: 50%;

    width: 500px;

    height: 500px;

    transform: translate(-5%, -45%);

    display: flex;

    align-items: center;

    justify-content: center;

}


.crm-hero-illustration img {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 500px;

    max-height: 500px;

    object-fit: contain;

    filter:
        drop-shadow(0 25px 30px rgba(0, 0, 0, 0.35));

}


.crm-illustration-glow {

    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(111, 126, 255, 0.16),
            transparent 70%
        );

    filter: blur(8px);

}


/*
|--------------------------------------------------------------------------
| LOGIN PANEL
|--------------------------------------------------------------------------
*/

.crm-login-panel {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 100px 0 30px 30px;

}


/*
|--------------------------------------------------------------------------
| LOGIN CARD
|--------------------------------------------------------------------------
*/

.crm-login-card {

    width: 100%;

    max-width: 500px;

    padding: 76px 50px 25px;

    border-radius: 9px;

    background: rgba(39, 42, 64, 0.96);

    border: 1px solid rgba(150, 155, 200, 0.25);

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 20px rgba(130, 140, 210, 0.22),
        0 20px 60px rgba(0, 0, 0, 0.30);

}


/*
|--------------------------------------------------------------------------
| LOGIN ICON
|--------------------------------------------------------------------------
*/

.crm-login-icon {

    width: 55px;
    height: 55px;

    margin: 0 auto 20px;

    display: flex;

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

    border-radius: 5px;

    background: rgba(255, 150, 56, 0.20);

    color: var(--crm-orange);

    font-size: 23px;

}


/*
|--------------------------------------------------------------------------
| LOGIN TITLE
|--------------------------------------------------------------------------
*/

.crm-login-card h2 {

    margin: 0;

    text-align: center;

    color: #dedff0;

    font-size: 28px;

    line-height: 1.3;

    font-weight: 700;

}


.crm-login-description {

    margin: 16px 0 26px;

    text-align: center;

    color: #898ca4;

    font-size: 14px;

}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.crm-login-form {

    width: 100%;

}


.crm-form-group {

    margin-bottom: 20px;

}


.crm-form-group label {

    display: block;

    margin-bottom: 8px;

    color: #c8c9d8;

    font-size: 14px;

    font-weight: 500;

}


/*
|--------------------------------------------------------------------------
| INPUT
|--------------------------------------------------------------------------
*/

.crm-input-wrapper {

    position: relative;

}


.crm-input {

    width: 100%;

    height: 45px;

    padding: 0 45px 0 14px;

    border-radius: 6px;

    border: 1px solid rgba(180, 185, 215, 0.32);

    outline: none;

    background: transparent;

    color: #e6e7f2;

    font-size: 14px;

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

}


.crm-input::placeholder {

    color: #777b91;

}


.crm-input:focus {

    border-color: var(--crm-yellow);

    background: rgba(255, 255, 255, 0.025);

    box-shadow:
        0 0 0 2px rgba(255, 191, 0, 0.08);

}


.crm-input-wrapper > i {

    position: absolute;

    right: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: #b8bac8;

    pointer-events: none;

}


.crm-password-toggle {

    position: absolute;

    right: 0;
    top: 0;

    width: 45px;
    height: 45px;

    display: flex;

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

    border: 0;

    background: transparent;

    color: #aeb0c0;

    cursor: pointer;

}


.crm-password-toggle:hover {

    color: #ffffff;

}


/*
|--------------------------------------------------------------------------
| LOGIN BUTTON
|--------------------------------------------------------------------------
*/

.crm-login-button {

    width: 100%;

    height: 45px;

    margin-top: 5px;

    border: 0;

    border-radius: 6px;

    background: var(--crm-yellow);

    color: #171923;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

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

}


.crm-login-button:hover {

    background: var(--crm-yellow-hover);

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(255, 191, 0, 0.20);

}


.crm-login-button:active {

    transform: translateY(0);

}


/*
|--------------------------------------------------------------------------
| DIVIDER
|--------------------------------------------------------------------------
*/

.crm-login-divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 39px 0 25px;

}


.crm-login-divider span {

    flex: 1;

    height: 1px;

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

}


.crm-login-divider small {

    white-space: nowrap;

    color: #85889d;

    font-size: 11px;

}


/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.crm-login-footer {

    text-align: center;

    color: #9295a9;

    font-size: 13px;

}


.crm-login-footer span {

    color: #ff4f87;

    font-size: 16px;

}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1400px) {

    .crm-login-container {

        grid-template-columns:
            minmax(0, 1fr)
            440px;

        padding: 0 35px;

    }


    .crm-hero-content {

        min-width: 400px;

    }


    .crm-hero-illustration {

        width: 430px;
        height: 430px;

        left: 47%;

    }

}


@media (max-width: 1200px) {

    .crm-login-container {

        grid-template-columns:
            minmax(0, 1fr)
            400px;

        padding: 0 25px;

    }


    .crm-hero-content {

        width: 58%;

        min-width: 380px;

    }


    .crm-hero-title {

        font-size: 38px;

    }


    .crm-hero-illustration {

        width: 380px;
        height: 380px;

        left: 48%;

    }


    .crm-quote {

        width: 450px;

    }


    .crm-login-card {

        padding-left: 35px;
        padding-right: 35px;

    }

}


@media (max-width: 991px) {

    .crm-login-container {

        display: block;

        padding: 0 20px;

    }


    .crm-login-hero {

        display: none;

    }


    .crm-login-panel {

        min-height: 100vh;

        padding:
            100px 20px
            30px;

    }


    .crm-login-card {

        max-width: 480px;

    }

}


@media (max-width: 575px) {

    .crm-brand {

        top: 20px;
        left: 20px;

    }


    .crm-brand img {

        width: 30px;
        height: 30px;

    }


    .crm-brand span {

        font-size: 19px;

    }


    .crm-login-container {

        padding: 0 15px;

    }


    .crm-login-panel {

        padding:
            90px 5px
            20px;

    }


    .crm-login-card {

        padding:
            45px 25px 22px;

    }


    .crm-login-card h2 {

        font-size: 25px;

    }


    .crm-login-description {

        font-size: 13px;

    }

}


/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

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

    .crm-input,
    .crm-login-button {

        transition: none;

    }

}