/* Vikalink Client Portal — Login
   Palette matches the Vikalink Admin Dashboard (billing): deep navy brand
   panel, light form panel, blue primary with a teal accent for highlights.
   #0B1B3B brand panel | #FFFFFF form panel | #1D4ED8 primary | #0EA5A5 accent | #5D6A85 muted
*/

:root {
    --bg: #F0F3F7;
    --surface: #FFFFFF;
    --line: #DEE4EF;
    --ink: #0A0A0D;
    --muted: #5D6A85;
    --primary: #1D4ED8;
    --primary-dark: #0B1B3B;
    --primary-shade: #1640B0;
    --primary-tint: #E7EEFE;
    --accent: #0EA5A5;
    --accent-tint: #E1F6F6;
    --danger: #C0392B;
    --danger-tint: #FBEAE7;
    --success: #1E8E3E;
    --success-tint: #E6F4EA;
    --sidebar-text: #EAF0FF;
    --sidebar-muted: #9FB3DE;
    --sidebar-border: rgba(234, 240, 255, .12);
    --radius: 10px;
    --shadow-elevated: 0 1px 1px rgba(11, 27, 59, .04), 0 6px 12px -4px rgba(11, 27, 59, .1), 0 24px 48px -16px rgba(11, 27, 59, .18), 0 2px 0 rgba(255, 255, 255, .6) inset;
    --font-display: 'Sora', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

/* Dark theme — same token set/approach as dashboard.css. login.php's
   own screen background is already a fixed dark gradient regardless of
   theme (see .login-screen below), so this mostly affects the floating
   card and register.php's two-panel form side. */
html[data-theme="dark"] {
    --bg: #0B1220;
    --surface: #131B2E;
    --line: #262F45;
    --ink: #E7ECF7;
    --muted: #93A0BF;
    --primary: #4C7EFF;
    --primary-dark: #060B18;
    --primary-shade: #315FDB;
    --primary-tint: #182549;
    --accent: #29C7C1;
    --accent-tint: #10312F;
    --danger: #F0685A;
    --danger-tint: #3A1A1B;
    --success: #34D399;
    --success-tint: #103322;
    --sidebar-text: #EAF0FF;
    --sidebar-muted: #9FB3DE;
    --sidebar-border: rgba(234, 240, 255, .1);
    --shadow-elevated: 0 1px 1px rgba(0, 0, 0, .3), 0 6px 14px -4px rgba(0, 0, 0, .4), 0 28px 56px -16px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .04) inset;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    touch-action: pan-y;
    overscroll-behavior-x: none;
}

body {
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--ink);
    display: flex;
    min-height: 100vh;
}

.login-layout {
    display: flex;
    width: 100%;
}

/* ---------- Left: brand / signature panel ---------- */

.brand-panel {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    /* Was space-between: fine with 3 children (logo, hero, benefits —
       one clean gap between hero and benefits), but payment-trust
       added a 4th child, so space-between started inserting a
       second, separate even gap between the benefit list and the
       payment strip — an odd dead zone low in the panel. flex-start
       plus benefit-list's margin-top:auto below groups the benefit
       list + payment strip into one bottom cluster instead, so all
       the leftover space collapses into a single gap above them. */
    justify-content: flex-start;
    padding: 56px;
    background:
        radial-gradient(circle at 20% 15%, rgba(14, 165, 165, 0.12), transparent 45%),
        radial-gradient(circle at 88% 90%, rgba(29, 78, 216, 0.22), transparent 50%),
        var(--primary-dark);
    border-right: 1px solid var(--sidebar-border);
    position: relative;
    overflow: hidden;
    color: var(--sidebar-text);
}

.brand-mark {
    display: flex;
    align-items: center;
}

.brand-logo {
    /* Now using the transparent-background export, so it sits
       directly on the navy panel — no white card needed anymore. */
    display: block;
    height: 40px;
    width: auto;
}


.brand-hero {
    max-width: 380px;
    margin-top: 48px;
}

.brand-hero h1 {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.15;
    font-weight: 600;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    color: var(--sidebar-text);
}

.brand-hero p {
    color: var(--sidebar-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Signature element: short list of what an account gets a client.
   Replaces the old "Network status" strip (register.php only —
   login.php never used .status-strip, so this is a clean swap). */
.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    perspective: 800px;
    margin-top: auto;
    padding-top: 40px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--sidebar-muted);
    font-size: 13.5px;
    line-height: 1.55;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(234, 240, 255, 0.09);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 24px -16px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(16px);
    animation: benefitIn .6s cubic-bezier(.2, .8, .2, 1) forwards;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.benefit-item:nth-child(1) { animation-delay: .15s; }
.benefit-item:nth-child(2) { animation-delay: .3s; }
.benefit-item:nth-child(3) { animation-delay: .45s; }

.benefit-item:hover {
    transform: translateY(-4px) rotateX(4deg) rotateY(-2deg);
    border-color: rgba(29, 78, 216, 0.35);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 36px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(29, 78, 216, 0.14);
}

@keyframes benefitIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.benefit-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.35), transparent 55%),
        linear-gradient(145deg, #4C7EFF, var(--primary));
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(29, 78, 216, 0.55), 0 0 0 4px rgba(29, 78, 216, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.benefit-icon svg {
    width: 12px;
    height: 12px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.benefit-item:hover .benefit-icon {
    transform: scale(1.14) rotate(-8deg) translateZ(10px);
    box-shadow: 0 6px 16px -2px rgba(29, 78, 216, 0.75), 0 0 0 6px rgba(29, 78, 216, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .benefit-item { opacity: 1; transform: none; animation: none; }
}

.benefit-item strong {
    color: var(--sidebar-text);
    font-weight: 600;
}

/* Local payment trust strip — real logos already used on the billing
   pages (assets/payment-logos), surfaced here too so a Ghanaian
   client recognizes a familiar payment method before they even sign
   up. Sits below the benefit cards, same panel. */
.payment-trust {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(234, 240, 255, 0.1);
}

.payment-trust-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sidebar-muted);
    margin-bottom: 10px;
}

.payment-trust-logos {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-trust-logos img {
    height: 22px;
    width: auto;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    padding: 3px 7px;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.45);
    transition: transform .25s ease, box-shadow .25s ease;
}

.payment-trust-logos img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.5);
}

/* ---------- Right: login form panel ---------- */

.form-panel {
    flex: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--bg);
}

.login-card {
    width: 100%;
    max-width: 380px;
}

.login-card .eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* "Beta" tag next to the eyebrow, plus the fuller sentence right
   under the subtext — belt-and-suspenders so a client skimming either
   line still clocks that this is the new, still-being-tested portal
   (and, via .old-dashboard-btn below, always has a way back to the
   one they already know). */
.beta-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent-tint, var(--primary-tint));
    color: var(--accent, var(--primary));
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.beta-note {
    margin: -4px 0 20px;
    font-size: 12.5px;
    color: var(--muted);
}

.login-card h2 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 8px;
}

.login-card .subtext {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 32px;
}

.field {
    margin-bottom: 20px;
}

.field label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}

.field input {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-size: 14.5px;
    font-family: var(--font-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field select {
    width: 100%;
    padding: 12px 38px 12px 14px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2398A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-size: 14.5px;
    font-family: var(--font-body);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field select:invalid {
    color: #98A3B8;
}

.field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.field input::placeholder {
    color: #98A3B8;
}

.field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
}

.field label .optional {
    color: #98A3B8;
    font-weight: 400;
}

.field-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #98A3B8;
}

.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    font-size: 13.5px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.remember-me input {
    accent-color: var(--primary);
}

.forgot-link {
    color: var(--primary);
    text-decoration: none;
}

.forgot-link:hover {
    text-decoration: underline;
}

.btn-primary {
    width: 100%;
    padding: 13px 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.05s ease;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-primary:active {
    transform: translateY(1px);
}

.security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.security-note svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--accent);
}

.error-banner {
    display: none;
    background: var(--danger-tint);
}

.error-banner.is-visible {
    display: block;
    border: 1px solid rgba(192, 57, 43, 0.35);
    color: var(--danger);
    font-size: 13.5px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.success-banner {
    display: none;
    background: var(--success-tint);
}

.success-banner.is-visible {
    display: block;
    border: 1px solid rgba(30, 142, 62, 0.35);
    color: var(--success);
    font-size: 13.5px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* ---------- Two-step registration ----------
   Progressive enhancement: without JS, .form-step elements and the
   real submit button all render at once (exactly like the old single-
   page form), so the account can still be created with JS off. With
   JS, body.js-enabled hides step 2 and swaps in Continue/Back, so
   the form is split into two shorter screens. */
.step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
}

.step-indicator .step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.step-indicator .step-track {
    flex: 1;
    height: 2px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
}

.step-indicator .step-track::after {
    content: "";
    display: block;
    height: 100%;
    width: 0%;
    background: var(--primary);
    transition: width .25s ease;
}

.step-indicator .step-label {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

body.js-enabled .step-indicator.at-step-2 .step-dot.step-dot-1 {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

body.js-enabled .step-indicator.at-step-2 .step-track::after {
    width: 100%;
}

body.js-enabled .step-indicator.at-step-2 .step-dot.step-dot-2 {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Hidden until JS confirms it can drive the stepper; without this,
   Continue/Back would show up on top of a form that never advances. */
.js-only {
    display: none;
}

body.js-enabled .js-only {
    display: inline-flex;
}

/* Class-based, not inline-style-based: JS only ever adds/removes
   .is-active, never touches style.display directly. (An earlier
   version had goToStep() clear the hidden step's inline style with
   style.display = '' to reveal it — but an empty inline value doesn't
   override a stylesheet rule, so it silently fell back to this very
   rule's display:none and the step never actually showed. Class
   toggling can't have that failure mode.) Step 1 ships with
   .is-active already in the markup, so no-JS visitors and the
   pre-JS-execution instant both show it — see the form markup. */
body.js-enabled .form-step {
    display: none;
}

body.js-enabled .form-step.is-active {
    display: block;
}

.step-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.step-actions .btn-primary {
    flex: 1;
}

.btn-secondary {
    padding: 13px 18px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.btn-secondary:hover {
    background: var(--bg);
    border-color: var(--muted);
}

.form-footer {
    margin-top: 28px;
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
}

.form-footer a {
    color: var(--primary);
    text-decoration: none;
}

.form-footer a:hover {
    text-decoration: underline;
}

/* "Login to Old Dashboard" — shortcut to the previous Vikalink client
   portal (dashboard.vikalink.com) for anyone who'd rather sign in
   there while this rebuilt portal is still in beta, or who hasn't
   been migrated over yet. Sits between the form-footer link and
   back-to-site, styled as a secondary (outlined, not filled) action
   so it doesn't compete with .btn-primary's "Sign in"/"Create
   account" as the page's main call to action. */
.old-dashboard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 11px 14px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.old-dashboard-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.old-dashboard-btn:hover {
    background: var(--primary-tint);
    border-color: var(--primary);
    color: var(--primary);
}

.back-to-site {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
}

.back-to-site a {
    color: var(--muted);
    text-decoration: none;
}

.back-to-site a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* ---------- Login screen (billing/index.html's #loginScreen, ported) ----------
   Centered floating card over a dark gradient, drifting icon-mark
   background, and a bouncing/floating logo-mark — same markup/animation
   shape as the Admin Dashboard's login screen. Only used by login.php;
   register.php still uses the two-panel .login-layout above. */

.login-screen {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--primary-dark), #132B5E);
    padding: 64px 16px;
    position: relative;
    /* Was overflow:hidden — that was only ever needed to clip the
       drifting background icons, which already clip themselves via
       .login-bg-marks' own overflow:hidden below. Left on this outer
       wrapper, it also clipped the floating logo mark (pulled up
       above the card by .login-mark-wrap's negative margin) whenever
       the centered card was taller than the viewport, with no way to
       scroll and reveal it. overflow-y:auto lets the page scroll
       instead of silently chopping content off the top. */
    overflow-y: auto;
}

.login-bg-marks {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.drift-mark {
    position: absolute;
    bottom: -80px;
    opacity: 0;
    filter: drop-shadow(0 0 10px rgba(126, 166, 255, 0.25));
    animation-name: driftUp;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

.drift-mark.d1 { left: 12%; width: 34px; animation-duration: 16s; animation-delay: .5s; }
.drift-mark.d2 { left: 78%; width: 22px; animation-duration: 13s; animation-delay: 3.5s; }
.drift-mark.d3 { left: 60%; width: 46px; animation-duration: 19s; animation-delay: 7s; }
.drift-mark.d4 { left: 28%; width: 18px; animation-duration: 11s; animation-delay: 9.5s; }

@keyframes driftUp {
    0% { transform: translateY(0) translateX(0) rotate(-6deg); opacity: 0; }
    8% { opacity: .22; }
    50% { transform: translateY(-52vh) translateX(14px) rotate(5deg); opacity: .16; }
    92% { opacity: .1; }
    100% { transform: translateY(-108vh) translateX(-10px) rotate(-4deg); opacity: 0; }
}

.login-floating-card {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border-radius: 14px;
    padding: 34px 32px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    text-align: center;
    transition: background-color .15s ease;
}

.login-floating-card .field,
.login-floating-card .field-row,
.login-floating-card .error-banner,
.login-floating-card .success-banner,
.login-floating-card form {
    text-align: left;
}

/* Theme toggle — floats top-right of the screen on login/register,
   which have no topbar to dock it in like the dashboard shell does. */
.theme-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(234, 240, 255, .18);
    background: rgba(234, 240, 255, .08);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.theme-toggle:hover {
    background: rgba(234, 240, 255, .16);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* register.php's older two-panel layout has no .login-screen wrapper,
   so its toggle needs to be positioned relative to the page instead. */
.login-layout .theme-toggle {
    position: fixed;
    /* login.php's toggle colors (var(--sidebar-text), a near-white
       overlay) only work because that page's background is always a
       dark gradient regardless of theme. register.php's toggle sits
       over .form-panel instead, which is light in light mode — so
       those same colors made the button nearly invisible there.
       Use the theme-following tokens instead so it's visible in
       both themes. */
    color: var(--ink);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: 0 4px 14px -6px rgba(11, 27, 59, 0.25);
}

html[data-theme="dark"] .login-layout .theme-toggle {
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
}

.login-layout .theme-toggle:hover {
    background: var(--bg);
}

.login-mark-wrap {
    display: flex;
    justify-content: center;
    margin: -64px 0 10px;
}

.login-mark {
    width: 60px;
    height: 60px;
    display: block;
    animation: markIn .7s cubic-bezier(.2, 1.4, .4, 1) both, markFloat 4.5s ease-in-out .7s infinite;
    filter: drop-shadow(0 10px 18px rgba(29, 78, 216, 0.45));
}

@keyframes markIn {
    0% { opacity: 0; transform: translateY(10px) scale(.5) rotate(-14deg); }
    60% { opacity: 1; transform: translateY(-6px) scale(1.08) rotate(4deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes markFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); filter: drop-shadow(0 10px 18px rgba(29, 78, 216, 0.45)); }
    50% { transform: translateY(-9px) rotate(4deg); filter: drop-shadow(0 18px 26px rgba(29, 78, 216, 0.6)); }
}

.login-mark:hover {
    animation-play-state: paused;
    transform: scale(1.08) rotate(-3deg);
    transition: transform .25s ease;
}

.login-logo {
    height: 38px;
    width: auto;
    display: block;
    margin: 0 auto 14px;
}

@media (prefers-reduced-motion: reduce) {
    .drift-mark { display: none; }
    .login-mark { animation: markIn .01s both; }
}

@media (max-width: 420px) {
    .login-floating-card { padding: 26px 20px; }
    .login-screen { padding: 28px 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* Registration card is a touch wider than login, since it carries more
   fields. Unlike login.php's floating card, register.php's plain
   .login-card had no background/border/shadow of its own before —
   this gives it the same card treatment (and a small entrance
   animation) so it doesn't look flat sitting on .form-panel's bg. */
.register-card {
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 40px 36px 36px;
    box-shadow: 0 20px 50px rgba(11, 27, 59, 0.10);
    animation: registerCardIn .45s cubic-bezier(.2, .8, .2, 1) both;
}

html[data-theme="dark"] .register-card {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

@keyframes registerCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* register.php's .form-panel just centers the card in the page (no
   dark full-bleed background like login.php's .login-screen), and the
   register card is taller (more fields). The shared .login-mark-wrap's
   -64px pull-up assumes headroom that isn't there here, so it shoves
   the mark above the viewport instead of just above the card. Give the
   register card a much smaller pull so the mark stays on-screen,
   sitting just above the card edge instead of floating free. */
.register-card .login-mark-wrap {
    margin: -20px 0 14px;
}

@media (prefers-reduced-motion: reduce) {
    .register-card { animation: registerCardIn .01s both; }
}

/* Mobile */
@media (max-width: 860px) {
    .login-layout {
        flex-direction: column;
    }

    /* The -20px pull-up above was tuned for desktop, where the card
       sits in a tall, empty .form-panel. On mobile the card is the
       first thing in view right after (or mid-scroll past) the brand
       panel, so that same pull routinely lands the mark right on the
       fold — half swallowed above the visible area, which is the
       "logo hides" bug. Dropping the pull to 0 keeps the mark fully
       inside the card's own padding box, so it can't straddle a
       scroll boundary regardless of viewport height. */
    .register-card .login-mark-wrap {
        margin: 0 0 14px;
    }

    .field-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .brand-panel {
        border-right: none;
        border-bottom: 1px solid var(--sidebar-border);
        padding: 32px 28px;
        flex: none;
    }

    .brand-hero {
        margin-top: 28px;
    }

    .brand-hero h1 {
        font-size: 30px;
    }

    .benefit-list,
    .payment-trust {
        /* Both dropped on mobile (not just benefit-list) to keep the
           brand panel compact above the fold — the form itself is
           the priority on a small screen, and payment methods are
           shown again later in the actual billing flow anyway. */
        display: none;
    }

    .form-panel {
        padding: 32px 24px;
        flex: none;
    }
}

@media (max-width: 480px) {
    .brand-panel {
        padding: 24px 20px;
    }

    .brand-hero h1 {
        font-size: 26px;
    }

    .form-panel {
        padding: 24px 16px;
    }

    .register-card {
        padding: 28px 20px 24px;
        border-radius: 14px;
    }

    .field-grid {
        gap: 0;
    }

    .theme-toggle {
        width: 40px;
        height: 40px;
    }

    /* iOS Safari auto-zooms the page on focus for any input under
       16px, which feels broken on a form this size. Bump to 16px on
       mobile only, so desktop keeps its tighter 14.5px sizing. */
    .field input,
    .field select {
        font-size: 16px;
    }
}


/* ---------------------------------------------------------------
   Pre-login quick-contact widget (login.php / register.php)

   Same floating-button-opens-a-panel pattern as the real live-chat
   widget on every authenticated page (.fab-chat/.chat-window in
   dashboard.css, wired up in partials/footer.php) — deliberately
   reusing those exact class names so it looks and animates
   identically here. Trimmed to just .chat-window-head plus a short
   Call/WhatsApp list instead of a message thread: this widget has no
   signed-in client to poll/post a chat thread for (see
   partials/prelogin-support.php's own docblock), so it only offers
   the two channels that already work without one.
------------------------------------------------------------------ */
.fab-chat {
    position: fixed;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 200;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-shade) 100%);
    color: #fff;
    font: 600 14px/1 var(--font-body);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(11,27,59,.16), 0 8px 16px -6px rgba(11,27,59,.24);
    transform: translateY(24px) scale(.85);
    opacity: 0;
    animation: fabPopIn .5s cubic-bezier(.34,1.56,.64,1) .3s forwards;
    transition: transform .2s ease, box-shadow .2s ease;
}
.fab-chat:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 4px 8px rgba(11,27,59,.2), 0 10px 20px -6px rgba(11,27,59,.32);
}
.fab-chat:active { transform: translateY(-1px) scale(.98); }
.fab-chat-icon-wrap {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
}
.fab-chat-icon-wrap::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    animation: fabPulseRing 2.4s ease-out infinite;
}
.fab-chat-icon-wrap svg { position: relative; width: 20px; height: 20px; }

@keyframes fabPopIn {
    from { opacity: 0; transform: translateY(24px) scale(.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fabPulseRing {
    0%   { transform: scale(.7); opacity: .9; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

.chat-window {
    position: fixed;
    right: 24px;
    bottom: 82px;
    z-index: 210;
    width: 320px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
    transform-origin: bottom right;
    transform: translateY(16px) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
}
.chat-window.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.chat-window[hidden] { display: none; }

.chat-window-head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px 16px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-shade) 100%);
    color: #fff;
}
.chat-window-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.chat-window-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-window-title { font: 700 15px/1.2 var(--font-display); }
.chat-window-subtitle { font: 400 12px/1.3 var(--font-body); opacity: .85; }
.chat-window-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease;
}
.chat-window-close:hover { background: rgba(255, 255, 255, .32); }
.chat-window-close svg { width: 14px; height: 14px; }

.prelogin-contact-list {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 2px;
}
.prelogin-contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink);
    transition: background .15s ease;
}
.prelogin-contact-link:hover { background: var(--bg); }
.prelogin-contact-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary-tint);
    color: var(--primary);
}
.prelogin-contact-icon-whatsapp { background: #E3F6F1; color: #128C7E; }
.prelogin-contact-icon svg { width: 16px; height: 16px; }
.prelogin-contact-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prelogin-contact-title { font: 600 13px/1.3 var(--font-body); }
.prelogin-contact-sub { font: 400 12px/1.3 var(--font-body); color: var(--muted); }
.prelogin-chat-note {
    margin: 0;
    padding: 10px 14px 14px;
    font: 400 11.5px/1.4 var(--font-body);
    color: var(--muted);
    border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
    .fab-chat { right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    .chat-window {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .fab-chat { animation: none; opacity: 1; transform: none; }
    .fab-chat-icon-wrap::before { animation: none; }
    .chat-window { transition: opacity .1s linear; }
}