/*
 * ZLIX_PORTAL_AUTH_COOL_TONE_POLISH_V2
 *
 * Development visual refinement for Customer Portal authentication,
 * recovery, invitation, and completion surfaces.
 */

:root {
    --zlix-auth-bg-top: #f8fbfd;
    --zlix-auth-bg: #eef4f8;
    --zlix-auth-bg-deep: #e7eef5;

    --zlix-auth-surface: #fbfdff;
    --zlix-auth-surface-strong: #ffffff;
    --zlix-auth-surface-soft: #f3f7fa;

    --zlix-auth-navy: #143b59;
    --zlix-auth-navy-deep: #0c2a41;

    --zlix-auth-text: #173247;
    --zlix-auth-muted: #566f82;
    --zlix-auth-subtle: #718495;

    --zlix-auth-border: #ccd9e4;
    --zlix-auth-border-strong: #b7c9d8;

    --zlix-auth-accent: #1d5f8a;
    --zlix-auth-accent-hover: #174f78;
    --zlix-auth-focus: rgba(41, 118, 169, .20);
}


/* ---------------------------------------------------------------
 * Cool portal background
 * --------------------------------------------------------------- */

body.zlix-portal {
    background:
        radial-gradient(
            circle at 50% -18%,
            var(--zlix-auth-bg-top) 0,
            var(--zlix-auth-bg) 54%,
            var(--zlix-auth-bg-deep) 100%
        ) !important;

    color:
        var(--zlix-auth-text);
}


/* ---------------------------------------------------------------
 * Authentication / recovery shell
 * --------------------------------------------------------------- */

.portal-login-page .portal-main {
    background:
        transparent !important;
}

.portal-login-page .portal-auth-card {
    background:
        var(--zlix-auth-surface) !important;

    border-color:
        var(--zlix-auth-border) !important;

    box-shadow:
        0 22px 55px rgba(12, 43, 66, .11) !important;
}

.portal-login-page .portal-auth-intro {
    background:
        linear-gradient(
            155deg,
            #184764 0%,
            #10354f 48%,
            #0b293f 100%
        ) !important;

    color:
        #f7fbfe !important;
}

.portal-login-page .portal-auth-intro::after {
    border-color:
        rgba(157, 196, 222, .20) !important;
}

.portal-login-page .portal-kicker {
    color:
        #bfd8e9 !important;
}

.portal-login-page .portal-auth-intro h1 {
    color:
        #ffffff !important;

    text-shadow:
        0 1px 0 rgba(0, 0, 0, .06);
}

.portal-login-page
.portal-auth-intro
> p:not(.portal-kicker) {
    color:
        #d8e7f0 !important;
}

.portal-login-page .portal-feature-list {
    color:
        #e4edf4 !important;
}

.portal-login-page .portal-feature-list li::before {
    border-color:
        #79acd0 !important;

    background:
        rgba(121, 172, 208, .08) !important;
}

.portal-login-page .portal-auth-form-panel {
    background:
        var(--zlix-auth-surface) !important;

    color:
        var(--zlix-auth-text) !important;
}

.portal-login-page .portal-card-heading h1 {
    color:
        var(--zlix-auth-navy) !important;

    letter-spacing:
        -.015em;
}

.portal-login-page .portal-card-heading p {
    color:
        var(--zlix-auth-muted) !important;
}


/* ---------------------------------------------------------------
 * Forms
 * --------------------------------------------------------------- */

.portal-login-page .portal-field > label,
.portal-login-page .portal-field-label {
    color:
        #29465c !important;
}

.portal-login-page .portal-field input[type="email"],
.portal-login-page .portal-field input[type="text"],
.portal-login-page .portal-field input[type="password"],
.portal-login-page .portal-field input[type="url"],
.portal-login-page .portal-field select,
.portal-login-page .portal-field textarea {
    background:
        #ffffff !important;

    border-color:
        var(--zlix-auth-border-strong) !important;

    color:
        var(--zlix-auth-text) !important;

    box-shadow:
        inset 0 1px 2px rgba(13, 47, 72, .035);

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

.portal-login-page .portal-field input:hover,
.portal-login-page .portal-field select:hover,
.portal-login-page .portal-field textarea:hover {
    border-color:
        #97b3c8 !important;
}

.portal-login-page .portal-field input:focus,
.portal-login-page .portal-field select:focus,
.portal-login-page .portal-field textarea:focus {
    border-color:
        #327baa !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px var(--zlix-auth-focus) !important;

    background:
        #ffffff !important;
}

.portal-login-page .portal-field input[readonly] {
    background:
        #f1f5f8 !important;

    color:
        #496478 !important;
}

.portal-login-page .portal-input-action {
    color:
        var(--zlix-auth-accent) !important;
}

.portal-login-page .portal-caps-notice,
.portal-login-page .portal-form-note,
.portal-login-page .portal-help {
    color:
        var(--zlix-auth-subtle) !important;
}


/* ---------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------- */

.portal-login-page .portal-button,
.portal-invite-card .portal-button {
    border-radius:
        9px !important;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .10s ease;
}

.portal-login-page .portal-button-primary,
.portal-invite-card .portal-button-primary {
    background:
        var(--zlix-auth-accent) !important;

    border-color:
        var(--zlix-auth-accent) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 4px 10px rgba(16, 59, 89, .10);
}

.portal-login-page .portal-button-primary:hover:not(:disabled),
.portal-invite-card .portal-button-primary:hover:not(:disabled) {
    background:
        var(--zlix-auth-accent-hover) !important;

    border-color:
        var(--zlix-auth-accent-hover) !important;

    box-shadow:
        0 6px 14px rgba(18, 71, 106, .17);
}

.portal-login-page .portal-button:active:not(:disabled),
.portal-invite-card .portal-button:active:not(:disabled) {
    transform:
        translateY(1px);
}

.portal-login-page .portal-button:focus-visible,
.portal-invite-card .portal-button:focus-visible {
    outline:
        3px solid var(--zlix-auth-focus) !important;

    outline-offset:
        2px !important;
}


/* ---------------------------------------------------------------
 * Recovery alerts
 * --------------------------------------------------------------- */

.portal-login-page .zlix-auth-alert,
.portal-login-page .portal-form-alert {
    background:
        #f2f7fb !important;

    border-color:
        #bfd1df !important;

    color:
        #294e69 !important;

    border-radius:
        10px !important;
}

.portal-login-page .zlix-auth-alert.is-info,
.portal-login-page .portal-form-alert.is-info {
    background:
        #eef6fb !important;

    border-color:
        #b8d1e2 !important;

    color:
        #285776 !important;
}

.portal-login-page .zlix-auth-alert.is-error,
.portal-login-page .portal-form-alert.is-error {
    background:
        #fff5f4 !important;

    border-color:
        #e0b4ae !important;

    color:
        #842d26 !important;
}

.portal-login-page .zlix-auth-alert.is-success,
.portal-login-page .portal-form-alert.is-success {
    /*
     * Auth/recovery success is intentionally rendered in the
     * Customer Portal cool-blue family rather than green.
     *
     * This preserves the Arctic Navy visual direction while the
     * message wording/iconography continues to communicate success.
     */
    background:
        #f1f8fd !important;

    border-color:
        #b9d5e7 !important;

    color:
        #174f78 !important;
}


/* ---------------------------------------------------------------
 * Support links
 * --------------------------------------------------------------- */

.portal-login-page .portal-auth-support {
    border-top-color:
        #d9e4ec !important;

    color:
        var(--zlix-auth-muted) !important;
}

.portal-login-page a {
    color:
        var(--zlix-auth-accent) !important;
}

.portal-login-page a:hover {
    color:
        var(--zlix-auth-accent-hover) !important;
}


/* ---------------------------------------------------------------
 * Invitation surfaces
 * --------------------------------------------------------------- */

.portal-invite-card {
    background:
        #fbfdff !important;

    border-color:
        var(--zlix-auth-border) !important;

    box-shadow:
        0 20px 50px rgba(12, 43, 66, .10) !important;
}

.portal-invite-card .portal-invite-hero {
    background:
        linear-gradient(
            180deg,
            #f9fbfd 0%,
            #eef5fa 100%
        ) !important;

    border-bottom-color:
        #d5e1ea !important;
}

.portal-invite-card .portal-invite-body {
    background:
        #fbfdff !important;
}

.portal-invite-card h1,
.portal-invite-card h2,
.portal-invite-card h3 {
    color:
        var(--zlix-auth-navy) !important;
}

.portal-invite-card .portal-kicker {
    color:
        #496f8b !important;
}

.portal-invite-card .portal-fact,
.portal-invite-card .portal-choice-card {
    background:
        #ffffff !important;

    border-color:
        #ccd9e4 !important;

    box-shadow:
        0 3px 12px rgba(14, 47, 72, .04);
}

.portal-invite-card .portal-choice-heading p,
.portal-invite-card .portal-help,
.portal-invite-card .portal-form-note {
    color:
        var(--zlix-auth-muted) !important;
}

.portal-invite-card .portal-password-rules {
    background:
        #f3f7fa !important;

    border-color:
        #d2dee7 !important;

    color:
        #39556a !important;
}

.portal-invite-card .portal-alert-info {
    background:
        #eef6fb !important;

    border-color:
        #bdd4e3 !important;

    color:
        #285776 !important;
}

.portal-invite-card .portal-alert-success {
    background:
        #f1f8fd !important;

    border-color:
        #b9d5e7 !important;

    color:
        #174f78 !important;
}

.portal-invite-card .portal-alert-error {
    background:
        #fff5f4 !important;

    border-color:
        #e0b4ae !important;

    color:
        #842d26 !important;
}


/* ---------------------------------------------------------------
 * Invitation controls
 * --------------------------------------------------------------- */

.portal-invite-card .portal-field input[type="email"],
.portal-invite-card .portal-field input[type="text"],
.portal-invite-card .portal-field input[type="password"],
.portal-invite-card .portal-field select,
.portal-invite-card .portal-field textarea {
    background:
        #ffffff !important;

    border-color:
        var(--zlix-auth-border-strong) !important;

    color:
        var(--zlix-auth-text) !important;
}

.portal-invite-card .portal-field input:focus,
.portal-invite-card .portal-field select:focus,
.portal-invite-card .portal-field textarea:focus {
    border-color:
        #327baa !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px var(--zlix-auth-focus) !important;
}


/* ---------------------------------------------------------------
 * Narrow widths
 * --------------------------------------------------------------- */

@media (max-width: 760px) {
    body.zlix-portal {
        background:
            var(--zlix-auth-bg) !important;
    }

    .portal-login-page .portal-auth-card,
    .portal-invite-card {
        box-shadow:
            0 12px 30px rgba(12, 43, 66, .09) !important;
    }

    .portal-login-page .portal-auth-intro {
        background:
            linear-gradient(
                145deg,
                #17435f 0%,
                #0d2c43 100%
            ) !important;
    }
}


/* ---------------------------------------------------------------
 * Accessibility
 * --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .portal-login-page *,
    .portal-invite-card * {
        transition:
            none !important;
    }
}

/* ZLIX_PORTAL_LOGIN_HELP_CLARITY_V1 */

.portal-login-page .portal-auth-support-heading {
    margin: 0 0 8px;
    color: #29465c;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.portal-login-page .portal-auth-support > p {
    margin: 0;
}

.portal-login-page .portal-auth-support > p + p {
    margin-top: 6px;
}

.portal-login-page .portal-auth-support > p a {
    font-weight: 600;
}

@media (min-width: 761px) and (max-height: 610px) {
    .portal-login-page .portal-auth-support-heading {
        flex: 0 0 100%;
        margin-bottom: 1px;
    }

    .portal-login-page .portal-auth-support > p {
        margin: 0 !important;
    }
}