/* ══════════════════════════════════════════════════════════════════════════
   Auth pages — UltimateFunded website theme
   (login, register, forgot/reset password, confirmations, lockout, …)

   Linked by _LayoutNoNavbar.cshtml right after auth-modern.css, so it
   restyles every page on that layout and nothing else. It overrides only the
   canvas, card, primary button, logo and accent icons; inputs, labels,
   links, validation and social buttons keep auth-modern.css.

   All values come from ulimatefunding-web/assets/css/main.css; each block
   names its source rule.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page background — site hero ".hero-bg" + "::before" / "::after" ────
   Pure CSS on the site (no image or video). Carried over unchanged:
     • flat #05070c canvas (site --bg)
     • 1px grid in rgba(148,163,184,.12) (site --line) every 56px, opacity .55
     • green rgba(33,230,168,.22) + blue rgba(59,157,255,.18) radial glow,
       blue pool offset right, blur(20px)
   Adapted for a full screen instead of a ~380px hero band:
     • the glow keeps the site's 3:2 box and pool proportions but scales with
       the viewport (never below the site's 900px), so it spans every screen
     • its core sits in the upper third, framing the card
     • the grid mask is widened to cover the page, fading only at the edges */

/* Site body clips the oversized glow with overflow-x: hidden */
body:has(> .auth-modern) {
    background: #05070c;
    overflow-x: hidden;
}

/* Replace the shared auth artwork/gradients with the site's flat canvas */
.auth-modern {
    background-color: #05070c !important;
    background-image: none;
}

/* Grid — site .hero-bg::before, mask widened to the full viewport */
.auth-modern::before {
    content: "";
    position: fixed;
    inset: -1px;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 35%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 95% 90% at 50% 35%, #000 45%, transparent 100%);
    opacity: .55;
}

/* Glow — site .hero-bg::after. The site's pixel geometry (900×600 box, blue
   pool 600×400 at 300px 100px) is expressed as percentages of the box so it
   scales as one piece: 600/900 and 400/600 are both 66.667%, and the
   300px 100px offset places the pool flush right, vertically centred
   (100% 50%). */
.auth-modern::after {
    content: "";
    position: fixed;
    z-index: 0;
    pointer-events: none;
    /* 150vh keeps it wide enough to show past the card on portrait tablets/phones */
    width: max(900px, 125vw, 150vh);
    aspect-ratio: 3 / 2;
    left: 50%;
    top: 32vh;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(closest-side, rgba(33, 230, 168, 0.22), transparent 70%),
        radial-gradient(closest-side, rgba(59, 157, 255, 0.18), transparent 70%) 100% 50% / 66.667% 66.667% no-repeat;
    filter: blur(20px);
}

/* ── Card — site ".split-card--hi" (highlighted payout card) ────────────
   Faint accent tint at the top fading into --surface (#0c111a) by 60%,
   accent border at .45. The drop shadow is kept for separation from the
   page; the radius stays the auth card's 24px. Replaces the blue glass,
   blue rim glow and cyan top streak. auth-modern.css sets these with
   !important, so the overrides need it too. */
.auth-modern .card {
    background-color: #0c111a !important;
    background-image: linear-gradient(180deg, rgba(33, 230, 168, 0.08), #0c111a 60%) !important;
    border: 1px solid rgba(33, 230, 168, 0.45) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
}

.auth-modern .card::after {
    display: none;
}

/* ── Logo — site header ".brand" (UltimateFunded) ───────────────────────
   Rendered by the layout's card <header>. The previous logo block was 123px
   (35px above a 60px logo box, 28px below); the 34px mark is centred in
   that same box (+13px each side), so everything below keeps its position. */
.auth-modern .card-body > header {
    padding-top: 48px;
}

.auth-modern .uf-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 41px;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #e9eef6;
    text-decoration: none;
}

.auth-modern .uf-brand:hover {
    color: #e9eef6;
}

.auth-modern .uf-brand img {
    display: block;
    width: 34px;
    height: 34px;
    flex: none;
}

.auth-modern .uf-brand b {
    font-weight: 700;
    color: #21e6a8;
}

@media (max-width: 420px) {
    .auth-modern .uf-brand {
        font-size: 17px;
    }
}

/* ── Primary button — site ".btn.btn--primary" ("Get Funded") ───────────
   Every page's main action: Sign in, Sign up, Send Reset Link, Reset
   Password, Continue, and the "Back to Login" / "Login" link-buttons.
   Height, radius, weight, size, gradient, ink colour, glow and hover lift
   are the site's values. Every state is restated because auth-modern.css
   gives :hover/:focus its own blue gradient. */
.auth-modern .btn-primary {
    height: 48px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.005em;
    color: #03150f;
    background: linear-gradient(120deg, #21e6a8 0%, #3b9dff 100%);
    box-shadow: 0 10px 30px -10px rgba(33, 230, 168, 0.6);
    transition: transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.auth-modern .btn-primary:focus {
    color: #03150f;
    background: linear-gradient(120deg, #21e6a8 0%, #3b9dff 100%);
    box-shadow: 0 10px 30px -10px rgba(33, 230, 168, 0.6);
    transform: none;
}

.auth-modern .btn-primary:hover {
    transform: translateY(-1px);
    color: #03150f;
    background: linear-gradient(120deg, #21e6a8 0%, #3b9dff 100%);
    box-shadow: 0 16px 40px -12px rgba(33, 230, 168, 0.75);
}

/* Keyboard focus: the site's hover glow plus a visible ring */
.auth-modern .btn-primary:focus-visible {
    color: #03150f;
    background: linear-gradient(120deg, #21e6a8 0%, #3b9dff 100%);
    box-shadow: 0 0 0 3px rgba(33, 230, 168, 0.35), 0 16px 40px -12px rgba(33, 230, 168, 0.75);
    outline: none;
}

.auth-modern .btn-primary:active {
    transform: translateY(0);
    color: #03150f;
    background: linear-gradient(120deg, #21e6a8 0%, #3b9dff 100%);
}

/* While submitting, the layout disables the button and swaps in a spinner */
.auth-modern .btn-primary:disabled {
    color: #03150f;
    background: linear-gradient(120deg, #21e6a8 0%, #3b9dff 100%);
    opacity: .75;
}

/* ── Accent icons — confirmation pages' round badges ────────────────────
   "Check your email", "Email confirmed", "Password reset" etc. use the
   CRM's cyan (.themeTextColor, !important in site.css) on a primary-blue
   tint. Inside the auth pages they take the site's accent (--accent,
   --accent-soft) to match the logo and button. */
.auth-modern .themeTextColor {
    color: #21e6a8 !important;
}

.auth-modern .bg-primary.bg-opacity-10 {
    background-color: rgba(33, 230, 168, 0.12) !important;
}

/* ── "Create an account" (Login) / "Sign in instead" (Register) ─────────
   The switch-page line under the form: the whole sentence white, the link
   part underlined; accent on hover. */
.auth-modern p.text-center:has(> a) {
    color: #ffffff;
}

.auth-modern p.text-center > a {
    color: #ffffff;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.auth-modern p.text-center > a:hover,
.auth-modern p.text-center > a:focus-visible {
    color: #21e6a8;
}

/* Confirmation badges (Forgot password / Register / Reset password
   confirmation). .themeTextColor is font-weight:600, and boxicons only
   ships a regular weight, so the browser faked a bold that smeared the
   glyph into a doubled outline. Keep the icon at its real weight and give
   the round badge the site's accent ring + soft glow. */
.auth-modern .rounded-circle.bg-primary.bg-opacity-10 {
    border: 1px solid rgba(33, 230, 168, 0.35);
    box-shadow: 0 0 0 6px rgba(33, 230, 168, 0.06), 0 10px 30px -12px rgba(33, 230, 168, 0.45);
}

.auth-modern .rounded-circle.bg-primary.bg-opacity-10 > i.bx {
    font-weight: normal !important;
    font-synthesis: none;
    line-height: 1;
    color: #21e6a8 !important;
}