/* =========================================================
   CARSCRAPY LOGIN
   Premium SaaS Authentication UI
   ========================================================= */


/* =========================
   THEME
   ========================= */

:root {

    --background: #f4f8f7;

    --ink: #102033;;

    --muted: #52636d;

    --line: #dce5e5;

    --primary: #19b778;

    --primary-deep: #0e9360;

    --white: #ffffff;

    --dark-overlay: rgba(6, 27, 35, 0.82);

}

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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html,
body {
    width: 100%;
    min-height: 100%;
}


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

    background: var(--background);

    color: var(--ink);
}


button,
input {
    font: inherit;
}


a {
    color: inherit;
}


/* =========================
   MAIN SHELL
   ========================= */

.auth-shell {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(500px, 55%)
        minmax(460px, 45%);

    position: relative;

    overflow: hidden;

}


/* =========================
   LEFT BACKGROUND
   ========================= */

.brand-panel {

    position: relative;

    min-height: 100vh;

    padding:
        42px
        clamp(45px, 6vw, 90px);

    color: var(--white);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

}


/* IMAGE */

.brand-panel::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        url("1786712510368.png")
        center
        center
        /
        cover
        no-repeat;

    z-index: 0;

    transform: scale(1.02);

}


/* DARK OVERLAY */

.brand-panel::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 25, 32, 0.90),
            rgba(5, 30, 38, 0.64)
        );

    z-index: 0;

}


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

.brand-lockup,
.brand-copy,
.panel-footer {

    position: relative;

    z-index: 2;

}


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

.brand-lockup {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    width: fit-content;

    color: white;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: -0.04em;

}


.brand-mark {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    background: var(--primary);

    color: #062b25;

    box-shadow:
        0 8px 25px
        rgba(25, 183, 120, 0.28);

}


.brand-mark svg {

    width: 24px;

    height: 24px;

}


.brand-accent {

    color: var(--primary);

}


.brand-panel .brand-accent {

    color: #72e7ad;

}


/* =========================
   HERO COPY
   ========================= */

.brand-copy {

    max-width: 650px;

    margin-top: auto;

    margin-bottom: auto;

    padding:
        80px 0
        55px;

}


.eyebrow {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    color: #5de2a2;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}


.eyebrow svg {

    width: 15px;

    height: 15px;

}


.brand-copy h1 {

    margin: 0;

    max-width: 650px;

    font-size:
        clamp(40px, 4.1vw, 62px);

    line-height: 1.02;

    letter-spacing: -0.055em;

    font-weight: 750;

}


.brand-copy h1 em {

    color: #7be7ae;

    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;

}


.hero-description {

    max-width: 470px;

    margin-top: 28px;

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

    font-size: 15px;

    line-height: 1.7;

}


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

.panel-footer {

    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 11px;

}


.footer-dot {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: var(--primary);

}


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

.form-panel {
    position: relative;
    z-index: 2;

    min-height: 100vh;

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

    padding: 50px 60px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(25, 183, 120, 0.08),
            transparent 35%
        ),
       #e5eeea;
}


/* subtle green glow */

.form-panel::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -220px;

    top: -180px;

    border-radius: 50%;

    background:
        rgba(25, 183, 120, 0.07);

    filter: blur(70px);

    pointer-events: none;

}


/* =========================
   FORM CONTENT
   ========================= */

.form-content {

    position: relative;

    width: min(100%, 425px);

}


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

.mobile-brand-lockup {

    display: none;

}


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

.form-heading {

    margin-bottom: 32px;

}


.form-eyebrow {

    margin-bottom: 12px;

    color: var(--primary-deep);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}


.form-heading h2 {

    margin: 0;

    color: var(--ink);

    font-size: 34px;

    line-height: 1.1;

    letter-spacing: -0.045em;

    font-weight: 700;

}


.form-heading p:last-child {
    color: #52636d;
}


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

.login-form {

    display: grid;

    gap: 22px;

}


/* =========================
   FIELD
   ========================= */

.field-group {

    display: grid;

    gap: 9px;

}


.field-group label {
    color: #17232d;
    font-weight: 700;
}


.label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.label-row a {

    color: var(--primary-deep);

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

}


.label-row a:hover {

    text-decoration: underline;

}


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

.input-wrap {

    min-height: 53px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 0 15px;

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

    border-radius: 11px;

    background: var(--white);

    color: #96a3aa;

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

}


.input-wrap:focus-within {

    border-color: var(--primary);

    box-shadow:
        0 0 0 4px
        rgba(25, 183, 120, 0.12);

}


.input-icon {

    flex-shrink: 0;

    width: 19px;

    height: 19px;

    color: #9aa7ad;

}


.input-wrap input {

    width: 100%;

    min-width: 0;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--ink);

    font-size: 14px;

}


.input-wrap input::placeholder {
    color: #8a999f;
}


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

.icon-button {

    flex-shrink: 0;

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #8d9ba2;

    cursor: pointer;

}


.icon-button:hover {

    background: #f1f5f4;

    color: var(--primary-deep);

}


.icon-button svg {

    width: 19px;

    height: 19px;

}


/* =========================
   MESSAGE
   ========================= */

.message {

    min-height: 0;

    font-size: 13px;

    font-weight: 600;

}


.message:empty {

    display: none;

}


.success {

    display: block;

    padding: 10px 12px;

    border-radius: 9px;

    background: #e7f8ef;

    color: #0e9360;

}


.error {

    display: block;

    padding: 10px 12px;

    border-radius: 9px;

    background: #fdecec;

    color: #d92d4f;

}


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

.login-button {

    min-height: 53px;

    margin-top: 2px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border: 0;

    border-radius: 11px;

    background: var(--primary);

    color: #062c25;

    box-shadow:
        0 10px 22px
        rgba(25, 183, 120, 0.18);

    cursor: pointer;

    font-size: 14px;

    font-weight: 800;

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

}


.login-button:hover {

    background: #24c786;

    transform: translateY(-2px);

    box-shadow:
        0 13px 26px
        rgba(25, 183, 120, 0.24);

}


.login-button:active {

    transform: translateY(0);

}


.login-button:disabled {

    cursor: wait;

    opacity: 0.75;

    transform: none;

}


.button-arrow {

    width: 18px;

    height: 18px;

}


.spinner {

    display: none;

    width: 17px;

    height: 17px;

    border: 2px solid rgba(6, 44, 37, 0.3);

    border-top-color: #062c25;

    border-radius: 50%;

    animation: spin .7s linear infinite;

}


/* JS will add this */

.login-button.loading .button-arrow {

    display: none;

}


.login-button.loading .spinner {

    display: block;

}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


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

.secure-note {

    margin-top: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color: #687980;

    font-size: 11px;

    text-align: center;

}


.secure-note svg {

    width: 16px;

    height: 16px;

    color: var(--primary-deep);

}


/* =========================
   REGISTER
   ========================= */

.register-prompt {

    margin-top: 35px;
  
    color: #52636d;

    text-align: center;

    font-size: 13px;

}


.register-prompt a {

    margin-left: 4px;

    color: var(--primary-deep);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

}


.register-prompt a:hover {

    text-decoration: underline;

}


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

@media (max-width: 1050px) {

    .auth-shell {

        grid-template-columns:
            minmax(430px, 52%)
            minmax(430px, 48%);

    }

    .brand-copy h1 {

        font-size: clamp(38px, 4vw, 52px);

    }

    .form-panel {

        padding:
            40px;

    }

}


@media (max-width: 820px) {

    .auth-shell {

        display: block;

    }


    .brand-panel {

        display: none;

    }


    .form-panel {

        min-height: 100vh;

        padding:
            40px 24px;

        background: var(--background);

    }


    .mobile-brand-lockup {

        display: inline-flex;

        margin-bottom: 55px;

    }


    .form-content {

        width: min(100%, 430px);

        margin: 0 auto;

    }

}


@media (max-width: 480px) {

    .form-panel {

        padding:
            30px 20px;

    }


    .mobile-brand-lockup {

        margin-bottom: 45px;

    }


    .form-heading h2 {

        font-size: 29px;

    }


    .form-heading {

        margin-bottom: 28px;

    }


    .login-form {

        gap: 19px;

    }


    .secure-note {

        font-size: 10px;

    }

}


@media (max-height: 700px) and (min-width: 821px) {

    .brand-copy {

        padding:
            40px 0;

    }


    .brand-copy h1 {

        font-size: 43px;

    }


    .hero-description {

        margin-top: 20px;

    }


    .form-panel {

        padding-top: 25px;

        padding-bottom: 25px;

    }


    .form-heading {

        margin-bottom: 22px;

    }


    .login-form {

        gap: 17px;

    }


    .secure-note {

        margin-top: 17px;

    }


    .register-prompt {

        margin-top: 22px;

    }

}