/* =============================================================================
   ISP Billing -- authentication pages (login, setup, forgot, reset, change)

   One stylesheet drives all five pages, so the class names below are a contract:
   renaming one changes four other pages too.

   Layout: a two-panel split on desktop. Below 992px the brand panel becomes a
   slim gradient header rather than disappearing, so the product still has a
   presence on a phone instead of a bare form floating on grey.

   Motion is deliberately small -- a staggered entrance, focus rings, and a
   slow drift on the background orbs. Everything is disabled wholesale under
   prefers-reduced-motion at the bottom of the file.
   ============================================================================= */

:root {
    /* Brand ramp. Indigo through to a warmer violet so the gradient has some
       travel in it rather than reading as one flat blue. */
    --auth-500: #4f46e5;
    --auth-600: #4338ca;
    --auth-700: #3730a3;
    --auth-900: #1e1b4b;
    --auth-accent: #8b5cf6;

    --auth-bg: #f5f6fb;
    --auth-card: #ffffff;

    --auth-ink: #14162b;
    --auth-body: #4a4f6a;
    --auth-muted: #8990ad;
    --auth-line: #e4e6f1;
    --auth-line-strong: #cdd1e4;

    --auth-danger: #d92d20;
    --auth-danger-bg: #fef3f2;
    --auth-danger-line: #fecdca;
    --auth-ok: #079455;
    --auth-ok-bg: #ecfdf3;
    --auth-ok-line: #abefc6;
    --auth-info: #175cd3;
    --auth-info-bg: #eff8ff;
    --auth-info-line: #b2ddff;

    --auth-radius: 16px;
    --auth-ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body.auth-body {
    background: var(--auth-bg);
    color: var(--auth-ink);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =============================================================================
   Brand panel
   ============================================================================= */

.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 120% at 0% 0%, var(--auth-accent) 0%, transparent 45%),
        linear-gradient(150deg, var(--auth-600) 0%, var(--auth-700) 45%, var(--auth-900) 100%);
    padding: 1.25rem 1.5rem;
}

/* Two slow-drifting orbs give the gradient depth without a background image.
   Pointer-events off so they can never intercept a click on the form. */
.auth-brand::before,
.auth-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.auth-brand::before {
    width: 34rem;
    height: 34rem;
    right: -12rem;
    top: -14rem;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, transparent 68%);
    animation: authDrift 22s var(--auth-ease) infinite alternate;
}

.auth-brand::after {
    width: 26rem;
    height: 26rem;
    left: -10rem;
    bottom: -12rem;
    background: radial-gradient(circle, rgba(139, 92, 246, .35) 0%, transparent 68%);
    animation: authDrift 28s var(--auth-ease) infinite alternate-reverse;
}

@keyframes authDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(2.5rem, 2rem, 0) scale(1.12); }
}

.auth-brand-mark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.auth-brand-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}

/* Hidden on mobile; the header band only needs the logo and product name. */
.auth-brand-copy,
.auth-brand-points,
.auth-brand-foot { display: none; }

/* =============================================================================
   Form panel
   ============================================================================= */

.auth-panel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem 2.5rem;
}

.auth-card {
    width: 100%;
    max-width: 27rem;
}

/* Compact logo above the card, used by the pages that have no brand panel at
   all (Setup, Forgot, Reset, Change password). On Login the brand panel already
   carries the mark, so the duplicate is suppressed via the sibling selector
   below rather than by hiding it unconditionally -- doing that would leave the
   other four pages with no logo anywhere. */
.auth-card-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--auth-ink);
    animation: authRise .5s var(--auth-ease) both;
}

.auth-card-mark .auth-brand-logo {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--auth-500) 0%, var(--auth-600) 100%);
    box-shadow: 0 6px 16px -4px rgba(79, 70, 229, .5);
}

/* Login has a brand panel, so it does not need the card mark as well. */
.auth-brand ~ .auth-panel .auth-card-mark { display: none; }

.auth-card-body {
    background: var(--auth-card);
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius);
    padding: 2.25rem 2rem;
    box-shadow:
        0 1px 2px rgba(20, 22, 43, .04),
        0 12px 32px -8px rgba(20, 22, 43, .10);
}

/* Staggered entrance. Children are nudged up and faded in on load; the delay
   ramp is set per child below so the card assembles rather than popping. */
.auth-card-body > * {
    animation: authRise .5s var(--auth-ease) both;
}

.auth-card-body > *:nth-child(1) { animation-delay: .04s; }
.auth-card-body > *:nth-child(2) { animation-delay: .08s; }
.auth-card-body > *:nth-child(3) { animation-delay: .12s; }
.auth-card-body > *:nth-child(4) { animation-delay: .16s; }
.auth-card-body > *:nth-child(5) { animation-delay: .20s; }
.auth-card-body > *:nth-child(6) { animation-delay: .24s; }
.auth-card-body > *:nth-child(7) { animation-delay: .28s; }
.auth-card-body > *:nth-child(8) { animation-delay: .32s; }

@keyframes authRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 .35rem;
    color: var(--auth-ink);
}

.auth-subtitle {
    color: var(--auth-muted);
    font-size: .9rem;
    margin: 0 0 1.75rem;
}

/* =============================================================================
   Fields
   ============================================================================= */

.auth-field { margin-bottom: 1.25rem; }

.auth-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--auth-body);
    margin-bottom: .45rem;
}

.auth-input-wrap { position: relative; }

/* Leading icon. Colour shifts to the brand when the field has focus, which is
   the cheapest possible affordance for "you are typing here". */
.auth-input-wrap > .bi:first-child {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--auth-muted);
    pointer-events: none;
    transition: color .18s var(--auth-ease);
    z-index: 1;
}

.auth-input-wrap:focus-within > .bi:first-child { color: var(--auth-500); }

.auth-input {
    width: 100%;
    padding: .8rem 1rem .8rem 2.75rem;
    font-size: .95rem;
    font-family: inherit;
    color: var(--auth-ink);
    background: #fcfcfe;
    border: 1.5px solid var(--auth-line-strong);
    border-radius: 10px;
    transition: border-color .18s var(--auth-ease),
                box-shadow .18s var(--auth-ease),
                background .18s var(--auth-ease);
}

.auth-input::placeholder { color: #b4b9cf; }

.auth-input:hover:not(:focus) { border-color: #b9bed6; }

.auth-input:focus {
    outline: 0;
    background: #fff;
    border-color: var(--auth-500);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .13);
}

.auth-input.is-invalid {
    border-color: var(--auth-danger);
    background: var(--auth-danger-bg);
}

.auth-input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(217, 45, 32, .13);
}

/* Password reveal */
.auth-input-wrap.has-reveal .auth-input { padding-right: 3rem; }

.auth-reveal {
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--auth-muted);
    cursor: pointer;
    transition: color .18s var(--auth-ease), background .18s var(--auth-ease);
    z-index: 2;
}

.auth-reveal:hover { color: var(--auth-ink); background: #f1f2f8; }

.auth-reveal:focus-visible {
    outline: 2px solid var(--auth-500);
    outline-offset: 1px;
}

/* =============================================================================
   Remember me / forgot row
   ============================================================================= */

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin: -.25rem 0 1.6rem;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .875rem;
    color: var(--auth-body);
    cursor: pointer;
    user-select: none;
}

.auth-check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--auth-500);
    cursor: pointer;
    margin: 0;
}

.auth-link {
    font-size: .875rem;
    font-weight: 600;
    color: var(--auth-500);
    text-decoration: none;
    transition: color .18s var(--auth-ease);
}

.auth-link:hover { color: var(--auth-700); text-decoration: underline; }

/* =============================================================================
   Submit
   ============================================================================= */

.auth-submit {
    position: relative;
    width: 100%;
    padding: .85rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(135deg, var(--auth-500) 0%, var(--auth-600) 100%);
    box-shadow: 0 1px 2px rgba(20, 22, 43, .10),
                0 8px 20px -6px rgba(79, 70, 229, .45);
    transition: transform .18s var(--auth-ease),
                box-shadow .18s var(--auth-ease),
                filter .18s var(--auth-ease);
}

.auth-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 2px 4px rgba(20, 22, 43, .10),
                0 12px 26px -6px rgba(79, 70, 229, .55);
}

.auth-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(20, 22, 43, .12);
}

.auth-submit:focus-visible {
    outline: 2px solid var(--auth-700);
    outline-offset: 2px;
}

.auth-submit:disabled {
    opacity: .7;
    cursor: progress;
    transform: none;
}

/* Sheen that sweeps across on hover. Purely decorative. */
.auth-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%,
                rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s var(--auth-ease);
}

.auth-submit:hover:not(:disabled)::after { transform: translateX(120%); }

/* =============================================================================
   Alerts
   ============================================================================= */

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem .9rem;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    font-size: .875rem;
    line-height: 1.45;
    animation: authShakeIn .4s var(--auth-ease) both;
}

.auth-alert .bi { flex: 0 0 auto; margin-top: .1rem; }

.auth-alert-error   { background: var(--auth-danger-bg); border: 1px solid var(--auth-danger-line); color: var(--auth-danger); }
.auth-alert-success { background: var(--auth-ok-bg);     border: 1px solid var(--auth-ok-line);     color: var(--auth-ok); }
.auth-alert-info    { background: var(--auth-info-bg);   border: 1px solid var(--auth-info-line);   color: var(--auth-info); }

/* A small horizontal nudge draws the eye without the melodrama of a full shake. */
@keyframes authShakeIn {
    0%   { opacity: 0; transform: translateX(-6px); }
    60%  { opacity: 1; transform: translateX(3px); }
    100% { opacity: 1; transform: none; }
}

.auth-field-error {
    color: var(--auth-danger);
    font-size: .8rem;
    margin-top: .4rem;
}

.auth-hint {
    color: var(--auth-muted);
    font-size: .8rem;
    margin-top: .4rem;
}

.auth-foot {
    text-align: center;
    margin: 1.5rem 0 0;
    font-size: .8rem;
    color: var(--auth-muted);
}

/* =============================================================================
   >= 992px : true two-column split
   ============================================================================= */

@media (min-width: 992px) {
    .auth-shell { flex-direction: row; }

    .auth-brand {
        flex: 1 1 48%;
        padding: 3.5rem 3rem;
    }

    .auth-brand-mark { font-size: 1.3rem; }

    .auth-brand-copy,
    .auth-brand-points,
    .auth-brand-foot { display: block; position: relative; z-index: 1; }

    .auth-brand-copy { max-width: 30rem; }

    .auth-brand-copy h1 {
        font-size: clamp(1.9rem, 2.4vw, 2.6rem);
        line-height: 1.16;
        letter-spacing: -.025em;
        font-weight: 700;
        margin: 0 0 .9rem;
    }

    .auth-brand-copy p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.65;
        color: rgba(255, 255, 255, .78);
    }

    .auth-brand-points {
        list-style: none;
        padding: 0;
        margin: 2rem 0 0;
    }

    .auth-brand-points li {
        display: flex;
        align-items: center;
        gap: .7rem;
        margin-bottom: .8rem;
        font-size: .95rem;
        color: rgba(255, 255, 255, .9);
        animation: authRise .55s var(--auth-ease) both;
    }

    .auth-brand-points li:nth-child(1) { animation-delay: .16s; }
    .auth-brand-points li:nth-child(2) { animation-delay: .26s; }
    .auth-brand-points li:nth-child(3) { animation-delay: .36s; }

    .auth-brand-points .bi {
        flex: 0 0 auto;
        width: 1.55rem;
        height: 1.55rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: .8rem;
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .2);
    }

    .auth-brand-foot { font-size: .8rem; color: rgba(255, 255, 255, .6); }

    .auth-panel {
        flex: 1 1 52%;
        padding: 3rem 2rem;
    }

    .auth-card-body { padding: 2.5rem 2.25rem; }
}

/* =============================================================================
   < 992px : brand becomes a header band
   ============================================================================= */

@media (max-width: 991.98px) {
    .auth-brand {
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        padding: 1.4rem 1.25rem;
    }

    .auth-brand-mark { justify-content: center; }

    /* The orbs are sized for a tall column; rein them in on a short band. */
    .auth-brand::before { width: 18rem; height: 18rem; right: -7rem; top: -10rem; }
    .auth-brand::after  { width: 14rem; height: 14rem; left: -6rem; bottom: -8rem; }

    .auth-panel { padding-top: 2rem; }
}

/* Very narrow phones: give the card the full width it can get. */
@media (max-width: 400px) {
    body.auth-body { font-size: 14.5px; }
    .auth-panel { padding: 1.5rem .9rem 2rem; }
    .auth-card-body { padding: 1.75rem 1.35rem; border-radius: 14px; }
    .auth-title { font-size: 1.35rem; }
    .auth-row { gap: .5rem; }
}

/* =============================================================================
   Accessibility
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .auth-brand::before,
    .auth-brand::after,
    .auth-card-body > *,
    .auth-brand-points li,
    .auth-alert {
        animation: none !important;
    }

    .auth-input,
    .auth-submit,
    .auth-reveal,
    .auth-link,
    .auth-submit::after,
    .auth-input-wrap > .bi:first-child {
        transition: none !important;
    }

    .auth-submit:hover:not(:disabled) { transform: none; }
}

/* Keyboard users get a visible ring everywhere, not just on the button. */
.auth-check input:focus-visible,
.auth-link:focus-visible {
    outline: 2px solid var(--auth-500);
    outline-offset: 2px;
    border-radius: 4px;
}