@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

/* Sign-in, forgot password and reset password (Views/Shared/_AuthLayout).
   Brand panel on the left, form on the right; one column on small screens. */

:root {
    --auth-ink: #0f2b3d;
    --auth-ink-2: #43596a;
    --auth-muted: #6b8193;
    --auth-line: #d7e2ea;
    --auth-field: #f6f9fb;
    --auth-brand: #0089cf;
    --auth-brand-2: #00a4e0;
    --auth-cyan: #20c4f4;
    --auth-error: #c62828;
    --auth-ok: #15803d;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

.auth-body {
    margin: 0;
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--auth-ink);
    background: #eef4f8;
    -webkit-font-smoothing: antialiased;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr);
}

/* ── Brand panel ───────────────────────────────────────────── */
.auth-brand {
    position: relative;
    overflow: hidden;
    color: #e8f6fd;
    background:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgba(32,196,244,.28), transparent 70%),
        radial-gradient(ellipse 55% 45% at 90% 95%, rgba(0,137,207,.35), transparent 70%),
        linear-gradient(160deg, #06263a 0%, #083a57 45%, #0a4f73 100%);
}

/* Faint dot grid for texture. */
.auth-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.2px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35));
    pointer-events: none;
}

.auth-butterfly {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Mark, pitch and partners as one block in the middle of the panel.
       Pinning the mark to the top and the partners to the bottom left
       large empty bands on tall screens, worst with no partners. */
    justify-content: center;
    gap: clamp(36px, 6vh, 64px);
    padding: 48px clamp(28px, 5vw, 72px);
}

.auth-mark { display: flex; align-items: center; gap: 16px; }
.auth-mark img { width: 54px; height: 54px; border-radius: 12px; }
.auth-mark-name { font-weight: 800; font-size: 25px; line-height: 1.15; letter-spacing: .1px; color: #fff; }
.auth-mark-sub { font-size: 15px; color: rgba(232,246,253,.75); margin-top: 3px; }

.auth-pitch { margin: 0; max-width: 500px; padding: 0; }
.auth-pitch h2 {
    margin: 0 0 16px;
    font-size: clamp(30px, 3.2vw, 42px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #fff;
}
.auth-pitch p {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(232,246,253,.82);
}
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth-points li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(232,246,253,.88); }
.auth-points b { color: #fff; font-weight: 700; }
.auth-point-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(32,196,244,.14);
    box-shadow: inset 0 0 0 1px rgba(32,196,244,.35);
}
.auth-point-icon svg { width: 17px; height: 17px; fill: none; stroke: #5fd8fa; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Partners ──────────────────────────────────────────────── */
.auth-partners-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.auth-partner-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* Logos come in any colours, so each sits on a white tile. */
.auth-partner {
    width: 128px;
    height: 56px;
    padding: 9px 12px;
    border-radius: 12px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.14);
    transition: transform .15s ease, box-shadow .15s ease;
}
a.auth-partner:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.auth-partner img { max-width: 100%; max-height: 100%; object-fit: contain; }

.auth-partners-brand .auth-partners-label { color: rgba(232,246,253,.65); }
.auth-partners-main { display: none; }

/* ── Form side ─────────────────────────────────────────────── */
.auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 24px;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(32,196,244,.10), transparent 70%),
        #eef4f8;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid #e3ebf1;
    border-radius: 18px;
    padding: 34px 34px 30px;
    box-shadow: 0 1px 2px rgba(15,43,61,.04), 0 18px 48px rgba(15,43,61,.08);
}

.auth-logo { display: block; width: 150px; height: auto; margin-bottom: 26px; }

.auth-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.3px; color: var(--auth-ink); }
.auth-lead { margin: 6px 0 24px; font-size: 14.5px; line-height: 1.55; color: var(--auth-muted); }

.auth-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: 18px;
    border: 1px solid;
}
.auth-alert svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-alert-error { color: var(--auth-error); background: #fdf1f1; border-color: #f3c9c9; }
.auth-alert-ok { color: var(--auth-ok); background: #effaf3; border-color: #bfe6cc; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }

.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.auth-label { font-size: 13.5px; font-weight: 700; color: var(--auth-ink-2); }
.auth-link { font-size: 13px; font-weight: 600; color: var(--auth-brand); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-input-wrap { position: relative; }
.auth-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: #8aa0b0;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border-radius: 11px;
    border: 1px solid var(--auth-line);
    background: var(--auth-field);
    color: var(--auth-ink);
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-input::placeholder { color: #a3b3bf; }
.auth-input:hover { border-color: #c3d2dc; }
.auth-input:focus {
    background: #fff;
    border-color: var(--auth-brand);
    box-shadow: 0 0 0 4px rgba(0,137,207,.14);
}
.auth-input-wrap .auth-input.has-toggle { padding-right: 48px; }

.auth-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b8193;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-toggle:hover { background: #eaf1f6; color: var(--auth-ink); }
.auth-toggle:focus-visible { outline: 2px solid var(--auth-brand); outline-offset: 1px; }
.auth-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.auth-hint { font-size: 12.5px; min-height: 0; color: var(--auth-muted); }
.auth-hint-warn { color: #b45309; font-weight: 600; }
.auth-hint[hidden] { display: none; }

.auth-btn {
    position: relative;
    height: 50px;
    margin-top: 6px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--auth-brand) 0%, var(--auth-brand-2) 100%);
    box-shadow: 0 8px 20px rgba(0,137,207,.28);
    transition: filter .15s ease, box-shadow .15s ease, transform .1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}
.auth-btn:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(0,137,207,.36); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus-visible { outline: 3px solid rgba(0,137,207,.45); outline-offset: 2px; }
.auth-btn[disabled] { cursor: progress; filter: saturate(.8); }
.auth-spinner {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    animation: auth-spin .7s linear infinite;
}
.auth-spinner[hidden] { display: none; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-back { margin-top: 20px; text-align: center; }

.auth-footer {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--auth-muted);
}
.auth-secure { display: inline-flex; align-items: center; gap: 5px; }
.auth-secure svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Small screens: one column, brand as a compact header ──── */
.auth-card-mark, .auth-bottom-logo { display: none; }

/* ── Phones and tablets: one dark screen ──────────────────────
   Brand mark at the top, a dark card with the triangle mark, the
   white wordmark below. The brand panel becomes the page background
   (gradient, dot grid, butterfly) behind everything. */
@media (max-width: 940px) {
    .auth-body { background: #06263a; }
    .auth-shell { display: block; position: relative; min-height: 100vh; }

    .auth-brand { position: absolute; inset: 0; z-index: 0; }
    .auth-brand-inner { min-height: 0; height: auto; padding: 30px 20px 0; align-items: center; justify-content: flex-start; gap: 0; }
    .auth-butterfly { opacity: .32; }
    .auth-mark { justify-content: center; }
    .auth-mark { gap: 12px; }
    .auth-mark img { width: 44px; height: 44px; border-radius: 10px; }
    .auth-mark-name { font-size: 22px; }
    .auth-mark-sub { display: none; }
    .auth-pitch, .auth-partners-brand { display: none; }

    .auth-main {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        justify-content: center;
        padding: 112px 18px 28px;
        background: transparent;
    }

    .auth-card {
        max-width: 400px;
        padding: 30px 26px 28px;
        text-align: left;
        color: #e8f6fd;
        background: rgba(10, 30, 46, .78);
        border: 1px solid rgba(255, 255, 255, .09);
        box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .auth-logo { display: none; }
    .auth-card-mark { display: block; width: 52px; height: 52px; margin: 0 auto 16px; }
    .auth-title { color: #fff; text-align: center; font-size: 25px; }
    .auth-lead { color: rgba(232, 246, 253, .72); text-align: center; margin: 6px 0 22px; font-size: 14px; }
    .auth-label { color: #cfe3ef; }
    .auth-link { color: #5fd8fa; }

    .auth-input {
        background: rgba(255, 255, 255, .06);
        border-color: rgba(255, 255, 255, .12);
        color: #fff;
    }
    .auth-input::placeholder { color: rgba(232, 246, 253, .45); }
    .auth-input:hover { border-color: rgba(255, 255, 255, .22); }
    .auth-input:focus { background: rgba(255, 255, 255, .09); border-color: #20c4f4; box-shadow: 0 0 0 4px rgba(32, 196, 244, .18); }
    /* Keep browser autofill from painting the field white. */
    .auth-input:-webkit-autofill {
        -webkit-text-fill-color: #fff;
        -webkit-box-shadow: 0 0 0 40px #12324a inset;
        caret-color: #fff;
    }
    .auth-input-icon { stroke: rgba(232, 246, 253, .55); }
    .auth-toggle { color: rgba(232, 246, 253, .7); }
    .auth-toggle:hover { background: rgba(255, 255, 255, .08); color: #fff; }
    .auth-hint { color: rgba(232, 246, 253, .65); }
    .auth-hint-warn { color: #fbbf24; }

    .auth-btn { box-shadow: 0 10px 26px rgba(0, 137, 207, .35); }
    .auth-alert-error { color: #fecaca; background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .35); }
    .auth-alert-ok { color: #bbf7d0; background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .35); }

    .auth-partners-main { display: block; width: 100%; max-width: 400px; margin-top: 26px; }
    .auth-partners-main .auth-partners-label { color: rgba(232, 246, 253, .6); text-align: center; }
    .auth-partners-main .auth-partner-row { justify-content: center; }

    .auth-bottom-logo { display: block; width: 190px; height: auto; margin: 34px auto 0; }
    .auth-footer { color: rgba(232, 246, 253, .55); margin-top: 18px; }
}

@media (max-width: 420px) {
    .auth-main { padding: 106px 14px 24px; }
    .auth-card { padding: 26px 20px 24px; border-radius: 16px; }
    .auth-title { font-size: 23px; }
    .auth-partner { width: 112px; height: 50px; }
    .auth-bottom-logo { width: 170px; }
}