/* ======================================================================
   Public forms v2 look (forms/v2/*, superform_v2.html)

   Loaded after formStyles.css and scoped to body.pf-v2, so v1 forms are
   untouched. Design source: forms/v2/state_farm_enrollment_coverage_revised.html
   (card-per-benefit layout, sticky selection summary, numbered step bubbles).
   The DOM is still produced by formLogic.js; these rules restyle its classes
   plus the v2-only hooks (benefit-card, rate-cards, ratepicker-stepper,
   pf-sidebar, sum-list, section cssClass values).
   ====================================================================== */

body.pf-v2 {
    --blue: #0877e8;
    --navy: #07366f;
    --ink: #15243b;
    --muted: #637083;
    --line: #dbe4ee;
    --soft: #f6f9fc;
    --softblue: #eef7ff;
    --green: #12a43a;
    --shadow: 0 8px 28px rgba(22, 48, 82, .10);
    --form-button-color: var(--green);

    background: #f4f6f8;
    color: var(--ink);
    font: 14px/1.45 Arial, Helvetica, sans-serif;
}

body.pf-v2 * { box-sizing: border-box; }

/* ---------- page shell + brand header --------------------------------- */
.pf-v2 .pf-shell {
    max-width: 1180px;
    margin: 18px auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.pf-v2 .pf-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 26px;
    border-bottom: 1px solid var(--line);
}

/* The logo group doubles as #pdfContainer (formLogic.js injects the logos into
   it and, after submission, swaps it for the success banner). The base sheet
   styles that id as a centred column, so match its specificity here. */
.pf-v2 #pdfContainer.pf-brand-left,
.pf-v2 .pf-brand-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    max-width: none;
    min-height: 44px;
    margin: 0;
    padding: 0;
}

.pf-v2 #pdfContainer.pf-brand-left.success-banner-only {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 48px 24px 24px;
}

.pf-v2 .pf-brand .image-container-top,
.pf-v2 .pf-brand .image-container {
    max-width: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Member Benefits mark stays small and quiet; the partner (MetLife) logo carries the header */
.pf-v2 .pf-brand .image-container-top img { width: auto; height: 20px; opacity: .8; }
.pf-v2 .pf-brand .image-container img { width: auto; height: 34px; }

.pf-v2 .pf-brand-divider {
    height: 22px;
    border-left: 1px solid #cfd8e3;
}

/* hide the partner text + divider when no partner logo was injected */
.pf-v2 .pf-brand-left:not(:has(#pdfImage2 img)) .pf-brand-divider,
.pf-v2 .pf-brand-left:not(:has(#pdfImage2 img)) .pf-brand-partner { display: none; }

.pf-v2 .pf-brand-partner {
    font-size: 13.5px;
    color: #657386;
    white-space: nowrap;
}

.pf-v2 .pf-brand-tag {
    font-size: 13.5px;
    font-weight: 700;
    color: #3e5f87;
    text-align: right;
}

/* ---------- form container reset -------------------------------------- */
.pf-v2 .form-container {
    max-width: none;
    margin: 0;
    padding: 0 20px 26px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.pf-v2 .form-title { display: none; }   /* branding already sits in the header */

/* ---------- progress: numbered bubbles with connectors ---------------- */
.pf-v2 .progress-bar-wrapper {
    height: auto;
    margin: 0 0 6px;
    padding: 18px 4px 22px;
    overflow: visible;
    display: block;
}

.pf-v2 .progress-bar-background { display: none; }

.pf-v2 .progress-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
}

.pf-v2 .progress-step {
    position: relative;
    color: #657386;
    font-size: 13.5px;
    flex: none;
}

.pf-v2 .progress-step::before {
    content: "";
    position: absolute;
    z-index: 1;
    height: 3px;
    background: #c8cfd7;
    left: -50%;
    right: 50%;
    top: 12px;
}

.pf-v2 .progress-step:first-child::before { display: none; }
.pf-v2 .progress-step.completed::before,
.pf-v2 .progress-step.active::before { background: var(--navy); }

.pf-v2 .progress-step-circle {
    width: 26px;
    height: 26px;
    font-size: 13.5px;
    background: #c8cfd7;
    z-index: 2;
}

.pf-v2 .progress-step-circle { box-shadow: 0 2px 5px rgba(22, 48, 82, .12); }
.pf-v2 .progress-step.active .progress-step-circle {
    background: linear-gradient(180deg, #2b8df0, var(--blue));
    box-shadow: 0 0 0 4px rgba(8, 119, 232, .15), 0 2px 6px rgba(8, 119, 232, .3);
}
.pf-v2 .progress-step.completed .progress-step-circle { background: linear-gradient(180deg, #0f4a8f, var(--navy)); }
.pf-v2 .progress-step.active { color: var(--navy); font-weight: 700; }

.pf-v2 .progress-step-label {
    position: static;
    height: auto;
    margin-top: 7px;
    font-size: 13.5px;
    padding: 0 4px;
}

/* ---------- steps ------------------------------------------------------ */
.pf-v2 .form-step h2 {
    text-align: left;
    color: var(--navy);
    font-size: 26px;
    margin: 0 0 6px;
}

/* Every step except the benefits page is one white card. */
.pf-v2 .form-step.active:not(.has-sidebar) {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px 28px 28px;
    box-shadow: 0 2px 12px rgba(22, 48, 82, .05);
}

.pf-v2 .form-step:not(.has-sidebar) > h2 {
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

/* benefits page: main column + sticky sidebar */
.pf-v2 .form-step.active.has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.pf-v2 .pf-step-main { min-width: 0; }
.pf-v2 .pf-sidebar { position: relative; }
.pf-v2 .pf-sticky { position: sticky; top: 14px; }

/* ---------- sections --------------------------------------------------- */
.pf-v2 .form-section h3 {
    text-align: left;
    color: var(--navy);
    margin: 22px 0 8px;
    font-size: 16px;
    font-weight: 800;
}

.pf-v2 .form-section:first-of-type h3,
.pf-v2 .form-section-head h3 { margin-top: 0; }

.pf-v2 .form-section-desc {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13.5px;
}

/* a bordered white card around a section (intro card, coverage date...) */
.pf-v2 .form-section.pf-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    margin: 0 0 14px;
    box-shadow: 0 2px 10px rgba(22, 48, 82, .05);
}

.pf-v2 .form-section.pf-card > h2 { margin-bottom: 4px; }

/* the "Choose Your Benefits" intro card gets the soft blue wash */
.pf-v2 .form-step.has-sidebar .pf-step-main > .form-section.pf-card:first-of-type {
    background: linear-gradient(180deg, #eaf4ff 0%, #f7fbff 60%, #ffffff 100%);
    border-color: #cfe3fb;
    box-shadow: 0 4px 18px rgba(8, 119, 232, .08);
}

.pf-v2 .form-step.has-sidebar .pf-step-main > .form-section.pf-card:first-of-type input {
    box-shadow: 0 1px 2px rgba(22, 48, 82, .06);
}

.pf-v2 .form-section.pf-card > .columns-container > .form-column.full-width-column .textbox {
    margin: 0 0 6px;
    color: var(--muted);
    text-align: left;
}

.pf-v2 .form-section.pf-card > .columns-container > .form-column.full-width-column .textbox p { margin: 0; }

/* Coverage start date: heading + blurb on the left, the month picker on the right */
.pf-v2 .form-section.pf-coverage-date {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: center;
    margin-top: 12px;
}

.pf-v2 .form-section.pf-coverage-date .form-section-desc { margin: 0; }
.pf-v2 .form-section.pf-coverage-date .columns-container { margin: 0; }
.pf-v2 .form-section.pf-coverage-date .form-group { margin: 0; }
.pf-v2 .form-section.pf-coverage-date .form-group > label { display: none; }

/* carrier / plan disclosures under the benefits */
.pf-v2 .form-section.pf-disclosures-card { margin-top: 12px; padding: 16px 20px; }
.pf-v2 .textbox.pf-disclosures { font-size: 11px; line-height: 1.5; color: #66778a; }
.pf-v2 .textbox.pf-disclosures h4 { margin: 0 0 6px; font-size: 12px; color: #33455c; }
.pf-v2 .textbox.pf-disclosures p { margin: 0 0 6px; }
.pf-v2 .textbox.pf-disclosures p:last-child { margin-bottom: 0; }

/* dependent coverages (spouse / child life) sit tucked under their primary benefit */
.pf-v2 .ratepicker-container.benefit-card.pf-sub-benefit {
    margin: -4px 0 12px 28px;
    border-left: 4px solid var(--blue);
    border-radius: 0 12px 12px 0;
    background: linear-gradient(90deg, #f3f8fe 0%, #ffffff 40%);
}

.pf-v2 .ratepicker-container.benefit-card.pf-sub-benefit .benefit-title { font-size: 16px; }

/* ---------- inputs ----------------------------------------------------- */
.pf-v2 .form-group { margin-top: 14px; }

.pf-v2 .form-group > label {
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--ink);
}

.pf-v2 input[type="text"],
.pf-v2 input[type="email"],
.pf-v2 input[type="tel"],
.pf-v2 input[type="number"],
.pf-v2 input[type="date"],
.pf-v2 select,
.pf-v2 textarea {
    border: 1px solid #cbd5df;
    border-radius: 7px;
    background: #fff;
    font: inherit;
    color: var(--ink);
}

.pf-v2 input[type="text"],
.pf-v2 input[type="email"],
.pf-v2 input[type="tel"],
.pf-v2 input[type="number"],
.pf-v2 input[type="date"],
.pf-v2 select {
    height: 42px;
    padding: 0 12px;
}

.pf-v2 input:focus,
.pf-v2 select:focus,
.pf-v2 textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(8, 119, 232, .15);
}

.pf-v2 .readonly-input {
    background: var(--soft);
    color: #4d5b6c;
}

/* ---------- text blocks ------------------------------------------------ */
.pf-v2 .textbox {
    text-align: left;
    color: #2b3a52;
}

/* long legal / disclosure text: framed, scrollable panel */
.pf-v2 .textbox.textbox-scroll {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
    padding: 14px 18px;
    margin: 6px 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
}

.pf-v2 .textbox.textbox-scroll { resize: none !important; }
.pf-v2 .textbox.textbox-scroll > :first-child { margin-top: 0; }
.pf-v2 .textbox.textbox-scroll > :last-child { margin-bottom: 0; }

/* agreement checkboxes read as a single row */
.pf-v2 .form-group input[type="checkbox"] + label { font-weight: 400; }

/* ---------- benefit cards (ratepicker card layout) -------------------- */
.pf-v2 .ratepicker-container.benefit-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    margin: 12px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 2px 10px rgba(22, 48, 82, .05);
    transition: box-shadow .15s, border-color .15s;
}

.pf-v2 .ratepicker-container.benefit-card:hover {
    border-color: #c5d6e8;
    box-shadow: 0 6px 20px rgba(22, 48, 82, .09);
}

/* a card with a live selection shows a thin blue edge */
.pf-v2 .ratepicker-container.benefit-card:has(.rate-card input:checked:not([value*="decline"])),
.pf-v2 .ratepicker-container.benefit-card:has(.amount-display:not(.is-empty)) {
    border-color: #a9c9ee;
}

.pf-v2 .benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: linear-gradient(160deg, #eaf4ff, #d9ebff);
    box-shadow: inset 0 0 0 1px rgba(8, 119, 232, .12), 0 2px 6px rgba(8, 119, 232, .10);
    margin-bottom: 10px;
}

.pf-v2 .benefit-icon svg { width: 26px; height: 26px; }

.pf-v2 .pf-sub-benefit .benefit-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.pf-v2 .pf-sub-benefit .benefit-icon svg { width: 21px; height: 21px; }

.pf-v2 .ratepicker-container.benefit-card.parsley-error {
    border: 2px solid #dc3545;
}

.pf-v2 .benefit-card > .rates-table {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 20px;
}

.pf-v2 .benefit-card > .rates-table > .rate-filter-summary {
    grid-column: 2;
    margin: 0;
    background: #fff8df;
    border: 1px solid #f2df9d;
    border-radius: 7px;
    padding: 8px 10px;
    color: #7a5a18;
    font-size: 13.5px;
}

.pf-v2 .benefit-card > .rates-table > .rate-filter-summary .rate-filter-asterisk br { display: none; }

.pf-v2 .benefit-card > .invalid-feedback,
.pf-v2 .benefit-card > .ratepicker-global-error,
.pf-v2 .benefit-card > .parsley-errors-list {
    margin: 10px 0 0;
    padding-left: 255px;
    font-weight: 700;
}

.pf-v2 .benefit-info {
    border-right: 1px solid #e7edf3;
    padding-right: 16px;
}

.pf-v2 .benefit-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 2px;
}

.pf-v2 .benefit-carrier {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 10px;
}

.pf-v2 .benefit-desc {
    color: #425269;
    font-size: 13.5px;
}

.pf-v2 .benefit-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.pf-v2 .benefit-links a {
    color: #076bc9;
    text-decoration: none;
    font-size: 13.5px;
}

.pf-v2 .benefit-controls { min-width: 0; }

.pf-v2 .control-title,
.pf-v2 .benefit-controls .ratepicker-dropdown-label,
.pf-v2 .benefit-controls legend {
    font-weight: 800;
    margin-bottom: 10px;
    display: block;
    color: var(--ink);
}

.pf-v2 .benefit-controls .ratepicker-dropdown {
    border: 0;
    padding: 0;
}

.pf-v2 .benefit-controls .ratepicker-dropdown-plan { display: none; }

.pf-v2 .subhead {
    font-weight: 800;
    color: #33455c;
    margin: 12px 0 8px;
}

/* ---------- choice cards (tiers + plan chooser) ----------------------- */
.pf-v2 .rate-cards,
.pf-v2 .ratepicker-plan-choice {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    border: 0;
    padding: 0;
    margin: 0 0 12px;
}

.pf-v2 .ratepicker-plan-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-v2 .ratepicker-plan-choice legend { grid-column: 1 / -1; float: none; width: auto; }

.pf-v2 .rate-card,
.pf-v2 .ratepicker-plan-option {
    position: relative;
    display: block;
    border: 1px solid #cdd8e3;
    border-radius: 9px;
    padding: 12px 12px 12px 34px;
    background: #fff;
    cursor: pointer;
    min-height: 82px;
    margin: 0;
    font-weight: 400;
    transition: border-color .12s, background-color .12s;
}

.pf-v2 .rate-card:hover,
.pf-v2 .ratepicker-plan-option:hover { border-color: #9fb4cb; }

.pf-v2 .ratepicker-plan-option { min-height: 72px; }

.pf-v2 .rate-card:has(input:checked),
.pf-v2 .ratepicker-plan-option:has(input:checked) {
    border: 2px solid var(--blue);
    background: linear-gradient(180deg, #f4f9ff 0%, #e9f3ff 100%);
    padding: 11px 11px 11px 33px;
    box-shadow: 0 0 0 3px rgba(8, 119, 232, .12), 0 4px 12px rgba(8, 119, 232, .10);
}

.pf-v2 .rate-card:hover,
.pf-v2 .ratepicker-plan-option:hover { box-shadow: 0 3px 10px rgba(22, 48, 82, .08); }

.pf-v2 .rate-card input,
.pf-v2 .ratepicker-plan-option input[type="radio"] {
    position: absolute;
    left: 10px;
    top: 13px;
    margin: 0;
    accent-color: var(--blue);
}

.pf-v2 .rate-card strong,
.pf-v2 .ratepicker-plan-option > span:first-of-type {
    display: block;
    color: var(--navy);
    font-size: 13.5px;
    font-weight: 800;
}

.pf-v2 .rate-card .choice-price {
    font-weight: 800;
    color: #075fc0;
    margin-top: 5px;
}

.pf-v2 .rate-card small,
.pf-v2 .ratepicker-plan-option .ratepicker-dropdown-desc {
    display: block;
    color: #66778a;
    font-size: 13.5px;
    margin: 4px 0 0;
    font-style: normal;
}

.pf-v2 .rate-card.ghosted {
    color: #9e9e9e;
    opacity: .6;
    pointer-events: none;
}

.pf-v2 .rate-card-hint {
    grid-column: 1 / -1;
    background: var(--softblue);
    border: 1px solid #d6eaff;
    border-radius: 8px;
    padding: 9px 11px;
    color: #315477;
    font-size: 13.5px;
}

/* decline row under a control block */
.pf-v2 .ratepicker-decline {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #e5ebf1;
    color: #526176;
}

.pf-v2 .ratepicker-decline label {
    cursor: pointer;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.pf-v2 .ratepicker-decline input { margin: 0; accent-color: var(--blue); }

/* ---------- amount stepper + slider + select (dropdown mode) ---------- */
.pf-v2 .ratepicker-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pf-v2 .square-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #c8d5e2;
    background: #fff;
    border-radius: 7px;
    color: var(--navy);
    font-size: 23px;
    line-height: 1;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.pf-v2 .square-btn:hover:not(:disabled) { background: var(--softblue); border-color: #9fb4cb; }

.pf-v2 .square-btn:disabled {
    background: #f4f6f8;
    color: #a9b4c1;
    cursor: not-allowed;
}

.pf-v2 .amount-display {
    min-width: 145px;
    text-align: center;
    border: 1px solid #c8d5e2;
    border-radius: 7px;
    padding: 7px 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    background: linear-gradient(180deg, #ffffff, #f4f8fc);
    box-shadow: inset 0 1px 2px rgba(22, 48, 82, .06);
}

.pf-v2 .square-btn {
    background: linear-gradient(180deg, #ffffff, #f2f6fa);
    box-shadow: 0 1px 2px rgba(22, 48, 82, .08);
}

.pf-v2 .amount-display.is-empty {
    color: #8a97a6;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
}

.pf-v2 .price {
    font-size: 16px;
    font-weight: 800;
    color: #0569cf;
    margin-left: 4px;
}

.pf-v2 .ratepicker-slider-row { max-width: none; margin-top: 8px; }
.pf-v2 .ratepicker-slider { accent-color: var(--blue); margin: 14px 0 2px; }

.pf-v2 .ratepicker-slider-ends,
.pf-v2 .ratepicker-ticks {
    display: flex;
    justify-content: space-between;
    color: #68778a;
    font-size: 13.5px;
}

.pf-v2 .ratepicker-select-row {
    display: grid;
    grid-template-columns: minmax(220px, 340px) 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}

/* no dropdown: the "Coverage available..." hint takes the whole row */
.pf-v2 .ratepicker-select-row.no-select { grid-template-columns: 1fr; margin-top: 8px; }

.pf-v2 .ratepicker-select {
    max-width: none;
    height: 40px;
    padding: 0 10px;
}

.pf-v2 .ratepicker-hint,
.pf-v2 .hint {
    background: var(--softblue);
    border: 1px solid #d6eaff;
    border-radius: 8px;
    padding: 9px 11px;
    color: #315477;
    font-size: 13.5px;
}

.pf-v2 .ratepicker-readout { margin-top: 10px; }

/* ---------- selection summary (sidebar) ------------------------------- */
.pf-v2 .pf-sidebar .form-section { margin: 0; }
.pf-v2 .pf-sidebar .columns-container { gap: 0; }
.pf-v2 .pf-sidebar .form-column { flex: 1 0 100% !important; }

.pf-v2 .pf-sidebar .rate-summary {
    border: 1px solid #cfdbe8;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(22, 48, 82, .10);
    margin: 0;
    padding: 0;
}

.pf-v2 .pf-sidebar .rate-summary .payment-title {
    background: linear-gradient(135deg, #0b4a92 0%, var(--navy) 100%);
    color: #fff;
    padding: 15px 17px;
    font-size: 17px;
    font-weight: 800;
    text-align: left;
    margin: 0;
}

.pf-v2 .sum-list { padding: 4px 16px 14px; }

.pf-v2 .sum-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #e5ebf1;
}

.pf-v2 .sum-item .name {
    font-weight: 800;
    color: #1a3558;
    font-size: 13.5px;
}

.pf-v2 .sum-item .detail {
    color: #66778a;
    font-size: 13.5px;
    margin-top: 2px;
}

.pf-v2 .sum-item .cost {
    font-weight: 800;
    color: var(--navy);
    white-space: nowrap;
    font-size: 14px;
}

.pf-v2 .sum-item:not(.is-selected) .cost,
.pf-v2 .sum-item:not(.is-selected) .name { color: #8a97a6; }

.pf-v2 .sum-total {
    text-align: center;
    padding: 16px 0 4px;
}

.pf-v2 .sum-total small {
    display: block;
    font-weight: 700;
    color: #33455c;
    font-size: 13.5px;
}

.pf-v2 .sum-total strong {
    display: block;
    font-size: 27px;
    color: #075fc0;
    margin-top: 3px;
}

.pf-v2 .pf-sidebar .textbox {
    text-align: left;
    margin: 12px 0 0;
}

.pf-v2 .pf-fee,
.pf-v2 .pf-sidebar .textbox.pf-fee {
    background: linear-gradient(180deg, #f5faff, #eef6ff);
    border: 1px solid #d8eafc;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: #415b77;
    line-height: 1.5;
}

.pf-v2 .pf-fee h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--navy); }
.pf-v2 .pf-fee p { margin: 0 0 8px; }
.pf-v2 .pf-fee p:last-child { margin-bottom: 0; }

.pf-v2 .pf-continue {
    width: 100%;
    margin: 14px 0 0;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #17b544, var(--green));
    box-shadow: 0 4px 12px rgba(18, 164, 58, .28);
    color: #fff;
    font-weight: 800;
    padding: 14px;
    font-size: 15px;
    cursor: pointer;
}

.pf-v2 .pf-continue:hover:not([disabled]) { background: #0f8f32; }
.pf-v2 .pf-continue[disabled] { background: #c8cfd7; cursor: not-allowed; }

/* ---------- nav buttons ----------------------------------------------- */
.pf-v2 .nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.pf-v2 .nav-buttons button {
    border-radius: 8px;
    font-weight: 800;
    padding: 12px 24px;
    margin: 0;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(22, 48, 82, .10);
}

.pf-v2 .nav-buttons .next-button:not([disabled]) { background: linear-gradient(180deg, #17b544, var(--green)); }

.pf-v2 .nav-buttons .back-button {
    background: #fff;
    color: var(--navy);
    border: 1px solid #c8d5e2;
}

.pf-v2 .nav-buttons .back-button[disabled] {
    color: #a9b4c1;
    background: #f4f6f8;
}

/* ---------- payment, modals, signature: soften the base look ---------- */
.pf-v2 .payment-container {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
}

.pf-v2 .payment-title { text-align: left; color: var(--navy); }

/* payment summary / itemised bill: quiet list rows instead of a fully ruled grid */
.pf-v2 .payment-container .bill-table,
.pf-v2 .payment-summary .bill-table,
.pf-v2 .bill-table,
.pf-v2 .payment-table {
    border: 0;
    border-collapse: collapse;
    margin: 6px 0 16px;
}

.pf-v2 .bill-table td,
.pf-v2 .payment-table td {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 9px 4px;
    color: #2b3a52;
}

.pf-v2 .bill-table td:last-child,
.pf-v2 .payment-table td:last-child {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: var(--navy);
}

.pf-v2 .bill-table tr.bill-total td,
.pf-v2 .payment-table tr.bill-total td {
    border-bottom: 0;
    border-top: 2px solid var(--navy);
    font-weight: 800;
    color: var(--navy);
    padding-top: 12px;
}

.pf-v2 .bill-table tr.bill-total td:last-child { font-size: 18px; color: #075fc0; }

.pf-v2 .payment-summary-note { color: var(--muted); font-size: 13.5px; margin-bottom: 4px; }

.pf-v2 .radio-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.pf-v2 .clear-signature-button {
    background: #fff;
    color: var(--navy);
    border: 1px solid #c8d5e2;
    border-radius: 8px;
    font-weight: 700;
    padding: 9px 18px;
}

.pf-v2 .clear-signature-button:hover { background: var(--softblue); }

.pf-v2 .modal-field-wrapper > label { font-weight: 800; color: var(--navy); }

.pf-v2 .modal-subrecord-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pf-v2 .modal-subrecord-table th,
.pf-v2 .modal-subrecord-table td { border-color: var(--line); }
.pf-v2 .modal-subrecord-table th { background: var(--soft); color: #33455c; font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; }
.pf-v2 .modal-card { border-color: var(--line); border-radius: 10px; }

.pf-v2 .signature-container canvas {
    border: 1px solid #cbd5df;
    border-radius: 8px;
    background: #fff;
}

.pf-v2 .image-box img { border-radius: 8px; }

/* ---------- responsive ------------------------------------------------ */
@media (max-width: 1050px) {
    .pf-v2 .form-step.active.has-sidebar { grid-template-columns: 1fr; }
    .pf-v2 .pf-sticky { position: static; }
    .pf-v2 .benefit-card > .rates-table { grid-template-columns: 190px 1fr; }
    .pf-v2 .rate-cards { grid-template-columns: repeat(2, 1fr); }
    .pf-v2 .benefit-card > .invalid-feedback,
    .pf-v2 .benefit-card > .ratepicker-global-error,
    .pf-v2 .benefit-card > .parsley-errors-list { padding-left: 210px; }
}

@media (max-width: 700px) {
    .pf-v2 .pf-shell { margin: 0; border-radius: 0; }
    .pf-v2 .pf-brand { padding: 13px; }
    .pf-v2 .pf-brand-tag { display: none; }
    .pf-v2 .form-container { padding: 0 10px 18px; }
    .pf-v2 .form-step.active:not(.has-sidebar) { padding: 18px 16px 20px; }
    .pf-v2 .progress-bar-wrapper { overflow-x: auto; }
    .pf-v2 .progress-bar { grid-auto-columns: 120px; }
    .pf-v2 .benefit-card > .rates-table { grid-template-columns: 1fr; }
    .pf-v2 .benefit-info { border-right: 0; border-bottom: 1px solid #e7edf3; padding: 0 0 12px; }
    .pf-v2 .benefit-card > .rates-table > .rate-filter-summary { grid-column: 1; }
    .pf-v2 .benefit-card > .invalid-feedback,
    .pf-v2 .benefit-card > .ratepicker-global-error,
    .pf-v2 .benefit-card > .parsley-errors-list { padding-left: 0; }
    .pf-v2 .ratepicker-select-row,
    .pf-v2 .form-section.pf-coverage-date { grid-template-columns: 1fr; }
    .pf-v2 .rate-cards,
    .pf-v2 .ratepicker-plan-choice { grid-template-columns: 1fr 1fr; }
    .pf-v2 .form-step h2 { font-size: 22px; }
}

/* ======================================================================
   Confirmation view (#submissionContainer, filled by renderSubmissionData)
   ====================================================================== */
.pf-v2 .pf-submission {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 20px 32px;
}

.pf-v2 .pf-submission[hidden] { display: none; }

/* success banner + print button */
.pf-v2 .pf-submission > .printHide {
    background: #f1faf3;
    border: 1px solid #bfe6c8;
    border-left: 6px solid var(--green);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 8px;
}

.pf-v2 .pf-submission > .printHide h2 {
    margin: 0 0 6px;
    color: #0f6d2a;
    font-size: 22px;
    text-align: left;
}

.pf-v2 .pf-submission > .printHide p {
    margin: 0;
    color: #2b3a52;
}

.pf-v2 .pf-submission > button.button {
    width: auto !important;
    margin: 6px 0 18px;
    padding: 9px 18px;
    background: #fff;
    color: var(--navy);
    border: 1px solid #c8d5e2;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
}

.pf-v2 .pf-submission > button.button:hover { background: var(--softblue); }

.pf-v2 .pf-submission > .form-title { display: none; }

/* showPdfOnSubmission: let the embedded PDF use more of the page */
.pf-v2 .pf-submission.submission-pdf-mode { max-width: 1100px; }
.pf-v2 .submission-pdf-actions .submission-pdf-print {
    background: var(--navy);
    border-color: var(--navy);
}
.pf-v2 .submission-pdf-actions .submission-pdf-print:hover { background: var(--softblue); color: var(--navy); }
.pf-v2 .submission-pdf-actions .submission-pdf-download { color: var(--navy); }
.pf-v2 .submission-pdf-actions .submission-pdf-download:hover { background: var(--softblue); }

/* one card per form page */
.pf-v2 .pf-submission .pdfpage {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 24px 8px;
    margin: 0 0 14px;
}

/* a page with nothing to show (skipped step) stays out of the way */
.pf-v2 .pf-submission .pdfpage:not(.submission-agreements):not(:has(table, .modal-card-grid, .signature, img, .submission-textbox-show)) { display: none; }

.pf-v2 .pf-submission .pdfpage > h2 {
    text-align: left;
    color: var(--navy);
    font-size: 18px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.pf-v2 .pf-submission .section {
    display: block;
    margin: 0 0 16px;
}

.pf-v2 .pf-submission .section:not(.submission-agreement):not(:has(table, .modal-card-grid, .signature, img, .submission-textbox-show)) { display: none; }

.pf-v2 .pf-submission .section h3 {
    text-align: left;
    color: #33455c;
    font-size: 13.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 0;
    width: auto;
    margin: 14px 0 6px;
    padding: 0;
}

.pf-v2 .pf-submission h4 {
    margin: 12px 0 6px;
    color: var(--navy);
    font-size: 14px;
}

/* disclosure text is for the printout, not the screen */
.pf-v2 .pf-submission .submission-textbox { display: none; }
.pf-v2 .pf-submission .submission-textbox-show {
    display: block;
    font-size: 13.5px;
    color: #425269;
}

/* label / value rows */
.pf-v2 .pf-submission table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
    table-layout: fixed;
}

.pf-v2 .pf-submission td,
.pf-v2 .pf-submission th {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    padding: 9px 6px;
    vertical-align: top;
    text-align: left;
    font-size: 13.5px;
    word-break: break-word;
}

.pf-v2 .pf-submission .field-table td:first-child,
.pf-v2 .pf-submission .payment-info-table th {
    color: var(--muted);
    font-weight: 600;
    width: 32%;
}

.pf-v2 .pf-submission .field-table td:nth-child(2) {
    color: var(--ink);
    font-weight: 600;
}

.pf-v2 .pf-submission .field-table.field-table-boolean td:first-child,
.pf-v2 .pf-submission .field-table .boolean-response-row td:first-child,
.pf-v2 .pf-submission .field-table .checkbox-row td:first-child {
    color: var(--ink);
    font-weight: 500;
}

.pf-v2 .pf-submission .field-table.field-table-boolean td:nth-child(2),
.pf-v2 .pf-submission .field-table .boolean-response-row td:nth-child(2),
.pf-v2 .pf-submission .field-table .checkbox-row td:nth-child(2) {
    text-align: right;
    color: #0f6d2a;
    font-weight: 800;
}

/* sub-record tables (dependents, beneficiaries) */
.pf-v2 .pf-submission thead th {
    background: var(--soft);
    color: #33455c;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pf-v2 .pf-submission .modal-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.pf-v2 .pf-submission .modal-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--soft);
}

.pf-v2 .pf-submission .modal-card h5 { margin: 0 0 8px; color: var(--navy); }
.pf-v2 .pf-submission .modal-card p { margin: 3px 0; font-size: 13.5px; }

/* payment: receipt rows with a bold total */
.pf-v2 .pf-submission .payment-table td:last-child,
.pf-v2 .pf-submission .payment-table td:nth-child(2) {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: var(--navy);
    width: 140px;
}

.pf-v2 .pf-submission .payment-table tr.payment-total-row td {
    border-bottom: 0;
    border-top: 2px solid var(--navy);
    padding-top: 12px;
    color: var(--navy);
}

.pf-v2 .pf-submission .payment-table tr.payment-total-row td:last-child { font-size: 18px; color: #075fc0; }

.pf-v2 .pf-submission .payment-heading { text-align: left; color: var(--navy); }

/* signature */
.pf-v2 .pf-submission .signature { text-align: left; }
.pf-v2 .pf-submission .signature img,
.pf-v2 .pf-submission .field-table td img,
.pf-v2 .pf-submission img.signature-image {
    max-width: 360px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 6px;
}

/* submission metadata: present, but quiet */
.pf-v2 .pf-submission > table.field-table {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--muted);
}

.pf-v2 .pf-submission > table.field-table td { font-size: 13.5px; font-weight: 500 !important; color: var(--muted) !important; }
.pf-v2 .pf-submission > table.field-table th { font-size: 13.5px; color: #33455c; padding-top: 14px; }

@media print {
    .pf-v2 .pf-submission .submission-textbox { display: block; }
    .pf-v2 .pf-submission .pdfpage,
    .pf-v2 .pf-submission .section { display: block !important; }
    .pf-v2 .pf-shell { box-shadow: none; border-radius: 0; margin: 0; max-width: none; }
    .pf-v2 .pf-brand { border-bottom: 1px solid #000; }
}

@media (max-width: 700px) {
    .pf-v2 .pf-submission { padding: 12px 10px 20px; }
    .pf-v2 .pf-submission .pdfpage { padding: 14px 14px 6px; }
    .pf-v2 .pf-submission .field-table td:first-child { width: 40%; }
}


/* ======================================================================
   Reference look (public_forms/ChatGPT Image Sep 9, 2026): hero header,
   intro band, solid icons, monthly-rate box, decline strips, sidebar.
   ====================================================================== */

/* ---- hero header ----------------------------------------------------- */
.pf-v2 .pf-brand.pf-hero {
    position: relative;
    display: block;
    padding: 26px 26px 22px;
    text-align: center;
    background: linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%);
    border-bottom: 1px solid #dbe7f5;
    overflow: hidden;
}

.pf-v2 .pf-hero-art {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 6% 30%, rgba(8, 119, 232, .16) 0, rgba(8, 119, 232, 0) 34%),
        radial-gradient(circle at 96% 18%, rgba(18, 164, 58, .14) 0, rgba(18, 164, 58, 0) 32%),
        radial-gradient(circle at 88% 95%, rgba(8, 119, 232, .12) 0, rgba(8, 119, 232, 0) 30%);
}

.pf-v2 #pdfContainer.pf-hero-body,
.pf-v2 .pf-hero-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.pf-v2 .pf-hero .pf-hero-logo img { height: 44px; width: auto; }

.pf-v2 .pf-hero-title {
    margin-top: 8px;
    font-size: 28px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -.01em;
}

.pf-v2 .pf-hero-sub {
    font-size: 16px;
    color: var(--navy);
}

.pf-v2 .pf-hero-rule {
    width: 140px;
    height: 2px;
    margin: 10px auto 8px;
    background: linear-gradient(90deg, rgba(8, 119, 232, 0), var(--blue), rgba(8, 119, 232, 0));
}

.pf-v2 .pf-hero-cta {
    font-size: 19px;
    color: var(--navy);
}

.pf-v2 .pf-hero-admin {
    position: absolute;
    right: 0;
    bottom: -6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: #7b8797;
}

.pf-v2 .pf-hero-admin .image-container-top img { height: 14px; width: auto; opacity: .7; }

/* ---- intro card + rates band ----------------------------------------- */
.pf-v2 .form-section.pf-card.pf-intro {
    margin-bottom: 0;
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    padding-bottom: 12px;
    background: #fff !important;
    box-shadow: none !important;
}

.pf-v2 .form-section.pf-card.pf-intro > h2 { font-size: 30px; }

.pf-v2 .form-section.pf-card.pf-rates-band {
    margin: 0 0 14px;
    padding: 14px 20px 20px;
    border-radius: 0 0 12px 12px;
    border-top: 0;
    background: #fff;
}

.pf-v2 .form-section.pf-card.pf-rates-band > .columns-container {
    background: linear-gradient(180deg, #eaf4ff 0%, #e2efff 100%);
    border: 1px solid #cfe3fb;
    border-radius: 10px;
    padding: 14px 18px;
    gap: 22px;
    align-items: center;
}

.pf-v2 .pf-rates-band .form-group { margin-top: 0; }
.pf-v2 .pf-rates-band .form-group > label { font-size: 13.5px; white-space: nowrap; }

/* The lead copy takes the whole first row of the band, so the three inputs
   (DOB, ZIP, requested effective date) share a full-width row under it and
   none of their labels or the month select have to wrap. Overrides the
   inline flex/max-width the renderer sets from the column's maxWidth. */
.pf-v2 .form-section.pf-card.pf-rates-band > .columns-container { row-gap: 14px; }
.pf-v2 .form-section.pf-card.pf-rates-band > .columns-container > .form-column:first-child {
    flex: 1 0 100% !important;
    max-width: none !important;
}
.pf-v2 .pf-rates-band select { width: 100%; }

.pf-v2 .pf-band-lead {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100% !important;
}

.pf-v2 .pf-band-icon {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #cfe3fb;
    color: var(--navy);
}

.pf-v2 .pf-band-icon svg { width: 30px; height: 30px; }

.pf-v2 .pf-band-text {
    font-size: 15px;
    color: var(--navy);
    line-height: 1.35;
}

/* ---- benefit cards: solid icon on the left ---------------------------- */
.pf-v2 .benefit-icon,
.pf-v2 .pf-sub-benefit .benefit-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--blue);
    margin: 0 0 8px;
    display: block;
}

.pf-v2 .benefit-icon svg { width: 46px; height: 46px; }
.pf-v2 .pf-sub-benefit .benefit-icon svg { width: 36px; height: 36px; }

.pf-v2 .benefit-title { font-size: 19px; }
.pf-v2 .benefit-carrier { margin-bottom: 8px; }

.pf-v2 .benefit-links { flex-direction: column; gap: 8px; }

.pf-v2 .benefit-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pf-v2 .benefit-links a::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h6'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h6'/></svg>") center / contain no-repeat;
}

.pf-v2 .ratepicker-container.benefit-card.is-highlighted {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(8, 119, 232, .18);
}

/* ---- stepper: "Your monthly rate" box on the right ------------------- */
.pf-v2 .ratepicker-stepper { justify-content: flex-start; }

.pf-v2 .ratepicker-stepper .amount-display {
    min-width: 200px;
    font-size: 21px;
    border-radius: 7px;
}

.pf-v2 .ratepicker-stepper .price {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    padding: 8px 16px;
    border-radius: 8px;
    background: linear-gradient(180deg, #eaf4ff, #e2efff);
    border: 1px solid #cfe3fb;
    font-size: 22px;
    color: #0569cf;
}

.pf-v2 .ratepicker-stepper .price:empty { display: none; }
.pf-v2 .ratepicker-stepper .price .price-label { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.pf-v2 .ratepicker-stepper .price .price-value { line-height: 1.15; }

/* range hint reads as plain helper text under the select row */
.pf-v2 .ratepicker-select-row .ratepicker-hint {
    background: none;
    border: 0;
    padding: 0;
    color: #425269;
    font-size: 13.5px;
}

/* ---- decline strip ---------------------------------------------------- */
.pf-v2 .ratepicker-decline {
    margin-top: 12px;
    padding: 0;
    border-top: 0;
}

.pf-v2 .ratepicker-decline label {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d5dfea;
    border-radius: 8px;
    background: #fff;
    color: #2b3a52;
    font-size: 14px;
}

.pf-v2 .ratepicker-decline label:hover { border-color: #9fb4cb; }

.pf-v2 .ratepicker-decline input {
    width: 18px;
    height: 18px;
}

/* checkbox declines look like the reference's radio circles */
.pf-v2 .ratepicker-decline input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #8aa0b8;
    border-radius: 50%;
    background: #fff;
    position: relative;
    cursor: pointer;
}

.pf-v2 .ratepicker-decline input[type="checkbox"]:checked {
    border-color: var(--blue);
}

.pf-v2 .ratepicker-decline input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--blue);
}

/* tier cards: radio circle beside the tier name, like the reference */
.pf-v2 .rate-card { padding: 14px 12px 12px 40px; }
.pf-v2 .rate-card:has(input:checked) { padding: 13px 11px 11px 39px; }
.pf-v2 .rate-card input { top: 15px; left: 12px; width: 18px; height: 18px; }

/* ---- sidebar: header icon, rows with Edit, total box, help box -------- */
.pf-v2 .pf-sidebar .rate-summary .payment-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-v2 .pf-sidebar .rate-summary .payment-title::before {
    content: "";
    width: 22px;
    height: 22px;
    flex: none;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm1 3v4h10V5H7zm0 6v2h2v-2H7zm4 0v2h2v-2h-2zm4 0v2h2v-2h-2zM7 15v2h2v-2H7zm4 0v2h2v-2h-2zm4 0v4h2v-4h-2zM7 19v2h6v-2H7z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm1 3v4h10V5H7zm0 6v2h2v-2H7zm4 0v2h2v-2h-2zm4 0v2h2v-2h-2zM7 15v2h2v-2H7zm4 0v2h2v-2h-2zm4 0v4h2v-4h-2zM7 19v2h6v-2H7z'/></svg>") center / contain no-repeat;
}

.pf-v2 .sum-item { align-items: flex-start; padding: 10px 0; }
.pf-v2 .sum-item .name { font-size: 14px; color: var(--navy); }
.pf-v2 .sum-item .detail { font-size: 13.5px; color: #55657a; margin-top: 1px; }

.pf-v2 .sum-item .cost {
    margin-top: 2px;
    font-size: 15px;
    color: var(--navy);
    font-weight: 800;
}

.pf-v2 .sum-item:not(.is-selected) .cost { color: #a9b4c1; font-weight: 700; }

.pf-v2 .sum-edit {
    flex: none;
    font-size: 13.5px;
    font-weight: 700;
    color: #076bc9;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: 1px;
}

.pf-v2 .sum-total {
    margin: 12px 0 4px;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, #eaf4ff, #e2efff);
    border: 1px solid #cfe3fb;
}

.pf-v2 .sum-total small { font-size: 14px; color: var(--navy); }
.pf-v2 .sum-total strong { font-size: 28px; }

.pf-v2 .pf-help,
.pf-v2 .pf-sidebar .textbox.pf-help {
    margin-top: 12px;
    padding: 14px 16px 14px 62px;
    position: relative;
    border: 1px solid #cfdbe8;
    border-radius: 12px;
    background: #fff;
    color: #33455c;
    font-size: 13.5px;
    box-shadow: 0 4px 14px rgba(22, 48, 82, .06);
}

.pf-v2 .pf-help::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 16px;
    width: 32px;
    height: 32px;
    background: var(--blue);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3C6.5 3 2 6.8 2 11.5c0 2.2 1 4.2 2.6 5.7L4 21l4.6-1.6c1.1.3 2.2.5 3.4.5 5.5 0 10-3.8 10-8.4S17.5 3 12 3zM7 12.5a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm5 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm5 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3C6.5 3 2 6.8 2 11.5c0 2.2 1 4.2 2.6 5.7L4 21l4.6-1.6c1.1.3 2.2.5 3.4.5 5.5 0 10-3.8 10-8.4S17.5 3 12 3zM7 12.5a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm5 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm5 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/></svg>") center / contain no-repeat;
}

.pf-v2 .pf-help h4 { margin: 0 0 4px; font-size: 16px; color: var(--navy); }
.pf-v2 .pf-help p { margin: 0 0 6px; }
.pf-v2 .pf-help p:last-child { margin-bottom: 0; }

/* ---- prior-enrollment eligibility gate (Term Life / LTD) -------------- */
.pf-v2 .form-section.pf-eligibility .form-group { margin-top: 14px; }

.pf-v2 .form-section.pf-eligibility .form-group > label {
    font-weight: 700;
    color: var(--navy);
}

.pf-v2 .pf-eligibility-note {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #f2d9a6;
    border-radius: 10px;
    background: #fffaf0;
    color: #6b4f1d;
    font-size: 13.5px;
    line-height: 1.5;
}

.pf-v2 .pf-eligibility-note p { margin: 0; }


@media (max-width: 700px) {
    .pf-v2 .pf-hero-admin { position: static; margin-top: 10px; justify-content: center; }
    .pf-v2 .pf-hero-title { font-size: 22px; }
    .pf-v2 .ratepicker-stepper .price { margin-left: 0; width: 100%; }
}

/* MetLife BRD: no website text under 10pt (13.33px); footnotes/disclaimers are exempt. */
@media (max-width: 420px) {
    .pf-v2 .progress-step-label { font-size: 13.5px; }
}
.pf-v2 .ratepicker-slider-ends { font-size: 13.5px; }

/* post-submission agreements: index card + one section per accepted agreement */
.pf-v2 .pf-submission .submission-agreements-index {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--softblue);
    margin: 0 0 14px;
}
.pf-v2 .pf-submission .submission-agreements-index h3 { color: var(--navy); font-size: 15px; text-transform: none; letter-spacing: 0; margin: 0 0 6px; }
.pf-v2 .pf-submission .submission-agreements-index a { color: #076bc9; font-weight: 600; }
.pf-v2 .pf-submission .submission-agreement-text { border-color: var(--line); color: #425269; }
.pf-v2 .pf-submission .submission-agreement-text h3,
.pf-v2 .pf-submission .submission-agreement-text h4 { text-transform: none; letter-spacing: 0; margin: 8px 0 6px; }

/* ---- rate note: info callout under a ratepicker's rates ---------------- */
/* Rendered by formLogic.js when a ratepicker sets `rateNote` (+ `rateNoteTitle`);
   sits between the tier cards / rate table and the decline row. */
.pf-v2 .rate-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 2px 0 12px;
    padding: 12px 14px;
    border: 1px solid #cfe3fb;
    border-radius: 10px;
    background: linear-gradient(180deg, #eaf4ff 0%, #e2efff 100%);
    color: #2b3a52;
    font-size: 13.5px;
    line-height: 1.5;
}

.pf-v2 .rate-note-icon {
    flex: none;
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--blue);
}

.pf-v2 .rate-note-icon svg { width: 20px; height: 20px; }

.pf-v2 .rate-note-title {
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 2px;
}

.pf-v2 .rate-note-text p { margin: 0; }
.pf-v2 .rate-note-text p + p { margin-top: 6px; }