/* ─── FONTS ─────────────────────────────────────────── */
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v20-latin-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v20-latin-600.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v20-latin-700.woff2') format('woff2');
}

/* ─── BRAND TOKENS ───────────────────────────────────
   Mirrors the :root block in homepage.css / login.css. This file previously ran
   the same older palette login.css did (#0c2340 / #1a6abf / #5a6a82 / #2d3748).
   register.css and login.css are ~85% byte-identical; the eventual fix is a
   shared auth-base.css — see TODO § Frontend / Tech Debt. Until then, a change
   to one almost always belongs in the other. */
:root {
    --dd-navy-900: #0e2847;
    --dd-navy-rgb: 14, 40, 71;
    --dd-blue:     #2563eb;
    --dd-blue-700: #1d4ed8;
    --dd-blue-rgb: 37, 99, 235;
    --dd-text:        #1e293b;
    --dd-muted:       #64748b;
    --dd-muted-light: #94a3b8;
    --dd-border:      #e2e8f0;
    --dd-surface:     #f8fafc;
    --dd-danger:      #b42318;
    --dd-danger-bg:   #fef3f2;
    --dd-danger-border: #fecdca;
    --dd-radius-input: 10px;
}

/* ─── BASE ───────────────────────────────────────────── */
body {
    font-family: 'Poppins', sans-serif;
    color: var(--dd-text);
}

/* ─── LAYOUT ─────────────────────────────────────────── */
.login-wrapper {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;   /* iOS: 100vh is the LARGE viewport */
}

/* Geometry matched to login.css — these two pages are one click apart and had
   five gratuitous differences (panel padding, form width, title size, sub
   margin, divider margin). */
.login-panel {
    width: 100%;
    max-width: 560px;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 32px 56px 24px;
    position: relative;
    z-index: 1;
}

.login-image {
    flex: 1;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.login-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ─── BRAND ──────────────────────────────────────────── */
.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--dd-navy-900);
    font-weight: 700;
    font-size: 1.2rem;
    /* without this the anchor — and its focus ring — spans the whole panel */
    align-self: flex-start;
}

.login-brand img {
    width: 28px;
    height: 28px;
}

.login-brand:hover {
    color: var(--dd-navy-900);
}

/* ─── FORM CONTAINER ─────────────────────────────────── */
.login-form-container {
    width: 100%;
    max-width: 400px;
    margin: auto;
    padding: 40px 0;
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--dd-navy-900);
    margin-bottom: 6px;
}

.login-sub {
    color: var(--dd-muted);
    font-size: 0.95rem;
    margin-bottom: 28px;
}

/* ─── NAME ROW ───────────────────────────────────────── */
.reg-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ─── FORM CONTROLS ──────────────────────────────────── */
.form-control {
    border-color: var(--dd-border);
    border-radius: var(--dd-radius-input);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;   /* under 16px triggers iOS Safari's zoom-on-focus */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    border-color: var(--dd-blue);
    box-shadow: 0 0 0 3px rgba(var(--dd-blue-rgb), 0.25);   /* was 0.12 — invisible in glare */
}

.form-floating > label {
    color: var(--dd-muted);
    font-size: 0.95rem;
}

/* The brand link (first tab stop) and text links were previously bare. */
.login-brand:focus-visible,
.login-link:focus-visible,
.password-toggle:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--dd-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.form-check-input:focus {
    border-color: var(--dd-blue);
    box-shadow: 0 0 0 3px rgba(var(--dd-blue-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--dd-blue);
    border-color: var(--dd-blue);
}

/* ─── BUTTON ─────────────────────────────────────────── */
/* See login.css — Bootstrap 5.3's `.btn:focus-visible` outranks a raw-property
   `.btn-dd` and blanks the label colour with no focus ring on keyboard focus.
   Driven through the --bs-btn-* API instead; colours unchanged. */
.btn-dd {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dd-blue);
    --bs-btn-border-color: var(--dd-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dd-blue-700);
    --bs-btn-hover-border-color: var(--dd-blue-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dd-blue-700);
    --bs-btn-active-border-color: var(--dd-blue-700);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dd-blue);
    --bs-btn-disabled-border-color: var(--dd-blue);
    --bs-btn-focus-shadow-rgb: var(--dd-blue-rgb);
    border-radius: var(--dd-radius-input);
    font-weight: 600;
    min-height: 52px;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-dd:hover { transform: translateY(-1px); }
.btn-dd:active { transform: translateY(0); }

/* ─── PASSWORD TOGGLE ───────────────────────────────── */
.password-field {
    position: relative;
}

/* 44px target (was ~24px), and reachable by keyboard — the markup used to carry
   tabindex="-1". register.js reveals it with style.display = 'block', so the
   icon is centred with text-align/line-height rather than flex, which a JS
   'block' assignment would override. */
.password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--dd-muted-light);
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    text-align: center;
    line-height: 44px;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
    z-index: 10;
    display: none;
}

.password-toggle:hover {
    color: var(--dd-blue);
    background: var(--dd-surface);
}

/* See login.css — the reveal toggle and Bootstrap's validation glyph both want
   the right-hand slot; the interactive control keeps it. Matters more here,
   since "These passwords don't match" fires while both fields have content, so
   the eye is always visible when the error shows. */
.password-field .form-control.is-invalid {
    background-image: none;
    padding-right: 52px;
}

/* ─── PASSWORD STRENGTH ─────────────────────────────── */
/* Sits directly under the password field it measures now, so it no longer needs
   the negative pull that used to yank it under the CONFIRM input. */
.reg-strength {
    height: 4px;
    border-radius: 4px;
    background: var(--dd-border);
    overflow: hidden;
    margin-top: -4px;
}

/* The password rule, stated up front (same component as /passwordupdate/). */
.pu-rule {
    background: var(--dd-surface);
    border: 1px solid var(--dd-border);
    border-left: 3px solid var(--dd-blue);
    border-radius: 8px;
    padding: 11px 13px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--dd-text);
    margin-bottom: 16px;
}

.reg-strength::after {
    content: '';
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
    width: var(--strength-width, 0%);
    background: var(--strength-color, #e2e8f0);
}

/* ─── LINKS ──────────────────────────────────────────── */
.login-link {
    color: var(--dd-blue);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.login-link:hover {
    color: var(--dd-blue-700);
    text-decoration: underline;
}

.login-sub-small {
    font-size: 0.875rem;
    color: var(--dd-muted);
}

.login-remember {
    font-size: 0.9rem;
    color: var(--dd-muted);
}

/* A real alert block, not a bare red line. Visibility is driven by :empty —
   register.js shows a message by assigning textContent alone, so a class-gated
   rule would silently swallow every error on this page. */
.login-alert {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--dd-danger);          /* #b42318 — 6.64:1, up from #c0392b's 5.44:1 */
    background: var(--dd-danger-bg);
    border: 1px solid var(--dd-danger-border);
    border-radius: var(--dd-radius-input);
    padding: 11px 13px;
    margin-bottom: 18px;
}

.login-alert:empty { display: none; }

.login-divider {
    border-color: var(--dd-border);
    opacity: 1;
    margin: 22px 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 768px) {
    /* Top-anchored, not centred: a centred card re-centres inside the ~45%-height
       viewport when the soft keyboard opens, which can put the focused field
       under the keyboard. */
    .login-wrapper {
        align-items: flex-start;
        justify-content: center;
        padding: 0;
    }

    /* OPAQUE, no backdrop blur — matches login.css. The old translucent frosted
       card over a brightness(0.65) photo was the worst-case contrast on a phone
       in direct sun, and once the palette moved to --dd-muted (#64748b) it
       became an outright AA failure (~3.95:1) on the subtitle, labels and the
       Terms line. The two stacked compositing layers also cost real frames on a
       mid-range Android. Don't reintroduce the frost without re-checking
       contrast. */
    .login-panel {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 24px 22px 18px;
        border-radius: 0;
        background: #fff;
        backdrop-filter: none;
        box-shadow: none;
        min-height: 100dvh;
    }

    .login-form-container { max-width: 440px; padding: 24px 0; }
    .login-title { font-size: 1.5rem; }

    /* Form-first. The photo earns nothing on a phone and was previously a
       full-screen decorative fetch on a truck's cell connection. */
    .login-image { display: none; }

    .reg-name-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .reg-name-row .form-floating:first-child {
        margin-bottom: 12px;
    }
}

/* ─── REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .btn-dd:hover, .btn-dd:active { transform: none; }
}

/* Honeypot. Off-screen rather than `display:none` or `visibility:hidden` — both of those are
   the first things a bot author filters out, and a field nothing can see is a field nothing
   bothers to fill. Mirrors `.contact-hp` in homepage.css; the two surfaces are deliberately
   identical to a scraper. The markup carries `aria-hidden` and `tabindex="-1"`, so this costs
   a screen-reader or keyboard user nothing. */
.reg-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}