/* =========================================================
   KAY MULTIMEDIA
   SALES CRM - LOGIN PAGE

   Designed to match the supplied KAY login screenshot.
========================================================= */


/* =========================================================
   KAY BRAND COLORS
========================================================= */

:root {

    --kay-purple-dark: #26006B;

    --kay-purple: #4B08A5;

    --kay-violet: #7312D5;

    --kay-magenta: #D500BE;

    --kay-pink: #F000CF;

    --kay-blue: #2735A4;


    --text-dark: #101B54;

    --text-medium: #596487;

    --text-light: #8A93AA;

    --border: #DCE1EE;

    --page-bg: #F5F6FC;

    --white: #FFFFFF;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    height: 100%;

}


body {

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

    background:
        var(--page-bg);

    color:
        var(--text-dark);

    overflow-x: hidden;

}


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

   Screenshot proportions:
   Left  ≈ 51%
   Right ≈ 49%
========================================================= */

.login-page {

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        51.2% 48.8%;

    padding-bottom: 48px;

}


/* =========================================================
   LEFT PANEL
========================================================= */

.left-panel {

    position: relative;

    min-height:
        calc(100vh - 48px);

    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            rgba(30,0,88,.96) 0%,
            rgba(48,5,119,.90) 38%,
            rgba(70,7,132,.78) 66%,
            rgba(194,0,173,.48) 100%
        ),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 26%),
        linear-gradient(135deg, #1e045f 0%, #3a0d7a 32%, #5d1d9c 70%, #2a0c63 100%);

    background-size: cover;

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

    background-position:
        center center;

}


/* =========================================================
   LEFT PURPLE OVERLAY

   This gives the photograph the purple/blue
   appearance from the supplied screenshot.
========================================================= */

.left-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            125deg,
            rgba(30,0,88,.96) 0%,
            rgba(48,5,119,.90) 38%,
            rgba(70,7,132,.78) 66%,
            rgba(194,0,173,.48) 100%
        );

}


/* additional diagonal shape */

.left-overlay::after {

    content: "";

    position: absolute;

    left: -12%;

    bottom: -18%;

    width: 72%;

    height: 45%;

    background:
        linear-gradient(
            135deg,
            rgba(130,0,191,.35),
            rgba(239,0,193,.16)
        );

    transform:
        rotate(-13deg);

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.left-content {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    padding:
        43px 7.5% 32px 13.2%;

    color:
        #FFFFFF;

}


/* =========================================================
   LEFT LOGO
========================================================= */

.left-logo {

    width: 142px;

    margin-bottom: 0;

}


.left-logo img {

    width: 100%;

    height: auto;

    display: block;

}


/* =========================================================
   SALES CRM
========================================================= */

.left-crm-name {

    margin-top: 1px;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 600;

    color:
        #FFFFFF;

}


/* =========================================================
   PINK LINE
========================================================= */

.pink-line {

    width: 36px;

    height: 3px;

    margin-top: 17px;

    margin-bottom: 15px;

    background:
        linear-gradient(
            90deg,
            #F000CF,
            #C900BF
        );

}


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

.left-content h1 {

    font-size:
        clamp(
            29px,
            3vw,
            39px
        );

    line-height: 1.10;

    letter-spacing:
        -.4px;

    font-weight: 700;

    margin-bottom: 11px;

}


.left-content h1 span {

    color:
        #E600C5;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.left-description {

    font-size: 12px;

    line-height: 1.5;

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

    margin-bottom: 16px;

}


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

.features {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/* =========================================================
   FEATURE ROW
========================================================= */

.feature-row {

    display: flex;

    align-items: center;

    gap: 11px;

}


/* =========================================================
   FEATURE ICON
========================================================= */

.feature-icon {

    width: 38px;

    height: 38px;

    min-width: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #FFFFFF;

}


.feature-icon svg {

    width: 19px;

    height: 19px;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.feature-icon.purple {

    background:
        linear-gradient(
            135deg,
            #7210E6,
            #9D0DD6
        );

}


.feature-icon.pink {

    background:
        linear-gradient(
            135deg,
            #E800AA,
            #D500D1
        );

}


.feature-icon.blue {

    background:
        linear-gradient(
            135deg,
            #2B6BFF,
            #5D42F1
        );

}


.feature-icon.magenta {

    background:
        linear-gradient(
            135deg,
            #E800C0,
            #A80CDB
        );

}


/* =========================================================
   FEATURE TEXT
========================================================= */

.feature-text {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.feature-text strong {

    font-size: 11px;

    line-height: 1.2;

    font-weight: 600;

    color:
        #FFFFFF;

}


.feature-text small {

    font-size: 9px;

    line-height: 1.25;

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

}


/* =========================================================
   QUOTE
========================================================= */

.quote {

    display: flex;

    align-items: flex-end;

    margin-top: 17px;

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

    font-size: 11px;

    line-height: 1.4;

    font-style: italic;

}


.quote-open,
.quote-close {

    color:
        #ED48D5;

    font-size: 36px;

    line-height: .55;

    font-weight: 700;

}


.quote-open {

    margin-right: 4px;

}


.quote-close {

    margin-left: 2px;

}


/* =========================================================
   RIGHT PANEL
========================================================= */

.right-panel {
    position: relative;

    width: 100%;
    min-width: 0;

    height: calc(100vh - 48px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 35px 20px;

    background:
        radial-gradient(
            circle at center,
            #FFFFFF 0%,
            #FAF9FF 55%,
            #F1EFFD 100%
        );

    overflow: hidden;
}


/* =========================================================
   SUPPORT
========================================================= */

.support {

    position: absolute;

    top: 8px;

    right: 8.5%;

    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 9px;

    color:
        #525D80;

}


.support a {

    color:
        #710BCB;

    font-weight: 600;

    text-decoration: none;

}


.support a:hover {

    color:
        #DD00BE;

}


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

   Screenshot card is approximately:
   330px wide at 824px screenshot width.
========================================================= */

.login-card {
    position: relative;

    width: 82%;

    max-width: 500px;

    min-height: 500px;

    margin: 0 auto;

    padding: 30px 32px 28px;

    background: #FFFFFF;

    border: 1px solid rgba(64, 40, 135, 0.08);

    border-radius: 8px;

    box-shadow:
        0 10px 35px rgba(40, 26, 102, 0.08);
}


/* =========================================================
   LOGIN LOGO
========================================================= */

.login-logo {

    width: 135px;

    margin:
        0 auto;

}


.login-logo img {

    width: 100%;

    display: block;

}


/* =========================================================
   LOGIN CRM
========================================================= */

.login-crm {

    text-align: center;

    font-size: 13px;

    font-weight: 600;

    color:
        #111D56;

    margin-top: -1px;

    margin-bottom: 18px;

}


/* =========================================================
   WELCOME
========================================================= */

.login-card h2 {

    text-align: center;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 700;

    color:
        #101C57;

    margin-bottom: 3px;

}


.login-subtitle {

    text-align: center;

    font-size: 9.5px;

    color:
        #707B99;

    margin-bottom: 21px;

}


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

.form-group {

    margin-bottom: 12px;

}


.form-group label {

    display: block;

    font-size: 9.5px;

    line-height: 1.2;

    font-weight: 600;

    color:
        #172354;

    margin-bottom: 5px;

}


.form-group label span {

    color:
        #E11C31;

}


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

.input-box {

    position: relative;

    width: 100%;

}


.input-box input {

    width: 100%;

    height: 39px;

    border:
        1px solid
        #DCE1EC;

    border-radius: 4px;

    background:
        #FFFFFF;

    outline: none;

    padding:
        0 31px;

    color:
        #182352;

    font-size: 9px;

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

}


.input-box input::placeholder {

    color:
        #9099AE;

}


.input-box input:focus {

    border-color:
        #7915CF;

    box-shadow:
        0 0 0 2px
        rgba(121,21,207,.08);

}


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

.input-icon {

    position: absolute;

    z-index: 2;

    left: 9px;

    top: 50%;

    width: 14px;

    height: 14px;

    transform:
        translateY(-50%);

    color:
        #697590;

    stroke:
        currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   SHOW PASSWORD
========================================================= */

.show-password {

    position: absolute;

    z-index: 3;

    right: 6px;

    top: 50%;

    width: 22px;

    height: 22px;

    padding: 0;

    border: 0;

    transform:
        translateY(-50%);

    background:
        transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #697590;

    cursor: pointer;

}


.show-password:hover {

    color:
        #7413CF;

}


.show-password svg {

    width: 14px;

    height: 14px;

    stroke:
        currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   ERRORS
========================================================= */

.error {

    min-height: 0;

    color:
        #D92E3E;

    font-size: 8px;

    margin-top: 3px;

}


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

.options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 1px;

    margin-bottom: 17px;

}


/* =========================================================
   REMEMBER ME
========================================================= */

.remember {

    display: flex;

    align-items: center;

    gap: 5px;

    color:
        #3D4868;

    font-size: 8.5px;

    cursor: pointer;

}


.remember input {

    display: none;

}


.custom-checkbox {

    width: 12px;

    height: 12px;

    border:
        1px solid
        #768099;

    border-radius: 2px;

    position: relative;

    background:
        #FFFFFF;

}


.remember input:checked
+ .custom-checkbox {

    background:
        linear-gradient(
            135deg,
            #7112D0,
            #DD00BB
        );

    border-color:
        #7112D0;

}


.remember input:checked
+ .custom-checkbox::after {

    content: "";

    position: absolute;

    width: 3px;

    height: 6px;

    left: 3px;

    top: 1px;

    border:
        solid #FFFFFF;

    border-width:
        0 1px 1px 0;

    transform:
        rotate(45deg);

}


/* =========================================================
   FORGOT PASSWORD
========================================================= */

.forgot {

    font-size: 8.5px;

    color:
        #7510D0;

    font-weight: 600;

    text-decoration: none;

}


.forgot:hover {

    color:
        #DD00BC;

}


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

.login-button {

    width: 100%;

    height: 40px;

    border: 0;

    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            #DF00B8 0%,
            #B900CE 48%,
            #6C0DD2 100%
        );

    color:
        #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 5px 14px
        rgba(126,0,190,.18);

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

}


.login-button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(126,0,190,.25);

}


.login-button svg {

    width: 15px;

    height: 15px;

    stroke:
        currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   OR DIVIDER
========================================================= */

.or-divider {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 9px;

    margin:
        17px 0;

}


.or-divider span {

    flex: 1;

    height: 1px;

    background:
        #E0E3EB;

}


.or-divider label {

    font-size: 8px;

    color:
        #828BA1;

}


/* =========================================================
   TERMS
========================================================= */

.terms {

    text-align: center;

    font-size: 7.5px;

    line-height: 1.5;

    color:
        #7D879F;

}


.terms a {

    color:
        #6D0FC9;

    text-decoration: none;

    font-weight: 600;

}


.terms a:hover {

    color:
        #DD00BD;

}


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

.footer {

    position: absolute;

    z-index: 10;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 48px;

    padding:
        0 4.8%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(249,250,253,.97);

    border-top:
        1px solid
        #E4E7EF;

}


.copyright {

    font-size: 8px;

    color:
        #536080;

}


.footer-links {

    display: flex;

    align-items: center;

    gap: 9px;

}


.footer-links a {

    font-size: 8px;

    color:
        #536080;

    text-decoration: none;

}


.footer-links a:hover {

    color:
        #7010CF;

}


.footer-links i {

    font-size: 7px;

    color:
        #9CA3B3;

    font-style: normal;

}


/* =========================================================
   LARGE SCREENS
========================================================= */

@media (min-width: 1400px) {

    .left-content {

        padding-left: 11%;

    }


    .login-card {

        max-width: 370px;

        padding:
            22px 26px 25px;

    }


    .login-logo {

        width: 130px;

    }


    .left-logo {

        width: 160px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .login-page {

        grid-template-columns:
            48% 52%;

    }


    .left-content {

        padding:
            35px 7% 25px 9%;

    }


    .left-logo {

        width: 125px;

    }


    .left-content h1 {

        font-size: 29px;

    }


    .login-card {

        max-width: 330px;

    }

}


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

@media (max-width: 700px) {

    .login-page {

        display: block;

        min-height: 100vh;

        padding-bottom: 0;

    }


    .left-panel {

        display: none;

    }


    .right-panel {

        min-height: 100vh;

        padding:
            70px 18px 75px;

    }


    .support {

        top: 24px;

        right: 20px;

    }


    .login-card {

        max-width: 360px;

        padding:
            25px 24px 28px;

    }


    .footer {

        position: fixed;

        height: auto;

        min-height: 55px;

        padding:
            9px 15px;

        flex-direction: column;

        justify-content: center;

        gap: 6px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .right-panel {

        padding-left: 10px;

        padding-right: 10px;

    }


    .login-card {

        padding:
            23px 19px 25px;

    }

}