/* ==========================================================================
   LIVIGO AUTH
   ========================================================================== */


/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {
    --livigo-navy-950: #021326;
    --livigo-navy-900: #031f42;
    --livigo-navy-850: #062a53;
    --livigo-navy-800: #07325f;

    --livigo-blue: #0A2C73;
    --livigo-blue-deep: #071F55;
    --livigo-blue-dark: #051A45;

    --livigo-lime: #c8f000;
    --livigo-lime-brand: #D6F34A;
    --livigo-lime-strong: #e0fa65;

    --livigo-white: #ffffff;

    --livigo-text-soft:
        rgba(255, 255, 255, 0.72);

    --livigo-text-muted:
        rgba(255, 255, 255, 0.52);

    --livigo-border:
        rgba(255, 255, 255, 0.14);

    --livigo-border-strong:
        rgba(255, 255, 255, 0.22);

    --livigo-surface:
        rgba(3, 31, 66, 0.58);

    --livigo-danger: #ff9b9b;
    --livigo-success: #b8f7c4;
}


/* ==========================================================================
   BASE
   ========================================================================== */

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

html {
    background: var(--livigo-blue);
}

body.auth-body {
    margin: 0;

    min-width: 320px;

    min-height: 100vh;
    min-height: 100dvh;
}

body.auth-body *,
body.auth-body *::before,
body.auth-body *::after {
    box-sizing: border-box;
}


/* ==========================================================================
   UNIVERSAL CUSTOMER AUTHENTICATION
   ========================================================================== */

body.auth-body--livigo {
    background:
        radial-gradient(
            circle at 50% -12%,
            rgba(255, 255, 255, 0.105) 0%,
            rgba(255, 255, 255, 0.025) 28%,
            transparent 50%
        ),
        radial-gradient(
            circle at 12% 84%,
            rgba(214, 243, 74, 0.07) 0%,
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #0A2C73 0%,
            #082766 52%,
            #071F55 100%
        );

    color: var(--livigo-white);
}


/* ==========================================================================
   Universal Auth — Page
   ========================================================================== */

.livigo-auth {
    position: relative;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    overflow: hidden;

    padding:
        max(34px, env(safe-area-inset-top))
        20px
        max(34px, env(safe-area-inset-bottom));

    display: flex;

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

    background:
        linear-gradient(
            145deg,
            transparent 0 27%,
            rgba(214, 243, 74, 0.025) 27.15%,
            transparent 27.4%
        ),
        linear-gradient(
            325deg,
            transparent 0 31%,
            rgba(255, 255, 255, 0.025) 31.15%,
            transparent 31.4%
        );
}

.livigo-auth::before {
    content: "";

    position: absolute;

    top: -220px;
    left: 50%;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.055) 0%,
            transparent 68%
        );

    transform: translateX(-50%);

    pointer-events: none;
}

.livigo-auth__shell {
    position: relative;

    z-index: 1;

    width: min(100%, 620px);

    margin: 0 auto;
}


/* ==========================================================================
   Universal Auth — Livigo Identity
   ========================================================================== */

.livigo-auth__brand {
    width: 100%;

    margin: 0 0 30px;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}

.livigo-auth__brand-link {
    display: inline-flex;

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

    gap: 10px;

    max-width: 100%;

    color: var(--livigo-white);

    text-decoration: none;
}

.livigo-auth__logo {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: inline-flex;

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

    color: var(--livigo-lime-brand);

    line-height: 0;
}

.livigo-auth__logo svg,
.livigo-auth__logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.livigo-auth__wordmark {
    display: inline-block;

    color: var(--livigo-white);

    font-size: clamp(2.05rem, 6vw, 2.75rem);

    line-height: 0.95;

    font-weight: 850;

    letter-spacing: -0.045em;

    white-space: nowrap;
}

.livigo-auth__tagline {
    margin: 14px 0 0;

    color: var(--livigo-text-soft);

    font-size: 0.95rem;

    line-height: 1.5;
}

.livigo-auth__tagline strong {
    color: var(--livigo-lime-brand);

    font-weight: 750;
}


/* ==========================================================================
   Universal Auth — Card
   ========================================================================== */

.livigo-auth__card {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 38px 38px 36px;

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

    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.075) 0%,
            rgba(2, 25, 66, 0.24) 100%
        );

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.livigo-auth__card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18%;
    right: 18%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 243, 74, 0.72),
            transparent
        );

    pointer-events: none;
}


/* ==========================================================================
   Universal Auth — Context
   ========================================================================== */

.livigo-auth__context {
    width: fit-content;

    min-height: 38px;

    margin: 0 auto 18px;

    padding: 7px 14px;

    display: inline-flex;

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

    gap: 8px;

    border:
        1px solid
        rgba(214, 243, 74, 0.20);

    border-radius: 999px;

    background:
        rgba(214, 243, 74, 0.075);

    color: var(--livigo-lime-brand);

    font-size: 0.84rem;

    line-height: 1;

    font-weight: 800;
}

.livigo-auth__context-icon {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    display: inline-flex;
}

.livigo-auth__context-icon svg {
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   Universal Auth — Heading
   ========================================================================== */

.livigo-auth__header {
    margin: 0 0 29px;

    text-align: center;
}

.livigo-auth__title {
    margin: 0;

    color: var(--livigo-white);

    font-size: clamp(2rem, 6vw, 2.75rem);

    line-height: 1.06;

    font-weight: 850;

    letter-spacing: -0.045em;
}

.livigo-auth__description {
    max-width: 470px;

    margin: 12px auto 0;

    color: var(--livigo-text-soft);

    font-size: 0.96rem;

    line-height: 1.58;
}


/* ==========================================================================
   Universal Auth — Alerts
   ========================================================================== */

.auth-alert,
.livigo-auth__alert {
    width: 100%;

    margin: 0 0 22px;

    padding: 14px 16px;

    border-radius: 14px;

    font-size: 0.88rem;

    line-height: 1.5;
}

body.auth-body--livigo
.auth-alert--error,
.livigo-auth__alert.auth-alert--error {
    border:
        1px solid
        rgba(255, 155, 155, 0.30);

    background:
        rgba(120, 20, 35, 0.22);

    color: #ffe1e4;
}

body.auth-body--livigo
.auth-alert--success,
.livigo-auth__alert.auth-alert--success {
    border:
        1px solid
        rgba(214, 243, 74, 0.28);

    background:
        rgba(214, 243, 74, 0.085);

    color: #f2ffd0;
}


/* ==========================================================================
   Universal Auth — Form
   ========================================================================== */

.livigo-auth__form {
    width: 100%;

    margin: 0;
    padding: 0;

    display: grid;

    gap: 20px;
}

.livigo-auth__field {
    width: 100%;

    display: grid;

    gap: 9px;
}

.livigo-auth__label {
    margin: 0;

    color: var(--livigo-white);

    font-size: 0.9rem;

    line-height: 1.3;

    font-weight: 750;
}


/* ==========================================================================
   Universal Auth — Input
   ========================================================================== */

.livigo-auth__input-wrap {
    position: relative;

    width: 100%;

    min-height: 58px;

    display: flex;

    align-items: center;

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

    border-radius: 16px;

    background:
        rgba(2, 24, 65, 0.34);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.livigo-auth__input-wrap:hover {
    border-color:
        rgba(255, 255, 255, 0.30);
}

.livigo-auth__input-wrap:focus-within {
    border-color:
        var(--livigo-lime-brand);

    background:
        rgba(2, 24, 65, 0.50);

    box-shadow:
        0 0 0 3px
        rgba(214, 243, 74, 0.12);
}

.livigo-auth__input-icon {
    position: absolute;

    top: 50%;
    left: 17px;

    z-index: 2;

    width: 21px;
    height: 21px;

    display: inline-flex;

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

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

    transform: translateY(-50%);

    pointer-events: none;
}

.livigo-auth__input-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}

.livigo-auth__input {
    display: block;

    width: 100%;
    min-width: 0;

    height: 56px;

    margin: 0;

    padding: 0 17px 0 52px;

    border: 0;

    border-radius: inherit;

    outline: 0;

    background: transparent;

    color: var(--livigo-white);

    font: inherit;

    font-size: 16px;

    appearance: none;
    -webkit-appearance: none;
}

.livigo-auth__input--password {
    padding-right: 58px;
}

.livigo-auth__input::placeholder {
    color:
        rgba(255, 255, 255, 0.40);
}


/* ==========================================================================
   Universal Auth — Autofill
   ========================================================================== */

.livigo-auth__input:-webkit-autofill,
.livigo-auth__input:-webkit-autofill:hover,
.livigo-auth__input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--livigo-white);

    -webkit-box-shadow:
        0 0 0 1000px
        #082660
        inset;

    caret-color:
        var(--livigo-white);

    transition:
        background-color
        9999s
        ease-in-out
        0s;
}


/* ==========================================================================
   Universal Auth — Password Toggle
   ========================================================================== */

.livigo-auth__password-toggle {
    position: absolute;

    top: 50%;
    right: 11px;

    z-index: 3;

    width: 38px;
    height: 38px;

    padding: 8px;

    display: inline-flex;

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

    border: 0;

    border-radius: 10px;

    background: transparent;

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

    cursor: pointer;

    transform: translateY(-50%);
}

.livigo-auth__password-toggle:hover {
    background:
        rgba(255, 255, 255, 0.06);

    color:
        var(--livigo-lime-brand);
}

.livigo-auth__password-toggle:focus-visible {
    outline:
        2px solid
        var(--livigo-lime-brand);

    outline-offset: 2px;
}

.livigo-auth__password-toggle svg {
    display: block;

    width: 21px;
    height: 21px;
}


/* ==========================================================================
   Universal Auth — Options
   ========================================================================== */

.livigo-auth__options {
    margin-top: -1px;

    display: flex;

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

    gap: 18px;
}

.livigo-auth__remember {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--livigo-text-soft);

    font-size: 0.85rem;

    cursor: pointer;
}

.livigo-auth__remember input {
    width: 19px;
    height: 19px;

    margin: 0;

    accent-color:
        var(--livigo-lime-brand);

    cursor: pointer;
}

.livigo-auth__forgot {
    color:
        var(--livigo-lime-brand);

    font-size: 0.85rem;

    font-weight: 750;

    text-decoration: none;
}

.livigo-auth__forgot:hover {
    text-decoration: underline;
}


/* ==========================================================================
   Universal Auth — Primary Action
   ========================================================================== */

.livigo-auth__submit {
    width: 100%;

    min-height: 60px;

    margin-top: 2px;

    padding: 14px 22px;

    display: inline-flex;

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

    gap: 12px;

    border:
        1px solid
        var(--livigo-lime-brand);

    border-radius: 16px;

    background:
        var(--livigo-lime-brand);

    color:
        #071d45;

    font: inherit;

    font-size: 1rem;

    line-height: 1;

    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 13px 30px
        rgba(0, 0, 0, 0.13);
}

.livigo-auth__submit-arrow {
    font-size: 1.3rem;

    line-height: 1;
}


/* ==========================================================================
   Universal Auth — Secondary
   ========================================================================== */

.livigo-auth__register {
    width: 100%;

    margin-top: 28px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.11);

    text-align: center;
}

.livigo-auth__register p {
    margin: 0 0 13px;

    color:
        var(--livigo-text-muted);

    font-size: 0.86rem;

    line-height: 1.5;
}

.livigo-auth__secondary {
    width: 100%;

    min-height: 56px;

    padding: 12px 20px;

    display: inline-flex;

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

    border:
        1px solid
        rgba(214, 243, 74, 0.48);

    border-radius: 16px;

    background:
        rgba(214, 243, 74, 0.045);

    color:
        var(--livigo-lime-brand);

    font-size: 0.94rem;

    font-weight: 800;

    text-decoration: none;
}


/* ==========================================================================
   Universal Auth — Security / Generic
   ========================================================================== */

.livigo-auth__security {
    margin-top: 22px;

    display: flex;

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

    gap: 7px;

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

    font-size: 0.76rem;

    line-height: 1.4;

    text-align: center;
}

.livigo-auth__content {
    width: 100%;
}

.livigo-auth__message {
    margin: 0;

    color:
        var(--livigo-text-soft);

    font-size: 0.92rem;

    line-height: 1.6;
}

.livigo-auth__message + .livigo-auth__message {
    margin-top: 12px;
}

.livigo-auth__actions {
    width: 100%;

    margin-top: 24px;

    display: grid;

    gap: 12px;
}

.livigo-auth__link {
    color:
        var(--livigo-lime-brand);

    font-weight: 750;

    text-decoration: none;
}

.livigo-auth__hint {
    margin: -2px 0 0;

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

    font-size: 0.77rem;

    line-height: 1.45;
}

.livigo-auth__optional {
    margin-left: 4px;

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

    font-size: 0.76rem;

    font-weight: 500;
}


/* ==========================================================================
   Universal Auth — Checkbox
   ========================================================================== */

.livigo-auth__checkbox {
    width: 100%;

    display: grid;

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

    align-items: start;

    gap: 10px;

    cursor: pointer;
}

.livigo-auth__checkbox input[type="checkbox"] {
    width: 19px;
    height: 19px;

    margin: 2px 0 0;

    accent-color:
        var(--livigo-lime-brand);
}

.livigo-auth__checkbox span {
    min-width: 0;

    color:
        var(--livigo-text-soft);

    font-size: 0.82rem;

    line-height: 1.52;
}

.livigo-auth__checkbox a {
    color:
        var(--livigo-lime-brand);

    font-weight: 750;

    text-decoration: none;
}


/* ==========================================================================
   Universal Auth — Responsive
   ========================================================================== */

@media (max-width: 760px) {

    .livigo-auth {
        padding:
            max(27px, env(safe-area-inset-top))
            16px
            max(28px, env(safe-area-inset-bottom));
    }

    .livigo-auth__card {
        padding: 32px 28px;

        border-radius: 23px;
    }

}

@media (max-width: 600px) {

    body.auth-body--livigo {
        background:
            linear-gradient(
                180deg,
                #0A2C73 0%,
                #082766 58%,
                #071F55 100%
            );
    }

    .livigo-auth {
        padding:
            max(22px, env(safe-area-inset-top))
            14px
            max(24px, env(safe-area-inset-bottom));
    }

    .livigo-auth::before {
        display: none;
    }

    .livigo-auth__brand {
        margin-bottom: 21px;
    }

    .livigo-auth__logo {
        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }

    .livigo-auth__wordmark {
        font-size: 2.15rem;
    }

    .livigo-auth__card {
        padding: 27px 19px 28px;

        border-radius: 20px;
    }

    .livigo-auth__title {
        font-size: 1.9rem;
    }

    .livigo-auth__description {
        font-size: 0.88rem;
    }

    .livigo-auth__input {
        font-size: 16px;
    }

    .livigo-auth__options {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

}

@media (max-width: 380px) {

    .livigo-auth {
        padding-left: 10px;
        padding-right: 10px;
    }

    .livigo-auth__card {
        padding: 25px 16px 26px;

        border-radius: 18px;
    }

}


/* ==========================================================================
   LEGACY AUTH COMPATIBILITY
   ========================================================================== */

.auth-page {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    background:
        linear-gradient(
            180deg,
            #0A2C73 0%,
            #082766 58%,
            #071F55 100%
        );

    color:
        var(--livigo-white);
}

.auth-section {
    width: 100%;

    padding:
        max(38px, env(safe-area-inset-top))
        0
        max(48px, env(safe-area-inset-bottom));
}

.auth-section > .container {
    width:
        min(
            calc(100% - 32px),
            620px
        );

    margin: 0 auto;
}

.auth-card {
    position: relative;

    width: 100%;

    padding: 34px;

    overflow: hidden;

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

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.07),
            rgba(2, 25, 66, 0.22)
        );

    color:
        var(--livigo-white);

    box-shadow:
        0 28px 70px
        rgba(0, 0, 0, 0.17);
}

.auth-card__header {
    margin: 0 0 28px;
}

.auth-card__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 11px;

    color:
        var(--livigo-lime-brand);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.auth-card__title {
    margin: 0;

    color:
        var(--livigo-white);

    font-size:
        clamp(
            1.9rem,
            5vw,
            2.55rem
        );

    line-height: 1.07;

    font-weight: 850;
}

.auth-card__description {
    margin: 12px 0 0;

    color:
        var(--livigo-text-soft);

    font-size: 0.93rem;

    line-height: 1.58;
}

.auth-form {
    width: 100%;

    display: grid;

    gap: 19px;
}

.form-group {
    width: 100%;

    display: grid;

    gap: 8px;
}

.form-group > label {
    color:
        var(--livigo-white);

    font-size: 0.87rem;

    font-weight: 700;
}

.auth-form
.form-group
input:not([type="checkbox"]):not([type="radio"]),
.auth-form
.form-group
select,
.auth-form
.form-group
textarea {
    width: 100%;

    min-height: 55px;

    padding: 0 15px;

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

    border-radius: 14px;

    outline: 0;

    background:
        rgba(2, 24, 65, 0.34);

    color:
        var(--livigo-white);

    font: inherit;

    font-size: 16px;
}

.auth-form__submit,
.auth-form .btn.auth-form__submit {
    width: 100%;

    min-height: 58px;

    padding: 13px 22px;

    display: inline-flex;

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

    border:
        1px solid
        var(--livigo-lime-brand);

    border-radius: 15px;

    background:
        var(--livigo-lime-brand);

    color:
        #071d45;

    font: inherit;

    font-size: 1rem;

    font-weight: 850;

    cursor: pointer;
}

.auth-card__footer {
    margin-top: 27px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.11);

    text-align: center;
}


/* ==========================================================================
   CUSTOMER PWA AUTHENTICATION
   ========================================================================== */


/* ==========================================================================
   Customer Auth — Root
   ========================================================================== */

html[data-livigo-shell="customer-auth"] {
    min-height: 100%;

    background:
        var(--livigo-blue) !important;

    color-scheme: dark;
}

html[data-livigo-shell="customer-auth"],
html[data-livigo-shell="customer-auth"] body {
    width: 100%;

    min-width: 320px;

    min-height: 100%;
}

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app {
    margin: 0 !important;

    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;

    background:
        var(--livigo-blue) !important;

    color:
        var(--livigo-white) !important;

    color-scheme: dark;

    overscroll-behavior-y: none;
}

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app *,
html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app *::before,
html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app *::after {
    box-sizing: border-box;
}


/* ==========================================================================
   Customer Auth — Shell Suppression
   ========================================================================== */

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.site-header,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.public-header,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.main-header,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.lv-site-header,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.lv-public-header,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.site-footer,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.public-footer,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.main-footer,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.lv-site-footer,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.lv-public-footer,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.customer-header,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.lv-customer-header,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.customer-dock,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.lv-customer-dock,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.account-dock,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.mobile-dock,

html[data-livigo-shell="customer-auth"]
body.lv-customer-auth-app
.bottom-nav {
    display: none !important;
}


/* ==========================================================================
   Customer Auth — Application Surface
   ========================================================================== */

.lv-customer-auth {
    position: relative;

    width:
        min(
            100%,
            520px
        );

    min-height: 100vh;
    min-height: 100dvh;

    margin: 0 auto;

    padding:
        calc(
            24px
            + env(
                safe-area-inset-top,
                0px
            )
        )
        20px
        calc(
            30px
            + env(
                safe-area-inset-bottom,
                0px
            )
        );

    display: flex;

    flex-direction: column;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255, 255, 255, 0.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--livigo-blue) 0%,
            #082661 55%,
            var(--livigo-blue-deep) 100%
        );

    color:
        var(--livigo-white);
}


/* ==========================================================================
   Customer Auth — Brand
   ========================================================================== */

.lv-customer-auth__brand {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 7px 0 28px;

    display: flex;

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

.lv-customer-auth__brand-link {
    max-width: 100%;

    display: inline-flex;

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

    gap: 9px;

    color:
        var(--livigo-white);

    text-decoration: none;

    -webkit-tap-highlight-color:
        transparent;
}

.lv-customer-auth__mark {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    padding: 3px;

    display: flex;

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

    overflow: hidden;

    border-radius: 12px;

    background:
        var(--livigo-white);
}

.lv-customer-auth__mark img,
.lv-customer-auth__mark svg {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}

.lv-customer-auth__brand-copy {
    min-width: 0;

    display: block;
}

.lv-customer-auth__brand-copy strong {
    display: block;

    margin: 0;

    color:
        var(--livigo-white);

    font-size: 21px;

    line-height: 1;

    font-weight: 850;

    letter-spacing:
        -0.035em;
}

.lv-customer-auth__brand-copy small {
    display: block;

    margin-top: 4px;

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

    font-size: 8px;

    line-height: 1;

    font-weight: 800;

    letter-spacing:
        0.15em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================================
   Customer Auth — Content
   ========================================================================== */

.lv-customer-auth__content {
    position: relative;

    z-index: 1;

    width: 100%;

    flex: 1 1 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-bottom: 34px;
}

.lv-customer-auth__back {
    width: max-content;

    max-width: 100%;

    margin-bottom: 20px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    font-size: 12px;

    line-height: 1.3;

    font-weight: 750;

    text-decoration: none;
}

.lv-customer-auth__back-icon {
    font-size: 19px;

    line-height: 1;
}


/* ==========================================================================
   Customer Auth — Card
   ========================================================================== */

.lv-customer-auth__card {
    position: relative;

    width: 100%;

    padding: 24px 20px;

    overflow: hidden;

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

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.045)
        );

    color:
        var(--livigo-white);

    box-shadow:
        0 20px 48px
        rgba(0, 0, 0, 0.13);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

.lv-customer-auth__card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18%;
    right: 18%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 243, 74, 0.56),
            transparent
        );

    pointer-events: none;
}


/* ==========================================================================
   Customer Auth — Security Icon
   ========================================================================== */

.lv-customer-auth__security-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 18px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background:
        rgba(214, 243, 74, 0.11);

    color:
        var(--livigo-lime-brand);
}

.lv-customer-auth__security-icon svg {
    width: 24px;
    height: 24px;

    display: block;
}


/* ==========================================================================
   Customer Auth — Heading
   ========================================================================== */

.lv-customer-auth__eyebrow {
    display: block;

    margin-bottom: 8px;

    color:
        var(--livigo-lime-brand);

    font-size: 9px;

    line-height: 1;

    font-weight: 850;

    letter-spacing:
        0.13em;

    text-transform: uppercase;
}

.lv-customer-auth__title {
    margin: 0;

    color:
        var(--livigo-white);

    font-size:
        clamp(
            29px,
            8vw,
            36px
        );

    line-height: 1.04;

    font-weight: 850;

    letter-spacing:
        -0.045em;
}

.lv-customer-auth__description {
    margin: 13px 0 0;

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

    font-size: 12px;

    line-height: 1.65;

    font-weight: 550;
}

.lv-customer-auth__description strong {
    color:
        rgba(255, 255, 255, 0.88);

    font-weight: 750;
}


/* ==========================================================================
   Customer Auth — Alerts
   ========================================================================== */

.lv-customer-auth__alert {
    width: 100%;

    margin-top: 18px;

    padding: 12px 14px;

    border-radius: 13px;

    font-size: 11px;

    line-height: 1.5;
}

.lv-customer-auth__alert--success {
    border:
        1px solid
        rgba(214, 243, 74, 0.24);

    background:
        rgba(214, 243, 74, 0.10);

    color:
        #E9FF9A;
}

.lv-customer-auth__alert--error {
    border:
        1px solid
        rgba(255, 130, 130, 0.24);

    background:
        rgba(255, 90, 90, 0.10);

    color:
        #FFD3D3;
}


/* ==========================================================================
   Customer Auth — Form
   ========================================================================== */

.lv-customer-auth__form {
    width: 100%;

    margin-top: 22px;
}

.lv-customer-auth__field {
    width: 100%;

    display: grid;

    gap: 8px;
}

.lv-customer-auth__field
+ .lv-customer-auth__field {
    margin-top: 16px;
}

.lv-customer-auth__label {
    margin: 0;

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

    font-size: 11px;

    line-height: 1.2;

    font-weight: 750;
}


/* ==========================================================================
   Customer Auth — Input
   ========================================================================== */

.lv-customer-auth__input-wrap {
    position: relative;

    width: 100%;

    min-height: 52px;

    display: grid;

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

    align-items: center;

    overflow: hidden;

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

    border-radius: 15px;

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

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.lv-customer-auth__input-wrap:has(
    .lv-customer-auth__password-toggle
) {
    grid-template-columns:
        42px
        minmax(0, 1fr)
        42px;
}

.lv-customer-auth__input-wrap:focus-within {
    border-color:
        rgba(214, 243, 74, 0.58);

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

    box-shadow:
        0 0 0 3px
        rgba(214, 243, 74, 0.08);
}

.lv-customer-auth__input-icon {
    width: 42px;

    display: grid;

    place-items: center;

    color:
        var(--livigo-lime-brand);

    pointer-events: none;
}

.lv-customer-auth__input-icon svg {
    width: 19px;
    height: 19px;

    display: block;
}

.lv-customer-auth__input {
    display: block;

    width: 100%;
    min-width: 0;

    height: 50px;

    margin: 0;

    padding: 0 15px 0 0;

    border: 0 !important;

    border-radius: 0;

    outline: 0 !important;

    background:
        transparent !important;

    color:
        var(--livigo-white) !important;

    font: inherit;

    font-size: 16px;

    line-height: normal;

    box-shadow:
        none !important;

    appearance: none;
    -webkit-appearance: none;
}

.lv-customer-auth__input::placeholder {
    color:
        rgba(255, 255, 255, 0.33);

    opacity: 1;
}


/* ==========================================================================
   Customer Auth — Autofill
   ========================================================================== */

.lv-customer-auth__input:-webkit-autofill,
.lv-customer-auth__input:-webkit-autofill:hover,
.lv-customer-auth__input:-webkit-autofill:focus,
.lv-customer-auth__input:-webkit-autofill:active {
    -webkit-text-fill-color:
        var(--livigo-white) !important;

    -webkit-box-shadow:
        0 0 0 1000px
        #17366c
        inset !important;

    caret-color:
        var(--livigo-white);

    transition:
        background-color
        9999s
        ease-in-out
        0s;
}


/* ==========================================================================
   Customer Auth — Password Toggle
   ========================================================================== */

.lv-customer-auth__password-toggle {
    width: 42px;
    height: 50px;

    margin: 0;

    padding: 0;

    display: grid;

    place-items: center;

    border: 0;

    outline: 0;

    background:
        transparent;

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

    cursor: pointer;
}

.lv-customer-auth__password-toggle:hover {
    color:
        var(--livigo-lime-brand);
}

.lv-customer-auth__password-toggle svg {
    width: 19px;
    height: 19px;

    display: block;
}

.lv-customer-auth__hint {
    margin: 1px 0 0;

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

    font-size: 9px;

    line-height: 1.45;
}


/* ==========================================================================
   Customer Auth — Primary Action
   ========================================================================== */

.lv-customer-auth__submit {
    width: 100%;

    min-height: 52px;

    margin-top: 16px;

    padding: 0 18px;

    display: flex;

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

    gap: 12px;

    border:
        1px solid
        var(--livigo-lime-brand);

    border-radius: 15px;

    outline: 0;

    background:
        var(--livigo-lime-brand);

    color:
        #17320A;

    font: inherit;

    font-size: 13px;

    line-height: 1;

    font-weight: 850;

    text-decoration: none;

    cursor: pointer;

    box-shadow: none;

    appearance: none;
    -webkit-appearance: none;
}

.lv-customer-auth__submit-arrow {
    flex: 0 0 auto;

    font-size: 20px;

    line-height: 1;
}


/* ==========================================================================
   Customer Auth — Actions
   ========================================================================== */

.lv-customer-auth__actions {
    width: 100%;

    margin-top: 20px;

    display: grid;

    gap: 10px;
}

.lv-customer-auth__actions
.lv-customer-auth__submit {
    margin-top: 0;
}

.lv-customer-auth__secondary {
    width: 100%;

    min-height: 48px;

    padding: 0 16px;

    display: grid;

    place-items: center;

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

    border-radius: 15px;

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

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

    font-size: 11px;

    font-weight: 800;

    text-align: center;

    text-decoration: none;
}


/* ==========================================================================
   Customer Auth — Login
   ========================================================================== */

.lv-customer-auth__login {
    margin-top: 20px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);

    text-align: center;
}

.lv-customer-auth__login a {
    color:
        var(--livigo-lime-brand);

    font-size: 11px;

    line-height: 1.4;

    font-weight: 800;

    text-decoration: none;
}


/* ==========================================================================
   Customer Auth — Footer
   ========================================================================== */

.lv-customer-auth__footer {
    position: relative;

    z-index: 1;

    flex: 0 0 auto;

    display: flex;

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

    gap: 7px;

    padding: 5px 0;

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

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    text-align: center;
}


/* ==========================================================================
   Customer Auth — Interaction
   ========================================================================== */

.lv-customer-auth__brand-link:focus-visible,
.lv-customer-auth__back:focus-visible,
.lv-customer-auth__password-toggle:focus-visible,
.lv-customer-auth__submit:focus-visible,
.lv-customer-auth__secondary:focus-visible,
.lv-customer-auth__login a:focus-visible {
    outline:
        2px solid
        var(--livigo-lime-brand);

    outline-offset: 3px;
}

@media (hover: hover) {

    .lv-customer-auth__submit:hover {
        filter:
            brightness(1.04);
    }

    .lv-customer-auth__secondary:hover {
        background:
            rgba(255, 255, 255, 0.075);
    }

    .lv-customer-auth__back:hover,
    .lv-customer-auth__login a:hover {
        text-decoration: underline;
    }

}


/* ==========================================================================
   Customer Auth — Short Viewport / Keyboard
   ========================================================================== */

@media (max-height: 700px) {

    .lv-customer-auth__content {
        justify-content: flex-start;

        padding-top: 10px;
    }

    .lv-customer-auth__brand {
        padding-bottom: 18px;
    }

}


/* ==========================================================================
   Customer Auth — Mobile
   ========================================================================== */

@media (max-width: 600px) {

    .lv-customer-auth {
        width: 100%;

        padding:
            calc(
                18px
                + env(
                    safe-area-inset-top,
                    0px
                )
            )
            16px
            calc(
                22px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .lv-customer-auth__brand {
        padding: 4px 0 22px;
    }

    .lv-customer-auth__content {
        padding-bottom: 24px;
    }

    .lv-customer-auth__card {
        padding: 23px 18px;

        border-radius: 21px;
    }

    .lv-customer-auth__title {
        font-size:
            clamp(
                27px,
                8vw,
                32px
            );
    }

    .lv-customer-auth__description {
        font-size: 12px;
    }

    .lv-customer-auth__input {
        font-size: 16px;
    }

}

@media (max-width: 380px) {

    .lv-customer-auth {
        padding-left: 12px;
        padding-right: 12px;
    }

    .lv-customer-auth__card {
        padding: 21px 16px;

        border-radius: 19px;
    }

    .lv-customer-auth__mark {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .lv-customer-auth__brand-copy strong {
        font-size: 20px;
    }

    .lv-customer-auth__title {
        font-size: 27px;
    }

}

@media (min-width: 560px) {

    .lv-customer-auth {
        border-left:
            1px solid
            rgba(255, 255, 255, 0.05);

        border-right:
            1px solid
            rgba(255, 255, 255, 0.05);
    }

}


/* ==========================================================================
   LIVIGO PRO LOGIN
   ========================================================================== */

body.auth-body--pro {
    margin: 0;

    min-height: 100vh;
    min-height: 100dvh;

    background: #eef3f7;

    color: #0c2032;
}

.pro-login {
    min-height: 100vh;
    min-height: 100dvh;

    background:
        linear-gradient(
            180deg,
            #f4f7fa 0%,
            #edf2f6 100%
        );

    color: #0c2032;
}

.pro-login *,
.pro-login *::before,
.pro-login *::after {
    box-sizing: border-box;
}


/* ==========================================================================
   Livigo Pro — Layout
   ========================================================================== */

.pro-login__layout {
    min-height: 100vh;
    min-height: 100dvh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, 0.92fr);
}


/* ==========================================================================
   Livigo Pro — Visual
   ========================================================================== */

.pro-login__visual {
    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #07335d 0%,
            #031e39 48%,
            #011528 100%
        );

    color: #ffffff;
}

.pro-login__visual-background {
    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    padding:
        44px
        clamp(36px, 5vw, 78px)
        34px;

    display: flex;

    flex-direction: column;

    isolation: isolate;
}

.pro-login__visual-background::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    background:
        radial-gradient(
            circle at 14% 8%,
            rgba(184, 242, 60, 0.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 54%,
            rgba(89, 151, 207, 0.18),
            transparent 35%
        );
}


/* ==========================================================================
   Livigo Pro — Brand
   ========================================================================== */

.pro-login__brand-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    text-decoration: none;
}

.pro-login__logo {
    width: 42px;
    height: 42px;

    display: inline-flex;

    color: #b8f23c;
}

.pro-login__logo svg {
    width: 100%;
    height: 100%;
}

.pro-login__wordmark {
    font-size: 1.35rem;

    font-weight: 800;
}

.pro-login__wordmark-pro {
    margin-left: -3px;

    font-size: 1.08rem;

    font-weight: 800;

    color: #b8f23c;
}


/* ==========================================================================
   Livigo Pro — Intro
   ========================================================================== */

.pro-login__intro {
    position: relative;

    z-index: 4;

    max-width: 650px;

    margin-top:
        clamp(
            54px,
            9vh,
            104px
        );
}

.pro-login__headline {
    max-width: 620px;

    margin: 0;

    font-size:
        clamp(
            2.7rem,
            5.2vw,
            5.3rem
        );

    line-height: 0.98;

    letter-spacing:
        -0.055em;

    color: #ffffff;
}

.pro-login__intro-copy {
    max-width: 520px;

    margin: 20px 0 0;

    font-size:
        clamp(
            1.05rem,
            1.6vw,
            1.35rem
        );

    line-height: 1.5;

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


/* ==========================================================================
   Livigo Pro — Areas
   ========================================================================== */

.pro-login__areas {
    position: relative;

    z-index: 4;

    max-width: 600px;

    margin-top: 36px;

    display: grid;

    gap: 12px;
}

.pro-login__area {
    min-width: 0;

    padding: 13px 15px;

    display: flex;

    align-items: center;

    gap: 13px;

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

    border-radius: 15px;

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

.pro-login__area-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    display: inline-flex;

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

    border-radius: 11px;

    background:
        rgba(184, 242, 60, 0.10);

    color: #b8f23c;
}

.pro-login__area-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.pro-login__area-copy strong {
    color: #ffffff;

    font-size: 0.89rem;
}

.pro-login__area-copy span {
    color:
        rgba(255, 255, 255, 0.57);

    font-size: 0.77rem;
}


/* ==========================================================================
   Livigo Pro — Authentication
   ========================================================================== */

.pro-login__authentication {
    min-height: 100vh;
    min-height: 100dvh;

    padding:
        40px
        clamp(28px, 4.6vw, 72px);

    display: flex;

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

    background: #f7f9fb;
}

.pro-login__auth-inner {
    width: 100%;

    max-width: 470px;
}

.pro-login__auth-header {
    margin-bottom: 28px;
}

.pro-login__auth-title {
    margin: 0;

    color: #0a2032;

    font-size:
        clamp(
            1.85rem,
            3vw,
            2.55rem
        );

    line-height: 1.08;
}

.pro-login__auth-description {
    max-width: 420px;

    margin: 12px 0 0;

    color: #677988;

    font-size: 0.91rem;

    line-height: 1.58;
}


/* ==========================================================================
   Livigo Pro — Form
   ========================================================================== */

.pro-login__form {
    display: grid;

    gap: 19px;
}

.pro-login__field {
    display: grid;

    gap: 8px;
}

.pro-login__label {
    color: #24394a;

    font-size: 0.82rem;

    font-weight: 700;
}

.pro-login__input-wrap {
    position: relative;

    min-height: 50px;

    display: flex;

    align-items: center;

    border:
        1px solid
        rgba(12, 32, 50, 0.12);

    border-radius: 12px;

    background: #ffffff;
}

.pro-login__input-wrap:focus-within {
    border-color:
        rgba(118, 170, 17, 0.72);

    box-shadow:
        0 0 0 4px
        rgba(184, 242, 60, 0.13);
}

.pro-login__input {
    width: 100%;
    min-width: 0;

    height: 48px;

    padding:
        0
        44px
        0
        45px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #0c2032;

    font: inherit;

    font-size: 0.88rem;
}

.pro-login__submit {
    width: 100%;

    min-height: 50px;

    padding: 0 18px;

    display: inline-flex;

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

    gap: 9px;

    border: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #b9f43e,
            #9ee51e
        );

    color: #06233a;

    font: inherit;

    font-weight: 800;

    cursor: pointer;
}


/* ==========================================================================
   Livigo Pro — Responsive
   ========================================================================== */

@media (max-width: 920px) {

    .pro-login__layout {
        display: block;
    }

    .pro-login__visual {
        min-height: auto;
    }

    .pro-login__visual-background {
        min-height: 465px;

        padding:
            30px
            28px
            26px;
    }

    .pro-login__authentication {
        min-height: auto;

        padding:
            48px
            24px
            60px;
    }

}

@media (max-width: 640px) {

    body.auth-body--pro {
        background: #f7f9fb;
    }

    .pro-login__visual-background {
        min-height: 385px;

        padding:
            24px
            20px
            20px;
    }

    .pro-login__authentication {
        padding:
            28px
            18px
            44px;

        align-items: flex-start;
    }

}


/* ==========================================================================
   LIVIGO PRO — DARK THEME
   ========================================================================== */

html[data-theme="dark"]
body.auth-body--pro,
html[data-theme="dark"]
.pro-login {
    background: #07131f;
}

html[data-theme="dark"]
.pro-login__authentication {
    background: #091824;
}

html[data-theme="dark"]
.pro-login__auth-title {
    color: #f4f8fb;
}

html[data-theme="dark"]
.pro-login__auth-description {
    color: #97a9b7;
}

html[data-theme="dark"]
.pro-login__input-wrap {
    background: #0e2130;

    border-color:
        rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"]
.pro-login__label {
    color: #d7e1e8;
}

html[data-theme="dark"]
.pro-login__input {
    color: #f4f7fa;
}


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

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

    .livigo-auth__input-wrap,
    .livigo-auth__submit,
    .livigo-auth__secondary,
    .auth-form
    .form-group
    input,
    .auth-form
    .form-group
    select,
    .auth-form
    .form-group
    textarea,
    .auth-form__submit,
    .lv-customer-auth__input-wrap,
    .lv-customer-auth__submit,
    .lv-customer-auth__secondary,
    .pro-login__input-wrap,
    .pro-login__submit {
        transition: none;
    }

    .lv-customer-auth *,
    .lv-customer-auth *::before,
    .lv-customer-auth *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}