/* ============================================================
   MSEBSeva — Login Experience v2
   "Floating Authentication Card over Marketing Canvas"
   ------------------------------------------------------------
   The --lp-* names are kept — they are referenced ~260 times
   through this file — but they are no longer values. They are a
   LOCAL ALIAS LAYER onto the --bx-* contract, exactly like
   core/variables.css does for --clr-*. That is what turns a page
   written as "light theme only, no dark panel" into one that
   follows the active palette and mode without restyling it.

   The marketing canvas artwork (mesh, blobs, dot-grid, shapes) is
   composed from the theme's CATEGORICAL tokens rather than the
   accent, because it needs several distinguishable hues that no
   single seed can produce. Its alphas are restated once for dark
   mode further down — a pale wash over white has to become a deep
   one over near-black, and that is a different number, not a
   different colour.

   The product screenshot (.lp-dash*) depicts the APP, so it tracks
   the app's own surfaces.

   Deliberately fixed: the WhatsApp mark. That is a third-party
   brand colour and must not move with the palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* ── BRAND RAMP ──
       Bound to the CTA family, so the auth pages change colour with
       the palette instead of staying blue in a graphite install. */
    --lp-blue-50: var(--bx-accent-soft);
    --lp-blue-100: rgba(var(--bx-cta-rgb), .16);
    --lp-blue-200: rgba(var(--bx-cta-rgb), .28);
    --lp-blue-400: var(--bx-accent-emphasis);
    --lp-blue-500: var(--bx-cta);
    --lp-blue-600: var(--bx-cta);
    --lp-blue-700: var(--bx-cta-hover);
    --lp-blue-900: var(--bx-text);
    --lp-cyan-200: rgba(var(--bx-cat-teal-rgb), .35);
    --lp-lavender: rgba(var(--bx-cat-purple-rgb), .14);
    --lp-sky-100: rgba(var(--bx-cta-rgb), .12);
    /* ── NEUTRALS ── */
    --lp-white: var(--bx-surface);
    --lp-bg: var(--bx-canvas);
    --lp-surface: var(--bx-surface);
    --lp-text: var(--bx-text);
    --lp-text-2: var(--bx-text);
    --lp-muted: var(--bx-text-muted);
    --lp-hint: var(--bx-text-subtle);
    --lp-border: var(--bx-border);
    --lp-border-2: var(--bx-border-strong);
    /* Foreground on a filled CTA. Not "white": in a dark graphite
       install the CTA is near-white and this has to flip. */
    --lp-on-cta: var(--bx-on-cta);
    /* ── SEMANTIC ── */
    --lp-danger: var(--bx-danger);
    --lp-danger-bg: rgba(var(--bx-danger-rgb), .08);
    --lp-danger-bd: rgba(var(--bx-danger-rgb), .22);
    --lp-wa: var(--bx-cat-whatsapp);
    --lp-wa-glow: rgba(var(--bx-cat-whatsapp-rgb), .16);
    /* ── DERIVED ALPHAS ── */
    --lp-blue-a06: rgba(var(--bx-cta-rgb), .06);
    --lp-blue-a10: rgba(var(--bx-cta-rgb), .10);
    --lp-blue-a16: rgba(var(--bx-cta-rgb), .16);
    --lp-blue-a28: rgba(var(--bx-cta-rgb), .28);
    --lp-blue-a40: rgba(var(--bx-cta-rgb), .40);
    /* ── TYPE / RADIUS / MOTION ── */
    --lp-font: var(--bx-font);
    --lp-r-sm: 8px;
    --lp-r-md: 12px;
    --lp-r-lg: 16px;
    --lp-r-xl: 24px;
    --lp-r-full: 999px;
    --lp-ease: var(--bx-ease);
    --lp-spring: var(--bx-ease-out);
    --lp-fast: 140ms;
    --lp-med: 240ms;
    --lp-slow: 420ms;
    /* ── ELEVATION ──
       The four-stop glow is the signature of this page, so the
       geometry is kept and only the ink follows the mode. */
    --lp-shadow-card: 0 0 0 1px rgba(var(--bx-shadow-rgb),var(--bx-shadow-a1)), 0 0 8px rgba(var(--bx-shadow-rgb),var(--bx-shadow-a1)), 0 0 24px rgba(var(--bx-shadow-rgb),var(--bx-shadow-a2)), 0 0 56px rgba(var(--bx-shadow-rgb),var(--bx-shadow-a2));
    --lp-shadow-hover: 0 0 0 1px rgba(var(--bx-shadow-rgb),var(--bx-shadow-a2)), 0 0 10px rgba(var(--bx-shadow-rgb),var(--bx-shadow-a2)), 0 0 32px rgba(var(--bx-shadow-rgb),var(--bx-shadow-a3)), 0 0 72px rgba(var(--bx-shadow-rgb),var(--bx-shadow-a3));
}

/* ============================================================
   RESET BASICS
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

input, button {
    font-family: inherit;
}

/* ============================================================
   ROOT — locked to viewport, no scroll
   ============================================================ */
html, body {
    height: 100%;
    overflow: hidden;
}

.lp-root {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--lp-bg);
    font-family: var(--lp-font);
    color: var(--lp-text);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* ============================================================
   CANVAS BACKGROUND — mesh gradients + geometric blobs
   ============================================================ */
.lp-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

    /* Mesh base */
    .lp-canvas::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 900px 700px at 15% 10%, rgba(var(--bx-cta-rgb),.16) 0%, transparent 65%), radial-gradient(ellipse 700px 600px at 85% 15%, rgba(var(--bx-cat-teal-rgb),.11) 0%, transparent 60%), radial-gradient(ellipse 800px 600px at 60% 80%, rgba(var(--bx-cat-purple-rgb),.13) 0%, transparent 60%), radial-gradient(ellipse 600px 400px at 5% 90%, rgba(var(--bx-accent-rgb),.11) 0%, transparent 55%), var(--bx-canvas);
    }

/* Decorative large circles */
.lp-blob {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c, rgba(var(--bx-cta-rgb),.13)) 0%, transparent 70%);
    filter: blur(1px);
}

.lp-blob-1 {
    width: 680px;
    height: 680px;
    top: -200px;
    left: -160px;
    --c: rgba(var(--bx-cta-rgb),.15);
}

.lp-blob-2 {
    width: 520px;
    height: 520px;
    top: -80px;
    right: -120px;
    --c: rgba(var(--bx-cat-teal-rgb),.14);
}

.lp-blob-3 {
    width: 460px;
    height: 460px;
    bottom: -100px;
    left: 30%;
    --c: rgba(var(--bx-cat-purple-rgb),.14);
}

.lp-blob-4 {
    width: 340px;
    height: 340px;
    bottom: 80px;
    right: 5%;
    --c: rgba(var(--bx-accent-rgb),.11);
}

/* Subtle dot-grid texture */
.lp-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(var(--bx-tint-rgb),.07) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: .6;
}

/* ── CANVAS ARTWORK IN DARK MODE ──
   The mesh, blobs, grid and shapes above are a PICTURE, not chrome.
   Tokenising them would have meant inventing a token per gradient
   stop for no reuse, so they are restated once here instead — the
   pale washes become deep ones and the whole plate drops to the
   dark ground. Scoped to [data-mode="dark"] (specificity 2), which
   beats the plain :root rules above without touching them.

   The layout, geometry and animation are untouched: only the ink
   changes, so there is one artwork, not two. */
:root[data-mode="dark"] .lp-canvas::before {
    background: radial-gradient(ellipse 900px 700px at 15% 10%, rgba(var(--bx-cta-rgb),.20) 0%, transparent 65%), radial-gradient(ellipse 700px 600px at 85% 15%, rgba(var(--bx-cat-teal-rgb),.14) 0%, transparent 60%), radial-gradient(ellipse 800px 600px at 60% 80%, rgba(var(--bx-cat-purple-rgb),.16) 0%, transparent 60%), radial-gradient(ellipse 600px 400px at 5% 90%, rgba(var(--bx-accent-rgb),.14) 0%, transparent 55%), var(--bx-canvas);
}

:root[data-mode="dark"] .lp-blob {
    background: radial-gradient(circle, var(--c, rgba(var(--bx-cta-rgb),.18)) 0%, transparent 70%);
}

:root[data-mode="dark"] .lp-blob-1 { --c: rgba(var(--bx-cta-rgb),.22); }
:root[data-mode="dark"] .lp-blob-2 { --c: rgba(var(--bx-cat-teal-rgb),.16); }
:root[data-mode="dark"] .lp-blob-3 { --c: rgba(var(--bx-cat-purple-rgb),.18); }
:root[data-mode="dark"] .lp-blob-4 { --c: rgba(var(--bx-accent-rgb),.16); }

/* No .lp-grid override is needed: the dot-grid composes against
   --bx-tint-rgb, which already inverts from slate to white. */

:root[data-mode="dark"] .lp-shape-1 {
    background: linear-gradient(135deg, rgba(var(--bx-cta-rgb),.30), rgba(var(--bx-cat-teal-rgb),.18));
}

:root[data-mode="dark"] .lp-shape-2 {
    background: linear-gradient(135deg, rgba(var(--bx-cat-purple-rgb),.26), rgba(var(--bx-accent-rgb),.20));
}

:root[data-mode="dark"] .lp-shape-3 {
    background: linear-gradient(135deg, rgba(var(--bx-cat-teal-rgb),.24), rgba(var(--bx-cta-rgb),.20));
}

:root[data-mode="dark"] .lp-shape {
    opacity: .38;
}

/* Floating geometric shapes */
.lp-shape {
    position: absolute;
    border-radius: var(--lp-r-lg);
    opacity: .5;
    transform: rotate(var(--r, 0deg));
}

.lp-shape-1 {
    width: 180px;
    height: 180px;
    top: 8%;
    left: 38%;
    background: linear-gradient(135deg, rgba(var(--bx-cta-rgb),.22), rgba(var(--bx-cat-teal-rgb),.14));
    border-radius: 38px;
    --r: 22deg;
    animation: lpFloat 9s ease-in-out infinite;
}

.lp-shape-2 {
    width: 120px;
    height: 120px;
    top: 55%;
    left: 12%;
    background: linear-gradient(135deg, rgba(var(--bx-cat-purple-rgb),.20), rgba(var(--bx-accent-rgb),.14));
    border-radius: 28px;
    --r: -15deg;
    animation: lpFloat 11s ease-in-out 2s infinite;
}

.lp-shape-3 {
    width: 90px;
    height: 90px;
    bottom: 18%;
    left: 48%;
    background: linear-gradient(135deg, rgba(var(--bx-cat-teal-rgb),.18), rgba(var(--bx-cta-rgb),.14));
    border-radius: 22px;
    --r: 32deg;
    animation: lpFloat 8s ease-in-out 1s infinite;
}

/* ============================================================
   GLOBAL HEADER — top bar with logo
   ============================================================ */
.lp-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 18px 52px;
    flex-shrink: 0;
}

.lp-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-logo-img img,
.lp-logo-img svg {
    height: 50px;
    width: auto;
    display: block;
}

.lp-logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.lp-logo-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--lp-blue-600);
}

.lp-logo-sub {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--lp-hint);
}

/* ============================================================
   MAIN LAYOUT — marketing left + card right
   ============================================================ */
.lp-main {
    position: relative;
    z-index: 5;
    flex: 1;
    min-height: 0; /* already there — good, keep it */
    display: grid;
    grid-template-columns: 1fr 440px;
    grid-template-rows: minmax(0, 1fr); /* ADD: forces row to respect parent height */
    align-items: stretch; /* CHANGE from center */
    gap: 36px;
    padding: 15px 52px 15px;
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* ============================================================
   MARKETING — left side content
   ============================================================ */
.lp-marketing {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 20px;
    overflow: hidden;
}

/* ── Eyebrow chip ── */
.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lp-blue-50);
    border: 1px solid var(--lp-blue-100);
    border-radius: var(--lp-r-full);
    padding: 6px 14px 6px 8px;
    width: fit-content;
}

.lp-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-blue-500);
    box-shadow: 0 0 0 3px var(--lp-blue-a16);
    animation: lpPulse 2.4s ease-in-out infinite;
}

.lp-eyebrow-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lp-blue-600);
}

/* ── Headline ── */
.lp-headline {
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--lp-text);
}

    .lp-headline .hl-blue {
        color: var(--lp-blue-600);
        position: relative;
        display: inline-block;
    }

        /* Underline accent on "Track Smarter." */
        .lp-headline .hl-blue::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 100%;
            height: 3px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--lp-blue-500), var(--lp-blue-200));
        }

/* ── Description ── */
.lp-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--lp-muted);
    max-width: 480px;
}

/* ── Feature grid ── */
.lp-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 480px;
}

.lp-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--lp-text-2);
}

.lp-feature-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--lp-r-sm);
    background: var(--lp-blue-50);
    border: 1px solid var(--lp-blue-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-blue-600);
    font-size: 12px;
}

/* ── Dashboard Illustration ── */
.lp-dashboard {
    border-radius: var(--lp-r-xl);
    overflow: hidden;
    background: var(--bx-surface);
    border: 1px solid var(--lp-border);
    transform: perspective(1000px) rotateY(-2deg) rotateX(1deg);
    transform-origin: center center;
    transition: transform var(--lp-slow) var(--lp-spring);
}

    .lp-dashboard:hover {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    }

/* Dashboard chrome bar */
.lp-dash-chrome {
    background: var(--bx-canvas);
    border-bottom: 1px solid var(--lp-border);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lp-dash-dots {
    display: flex;
    gap: 4px;
}

.lp-dash-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

    .lp-dash-dot:nth-child(1) {
        background: var(--bx-danger);
    }

    .lp-dash-dot:nth-child(2) {
        background: var(--bx-warning);
    }

    .lp-dash-dot:nth-child(3) {
        background: var(--bx-success);
    }

.lp-dash-url {
    flex: 1;
    height: 20px;
    background: var(--bx-surface);
    border: 1px solid var(--lp-border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0 9px;
    gap: 5px;
    font-size: 9px;
    color: var(--lp-hint);
}

    .lp-dash-url i {
        font-size: 9px;
        color: var(--lp-blue-400);
    }

/* Dashboard inner layout */
.lp-dash-body {
    display: grid;
    grid-template-columns: 120px 1fr;
    height: 170px;
}

/* Left sidebar */
.lp-dash-sidebar {
    background: var(--bx-surface-2);
    border-right: 1px solid var(--lp-border);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lp-dash-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 500;
    color: var(--lp-muted);
    white-space: nowrap;
}

    .lp-dash-nav-item.active {
        background: var(--bx-surface);
        color: var(--lp-blue-600);
        box-shadow: var(--bx-shadow-sm);
    }

    .lp-dash-nav-item i {
        font-size: 10px;
    }

/* Right content */
.lp-dash-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

/* KPI row */
.lp-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.lp-kpi {
    background: var(--bx-canvas);
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    padding: 5px 7px;
}

.lp-kpi-label {
    font-size: 7px;
    color: var(--lp-hint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px;
}

.lp-kpi-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--lp-text);
    line-height: 1;
}

.lp-kpi-delta {
    font-size: 7px;
    font-weight: 600;
    color: var(--bx-success-text);
    margin-top: 1px;
}

/* Chart + gantt row */
.lp-chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1;
}

.lp-chart-box {
    background: var(--bx-surface);
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    padding: 7px;
    overflow: hidden;
}

.lp-chart-title {
    font-size: 8px;
    font-weight: 700;
    color: var(--lp-text-2);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .lp-chart-title i {
        color: var(--lp-blue-500);
        font-size: 9px;
    }

/* Mini bar chart */
.lp-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 36px;
}

.lp-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: var(--lp-blue-200);
}

    .lp-bar.active {
        background: var(--lp-blue-500);
    }

/* Mini gantt */
.lp-gantt {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-gantt-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lp-gantt-label {
    font-size: 7px;
    color: var(--lp-hint);
    width: 36px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-gantt-track {
    flex: 1;
    height: 7px;
    background: var(--bx-surface-2);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.lp-gantt-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--lp-blue-400);
    position: absolute;
    left: var(--s, 0%);
    width: var(--w, 50%);
}

    .lp-gantt-fill.done {
        background: var(--bx-success);
    }

    .lp-gantt-fill.late {
        background: var(--bx-warning);
    }

/* ============================================================
   AUTH CARD — floating
   ============================================================ */
.lp-card {
    background: var(--lp-surface);
    border-radius: var(--lp-r-xl);
    border: 1px solid var(--lp-border);
    padding: 32px 34px;
    transition: box-shadow var(--lp-slow) var(--lp-spring);
    animation: lpCardIn var(--lp-slow) var(--lp-spring) both;
    margin: auto 0; /* ADD: re-centers vertically when shorter than track */
    max-height: 100%; /* ADD: never exceed the stretched track */
}

    .lp-card:hover {
        box-shadow: var(--lp-shadow-hover);
    }

.lp-card-header {
    text-align: center;
    margin-bottom: 22px;
}

.lp-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.lp-card-logo-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lp-blue-500), var(--lp-blue-700));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-on-cta);
    font-size: 16px;
    box-shadow: 0 4px 12px var(--lp-blue-a28);
}

.lp-card-logo-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--lp-blue-600);
    letter-spacing: -.02em;
}

.lp-card-header h2 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--lp-text);
    margin-bottom: 4px;
}

.lp-card-header p {
    font-size: 13px;
    color: var(--lp-muted);
    line-height: 1.5;
}

/* ── Alert ── */
.lp-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border-radius: var(--lp-r-md);
    margin-bottom: 20px;
    background: var(--lp-danger-bg);
    border: 1px solid var(--lp-danger-bd);
    animation: lpShake .42s var(--lp-ease);
}

.lp-alert-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--lp-danger);
    margin-top: 1px;
}

    .lp-alert-icon svg {
        width: 100%;
        height: 100%;
    }

.lp-alert-content {
    flex: 1;
    min-width: 0;
}

.lp-alert-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--lp-text);
    margin-bottom: 2px;
}

.lp-alert-message {
    font-size: 12.5px;
    color: var(--lp-muted);
    line-height: 1.5;
}

    .lp-alert-message p {
        margin: 0;
    }

.lp-alert-close {
    background: none;
    border: none;
    width: 18px;
    height: 18px;
    color: var(--lp-muted);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: color var(--lp-fast);
}

    .lp-alert-close:hover {
        color: var(--lp-text);
    }

    .lp-alert-close svg {
        width: 100%;
        height: 100%;
    }

/* ── Form fields ── */
.lp-field {
    margin-bottom: 9px;
}

.lp-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-text-2);
    margin-bottom: 6px;
}

.lp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.lp-input-icon {
    position: absolute;
    left: 13px;
    width: 15px;
    height: 15px;
    color: var(--lp-hint);
    pointer-events: none;
    z-index: 1;
    transition: color var(--lp-fast);
}

.lp-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    font-family: var(--lp-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--lp-text);
    background: var(--bx-surface-2);
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-r-lg);
    outline: none;
    transition: border-color var(--lp-med) var(--lp-ease), box-shadow var(--lp-med) var(--lp-ease), background var(--lp-fast);
}

    .lp-input::placeholder {
        color: var(--lp-hint);
        font-weight: 400;
    }

    .lp-input:hover {
        border-color: var(--lp-border-2);
        background: var(--bx-surface);
    }

    .lp-input:focus {
        border-color: var(--lp-blue-500);
        background: var(--bx-surface);
        box-shadow: 0 0 0 3px var(--lp-blue-a10);
    }

        .lp-input:focus + .lp-input-icon,
        .lp-input-wrap:focus-within .lp-input-icon {
            color: var(--lp-blue-500);
        }

/* password right pad */
.lp-input--pw {
    padding-right: 48px;
}

.lp-pw-toggle {
    position: absolute;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--lp-hint);
    cursor: pointer;
    z-index: 1;
    border-radius: var(--lp-r-sm);
    transition: color var(--lp-fast), background var(--lp-fast);
}

    .lp-pw-toggle:hover {
        color: var(--lp-blue-600);
        background: var(--lp-blue-a06);
    }

    .lp-pw-toggle svg {
        width: 16px;
        height: 16px;
    }

.lp-validation {
    display: block;
    min-height: 16px;
    margin-top: 5px;
    font-size: 12px;
    color: var(--lp-danger);
    font-weight: 500;
}

/* ── Options row ── */
.lp-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    margin-top: 4px;
}

.lp-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--lp-muted);
    cursor: pointer;
    user-select: none;
}

    .lp-remember input[type="checkbox"] {
        appearance: none;
        width: 16px;
        height: 16px;
        border: 1.5px solid var(--lp-border-2);
        border-radius: 5px;
        background: var(--bx-surface);
        cursor: pointer;
        position: relative;
        transition: background var(--lp-fast), border-color var(--lp-fast), box-shadow var(--lp-fast);
        flex-shrink: 0;
    }

        .lp-remember input[type="checkbox"]:hover {
            border-color: var(--lp-blue-400);
        }

        .lp-remember input[type="checkbox"]:checked {
            background: var(--lp-blue-600);
            border-color: var(--lp-blue-600);
            box-shadow: 0 0 0 3px var(--lp-blue-a10);
        }

            .lp-remember input[type="checkbox"]:checked::after {
                content: "";
                position: absolute;
                left: 4px;
                top: 1px;
                width: 5px;
                height: 9px;
                border: solid var(--lp-on-cta);
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

.lp-forgot {
    font-size: 13px;
    font-weight: 600;
    color: var(--lp-blue-600);
    transition: color var(--lp-fast);
}

    .lp-forgot:hover {
        color: var(--lp-blue-700);
        text-decoration: underline;
    }

/* ── Primary submit button ── */
.lp-btn {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--lp-r-lg);
    background: linear-gradient(135deg, var(--lp-blue-500) 0%, var(--lp-blue-700) 100%);
    color: var(--lp-on-cta);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--lp-blue-a28), 0 1px 3px var(--lp-blue-a40);
    transition: transform var(--lp-fast) var(--lp-ease), box-shadow var(--lp-fast) var(--lp-ease), background var(--lp-fast);
    position: relative;
    overflow: hidden;
}

    .lp-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%);
        pointer-events: none;
    }

    .lp-btn span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: relative;
        z-index: 1;
    }

.lp-btn-arrow {
    width: 16px;
    height: 16px;
    transition: transform var(--lp-fast) var(--lp-ease);
}

.lp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px var(--lp-blue-a40), 0 2px 6px var(--lp-blue-a28);
}

    .lp-btn:hover .lp-btn-arrow {
        transform: translateX(3px);
    }

.lp-btn:active {
    transform: translateY(1px) scale(.99);
    box-shadow: 0 2px 8px var(--lp-blue-a28);
}

/* ── Divider ── */
.lp-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-hint);
}

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

/* ── Alt login button ── */
.lp-alt-btn {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-r-lg);
    background: var(--bx-surface);
    color: var(--lp-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--lp-fast), background var(--lp-fast), box-shadow var(--lp-fast);
}

    .lp-alt-btn svg {
        width: 16px;
        height: 16px;
        color: var(--lp-muted);
    }

    .lp-alt-btn:hover {
        border-color: var(--lp-blue-200);
        background: var(--lp-blue-50);
        box-shadow: 0 2px 8px var(--lp-blue-a10);
    }

.lp-wa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lp-wa);
    box-shadow: 0 0 0 3px var(--lp-wa-glow);
    margin-left: 2px;
    flex-shrink: 0;
}

/* ── Sign-up note ── */
.lp-signup-note {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--lp-muted);
}

    .lp-signup-note a {
        color: var(--lp-blue-600);
        font-weight: 600;
    }

        .lp-signup-note a:hover {
            color: var(--lp-blue-700);
            text-decoration: underline;
        }

/* ============================================================
   AUTH FLOW — shared components for ForgotPassword / VerifyOtp
   (re-uses --lp-* tokens, .lp-card, .lp-field, .lp-input, .lp-btn,
   .lp-alert, .lp-validation already defined above)
   ============================================================ */

/* Scrollable variant of the floating card for longer auth forms */
.lp-card--scroll {
    max-height: 100%; /* CHANGE from calc(100vh - 170px) */
    overflow-y: auto;
}

    .lp-card--scroll::-webkit-scrollbar {
        width: 4px;
    }

    .lp-card--scroll::-webkit-scrollbar-thumb {
        background: var(--clr-border);
        border-radius: 4px;
    }
    .lp-card--scroll::-webkit-scrollbar-track {
        background: transparent;
    }

/* ── Marketing-side step list (Identify / Verify / Reset) ── */
.lp-steps-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
}

.lp-step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--lp-r-lg);
    background: var(--bx-surface-2);
    background: color-mix(in srgb, var(--bx-surface) 55%, transparent);
    border: 1px solid var(--lp-border);
    transition: border-color var(--lp-fast), background var(--lp-fast);
}

    .lp-step-item.is-active {
        border-color: var(--lp-blue-200);
        background: var(--lp-white);
        box-shadow: 0 4px 14px var(--lp-blue-a06);
    }

    .lp-step-item.is-done {
        opacity: .7;
    }

.lp-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    background: var(--lp-blue-50);
    color: var(--lp-blue-600);
    border: 1.5px solid var(--lp-blue-100);
}

.lp-step-item.is-active .lp-step-num {
    background: linear-gradient(135deg, var(--lp-blue-500), var(--lp-blue-700));
    color: var(--lp-on-cta);
    border-color: transparent;
    box-shadow: 0 2px 8px var(--lp-blue-a28);
}

.lp-step-num.is-done {
    background: var(--bx-success-soft);
    color: var(--bx-success-text);
    border-color: rgba(var(--bx-success-rgb), .35);
}

.lp-step-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--lp-text);
}

    .lp-step-title.is-done {
        color: var(--lp-muted);
    }

.lp-step-sub {
    font-size: 11.5px;
    color: var(--lp-muted);
    margin-top: 1px;
}

/* ── Back link (top of card) ── */
.lp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lp-muted);
    margin-bottom: 16px;
    transition: color var(--lp-fast);
}

    .lp-back svg {
        width: 14px;
        height: 14px;
    }

    .lp-back:hover {
        color: var(--lp-blue-600);
    }

/* ── In-card mini progress stepper ── */
.lp-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.lp-progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}

    .lp-progress-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 13px;
        left: calc(50% + 22px);
        width: calc(100% - 44px);
        height: 2px;
        background: var(--lp-border);
        z-index: 0;
    }

    .lp-progress-item.is-done:not(:last-child)::after {
        background: var(--lp-blue-400);
    }

.lp-progress-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    background: var(--lp-bg);
    color: var(--lp-hint);
    border: 1.5px solid var(--lp-border-2);
    position: relative;
    z-index: 1;
}

.lp-progress-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--lp-hint);
}

.lp-progress-item.is-active .lp-progress-dot {
    background: linear-gradient(135deg, var(--lp-blue-500), var(--lp-blue-700));
    color: var(--lp-on-cta);
    border-color: transparent;
    box-shadow: 0 2px 8px var(--lp-blue-a28);
}

.lp-progress-item.is-active .lp-progress-label {
    color: var(--lp-blue-600);
}

.lp-progress-item.is-done .lp-progress-dot {
    background: var(--bx-success-soft);
    color: var(--bx-success-text);
    border-color: rgba(var(--bx-success-rgb), .35);
}

.lp-progress-item.is-done .lp-progress-label {
    color: var(--lp-text-2);
}

/* ── Form header inside card ── */
.lp-form-header {
    margin-bottom: 18px;
}

.lp-rule {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lp-blue-500), var(--lp-blue-200));
    margin-bottom: 10px;
}

.lp-form-header h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--lp-text);
    margin-bottom: 4px;
}

.lp-form-header p {
    font-size: 12.5px;
    color: var(--lp-muted);
    line-height: 1.5;
}

/* ── Identify-method selector cards ── */
.lp-method-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-text-2);
    margin-bottom: 8px;
}

.lp-method-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.lp-method-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-r-lg);
    background: var(--bx-surface-2);
    cursor: pointer;
    transition: border-color var(--lp-fast), background var(--lp-fast), box-shadow var(--lp-fast);
    position: relative;
}

    .lp-method-card input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .lp-method-card:hover {
        border-color: var(--lp-border-2);
        background: var(--bx-surface);
    }

    .lp-method-card.is-selected {
        border-color: var(--lp-blue-500);
        background: var(--lp-blue-50);
        box-shadow: 0 0 0 3px var(--lp-blue-a10);
    }

.lp-method-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--lp-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bx-surface);
    border: 1px solid var(--lp-border);
    color: var(--lp-muted);
}

    .lp-method-icon svg {
        width: 16px;
        height: 16px;
    }

.lp-method-card.is-selected .lp-method-icon {
    background: var(--lp-blue-600);
    border-color: var(--lp-blue-600);
    color: var(--lp-on-cta);
}

.lp-method-text {
    flex: 1;
    min-width: 0;
}

.lp-method-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--lp-text);
}

.lp-method-sub {
    font-size: 11.5px;
    color: var(--lp-muted);
    margin-top: 1px;
}

.lp-method-radio-indicator {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--lp-border-2);
    background: var(--bx-surface);
    position: relative;
    transition: border-color var(--lp-fast), background var(--lp-fast);
}

.lp-method-card.is-selected .lp-method-radio-indicator {
    border-color: var(--lp-blue-600);
    background: var(--lp-blue-600);
}

    .lp-method-card.is-selected .lp-method-radio-indicator::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: var(--lp-on-cta);
    }

/* ── Delivery note banner ── */
.lp-delivery-note {
    display: none;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--lp-r-md);
    background: var(--lp-blue-50);
    border: 1px solid var(--lp-blue-100);
    color: var(--lp-blue-700);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 14px;
}

    .lp-delivery-note svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .lp-delivery-note.is-visible {
        display: flex;
        animation: lpFadeUp var(--lp-med) var(--lp-ease) both;
    }

/* ── Kendo country-code dropdown wrapper ── */
.lp-input-wrap.ef-field--kendo {
    display: block;
}

    .lp-input-wrap.ef-field--kendo .k-dropdown,
    .lp-input-wrap.ef-field--kendo .k-picker {
        width: 100%;
        height: 44px;
        border-radius: var(--lp-r-lg);
        border: 1.5px solid var(--lp-border);
        background: var(--bx-surface-2);
    }

.country-item-template,
.country-value-template {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .country-flag-item,
    .country-value-template span[style*="background-image"] {
        width: 18px;
        height: 13px;
        background-size: cover;
        background-position: center;
        border-radius: 2px;
        flex-shrink: 0;
    }

.country-text-item,
.country-text-value {
    font-size: 13px;
    color: var(--lp-text);
}

/* ── Spinner for submit buttons ── */
.lp-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: var(--lp-on-cta);
    animation: lpSpin .7s linear infinite;
}

.lp-btn-text-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lp-btn.is-loading .lp-spinner {
    display: inline-block;
}

.lp-btn.is-loading .lp-btn-text-wrap,
.lp-btn.is-loading .lp-btn-text {
    display: none;
}

.lp-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
}

/* ── Footer note under form ── */
.lp-footer-note {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--lp-muted);
}

    .lp-footer-note a {
        color: var(--lp-blue-600);
        font-weight: 600;
    }

        .lp-footer-note a:hover {
            color: var(--lp-blue-700);
            text-decoration: underline;
        }

/* ── "Sent to" identity banner (Verify OTP page) ── */
.lp-sent-to {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--lp-r-lg);
    background: var(--bx-surface-2);
    border: 1px solid var(--lp-border);
    margin-bottom: 20px;
}

.lp-sent-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--lp-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-on-cta);
}

    .lp-sent-icon svg {
        width: 17px;
        height: 17px;
    }

.lp-sent-icon--email {
    background: linear-gradient(135deg, var(--lp-blue-500), var(--lp-blue-700));
}

.lp-sent-icon--wa {
    background: var(--lp-wa);
}

.lp-sent-info {
    flex: 1;
    min-width: 0;
}

.lp-sent-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--lp-muted);
}

.lp-sent-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lp-text);
    margin-top: 1px;
}

.lp-sent-change {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lp-blue-600);
}

    .lp-sent-change:hover {
        color: var(--lp-blue-700);
        text-decoration: underline;
    }

/* ── OTP boxes ── */
.lp-otp-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-text-2);
    margin-bottom: 10px;
}

.lp-otp-boxes {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.lp-otp-box {
    width: 100%;
    height: 52px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--lp-text);
    background: var(--bx-surface-2);
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-r-lg);
    outline: none;
    transition: border-color var(--lp-med) var(--lp-ease), box-shadow var(--lp-med) var(--lp-ease), background var(--lp-fast);
}

    .lp-otp-box:hover {
        border-color: var(--lp-border-2);
        background: var(--bx-surface);
    }

    .lp-otp-box:focus {
        border-color: var(--lp-blue-500);
        background: var(--bx-surface);
        box-shadow: 0 0 0 3px var(--lp-blue-a10);
    }

    .lp-otp-box.is-filled {
        border-color: var(--lp-blue-400);
        background: var(--lp-blue-50);
    }

    .lp-otp-box.is-error {
        border-color: var(--lp-danger);
        background: var(--lp-danger-bg);
    }

.lp-otp-boxes.shake {
    animation: lpShake .42s var(--lp-ease);
}

.lp-validation-msg {
    display: block;
    min-height: 16px;
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--lp-danger);
    font-weight: 500;
}

.lp-otp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 20px;
}

.lp-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--lp-muted);
}

    .lp-timer svg {
        width: 14px;
        height: 14px;
        color: var(--lp-hint);
    }

.lp-timer-count {
    font-weight: 700;
    color: var(--lp-text-2);
}

.lp-resend-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lp-blue-600);
    padding: 0;
    transition: color var(--lp-fast);
}

    .lp-resend-btn svg {
        width: 13px;
        height: 13px;
    }

    .lp-resend-btn:hover {
        color: var(--lp-blue-700);
    }

    .lp-resend-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .lp-resend-btn.is-visible {
        display: flex;
    }

/* ── Alert error modifier (alias — base .lp-alert already styled as error) ── */
.lp-alert--error {
    background: var(--lp-danger-bg);
    border-color: var(--lp-danger-bd);
}

/* ── Password strength meter ── */
.lp-strength {
    margin-top: 10px;
}

.lp-strength-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.lp-strength-seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--lp-border);
    transition: background var(--lp-fast) var(--lp-ease);
}

    .lp-strength-seg.active-weak {
        background: var(--lp-danger);
    }

    .lp-strength-seg.active-fair {
        background: var(--bx-warning);
    }

    .lp-strength-seg.active-good {
        background: var(--bx-warning);
    }

    .lp-strength-seg.active-strong {
        background: var(--bx-success);
    }

.lp-strength-label {
    font-size: 11.5px;
    color: var(--lp-muted);
}

    .lp-strength-label span {
        font-weight: 700;
    }

        .lp-strength-label span.weak {
            color: var(--lp-danger);
        }

        .lp-strength-label span.fair {
            color: var(--bx-warning-text);
        }

        .lp-strength-label span.good {
            color: var(--bx-warning-text);
        }

        .lp-strength-label span.strong {
            color: var(--bx-success-text);
        }

/* ── Password requirement checklist ── */
.lp-req-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--lp-r-md);
    background: var(--bx-surface-2);
    border: 1px solid var(--lp-border);
}

.lp-req-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--lp-muted);
    transition: color var(--lp-fast);
}

.lp-req-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--lp-border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background var(--lp-fast), border-color var(--lp-fast), color var(--lp-fast);
}

    .lp-req-icon svg {
        width: 9px;
        height: 9px;
    }

.lp-req-item.is-met {
    color: var(--lp-text-2);
}

    .lp-req-item.is-met .lp-req-icon {
        background: var(--bx-success);
        border-color: var(--bx-success-text);
        color: var(--lp-on-cta);
    }

/* ── Confirm-password match note ── */
.lp-match-note {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

    .lp-match-note svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .lp-match-note.is-match {
        color: var(--bx-success-text);
    }

    .lp-match-note.is-mismatch {
        color: var(--lp-danger);
    }

/* ── Success overlay (shown after Set/Reset Password) ── */
.lp-success-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 32px;
    background: var(--bx-canvas);
    background: color-mix(in srgb, var(--bx-canvas) 97%, transparent);
    backdrop-filter: blur(6px);
    animation: lpFadeUp var(--lp-med) var(--lp-ease) both;
}

    .lp-success-overlay.is-visible {
        display: flex;
    }

.lp-success-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bx-success), var(--bx-success-hover));
    color: var(--lp-on-cta);
    box-shadow: 0 8px 24px rgba(var(--bx-success-rgb),.32);
    margin-bottom: 6px;
}

    .lp-success-icon-wrap svg {
        width: 34px;
        height: 34px;
    }

.lp-success-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--lp-text);
}

.lp-success-sub {
    max-width: 380px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--lp-muted);
}

.lp-success-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    height: 46px;
    padding: 0 24px;
    border-radius: var(--lp-r-lg);
    background: linear-gradient(135deg, var(--lp-blue-500) 0%, var(--lp-blue-700) 100%);
    color: var(--lp-on-cta);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 14px var(--lp-blue-a28);
    transition: transform var(--lp-fast) var(--lp-ease), box-shadow var(--lp-fast) var(--lp-ease);
}

    .lp-success-link svg {
        width: 15px;
        height: 15px;
    }

    .lp-success-link:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px var(--lp-blue-a40);
    }

/* ============================================================
   PAGE FOOTER
   ============================================================ */
.lp-page-footer {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 52px 28px;
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
}

.lp-trust-line {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.lp-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--lp-muted);
}

    .lp-trust-item i {
        color: var(--lp-blue-500);
        font-size: 13px;
    }

.lp-copyright {
    font-size: 12px;
    color: var(--lp-hint);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes lpCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lpFloat {
    0%, 100% {
        transform: translateY(0px) rotate(var(--r, 0deg));
    }

    50% {
        transform: translateY(-14px) rotate(var(--r, 0deg));
    }
}

@keyframes lpPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px var(--lp-blue-a16);
    }

    50% {
        box-shadow: 0 0 0 6px var(--lp-blue-a06);
    }
}

@keyframes lpSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes lpFadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lpShake {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .lp-card, .lp-shape, .lp-eyebrow-dot {
        animation: none !important;
    }

    .lp-dashboard {
        transform: none !important;
    }
}

.lp-root a:focus-visible,
.lp-root button:focus-visible,
.lp-root input:focus-visible {
    outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .lp-main {
        grid-template-columns: 1fr 440px;
        padding: 20px 36px 36px;
    }

    .lp-header {
        padding: 24px 36px;
    }

    .lp-page-footer {
        padding: 12px 36px 24px;
    }
}

@media (max-width: 900px) {
    .lp-main {
        grid-template-columns: 1fr;
        padding: 16px 28px 32px;
    }

    .lp-header {
        padding: 20px 28px;
    }

    .lp-page-footer {
        padding: 12px 28px 20px;
    }

    .lp-marketing {
        padding-right: 0;
        gap: 24px;
    }

    .lp-headline {
        font-size: 36px;
    }

    .lp-card {
        max-width: 460px;
        margin: 0 auto;
        width: 100%;
    }

    .lp-shape-1 {
        display: none;
    }

    .lp-blob-1 {
        width: 400px;
        height: 400px;
        top: -100px;
        left: -100px;
    }

    .lp-card--scroll {
        max-height: calc(100vh - 140px);
    }

    .lp-steps-list {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .lp-header {
        padding: 16px 20px;
    }

    .lp-main {
        padding: 12px 16px 24px;
    }

    .lp-page-footer {
        padding: 8px 16px 20px;
        justify-content: center;
        text-align: center;
    }

    .lp-headline {
        font-size: 30px;
    }

    .lp-features {
        grid-template-columns: 1fr;
    }

    .lp-card {
        padding: 32px 24px;
    }

    .lp-trust-line {
        justify-content: center;
        gap: 14px 18px;
    }

    .lp-copyright {
        width: 100%;
        text-align: center;
    }

    .lp-dashboard {
        display: none;
    }

    .lp-otp-box {
        height: 44px;
        font-size: 17px;
    }

    .lp-progress-label {
        display: none;
    }

    .lp-card--scroll {
        max-height: calc(100vh - 100px);
    }
}

@media (max-width: 380px) {
    .lp-trust-item span {
        display: none;
    }
}


/* ============================================================
   FIELD TIP / HINT (used on Register page email field)
   ============================================================ */
.lp-tip {
    margin-top: 6px;
    font-size: 12px;
    color: var(--lp-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

    .lp-tip.warning {
        color: var(--bx-warning-text);
    }

    .lp-tip.success {
        color: var(--bx-success-text);
    }

    .lp-tip.error {
        color: var(--lp-danger);
    }

/* ============================================================
   REAL-TIME FIELD VALIDATION STATES (Register page AJAX checks)
   ============================================================ */
.lp-input.invalid {
    border-color: var(--lp-danger) !important;
    background-color: var(--lp-danger-bg) !important;
}

.lp-input.valid {
    border-color: var(--bx-success) !important;
    background-color: var(--bx-success-soft) !important;
}

.validation-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-blue-500);
    border-radius: 50%;
    animation: lpSpin 1s linear infinite;
    vertical-align: middle;
}

.validation-success {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: var(--bx-success-text);
}

    .validation-success.show {
        display: block;
    }

.validation-error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: var(--lp-danger);
}

    .validation-error.show {
        display: block;
    }



/* ============================================================
   WHATSAPP NOTICE BANNER (Mobile Login)
   ============================================================ */
.lp-wa-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(var(--bx-cat-whatsapp-rgb),.06);
    border: 1px solid rgba(var(--bx-cat-whatsapp-rgb),.22);
    border-radius: var(--lp-r-xl);
    padding: 14px 16px;
    margin-bottom: 20px;
}

.lp-wa-banner-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lp-wa);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .lp-wa-banner-icon svg {
        width: 18px;
        height: 18px;
        fill: white;
    }

.lp-wa-banner-text {
    flex: 1;
}

.lp-wa-banner-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--bx-success-text);
    margin-bottom: 2px;
}

.lp-wa-banner-desc {
    font-size: 12px;
    color: var(--lp-muted);
    line-height: 1.5;
}

/* ============================================================
   KENDO COUNTRY-CODE DROPDOWN (used by Register, MobileLogin)
   ============================================================ */
.lp-input-wrap.ef-field--kendo {
    display: block;
}

    .lp-input-wrap.ef-field--kendo .k-dropdown,
    .lp-input-wrap.ef-field--kendo .k-picker,
    .lp-input-wrap.ef-field--kendo .k-dropdownlist {
        width: 100%;
        height: 44px;
        border-radius: var(--lp-r-lg);
        border: 1.5px solid var(--lp-border);
        background: var(--bx-surface-2);
        font-family: var(--lp-font);
        font-size: 13.5px;
        transition: border-color var(--lp-med) var(--lp-ease), box-shadow var(--lp-med) var(--lp-ease);
    }

        .lp-input-wrap.ef-field--kendo .k-dropdown:hover,
        .lp-input-wrap.ef-field--kendo .k-picker:hover {
            border-color: var(--lp-border-2);
            background: var(--bx-surface);
        }

        .lp-input-wrap.ef-field--kendo .k-dropdown.k-focus,
        .lp-input-wrap.ef-field--kendo .k-picker.k-focus {
            border-color: var(--lp-blue-500);
            background: var(--bx-surface);
            box-shadow: 0 0 0 3px var(--lp-blue-a10);
        }

        .lp-input-wrap.ef-field--kendo .k-dropdown.invalid,
        .lp-input-wrap.ef-field--kendo .k-picker.invalid {
            border-color: var(--lp-danger) !important;
            background-color: var(--lp-danger-bg) !important;
        }

.country-item-template,
.country-value-template {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .country-flag-item,
    .country-value-template span[style*="background-image"] {
        width: 20px;
        height: 14px;
        background-size: cover;
        background-position: center;
        border-radius: 2px;
        flex-shrink: 0;
    }

.country-text-item,
.country-text-value {
    font-size: 13.5px;
    color: var(--lp-text);
}

/* ============================================================
   GENERIC LABEL FALLBACK (for plain <label> without a class)
   ============================================================ */
.lp-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-text-2);
    margin-bottom: 6px;
}


.lp-mobile-link {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-r-lg);
    background: var(--bx-surface);
    color: var(--lp-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}

    .lp-mobile-link:hover {
        background: var(--lp-blue-50);
        border-color: var(--lp-blue-200);
        color: var(--lp-blue-600);
        box-shadow: 0 2px 8px var(--lp-blue-a10);
    }

    .lp-mobile-link i {
        font-size: 16px;
        color: var(--lp-blue-600);
    }

    .lp-mobile-link .lp-wa-dot {
        margin-left: 4px;
    }