/* =============================================================
   auth-split.css - shared CoinHODL authentication design system
   Used by: Views/Shared/_AuthLayout.cshtml, and the three pages
   that opt into it - Views/Auth/Login.cshtml, ForgotPassword.cshtml,
   Register.cshtml. Everything here is token-driven (see tokens.css /
   theme-dark.css / theme-light.css) so light/dark theming and any
   future palette change stay centralized.

   Every other Views/Auth page (ChangePassword, ResetPassword,
   AccessDenied, ConfirmEmail, Register/ResendConfirmation*) keeps
   using the older .auth-card component in public.css under
   _PublicLayout - deliberately untouched so this redesign stays
   scoped to the three pages actually asked for.
   ============================================================= */

/* ---- Page shell ---- */
.auth-split-page {
    min-height: 100svh;
    background: var(--bg);
}

.auth-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100svh;
}

/* Tablet: keep the split layout, but a narrower branding column so the authentication form
   itself stays the priority (per spec - "reduce the branding panel width and prioritize the
   authentication form" rather than dropping the panel altogether like Mobile does below). */
@media (min-width: 768px) {
    .auth-split-grid {
        grid-template-columns: minmax(260px, 32%) 1fr;
    }
}

/* Desktop: full-width branding panel as shown in the reference. */
@media (min-width: 1200px) {
    .auth-split-grid {
        grid-template-columns: minmax(420px, 38%) 1fr;
    }
}

/* Fixed top-right theme toggle - available on every auth page regardless of viewport, since
   the split layout has no shared marketing navbar to host it in (see _AuthLayout.cshtml). */
.auth-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    appearance: none;
    font-size: .95rem;
}

.auth-theme-toggle:hover {
    background: var(--hover);
    color: var(--text);
}

.auth-theme-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---- Left branding panel ---- */
.auth-split-brand {
    position: relative;
    display: none;
    flex-direction: column;
    overflow: hidden;
    padding: 2rem 1.75rem 1.75rem;
    background:
        radial-gradient(720px 420px at 15% -10%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 60%),
        linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    border-right: 1px solid var(--line-soft);
    color: var(--text);
}

@media (min-width: 768px) {
    .auth-split-brand {
        display: flex;
    }
}

/* Desktop gets the full padding shown in the reference; tablet (above) stays comfortably
   narrower so the form column keeps the majority of the width. */
@media (min-width: 1200px) {
    .auth-split-brand {
        padding: 3rem 3rem 2.5rem;
    }
}

.auth-split-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}

.auth-split-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.15rem;
    font-family: var(--font-heading);
    color: var(--text);
}

.auth-split-logo .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.auth-split-eyebrow {
    margin-top: 2.75rem;
}

.auth-split-headline {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.1rem, 3.2vw, 2.9rem);
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--text);
    margin: .9rem 0 0;
}

.auth-split-headline .accent {
    display: block;
    color: var(--brand-strong);
}

.auth-split-copy {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 42ch;
    margin: 1rem 0 0;
}

.auth-split-features {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin: 2.5rem 0 0;
}

.auth-split-feature {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.auth-split-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-tint);
    color: var(--brand-strong);
    font-size: 1rem;
    flex-shrink: 0;
}

.auth-split-feature-title {
    font-weight: 700;
    font-size: .92rem;
    color: var(--text);
}

.auth-split-feature-desc {
    color: var(--muted);
    font-size: .85rem;
    margin-top: .1rem;
    line-height: 1.5;
}

/* Restrained decorative artwork - a faint performance-line + coin marks anchored to the
   bottom of the branding panel. Pure CSS/SVG (no image request), low-opacity, non-interactive,
   and hidden below the width where the panel itself has room to breathe (desktop only) so it
   never affects tablet/mobile responsiveness or load. */
.auth-split-decoration {
    display: none;
    position: relative;
    margin-top: 2.5rem;
    height: 96px;
    opacity: .55;
    pointer-events: none;
}

@media (min-width: 1200px) {
    .auth-split-decoration {
        display: block;
    }
}

.auth-split-decoration svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---- Right form column ---- */
.auth-split-form-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    background: var(--bg);
}

@media (min-width: 576px) {
    .auth-split-form-col {
        padding: 3rem 2rem;
    }
}

.auth-split-form-wrap {
    width: 100%;
    max-width: 440px;
}

.auth-split-form-wrap.auth-split-wide {
    max-width: 620px;
}

/* Compact CoinHODL branding shown above the form on every viewport (it's the form column's
   own header, not the left panel) - on mobile/tablet this is the only branding visible, since
   .auth-split-brand is hidden below 992px; it doubles as the "back to CoinHODL/home" link the
   split layout otherwise has no marketing navbar to host. */
.auth-split-card-logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.05rem;
    font-family: var(--font-heading);
    color: var(--text);
    margin-bottom: 1.5rem;
}

.auth-split-card-logo .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.auth-split-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2.25rem;
}

@media (max-width: 400px) {
    .auth-split-card {
        padding: 1.5rem;
    }
}

.auth-split-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-tint);
    color: var(--brand-strong);
    font-size: 1.25rem;
}

.auth-split-card h1 {
    font-size: 1.5rem;
    margin: 0 0 .35rem;
}

.auth-split-card .auth-split-sub {
    color: var(--muted);
    margin: 0;
}

/* ---- Form controls: icon-in-input ----
   Works alongside (not instead of) .password-field / [data-password-toggle] from public.css,
   which supplies the show/hide button and its JS behavior unchanged. */
.auth-input-icon {
    position: relative;
}

.auth-input-icon > .form-control {
    padding-left: 2.6rem;
}

.auth-input-icon-glyph {
    position: absolute;
    top: 50%;
    left: .9rem;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: .9rem;
}

.auth-split-card .form-control,
.auth-split-card .form-select {
    background: var(--field-bg);
    color: var(--field-text);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    padding: .68rem .9rem;
}

/* Higher specificity than the generic padding shorthand just above (which would otherwise
   win on source order alone, since it's an equal-specificity two-class selector declared
   after .auth-input-icon's own padding-left / after public.css's .password-field
   padding-right) - these need to reliably win so the leading icon and the trailing
   show/hide toggle both keep the clear space they need inside the input. */
.auth-split-card .auth-input-icon > .form-control {
    padding-left: 2.6rem;
}

.auth-split-card .password-field > .form-control {
    padding-right: 2.75rem;
}

.auth-split-card .form-control::placeholder {
    color: var(--field-placeholder);
}

.auth-split-card .form-control:focus,
.auth-split-card .form-select:focus {
    border-color: var(--field-focus-border);
    box-shadow: 0 0 0 .2rem var(--field-focus-ring);
}

.auth-split-card .form-label {
    color: var(--text);
    font-weight: 600;
    font-size: .88rem;
}

.auth-split-card .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.auth-split-hint {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .35rem;
}

.auth-split-links {
    text-align: center;
    color: var(--muted);
    font-size: .88rem;
    margin: 1.25rem 0 0;
}

.auth-split-links a {
    color: var(--brand-strong);
    font-weight: 600;
}

/* ---- Footer (below the card, inside the form column) ---- */
.auth-split-footer {
    width: 100%;
    max-width: 440px;
    margin-top: 2rem;
    text-align: center;
    color: var(--muted);
    font-size: .8rem;
}

.auth-split-form-wrap.auth-split-wide ~ .auth-split-footer {
    max-width: 620px;
}

.auth-split-footer-links {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: .5rem;
}

.auth-split-footer-links a {
    color: var(--muted);
}

.auth-split-footer-links a:hover {
    color: var(--brand-strong);
}

/* =============================================================
   Register: account-type cards
   ============================================================= */
.account-type-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .65rem;
}

.account-type-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    text-align: left;
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: .95rem 1rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.account-type-card:hover {
    border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
}

.account-type-card-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--muted);
    font-size: .95rem;
}

.account-type-card-name {
    font-weight: 700;
    font-size: .92rem;
    color: var(--text);
}

.account-type-card-desc {
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.4;
}

/* Selected state reads as a filled/tinted card (blue border + soft blue tint), consistent
   with this app's "buttons/selected states are always filled, never outline-only" rule. */
.account-type-card.is-active {
    border-color: var(--brand);
    background: color-mix(in oklab, var(--brand) 12%, var(--surface));
    box-shadow: 0 0 0 1px var(--brand);
}

.account-type-card.is-active .account-type-card-icon {
    background: var(--brand);
    color: #fff;
}

.account-type-group-subtitle {
    margin: .9rem 0 .75rem;
}

.account-type-panel[hidden] {
    display: none;
}

/* ---- Plan / pricing option rows ---- */
.account-type-option {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .85rem 1rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.account-type-option-input {
    cursor: pointer;
    width: 1.05em;
    height: 1.05em;
}

.account-type-option-body {
    display: block;
    min-width: 0;
}

.account-type-name {
    min-width: 0;
    color: var(--text);
}

.account-type-price {
    font-weight: 700;
    color: var(--brand-strong);
    white-space: nowrap;
    flex-shrink: 0;
}

.account-type-option.is-selected,
.account-type-option:has(.account-type-option-input:checked) {
    border-color: var(--brand);
    background-color: color-mix(in oklab, var(--brand) 12%, var(--surface-2));
}

@media (max-width: 480px) {
    .account-type-cards {
        grid-template-columns: 1fr;
    }
}