/* ==================== MANUAL CLAIM WIZARD (V3) — the single claim wizard ==================== */
/* V3 is the one and only claim wizard for everyone (the old multi-view
   split no longer exists).
   Base styling comes from create-claim-v2.css (shared .v2-* classes).
   Add any V3-specific overrides below. */

/* Policy form gating — the rest of the New Policy form is locked until the
   "Is the insurance through an employer?" question is answered (Yes/No). */
.v3-policy-gated {
    transition: opacity 0.2s ease;
}
.v3-policy-gated.is-locked {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
/* Amber prompt shown under the employer question while it's unanswered */
.v3-gate-hint {
    display: none;
    margin-top: 8px;
    padding: 7px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 12px;
    color: #92400e;
}
.v3-gate-hint i {
    margin-right: 5px;
}
body.dark-theme .v3-gate-hint {
    background: rgba(146, 64, 14, 0.18);
    border-color: rgba(253, 230, 138, 0.35);
    color: #fcd34d;
}

/* "Email needed for e-Signatures" — a small on-brand green callout so it
   stands out from a plain gray hint. */
.v3-esign-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 11px;
    background: #eaf6ee;
    border: 1px solid #bfe3cb;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1E6332;
    line-height: 1.3;
}
.v3-esign-hint i { font-size: 12px; color: #2F8542; }
body.dark-theme .v3-esign-hint {
    background: rgba(47, 133, 66, 0.14);
    border-color: rgba(47, 133, 66, 0.35);
    color: #6ee7a0;
}
body.dark-theme .v3-esign-hint i { color: #6ee7a0; }

/* Marital status chips — compact; wrap gracefully inside the column
   (no longer forced onto one line, which would clip in the two-col grid) */
.v3-marital-chips {
    flex-wrap: wrap;
}
.v3-marital-chips .v2-chip span {
    white-space: nowrap;
}

/* "Adopted" chip — the value already stored in the CRM for this record when it
   matches none of the standard options. Marital Status and Manner of Death are
   free-text fields in Zoho, so anything can be in there. Rendered in caramel
   with a dashed border so it reads as "existing value", not a normal choice.
   Long or junk values are truncated; the full string is in the title tooltip. */
.v2-chip.v3-chip-adopted span {
    border-style: dashed;
    border-color: #c19a6b;
    background: #fdf8f1;
    color: #8a6536;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.v2-chip.v3-chip-adopted:hover span {
    border-color: #c19a6b;
    background: #f8efe1;
}
.v2-chip.v3-chip-adopted input:checked + span {
    background: linear-gradient(135deg, #c19a6b, #a8834f);
    border-color: #a8834f;
    color: #fff;
    box-shadow: 0 2px 8px rgba(193, 154, 107, .3);
}
body.dark-theme .v2-chip.v3-chip-adopted span {
    background: rgba(193, 154, 107, .12);
    border-color: #c19a6b;
    color: #d9b98f;
}
body.dark-theme .v2-chip.v3-chip-adopted input:checked + span {
    color: #fff;
}

/* Beneficiary DOB notices — span the FULL row below the DOB/Relationship row. */
/* Future-DOB error (hard stop on save) */
.v3-dob-error {
    width: 100%;
    margin: -2px 0 12px;
    color: #dc2626;
    font-size: 12.5px;
    font-weight: 600;
}
/* Minor-beneficiary warning (soft, non-blocking) — mirrors the legacy Hub. */
.v3-minor-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: -2px 0 12px;
    padding: 10px 12px;
    background: #fff7f7;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #214A3E;
}
.v3-minor-warning i {
    color: #dc2626;
    font-size: 15px;
    margin-top: 1px;
    flex-shrink: 0;
}
body.dark-theme .v3-minor-warning {
    background: rgba(220, 38, 38, 0.12);
    color: var(--theme-text);
    border-left-color: #ef4444;
}
body.dark-theme .v3-minor-warning i { color: #f87171; }

/* ==================== STEP 1 — TWO-COLUMN LAYOUT ==================== */
/* Step 1 holds two columns side-by-side (Location + Contact | Decedent).
   The default .v2-panel-inner max-width:700px is too narrow for that —
   widen it the same way Step 3 does, so the screen isn't wasted on the
   sides and the form needs far less vertical scrolling. */
.v2-panel[data-step="1"] > .v2-panel-inner.v3-step1-inner {
    max-width: min(1500px, 96vw);
}

.v3-step1-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.v3-step1-col {
    min-width: 0;
}

/* The two column headers (Location / Decedent) start at the same baseline */
.v3-step1-col > .v2-panel-header:first-child {
    margin-bottom: 14px;
}

/* ==================== STEP 1 DENSITY ==================== */
/* Same look, much less vertical scrolling: tighter card chrome, field
   spacing, section labels and dividers — scoped to Step 1 only. */
.v2-panel[data-step="1"] > .v2-panel-inner.v3-step1-inner {
    padding-top: 24px;
}

.v3-step1-grid .v2-card {
    padding: 16px 18px;
    margin-bottom: 12px;
}
.v3-step1-grid .v2-card:last-child {
    margin-bottom: 0;
}
.v3-step1-grid .v2-section-label {
    margin-bottom: 12px;
    padding-bottom: 8px;
}
.v3-step1-grid .v2-field {
    margin-bottom: 12px;
}
.v3-step1-grid .v2-row {
    gap: 12px;
}
.v3-step1-grid .v2-divider {
    margin: 14px 0;
}

/* Tighter panel headers so the form starts higher */
.v3-step1-col > .v2-panel-header {
    margin-bottom: 14px;
}

/* Compact chips (marital + manner of death) */
.v3-step1-grid .v2-chip span {
    padding: 6px 12px;
    font-size: 0.78rem;
}

/* Death Details: Manner of Death + "in the U.S.?" side-by-side on desktop;
   Manner gets the bulk of the width, the Yes/No question stays snug. */
.v3-death-row {
    align-items: flex-start;
}
.v3-death-row > .v2-field {
    flex: 1 1 auto;
}
.v3-death-row > .v3-death-us {
    flex: 0 0 auto;
}

/* ==================== CONTACT INFORMATION ==================== */
.v3-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    transition: all 0.2s ease;
}

/* Primary contact (the logged-in user) — branded, non-removable */
.v3-contact-primary .v3-contact-row {
    border-color: rgba(47, 133, 66, 0.35);
    background: linear-gradient(135deg, rgba(30, 99, 50, 0.05), rgba(47, 133, 66, 0.08));
}

.v3-contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2F8542, #18A74B);
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.25);
}

.v3-contact-avatar.v3-contact-avatar-alt {
    background: linear-gradient(135deg, #C19A6B, #a87f4f);
    box-shadow: 0 2px 8px rgba(193, 154, 107, 0.25);
}

.v3-contact-info {
    flex: 1;
    min-width: 0;
}

.v3-contact-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v3-contact-meta {
    font-size: 0.78rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.v3-contact-meta i {
    width: 12px;
    margin-right: 3px;
    opacity: 0.7;
}

.v3-contact-badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2F8542, #18A74B);
    color: #fff;
}

/* Additional Contacts header (label + selected counter) */
.v3-contacts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.v3-contacts-count {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2F8542;
    background: #F4F0E9;
    padding: 3px 10px;
    border-radius: 20px;
}

.v3-contacts-count.at-max {
    color: #92400e;
    background: #fef3c7;
}

/* Search box (shown only for longer contact lists) */
.v3-contacts-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.v3-contacts-search:focus-within {
    border-color: #18A74B;
}

.v3-contacts-search i {
    color: #94a3b8;
    font-size: 0.82rem;
}

.v3-contacts-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    color: #1e293b;
}

.v3-contact-empty {
    width: 100%;
    font-size: 0.82rem;
    color: #94a3b8;
    padding: 14px 2px;
    text-align: center;
}

.v3-contact-empty i {
    margin-right: 5px;
    opacity: 0.7;
}

/* Contact chip grid — every contact at the selected location as a compact
   tap-to-link pill. The grid scrolls internally (capped height) so a long
   contact list never makes the whole Step 1 form tall. */
.v3-contact-chips {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

/* Column header for the compact contact list (sticky inside the scroll box). */
.v3-clist-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 26px minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) 22px;
    gap: 10px;
    align-items: center;
    padding: 7px 12px;
    background: #F4F0E9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
}

.v3-contact-chips::-webkit-scrollbar {
    width: 8px;
}
.v3-contact-chips::-webkit-scrollbar-track {
    background: transparent;
}
.v3-contact-chips::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2F8542, #1E6332);
    border-radius: 8px;
}

.v3-cchip {
    display: grid;
    grid-template-columns: 26px minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) 22px;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 7px 12px;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.14s ease;
}
.v3-cchip:last-child { border-bottom: none; }

.v3-cchip:hover {
    background: #F4F0E9;
}

.v3-cchip.selected {
    background: linear-gradient(135deg, rgba(30, 99, 50, 0.06), rgba(47, 133, 66, 0.11));
}

.v3-cchip.selected:hover {
    background: linear-gradient(135deg, rgba(30, 99, 50, 0.10), rgba(47, 133, 66, 0.15));
}

.v3-cchip.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.v3-cchip-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #64748b, #475569);
}

.v3-cchip.selected .v3-cchip-avatar {
    background: linear-gradient(135deg, #2F8542, #18A74B);
}

.v3-cchip-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    min-width: 0;
}

.v3-cchip-email,
.v3-cchip-title {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    min-width: 0;
}

.v3-cchip-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #94a3b8;
    transition: color 0.16s ease;
}

.v3-cchip.selected .v3-cchip-icon {
    color: #2F8542;
}

/* Loading state (reused for the contact chip area) */
.v3-contact-pick-loading {
    padding: 18px 14px;
    text-align: center;
    font-size: 0.82rem;
    color: #94a3b8;
    width: 100%;
}

.v3-contact-pick-loading i {
    margin-right: 6px;
}

/* ==================== STEP 2 — TWO-COLUMN LAYOUT ==================== */
/* Policies (left) | Beneficiaries (right) — side by side so you don't
   scroll past a long policy form to reach beneficiaries. Same compact
   rhythm as Step 1. Natural heights (no equal-height stretch) because
   the inline forms toggle open/closed independently. */
.v2-panel[data-step="2"] > .v2-panel-inner.v3-step2-inner {
    max-width: min(1500px, 96vw);
    padding-top: 24px;
}

.v3-step2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.v3-step2-col {
    min-width: 0;
}

.v3-step2-col > .v2-panel-header:first-child {
    margin-bottom: 14px;
}

/* Column balance: keep "Add Policy" and "Add Beneficiary" aligned no matter how
   tall the policy vs beneficiary cards are (or how many there are). When neither
   inline form is open, the two columns are equal height and each list grows to
   push its Add button to the bottom. While a form is open (.v3-form-open, set by
   _v3SyncStep2Layout) this is turned OFF so editing one side never stretches the
   other. The empty state only renders when a form is closed, so no edit-time gap. */
.v3-step2-grid:not(.v3-form-open) {
    align-items: stretch;
}
.v3-step2-grid:not(.v3-form-open) > .v3-step2-col {
    display: flex;
    flex-direction: column;
}
.v3-step2-grid:not(.v3-form-open) > .v3-step2-col > .v2-items-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Empty state — centered, with a little presence when a whole column is empty. */
.v3-step2-grid .v2-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 12px 20px;
}
.v3-step2-grid .v2-empty-state i {
    font-size: 32px;
    margin-bottom: 10px;
}

/* Density — mirrors Step 1 so the form needs far less scrolling */
.v3-step2-grid .v2-panel-header {
    margin-bottom: 14px;
}
.v3-step2-grid .v2-inline-form {
    padding: 18px;
}
.v3-step2-grid .v2-field {
    margin-bottom: 12px;
}
.v3-step2-grid .v2-row {
    gap: 12px;
}
.v3-step2-grid .v2-section-label {
    margin-bottom: 12px;
    padding-bottom: 8px;
}
.v3-step2-grid .v2-divider {
    margin: 14px 0;
}
.v3-step2-grid .v2-card {
    padding: 14px 16px;
    margin-bottom: 12px;
}
.v3-step2-grid .v2-chip span {
    padding: 6px 12px;
    font-size: 0.78rem;
}
.v3-step2-grid .v2-add-btn {
    padding: 12px;
    font-size: 0.9rem;
}

/* ----- Accordion edit: card + its form read as one expanded panel ----- */
/* The card being edited squares its bottom and drops its bottom border so
   the relocated inline form (placed directly under it) connects seamlessly,
   instead of the form appearing as a detached box at the bottom. */
.v2-item-card.v3-item-editing {
    border-color: #18A74B;
    background: linear-gradient(135deg, rgba(30, 99, 50, 0.04), rgba(47, 133, 66, 0.07));
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.v2-item-card.v3-item-editing:hover {
    transform: none;
    border-color: #18A74B;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Beneficiaries use the SAME green identity as policies (no pink). These
   V3-scoped rules override the shared base .beneficiary-item / .v2-item-icon
   pink styling from create-claim-wizard.css. */
.v3-step2-grid .v2-item-card.beneficiary-item {
    border-left-color: #1E6332;
}
.v3-step2-grid .v2-item-card.beneficiary-item:hover {
    border-color: #a7f3d0;
}
.v3-step2-grid .v2-item-icon.beneficiary {
    background: linear-gradient(135deg, #1E6332, #2F8542);
    box-shadow: 0 3px 8px rgba(30, 99, 50, 0.25);
}
/* While expanded for edit, keep the green editing border (not pink) */
.v3-step2-grid .v2-item-card.beneficiary-item.v3-item-editing {
    border-left-color: #18A74B;
}

.v2-inline-form.v3-form-inline-edit {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 8px 24px rgba(30, 99, 50, 0.10);
}

/* No floating top accent bar mid-accordion */
.v2-inline-form.v3-form-inline-edit::before {
    display: none;
}

/* ----- Collapsed-card side info: use the empty horizontal space ----- */
/* A right-aligned secondary zone between the details and the action
   buttons. Policies show a linked-beneficiary count; beneficiaries show
   their linked policies. Kept light so cards stay clean, not busy. */
.v3-step2-grid .v3-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 14px;
    max-width: 45%;
    text-align: right;
}

.v3-step2-grid .v3-side-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
}

.v3-step2-grid .v3-side-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.v3-step2-grid .v3-side-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #1E6332;
    background: linear-gradient(135deg, #F4F0E9, #E8DFD0);
    white-space: nowrap;
}

.v3-step2-grid .v3-side-count i {
    font-size: 0.72rem;
    opacity: 0.85;
}

.v3-step2-grid .v3-side-count.v3-side-count-zero {
    color: #94a3b8;
    background: #f1f5f9;
}

/* Small inline meta chip (e.g. Employer on a policy card) */
.v3-step2-grid .v3-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v3-step2-grid .v3-meta-tag i {
    font-size: 0.66rem;
    opacity: 0.8;
}

/* ===== Policy card: title row (IC name + feature icons) + labeled stats ===== */
.v3-pol-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* IC name keeps the ellipsis behavior; feature icons never shrink */
.v3-pol-ic-name {
    flex: 1;
    min-width: 0;
}
.v3-pol-feats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.v3-pol-feats img { display: block; }
/* Inside the "Link to Policies" checkbox label, render the icons inline so they
   sit on the same row as the IC name. */
.v2-policy-check-label .v3-pol-feats {
    display: inline-flex;
    vertical-align: middle;
    gap: 7px;
    margin: 0 6px;
}

/* Organized, labeled stat blocks (Policy # / Face / Service / Family Pay) */
.v3-pol-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 11px;
}
.v3-pol-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.v3-pol-stat-lbl {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    white-space: nowrap;
}
.v3-pol-stat-lbl i { font-size: 0.62rem; margin-right: 4px; opacity: 0.85; }
.v3-pol-stat-val {
    font-size: 0.86rem;
    font-weight: 600;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.v3-pol-stat-emp .v3-pol-stat-val {
    font-weight: 500;
    color: #475569;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The Service amount reuses the claims-list .claims-net-* hover popover. Drop the
   extra weight/color since the .claims-net-value already styles it (green + dotted
   underline) so it reads as interactive. */
.v3-pol-stat .claims-net-cell { font-size: 0.86rem; }

/* CRITICAL stacking fix: .v2-item-card:hover applies transform: translateY(-1px),
   which creates a stacking context on the hovered card. Without a z-index, a LATER
   sibling card (z-index: auto) paints OVER this card's whole context — including the
   popover — so the next policy's green Service value bled through the popup. Lift the
   hovered card above its siblings so the popover (z-index inside it) covers them. */
.v3-step2-grid .v2-item-card { position: relative; }
.v3-step2-grid .v2-item-card:hover,
.v3-step2-grid .v2-item-card:focus-within { z-index: 1000; }

/* Policy amounts run far larger than the claim list (and show cents), so the 240px
   popover wrapped its rows. Grow the box to fit and keep every $ value on one line
   (matches the clean single-line rows of the claim-list popover). */
.v3-pol-stat .claims-net-popover,
.v3-rev-sec .claims-net-popover {
    min-width: 300px;
    width: max-content;
    max-width: 420px;
}
.v3-pol-stat .claims-net-popover-row,
.v3-rev-sec .claims-net-popover-row { gap: 28px; }
.v3-pol-stat .claims-net-popover-row > strong,
.v3-rev-sec .claims-net-popover-row > strong { white-space: nowrap; }

/* Relationship pill next to a beneficiary's name */
.v3-step2-grid .v3-ben-rel {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #1E6332;
    background: #F4F0E9;
    vertical-align: middle;
}

/* Contact line icons inside the beneficiary meta */
.v3-step2-grid .v3-ben-contact span i {
    width: 12px;
    margin-right: 4px;
    opacity: 0.7;
}
.v3-step2-grid .v3-meta-empty {
    font-style: italic;
    color: #b0b8c4;
}

@media (max-width: 768px) {
    /* On phones the card wraps; the side info drops below, full width */
    .v3-step2-grid .v2-item-card {
        flex-wrap: wrap;
    }
    .v3-step2-grid .v3-item-side {
        max-width: 100%;
        margin-left: 56px;
        align-items: flex-start;
        text-align: left;
        padding-left: 0;
        padding-top: 8px;
    }
    .v3-step2-grid .v3-side-badges {
        justify-content: flex-start;
    }
    /* Tighter stat row on phones */
    .v3-pol-stats { gap: 9px 18px; }
}

/* ==================== STEP 3 SUMMARY GRID ==================== */
.v3-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
    margin-top: 6px;
}
.v3-summary-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.v3-summary-field.v3-summary-full {
    grid-column: 1 / -1;
}
.v3-summary-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.v3-summary-value {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

/* ==================== BENEFICIARY SUMMARY CARDS ==================== */
.v3-bene-summary-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fafafa;
}
.v3-bene-summary-card:last-child {
    margin-bottom: 0;
}
/* Pack each beneficiary's short fields (DOB / SSN / Phone / Email) across the
   full width of the card instead of one/two per row, so the card stays compact
   and doesn't push the page down. Full-width fields (Address / Linked Policies /
   Notes) still span all columns via .v3-summary-full (grid-column: 1 / -1). */
.v3-bene-summary-card .v3-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px 18px;
}
.v3-bene-summary-card .v3-summary-value { word-break: break-word; }
.v3-bene-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.v3-bene-rel-chip {
    font-size: 11px;
    color: #214A3E;
    background: #F4F0E9;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

/* Step-3 review Policies table — IC cell: badge + claim chip + feature icons inline */
.v3-rev-ic-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.v3-rev-ic-cell .v3-pol-feats { flex-shrink: 0; }

/* ==================== READ-ONLY FINANCIAL SUMMARY ==================== */
.v3-financial-readonly {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
}
.v3-fin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13px;
}
.v3-fin-row.v3-fin-subtotal {
    font-weight: 600;
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
    margin-top: 4px;
}
.v3-fin-row.v3-fin-total {
    font-weight: 700;
    font-size: 15px;
    border-top: 2px solid #1E6332;
    padding-top: 8px;
    margin-top: 6px;
}
.v3-fin-row.v3-fin-note {
    font-size: 11px;
    padding: 0 0 2px;
}

/* ---- Edit mode: Before → After financial impact ---- */
.v3-financial-ba .v3-fin-ba-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
    gap: 8px;
    flex-wrap: wrap;
}
.v3-financial-ba .v3-fin-ba-head-l {
    font-weight: 700;
    font-size: 13px;
    color: #1E6332;
}
.v3-financial-ba .v3-fin-ba-head-l i { margin-right: 6px; }
.v3-financial-ba .v3-fin-ba-head-cols {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9ca3af;
}
.v3-financial-ba .v3-fin-ba-head-cols i { font-size: 9px; color: #cbd5e1; }
.v3-financial-ba .v3-fin-ba-nochange {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 4px 0 8px;
}
.v3-financial-ba .v3-fin-ba-nochange i { color: #1E6332; }
.v3-fin-ba-vals {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.v3-fin-ba-old {
    color: #9ca3af;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.v3-fin-ba-arrow { font-size: 10px; color: #cbd5e1; }
.v3-fin-ba-new { font-weight: 600; }
.v3-fin-ba-same { color: #374151; }
.v3-fin-ba-delta {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(30, 99, 50, .07);
}
.v3-fin-row.v3-fin-ba-changed {
    background: rgba(193, 154, 107, .08);
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
}
.v3-fin-row.v3-fin-total .v3-fin-ba-new,
.v3-fin-row.v3-fin-total .v3-fin-ba-same { color: #1E6332; }

/* Summary panel (step 3) — two-column top + full-width bottom. Widened to
   match Steps 1 & 2 so the screen space is used well. */
.v2-panel[data-step="3"] > .v2-panel-inner {
    max-width: min(1500px, 96vw);
    padding-top: 32px;
}

/* TOP: Location/Contacts/Decedent | Policies & Beneficiaries (+ Financial) */
.v3-step3-grid {
    display: grid;
    /* Step 2 (Policies + Beneficiaries + Financial Summary) is wider than Step 1. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 22px;
    align-items: start;
    margin-bottom: 22px;
}

/* BOTTOM: Documents | Forms & Actions — same column widths as the top grid so
   Documents lines up under Step 1 and Forms & Actions under Step 2. */
.v3-step3-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 22px;
    align-items: start;
}

/* Review cards fill their grid cell (equal height per row) and need no bottom margin. */
.v3-step3-grid .v3-step3-card,
.v3-step3-bottom .v3-step3-card {
    margin-bottom: 0;
    height: 100%;
}

/* Financial Summary folded into the Policies & Beneficiaries card */
.v3-review-subsection {
    border-top: 1px dashed #e2e8f0;
    margin: 4px 22px 0;
    padding: 16px 0 18px;
}

.v3-review-subhead {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #214A3E;
    margin-bottom: 10px;
}

.v3-review-subhead i {
    color: #2F8542;
}

/* Forms & Actions — stacked full-width buttons */
.v3-step3-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Buttons reuse Bootstrap .btn.btn-outline-success so they match the
   claim-detail Quick Actions exactly (same style/fonts/hover); just force
   full width inside the stacked flex column. */
.v3-step3-actions .btn {
    flex: none;
    width: 100%;
}

/* Conditional Claim Forms block (only when an IC has a forms URL) */
.v3-claim-forms {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e2e8f0;
}

.v3-claim-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f9fafb;
    margin-bottom: 10px;
}

.v3-claim-form-row:last-child {
    margin-bottom: 0;
}

.v3-claim-form-ic {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.85rem;
}

.v3-claim-form-poa {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.45;
}

.v3-claim-form-poa i {
    color: #2F8542;
    margin-top: 2px;
    flex-shrink: 0;
}

.v3-claim-form-btn {
    text-decoration: none;
}

/* ===== E-Signature availability callout (Forms & Actions) ===== */
.v3-esign-avail {
    margin-bottom: 14px;
    padding: 14px;
    border: 1.5px solid #2F8542;
    border-radius: 14px;
    background: linear-gradient(135deg, #F4F0E9 0%, #eaf5ee 100%);
    box-shadow: 0 2px 10px rgba(30, 99, 50, 0.10);
}
.v3-esign-avail--none {
    border-color: #e2e8f0;
    background: #f8fafc;
    box-shadow: none;
}
.v3-esign-avail-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.v3-esign-avail-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2F8542 0%, #1E6332 100%);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.25);
}
.v3-esign-avail--none .v3-esign-avail-icon {
    background: #94a3b8;
    box-shadow: none;
}
.v3-esign-avail-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.v3-esign-avail-badge {
    align-self: flex-start;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #1E6332;
    background: #fff;
    border: 1px solid #2F8542;
    border-radius: 20px;
    padding: 2px 9px;
}
.v3-esign-avail--none .v3-esign-avail-badge {
    color: #64748b;
    border-color: #cbd5e1;
}
.v3-esign-avail-lead {
    font-size: 0.82rem;
    font-weight: 600;
    color: #214A3E;
    line-height: 1.4;
}
.v3-esign-avail--none .v3-esign-avail-lead {
    color: #475569;
    font-weight: 500;
}
.v3-esign-avail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.v3-esign-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    border: 1px solid transparent;
}
.v3-esign-chip.ok {
    color: #1E6332;
    background: #e7f0ea;
    border-color: #b6dcc3;
    cursor: help;
}
.v3-esign-chip.warn {
    color: #b45309;
    background: #fef3c7;
    border-color: #fde68a;
    cursor: help;
}
.v3-esign-chip.no {
    color: #8a6536;
    background: #f6efe4;
    border-color: #e6d6bd;
    cursor: help;
}
.v3-esign-chip i { font-size: 0.78rem; }

/* "?" help button on the callout header */
.v3-esign-avail-help {
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #b6dcc3;
    background: #fff;
    color: #1E6332;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.v3-esign-avail-help:hover {
    background: #1E6332;
    color: #fff;
    border-color: #1E6332;
    transform: scale(1.06);
}
.v3-esign-avail--none .v3-esign-avail-help {
    border-color: #cbd5e1;
    color: #64748b;
}
.v3-esign-avail--none .v3-esign-avail-help:hover {
    background: #64748b;
    color: #fff;
    border-color: #64748b;
}

/* Body-level help popover (mirrors the Claims Status "?" popover) */
.v3-esign-help-pop {
    position: fixed;
    z-index: 10500;
    width: 380px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.20);
    overflow: hidden;
    animation: v3EhPop 0.14s ease;
}
@keyframes v3EhPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.v3-eh-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: linear-gradient(135deg, #2F8542 0%, #1E6332 100%);
    color: #fff;
}
.v3-eh-title { font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 7px; }
.v3-eh-close {
    margin-left: auto;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 24px; height: 24px;
    border-radius: 6px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.v3-eh-close:hover { background: rgba(255,255,255,0.3); }
.v3-eh-body { padding: 13px 15px; }
.v3-eh-intro { margin: 0 0 10px; font-size: 0.8rem; color: #475569; line-height: 1.5; }
.v3-eh-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px solid #f0ece3; }
.v3-eh-leg { font-size: 0.72rem; font-weight: 600; color: #475569; display: inline-flex; align-items: center; gap: 5px; }
.v3-eh-row { display: flex; flex-direction: column; gap: 3px; padding: 7px 0; }
.v3-eh-row + .v3-eh-row { border-top: 1px dashed #f0ece3; }
.v3-eh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
}
.v3-eh-badge.ok { color: #1E6332; background: #e7f0ea; }
.v3-eh-badge.warn { color: #b45309; background: #fef3c7; }
.v3-eh-badge.no { color: #8a6536; background: #f6efe4; }
.v3-eh-desc { font-size: 0.76rem; color: #475569; line-height: 1.45; }
.v3-esign-avail-note {
    margin-top: 10px;
    font-size: 0.74rem;
    color: #475569;
    line-height: 1.45;
}
.v3-esign-avail-note i { color: #2F8542; margin-right: 4px; }

/* ===== Submit area ===== */
/* Desktop: the footer carries the submit buttons, so hide this in-body copy.
   Mobile: the footer e-sign button is hidden (cramped), so show it here instead. */
.v3-submit-area {
    display: none;
    flex-direction: column;
    align-items: stretch;
}
@media (max-width: 768px) {
    .v3-submit-area { display: flex; }
}
/* Two compact side-by-side buttons (same height as the footer .v2-btn) — the
   green e-sign primary + a lighter green-outline secondary (slight color
   difference, very similar shape). Centered + content-sized like the footer. */
.v3-submit-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}
.v3-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.v3-submit-btn i { font-size: 0.95rem; }
/* Primary — recommended path */
.v3-submit-esign {
    background: linear-gradient(135deg, #2F8542 0%, #1E6332 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.25);
}
.v3-submit-esign:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(30, 99, 50, 0.32);
}
/* Secondary — both buttons are green; this one is a softer tonal green (clearly
   recessed vs the bold primary, but never white). */
.v3-submit-plain2 {
    background: #cbe5d4;
    color: #16532a;
    border-color: #a9d3ba;
}
.v3-submit-plain2:hover {
    background: #b9dcc5;
    border-color: #2F8542;
}

/* ===== Footer: "Submit Claim" + "Submit & Send for E-Signatures" pair ===== */
.v3-footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Prominent e-sign button (matches the summary e-sign primary) */
.v3-footer-esign {
    background: linear-gradient(135deg, #2F8542 0%, #1E6332 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.3);
}
.v3-footer-esign:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 99, 50, 0.4);
}
/* "Submit Claim" demoted to the softer tonal green secondary while the e-sign
   button is shown (both green, clearly different; higher specificity beats
   .v2-btn-primary). */
.v2-btn.v3-footer-plain {
    background: #cbe5d4;
    color: #16532a;
    border: 1.5px solid #a9d3ba;
    box-shadow: none;
}
.v2-btn.v3-footer-plain:hover {
    background: #b9dcc5;
    border-color: #2F8542;
    transform: none;
    box-shadow: none;
}

/* Mobile: the footer is tight, and the summary body already shows the prominent
   e-sign pair — so hide the footer e-sign there and keep "Submit Claim" primary. */
@media (max-width: 768px) {
    .v3-footer-esign { display: none !important; }
    .v2-btn.v3-footer-plain {
        background: linear-gradient(135deg, #2F8542, #18A74B);
        color: #fff;
        border-color: transparent;
    }
}

/* ===== Post-submit "Send for E-Signatures" chooser ===== */
.esps-modal { max-width: 640px; width: 94%; }
.esps-header .esign-modal-title i { color: #2F8542; }
.esps-body { padding: 20px 22px; }
.esps-lead {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.5;
    margin: 0 0 16px 0;
}
.esps-lead strong { color: #1E6332; }
.esps-row {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
}
.esps-row:last-child { margin-bottom: 0; }
.esps-row.is-eligible { border-left: 4px solid #2F8542; }
.esps-row.is-wet { border-left: 4px solid #C19A6B; background: #fbfaf7; }
.esps-row--sent { background: #f3faf5; border-color: #b6dcc3; }
.esps-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.esps-row-ic { font-weight: 700; color: #0f172a; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.esps-row-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.esps-pol { font-size: 0.78rem; color: #64748b; }
.esps-pol i { font-size: 0.7rem; margin-right: 2px; }
.esps-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.esps-tag-ok { color: #1E6332; background: #e7f0ea; }
.esps-tag-wet { color: #8a6536; background: #f6efe4; }
.esps-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #fef9ec;
    border: 1px solid #f5e3b3;
    font-size: 0.76rem;
    color: #8a6536;
    line-height: 1.45;
}
.esps-warn i { margin-top: 2px; flex-shrink: 0; color: #d97706; }
.esps-row-action {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.esps-row-action--wet { margin-top: 8px; }
.esps-wet-note { font-size: 0.78rem; color: #64748b; line-height: 1.45; }
.esps-send-again { opacity: 0.85; }
.esps-sent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1E6332;
}
.esps-sent i { color: #2F8542; }

/* ===== Pre-submit E-Signature flow (select → confirm → sending → summary) ===== */
/* Wide so each claim's financial breakdown + beneficiaries sit side by side
   (less vertical scrolling). */
.esf-modal { width: min(1080px, 94vw); max-width: 94vw; }
.esf-body { padding: 18px 22px; }
.esf-intro { margin: 0 0 14px; font-size: 0.86rem; color: #475569; line-height: 1.5; }

/* ── Confirm screen: wide two-pane (review | live PDF preview) ── */
.esf-confirm-modal { width: 96vw; max-width: 1600px; height: 94vh; display: flex; flex-direction: column; }
.esf-confirm-2pane { display: flex; gap: 0; padding: 0; flex: 1; min-height: 0; overflow: hidden; }
.esf-confirm-left {
    flex: 1 1 46%; min-width: 0; max-width: 620px;
    overflow-y: auto; padding: 18px 22px;
    border-right: 1px solid #e8e3da; background: #fcfbf9;
}
.esf-confirm-right {
    flex: 1 1 54%; min-width: 0;
    display: flex; flex-direction: column;
    background: #f1f3f5;
}
.esf-prev-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid #e2e5e9; background: #fff;
    flex-shrink: 0;
}
.esf-prev-title { font-size: 0.95rem; font-weight: 800; color: #1E6332; display: flex; align-items: center; gap: 8px; }
.esf-prev-who {
    font-size: 0.8rem; color: #475569; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef2f0; border: 1px solid #d8e3dc; border-radius: 16px; padding: 4px 12px;
    max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.esf-prev-who i { color: #2F8542; }
.esf-prev-ictabs {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 10px 18px; background: #fff; border-bottom: 1px solid #eceae5; flex-shrink: 0;
}
.esf-prev-ictab {
    border: 1.5px solid #e2e8f0; background: #fff; border-radius: 9px;
    padding: 6px 12px; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: #475569;
    display: inline-flex; align-items: center; gap: 6px; transition: all 0.12s;
}
.esf-prev-ictab:hover { border-color: #2F8542; }
.esf-prev-ictab.active { border-color: #1E6332; background: #e7f0ea; color: #1E6332; box-shadow: 0 0 0 2px rgba(30,99,50,0.12); }
.esf-prev-subbar { padding: 10px 18px 0; background: #fff; flex-shrink: 0; }
.esf-prev-recips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.esf-prev-recip-pill {
    border: 1.5px solid #e2e8f0; background: #fff; border-radius: 20px;
    padding: 4px 12px 4px 4px; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: #475569;
    display: inline-flex; align-items: center; gap: 7px;
}
.esf-prev-recip-pill:hover { border-color: #2F8542; }
.esf-prev-recip-pill.active { border-color: #1E6332; background: #e7f0ea; color: #1E6332; }
.esf-prev-recip-av {
    width: 22px; height: 22px; border-radius: 50%; background: #2F8542; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800;
}
.esf-prev-signorder {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #f6f8f7; border: 1px solid #e6ebe8; border-radius: 9px;
    padding: 9px 12px; margin-bottom: 12px;
}
.esf-prev-signorder-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #1E6332; display: flex; align-items: center; gap: 6px; }
.esf-prev-signer { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #334155; }
.esf-prev-signer-num {
    width: 20px; height: 20px; border-radius: 50%; background: #1E6332; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0;
}
.esf-prev-signer-role { font-size: 0.72rem; color: #94a3b8; }
.esf-prev-signer-email { font-size: 0.74rem; color: #64748b; }
.esf-prev-stage { position: relative; flex: 1; min-height: 0; margin: 0 18px 16px; border-radius: 10px; overflow: hidden; background: #e9ebee; border: 1px solid #dcdfe3; }
.esf-prev-frame { width: 100%; height: 100%; border: none; background: #fff; }
.esf-prev-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    color: #64748b; font-size: 0.85rem; background: #f1f3f5; z-index: 2;
}
.esf-prev-empty { align-items: center; justify-content: center; }
.esf-prev-empty-inner { text-align: center; color: #94a3b8; padding: 30px; }
.esf-prev-empty-inner i { font-size: 38px; color: #cbd5e1; margin-bottom: 12px; }
.esf-prev-empty-title { font-size: 0.95rem; font-weight: 700; color: #64748b; }
.esf-prev-empty-sub { font-size: 0.82rem; color: #94a3b8; margin-top: 4px; max-width: 320px; }
/* Clickable e-sign claim rows on the left drive the preview */
.esf-claim-row--clickable { cursor: pointer; transition: box-shadow 0.12s, border-color 0.12s; }
.esf-claim-row--clickable:hover { box-shadow: 0 2px 10px rgba(30,99,50,0.12); }
.esf-claim-row--active { box-shadow: 0 0 0 2px #1E6332 inset; }
.esf-claim-preview-hint {
    margin-left: auto; font-size: 0.72rem; font-weight: 700; color: #1E6332;
    display: inline-flex; align-items: center; gap: 5px;
}
@media (max-width: 980px) {
    .esf-confirm-modal { width: 98vw; height: 96vh; }
    .esf-confirm-2pane { flex-direction: column; overflow-y: auto; }
    .esf-confirm-left { max-width: none; flex: none; border-right: none; border-bottom: 1px solid #e8e3da; }
    .esf-confirm-right { flex: none; height: 70vh; }
}

/* Per-claim card (e-sign / wet / needs-email) */
.esf-ic {
    border: 1px solid #e2e8f0;
    border-left: 5px solid #2F8542;
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.esf-ic:last-child { margin-bottom: 0; }
.esf-ic--esign { border-left-color: #2F8542; }
.esf-ic--wet   { border-left-color: #c19a6b; background: #fdfbf8; }
.esf-ic--email { border-left-color: #f59e0b; background: #fffdf6; }
.esf-ic-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.esf-ic-name { font-weight: 700; color: #0f172a; font-size: 0.92rem; flex: 1; min-width: 0; }
/* Mode pill on each claim card */
.esf-mode {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.esf-mode-esign { color: #1E6332; background: #e7f0ea; }
.esf-mode-email { color: #92400e; background: #fef3c7; }
.esf-mode-wet { color: #8a5a12; background: #f6ecdd; }

/* Two-column body: key amounts | beneficiaries (or note) */
.esf-claim-body { display: flex; gap: 18px; align-items: flex-start; }
.esf-claim-fin { flex: 1 1 0; min-width: 0; }
.esf-claim-side { flex: 1 1 0; min-width: 0; }

/* Inline claim meta — Policy # · Face · Assignment · Net on one line. */
.esf-meta-pair { display: inline-flex; align-items: baseline; gap: 5px; }
.esf-ic-meta .claims-net-value { font-size: 0.84rem; }
.esf-ic-meta .claims-net-value.esf-amt-net { font-weight: 800; }
.esf-ic-meta .claims-net-popover { min-width: 300px; width: max-content; max-width: 380px; }
.esf-ic-meta .claims-net-popover-row { gap: 24px; }
.esf-ic-meta .claims-net-popover-row > strong { white-space: nowrap; }

/* Beneficiary checkboxes — full width below the meta, flowing into columns. */
.esf-claim-benes { margin-top: 11px; padding-top: 11px; border-top: 1px dashed #e5e7eb; }
.esf-bene-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px 16px; }
.esf-side-lbl {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: #1E6332; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.esf-side-note {
    font-size: 0.8rem; line-height: 1.5; border-radius: 9px; padding: 11px 13px;
}
.esf-side-note-head { font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.esf-side-note--wet { background: #f6ecdd; border: 1px solid #e3c9a3; color: #6b4a28; }
.esf-side-note--wet .esf-side-note-head { color: #8a5a12; }
.esf-side-note--email { background: #fef3c7; border: 1px solid #fde68a; color: #8a5a12; }
.esf-side-note--email .esf-side-note-head { color: #92400e; }
.esf-all-btn {
    background: #e7f0ea; color: #1E6332; border: 1px solid #cfe6d8;
    border-radius: 16px; font-size: 0.72rem; font-weight: 700; padding: 3px 11px; cursor: pointer;
    flex-shrink: 0;
}
.esf-all-btn:hover { background: #d7e9de; }
.esf-ic-warn {
    display: flex; align-items: flex-start; gap: 7px;
    background: #fef9ec; border: 1px solid #f5e3b3; border-radius: 8px;
    padding: 7px 10px; margin-bottom: 8px; font-size: 0.76rem; color: #8a6536; line-height: 1.45;
}
.esf-ic-warn i { color: #d97706; margin-top: 2px; flex-shrink: 0; }
.esf-empty { font-size: 0.8rem; color: #94a3b8; padding: 6px 2px; }

/* Per-IC policy meta line + financial breakdown */
.esf-ic-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    font-size: 0.8rem; color: #334155; margin: 2px 0 9px;
    font-variant-numeric: tabular-nums;
}
.esf-ic-meta-lbl { color: #94a3b8; font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; }
.esf-meta-sep { color: #cbd5e1; }
.esf-ic-fin {
    background: #f6faf8;
    border: 1px solid #e3ece7;
    border-radius: 9px;
    padding: 8px 11px;
    margin-bottom: 10px;
}
/* The financial-totals box sits inside its own section panel on the confirm
   screen — keep it flat so it isn't a box-in-a-box. */
.esf-ic-fin.esf-fin-totals { background: transparent; border: none; padding: 0; margin-bottom: 0; }
.esf-fin-row {
    display: flex; justify-content: space-between; gap: 16px;
    font-size: 0.8rem; padding: 3px 0; color: #334155;
    font-variant-numeric: tabular-nums;
}
.esf-fin-row.fp strong { color: #1E6332; }
.esf-fin-row.minus strong { color: #6b7280; }
.esf-fin-row.net {
    border-top: 1px solid #e3ece7; margin-top: 4px; padding-top: 6px; font-weight: 700;
}
.esf-fin-row.net span { color: #1E6332; }
.esf-fin-row.net strong { color: #2F8542; }

/* Beneficiary checkbox row */
.esf-bene {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 8px; border-radius: 9px; cursor: pointer;
    transition: background 0.12s ease;
}
.esf-bene:hover { background: #f6faf7; }
.esf-bene.no-email { cursor: default; opacity: 0.7; }
.esf-bene.no-email:hover { background: transparent; }
.esf-bene input[type="checkbox"] { width: 18px; height: 18px; accent-color: #1E6332; flex-shrink: 0; cursor: pointer; }
.esf-bene.no-email input { cursor: default; }
.esf-bene-av {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #2F8542, #1E6332); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700;
}
.esf-bene-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.esf-bene-name { font-size: 0.86rem; font-weight: 600; color: #0f172a; }
.esf-bene-rel { font-size: 0.7rem; font-weight: 600; color: #214A3E; background: #F4F0E9; padding: 1px 7px; border-radius: 10px; margin-left: 4px; }
.esf-bene-email { font-size: 0.76rem; color: #64748b; }
.esf-bene-email i { font-size: 0.7rem; margin-right: 3px; }
.esf-bene-noemail { font-size: 0.74rem; color: #b45309; }
.esf-bene-noemail i { font-size: 0.7rem; margin-right: 3px; }
.esf-note {
    display: flex; align-items: flex-start; gap: 8px;
    background: #f1f5f9; border-radius: 9px; padding: 9px 12px; margin-top: 4px;
    font-size: 0.78rem; color: #475569; line-height: 1.45;
}
.esf-note i { color: #64748b; margin-top: 2px; flex-shrink: 0; }
.esf-note-warn { background: #fef3c7; color: #8a5a12; }
.esf-note-warn i { color: #b45309; }

/* Prominent "what's created with wet signature / needs email" callouts */
.esf-callout {
    border-radius: 12px;
    padding: 13px 15px;
    margin-top: 14px;
    border: 1.5px solid;
}
.esf-callout-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.9rem; font-weight: 800; letter-spacing: 0.2px;
    margin-bottom: 5px;
}
.esf-callout-text { font-size: 0.82rem; line-height: 1.5; }
.esf-callout-ics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.esf-callout-ic {
    display: inline-flex; align-items: center;
    background: #fff; border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px; padding: 4px 10px; font-size: 0.82rem; font-weight: 700; color: #0f172a;
}
/* Wet signature — caramel, the most important "not e-signed" warning */
.esf-callout--wet { background: #fbf2e6; border-color: #e3c9a3; }
.esf-callout--wet .esf-callout-head { color: #8a5a12; }
.esf-callout--wet .esf-callout-head i { color: #b45309; }
.esf-callout--wet .esf-callout-text { color: #6b4a28; }
/* Needs email — amber */
.esf-callout--email { background: #fef3c7; border-color: #fde68a; }
.esf-callout--email .esf-callout-head { color: #92400e; }
.esf-callout--email .esf-callout-head i { color: #b45309; }
.esf-callout--email .esf-callout-text { color: #8a5a12; }

/* Select-screen footer: hint on the left (margin-right:auto), Cancel + Continue right. */
.esf-continue-hint {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 600; color: #b45309; margin-right: auto;
}
.esf-continue-hint i { font-size: 0.85rem; }

/* Confirm screen */
.esf-confirm-lead {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem; color: #334155; margin-bottom: 16px;
}
.esf-confirm-lead i { color: #2F8542; font-size: 1rem; }
.esf-confirm-lead strong { color: #1E6332; }
/* Each section is its own distinct panel so the eye can separate
   Claims / Recipients / Financial at a glance. */
.esf-confirm-sec {
    background: #fbfdfc;
    border: 1px solid #e8eee9;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.esf-confirm-sec:last-of-type { margin-bottom: 4px; }
.esf-confirm-head {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: #1E6332; margin: -2px 0 12px; padding-bottom: 9px; border-bottom: 2px solid #e3ece7;
    display: flex; align-items: center; gap: 7px;
}

/* Per-claim review rows on the final confirm — white cards on the tinted panel,
   with a mode-colored left accent so e-sign vs wet vs needs-email reads instantly. */
.esf-claim-row {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #cbd5e1;
    border-radius: 11px;
    padding: 11px 13px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.esf-claim-row:last-child { margin-bottom: 0; }
.esf-claim-row--esign { border-left-color: #2F8542; }
.esf-claim-row--wet   { border-left-color: #c19a6b; }
.esf-claim-row--needs-email { border-left-color: #f59e0b; }
.esf-claim-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.esf-claim-ic { font-weight: 700; color: #0f172a; font-size: 0.88rem; }
.esf-mode {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.esf-mode-esign { color: #1E6332; background: #e7f0ea; }
.esf-mode-email { color: #92400e; background: #fef3c7; }
.esf-mode-wet { color: #8a5a12; background: #fbf2e6; }
.esf-claim-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    font-size: 0.8rem; color: #334155; margin-top: 8px; font-variant-numeric: tabular-nums;
}
.esf-claim-recips {
    font-size: 0.79rem; color: #1E6332; margin-top: 8px;
    padding-top: 8px; border-top: 1px dashed #eef0ec; line-height: 1.45;
}
.esf-claim-recips i { margin-right: 5px; }
.esf-claim-recips--none { color: #64748b; }
.esf-fin-totals .esf-fin-row.sub {
    border-top: 1px solid #e3ece7; margin-top: 4px; padding-top: 6px; font-weight: 700; color: #0f172a;
}
.esf-fin-totals .esf-fin-row.sub strong { color: #0f172a; }
.esf-recip-list { display: flex; flex-direction: column; gap: 8px; }
.esf-recipient {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #e6ebe8;
    border-radius: 10px;
}
.esf-recipient-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.esf-recipient-name { font-size: 0.86rem; font-weight: 600; color: #0f172a; }
.esf-recipient-meta { font-size: 0.76rem; color: #64748b; }
.esf-recipient-meta i { font-size: 0.7rem; margin-right: 3px; }

/* Sending state */
.esf-sending { text-align: center; padding: 40px 24px; }
.esf-check-circle {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: #e7f0ea; color: #1E6332; font-size: 30px;
}
.esf-spin i { animation: progressSpin 0.9s linear infinite; }
.esf-sending-title { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.esf-sending-sub { font-size: 0.84rem; color: #64748b; }

/* Final summary */
.esf-summary-modal { width: min(720px, 94vw); }
.esf-summary-top { text-align: center; padding: 26px 24px 20px; background: linear-gradient(180deg, #eaf6ee, #fff); }
.esf-summary-top .esf-check-circle { width: 68px; height: 68px; font-size: 34px; background: linear-gradient(135deg, #2F8542, #1E6332); color: #fff; box-shadow: 0 6px 20px rgba(30,99,50,0.35); margin-bottom: 14px; }
.esf-check-pop { animation: esfCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes esfCheckPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.esf-summary-title { font-size: 1.4rem; font-weight: 800; color: #1E6332; }
.esf-summary-sub { font-size: 0.88rem; color: #64748b; margin-top: 3px; }

/* At-a-glance KPI chips under the success header */
.esf-sum-kpis { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.esf-sum-kpi {
    display: flex; flex-direction: column; align-items: center;
    min-width: 110px; padding: 10px 16px;
    background: #fff; border: 1px solid #cfe6d8; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(30,99,50,0.06);
}
.esf-sum-kpi-num { font-size: 1.5rem; font-weight: 800; color: #1E6332; line-height: 1.1; }
.esf-sum-kpi-lbl { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; margin-top: 2px; }

.esf-sum-warn { color: #b45309; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* Claims-created cards (mode-accented) */
.esf-sum-claim {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e6ebe8; border-left: 4px solid #cbd5e1;
    border-radius: 9px; padding: 9px 12px; margin-bottom: 8px;
}
.esf-sum-claim:last-child { margin-bottom: 0; }
.esf-sum-claim--esign { border-left-color: #2F8542; }
.esf-sum-claim--wet { border-left-color: #c19a6b; }
.esf-sum-ic { font-weight: 700; color: #0f172a; font-size: 0.88rem; }
.esf-sum-pol { font-size: 0.8rem; color: #475569; }
.esf-sum-claim .esf-mode { margin-left: auto; }

/* E-signature recipient rows reuse the carded .esf-recipient look */
.esf-sum-recipient.ok .esf-sum-rec-icon { color: #1E6332; }
.esf-sum-recipient.fail { border-color: #fca5a5; background: #fef5f5; }
.esf-sum-recipient.fail .esf-sum-rec-icon { color: #dc2626; }
.esf-sum-rec-icon { font-size: 1.05rem; flex-shrink: 0; }
.esf-sum-tip {
    display: flex; align-items: flex-start; gap: 8px;
    background: #f3faf5; border: 1px solid #cfe6d8; border-radius: 9px;
    padding: 9px 12px; margin-top: 10px; font-size: 0.76rem; color: #1E6332; line-height: 1.45;
}
.esf-sum-tip i { margin-top: 2px; flex-shrink: 0; color: #2F8542; }
.esf-summary-done { width: 100%; justify-content: center; }

/* Mobile: the modal is full-screen and narrow — stack each claim card's
   financial breakdown above its beneficiaries instead of side by side. */
@media (max-width: 768px) {
    .esf-claim-body { flex-direction: column; gap: 12px; }
}

/* ----- Step 3 review body: clean, consistent, professional ----- */
/* Reusable section block + header (replaces repeated inline-styled
   headers and <hr> dividers in the summary cards). */
.v3-rev-sec {
    margin-bottom: 18px;
}
.v3-rev-sec:last-child {
    margin-bottom: 0;
}

.v3-rev-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #214A3E;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef1f5;
}
.v3-rev-head i {
    color: #2F8542;
}
.v3-rev-head .v3-rev-count {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    color: #2F8542;
    background: #F4F0E9;
    padding: 2px 9px;
    border-radius: 12px;
    letter-spacing: 0;
}

.v3-rev-subhead {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin: 14px 0 8px;
}

.v3-rev-loc {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.v3-rev-empty {
    font-size: 0.82rem;
    color: #94a3b8;
}

/* Muted "Not provided" placeholder for empty decedent fields */
.v3-rev-na {
    color: #b0b8c4;
    font-style: italic;
}

/* Decedent card — the subject of the claim, given a polished "hero" card
   consistent with the beneficiary cards in Step 2's review. */
.v3-dec-card {
    border: 1px solid #e2e8f0;
    border-left: 3px solid #2F8542;
    border-radius: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #ffffff, #fafdfb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.v3-dec-name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eef1f5;
}

.v3-dec-name i {
    color: #2F8542;
    font-size: 1.1rem;
}

/* Last field row in the decedent grid shouldn't add trailing space */
.v3-dec-card .v3-summary-grid {
    margin: 0;
}

/* Contacts — compact, no repeated labels */
.v3-csum-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(47, 133, 66, 0.3);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(30, 99, 50, 0.05), rgba(47, 133, 66, 0.08));
}

.v3-csum-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}

.v3-csum-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.v3-csum-item:hover {
    background: #f8fafc;
}

.v3-csum-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2F8542, #18A74B);
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.22);
}
.v3-csum-av.v3-csum-av-alt {
    background: linear-gradient(135deg, #64748b, #475569);
    box-shadow: none;
}

.v3-csum-info {
    min-width: 0;
    flex: 1;
}
.v3-csum-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3-csum-email {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.v3-csum-title {
    font-size: 0.66rem;
    font-weight: 600;
    color: #214A3E;
    background: #F4F0E9;
    padding: 0 6px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
}
.v3-csum-you {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 9px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2F8542, #18A74B);
    color: #fff;
}

/* ==================== MOBILE ==================== */
@media (max-width: 768px) {
    /* Step 1 — stack the two columns vertically (Location/Contact first,
       then Decedent). Keeps the small-device experience single-column. */
    .v3-step1-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .v2-panel[data-step="1"] > .v2-panel-inner.v3-step1-inner {
        max-width: 100%;
    }
    /* Long contact lists scroll instead of pushing the form down on phones */
    .v3-contact-chips {
        max-height: 260px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .v3-cchip {
        width: 100%;
    }

    /* Step 2 — stack Policies then Beneficiaries on phones */
    .v3-step2-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .v2-panel[data-step="2"] > .v2-panel-inner.v3-step2-inner {
        max-width: 100%;
    }

    /* Step 3 summary — stack everything single-column on phones */
    .v3-summary-grid,
    .v3-bene-summary-card .v3-summary-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .v3-step3-grid,
    .v3-step3-bottom {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .v3-step3-grid {
        margin-bottom: 14px;
    }
    .v3-review-subsection {
        margin-left: 16px;
        margin-right: 16px;
    }
    .v3-csum-grid {
        grid-template-columns: 1fr;
    }
    .v2-panel[data-step="3"] > .v2-panel-inner {
        max-width: 100%;
        padding-top: 24px;
    }
}

/* Tablet — narrow the two-column grid gap before fully stacking */
@media (min-width: 769px) and (max-width: 1024px) {
    .v3-step1-grid,
    .v3-step2-grid,
    .v3-step3-grid,
    .v3-step3-bottom {
        gap: 16px;
    }
}

/* Exact age the decedent lived (front-end only, shown once DOB+DOD set) */
.v3-age-line {
    margin: 10px 0 2px;
    padding: 8px 14px;
    background: #F4F0E9;
    border-left: 3px solid #1E6332;
    border-radius: 8px;
    font-size: 13px;
    color: #214A3E;
}
.v3-age-line i { color: #1E6332; margin-right: 6px; }
.v3-age-line strong { color: #1E6332; font-weight: 700; }
body.dark-theme .v3-age-line {
    background: var(--theme-surface-alt);
    color: var(--theme-text);
    border-left-color: #2F8542;
}
body.dark-theme .v3-age-line i,
body.dark-theme .v3-age-line strong { color: #6ee7b7; }

/* =====================================================================
   INLINE (outlined "floating") LABELS — Step 2 ONLY
   ---------------------------------------------------------------------
   Applied to the Insurance Policies form (#v3PolicyForm) and the
   Beneficiary form (#v3BeneficiaryForm) via the .v2-float-form class.
   The field label is notched onto the input's TOP BORDER instead of
   sitting on its own line above — reclaiming a full line of height per
   field WITHOUT changing the column layout. Step 1 (Decedent) and the
   read-only Summary are untouched.

   Exclusions: any field carrying .v2-no-float keeps a normal label —
   used for chip/toggle questions (no bordered box to notch) and the
   "Link to Policies" checkbox list.
   ===================================================================== */
.v2-float-form .v2-field:not(.v2-no-float) {
    position: relative;
    margin-top: 9px;            /* breathing room for the notched label */
}
.v2-float-form .v2-field:not(.v2-no-float) > .v2-label {
    position: absolute;
    top: -9px;
    left: 11px;
    margin: 0;
    padding: 0 5px;
    background: #fff;           /* cuts the input's top border line */
    font-size: 0.8125rem;       /* match the rest of the form's label size */
    font-weight: 600;
    color: #6b7280;
    line-height: 1.1;
    letter-spacing: 0.1px;
    z-index: 2;
    max-width: calc(100% - 26px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The "?" help icon inside a floated label shrinks with it */
.v2-float-form .v2-field:not(.v2-no-float) > .v2-label span[title],
.v2-float-form .v2-field:not(.v2-no-float) > .v2-label .v3-info-tip {
    width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    margin-left: 3px !important;
}

/* Dark theme — the notch must cut against the dark input background */
body.dark-theme .v2-float-form .v2-field:not(.v2-no-float) > .v2-label {
    background: var(--theme-input-bg);
    color: var(--theme-text-muted);
}

/* =====================================================================
   ADD / EDIT POLICY FORM — extra vertical breathing room.
   The policy form is single-column stacked (IC → Policy # → Face Amount
   → …), so the shared 12px field rhythm reads too tight, especially with
   the notched float labels sitting in the gap. The beneficiary form uses
   side-by-side rows and stays on the default spacing — these rules are
   scoped to #v3PolicyForm so beneficiaries are untouched.
   ===================================================================== */
#v3PolicyForm .v2-field {
    margin-bottom: 20px;
}
#v3PolicyForm.v2-float-form .v2-field:not(.v2-no-float) {
    margin-top: 12px;          /* a touch more room above the notched label */
}
#v3PolicyForm .v2-section-label {
    margin-bottom: 16px;
    padding-bottom: 10px;
}
#v3PolicyForm .v2-divider {
    margin: 22px 0;
}
#v3PolicyForm .v2-hint {
    margin-top: 6px;
}
/* Separate the Fee Calculator card from the Additional Notes field below it */
#v3PolicyForm .v2-card {
    margin-bottom: 24px;
}

/* =====================================================================
   "How would you like the family pay funds paid?" — custom dropdown.
   Replaces the native OS option list (which can't be styled) with a
   clean, on-brand dropdown. Wraps the hidden native <select>.
   ===================================================================== */
.v3-fpm-dd {
    position: relative;
    width: 100%;
}
.v3-fpm-dd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #1f2937;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.v3-fpm-dd-trigger:hover { border-color: #cbd5e1; }
.v3-fpm-dd-trigger.open {
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, .12);
}
.v3-fpm-dd.error .v3-fpm-dd-trigger {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.v3-fpm-dd-ticon { color: #1E6332; font-size: 0.95rem; flex-shrink: 0; }
.v3-fpm-dd-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v3-fpm-dd-trigger.is-placeholder .v3-fpm-dd-label { color: #9ca3af; }
.v3-fpm-dd-caret { color: #6b7280; font-size: 0.8rem; flex-shrink: 0; transition: transform .18s; }
.v3-fpm-dd-trigger.open .v3-fpm-dd-caret { transform: rotate(180deg); }

.v3-fpm-dd-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
}
.v3-fpm-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 0.9rem;
    color: #1f2937;
    cursor: pointer;
    transition: background .12s;
}
.v3-fpm-dd-item-txt { flex: 1; min-width: 0; }
.v3-fpm-dd-item:hover { background: #F4F0E9; }
.v3-fpm-dd-item.selected {
    background: rgba(30, 99, 50, .08);
    color: #1E6332;
    font-weight: 600;
}
.v3-fpm-dd-check { color: #1E6332; font-size: 0.8rem; flex-shrink: 0; }

/* Dark theme */
body.dark-theme .v3-fpm-dd-trigger {
    background: var(--theme-input-bg);
    border-color: var(--theme-border);
    color: var(--theme-text);
}
body.dark-theme .v3-fpm-dd-panel {
    background: var(--theme-card-bg, #1f2937);
    border-color: var(--theme-border);
}
body.dark-theme .v3-fpm-dd-item { color: var(--theme-text); }
body.dark-theme .v3-fpm-dd-item:hover { background: rgba(255, 255, 255, .06); }
body.dark-theme .v3-fpm-dd-item.selected { background: rgba(47, 133, 66, .18); color: #6ee7a8; }

/* =====================================================================
   INFO "?" TOOLTIPS — clickable + hover, styled popover.
   The "?" pill turns green on hover/active; a dark popover (rendered at
   the document body via JS, so it escapes the fee-calc card overflow)
   shows the help text with a green info icon + a pointer arrow.
   ===================================================================== */
.v3-info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
    user-select: none;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.v3-info-tip:hover {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
}

.v3-tip-pop {
    position: fixed;
    z-index: 10600;
    max-width: 300px;
    background: #1f2937;
    color: #e5e7eb;
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: .1px;
    padding: 11px 14px;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .30), 0 2px 6px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.v3-tip-pop.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.v3-tip-pop-body {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.v3-tip-pop-ico {
    color: #4ade80;
    font-size: 13px;
    margin-top: 1px;
    flex-shrink: 0;
}
.v3-tip-pop-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #1f2937;
    transform: rotate(45deg);
}

/* Dark theme — the "?" pill needs to read on the dark form background */
body.dark-theme .v3-info-tip {
    background: var(--theme-input-bg);
    border-color: var(--theme-border);
    color: var(--theme-text-muted);
}
body.dark-theme .v3-info-tip:hover {
    background: #2F8542;
    border-color: #2F8542;
    color: #fff;
}

/* =====================================================================
   CUSTOMIZATION 3 — Additional Funds subform (compact table).
   Payment Type / How to Pay Funds are disabled "(Get with Kory)"
   placeholders pending the Zoho subform picklist. Horizontal scroll on
   narrow widths so the 4 columns never break the policy-form layout.
   ===================================================================== */
.v3-addfunds-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}
.v3-addfunds-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.v3-addfunds-table th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #6b7280;
    padding: 8px;
    background: #F4F0E9;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.v3-addfunds-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}
.v3-addfunds-table tr:last-child td { border-bottom: none; }
.v3-addfunds-table input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 0.82rem;
    font-family: inherit;
    background: #fff;
    color: #1f2937;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04) inset;
    transition: border-color .2s, box-shadow .2s;
}
.v3-addfunds-table input:hover { border-color: #cbd5e1; }
.v3-addfunds-table input:focus {
    outline: none;
    border-color: #18A74B;
    box-shadow: 0 0 0 3px rgba(47, 133, 66, .1), 0 1px 2px rgba(0, 0, 0, .04) inset;
}
/* Subform selects — polished look (matches the wizard .v2-select) + ellipsis so
   long values (e.g. "All funds should be sent to the funeral home...") truncate
   cleanly with "..." instead of colliding with the arrow. */
.v3-addfunds-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    padding: 9px 34px 9px 12px;
    font-size: 0.82rem;
    font-family: inherit;
    color: #1f2937;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04) inset;
    transition: border-color .2s, box-shadow .2s;
}
/* Regular FHs (no Family Pay customization): Payment Type is locked to
   "Family Pay" — a fixed, read-only value styled to match the row height. */
.v3-addfunds-fixed {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    border: 1.5px solid #d8e6dc;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 0.82rem;
    font-family: inherit;
    font-weight: 600;
    color: #1E6332;
    background-color: #f4f0e9;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}
.v3-addfunds-fixed i { font-size: 0.78rem; color: #2F8542; }
body.dark-theme .v3-addfunds-fixed {
    background-color: rgba(47, 133, 66, .12);
    border-color: rgba(47, 133, 66, .35);
    color: #6ee7a0;
}
body.dark-theme .v3-addfunds-fixed i { color: #6ee7a0; }
.v3-addfunds-select:hover { border-color: #cbd5e1; }
.v3-addfunds-select:focus {
    outline: none;
    border-color: #18A74B;
    box-shadow: 0 0 0 3px rgba(47, 133, 66, .1), 0 1px 2px rgba(0, 0, 0, .04) inset;
}
.v3-addfunds-select:disabled,
.v3-addfunds-table input:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    font-style: italic;
}
body.dark-theme .v3-addfunds-table input:disabled { background-color: rgba(255, 255, 255, .04); color: var(--theme-text-muted); }
/* Required-field validation highlight (Payment Type / Amount / How to Pay). */
.v3-addfunds-select.v3-addfunds-invalid,
.v3-addfunds-table input.v3-addfunds-invalid {
    border-color: #dc2626 !important;
    background-color: #fef2f2;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

/* Family Pay + Fee Calculator cards carry a permanent green-tinted border (same
   tone as the .v2-card hover) so both sections read as clearly defined cards. */
#v3PolicyInfoCard,
#v3FamilyPayCard,
#v3PolicyFeeCalc {
    border: 1.5px solid rgba(47, 133, 66, 0.3);
}
#v3PolicyInfoCard:hover,
#v3FamilyPayCard:hover,
#v3PolicyFeeCalc:hover {
    border-color: rgba(47, 133, 66, 0.5);
}
.v3-addfunds-money {
    display: flex;
    align-items: center;
    gap: 4px;
}
.v3-addfunds-money > span {
    color: #6b7280;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.v3-addfunds-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.v3-addfunds-del:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.v3-addfunds-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
    padding: 16px 8px !important;
    font-style: italic;
}
.v3-addfunds-add {
    margin-top: 10px;
}

/* Dark theme */
body.dark-theme .v3-addfunds-wrap { background: var(--theme-input-bg); border-color: var(--theme-border); }
body.dark-theme .v3-addfunds-table th { background: rgba(255, 255, 255, .04); color: var(--theme-text-muted); border-color: var(--theme-border); }
body.dark-theme .v3-addfunds-table td { border-color: rgba(255, 255, 255, .06); }
body.dark-theme .v3-addfunds-table input { background: var(--theme-input-bg); border-color: var(--theme-border); color: var(--theme-text); }
body.dark-theme .v3-addfunds-select { background-color: var(--theme-input-bg); border-color: var(--theme-border); color: var(--theme-text); }
body.dark-theme .v3-addfunds-select:disabled { background-color: rgba(255, 255, 255, .04); color: var(--theme-text-muted); }