/* ==========================================================================
   Auth pages (login, signup, password recovery) — two-pane shell.
   Markup: Components/Shared/Partial/AuthShell.razor
   Global on purpose: static-SSR pages use MudStatic* internals that scoped
   CSS can't reach.
   ========================================================================== */

.lg {
    --lg-accent: var(--mud-palette-primary, #1E3A70);
    --lg-ink: #1d1f23;
    --lg-ink-2: #5b616b;
    --lg-ink-3: #8a9099;
    --lg-line: var(--mud-palette-lines-default, rgba(0,0,0,.12));
    --lg-surface: var(--mud-palette-surface, #fff);
    --lg-soft: #f5f5f6;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    width: 100%;
    min-height: 100vh;
    background: var(--lg-surface);
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.lg.lg-dark {
    --lg-ink: #ececee;
    --lg-ink-2: #b3b7bf;
    --lg-ink-3: #868b94;
    --lg-soft: rgba(255,255,255,.05);
}

/* ── Brand pane ── */
.lg-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px clamp(32px, 5vw, 64px);
    color: #fff;
    background:
        radial-gradient(1200px 500px at 110% -10%, rgba(255,255,255,.14), transparent 60%),
        radial-gradient(800px 400px at -20% 110%, rgba(0,0,0,.25), transparent 60%),
        linear-gradient(155deg, color-mix(in srgb, var(--lg-accent) 92%, #fff) 0%, var(--lg-accent) 45%, color-mix(in srgb, var(--lg-accent) 55%, #000) 100%);
}
/* Dark mode: the dark-palette primary is light, so deepen the brand pane for contrast */
.lg.lg-dark .lg-brand {
    background:
        radial-gradient(1200px 500px at 110% -10%, rgba(255,255,255,.08), transparent 60%),
        radial-gradient(800px 400px at -20% 110%, rgba(0,0,0,.35), transparent 60%),
        linear-gradient(155deg, color-mix(in srgb, var(--lg-accent) 45%, #0b1220) 0%, color-mix(in srgb, var(--lg-accent) 30%, #0b1220) 55%, #0b1220 100%);
}
.lg-brand::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%);
    pointer-events: none;
}
.lg-brand > * { position: relative; }
.lg-brand-top { display: flex; align-items: center; gap: 12px; }
.lg-logo {
    display: inline-flex; align-items: center;
    background: #fff; border-radius: 10px; padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.lg-logo img { max-height: 32px; max-width: 160px; display: block; }
.lg-portal { font-weight: 600; font-size: .95rem; opacity: .92; }

.lg-brand-mid { margin-top: auto; }
.lg-brand h1 {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 700;
    margin: 0 0 14px;
    color: #fff;
}
.lg-brand-lede { font-size: 1.05rem; line-height: 1.55; max-width: 440px; margin: 0 0 28px; color: rgba(255,255,255,.85); }

.lg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 440px; }
.lg-points li { display: flex; gap: 14px; align-items: flex-start; transition: opacity .2s; }
.lg-point-icon {
    flex: none; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
}
.lg-points strong { display: block; font-size: .95rem; font-weight: 600; }
.lg-points span { display: block; font-size: .85rem; color: rgba(255,255,255,.75); }

/* Points used as wizard progress */
.lg-points-progress li.is-next { opacity: .55; }
.lg-points-progress li.is-active .lg-point-icon {
    background: #fff;
    color: var(--lg-accent);
    border-color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.lg-points-progress li.is-done .lg-point-icon { background: rgba(255,255,255,.24); }

.lg-preview {
    margin-top: auto;
    max-width: 460px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    transform: perspective(900px) rotateX(6deg);
    transform-origin: bottom;
}
.lg-prev-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.lg-prev-card { background: rgba(255,255,255,.92); border-radius: 10px; padding: 10px; }
.lg-prev-card i { display: block; height: 6px; width: 55%; border-radius: 3px; background: #d9dbe0; margin-bottom: 8px; }
.lg-prev-card b { display: block; height: 12px; width: 75%; border-radius: 4px; background: #2a2d33; }
.lg-prev-accent b { background: var(--lg-accent); }
.lg-prev-chart {
    display: flex; align-items: flex-end; gap: 6px;
    height: 84px; padding: 10px; border-radius: 10px;
    background: rgba(255,255,255,.92);
}
.lg-prev-chart span { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--lg-accent) 55%, #fff); }
.lg-prev-chart span:last-child { background: var(--lg-accent); }

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

/* ── Form pane ── */
.lg-form-pane {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 24px;
    background: var(--lg-surface);
    color: var(--lg-ink);
}
.lg-form { width: 100%; max-width: 400px; }
.lg-mobile-logo { display: none; max-height: 36px; margin-bottom: 20px; }
.lg-head { margin-bottom: 24px; }
.lg-head h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; color: var(--lg-ink); }
.lg-head p { margin: 0; color: var(--lg-ink-2); font-size: .95rem; }
.lg-head p strong { color: var(--lg-ink); font-weight: 600; }

.lg-label { display: block; font-size: .85rem; font-weight: 600; color: var(--lg-ink); margin-bottom: 6px; }
.lg-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.lg-link { font-size: .82rem; font-weight: 600; color: var(--lg-accent) !important; text-decoration: none; }
.lg-link:hover { text-decoration: underline; }

.lg-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lg-row-2 > * { min-width: 0; }

.lg .lg-field .mud-input-outlined-border { border-radius: 10px; }
.lg .lg-field .mud-input { color: var(--lg-ink); }
.lg .lg-field .mud-input-adornment-icon { color: var(--lg-ink-3); }
.lg .lg-field .mud-input-control-helper-container { min-height: 0; }
.lg .lg-remember .mud-typography { color: var(--lg-ink-2); font-size: .875rem; }
.lg .validation-message, .lg .validation-errors { color: var(--mud-palette-error, #b00020); font-size: .8rem; }
.lg .validation-errors { padding-left: 18px; margin: 0 0 12px; }
.lg .mud-alert { border-radius: 10px; margin-bottom: 16px; }

/* Primary submit button (MudButton / MudStaticButton / <a>) */
.lg .login-submit-btn,
.lg .lg-btn-primary {
    height: 46px; border-radius: 10px;
    text-transform: none; font-weight: 600; font-size: 1rem; letter-spacing: 0;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--lg-accent) 30%, transparent);
}
.lg .lg-btn-primary {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    background: var(--lg-accent);
    color: var(--mud-palette-primary-text, #fff) !important;
    text-decoration: none;
    transition: filter .15s;
}
.lg .lg-btn-primary:hover { filter: brightness(1.08); }

.login-submit-btn { position: relative; transition: transform .12s ease; }
.login-submit-btn:active { transform: scale(.98); }
.login-submit-btn.is-loading { pointer-events: none; opacity: .85; }
.login-submit-btn.is-loading .btn-label { visibility: hidden; }
.login-submit-btn.is-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
    animation: lg-btn-spin .6s linear infinite;
}
@keyframes lg-btn-spin { to { transform: rotate(360deg); } }

/* Text-style button (e.g. "Resend") */
.lg-text-btn {
    background: none; border: 0; padding: 0;
    font: inherit; font-size: .875rem; font-weight: 600;
    color: var(--lg-accent); cursor: pointer;
}
.lg-text-btn:hover { text-decoration: underline; }
.lg-text-btn:disabled { opacity: .5; cursor: default; text-decoration: none; }

.lg-resend {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 16px; font-size: .875rem; color: var(--lg-ink-2);
}
.lg-resend form { display: inline; margin: 0; }

.lg-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0 16px; color: var(--lg-ink-3); font-size: .82rem;
}
.lg-divider::before, .lg-divider::after { content: ""; flex: 1; height: 1px; background: var(--lg-line); }

/* Secondary outlined link-button ("Register as a vendor", "Log in") */
.lg-register {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; border-radius: 10px;
    border: 1px solid var(--lg-line);
    color: var(--lg-ink) !important; font-weight: 600; font-size: .95rem;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.lg-register:hover { background: var(--lg-soft); border-color: color-mix(in srgb, var(--lg-accent) 40%, var(--lg-line)); }

.lg-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 24px; font-size: .875rem; font-weight: 600;
    color: var(--lg-ink-2) !important; text-decoration: none;
}
.lg-back:hover { color: var(--lg-accent) !important; }
.lg-foot-center { text-align: center; }

.lg-secure { display: flex; gap: 6px; align-items: flex-start; margin: 20px 0 0; font-size: .75rem; line-height: 1.4; color: var(--lg-ink-3); }
.lg-secure .mud-icon-root { flex: none; margin-top: 1px; }

/* Success state (registration complete / password updated) */
.lg-done-icon {
    display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 16px; margin-bottom: 20px;
    background: color-mix(in srgb, var(--mud-palette-success, #008040) 12%, transparent);
    color: var(--mud-palette-success, #008040);
}

/* ── Step progress (form pane) ── */
.lg-steps { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.lg-steps-bars { display: flex; gap: 6px; flex: 1; max-width: 160px; }
.lg-steps-bars span { flex: 1; height: 4px; border-radius: 2px; background: var(--lg-line); transition: background .2s; }
.lg-steps-bars span.on { background: var(--lg-accent); }
.lg-steps em { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--lg-ink-3); white-space: nowrap; }

/* ── OTP boxes ── */
.lg .otp-box-row { display: flex; gap: 8px; justify-content: space-between; }
.lg .otp-box {
    flex: 1 1 0; min-width: 0; max-width: 56px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem; font-weight: 600;
    border-radius: 10px;
    border: 1.5px solid var(--lg-line);
    background: var(--lg-surface);
    color: var(--lg-ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lg .otp-box:focus {
    border-color: var(--lg-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 18%, transparent);
}
.lg-otp-error { min-height: 20px; margin: 8px 0 12px; font-size: .85rem; color: var(--mud-palette-error, #b00020); }

/* ── Password reveal ── */
.password-field-wrapper { position: relative; }
.password-toggle-btn {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer; padding: 4px;
    color: var(--lg-ink-3, var(--mud-palette-text-secondary));
}

/* ── Responsive: stack, brand becomes a slim header ── */
@media (max-width: 960px) {
    .lg { grid-template-columns: minmax(0, 1fr); }
    .lg-brand { padding: 20px 20px 24px; gap: 12px; }
    .lg-brand-mid { margin-top: 8px; }
    .lg-brand h1 { font-size: 1.5rem; margin-bottom: 6px; }
    .lg-brand h1 br { display: none; }
    .lg-brand-lede { font-size: .9rem; margin: 0; }
    .lg-points, .lg-preview, .lg-brand-foot { display: none; }
    .lg-form-pane { align-items: flex-start; padding: 28px 20px 40px; }
}
@media (max-width: 380px) {
    .lg-row-2 { grid-template-columns: 1fr; gap: 0; }
    .lg .otp-box-row { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-register, .login-submit-btn, .lg-points li { transition: none; }
    .login-submit-btn.is-loading::after { animation-duration: 1.5s; }
}