/* =====================================================================
   FASTLOAN-PH — Bright high-visibility customer auth theme (login +
   register). Tuned for older customers: light colourful background,
   dark near-black text, large type, thick borders and big touch targets.
   Loaded after user.css on the auth pages only, so it wins over the
   older auth rules without touching the rest of the app.
   ===================================================================== */

/* The auth screens have no bottom nav, so drop the shell padding and
   swap the dark body wash for a light one. */
body.user-body.is-auth-page {
    background: #eef6ff;
}

body.user-body.is-auth-page::before,
body.user-body.is-auth-page::after {
    display: none;
}

body.user-body.is-auth-page .user-shell {
    padding-bottom: 0;
}

.auth-page.register-auth-page,
.auth-page.login-auth-page {
    /* Ink colours: all tested against the light card for strong contrast. */
    --fl-ink: #10233d;
    --fl-ink-soft: #274568;
    --fl-ink-muted: #3c5b80;
    --fl-line: rgba(22, 73, 132, .26);
    --fl-line-strong: #1d63b8;
    --fl-card: #ffffff;
    --fl-card-soft: #f3f9ff;

    /* Bright accent family. */
    --fl-accent: #0b7a52;
    --fl-accent-deep: #065f42;
    --fl-accent-bright: #12a86f;
    --fl-gold: #a76a00;
    --fl-blue: #1057b8;
    --fl-violet: #6b34c9;
    --fl-rose: #c62a52;

    /* The two gradients and the base size below are overridden per-site by
       the super administrator's theme editor (see auth_theme_style_tag()). */
    --fl-auth-bg: linear-gradient(168deg, #f4fbff 0%, #eaf4ff 45%, #fff6e8 100%);
    --fl-auth-btn: linear-gradient(120deg, #12a86f 0%, #0b7a52 55%, #065f42 100%);
    --fl-auth-scale: 17px;

    position: relative;
    isolation: isolate;
    min-height: 100vh;
    padding: 34px 16px 48px;
    color: var(--fl-ink);
    font-size: var(--fl-auth-scale);
    background: var(--fl-auth-bg);
}

/* Coloured glows layered over the configured background gradient. They pick
   up the palette colours, so recolouring the theme recolours the glow. */
.auth-page.register-auth-page > .register-auth-shell,
.auth-page.login-auth-page > .register-auth-shell {
    position: relative;
    z-index: 1;
}

@supports (background: color-mix(in srgb, red 30%, transparent)) {
    .auth-page.register-auth-page,
    .auth-page.login-auth-page {
        background:
            radial-gradient(46rem 34rem at 10% -10%, color-mix(in srgb, var(--fl-accent-bright) 30%, transparent), transparent 62%),
            radial-gradient(42rem 34rem at 94% 2%, color-mix(in srgb, var(--fl-blue) 30%, transparent), transparent 62%),
            radial-gradient(40rem 32rem at 88% 96%, color-mix(in srgb, var(--fl-violet) 22%, transparent), transparent 64%),
            radial-gradient(52rem 40rem at 46% 118%, color-mix(in srgb, var(--fl-gold) 26%, transparent), transparent 64%),
            var(--fl-auth-bg);
    }
}

/* Soft colour bands for depth — kept faint so text stays readable. */
.auth-page.register-auth-page::before,
.auth-page.login-auth-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(16, 87, 184, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 87, 184, .05) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 28%, #000 30%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 28%, #000 30%, transparent 100%);
}

/* Rainbow band across the very top of the page. */
.auth-page.register-auth-page::after,
.auth-page.login-auth-page::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--fl-accent-bright) 0%,
        var(--fl-blue) 34%,
        var(--fl-violet) 62%,
        var(--fl-gold) 100%);
}

.register-auth-shell {
    gap: 22px;
    animation: flAuthRise .6s cubic-bezier(.2, .8, .2, 1) both;
}

.login-auth-shell {
    width: min(620px, 100%);
}

@keyframes flAuthRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Brand block ---------- */
.register-brand-block {
    padding-top: 4px;
}

/* Logos vary: some are square emblems, some are wide wordmarks. Fix the
   height and let the width follow the artwork so nothing is squeezed. */
.register-brand-mark {
    display: block;
    width: auto;
    height: 104px;
    max-width: min(280px, 82%);
    padding: 10px 18px;
    border-radius: 22px;
    background: #ffffff;
    border: 3px solid var(--fl-accent-bright);
    box-shadow: 0 14px 30px rgba(16, 87, 184, .20);
    object-fit: contain;
}

.auth-brand-kicker {
    color: #ffffff;
    background: var(--fl-blue);
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    letter-spacing: .18em;
    font-size: 13px;
    font-weight: 800;
}

.register-brand-wordmark {
    letter-spacing: -.02em;
    font-size: clamp(30px, 8vw, 42px);
}

/* Let the admin-configured portal colour show through at full strength
   instead of the old low-contrast gradient fill. */
.register-brand-wordmark span,
.register-brand-wordmark span:first-child,
.register-brand-wordmark span:last-child {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    font-weight: 900;
}

.register-accreditation-row {
    gap: 12px;
}

.register-accreditation-item {
    padding: 9px 16px;
    border-radius: 999px;
    background: #e3f7ee;
    border: 2px solid var(--fl-accent);
    color: #064d34;
    font-size: 14.5px;
    font-weight: 800;
}

.register-accreditation-item.is-alt {
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff2d9;
    border: 2px solid var(--fl-gold);
    color: #7a4c00;
    font-size: 14.5px;
    font-weight: 800;
}

.register-accreditation-item svg { color: var(--fl-accent); }
.register-accreditation-item.is-alt svg { color: var(--fl-gold); }

.register-brand-subtitle {
    margin-top: 16px;
    color: var(--fl-ink-soft);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
}

/* ---------- Card ---------- */
.register-card {
    position: relative;
    border-radius: 24px;
    padding: 28px 24px;
    background: var(--fl-card);
    border: 3px solid var(--fl-blue);
    box-shadow: 0 22px 50px rgba(16, 61, 122, .18);
    overflow: hidden;
}

/* Thick colour bar across the top of the card. */
.register-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
    opacity: 1;
    background: linear-gradient(90deg,
        var(--fl-accent-bright) 0%,
        var(--fl-blue) 45%,
        var(--fl-violet) 72%,
        var(--fl-gold) 100%);
}

.login-card { padding-top: 30px; }

.register-alert,
.register-card .alert,
.register-card .alert-error {
    border-radius: 14px;
    background: #ffe7ec;
    border: 3px solid var(--fl-rose);
    color: #8a0f30;
    font-size: 16px;
    font-weight: 800;
}

.login-note {
    padding: 16px 18px;
    border-radius: 16px;
    background: #e8f3ff;
    border: 2px solid rgba(16, 87, 184, .42);
    color: #1b3a60;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.7;
}

/* ---------- Fields ---------- */
.register-label {
    color: var(--fl-ink);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.register-label-icon { color: var(--fl-accent); }
.register-label-icon.is-danger { color: var(--fl-violet); }

.register-form input,
.register-form select {
    min-height: 62px;
    border-radius: 16px;
    background: var(--fl-card-soft);
    border: 3px solid rgba(22, 73, 132, .38);
    color: #0c1f36;
    font-size: 18px;
    font-weight: 700;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.register-form input::placeholder { color: #6a7f99; font-weight: 600; }

.register-form input:focus,
.register-form select:focus {
    background: #ffffff;
    border-color: var(--fl-accent);
    box-shadow: 0 0 0 5px rgba(18, 168, 111, .26);
}

.register-form select option {
    background: #ffffff;
    color: var(--fl-ink);
}

.register-form input:-webkit-autofill,
.register-form input:-webkit-autofill:hover,
.register-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0c1f36;
    -webkit-box-shadow: 0 0 0 1000px #f3f9ff inset;
    caret-color: #0c1f36;
}

/* ---------- Password reveal toggle ---------- */
.auth-input-wrap {
    position: relative;
    display: block;
}

.auth-input-wrap input {
    width: 100%;
    padding-right: 64px;
}

.auth-toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid rgba(16, 87, 184, .30);
    border-radius: 12px;
    background: #e8f3ff;
    color: var(--fl-blue);
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.auth-toggle-password:hover,
.auth-toggle-password:focus-visible {
    color: #ffffff;
    background: var(--fl-blue);
    border-color: var(--fl-blue);
    outline: none;
}

.auth-toggle-password svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-toggle-password .auth-eye-off { display: none; }
.auth-toggle-password[aria-pressed="true"] .auth-eye-on { display: none; }
.auth-toggle-password[aria-pressed="true"] .auth-eye-off { display: block; }

.register-help { color: #2d4f75; font-size: 14.5px; font-weight: 600; }
.register-help-icon { color: var(--fl-accent); }

.register-terms-box {
    background: #fff6e8;
    border: 2px solid var(--fl-gold);
    color: #5d3c00;
}

.register-terms-box a { color: var(--fl-blue); font-weight: 800; }

.register-terms-box input {
    accent-color: var(--fl-accent);
    background: #ffffff;
}

/* ---------- Submit ---------- */
.register-submit {
    position: relative;
    overflow: hidden;
    min-height: 66px;
    border: 0;
    border-radius: 16px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .02em;
    background: var(--fl-auth-btn);
    box-shadow: 0 14px 28px rgba(11, 122, 82, .34);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.register-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 20px 36px rgba(11, 122, 82, .42);
}

.register-submit:active { transform: translateY(0); }

.register-submit:focus-visible {
    outline: 4px solid var(--fl-blue);
    outline-offset: 3px;
}

/* Sheen sweep on hover. */
.register-submit::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    transition: left .55s ease, opacity .25s ease;
}

.register-submit:hover::after { left: 120%; opacity: 1; }

.register-submit.is-busy,
.register-submit:disabled {
    opacity: .7;
    cursor: progress;
    transform: none;
    filter: saturate(.75);
}

/* ---------- Footer / support ---------- */
.register-auth-foot,
.login-auth-foot-inline {
    background: #ffffff;
    border: 3px solid rgba(16, 87, 184, .34);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(16, 61, 122, .10);
}

.register-auth-foot p { color: var(--fl-ink-soft); font-size: 16.5px; font-weight: 600; }

.register-auth-foot a {
    color: var(--fl-blue);
    font-weight: 900;
    border-bottom: 3px solid rgba(16, 87, 184, .5);
}

.register-auth-foot a:hover { color: var(--fl-violet); border-bottom-color: var(--fl-violet); }

.login-support-card {
    background: #ffffff;
    border: 3px solid rgba(16, 87, 184, .24);
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(16, 61, 122, .12);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

/* Give each support card its own colour so they are easy to tell apart. */
.login-support-card:nth-child(1) { border-color: var(--fl-accent); background: #f2fbf7; }
.login-support-card:nth-child(2) { border-color: var(--fl-blue); background: #f1f7ff; }
.login-support-card:nth-child(3) { border-color: var(--fl-violet); background: #f7f2ff; }

.login-support-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(16, 61, 122, .18);
}

.login-support-icon {
    color: #ffffff;
    background: var(--fl-accent);
    border: 0;
}

.login-support-card:nth-child(2) .login-support-icon { background: var(--fl-blue); }
.login-support-card:nth-child(3) .login-support-icon { background: var(--fl-violet); }

.login-support-card h2 { color: #10233d; font-size: 17px; font-weight: 800; }
.login-support-card p { color: #33506f; font-size: 14.5px; font-weight: 500; line-height: 1.6; }

.register-security-line,
.login-security-line {
    color: #064d34;
    background: #e3f7ee;
    border: 2px solid var(--fl-accent);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.register-security-line .register-security-icon,
.login-security-line .register-security-icon { color: var(--fl-accent); }

.register-bottom-note { color: #33506f; font-size: 15px; font-weight: 600; }

@media (max-width: 560px) {
    .auth-page.register-auth-page,
    .auth-page.login-auth-page {
        padding: 22px 12px 32px;
    }

    .register-card { padding: 22px 16px; border-radius: 22px; }
    .register-brand-mark { width: auto; height: 84px; max-width: 78%; padding: 8px 14px; border-radius: 18px; }
    .login-support-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .register-auth-shell { animation: none; }
    .register-submit:hover { transform: none; }
    .login-support-card:hover { transform: none; }
}