/**
 * Login / signup split layout. Loads after landing.css (for the shared
 * guest header) and theme.css (for the Bootstrap form controls).
 */

body.pv-auth-page { background: #fff; }

.pv-auth {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 100vh;
    /* the header overlaps the grid, so the panel can reach the top */
    margin-top: -68px;
}

/* The header keeps its links and buttons but loses its background, so the
   navy panel shows through uninterrupted. */
body.pv-auth-page .ld-nav {
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
}
/* The logo keeps its landing-page position; it sits over the navy panel, so
   it is inverted to white. The marketing links are dropped here — they would
   straddle the panel edge, and they are noise on a login screen. */
/* The header content lives in a centred 1180px container, so on wide screens
   the logo drifts right of the 300px panel — a white-inverted logo on a white
   page. Pinning it to the panel keeps it on navy at every width. */
body.pv-auth-page .ld-nav-logo {
    position: absolute;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
}
body.pv-auth-page .ld-nav-logo img { filter: brightness(0) invert(1); }
body.pv-auth-page .ld-nav-links { display: none; }

/* ---- left brand panel: flat navy, message anchored to the bottom ---- */
.pv-auth-brand {
    background: var(--ld-navy-deep);
    color: #fff;
    padding: 44px 34px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Runs the full height, including behind the header — otherwise the nav
       bar cuts a white notch out of the top of the panel. */
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
}

.pv-auth-brand-inner { max-width: 16rem; }

.pv-auth-brand h2 {
    color: #fff;
    margin: 0 0 14px;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.pv-auth-brand p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

/* ---- right form column ---- */
.pv-auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px 72px;
}

@media (min-width: 1280px) {
    .pv-auth-main { padding-right: 300px; }
}

.pv-auth-form { width: 100%; max-width: 380px; }
.pv-auth-form.is-wide { max-width: 620px; }

.pv-auth-form h1 {
    margin: 0 0 6px;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ld-ink);
}

.pv-auth-lead {
    margin: 0 0 28px;
    font-size: .95rem;
    color: var(--ld-mut);
}

/* form controls inherit theme.css; only spacing and the submit differ */
.pv-auth-form .form-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ld-ink-2);
    margin-bottom: 5px;
}

.pv-auth-form .form-control,
.pv-auth-form textarea.form-control {
    padding: 10px 13px;
    font-size: .95rem;
}

.pv-auth-form .form-group,
.pv-auth-form .mb-3 { margin-bottom: 16px; }

.pv-auth-submit {
    width: 100%;
    justify-content: center;
    padding: 12px 22px;
    font-size: 15px;
    margin-top: 4px;
}

.pv-auth-alt {
    margin-top: 22px;
    text-align: center;
    font-size: .9rem;
    color: var(--ld-mut);
}

.pv-auth-alt a { font-weight: 700; color: var(--ld-navy); }
.pv-auth-alt a:hover { text-decoration: underline; }

.pv-auth-help {
    margin-top: 14px;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--ld-mut-2);
}

.pv-auth-help a { color: var(--ld-mut); font-weight: 600; }
.pv-auth-help a:hover { color: var(--ld-ink); text-decoration: underline; }

/* remember-me row */
.pv-auth-form .form-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
.pv-auth-form .form-check-input { margin: 0; }
.pv-auth-form .form-check-label { font-size: .9rem; color: var(--ld-ink-2); }

/* ---- signup: grouped sections ---- */
.pv-auth-section { margin-bottom: 26px; }

.pv-auth-section-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ld-mut-2);
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ld-line);
}

.pv-auth-form .hint-block {
    font-size: .8rem;
    color: var(--ld-mut-2);
    margin-top: 5px;
}

/* ---- signup: business or individual ---- */
.pv-acct-choice {
    margin: 0 0 26px;
    padding: 18px;
    border: 1px solid var(--ld-line);
    border-radius: 14px;
    background: var(--ld-tint, #f5f6f8);
}

.pv-acct-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pv-acct-type {
    position: relative;
    display: block;
    padding: 16px 16px 14px 46px;
    background: #fff;
    border: 2px solid var(--ld-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pv-acct-type:hover { border-color: var(--ld-mut-2); }

.pv-acct-type.is-active {
    border-color: var(--ld-navy);
    box-shadow: 0 0 0 3px rgba(35, 43, 106, .12);
}

/* the radio stays in the DOM for keyboard and screen readers, out of the way */
.pv-acct-type input {
    position: absolute;
    top: 18px;
    left: 16px;
    margin: 0;
    accent-color: var(--ld-navy);
    width: 18px;
    height: 18px;
}

/* icon rides beside the title, not stranded under it */
.pv-acct-type i {
    font-size: 17px;
    line-height: 1;
    color: var(--ld-mut-2);
    vertical-align: -1px;
    margin-right: 7px;
}

.pv-acct-type.is-active i { color: var(--ld-navy); }

.pv-acct-type-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ld-ink);
    line-height: 1.2;
}

.pv-acct-type-note {
    display: block;
    margin-top: 4px;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--ld-mut);
}

@media (max-width: 575px) {
    .pv-acct-types { grid-template-columns: 1fr; }
}

/* ---- signup: terms and privacy consent ---- */
.pv-auth-consent {
    margin: 4px 0 20px;
    padding: 16px 18px;
    background: var(--ld-tint, #f5f6f8);
    border-radius: 10px;
}

/*
 * The shared .form-check above is a flex row, which is right for a lone
 * "remember me" but wrong here: it turns the label text, the link and the
 * error into separate columns. These rows are one wrapping sentence with a
 * box hanging off the left, so lay them out as flow text instead.
 */
.pv-auth-consent .form-check {
    display: block;
    gap: 0;
    margin: 0;
}

.pv-auth-consent .pv-consent-row + .pv-consent-row { margin-top: 10px; }

.pv-auth-consent .form-check-label {
    display: inline;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ld-ink-2);
    cursor: pointer;
}

.pv-auth-consent a { font-weight: 700; color: var(--ld-navy); text-decoration: underline; }
.pv-auth-consent a:hover { color: var(--ld-orange); }

.pv-auth-consent .invalid-feedback {
    display: block;
    margin-top: 4px;
    font-size: .8rem;
}

#lursoft-result { font-size: .9rem; }

/* ---- responsive: brand panel becomes a slim intro above the form ---- */
@media (max-width: 991px) {
    .pv-auth { grid-template-columns: 1fr; min-height: 0; margin-top: 0; }
    body.pv-auth-page .ld-nav { background: rgba(255,255,255,.86); backdrop-filter: blur(12px); }
    body.pv-auth-page .ld-nav-logo { position: static; transform: none; }
    body.pv-auth-page .ld-nav-logo img { filter: none; }
    .pv-auth-brand-inner { max-width: none; }
    .pv-auth-brand { padding: 32px 24px; position: static; height: auto; }
    .pv-auth-brand h2 { font-size: 1.4rem; }
    .pv-auth-brand p { font-size: .92rem; }
    .pv-auth-main { padding: 36px 24px 56px; }
}


/* Captcha: the stock template put the image in a narrow grid column, where
   max-width shrank a 170x60 image to about 43px wide and made it unreadable. */
.pv-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pv-captcha img {
    width: 170px;
    height: 60px;
    max-width: none;
    flex: 0 0 auto;
    border: 1px solid var(--ld-line);
    border-radius: 10px;
    cursor: pointer;
}
.pv-captcha input { flex: 1 1 160px; min-width: 0; }