/* =========================================================
   MOTIVA AUTHENTICATION — the shared shell for every
   unauthenticated screen (Login, Forget Password).

   Full-width split layout: illustration (left) + form (right),
   no centered card. Light-mode only by explicit brief
   requirement — see the token-override block on .lp-page below.

   GLOBAL, NOT SCOPED, and for the same reason as
   motiva-dashboard.css and motiva-request-workspace.css: Blazor
   CSS isolation is per component, so two pages cannot share a
   .razor.css. This file WAS LoginPage.razor.css; it moved here
   verbatim when Forget Password was brought onto the same shell,
   so that neither page owns a private copy of the design.

   EVERY RULE IS QUALIFIED BY `.motiva-auth`, the shell hook that
   AuthShell.razor puts on the page root. That is not decoration:
   SignupPage.razor.css still uses the same `lp-*` class names for
   an OLDER, different (centered-card) layout, and an unqualified
   `.lp-page { direction: ltr }` here would silently break it.
   The hook rides on the same element as .lp-page, so specificity
   matches what the scoped build produced and nothing shifted.
   ========================================================= */

/* =====================================================
   PAGE WRAPPER — two-column grid.
   direction: ltr here is layout-only: it is what keeps the
   illustration physically on the LEFT and the form physically
   on the RIGHT regardless of the app's global RTL direction
   (in an RTL grid container, the first track lands on the right,
   which would flip this layout). Each column re-declares
   direction: rtl for its own content, so all text, alignment,
   and icon ordering inside them is correct RTL — only the
   macro (which-side) placement uses ltr.
   ===================================================== */

.motiva-auth.lp-page {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    direction: ltr;
    overflow: hidden;
    font-family: var(--motiva-font-family);
    background: var(--motiva-surface-primary);

    /* ── Force light mode on this page only ───────────────────
       The brief requires light-mode-only for Login regardless of
       OS/user dark-mode preference, without touching the shared
       gradify-theme.css / motiva-tokens.css files (those still
       drive dark mode correctly everywhere else). Custom properties
       cascade, so re-declaring the handful of tokens that actually
       have dark-mode variants at this scope overrides whatever
       :root resolved to, for every descendant of .lp-page. Values
       below are copied verbatim from the light (default) blocks in
       gradify-theme.css and motiva-tokens.css. */
    --g-bg-page: #f0f2f8;
    --g-bg-surface: #ffffff;
    --g-bg-input: #f8fafc;
    --g-bg-hover: #f5f6ff;
    --g-border: #e2e8f0;
    --g-border-light: #f1f5f9;
    --g-text-primary: #1e293b;
    --g-text-secondary: #64748b;
    --g-text-muted: #94a3b8;
    --g-accent: #6366f1;
    --g-accent-light: #eef2ff;
    --g-accent-active-bg: #d4d8fa;
    --g-accent-hover: #4f46e5;
    --g-danger: #ef4444;
    --g-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
    --g-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --g-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);

    --motiva-color-purple: #6D0EE6;
    --motiva-color-indigo: #4F46E5;
    --motiva-color-blue: #1C7FB8;
    --motiva-color-teal: #0D9C9A;
    --motiva-gradient-ambient:
        radial-gradient(circle at 80% 15%, rgba(109, 14, 230, 0.16), transparent 30%),
        radial-gradient(circle at 15% 80%, rgba(13, 156, 154, 0.16), transparent 34%),
        linear-gradient(135deg, #ffffff, #fbfaff 52%, #f8fefd);
    --motiva-color-info: #1C7FB8;
    --motiva-color-success: #0D9C73;
    --motiva-color-warning: #D97706;
    --motiva-color-info-bg: rgba(28, 127, 184, 0.10);
    --motiva-color-success-bg: rgba(13, 156, 115, 0.11);
    --motiva-color-warning-bg: rgba(217, 119, 6, 0.11);
    --motiva-color-danger-bg: rgba(217, 56, 100, 0.10);
    --motiva-color-brand-bg: rgba(109, 14, 230, 0.08);
}

/* Soft ambient seam blend at the column boundary — lets the
   illustration's color gradually fade into the bright form side
   instead of a hard vertical line. Sits above both column
   backgrounds (z-index 1) but below all real content (z-index 2). */
.motiva-auth.lp-page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle 460px at 51% 40%, rgba(255, 255, 255, 0.92), transparent 72%),
        radial-gradient(circle 320px at 51% 65%, rgba(79, 70, 229, 0.10), transparent 70%);
    filter: blur(60px);
}

/* =====================================================
   LEFT SIDE — ILLUSTRATION
   Soft, light, airy ambient background (off-white base +
   blurred lavender/blue/teal blobs — fixed pixel circle radii,
   not percentage, so blobs stay contained instead of washing the
   whole panel — same lesson as the dashboard/card glow work).
   Purely decorative (aria-hidden on the wrapper in markup).
   ===================================================== */

.motiva-auth .lp-illustration {
    position: relative;
    z-index: 0;
    direction: rtl;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--motiva-space-2xl) clamp(32px, 5vw, 72px);
    overflow: hidden;
    background: #fbfaff;
}

.motiva-auth .lp-illustration::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle 320px at 12% 12%, rgba(79, 70, 229, 0.14), transparent 70%),
        radial-gradient(circle 300px at 85% 18%, rgba(13, 156, 154, 0.12), transparent 70%),
        radial-gradient(circle 340px at 20% 88%, rgba(109, 14, 230, 0.10), transparent 70%),
        radial-gradient(circle 260px at 90% 90%, rgba(28, 127, 184, 0.10), transparent 70%);
    filter: blur(64px);
}

/* Headline + subtitle stay on one line on desktop (brief requirement) —
   font-size scales down with viewport width via clamp() rather than
   wrapping, and both are re-allowed to wrap at the tablet breakpoint
   below where .lp-illustration itself shrinks. nowrap is safe here
   because .lp-illustration's own overflow:hidden only clips if the
   clamp() floor is ever too big for the narrowest supported desktop
   width — verified empirically across 1025–1920px.
   text-align: center (not right) is intentional here: the headline,
   subtitle and illustration are meant to read as one centered
   composition, not a right-aligned text block — direction: rtl still
   governs word order/punctuation, centering is purely positional. */
.motiva-auth .lp-illustration-headline {
    font-family: var(--motiva-font-family);
    font-size: clamp(22px, 2.6vw, 38px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-tight);
    color: var(--motiva-text-primary);
    text-align: center;
    white-space: nowrap;
    margin: 0 0 var(--motiva-space-md);
}

.motiva-auth .lp-gradient-text {
    background: var(--motiva-gradient-signature);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.motiva-auth .lp-illustration-sub {
    font-family: var(--motiva-font-family);
    font-size: clamp(14px, 1.2vw, 19px);
    color: var(--motiva-text-muted);
    line-height: var(--motiva-line-height-body);
    text-align: center;
    white-space: nowrap;
    margin: 0 0 var(--motiva-space-2xl);
}

/* =====================================================
   PRODUCT ILLUSTRATION — lightweight CSS/HTML "floating
   dashboard" mock. Decorative only: no real data, no copied
   component, no photos/3D. Low visual density on purpose so it
   never competes with the login form on the right.
   ===================================================== */

.motiva-auth .lp-mock {
    position: relative;
    /* Enlarged from 420px — the illustration is meant to be the main
       visual anchor of the left side, not a small accent. Every internal
       dimension below is scaled up by roughly the same ~1.4x ratio so
       proportions stay identical to the smaller version, just bigger.
       width (not just max-width) is required: with align-self: center
       below, this flex item sizes to shrink-to-fit content rather than
       stretching, so max-width alone is only an unreached ceiling — the
       mock rendered at ~415px, not 580px, until width forced it to
       actually grow. min() keeps it from overflowing a narrower panel. */
    width: min(580px, 100%);
    /* .lp-illustration is a flex column; a stretched item that gets
       clamped by max-width defaults to the cross-start edge (the right,
       since the container is RTL) instead of being centered — that's
       what was drifting the illustration toward the center divider.
       align-self: center fixes it relative to the panel itself. */
    align-self: center;
}

.motiva-auth .lp-mock-window {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 22px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--motiva-radius-lg);
    box-shadow: var(--motiva-shadow-lg);
    padding: 32px;
}

.motiva-auth .lp-mock-sidebar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 6px;
}

.motiva-auth .lp-mock-sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--motiva-text-muted);
    opacity: 0.75;
}

.motiva-auth .lp-mock-sidebar-icon svg {
    width: 20px;
    height: 20px;
}

.motiva-auth .lp-mock-sidebar-icon-active {
    color: var(--motiva-color-indigo);
    opacity: 1;
}

.motiva-auth .lp-mock-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.motiva-auth .lp-mock-row-top,
.motiva-auth .lp-mock-row-bottom {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.motiva-auth .lp-mock-progress-card {
    flex-shrink: 0;
    width: 144px;
}

.motiva-auth .lp-mock-progress-ring {
    position: relative;
    align-self: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin-top: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--motiva-color-indigo) 0% 68%, var(--motiva-border-subtle) 68% 100%);
}

.motiva-auth .lp-mock-progress-ring::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}

.motiva-auth .lp-mock-progress-value {
    position: relative;
    z-index: 1;
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

.motiva-auth .lp-mock-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--motiva-radius-sm);
    box-shadow: var(--motiva-shadow-sm);
    padding: 14px 16px;
}

/* Real (small) Hebrew labels instead of gray placeholder bars — each
   card needs a recognizable purpose, not just undifferentiated lines.
   Right-aligned per the RTL requirement that all card text stays
   right-aligned regardless of the card's own layout. */
.motiva-auth .lp-mock-card-title {
    display: block;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-secondary);
    text-align: right;
}

.motiva-auth .lp-mock-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.motiva-auth .lp-mock-bell-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--motiva-color-purple);
    opacity: 0.85;
}

.motiva-auth .lp-mock-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status dots replace the old outline/checkmark bullets — each color
   reads as a distinct task state rather than a generic bullet. */
.motiva-auth .lp-mock-status-dot {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.motiva-auth .lp-status-done {
    background: var(--motiva-color-teal);
}

.motiva-auth .lp-status-progress {
    background: var(--motiva-color-indigo);
}

.motiva-auth .lp-status-pending {
    background: transparent;
    border: 1.5px solid var(--motiva-border-strong);
}

.motiva-auth .lp-mock-line {
    flex: 1 1 auto;
    height: 8px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-border-strong);
    opacity: 0.5;
}

.motiva-auth .lp-mock-line-short {
    flex: 0 1 55%;
}

/* ── Milestone card visual: a curved path + flag instead of the old
   generic progress bars, so it reads as "milestones reached" rather
   than a duplicate of the progress-ring card. ── */
.motiva-auth .lp-mock-milestone-visual {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.motiva-auth .lp-mock-milestone-path {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
}

.motiva-auth .lp-mock-flag-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--motiva-color-teal);
}

.motiva-auth .lp-mock-sparkle {
    position: absolute;
    z-index: 2;
    font-size: 19px;
    color: var(--motiva-color-purple);
    opacity: 0.7;
    pointer-events: none;
}

.motiva-auth .lp-mock-sparkle-1 { top: -22px; right: 24%; }
.motiva-auth .lp-mock-sparkle-2 { bottom: -18px; left: 8%; font-size: var(--motiva-font-size-body, 14px); color: var(--motiva-color-teal); }

.motiva-auth .lp-mock-dot {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.motiva-auth .lp-mock-dot-a {
    width: 19px;
    height: 19px;
    top: 20%;
    right: -22px;
    background: var(--motiva-color-teal);
    opacity: 0.35;
}

.motiva-auth .lp-mock-dot-b {
    width: 13px;
    height: 13px;
    bottom: 14%;
    left: -16px;
    background: var(--motiva-color-purple);
    opacity: 0.3;
}

.motiva-auth .lp-mock-dot-c {
    width: 10px;
    height: 10px;
    top: -14px;
    left: 30%;
    background: var(--motiva-color-blue);
    opacity: 0.4;
}

/* =====================================================
   RIGHT SIDE — LOGIN FORM
   Bright, near-white surface. The form sits directly on the
   page — no separate white card/box around it.
   ===================================================== */

.motiva-auth .lp-form-side {
    position: relative;
    z-index: 2;
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--motiva-space-2xl) clamp(24px, 4vw, 64px);
    background: var(--motiva-surface-primary);
    overflow-y: auto;
}

.motiva-auth .lp-form-inner {
    width: 100%;
    max-width: 400px;
}

/* =====================================================
   LOGO + TITLE + SUBTITLE
   ===================================================== */

.motiva-auth .lp-logo {
    display: block;
    height: 32px;
    width: auto;
    margin-bottom: var(--motiva-space-lg);
}

.motiva-auth .lp-title {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-h1);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
    line-height: var(--motiva-line-height-tight);
    text-align: right;
    margin: 0;
}

/* Short decorative line under the heading — brand gradient,
   not a solid color, per the brief. */
.motiva-auth .lp-title-accent {
    display: block;
    width: 52px;
    height: 4px;
    margin: 10px 0 var(--motiva-space-md);
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-gradient-signature);
}

.motiva-auth .lp-subtitle {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-muted);
    line-height: var(--motiva-line-height-body);
    text-align: right;
    margin: 0 0 var(--motiva-space-2xl);
}

/* =====================================================
   FORM FIELDS
   ===================================================== */

.motiva-auth .lp-field {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-xs);
    margin-bottom: var(--motiva-space-xl);
}

.motiva-auth .lp-label {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

/* ── Input shell ───────────────────────────────────────
   One shared bordered/rounded/shadowed container for BOTH
   fields — the shell owns every visual property (border,
   radius, background, shadow, hover, focus); the <input>
   inside is just a transparent, borderless flex-filling child.
   This is what guarantees the email and password fields are
   really identical rather than coincidentally similar: they're
   the exact same shell class with nothing field-specific
   overriding width/height/radius/etc. The password field's
   toggle button is a normal flex sibling (not absolutely
   positioned), so it can never visually drift outside the
   shell or affect the shell's own width. */

.motiva-auth .lp-input-shell {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--motiva-control-height-lg);
    border: 1.5px solid var(--motiva-border-subtle);
    border-radius: var(--g-radius-lg);
    background: var(--motiva-surface-secondary);
    box-shadow: var(--motiva-shadow-sm);
    box-sizing: border-box;
    transition: border-color var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.motiva-auth .lp-input-shell:hover:not(:focus-within) {
    border-color: var(--motiva-color-indigo);
    background: var(--motiva-surface-hover);
}

.motiva-auth .lp-input-shell:focus-within {
    border-color: var(--motiva-color-indigo);
    box-shadow: 0 0 0 4px var(--motiva-color-brand-bg);
    background: var(--motiva-surface-primary);
}

.motiva-auth .lp-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 var(--motiva-space-md);
    border: none;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-md);
    color: var(--motiva-text-primary);
    outline: none;
    box-sizing: border-box;
}

.motiva-auth .lp-input::placeholder {
    color: var(--motiva-text-muted);
    font-weight: var(--motiva-font-weight-regular);
}

/* Overrides app.css's global (red-outline) .invalid / .validation-message
   rules for the auth pages only. `.motiva-auth .validation-message` is
   (0,2,0) against app.css's (0,1,0), so this wins on specificity and does
   not depend on link order. These rules carried `::deep` while the sheet
   was scoped — reaching InputText's and ValidationMessage's own rendered
   markup. A global sheet has no scope to escape, so it is gone. */
.motiva-auth .validation-message {
    display: block;
    color: var(--motiva-color-danger);
    font-size: var(--motiva-font-size-caption);
    margin-top: 2px;
}

.motiva-auth .lp-input.invalid,
.motiva-auth .lp-input.valid.modified {
    outline: none;
}

/* The shell (not the bare input) carries the visible border, so the
   invalid state has to react on the shell via :has() rather than
   restyling the input's own (intentionally none) border directly.
   Blazor's InputText adds .invalid/.valid itself, so this is what
   turns a failed EmailAddress/Required check into a red field on
   both Login and Forget Password without either page knowing. */
.motiva-auth .lp-input-shell:has(.lp-input.invalid) {
    border-color: var(--motiva-color-danger);
}

.motiva-auth .lp-input-shell:has(.lp-input.invalid):focus-within {
    box-shadow: 0 0 0 4px var(--motiva-color-danger-bg);
}

/* THE TWO RULES ABOVE ARE THE ONLY WAY THE SHELL GOES RED, and they key off
   ONE thing: the `invalid` class on the input inside them. Blazor's own
   <InputText> puts it there, which is why Login and every InputText field on
   Signup need nothing else.

   Signup's two password boxes are raw <input>s — the strength meter and the
   match indicator need per-keystroke binding, which EditContext-driven binding
   does not give them — so nothing puts the class on them and their shells
   would stay grey while every field above them went red. SignupPage.razor
   applies it by hand from the SAME validation messages (see HasError there),
   rather than this sheet growing a second, parallel way to look angry. */

/* ── Password visibility toggle ─────────────────────── */

.motiva-auth .lp-toggle-visibility {
    flex-shrink: 0;
    margin-inline-end: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--motiva-radius-sm);
    color: var(--motiva-text-muted);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.motiva-auth .lp-eye-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.motiva-auth .lp-toggle-visibility:hover {
    background: var(--motiva-surface-hover);
    color: var(--motiva-color-indigo);
}

.motiva-auth .lp-toggle-visibility:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* =====================================================
   ERROR MESSAGE (login failure)
   ===================================================== */

.motiva-auth .lp-error {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    background: var(--motiva-color-danger-bg);
    border: 1px solid var(--motiva-color-danger);
    border-radius: var(--motiva-radius-sm);
    color: var(--motiva-color-danger);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    padding: var(--motiva-space-sm) var(--motiva-space-md);
    margin-bottom: var(--motiva-space-lg);
}

/* Success counterpart of .lp-error, same geometry and the same
   token family one rung over. Forget Password is the only screen
   that has a success state to show without navigating away
   ("a reset link was sent to ..."); Login either signs you in or
   shows .lp-error, so it never renders this.
   ===================================================== */

.motiva-auth .lp-success {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    background: var(--motiva-color-success-bg);
    border: 1px solid var(--motiva-color-success);
    border-radius: var(--motiva-radius-sm);
    color: var(--motiva-color-success);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    padding: var(--motiva-space-sm) var(--motiva-space-md);
    margin-bottom: var(--motiva-space-lg);
}

/* =====================================================
   PRIMARY BUTTON — the product's main CTA. Same gradient
   token as MButton's .m-btn-primary, kept as a plain <button>
   (not swapped for the MButton component) to avoid touching
   form-submit wiring. Hover adds a soft brand-colored glow on
   top of the elevation shadow, reinforcing the gradient rather
   than just lifting a generic dark shadow.
   ===================================================== */

.motiva-auth .lp-btn {
    width: 100%;
    height: var(--motiva-control-height-lg);
    border: none;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-gradient-signature);
    color: #fff;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-lg);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    box-shadow: var(--motiva-shadow-sm);
    transition: box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                transform var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
    margin-bottom: var(--motiva-space-lg);
    letter-spacing: 0.2px;
}

.motiva-auth .lp-btn:hover:not(:disabled) {
    box-shadow: var(--motiva-shadow-md), 0 12px 28px rgba(79, 70, 229, 0.28);
    transform: translateY(-2px);
}

.motiva-auth .lp-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--motiva-shadow-sm);
}

.motiva-auth .lp-btn:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* .lp-btn is written for a <button>; an <a> needs the four properties a
   button gets for free. Same handling .lp-google-btn already carries for the
   same reason — this is a modifier, not a second button. */
.motiva-auth .lp-btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.motiva-auth .lp-btn-link:hover {
    color: #fff;
    text-decoration: none;
}

.motiva-auth .lp-btn:disabled {
    background: var(--motiva-color-disabled-bg);
    color: var(--motiva-color-disabled-text);
    box-shadow: none;
    cursor: not-allowed;
}

/* =====================================================
   DIVIDER
   ===================================================== */

/* =====================================================
   "זכור אותי"
   One quiet control under the password. No card and no helper copy —
   it must stay clearly secondary to the gradient CTA below it. The
   whole row is the <label>, so the text is part of the hit target.
   RTL comes from the page's own direction; `start` alignment keeps it
   on the right without a direction-specific rule.
   ===================================================== */

.motiva-auth .lp-remember {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--motiva-space-xs, 6px);
    margin-bottom: var(--motiva-space-md);
    cursor: pointer;
    user-select: none;
}

.motiva-auth .lp-remember-box {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
    /* The one line that themes a native checkbox to the Motiva palette
       while leaving its built-in keyboard and a11y behaviour intact. */
    accent-color: var(--motiva-color-indigo);
}

.motiva-auth .lp-remember-box:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.motiva-auth .lp-remember-text {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-secondary);
}

.motiva-auth .lp-divider {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    color: var(--motiva-text-muted);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    margin-bottom: var(--motiva-space-lg);
}

.motiva-auth .lp-divider::before,
.motiva-auth .lp-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--motiva-border-subtle);
}

/* =====================================================
   GOOGLE BUTTON — bordered, neutral surface so it visually
   reads as a secondary action next to the gradient primary.
   ===================================================== */

.motiva-auth .lp-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-sm);
    width: 100%;
    height: var(--motiva-control-height-lg);
    border: 1.5px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-semibold);
    text-decoration: none;
    box-sizing: border-box;
    transition: background var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
    margin-bottom: var(--motiva-space-xl);
}

.motiva-auth .lp-google-btn:hover {
    background: var(--motiva-surface-hover);
    border-color: var(--motiva-color-indigo);
    box-shadow: var(--motiva-shadow-sm);
    text-decoration: none;
    color: var(--motiva-text-primary);
}

.motiva-auth .lp-google-btn:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.motiva-auth .lp-google-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* =====================================================
   FOOTER LINKS
   ===================================================== */

.motiva-auth .lp-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--motiva-space-sm);
    padding-top: var(--motiva-space-xs);
    border-top: 1px solid var(--motiva-border-subtle);
}

.motiva-auth .lp-footer-line {
    margin: 0;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-muted);
    display: flex;
    gap: 6px;
}

.motiva-auth .lp-link {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-indigo);
    text-decoration: none;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.motiva-auth .lp-link:hover {
    color: var(--motiva-color-purple);
    text-decoration: underline;
}

.motiva-auth .lp-link:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-sm);
}

/* =====================================================
   SIGNUP-ONLY PIECES
   Three things the Signup form has and the other two auth
   screens do not. They live here rather than in a
   SignupPage.razor.css because that file was the whole problem:
   it held a SECOND definition of .lp-field/.lp-input/.lp-btn/
   .lp-footer/.lp-link built on the older --g-* tokens, so the
   three auth screens were one design language by name and three
   by value. Signup now takes those from the block above, like
   Login and Forget Password, and contributes only what is
   genuinely its own.
   ===================================================== */

/* Two fields on one row (first + last name). Collapses to one
   column at the narrowest breakpoint — see RESPONSIVE below. */
.motiva-auth .sp-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--motiva-space-md);
}

/* The row's own children must not keep the standalone field's
   bottom margin twice over. */
.motiva-auth .sp-name-row .lp-field {
    margin-bottom: 0;
}

.motiva-auth .sp-name-row {
    margin-bottom: var(--motiva-space-xl);
}

/* ── Password strength meter ───────────────────────────
   Sits under the password shell. Width is set inline from the
   score; only the colour is decided here. */

.motiva-auth .sp-strength {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    margin-top: var(--motiva-space-xs);
}

.motiva-auth .sp-strength-bar {
    flex: 1 1 auto;
    height: 4px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-border-subtle);
    overflow: hidden;
}

.motiva-auth .sp-strength-fill {
    height: 100%;
    border-radius: var(--motiva-radius-full);
    transition: width var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.motiva-auth .sp-strength-fill.sp-strength-weak   { background: var(--motiva-color-danger); }
.motiva-auth .sp-strength-fill.sp-strength-medium { background: var(--motiva-color-warning); }
.motiva-auth .sp-strength-fill.sp-strength-strong { background: var(--motiva-color-success); }

.motiva-auth .sp-strength-label {
    flex-shrink: 0;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
}

.motiva-auth .sp-strength-label.sp-strength-label-weak   { color: var(--motiva-color-danger); }
.motiva-auth .sp-strength-label.sp-strength-label-medium { color: var(--motiva-color-warning); }
.motiva-auth .sp-strength-label.sp-strength-label-strong { color: var(--motiva-color-success); }

/* ── Password confirmation indicator ───────────────────
   The glyph is its own flex child, never concatenated into the
   Hebrew string: a bare ✓/✗ adjacent to RTL text reorders. */

.motiva-auth .sp-match {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--motiva-space-xs);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
}

.motiva-auth .sp-match .oi {
    flex-shrink: 0;
    font-size: 9px;
    top: 0;
}

.motiva-auth .sp-match--ok  { color: var(--motiva-color-success); }
.motiva-auth .sp-match--err { color: var(--motiva-color-danger); }

/* ── Informational note ────────────────────────────────
   Who a screen is NOT for. An EDGE plus a whisper of brand tint,
   not a filled panel: it has to read as an aside under the
   subtitle, never compete with the gradient CTA below it. */

.motiva-auth .lp-note {
    display: flex;
    align-items: flex-start;
    gap: var(--motiva-space-sm);
    border-inline-start: 2px solid var(--motiva-color-indigo);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-color-brand-bg);
    padding: var(--motiva-space-sm) var(--motiva-space-md);
    margin-bottom: var(--motiva-space-xl);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-secondary);
}

.motiva-auth .lp-note-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--motiva-color-indigo);
}

/* =====================================================
   RESPONSIVE
   Tablet: keep the two columns, but shrink/simplify the
   illustration (smaller headline, no curve/sparkles) so the
   form column keeps most of the width and stays fully readable.
   Mobile: stack vertically, illustration hidden entirely so the
   login content is the only (and therefore first) thing shown —
   avoids reordering the aria-hidden decorative block just to
   simulate content stacking.
   ===================================================== */

@media (max-width: 1024px) {
    .motiva-auth.lp-page {
        grid-template-columns: 0.85fr 1.15fr;
    }

    .motiva-auth .lp-illustration {
        padding: var(--motiva-space-xl) var(--motiva-space-lg);
    }

    /* Tablet is allowed to wrap naturally — there's no longer enough
       width to guarantee one line, so let go of nowrap here. */
    .motiva-auth .lp-illustration-headline {
        font-size: clamp(22px, 3.2vw, 28px);
        white-space: normal;
    }

    .motiva-auth .lp-illustration-sub {
        font-size: var(--motiva-font-size-md);
        white-space: normal;
        margin-bottom: var(--motiva-space-xl);
    }

    /* Scale the illustration back down proportionally for the narrower
       tablet panel — the desktop sizes above were enlarged to be the
       left side's visual anchor, but at this breakpoint the panel
       itself is too narrow for that footprint. These are the same
       proportions as the desktop values, just uniformly smaller. */
    .motiva-auth .lp-mock {
        width: min(360px, 100%);
    }

    .motiva-auth .lp-mock-window {
        gap: var(--motiva-space-sm);
        padding: var(--motiva-space-md);
    }

    .motiva-auth .lp-mock-sidebar {
        gap: 10px;
    }

    .motiva-auth .lp-mock-sidebar-icon {
        width: 16px;
        height: 16px;
    }

    .motiva-auth .lp-mock-sidebar-icon svg {
        width: 13px;
        height: 13px;
    }

    .motiva-auth .lp-mock-content,
    .motiva-auth .lp-mock-row-top,
    .motiva-auth .lp-mock-row-bottom {
        gap: 8px;
    }

    .motiva-auth .lp-mock-progress-card {
        width: 92px;
    }

    .motiva-auth .lp-mock-progress-ring {
        width: 46px;
        height: 46px;
        margin-top: 4px;
    }

    .motiva-auth .lp-mock-progress-value {
        font-size: 10px;
    }

    .motiva-auth .lp-mock-card {
        gap: 5px;
        padding: 9px 10px;
    }

    .motiva-auth .lp-mock-card-title {
        font-size: 9px;
    }

    .motiva-auth .lp-mock-bell-icon,
    .motiva-auth .lp-mock-flag-icon {
        width: 12px;
        height: 12px;
    }

    .motiva-auth .lp-mock-status-dot {
        width: 7px;
        height: 7px;
    }

    .motiva-auth .lp-mock-line {
        height: 5px;
    }

    .motiva-auth .lp-mock-milestone-path {
        height: 22px;
    }

    .motiva-auth .lp-mock-sparkle,
    .motiva-auth .lp-mock-dot {
        display: none;
    }
}

@media (max-width: 768px) {
    .motiva-auth.lp-page {
        display: block;
        min-height: 100vh;
    }

    .motiva-auth .lp-illustration {
        display: none;
    }

    .motiva-auth .lp-form-side {
        min-height: 100vh;
        padding: var(--motiva-space-xl) var(--motiva-space-lg);
    }
}

@media (max-width: 480px) {
    .motiva-auth .lp-form-side {
        padding: var(--motiva-space-lg) var(--motiva-space-md);
    }

    /* First + last name stop sharing a row once the column is this
       narrow — two 8-character fields side by side stop being usable
       before they stop fitting. */
    .motiva-auth .sp-name-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .motiva-auth .sp-name-row .lp-field {
        margin-bottom: var(--motiva-space-xl);
    }

    .motiva-auth .sp-name-row .lp-field:last-child {
        margin-bottom: 0;
    }
}