/* =====================================================================
   Popups - new design layer (v2)
   ---------------------------------------------------------------------
   Reusable styling for the account / subscription popups. Apply by adding
   the `popup-v2` modifier class to a popup's `.nli-overlay` element; the
   rules below restyle the shared `.nli-*` markup (defined in styles2.css)
   to the new design without disturbing popups that have not migrated yet.

   As each popup adopts the new look, just add `popup-v2` to its overlay.
   All colors use master-color tokens (css/master-colors.css) - no hex.
   ===================================================================== */

/* ---- Shell: wider modal, white card, form panel wider than the hero ---- */
.popup-v2 .nli-modal {
    width: min(835px, 100%);
    border-radius: 14px;
    box-shadow: 0 30px 90px rgba(var(--color-gray-900-rgb), 0.35);
}

.popup-v2 .nli-modal-shell {
    grid-template-columns: 0.75fr 1fr;
    background: var(--color-white-1);
}

/* ---- Left hero panel ---- */
.popup-v2 .nli-hero {
    padding: 34px 30px 34px 50px;
    border-radius: 14px 0 0 14px;
}

.popup-v2 .pv2-logo {
    width: 180px;
    height: auto;
    display: block;
    margin: 5px 0 6px;
}

/* Muted single-line hero footer (e.g. the login modal's sync note), used in
   place of the bullet list. Sits at the bottom of the hero via the hero's
   space-between layout. */
.popup-v2 .pv2-hero-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(var(--color-white-1-rgb), 0.65);
}

.popup-v2 .pv2-hero-footer i {
    font-size: 14px;
    opacity: 0.8;
    flex-shrink: 0;
}

/* Smaller, regular-weight bullet text in the hero */
.popup-v2 .nli-hero-list {
    font-size: 11.5px;
}

.popup-v2 .nli-hero-list strong {
    font-weight: 400;
}

/* Decorative teal underline below the hero heading */
.popup-v2 .pv2-accent {
    width: 50px;
    height: 3px;
    margin: 0 0 14px;
    border-radius: 2px;
    background: var(--color-button-primary-bg);
}

.popup-v2 .nli-hero h2 {
    margin: 0 0 10px;
    padding-top: 18px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.4px;
}

.popup-v2 .nli-hero p {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(var(--color-white-1-rgb), 0.82);
}

/* ---- Right content panel: white and roomy ---- */
.popup-v2 .nli-content {
    background: var(--color-white-1);
    padding: 31px 40px 20px;
    gap: 14px;
}

.popup-v2 .nli-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ui-text-primaryText);
}

.popup-v2 .nli-subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--ui-text-secondaryText);
}

/* ---- Close button pinned to the modal's top-right corner ---- */
.popup-v2 .nli-xbtn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

/* ---- Input fields with a leading icon ---- */
.popup-v2 .pv2-field {
    position: relative;
    display: block;
}

.popup-v2 .pv2-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-mutedText);
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

.popup-v2 .pv2-field .nli-input {
    padding-left: 40px;
}

/* ---- "or" divider lines tinted with brand teal (matches the CTA) ---- */
.popup-v2 .nli-divider::before,
.popup-v2 .nli-divider::after {
    background: var(--color-button-primary-bg);
    height: 2px;
}

/* ---- Secondary "Log in" / inline links tinted with brand teal ---- */
.popup-v2 .nli-fineprint a {
    color: var(--color-button-primary-bg);
    font-weight: 600;
}

.popup-v2 .nli-fineprint a:hover {
    color: var(--color-button-primary-bg-hover);
}

/* ---- Responsive: stack the panels on narrow screens ---- */
@media (max-width: 760px) {
    .popup-v2 .nli-modal-shell {
        grid-template-columns: 1fr;
    }
    .popup-v2 .nli-hero {
        border-radius: 14px 14px 0 0;
    }
}