/* Monterey Financial — Authenticated app chrome
   Restyles the metronic theme header (.page-header) and sidebar
   (.page-sidebar-wrapper) with the Monterey design system. The
   outer class names are preserved so the metronic JS that hooks
   into them continues to work. */

/* =====================================================================
   TOP HEADER (.page-header.navbar)
   ===================================================================== */
.page-header.navbar {
    background: var(--aegean-100) !important;
    background-color: var(--aegean-100) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    height: 64px !important;
    min-height: 64px !important;
    box-shadow: 0 1px 3px 0 rgba(10, 13, 18, 0.10) !important;
}

.page-header.navbar .page-header-inner {
    background: transparent !important;
    height: 64px !important;
    padding: 0 24px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Brand block — logo + tag, replaces .page-logo */
.page-header.navbar .mf-app-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex: 0 0 auto;
}

.page-header.navbar .mf-app-brand img {
    height: 34px;
    width: auto;
}

.page-header.navbar .mf-app-brand-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
}

/* Right cluster — page title (or any future right-side content) */
.page-header.navbar .mf-app-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    color: var(--fg-on-dark);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
}

.page-header.navbar .mf-app-header-right .label {
    color: var(--fg-on-dark-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Mobile menu toggler — keep functional but restyle */
.page-header.navbar .menu-toggler.responsive-toggler {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    margin: 0;
    align-items: center;
    justify-content: center;
}

.page-header.navbar .menu-toggler.responsive-toggler:hover { background: rgba(255, 255, 255, 0.16); }

.page-header.navbar .menu-toggler.responsive-toggler span,
.page-header.navbar .menu-toggler.responsive-toggler span::before,
.page-header.navbar .menu-toggler.responsive-toggler span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--fg-on-dark);
    border-radius: 2px;
    position: relative;
}

.page-header.navbar .menu-toggler.responsive-toggler span::before { content: ""; position: absolute; top: -6px; }
.page-header.navbar .menu-toggler.responsive-toggler span::after  { content: ""; position: absolute; top: 6px; }

@media (max-width: 991px) {
    .page-header.navbar .menu-toggler.responsive-toggler { display: inline-flex; }
    .page-header.navbar .page-header-inner {
        padding: 0 16px 0 8px !important;
        gap: 10px;
    }
    .page-header.navbar .menu-toggler.responsive-toggler { margin: 0 !important; }
}

/* Hide the legacy heading-container ribbon (capHeading.png image) since
   it conflicts with the new clean header layout. */
.page-header.navbar .heading-container { display: none !important; }

/* =====================================================================
   LEFT SIDEBAR (.page-sidebar-wrapper) — Brand Aegean Navy #06304D
   Aggressive selectors to win over metronic theme bg rules.
   ===================================================================== */
/* The outer wrapper keeps metronic's positioning + width.
   We make it transparent and use it as a "frame" with padding;
   the inner .page-sidebar becomes the visible navy card. */
html body .page-sidebar-wrapper,
body.page-header-fixed .page-sidebar-wrapper,
body .page-container .page-sidebar-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 12px 0 12px 12px !important;
}

/* Inner sidebar = the visible navy card with rounded corners */
html body .page-sidebar-wrapper .page-sidebar,
html body .page-sidebar-wrapper .page-sidebar.navbar-collapse,
body .page-sidebar-wrapper .page-sidebar {
    background: #06304D !important;
    background-color: #06304D !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px -4px rgba(10, 13, 18, 0.18), 0 2px 6px -2px rgba(10, 13, 18, 0.10) !important;
    overflow: hidden;
    min-height: calc(100vh - 88px);
}

html body .page-sidebar-wrapper .page-sidebar,
html body .page-sidebar-wrapper .page-sidebar.navbar-collapse,
body .page-sidebar-wrapper .page-sidebar {
    background: #06304D !important;
    background-color: #06304D !important;
    background-image: none !important;
    padding: 16px 0 24px !important;
    border: none !important;
}

html body .page-sidebar-wrapper .page-sidebar-menu,
html body .page-sidebar-wrapper .page-sidebar-menu.page-header-fixed,
body .page-sidebar-wrapper .page-sidebar-menu {
    background: #06304D !important;
    background-color: #06304D !important;
    background-image: none !important;
    padding: 0 12px !important;
    margin: 0 !important;
    list-style: none;
}

/* User info card at the top of the sidebar.
   Wrapped in a custom <div class="mf-user-card"> instead of the
   metronic-styled <h3> so the theme's text rules don't apply. */
.page-sidebar-menu > li.heading {
    background: transparent !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
}

.page-sidebar-menu > li.heading > .mf-user-card {
    /* Solid white card with dark text — contrasts with the navy sidebar
       AND remains readable if the sidebar bg ever shifts to a light tone. */
    background: #ffffff !important;
    border: 1px solid var(--border-secondary) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    color: var(--fg-primary);
    font-family: var(--font-sans);
    line-height: 1.4;
    text-shadow: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
    overflow: hidden;
}

.page-sidebar-menu > li.heading .mf-user-label {
    display: block;
    color: var(--fg-brand) !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 2px;
    text-shadow: none;
    opacity: 1;
    -webkit-text-fill-color: var(--fg-brand);
}

.page-sidebar-menu > li.heading .mf-user-value {
    display: block;
    color: var(--fg-primary) !important;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
    text-shadow: none;
    opacity: 1;
    -webkit-text-fill-color: var(--fg-primary);
    word-break: break-word;
}

.page-sidebar-menu > li.heading .mf-user-value:last-child {
    margin-bottom: 0;
}

/* Generic nav items */
.page-sidebar-menu > li {
    background: transparent !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    border: none !important;
    list-style: none;
}

.page-sidebar-menu > li > .nav-link,
.page-sidebar-menu > li > a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 14px !important;
    border: none !important;
    border-radius: var(--radius-md);
    background: transparent !important;
    color: var(--fg-on-dark-dim) !important;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none !important;
    transition: background 150ms ease, color 150ms ease;
}

.page-sidebar-menu > li > .nav-link:hover,
.page-sidebar-menu > li > a:hover,
.page-sidebar-menu > li > .nav-link:focus,
.page-sidebar-menu > li > a:focus {
    background: rgba(0, 127, 156, 0.30) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none;
}

.page-sidebar-menu > li.active > .nav-link,
.page-sidebar-menu > li > .nav-link.active,
.page-sidebar-menu > li > a.active {
    background: rgba(0, 127, 156, 0.40) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 0 var(--cerulean-100);
}

/* Icon styling inside nav items */
.page-sidebar-menu > li > .nav-link > i,
.page-sidebar-menu > li > a > i {
    font-size: 16px !important;
    color: var(--fg-on-dark-dim) !important;
    width: 20px;
    text-align: center;
    margin: 0 !important;
    flex-shrink: 0;
}

.page-sidebar-menu > li > .nav-link:hover > i,
.page-sidebar-menu > li > a:hover > i,
.page-sidebar-menu > li > .nav-link:focus > i,
.page-sidebar-menu > li > a:focus > i,
.page-sidebar-menu > li.active > .nav-link > i,
.page-sidebar-menu > li > .nav-link.active > i,
.page-sidebar-menu > li > a.active > i {
    color: #ffffff !important;
}

.page-sidebar-menu > li > .nav-link > .title,
.page-sidebar-menu > li > a > .title {
    flex: 1;
    color: inherit !important;
    margin: 0 !important;
}

/* Impersonation status block (admin-only) */
.page-sidebar-menu > p {
    color: var(--fg-on-dark-dim) !important;
    font-size: 12px;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin: 6px 4px !important;
}

.page-sidebar-menu > p a {
    color: var(--fg-on-dark) !important;
    font-weight: 700;
    text-decoration: underline;
}

/* Log off — last item, treat slightly distinct */
.page-sidebar-menu > li:last-child {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.page-sidebar-menu > li:last-child > .nav-link > i {
    color: var(--fg-on-dark-dim) !important;
}

/* Hide the empty toggler li */
.page-sidebar-menu > li.sidebar-toggler-wrapper.hide { display: none !important; }

/* =====================================================================
   BODY-LEVEL FIXES
   The metronic theme sets body background:#000000 inline; ensure the
   page content area sits on the right surface.
   ===================================================================== */
body.page-header-fixed { background: var(--bg-secondary) !important; }
body.page-header-fixed .page-container { background: transparent !important; }
body.page-header-fixed .page-content-wrapper { background: transparent !important; }
body.page-header-fixed .page-content { background: transparent !important; }

/* =====================================================================
   PAGE FOOTER — Two-row dark navy (matches sidebar + header)
   ===================================================================== */
html body .page-footer.mf-footer {
    background: #06304D !important;
    background-color: #06304D !important;
    background-image: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0 !important;
    margin: 24px 0 0 !important;
    min-height: auto !important;
    color: var(--fg-on-dark-dim) !important;
    position: relative !important;
}

.page-footer.mf-footer .mf-footer-inner {
    padding: 20px 32px !important;
    margin: 0 !important;
    color: var(--fg-on-dark-dim) !important;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.6;
    background: transparent !important;
}

.mf-footer-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #1A6A92;
    margin-bottom: 12px;
}

.mf-footer-brand {
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
}

.mf-footer-brand small {
    display: block;
    color: var(--fg-on-dark-dim);
    font-weight: 500;
    font-size: 11px;
    margin-top: 2px;
    letter-spacing: 0;
    font-style: normal;
}

.mf-footer-links {
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--fg-on-dark-dim);
}

.mf-footer-links a,
.mf-footer-links a.privlink,
.page-footer.mf-footer .mf-footer-links a.privlink {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 12px;
}

.mf-footer-links a:hover,
.mf-footer-links a.privlink:hover {
    text-decoration: underline !important;
    color: #ffffff !important;
}

.mf-footer-sep {
    color: rgba(255, 255, 255, 0.30);
}

.mf-footer-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.mf-footer-legal {
    font-style: italic;
    max-width: 720px;
    opacity: 0.85;
    color: var(--fg-on-dark-dim);
    font-size: 12px;
}

.mf-footer-meta {
    color: var(--fg-on-dark-dim);
    font-size: 11px;
}

/* Scroll-to-top button — keep functional, restyle to fit */
.page-footer.mf-footer .scroll-to-top {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    opacity: 0.8;
}
.page-footer.mf-footer .scroll-to-top:hover { opacity: 1; background: rgba(255, 255, 255, 0.18) !important; }

@media (max-width: 720px) {
    .page-footer.mf-footer .mf-footer-inner { padding: 16px 20px !important; }
    .mf-footer-row1, .mf-footer-row2 { flex-direction: column; align-items: flex-start; gap: 8px; }
    .mf-footer-row1 { padding-bottom: 10px; margin-bottom: 10px; }
    .mf-footer-brand small { font-size: 11px; }
    .mf-footer-legal { font-size: 11px; max-width: 100%; }
}

/* =====================================================================
   DASHBOARD ACTION ICONS — Soft cerulean tile treatment
   Overrides the existing .fa-stack markup so Dashboard.cshtml doesn't
   need to change. Hides the inner fa-circle and uses the wrapper as
   a rounded-square cerulean tile with the foreground icon recolored.
   ===================================================================== */

/* Action-item icons (Available Account Options + the calculator
   inside the past-due alert, etc.) */
.dashicon.fa-stack,
span.fa-stack.dashicon {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    background: var(--cerulean-10) !important;
    border: 1px solid var(--cerulean-20) !important;
    color: var(--cerulean-100) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Hide the inner solid circle (the wrapper IS the tile now) */
.dashicon.fa-stack > .fa-circle.fa-stack-2x,
.dashicon.fa-stack > .fa.fa-circle {
    display: none !important;
}

/* Recolor the foreground glyph from white to brand cerulean */
.dashicon.fa-stack > .fa-stack-1x,
.dashicon.fa-stack > .dashwhite,
.dashicon.fa-stack > i.fa-stack-1x.dashwhite {
    color: var(--cerulean-100) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
    text-shadow: none !important;
}

/* Tighten the layout column the tile sits in so the icon and label
   don't drift apart now that the tile is smaller. */
.panel.cpanelwhite .row > .col-lg-2.dashleft,
.panel.cpanelalert .row > .col-lg-2.dashleft {
    width: auto !important;
    flex: 0 0 auto !important;
    padding-right: 12px !important;
    text-align: left !important;
}

/* The text column to the right of the tile */
.panel.cpanelwhite .row > .col-lg-10.dashleft,
.panel.cpanelalert .row > .col-lg-10.dashleft {
    width: auto !important;
    flex: 1 1 auto !important;
}

/* Make each action row a clean flex row so icon + text align nicely.
   align-items: center vertically centers the icon tile with the
   whole text block (works for both single- and multi-line descriptions). */
.panel.cpanelwhite .panel-body.dashpbody > .row,
.panel.cpanelalert .panel-body.dashpbody > .row {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 12px 4px !important;
    border-bottom: 1px solid var(--border-primary);
}

/* My Account amount/due-date row — top-align the columns so the
   "Current Due Date" sits next to "Current Amount Due" instead of
   getting pulled down to the row's vertical center. */
.panel.cpanelwhite .panel-body.dashpbody > .row > .col-md-6,
.panel.cpanelwhite .panel-body.dashpbody > .row > .col-lg-6 {
    align-self: flex-start !important;
}

.panel.cpanelwhite .panel-body.dashpbody > .row:last-child,
.panel.cpanelalert .panel-body.dashpbody > .row:last-child {
    border-bottom: none;
}

/* Hover the whole row for affordance */
.panel.cpanelwhite .panel-body.dashpbody > .row:hover .dashicon.fa-stack,
.panel.cpanelalert .panel-body.dashpbody > .row:hover .dashicon.fa-stack {
    background: var(--cerulean-100) !important;
    border-color: var(--cerulean-100) !important;
}

.panel.cpanelwhite .panel-body.dashpbody > .row:hover .dashicon.fa-stack > .fa-stack-1x,
.panel.cpanelalert .panel-body.dashpbody > .row:hover .dashicon.fa-stack > .dashwhite {
    color: #ffffff !important;
}

/* =====================================================================
   RECURRING PAYMENT — Featured "current setup" card (Option B)
   Navy card showing the user's existing autodebit setup, sits above
   the wizard. Reuses the .mp-* layout classes from MakePayment.
   ===================================================================== */
.rp-current {
    background: var(--aegean-100);
    color: var(--fg-on-dark);
    border-radius: 12px !important;
    padding: 18px 22px;
    margin: 0 0 16px;
}

.rp-current__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
    margin: 0 0 14px;
}

.rp-current__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--cerulean-100);
    color: var(--fg-on-dark);
    border-radius: 9999px !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
}

.rp-current__badge--pending {
    background: #fec84b;
    color: #5a3700;
}

.rp-current__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 32px;
}

.rp-current__row {
    font-size: 13px;
    line-height: 1.4;
}

.rp-current__row small {
    display: block;
    color: var(--fg-on-dark-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.rp-current__row strong {
    color: var(--fg-on-dark);
    font-weight: 700;
    font-size: 14px;
    word-break: break-word;
}

@media (max-width: 720px) {
    .rp-current { padding: 16px 18px; }
    .rp-current__grid { grid-template-columns: 1fr; gap: 10px; }
}

/* =====================================================================
   MAKE PAYMENT — Sidebar stepper + accordion content card
   ===================================================================== */
.mp-warn {
    padding: 14px 16px;
    background: var(--error-10);
    border: 1px solid var(--error-100);
    border-radius: 12px !important;
    color: #842424;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 14px;
}

.mp-warn p { margin: 0 0 8px; }
.mp-warn p:last-child { margin-bottom: 0; }
.mp-warn .mp-warn__title { font-weight: 700; font-size: 15px; color: #842424; }
.mp-warn strong { color: #842424; }

.mp-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    margin-top: 8px;
}

.mp-stepnav {
    background: var(--cerulean-5);
    border: 1px solid var(--cerulean-20);
    border-radius: 12px;
    padding: 16px;
    align-self: flex-start;
    position: sticky;
    top: 80px;
}

.mp-stepnav__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 12px;
    padding: 0 4px;
}

.mp-stepnav ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mp-stepnav__item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--fg-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    cursor: default;
    transition: background 150ms ease, color 150ms ease;
}

/* Hover styles intentionally a no-op since the sidebar is non-interactive. */
.mp-stepnav__item a:hover {
    background: transparent;
    color: var(--fg-secondary);
    text-decoration: none;
}

/* The accordion panel headers inside the redesigned payment wizards are
   visual section labels, not click targets. Users advance via Continue. */
.mp-content .accordion-toggle-styled {
    pointer-events: none;
    cursor: default;
}

.mp-stepnav__item .num {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    border-radius: 9999px !important;
    background: var(--bg-primary);
    color: var(--fg-secondary);
    border: 1px solid var(--border-secondary);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0;
    line-height: 1;
}

.mp-stepnav__item .lbl { flex: 1; line-height: 1.3; }

.mp-stepnav__item.is-active a {
    background: var(--cerulean-100);
    color: #ffffff;
    font-weight: 700;
}

.mp-stepnav__item.is-active .num {
    background: #ffffff;
    color: var(--cerulean-100);
    border-color: #ffffff;
}

.mp-stepnav__item.is-done a { color: var(--fg-primary); font-weight: 600; }
.mp-stepnav__item.is-done .num {
    background: var(--aegean-100);
    color: #ffffff;
    border-color: var(--aegean-100);
}

.mp-stepnav__item.is-done .num::before {
    content: "\f00c";
    font-family: FontAwesome;
}
.mp-stepnav__item.is-done .num span,
.mp-stepnav__item.is-done .num { /* hide the digit by overriding via :before content above */ }

/* Locked state — step hasn't been reached yet, click is blocked. */
.mp-stepnav__item.is-locked a {
    cursor: not-allowed;
    color: var(--fg-tertiary);
    opacity: 0.55;
}

.mp-stepnav__item.is-locked a:hover {
    background: transparent;
    color: var(--fg-tertiary);
}

.mp-stepnav__item.is-locked .num {
    background: #f1f2f4;
    color: #c2cad8;
    border-color: #e9eaeb;
}

.mp-stepnav__item.is-locked .num::after {
    content: "\f023"; /* fa-lock */
    font-family: FontAwesome;
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #c2cad8;
    color: #717680;
    font-size: 7px;
    line-height: 10px;
    text-align: center;
}

.mp-stepnav__item .num { position: relative; }

/* Custom checkbox used in the Future Billing step */
.mp-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 4px;
    margin: 8px 0 14px;
    user-select: none;
}

.mp-check__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.mp-check__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px !important;
    background: var(--bg-primary);
    border: 2px solid var(--border-secondary);
    color: transparent;
    flex: 0 0 auto;
    margin-top: 1px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.mp-check__box i { font-size: 12px; }

.mp-check__input:checked ~ .mp-check__box {
    background: var(--cerulean-100);
    border-color: var(--cerulean-100);
    color: #ffffff;
}

.mp-check__input:focus-visible ~ .mp-check__box {
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.25);
}

.mp-check__label {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--fg-primary);
    line-height: 1.55;
}

.mp-check:hover .mp-check__box {
    border-color: var(--cerulean-100);
}

/* Disabled variant — used when the user already has recurring or autopay
   isn't allowed for the account. */
.mp-check.mp-check--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.mp-check.mp-check--disabled:hover .mp-check__box {
    border-color: var(--border-secondary);
}

.mp-check.mp-check--disabled .mp-check__label {
    color: var(--fg-tertiary);
}

/* Restyle the existing accordion as a single card */
.mp-content #accordion3.panel-group {
    margin: 0;
}

.mp-content #accordion3.panel-group > .panel.panel-default {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin: 0 0 12px !important;
    overflow: hidden;
}

.mp-content #accordion3.panel-group > .panel.panel-default .panel-heading {
    background: var(--bg-primary) !important;
    border: none !important;
    padding: 14px 18px !important;
    cursor: pointer;
}

.mp-content #accordion3 .panel-heading .panel-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--fg-primary) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em;
}

.mp-content #accordion3 .panel-heading .accordion-toggle,
.mp-content #accordion3 .panel-heading .accordion-toggle-styled {
    color: var(--fg-primary) !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
}

/* Highlight the open panel */
.mp-content #accordion3 .panel.panel-default:has(.panel-collapse.in),
.mp-content #accordion3 .panel.panel-default:has(.panel-collapse.collapse.in) {
    border-color: var(--cerulean-100) !important;
    box-shadow: 0 0 0 1px var(--cerulean-100) inset !important;
}

.mp-content #accordion3 .panel.panel-default:has(.panel-collapse.in) .panel-heading,
.mp-content #accordion3 .panel.panel-default:has(.panel-collapse.collapse.in) .panel-heading {
    background: var(--cerulean-5) !important;
}

.mp-content #accordion3 .panel.panel-default:has(.panel-collapse.in) .panel-title,
.mp-content #accordion3 .panel.panel-default:has(.panel-collapse.collapse.in) .panel-title {
    color: var(--fg-brand) !important;
}

.mp-content #accordion3 .panel-body {
    padding: 18px 20px !important;
    background: var(--bg-primary) !important;
}

/* Continue/Go Back buttons restyling */
.mp-content .btn.paynowbutton,
.mp-content input.paynowbutton {
    /* Don't apply the giant pulsing Pay Now styling on flow-control buttons.
       This local override resets the .paynowbutton glow used on the Dashboard. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    padding: 0 22px !important;
    margin: 14px 8px 0 0 !important;
    background: var(--btn-primary-bg) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: var(--btn-shadow) !important;
    animation: none !important;
}

.mp-content .btn.paynowbutton:hover,
.mp-content input.paynowbutton:hover {
    background: var(--btn-primary-bg-hover) !important;
    transform: none !important;
}

/* "Go Back" button — secondary style */
.mp-content input.paynowbutton[value="Go Back"],
.mp-content input.paynowbutton[value="Make Changes"] {
    background: var(--bg-primary) !important;
    color: var(--fg-tertiary) !important;
    border: 1px solid var(--border-secondary) !important;
}

.mp-content input.paynowbutton[value="Go Back"]:hover,
.mp-content input.paynowbutton[value="Make Changes"]:hover {
    background: var(--cerulean-5) !important;
    color: var(--fg-brand-dark) !important;
    border-color: var(--cerulean-100) !important;
}

/* Bootstrap alerts inside the form — round their corners to match */
.mp-content .alert,
.mp-content .alert.alert-danger,
.mp-content .alert.alert-info,
.mp-content .alert.alert-success {
    border-radius: 12px !important;
    padding: 14px 16px !important;
    border-width: 1px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    line-height: 1.55;
}

/* Form labels and fields breathing room inside the accordion bodies */
.mp-content fieldset { border: none; padding: 0; margin: 0 0 14px; }

/* Form inputs — rounded 8px, 40px tall, focus ring in brand cerulean */
.mp-content .form-control,
.mp-content input[type="text"].form-control,
.mp-content input[type="password"].form-control,
.mp-content input[type="email"].form-control,
.mp-content select.form-control {
    height: 40px !important;
    padding: 8px 12px !important;
    background: var(--bg-primary) !important;
    color: var(--fg-primary) !important;
    border: 1px solid var(--border-secondary) !important;
    border-radius: 8px !important;
    font: 400 14px/1.4 var(--font-sans) !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05) !important;
    outline: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mp-content .form-control::placeholder { color: #717680; }

.mp-content .form-control:focus,
.mp-content select.form-control:focus {
    border-color: var(--cerulean-100) !important;
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20) !important;
}

/* "Other Amount" radio row — flex layout with the metronic md-radio.
   The metronic spans inside the label use absolute positioning with a
   fixed top value, which drifts the circle upward when the row contents
   are taller (because of the input). We force the spans to center in
   the label and give the label a min-height so the centering matches
   the input height. */
.mp-content .md-radio {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.mp-content .md-radio > label {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px;
    margin: 0 !important;
    line-height: 1.4 !important;
    position: relative;
}

/* Center every metronic span (the circle ring, check dot, box outline)
   vertically within the label instead of using metronic's fixed top. */
.mp-content .md-radio > label > span {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.mp-content .mp-helper {
    font-size: 12px;
    color: var(--fg-secondary);
    line-height: 1.4;
    align-self: center;
}

/* Catch any text/number input inside the form that's missing .form-control
   (e.g. the inline "Other Amount" input in the radio row). */
.mp-content input[type="text"]:not(.form-control),
.mp-content input[type="number"]:not(.form-control),
.mp-content input#paymentAmountOther {
    height: 36px !important;
    padding: 6px 12px !important;
    background: var(--bg-primary) !important;
    color: var(--fg-primary) !important;
    border: 1px solid var(--border-secondary) !important;
    border-radius: 8px !important;
    font: 400 14px/1.4 var(--font-sans) !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05) !important;
    outline: none !important;
    margin: 0 6px !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mp-content input[type="text"]:not(.form-control):focus,
.mp-content input[type="number"]:not(.form-control):focus,
.mp-content input#paymentAmountOther:focus {
    border-color: var(--cerulean-100) !important;
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20) !important;
}

/* Vertical spacing between form rows (label + input pairs) */
.mp-content fieldset > .row,
.mp-content #paybycc .row,
.mp-content #paybycheck .row,
.mp-content .panel-body fieldset .row {
    margin-bottom: 12px !important;
    align-items: center;
}

.mp-content fieldset > .row:last-child,
.mp-content #paybycc .row:last-child,
.mp-content #paybycheck .row:last-child {
    margin-bottom: 0 !important;
}

/* Inline labels for horizontal form-row layout */
.mp-content .control-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--fg-tertiary) !important;
    line-height: 1.4 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.mp-content label.control-label.pright { text-align: right; padding-right: 10px !important; }
.mp-content fieldset > legend {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    border: none;
    padding: 0 0 8px;
    margin: 0 0 8px;
    width: auto;
    border-bottom: 1px solid var(--border-primary);
    display: block;
}

@media (max-width: 991px) {
    .mp-layout { grid-template-columns: 1fr; gap: 14px; }
    .mp-stepnav { position: static; }
    .mp-stepnav ol { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .mp-stepnav__item { flex: 1 1 auto; min-width: 140px; }
    .mp-stepnav__item .lbl { font-size: 12px; }
}

/* =====================================================================
   ACCOUNT PROFILE — Section grouped current/new comparison form
   ===================================================================== */
/* Centering wrapper for AccountProfile — parent .page-content.addflex is
   display:flex / flex-direction:column, so margin:auto won't center on the
   cross-axis. Use align-self:center instead. */
.mf-dash-header.ap-centered,
.ap-form,
.ap-section,
.ap-consent,
.ap-meta-wrap,
.ap-cta-wrap,
.ap-fa-warn {
    width: 100% !important;
    max-width: 920px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


.ap-form { max-width: 920px; }

.ap-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 16px 20px;
    margin: 0 auto 12px !important;
    max-width: 920px;
}

.ap-section-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 12px;
}

.ap-row {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    gap: 12px 16px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-primary);
}

.ap-row:last-child { border-bottom: none; }

.ap-row.ap-row--header {
    padding: 4px 0;
    border-bottom: 1px solid var(--border-primary);
}

.ap-row.ap-row--scope {
    grid-template-columns: 200px 1fr;
}

.ap-row__lbl {
    font-size: 13px;
    color: var(--fg-tertiary);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.ap-row__cur {
    font-size: 13px;
    color: var(--fg-secondary);
    line-height: 1.4;
    word-break: break-word;
}

.ap-col-h {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-secondary);
}

.ap-input,
input.ap-input,
select.ap-input {
    width: 100%;
    height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ap-input:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.ap-input::placeholder { color: #717680; }

.ap-consent {
    padding: 14px 16px;
    background: var(--error-10);
    border: 1px solid var(--error-100);
    border-radius: 12px !important;
    color: #842424;
    font-size: 12px;
    line-height: 1.55;
    margin: 14px auto 16px !important;
    max-width: 920px;
}

.ap-consent strong { color: #842424; font-weight: 700; }

/* Financial-assistance warning banner (InformationUpdate page) */
.ap-fa-warn {
    margin-bottom: 14px !important;
    padding: 12px 16px;
    background: var(--error-10);
    border: 1px solid var(--error-100);
    color: #842424;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    box-sizing: border-box;
}

.ap-fa-warn i { font-size: 16px; line-height: 1.4; flex: 0 0 auto; color: #c4271f; margin-top: 2px; }
.ap-fa-warn strong { color: #842424; font-weight: 700; }

.ap-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 28px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.ap-cta:hover,
.ap-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 720px) {
    .ap-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
    .ap-row.ap-row--header { display: none; }
    .ap-row.ap-row--scope { grid-template-columns: 1fr; gap: 4px; }
    .ap-row__lbl { font-size: 12px; color: var(--fg-secondary); text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700; }
    .ap-row__cur { font-size: 14px; color: var(--fg-primary); font-weight: 500; padding: 2px 0; }
    .ap-row__cur::before { content: "Current: "; font-size: 10px; color: var(--fg-secondary); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; margin-right: 4px; }
    .ap-cta { width: 100%; }
}

/* =====================================================================
   CHANGE PASSWORD — Two-column form + live requirements checklist
   ===================================================================== */
.mf-dash-header.cp-centered,
.cp-banner.cp-centered,
.cp-form,
.cp-validation {
    width: 100% !important;
    max-width: 920px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cp-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px !important;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    margin: 0 auto 14px !important;
    max-width: 920px;
}

.cp-banner i { font-size: 16px; line-height: 1.4; flex: 0 0 auto; }

.cp-banner.cp-banner--alert {
    background: var(--error-10);
    border: 1px solid var(--error-100);
    color: #842424;
}

.cp-validation {
    margin-bottom: 12px;
}

.cp-validation:empty,
.cp-validation .validation-summary-valid {
    display: none;
}

.cp-validation .text-danger {
    background: var(--error-10);
    border: 1px solid var(--error-100);
    color: #842424;
    border-radius: 12px !important;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.cp-validation .text-danger ul { margin: 0; padding-left: 18px; }

.cp-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
    align-items: start;
}

.cp-form-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cp-field { display: block; }

.cp-label,
label.cp-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.cp-input,
input.cp-input {
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.cp-input:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.cp-reqs {
    background: #f5fafc;
    border: 1px solid #cfe1eb;
    border-radius: 12px !important;
    padding: 18px 20px;
}

.cp-reqs__h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 14px;
}

.cp-reqs__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-reqs__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-primary);
    line-height: 1.4;
    transition: color 150ms ease;
}

.cp-check {
    width: 22px;
    height: 22px;
    border-radius: 9999px !important;
    background: #e7f0f5;
    border: 1px solid #cfe1eb;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: 0 0 auto;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.cp-reqs__list li.met .cp-check {
    background: var(--cerulean-100);
    color: #ffffff;
    border-color: var(--cerulean-100);
}

.cp-reqs__list li.met {
    color: var(--fg-secondary);
}

.cp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 28px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45) !important;
    transition: background 150ms ease, transform 150ms ease;
    margin-top: 6px;
    align-self: flex-start;
}

.cp-cta:hover,
.cp-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 720px) {
    .cp-layout { grid-template-columns: 1fr; gap: 16px; }
    .cp-cta { width: 100%; align-self: stretch; }
}

/* =====================================================================
   HELP — Hero gradient + centered single form card (Option C)
   ===================================================================== */
.hp-hero,
.hp-form-card,
.hp-validation {
    width: 100% !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hp-hero {
    background: linear-gradient(135deg, var(--cerulean-100) 0%, var(--aegean-100) 100%);
    color: var(--fg-on-dark);
    border-radius: 16px !important;
    padding: 32px 28px;
    margin: 0 auto -28px !important;
    max-width: 920px;
    text-align: center;
    box-shadow: 0 8px 24px -8px rgba(6, 48, 77, 0.30);
    position: relative;
    overflow: hidden;
}

.hp-hero__lbl {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
    margin: 0 0 8px;
}

.hp-hero__title,
.page-content .hp-hero h1.hp-hero__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-on-dark) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.hp-hero__body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-on-dark-dim);
    margin: 0;
}

.hp-form-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 28px 28px 24px;
    max-width: 620px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 8px 24px -8px rgba(10, 13, 18, 0.12);
    position: relative;
    z-index: 1;
}

.hp-validation {
    max-width: 620px !important;
    margin-bottom: 12px !important;
}

.hp-validation:empty,
.hp-validation .validation-summary-valid {
    display: none;
}

.hp-validation .text-danger {
    background: var(--error-10);
    border: 1px solid var(--error-100);
    color: #842424;
    border-radius: 12px !important;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.hp-validation .text-danger ul { margin: 0; padding-left: 18px; }

.hp-field { margin-bottom: 14px; }
.hp-field:last-of-type { margin-bottom: 0; }

.hp-label,
label.hp-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.hp-input,
input.hp-input,
.hp-select,
select.hp-select {
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.hp-textarea,
textarea.hp-textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.5 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
    resize: vertical;
}

.hp-input:focus,
.hp-select:focus,
.hp-textarea:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.hp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 28px;
    margin-top: 18px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.hp-cta:hover,
.hp-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 720px) {
    .hp-hero { padding: 24px 20px; margin: 0 auto -20px !important; }
    .hp-hero__title { font-size: 22px; }
    .hp-form-card { padding: 22px 20px 20px; }
}

/* =====================================================================
   FINANCIAL ASSISTANCE STEP 2 — Reason selection card
   ===================================================================== */
.fa-card {
    width: 100%;
    max-width: 920px;
    margin: 0 auto 24px;
    padding: 26px 28px 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    box-sizing: border-box;
}

.fa-card__intro {
    font-family: var(--font-sans);
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--fg-primary);
    max-width: 68ch;
    margin: 0 0 20px;
}

.fa-card__intro p {
    margin: 0 0 16px;
}

.fa-card__intro p:last-child {
    margin-bottom: 0;
}

.fa-card__intro strong {
    color: var(--fg-primary);
    font-weight: 700;
}

.fa-field { margin-bottom: 18px; }

.fa-label {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-primary);
    margin-bottom: 6px;
}

.fa-select,
select.fa-select {
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.fa-select:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.fa-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 28px;
    margin-top: 8px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.fa-cta:hover,
.fa-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 720px) {
    .fa-card { padding: 22px 20px 20px; }
    .fa-cta { width: 100%; }
}

/* =====================================================================
   ADMIN — LOOK UP USERS — navy search hero + slim list rows (Option C)
   ===================================================================== */
.lu-hero,
.lu-results,
.lu-pager {
    width: 100% !important;
    max-width: 1100px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.lu-hero {
    background: var(--aegean-100);
    color: var(--fg-on-dark);
    border-radius: 16px !important;
    padding: 22px 24px;
    margin: 0 auto 16px !important;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 22px;
    align-items: end;
    box-shadow: 0 8px 24px -8px rgba(6, 48, 77, 0.30);
}

.lu-hero__copy { display: flex; flex-direction: column; gap: 2px; }

.lu-hero__title,
.page-content .lu-hero h1.lu-hero__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-on-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lu-hero__sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-on-dark-dim);
    margin: 4px 0 0;
    line-height: 1.5;
}

.lu-hero__search {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.lu-hero__input-wrap { position: relative; flex: 1; }

.lu-hero__input-ic {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #717680;
    font-size: 14px;
    pointer-events: none;
}

.lu-hero__input,
input.lu-hero__input {
    width: 100%;
    height: 44px;
    padding: 8px 16px 8px 42px;
    border: 1px solid transparent;
    border-radius: 9999px !important;
    background: #ffffff;
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 2px 6px rgba(10, 13, 18, 0.10);
    outline: none;
    transition: box-shadow 150ms ease;
    box-sizing: border-box;
}

.lu-hero__input:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.30), 0 2px 6px rgba(10, 13, 18, 0.10);
}

.lu-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.50) !important;
    transition: background 150ms ease, transform 150ms ease;
    white-space: nowrap;
}

.lu-hero__btn:hover,
.lu-hero__btn:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

.lu-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px !important;
}

.lu-row {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px !important;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 16px;
    align-items: center;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lu-row:hover {
    border-color: #cfe1eb;
    box-shadow: 0 2px 8px -2px rgba(10, 13, 18, 0.06);
}

.lu-row__avatar {
    width: 40px;
    height: 40px;
    border-radius: 9999px !important;
    background: #f5fafc;
    color: var(--cerulean-100);
    border: 1px solid #cfe1eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
}

.lu-row__info {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr 1fr;
    gap: 8px 18px;
    align-items: center;
    min-width: 0;
}

.lu-col { min-width: 0; }

.lu-col__h {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    margin: 0 0 2px;
}

.lu-col__v {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lu-col__v--user { color: var(--cerulean-100); }

.lu-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lu-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px !important;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--fg-secondary);
    cursor: pointer;
    font-size: 14px;
    transition: background 150ms ease, color 150ms ease;
    padding: 0;
}

.lu-actions__btn:hover,
.lu-actions__btn:focus {
    background: #f5fafc;
    color: var(--cerulean-100);
    outline: none;
}

.lu-actions__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 170px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px !important;
    padding: 4px;
    box-shadow: 0 12px 24px -6px rgba(10, 13, 18, 0.18);
    z-index: 200;
}

.lu-actions__menu.open { display: block; }

.lu-actions__item,
a.lu-actions__item {
    display: block;
    padding: 8px 12px;
    color: var(--fg-primary) !important;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 6px;
    transition: background 100ms ease, color 100ms ease;
}

.lu-actions__item:hover,
a.lu-actions__item:hover {
    background: #f5fafc;
    color: var(--cerulean-100) !important;
    text-decoration: none !important;
}

.lu-empty {
    background: var(--bg-primary);
    border: 1px dashed var(--border-secondary);
    border-radius: 12px !important;
    padding: 36px 20px;
    text-align: center;
    color: var(--fg-tertiary);
}

.lu-empty__ic { font-size: 26px; color: var(--fg-tertiary); margin-bottom: 10px; display: block; }
.lu-empty__title { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--fg-primary); margin: 0 0 4px; }
.lu-empty__sub { font-family: var(--font-sans); font-size: 13px; color: var(--fg-tertiary); margin: 0; }

.lu-pager {
    display: flex;
    justify-content: center;
    margin: 0 auto 24px !important;
}

.lu-pager .pagination,
.lu-pager ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.lu-pager .pagination > li > a,
.lu-pager .pagination > li > span,
.lu-pager ul > li > a,
.lu-pager ul > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-primary) !important;
    border-radius: 8px !important;
    background: var(--bg-primary) !important;
    color: var(--fg-secondary) !important;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.lu-pager .pagination > li > a:hover,
.lu-pager ul > li > a:hover {
    background: #f5fafc !important;
    color: var(--cerulean-100) !important;
    border-color: #cfe1eb !important;
}

.lu-pager .pagination > li.active > a,
.lu-pager .pagination > li.active > span,
.lu-pager ul > li.active > a,
.lu-pager ul > li.active > span {
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border-color: var(--cerulean-100) !important;
}

.lu-pager .pagination > li.disabled > a,
.lu-pager .pagination > li.disabled > span,
.lu-pager ul > li.disabled > a,
.lu-pager ul > li.disabled > span {
    background: #fafafa !important;
    color: #c2cad8 !important;
    cursor: not-allowed;
}

.lu-pager .PagedList-pageCountAndLocation {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: var(--fg-tertiary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
}

@media (max-width: 900px) {
    .lu-row__info { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
}

@media (max-width: 600px) {
    .lu-hero { grid-template-columns: 1fr; }
    .lu-hero__search { flex-direction: column; }
    .lu-hero__btn { width: 100%; }
    .lu-row { grid-template-columns: 40px 1fr; gap: 12px; }
    .lu-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .lu-actions__menu { right: 0; left: auto; }
    .lu-row__info { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   ADMIN — DELETE PAYMENT — Compact destructive admin form (Option A)
   ===================================================================== */
.dlp-card {
    width: 100% !important;
    max-width: 480px !important;
    align-self: center !important;
    margin: 0 auto 24px !important;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 22px 24px 20px;
    box-shadow: 0 4px 12px -4px rgba(10, 13, 18, 0.08);
    display: block;
}

.dlp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--error-10);
    color: #c4271f;
    border: 1px solid #f8c0bb;
    border-radius: 9999px !important;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.dlp-badge i { font-size: 11px; }

.dlp-h1,
.page-content h1.dlp-h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-primary) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.dlp-sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-secondary);
    margin: 0 0 16px;
    line-height: 1.55;
}

.dlp-validation { margin-bottom: 12px; }

.dlp-validation:empty,
.dlp-validation .validation-summary-valid {
    display: none;
}

.dlp-validation .text-danger {
    background: var(--error-10);
    border: 1px solid var(--error-100);
    color: #842424;
    border-radius: 12px !important;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.dlp-validation .text-danger ul { margin: 0; padding-left: 18px; }

.dlp-field { margin-bottom: 14px; }

.dlp-label,
label.dlp-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.dlp-input-wrap { position: relative; }

.dlp-input-ic {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-tertiary);
    font-size: 13px;
    pointer-events: none;
}

.dlp-input,
input.dlp-input {
    width: 100%;
    height: 42px;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.dlp-input:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.dlp-error,
.dlp-field .text-danger {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #c4271f;
    margin-top: 6px;
}

.dlp-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-primary);
}

.dlp-cta-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    background: #c4271f !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(196, 39, 31, 0.40) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.dlp-cta-danger:hover,
.dlp-cta-danger:focus {
    background: #a31f18 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 600px) {
    .dlp-actions { justify-content: stretch; }
    .dlp-cta-danger { width: 100%; }
}

/* =====================================================================
   ADMIN — FORCE IMPERSONATE — Compact admin form (Option A)
   ===================================================================== */
.fi-card {
    width: 100% !important;
    max-width: 480px !important;
    align-self: center !important;
    margin: 0 auto 24px !important;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 22px 24px 20px;
    box-shadow: 0 4px 12px -4px rgba(10, 13, 18, 0.08);
    display: block;
}

.fi-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #f5fafc;
    color: var(--cerulean-100);
    border: 1px solid #cfe1eb;
    border-radius: 9999px !important;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.fi-badge i { font-size: 11px; }

.fi-h1,
.page-content h1.fi-h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-primary) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.fi-sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-secondary);
    margin: 0 0 16px;
    line-height: 1.55;
}

.fi-validation { margin-bottom: 12px; }

.fi-validation:empty,
.fi-validation .validation-summary-valid {
    display: none;
}

.fi-validation .text-danger {
    background: var(--error-10);
    border: 1px solid var(--error-100);
    color: #842424;
    border-radius: 12px !important;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.fi-validation .text-danger ul { margin: 0; padding-left: 18px; }

.fi-field { margin-bottom: 14px; }

.fi-label,
label.fi-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.fi-input-wrap { position: relative; }

.fi-input-ic {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-tertiary);
    font-size: 13px;
    pointer-events: none;
}

.fi-input,
input.fi-input {
    width: 100%;
    height: 42px;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.fi-input:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.fi-error,
.fi-field .text-danger {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #c4271f;
    margin-top: 6px;
}

.fi-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-primary);
}

.fi-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.40) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.fi-cta:hover,
.fi-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

/* Result state — shown after POST */
.fi-result {
    width: 100% !important;
    max-width: 480px !important;
    align-self: center !important;
    margin: 0 auto 24px !important;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 28px 24px 24px;
    text-align: center;
    box-shadow: 0 4px 12px -4px rgba(10, 13, 18, 0.08);
}

.fi-result__ic {
    width: 56px;
    height: 56px;
    border-radius: 9999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 14px;
}

.fi-result--success .fi-result__ic {
    background: #e7f0f5;
    color: var(--cerulean-100);
    border: 2px solid #cfe1eb;
}

.fi-result--error .fi-result__ic {
    background: var(--error-10);
    color: #c4271f;
    border: 2px solid #f8c0bb;
}

.fi-result__title,
.page-content h1.fi-result__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-primary) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.fi-result__sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-secondary);
    margin: 0 0 16px;
    line-height: 1.55;
}

.fi-result__meta {
    margin: 0;
    padding: 14px 16px;
    background: #f5fafc;
    border: 1px solid #cfe1eb;
    border-radius: 10px;
    text-align: left;
}

.fi-result__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #cfe1eb;
}

.fi-result__row:last-child { border-bottom: none; }

.fi-result__row dt {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    margin: 0;
}

.fi-result__row dd {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 0;
}

.fi-result__retry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    background: transparent;
    color: var(--cerulean-100) !important;
    border: 1px solid #cfe1eb;
    border-radius: 8px !important;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 150ms ease;
}

.fi-result__retry:hover {
    background: #f5fafc;
    color: var(--cerulean-100) !important;
    text-decoration: none !important;
}

@media (max-width: 600px) {
    .fi-actions { justify-content: stretch; }
    .fi-cta { width: 100%; }
}

/* =====================================================================
   ADMIN — PRINT PRIVACY STATEMENT — Navy search hero + result rows (Option A)
   ===================================================================== */
.pp-form,
.pp-hero,
.pp-results {
    width: 100% !important;
    max-width: 1100px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pp-form { display: block; }

.pp-hero {
    background: var(--aegean-100);
    color: var(--fg-on-dark);
    border-radius: 16px !important;
    padding: 22px 24px;
    margin: 0 auto 16px !important;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 22px;
    align-items: end;
    box-shadow: 0 8px 24px -8px rgba(6, 48, 77, 0.30);
}

.pp-hero__copy { display: flex; flex-direction: column; gap: 2px; }

.pp-hero__title,
.page-content .pp-hero h1.pp-hero__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-on-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pp-hero__sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-on-dark-dim);
    margin: 4px 0 0;
    line-height: 1.5;
}

.pp-hero__search {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.pp-hero__input-wrap { position: relative; flex: 1; }

.pp-hero__input-ic {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #717680;
    font-size: 14px;
    pointer-events: none;
}

.pp-hero__input,
input.pp-hero__input {
    width: 100%;
    height: 44px;
    padding: 8px 16px 8px 42px;
    border: 1px solid transparent;
    border-radius: 9999px !important;
    background: #ffffff;
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 2px 6px rgba(10, 13, 18, 0.10);
    outline: none;
    transition: box-shadow 150ms ease;
    box-sizing: border-box;
}

.pp-hero__input:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.30), 0 2px 6px rgba(10, 13, 18, 0.10);
}

.pp-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.50) !important;
    transition: background 150ms ease, transform 150ms ease;
    white-space: nowrap;
}

.pp-hero__btn:hover,
.pp-hero__btn:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

.pp-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px !important;
}

.pp-results:empty { display: none; }

.pp-row {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px !important;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    gap: 16px;
    align-items: center;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.pp-row:hover {
    border-color: #cfe1eb;
    box-shadow: 0 2px 8px -2px rgba(10, 13, 18, 0.06);
}

.pp-col { min-width: 0; }

.pp-col__h {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    margin: 0 0 2px;
}

.pp-col__v {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #f5fafc;
    color: var(--cerulean-100) !important;
    border: 1px solid #cfe1eb;
    border-radius: 9999px !important;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.pp-pdf-btn:hover,
.pp-pdf-btn:focus {
    background: var(--cerulean-100);
    color: #ffffff !important;
    border-color: var(--cerulean-100);
    outline: none;
}

.pp-empty {
    background: var(--bg-primary);
    border: 1px dashed var(--border-secondary);
    border-radius: 12px !important;
    padding: 36px 20px;
    text-align: center;
    color: var(--fg-tertiary);
}

.pp-empty__ic { font-size: 26px; color: var(--fg-tertiary); margin-bottom: 10px; display: block; }
.pp-empty__title { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--fg-primary); margin: 0 0 4px; }
.pp-empty__sub { font-family: var(--font-sans); font-size: 13px; color: var(--fg-tertiary); margin: 0; }

@media (max-width: 720px) {
    .pp-row { grid-template-columns: 1fr 1fr; }
    .pp-pdf-btn { grid-column: 1 / -1; justify-self: flex-end; }
}

@media (max-width: 600px) {
    .pp-hero { grid-template-columns: 1fr; }
    .pp-hero__search { flex-direction: column; }
    .pp-hero__btn { width: 100%; }
}

/* =====================================================================
   ADMIN — GENERATE NH STATEMENTS — Section grouped batch tool (Option A)
   ===================================================================== */
.nh-header,
.nh-section,
.nh-actions {
    width: 100% !important;
    max-width: 920px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.nh-header { margin: 0 auto 12px !important; }

.nh-h1,
.page-content h1.nh-h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-primary) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.nh-sub {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--fg-secondary);
    margin: 0 0 8px;
    line-height: 1.55;
}

.nh-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 18px 22px;
    margin: 0 auto 12px !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
}

.nh-section-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 14px;
}

.nh-warn {
    padding: 12px 14px;
    background: #fef9e6;
    border: 1px solid #f4c542;
    border-radius: 12px !important;
    color: #6b4f00;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.nh-warn__ic { font-size: 16px; line-height: 1.4; flex: 0 0 auto; color: #b07b00; }
.nh-warn strong { color: #5a4400; font-weight: 700; }
.nh-warn code { background: rgba(176, 123, 0, 0.12); padding: 1px 6px; border-radius: 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; color: #5a4400; }

.nh-params {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
}

.nh-params__field { display: flex; flex-direction: column; }

.nh-label,
label.nh-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.nh-select,
select.nh-select {
    width: 100%;
    height: 40px;
    padding: 8px 28px 8px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
    cursor: pointer;
}

.nh-select:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.nh-log,
textarea.nh-log {
    width: 100%;
    height: 320px;
    padding: 14px 16px;
    background: #0c1a26;
    color: #d8e6ef;
    border: 1px solid #1f3144;
    border-radius: 10px !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    line-height: 1.55;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.30);
    white-space: pre-wrap;
    overflow: auto;
}

.nh-log::placeholder { color: #6a8a9f; font-style: italic; }
.nh-log:focus { border-color: var(--cerulean-100); box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20), inset 0 2px 4px rgba(0, 0, 0, 0.30); }

.nh-status {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--fg-brand);
    font-weight: 600;
    min-height: 18px;
    margin: 8px 0 0;
}

.nh-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 auto 24px !important;
}

.nh-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 28px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.40) !important;
    transition: background 150ms ease, transform 150ms ease, opacity 150ms ease;
}

.nh-cta:hover:not(:disabled),
.nh-cta:focus:not(:disabled) {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

.nh-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 720px) {
    .nh-params { grid-template-columns: 1fr; }
    .nh-actions { justify-content: stretch; }
    .nh-cta { width: 100%; }
}

/* =====================================================================
   ADMIN — ADD NEW USER — Stepped wizard (Option A)
   ===================================================================== */
.au-header,
.au-form,
.au-validation,
.au-stepper,
.au-pane,
.au-actions {
    width: 100% !important;
    max-width: 920px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.au-header { margin: 0 auto 12px !important; }

.au-h1,
.page-content h1.au-h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-primary) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.au-sub {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--fg-secondary);
    margin: 0;
    line-height: 1.55;
}

.au-form { display: block; }

.au-validation { margin-bottom: 12px; }
.au-validation:empty,
.au-validation .validation-summary-valid {
    display: none;
}
.au-validation .text-danger,
.au-validation .validation-summary-errors {
    background: var(--error-10);
    border: 1px solid var(--error-100);
    color: #842424;
    border-radius: 12px !important;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}
.au-validation .text-danger ul,
.au-validation .validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

.au-stepper {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    background: #f5fafc;
    border: 1px solid #cfe1eb;
    border-radius: 12px !important;
    margin: 0 auto 14px !important;
}

.au-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 120ms ease;
    min-width: 0;
}

.au-step:hover { background: rgba(0, 127, 156, 0.06); }

.au-step__num {
    width: 26px;
    height: 26px;
    border-radius: 9999px !important;
    background: #cfe1eb;
    color: var(--cerulean-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
    transition: background 150ms ease, color 150ms ease;
}

.au-step.active .au-step__num {
    background: var(--cerulean-100);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 127, 156, 0.18);
}

.au-step.done .au-step__num {
    background: var(--cerulean-100);
    color: #ffffff;
}

.au-step.done .au-step__num span { display: none; }
.au-step.done .au-step__num::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.au-step__lbl {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.au-step.active .au-step__lbl { color: var(--cerulean-100); }
.au-step.done .au-step__lbl { color: var(--fg-primary); }

.au-pane {
    display: none;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 22px 24px;
    margin: 0 auto 14px !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
}

.au-pane.active { display: block; }

.au-pane__h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 16px;
}

.au-pane__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #f5fafc;
    border: 1px solid #cfe1eb;
    border-radius: 10px;
    color: var(--fg-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 14px;
}

.au-pane__note i { color: var(--cerulean-100); margin-top: 2px; }
.au-pane__note code { background: rgba(0, 127, 156, 0.10); padding: 1px 6px; border-radius: 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 11px; color: var(--cerulean-100); }

.au-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.au-field { display: block; }
.au-field--full { grid-column: 1 / -1; }

.au-label,
label.au-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.au-input,
input.au-input,
.au-select,
select.au-select {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.au-select { cursor: pointer; padding-right: 28px; }

.au-input:focus,
.au-select:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.au-error,
.au-field .text-danger {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #c4271f;
    margin-top: 6px;
}

.au-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0 auto 24px !important;
}

.au-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 26px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.40) !important;
    transition: background 150ms ease, transform 150ms ease;
    margin-left: auto;
}

.au-cta:hover,
.au-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

.au-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    background: var(--bg-primary) !important;
    color: var(--fg-secondary) !important;
    border: 1px solid var(--border-secondary) !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.au-btn-secondary:hover:not(:disabled),
.au-btn-secondary:focus:not(:disabled) {
    background: #f5fafc !important;
    color: var(--cerulean-100) !important;
    border-color: #cfe1eb !important;
    outline: none;
}

.au-btn-secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .au-stepper { flex-wrap: wrap; gap: 6px; }
    .au-step { flex: 1 1 calc(50% - 6px); }
    .au-grid { grid-template-columns: 1fr; }
    .au-actions { flex-wrap: wrap; }
    .au-btn-secondary, .au-cta { flex: 1; justify-content: center; }
    .au-cta { margin-left: 0; }
}

/* =====================================================================
   ADMIN — EDIT USER — Profile header + stacked section cards (Option A)
   ===================================================================== */
.eu-header,
.eu-profile,
.eu-form,
.eu-validation,
.eu-section,
.eu-actions {
    width: 100% !important;
    max-width: 920px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.eu-header { margin: 0 auto 12px !important; }

.eu-h1,
.page-content h1.eu-h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-primary) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.eu-sub {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--fg-secondary);
    margin: 0;
    line-height: 1.55;
}

.eu-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--aegean-100) 0%, #0a4a73 100%);
    color: var(--fg-on-dark);
    border-radius: 12px !important;
    margin: 0 auto 14px !important;
    box-shadow: 0 4px 12px -4px rgba(6, 48, 77, 0.30);
}

.eu-profile__avatar {
    width: 52px;
    height: 52px;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.eu-profile__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.eu-profile__lbl {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
    margin: 0;
}

.eu-profile__name {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eu-form { display: block; }

.eu-validation { margin-bottom: 12px; }
.eu-validation:empty,
.eu-validation .validation-summary-valid {
    display: none;
}
.eu-validation .text-danger,
.eu-validation .validation-summary-errors {
    background: var(--error-10);
    border: 1px solid var(--error-100);
    color: #842424;
    border-radius: 12px !important;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}
.eu-validation .text-danger ul,
.eu-validation .validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

.eu-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 18px 22px;
    margin: 0 auto 12px !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
    display: block;
}

.eu-section-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.eu-section-h__num {
    width: 22px;
    height: 22px;
    border-radius: 9999px !important;
    background: var(--cerulean-100);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.eu-section__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #f5fafc;
    border: 1px solid #cfe1eb;
    border-radius: 10px;
    color: var(--fg-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 14px;
}

.eu-section__note i { color: var(--cerulean-100); margin-top: 2px; }
.eu-section__note code { background: rgba(0, 127, 156, 0.10); padding: 1px 6px; border-radius: 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 11px; color: var(--cerulean-100); }

.eu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.eu-field { display: block; }
.eu-field--full { grid-column: 1 / -1; }

.eu-label,
label.eu-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.eu-input,
input.eu-input,
.eu-select,
select.eu-select {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.eu-select { cursor: pointer; padding-right: 28px; }

.eu-input:focus,
.eu-select:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.eu-error,
.eu-field .text-danger {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #c4271f;
    margin-top: 6px;
}

.eu-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 auto 24px !important;
}

.eu-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 28px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.40) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.eu-cta:hover,
.eu-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 720px) {
    .eu-grid { grid-template-columns: 1fr; }
    .eu-actions { justify-content: stretch; }
    .eu-cta { width: 100%; }
}

/* =====================================================================
   ADMIN — USER DETAILS — Profile header + stacked section cards (Option A)
   ===================================================================== */
.ud-header,
.ud-update,
.ud-profile,
.ud-card {
    width: 100% !important;
    max-width: 1000px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ud-header { margin: 0 auto 12px !important; }

.ud-h1,
.page-content h1.ud-h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-primary) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.ud-sub {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--fg-secondary);
    margin: 0;
    line-height: 1.55;
}

.ud-update {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #e7f5ee;
    border: 1px solid #6ec48c;
    color: #0d4724;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    margin: 0 auto 12px !important;
}

.ud-update i { font-size: 16px; color: #128a4a; }

.ud-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--aegean-100) 0%, #0a4a73 100%);
    color: var(--fg-on-dark);
    border-radius: 12px !important;
    margin: 0 auto 14px !important;
    box-shadow: 0 4px 12px -4px rgba(6, 48, 77, 0.30);
}

.ud-profile__avatar {
    width: 52px;
    height: 52px;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.ud-profile__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ud-profile__lbl {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
    margin: 0;
}

.ud-profile__name {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 18px 22px;
    margin: 0 auto 12px !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
}

.ud-card:last-of-type { margin-bottom: 24px !important; }

.ud-card-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ud-card-h__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 9999px !important;
    background: #f5fafc;
    border: 1px solid #cfe1eb;
    color: var(--cerulean-100);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.ud-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.ud-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-primary);
}

.ud-info--full { grid-column: 1 / -1; }

.ud-info__lbl {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    margin: 0;
}

.ud-info__val {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 0;
    word-break: break-word;
}

.ud-info__val:empty::after {
    content: "—";
    color: var(--fg-tertiary);
    font-weight: 400;
}

.ud-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ud-action-btn,
a.ud-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: 1px solid var(--cerulean-100);
    border-radius: 10px !important;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.ud-action-btn:hover,
a.ud-action-btn:hover,
.ud-action-btn:focus,
a.ud-action-btn:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
    text-decoration: none !important;
}

.ud-action-btn--secondary,
a.ud-action-btn--secondary {
    background: var(--bg-primary) !important;
    color: var(--cerulean-100) !important;
    border: 1px solid #cfe1eb !important;
}

.ud-action-btn--secondary:hover,
a.ud-action-btn--secondary:hover,
.ud-action-btn--secondary:focus,
a.ud-action-btn--secondary:focus {
    background: #f5fafc !important;
    color: var(--cerulean-100) !important;
    border-color: var(--cerulean-100) !important;
}

.ud-table-wrap {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px !important;
    overflow-x: auto;
}

.ud-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 12px;
}

.ud-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: #fafafa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-secondary);
    border-bottom: 1px solid var(--border-primary);
    white-space: nowrap;
    border: none !important;
}

.ud-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-primary);
    color: var(--fg-primary);
    white-space: nowrap;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.ud-table tbody tr:last-child td { border-bottom: none; }

.ud-table tbody tr:hover td { background: #fafcfd; }

.ud-table__num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ud-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--fg-tertiary);
    background: var(--bg-primary);
    border: 1px dashed var(--border-secondary);
    border-radius: 10px !important;
}

.ud-empty__ic {
    font-size: 28px;
    color: var(--fg-tertiary);
    display: block;
    margin-bottom: 10px;
}

.ud-empty__title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-primary);
    margin: 0 0 4px;
}

.ud-empty__sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-tertiary);
    margin: 0;
}

@media (max-width: 720px) {
    .ud-info-grid { grid-template-columns: 1fr; }
    .ud-actions { flex-direction: column; align-items: stretch; }
    .ud-action-btn { justify-content: center; }
}

/* =====================================================================
   ADMIN — CHANGE USER PASSWORD — Compact admin form (Option A)
   ===================================================================== */
.cup-card {
    width: 100% !important;
    max-width: 480px !important;
    align-self: center !important;
    margin: 0 auto 24px !important;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 22px 24px 20px;
    box-shadow: 0 4px 12px -4px rgba(10, 13, 18, 0.08);
    display: block;
}

.cup-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #f5fafc;
    color: var(--cerulean-100);
    border: 1px solid #cfe1eb;
    border-radius: 9999px !important;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cup-badge i { font-size: 11px; }

.cup-h1,
.page-content h1.cup-h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-primary) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.cup-sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-secondary);
    margin: 0 0 14px;
    line-height: 1.55;
}

.cup-user-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f5fafc;
    border: 1px solid #cfe1eb;
    border-radius: 10px !important;
    margin-bottom: 14px;
}

.cup-user-strip__av {
    width: 36px;
    height: 36px;
    border-radius: 9999px !important;
    background: var(--cerulean-100);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}

.cup-user-strip__lbl {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    margin: 0;
}

.cup-user-strip__val {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-primary);
    margin: 0;
}

.cup-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #fef9e6;
    border: 1px solid #f4c542;
    border-radius: 10px !important;
    color: #6b4f00;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 14px;
}

.cup-info i { color: #b07b00; margin-top: 2px; flex: 0 0 auto; }
.cup-info strong { color: #5a4400; font-weight: 700; }

.cup-validation { margin-bottom: 12px; }

.cup-validation:empty,
.cup-validation .validation-summary-valid {
    display: none;
}

.cup-validation .text-danger {
    background: var(--error-10);
    border: 1px solid var(--error-100);
    color: #842424;
    border-radius: 12px !important;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.cup-validation .text-danger ul { margin: 0; padding-left: 18px; }

.cup-field { margin-bottom: 14px; }

.cup-label,
label.cup-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.cup-input,
input.cup-input {
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.cup-input:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.cup-input--mono,
input.cup-input--mono {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    letter-spacing: 0.04em;
    background: #fafcfd;
    color: var(--cerulean-100);
    font-weight: 700;
    font-size: 15px;
}

.cup-input--mono:read-only,
input.cup-input--mono[readonly] {
    cursor: default;
}

.cup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-primary);
    flex-wrap: wrap;
}

.cup-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.40) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.cup-cta:hover,
.cup-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

.cup-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    background: var(--bg-primary) !important;
    color: var(--cerulean-100) !important;
    border: 1px solid #cfe1eb !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.cup-btn-secondary:hover,
.cup-btn-secondary:focus {
    background: #f5fafc !important;
    color: var(--cerulean-100) !important;
    border-color: var(--cerulean-100) !important;
    outline: none;
}

@media (max-width: 600px) {
    .cup-actions { justify-content: stretch; }
    .cup-cta, .cup-btn-secondary { flex: 1; justify-content: center; }
}

/* =====================================================================
   REQUEST PAYOFF AMOUNT — Navy hero + focused form card (Option A)
   ===================================================================== */
.rp-hero,
.rp-form-card {
    width: 100% !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rp-hero {
    background: linear-gradient(135deg, var(--aegean-100) 0%, #0a4a73 100%);
    color: var(--fg-on-dark);
    border-radius: 16px !important;
    padding: 28px 28px 36px;
    margin: 0 auto -28px !important;
    max-width: 920px !important;
    text-align: center;
    box-shadow: 0 8px 24px -8px rgba(6, 48, 77, 0.30);
    position: relative;
    overflow: hidden;
}

.rp-hero__lbl {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
    margin: 0 0 8px;
}

.rp-hero__title,
.page-content .rp-hero h1.rp-hero__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-on-dark) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.rp-hero__body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-on-dark-dim);
    margin: 0;
}

.rp-form-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 26px 24px 22px;
    max-width: 600px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 24px -8px rgba(10, 13, 18, 0.12);
    position: relative;
    z-index: 1;
}

.rp-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--error-10);
    border: 1px solid var(--error-100);
    border-radius: 12px !important;
    color: #842424;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.rp-notice__ic {
    font-size: 16px;
    color: #c4271f;
    margin-top: 2px;
    flex: 0 0 auto;
}

.rp-notice strong { color: #842424; font-weight: 700; }

.rp-field { margin-bottom: 14px; }

.rp-label,
label.rp-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.rp-input-wrap { position: relative; }

.rp-input-ic {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-tertiary);
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}

.rp-input,
input.rp-input {
    width: 100%;
    height: 42px;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.rp-input:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

/* Date picker integration — preserves bootstrap-datepicker structure but
   restyles the input-group to look like our other inputs with an icon trigger
   on the right. */
.rp-date-wrap.input-group {
    position: relative;
    display: flex !important;
    width: 100%;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    overflow: hidden;
}

.rp-date-wrap.input-group:focus-within {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.rp-date-wrap input.rp-input,
.rp-date-wrap input.form-control {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 40px !important;
    padding: 8px 12px 8px 36px !important;
}

.rp-date-wrap input.rp-input:focus,
.rp-date-wrap input.form-control:focus {
    box-shadow: none !important;
}

.rp-date-wrap .rp-input-ic {
    z-index: 2;
}

.rp-date-trigger.input-group-btn {
    display: flex !important;
    width: auto !important;
}

.rp-date-btn,
button.rp-date-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 44px;
    padding: 0;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background 150ms ease;
}

.rp-date-btn:hover,
.rp-date-btn:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    outline: none;
}

.rp-date-btn i { font-size: 14px; }

.rp-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.rp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 28px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.rp-cta:hover,
.rp-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 720px) {
    .rp-hero { padding: 22px 20px 30px; margin: 0 auto -20px !important; }
    .rp-hero__title { font-size: 22px !important; }
    .rp-form-card { padding: 22px 20px 20px; }
    .rp-actions { justify-content: stretch; }
    .rp-cta { width: 100%; }
}

/* =====================================================================
   DEBT PROTECTION SIGNUP — action banner + contract iframe
   ===================================================================== */
.dps-action {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: #f5fafc;
    border: 1px solid #cfe1eb;
    border-radius: 12px !important;
    margin: 0 0 14px;
    box-sizing: border-box;
}

.dps-action__copy {
    flex: 1;
    min-width: 0;
}

.dps-action__copy p {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg-primary);
    margin: 0;
}

.dps-action__copy strong { color: var(--cerulean-100); font-weight: 700; }

.dps-action__copy a {
    color: var(--cerulean-100) !important;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1px dashed #cfe1eb;
}

.dps-action__copy a:hover {
    color: var(--bg-brand-hover) !important;
    border-bottom-color: var(--cerulean-100);
}

.dps-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 26px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45) !important;
    transition: background 150ms ease, transform 150ms ease;
    white-space: nowrap;
    flex: 0 0 auto;
}

.dps-cta:hover,
.dps-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 720px) {
    .dps-action { flex-direction: column; align-items: stretch; }
    .dps-cta { width: 100%; }
}

/* =====================================================================
   DEBT PROTECT COMPLETE — Final-step verification form
   ===================================================================== */
.dpc-form {
    width: 100% !important;
    max-width: 720px !important;
    align-self: center !important;
    margin: 0 auto 24px !important;
    display: block;
}

.dpc-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 18px 22px;
    margin: 0 0 12px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
}

.dpc-section-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 14px;
}

.dpc-section--summary {
    background: linear-gradient(135deg, #f5fafc 0%, #ebf5f8 100%);
    border-color: #cfe1eb;
}

.dpc-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dpc-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--fg-primary);
    line-height: 1.5;
}

.dpc-steps strong { color: var(--cerulean-100); font-weight: 700; }

.dpc-steps__num {
    width: 26px;
    height: 26px;
    border-radius: 9999px !important;
    background: var(--cerulean-100);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}

.dpc-field { margin: 0; }

.dpc-label,
label.dpc-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-tertiary);
    margin: 0 0 6px;
}

.dpc-input,
input.dpc-input {
    width: 100%;
    max-width: 240px;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 8px !important;
    background: var(--bg-primary);
    color: var(--fg-primary);
    font: 400 14px/1.4 var(--font-sans);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.dpc-input:focus {
    border-color: var(--cerulean-100);
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.20);
}

.dpc-summary {
    margin: 0;
    padding: 0;
}

.dpc-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid #cfe1eb;
}

.dpc-summary__row:last-child { border-bottom: none; }

.dpc-summary__row dt {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-secondary);
    margin: 0;
}

.dpc-summary__row dd {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.dpc-summary__row--total {
    padding-top: 14px;
    border-top: 2px solid #cfe1eb;
    border-bottom: none !important;
}

.dpc-summary__row--total dt {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dpc-summary__row--total dd {
    font-size: 22px;
    font-weight: 700;
    color: var(--cerulean-100);
}

.dpc-summary__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--fg-secondary);
    line-height: 1.5;
}

.dpc-summary__note i { color: var(--cerulean-100); margin-top: 2px; flex: 0 0 auto; }

/* Custom checkbox */
.dpc-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 4px;
    margin: 0;
    user-select: none;
}

.dpc-check__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.dpc-check__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px !important;
    background: var(--bg-primary);
    border: 2px solid var(--border-secondary);
    color: transparent;
    flex: 0 0 auto;
    margin-top: 1px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.dpc-check__box i { font-size: 12px; }

.dpc-check__input:checked ~ .dpc-check__box {
    background: var(--cerulean-100);
    border-color: var(--cerulean-100);
    color: #ffffff;
}

.dpc-check__input:focus-visible ~ .dpc-check__box {
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.25);
}

.dpc-check__label {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-primary);
    line-height: 1.55;
}

.dpc-check:hover .dpc-check__box {
    border-color: var(--cerulean-100);
}

.dpc-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.dpc-cta,
input.dpc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 28px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45) !important;
    transition: background 150ms ease, transform 150ms ease;
    white-space: nowrap;
}

.dpc-cta:hover,
.dpc-cta:focus,
input.dpc-cta:hover,
input.dpc-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

/* jQuery validation error message styling for this form */
#dpForm label.error,
#dpForm .field-validation-error {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #c4271f !important;
    margin-top: 6px;
}

@media (max-width: 720px) {
    .dpc-input { max-width: 100%; }
    .dpc-actions { justify-content: stretch; }
    .dpc-cta { width: 100%; }
    .dpc-summary__row--total dd { font-size: 18px; }
}

/* =====================================================================
   DEBT PROTECTION THANK YOU — Success confirmation
   ===================================================================== */
.dpt-hero,
.dpt-section,
.dpt-actions,
.dpt-note {
    width: 100% !important;
    max-width: 720px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.dpt-hero {
    background: linear-gradient(135deg, var(--cerulean-100) 0%, var(--aegean-100) 100%);
    color: var(--fg-on-dark);
    border-radius: 16px !important;
    padding: 28px 24px;
    margin: 0 auto 14px !important;
    text-align: center;
    box-shadow: 0 8px 24px -8px rgba(0, 127, 156, 0.40);
    position: relative;
    overflow: hidden;
}

.dpt-hero__ic {
    width: 64px;
    height: 64px;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 3px solid rgba(255, 255, 255, 0.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 14px;
}

.dpt-hero__lbl {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
    margin: 0 0 8px;
}

.dpt-hero__title,
.page-content h1.dpt-hero__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.dpt-hero__body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-on-dark-dim);
    margin: 0;
}

.dpt-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 18px 22px;
    margin: 0 auto 12px !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
}

.dpt-section-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 14px;
}

.dpt-meta {
    margin: 0;
    padding: 0;
}

.dpt-meta__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-primary);
}

.dpt-meta__row:last-child { border-bottom: none; }

.dpt-meta__row dt {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-secondary);
    margin: 0;
}

.dpt-meta__row dd {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
    word-break: break-word;
}

.dpt-meta__row--total {
    margin-top: 4px;
    padding-top: 14px !important;
    border-top: 2px solid #cfe1eb;
    border-bottom: none !important;
}

.dpt-meta__row--total dt {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dpt-meta__row--total dd {
    font-size: 22px;
    font-weight: 700;
    color: var(--cerulean-100);
}

.dpt-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto 14px !important;
}

.dpt-cta,
a.dpt-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.40) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.dpt-cta:hover,
.dpt-cta:focus,
a.dpt-cta:hover,
a.dpt-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
    text-decoration: none !important;
}

.dpt-cta--secondary,
a.dpt-cta--secondary {
    background: var(--bg-primary) !important;
    color: var(--cerulean-100) !important;
    border: 1px solid #cfe1eb !important;
    box-shadow: none !important;
}

.dpt-cta--secondary:hover,
.dpt-cta--secondary:focus,
a.dpt-cta--secondary:hover,
a.dpt-cta--secondary:focus {
    background: #f5fafc !important;
    color: var(--cerulean-100) !important;
    border-color: var(--cerulean-100) !important;
}

.dpt-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #fef9e6;
    border: 1px solid #f4c542;
    border-radius: 12px !important;
    color: #6b4f00;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 auto 24px !important;
}

.dpt-note__ic {
    font-size: 16px;
    color: #b07b00;
    margin-top: 2px;
    flex: 0 0 auto;
}

.dpt-note strong { color: #5a4400; font-weight: 700; }

@media (max-width: 720px) {
    .dpt-hero { padding: 24px 18px; }
    .dpt-hero__title { font-size: 22px !important; }
    .dpt-actions { flex-direction: column; }
    .dpt-cta { width: 100%; }
    .dpt-meta__row--total dd { font-size: 18px; }
}

/* =====================================================================
   PAYMENT THANK YOU — Confirmation after one-time / recurring payment
   ===================================================================== */
.pty-hero,
.pty-section,
.pty-actions,
.pty-note {
    width: 100% !important;
    max-width: 720px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pty-hero {
    background: linear-gradient(135deg, var(--cerulean-100) 0%, var(--aegean-100) 100%);
    color: var(--fg-on-dark);
    border-radius: 16px !important;
    padding: 28px 24px;
    margin: 0 auto 14px !important;
    text-align: center;
    box-shadow: 0 8px 24px -8px rgba(0, 127, 156, 0.40);
    position: relative;
    overflow: hidden;
}

.pty-hero__ic {
    width: 64px;
    height: 64px;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 3px solid rgba(255, 255, 255, 0.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 14px;
}

.pty-hero__lbl {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
    margin: 0 0 8px;
}

.pty-hero__title,
.page-content h1.pty-hero__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.pty-hero__body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-on-dark-dim);
    margin: 0;
}

.pty-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 18px 22px;
    margin: 0 auto 12px !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
}

.pty-section--accent {
    background: linear-gradient(135deg, #f5fafc 0%, #ebf5f8 100%);
    border-color: #cfe1eb;
}

.pty-section-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pty-section-h i { font-size: 14px; }

.pty-meta { margin: 0; padding: 0; }

.pty-meta__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-primary);
}

.pty-meta__row:last-child { border-bottom: none; }

.pty-meta__row dt {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-secondary);
    margin: 0;
    flex: 0 0 auto;
}

.pty-meta__row dd {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 0;
    text-align: right;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

.pty-meta__row--ref dd {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    color: var(--cerulean-100);
    background: #f5fafc;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #cfe1eb;
    letter-spacing: 0.04em;
}

.pty-meta__hint {
    font-size: 12px;
    color: var(--fg-tertiary);
    font-weight: 500;
}

.pty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto 14px !important;
}

.pty-cta,
a.pty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.40) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.pty-cta:hover,
.pty-cta:focus,
a.pty-cta:hover,
a.pty-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
    text-decoration: none !important;
}

.pty-cta--secondary,
a.pty-cta--secondary {
    background: var(--bg-primary) !important;
    color: var(--cerulean-100) !important;
    border: 1px solid #cfe1eb !important;
    box-shadow: none !important;
}

.pty-cta--secondary:hover,
.pty-cta--secondary:focus,
a.pty-cta--secondary:hover,
a.pty-cta--secondary:focus {
    background: #f5fafc !important;
    color: var(--cerulean-100) !important;
    border-color: var(--cerulean-100) !important;
}

.pty-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #fef9e6;
    border: 1px solid #f4c542;
    border-radius: 12px !important;
    color: #6b4f00;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 auto 24px !important;
}

.pty-note__ic {
    font-size: 16px;
    color: #b07b00;
    margin-top: 2px;
    flex: 0 0 auto;
}

.pty-note strong { color: #5a4400; font-weight: 700; }

@media (max-width: 720px) {
    .pty-hero { padding: 24px 18px; }
    .pty-hero__title { font-size: 20px !important; }
    .pty-meta__row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .pty-meta__row dd { text-align: left; }
    .pty-actions { flex-direction: column; }
    .pty-cta { width: 100%; }
}

/* =====================================================================
   CURRENT DEBT PROTECTION — enrolled view + cancel modal
   ===================================================================== */
.cdp-action {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: #f5fafc;
    border: 1px solid #cfe1eb;
    border-radius: 12px !important;
    margin: 0 0 14px;
    box-sizing: border-box;
}

.cdp-action__copy {
    flex: 1;
    min-width: 0;
}

.cdp-action__copy p {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cdp-action__copy strong { color: var(--cerulean-100); font-weight: 700; }

.cdp-action__copy i.fa-shield {
    color: var(--cerulean-100);
    font-size: 18px;
    flex: 0 0 auto;
}

.cdp-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    background: var(--bg-primary) !important;
    color: #c4271f !important;
    border: 1px solid #f8c0bb !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cdp-cancel-btn:hover,
.cdp-cancel-btn:focus {
    background: #c4271f !important;
    color: #ffffff !important;
    border-color: #c4271f !important;
    outline: none;
}

@media (max-width: 720px) {
    .cdp-action { flex-direction: column; align-items: stretch; }
    .cdp-cancel-btn { width: 100%; }
}

/* Cancel-confirmation modal — overrides Bootstrap defaults to match design system */
.cdp-modal .modal-dialog,
.cdp-modal__dialog {
    max-width: 480px;
    margin: 60px auto;
}

.cdp-modal .modal-content,
.cdp-modal__content {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 48px -12px rgba(10, 13, 18, 0.30) !important;
    overflow: hidden;
}

.cdp-modal .modal-header,
.cdp-modal__header {
    position: relative;
    padding: 24px 24px 12px !important;
    border-bottom: none !important;
    text-align: center;
}

.cdp-modal__close,
.cdp-modal .close {
    position: absolute !important;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    color: var(--fg-tertiary) !important;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 1 !important;
    text-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cdp-modal__close:hover,
.cdp-modal .close:hover {
    background: #f5fafc !important;
    color: var(--fg-primary) !important;
}

.cdp-modal__ic {
    width: 56px;
    height: 56px;
    border-radius: 9999px !important;
    background: var(--error-10);
    color: #c4271f;
    border: 2px solid #f8c0bb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 10px;
}

.cdp-modal__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: var(--fg-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cdp-modal .modal-body,
.cdp-modal__body {
    padding: 8px 24px 16px !important;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--fg-secondary);
    line-height: 1.6;
}

.cdp-modal__body p { margin: 0 0 10px; }
.cdp-modal__body p:last-child { margin-bottom: 0; }
.cdp-modal__body strong { color: var(--fg-primary); font-weight: 700; }

.cdp-modal .modal-footer,
.cdp-modal__footer {
    padding: 16px 24px 20px !important;
    border-top: 1px solid var(--border-primary) !important;
    background: #fafafa !important;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: right !important;
}

.cdp-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 10px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
    white-space: nowrap;
    border: none !important;
}

.cdp-modal-btn--secondary {
    background: var(--bg-primary) !important;
    color: var(--fg-secondary) !important;
    border: 1px solid var(--border-secondary) !important;
}

.cdp-modal-btn--secondary:hover,
.cdp-modal-btn--secondary:focus {
    background: #f5fafc !important;
    color: var(--cerulean-100) !important;
    border-color: var(--cerulean-100) !important;
    outline: none;
}

.cdp-modal-btn--danger {
    background: #c4271f !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(196, 39, 31, 0.40) !important;
}

.cdp-modal-btn--danger:hover,
.cdp-modal-btn--danger:focus {
    background: #a31f18 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 480px) {
    .cdp-modal .modal-footer,
    .cdp-modal__footer { flex-direction: column-reverse; }
    .cdp-modal-btn { width: 100%; }
}

/* =====================================================================
   DEBT PROTECTION CANCEL — Cancellation confirmation
   ===================================================================== */
.dpcx-hero,
.dpcx-section,
.dpcx-actions {
    width: 100% !important;
    max-width: 720px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.dpcx-hero {
    background: linear-gradient(135deg, var(--cerulean-100) 0%, var(--aegean-100) 100%);
    color: var(--fg-on-dark);
    border-radius: 16px !important;
    padding: 28px 24px;
    margin: 0 auto 14px !important;
    text-align: center;
    box-shadow: 0 8px 24px -8px rgba(0, 127, 156, 0.40);
    position: relative;
    overflow: hidden;
}

.dpcx-hero__ic {
    width: 64px;
    height: 64px;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 3px solid rgba(255, 255, 255, 0.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 14px;
}

.dpcx-hero__lbl {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
    margin: 0 0 8px;
}

.dpcx-hero__title,
.page-content h1.dpcx-hero__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.dpcx-hero__body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-on-dark-dim);
    margin: 0;
}

.dpcx-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 18px 22px;
    margin: 0 auto 14px !important;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
}

.dpcx-section-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 10px;
}

.dpcx-section__body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-secondary);
    margin: 0;
}

.dpcx-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto 24px !important;
}

.dpcx-cta,
a.dpcx-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 4px 12px -2px rgba(0, 127, 156, 0.40) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.dpcx-cta:hover,
.dpcx-cta:focus,
a.dpcx-cta:hover,
a.dpcx-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
    text-decoration: none !important;
}

.dpcx-cta--secondary,
a.dpcx-cta--secondary {
    background: var(--bg-primary) !important;
    color: var(--cerulean-100) !important;
    border: 1px solid #cfe1eb !important;
    box-shadow: none !important;
}

.dpcx-cta--secondary:hover,
.dpcx-cta--secondary:focus,
a.dpcx-cta--secondary:hover,
a.dpcx-cta--secondary:focus {
    background: #f5fafc !important;
    color: var(--cerulean-100) !important;
    border-color: var(--cerulean-100) !important;
}

@media (max-width: 720px) {
    .dpcx-hero { padding: 24px 18px; }
    .dpcx-hero__title { font-size: 22px !important; }
    .dpcx-actions { flex-direction: column; }
    .dpcx-cta { width: 100%; }
}

/* =====================================================================
   DEBT PROTECTION — Hero panel + benefit grid (Option A)
   ===================================================================== */
/* Centering rule — parent .page-content.addflex is display:flex/column,
   so margin:auto won't center on the cross-axis. Use align-self:center. */
.mf-dash-header.dp-centered,
.dp-hero,
.dp-benefits,
.dp-note {
    width: 100% !important;
    max-width: 920px !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* CTA button — centered but content-sized on desktop, full-width on mobile */
.dp-cta {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 24px !important;
}

.dp-hero {
    background: var(--aegean-100);
    color: var(--fg-on-dark);
    border-radius: 16px !important;
    padding: 28px 32px;
    margin: 0 auto 18px !important;
    max-width: 920px;
    position: relative;
    overflow: hidden;
}

.dp-hero__lbl {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-on-dark-dim);
    margin: 0 0 8px;
}

.dp-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: var(--tracking-tight);
    color: var(--fg-on-dark);
    margin: 0 0 14px;
    max-width: 640px;
}

.dp-hero__body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-on-dark-dim);
    margin: 0 0 12px;
    max-width: 720px;
}

.dp-hero__body:last-child { margin-bottom: 0; }

.dp-hero__body strong { color: var(--fg-on-dark); font-weight: 700; }

/* Benefit grid */
.dp-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 920px;
    margin: 0 0 18px;
}

.dp-benefit {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    padding: 18px 14px;
    text-align: center;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.dp-benefit:hover {
    border-color: var(--cerulean-100);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -4px rgba(10, 13, 18, 0.10);
}

.dp-benefit__ic {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--cerulean-10);
    border: 1px solid var(--cerulean-20);
    color: var(--cerulean-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.dp-benefit__title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-primary);
    margin: 0;
    line-height: 1.3;
}

/* Compliance note */
.dp-note {
    padding: 14px 16px;
    background: var(--error-10);
    border: 1px solid var(--error-100);
    border-radius: 12px !important;
    color: #842424;
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 920px;
}

.dp-note strong { color: #842424; font-weight: 700; }

/* Primary CTA */
.dp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 32px;
    background: var(--cerulean-100) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45) !important;
    transition: background 150ms ease, transform 150ms ease;
}

.dp-cta:hover,
.dp-cta:focus {
    background: var(--bg-brand-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    text-decoration: none;
    outline: none;
}

.dp-cta:active {
    background: var(--btn-primary-bg-active) !important;
    transform: translateY(0);
}

@media (max-width: 720px) {
    .dp-hero { padding: 22px 20px; }
    .dp-hero__title { font-size: 22px; }
    .dp-benefits { grid-template-columns: repeat(2, 1fr); }
    .dp-cta { width: 100%; }
}

/* =====================================================================
   PAYMENT HISTORY — Modern data table inside a rounded card
   ===================================================================== */
.ph-table-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    overflow: hidden;
    margin: 0 0 24px;
    box-shadow: 0 1px 3px rgba(10, 13, 18, 0.06);
}

.ph-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ph-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-primary);
    margin: 0;
    background: var(--bg-primary);
}

.ph-table thead {
    background: var(--cerulean-5);
}

.ph-table th {
    padding: 12px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-secondary);
    border-bottom: 1px solid var(--cerulean-20);
    white-space: nowrap;
    vertical-align: middle;
}

.ph-table th.num,
.ph-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ph-table tbody tr {
    transition: background 120ms ease;
}

.ph-table tbody tr:hover { background: var(--cerulean-5); }

.ph-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-primary);
    color: var(--fg-primary);
    vertical-align: middle;
}

.ph-table tbody tr:last-child td { border-bottom: none; }

.ph-table .ph-empty {
    padding: 28px 14px !important;
    text-align: center !important;
    color: var(--fg-secondary);
    font-style: italic;
}

/* Transaction type pill */
.ph-table .ph-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--cerulean-10);
    color: var(--cerulean-100);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
}

.ph-table .ph-pill--nsf {
    background: var(--error-10);
    color: var(--error-100);
}

/* NSF rows highlight the amount in error red */
.ph-table tbody tr.is-nsf td.num:nth-child(4),
.ph-table tbody tr.is-nsf td.num:nth-child(5),
.ph-table tbody tr.is-nsf td.num:nth-child(6) {
    color: var(--error-100);
    font-weight: 600;
}

/* =====================================================================
   PAYMENT HISTORY — Mobile (≤720px): each row collapses into a card
   showing date + type + amount on top and a key breakdown below.
   Pure CSS, no markup change required.
   ===================================================================== */
@media (max-width: 720px) {
    /* Hide the table header on mobile; the row cards are self-labeled. */
    .ph-table thead { display: none; }

    /* Strip table chrome so rows can become block cards */
    .ph-table,
    .ph-table tbody { display: block; width: 100%; }

    .ph-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        border: 1px solid var(--border-primary);
        border-radius: 10px;
        padding: 12px 14px;
        margin: 0 0 8px;
        background: var(--bg-primary);
    }

    .ph-table tr:hover { background: var(--bg-primary); }

    /* NSF rows turn red */
    .ph-table tr.is-nsf {
        border-color: var(--error-100);
        background: var(--error-10);
    }

    /* Reset td defaults for the grid layout */
    .ph-table td {
        display: none;
        padding: 0;
        border: none;
        text-align: left !important;
    }

    /* Date — top-left of the card, bold */
    .ph-table td:nth-child(1) {
        display: block;
        grid-column: 1;
        grid-row: 1;
        font-weight: 700;
        font-size: 14px;
        color: var(--fg-primary);
    }

    /* Amount — top-right of the card, large */
    .ph-table td:nth-child(4) {
        display: block;
        grid-column: 2;
        grid-row: 1;
        font-size: 18px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        text-align: right !important;
        color: var(--fg-primary);
        white-space: nowrap;
    }

    .ph-table tr.is-nsf td:nth-child(4) {
        color: var(--error-100);
    }

    /* Type pill — second row, spanning full width */
    .ph-table td:nth-child(3) {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Breakdown rows (Principal, Interest, Balance) — stacked below.
       The pseudo-element provides the inline label. */
    .ph-table td:nth-child(5),
    .ph-table td:nth-child(6),
    .ph-table td:nth-child(12) {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        grid-column: 1 / -1;
        font-size: 12px;
        color: var(--fg-secondary);
        padding-top: 6px;
        border-top: 1px solid var(--border-primary);
        font-variant-numeric: tabular-nums;
    }

    .ph-table tr.is-nsf td:nth-child(5),
    .ph-table tr.is-nsf td:nth-child(6),
    .ph-table tr.is-nsf td:nth-child(12) {
        border-top-color: rgba(240, 68, 55, 0.20);
    }

    .ph-table td:nth-child(5)::before { content: "Principal"; font-weight: 600; color: var(--fg-tertiary); }
    .ph-table td:nth-child(6)::before { content: "Interest"; font-weight: 600; color: var(--fg-tertiary); }
    .ph-table td:nth-child(12)::before { content: "Balance"; font-weight: 600; color: var(--fg-tertiary); }

    /* Amount font value should be more prominent than the row label inside breakdown */
    .ph-table td:nth-child(5),
    .ph-table td:nth-child(6),
    .ph-table td:nth-child(12) {
        color: var(--fg-primary);
        font-weight: 600;
    }

    /* Empty state — colspan TD spans naturally */
    .ph-table .ph-empty {
        display: block !important;
        grid-column: 1 / -1;
        text-align: center !important;
    }
}

/* =====================================================================
   VIEW STATEMENT — PDF iframe wrapper
   Was using position:absolute which let the iframe overlap the sidebar.
   ===================================================================== */
.vs-pdf-wrap {
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 500px;
    margin: 8px 0 24px;
    border: 1px solid var(--border-primary);
    border-radius: 12px !important;
    overflow: hidden;
    background: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(10, 13, 18, 0.08);
    /* Some browsers (notably Safari) don't clip iframe content to a
       parent's border-radius unless the parent forces a stacking context. */
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.vs-pdf-frame {
    width: 100%;
    height: 100%;
    border: 0 !important;
    display: block;
    background: #2d2d2d;
    border-radius: 12px !important;
}

/* =====================================================================
   ACCOUNT INFO PAGE — section-grouped cards
   ===================================================================== */
.ai-pending {
    padding: 14px 16px;
    background: var(--error-10);
    border: 1px solid var(--error-100);
    border-radius: 12px;
    color: #842424;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    margin: 0 0 16px;
}

.ai-meta {
    display: flex;
    gap: 32px;
    padding: 14px 18px;
    background: var(--cerulean-5);
    border: 1px solid var(--cerulean-20);
    border-radius: 12px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}

.ai-meta-fld { font-size: 13px; }

.ai-meta-fld small {
    display: block;
    color: var(--fg-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.ai-meta-fld strong {
    color: var(--fg-primary);
    font-weight: 700;
    font-size: 15px;
}

.ai-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 12px;
}

.ai-section-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 10px;
}

.ai-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-primary);
    font-size: 14px;
    line-height: 1.4;
    gap: 12px;
}

.ai-row:last-child { border-bottom: none; }

.ai-row-l {
    color: var(--fg-secondary);
    flex: 1 1 auto;
    font-weight: 500;
}

.ai-row-meta {
    color: var(--fg-secondary);
    font-size: 12px;
    flex: 0 0 auto;
    text-align: right;
    padding-right: 12px;
    min-width: 100px;
    white-space: nowrap;
}

.ai-row-r {
    color: var(--fg-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    min-width: 110px;
    text-align: right;
    white-space: nowrap;
}

/* Past-due row gets a soft warning highlight */
.ai-row.ai-row--alert .ai-row-r {
    color: var(--error-100);
}

/* Current Payment Due gets bolder treatment */
.ai-row.ai-row--emphasis .ai-row-l,
.ai-row.ai-row--emphasis .ai-row-r {
    color: var(--fg-primary);
    font-weight: 700;
}

.ai-row.ai-row--emphasis .ai-row-r {
    font-size: 16px;
}

/* Brand-tinted payoff section */
.ai-section.ai-section--payoff {
    border-color: var(--cerulean-100);
    background: var(--cerulean-5);
}

.ai-section.ai-section--payoff .ai-section-h {
    color: var(--cerulean-100);
}

.ai-section.ai-section--payoff .ai-row {
    border-bottom-color: var(--cerulean-20);
}

/* Compliance / payoff note */
.ai-note {
    font-size: 12px;
    color: #842424;
    line-height: 1.55;
    padding: 14px 16px;
    background: var(--error-10);
    border: 1px solid var(--error-100);
    border-radius: 12px !important;
    margin: 14px 0 0;
}

.ai-note strong { color: #842424; }

.ai-info {
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg-primary);
    margin: 6px 0 0;
}

.ai-info a {
    color: var(--fg-brand);
    font-weight: 700;
    text-decoration: underline;
}

.ai-info a:hover { color: var(--fg-brand-dark); }

.ai-footnote {
    font-size: 12px;
    color: var(--fg-secondary);
    margin: 12px 0 0;
    line-height: 1.5;
    font-style: italic;
}

/* Admin-only inset card inside a section */
.ai-admin-card {
    background: var(--bg-primary);
    border: 1px dashed var(--border-secondary);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--fg-primary);
}

.ai-admin-card strong { color: var(--fg-brand); }

@media (max-width: 720px) {
    .ai-meta { gap: 18px; padding: 12px 14px; }
    .ai-row { flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; }
    .ai-row-meta { text-align: left; padding-right: 0; flex: 0 0 100%; min-width: auto; font-size: 11px; order: 3; }
    .ai-row-l { flex: 1 1 60%; }
    .ai-row-r { flex: 0 0 auto; min-width: auto; }
}

/* =====================================================================
   DASHBOARD PAGE HEADER — eyebrow + title + subtitle
   Replaces the old plain <h1>Dashboard</h1>.
   ===================================================================== */
.mf-dash-header {
    margin: 0 0 24px;
    padding: 0;
    text-align: left !important;
    align-self: flex-start;
    width: 100%;
}

.mf-dash-header * {
    text-align: left !important;
}

.mf-dash-eyebrow {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-brand);
    margin: 0 0 8px;
}

.mf-dash-title,
.page-content h1.mf-dash-title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: var(--tracking-tight) !important;
    color: var(--fg-primary) !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

.mf-dash-sub {
    font-size: 15px;
    line-height: 1.5;
    color: var(--fg-secondary);
    margin: 6px 0 0;
    max-width: 540px;
}

@media (max-width: 720px) {
    .mf-dash-title { font-size: 26px; }
    .mf-dash-sub { font-size: 14px; }
}

/* =====================================================================
   DASHBOARD PANELS — Rounded card surface
   ===================================================================== */
.panel.cpanelwhite,
.panel.cpanelalert {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: 0 1px 3px rgba(10, 13, 18, 0.08), 0 1px 2px -1px rgba(10, 13, 18, 0.10) !important;
    background: var(--bg-primary) !important;
    overflow: visible;
    margin-bottom: 20px;
}

/* Round the corners of the first/last children so the card surface
   flows correctly even though metronic gives them flat backgrounds. */
.panel.cpanelwhite > .panel-heading:first-child,
.panel.cpanelalert > .panel-heading:first-child {
    border-top-left-radius: var(--radius-xl) !important;
    border-top-right-radius: var(--radius-xl) !important;
}

.panel.cpanelwhite > .panel-body:last-child,
.panel.cpanelalert > .panel-body:last-child {
    border-bottom-left-radius: var(--radius-xl) !important;
    border-bottom-right-radius: var(--radius-xl) !important;
}

/* Inner promo cards inside the My Account panel (debt settlement,
   tax refund) — give them their own softer rounded radius so they
   nest nicely inside the parent card. */
.panel.cpanelwhite > .panel-heading[style*="margin:10px"],
.panel.cpanelwhite > .panel-heading[style*="margin: 10px"] {
    border-radius: 12px !important;
    overflow: hidden;
}

/* Alert boxes inside the Alerts panel — rounded corners to match the
   rest of the dashboard, with a clean hairline border and proper padding. */
.panel.cpanelalert .alert {
    position: relative;
    border-radius: 12px !important;
    padding: 14px 44px 14px 16px !important;  /* extra right padding for close X */
    margin-bottom: 12px !important;
    border-width: 1px !important;
    border-style: solid !important;
    text-shadow: none !important;
    box-shadow: none !important;
    line-height: 1.5;
}

.panel.cpanelalert .alert:last-child {
    margin-bottom: 0 !important;
}

/* Close button — anchor to top-right inside the alert */
.panel.cpanelalert .alert .close {
    position: absolute !important;
    top: 10px;
    right: 12px;
    margin: 0 !important;
    opacity: 0.5;
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    text-shadow: none;
    padding: 4px 6px;
    color: inherit;
    float: none !important;
}

.panel.cpanelalert .alert .close:hover { opacity: 1; }

/* The inner row (icon + Financial Assistance Request text) inside the
   past-due alert — flex layout so icon and text vertically align. */
.panel.cpanelalert .alert > .row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

.panel.cpanelalert .alert > .row > .col-lg-2.dashleft,
.panel.cpanelalert .alert > .row > [class*="col-"].dashleft:first-child {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.panel.cpanelalert .alert > .row > .col-lg-10.dashleft,
.panel.cpanelalert .alert > .row > [class*="col-"].dashleft:last-child {
    width: auto !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Tighten dashpara so it sits flush next to the icon tile */
.panel.cpanelalert .alert > .row .dashpara {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.45;
}

/* Panel header — flex layout so icon + title sit on the same baseline.
   Hairline divider below it; the panel-body adds 20px top padding so
   the header reads as clearly separate from the list of actions. */
.panel-heading.cpanelheadwhite,
.panel-heading.cpanelheadwhiteb,
.panel-heading.cpanelheadalert {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

/* Body padding — Option B (medium 20px) breathing room above the first row */
.panel.cpanelwhite > .panel-body.dashpbody,
.panel.cpanelalert > .panel-body.dashpbody {
    padding-top: 20px !important;
}

/* The h2 / span title inside the panel header — neutralize the inline
   display:inline so it sits as a flex item next to the icon tile. */
.panel-heading.cpanelheadwhite > h2,
.panel-heading.cpanelheadwhiteb > h2,
.panel-heading.cpanelheadwhite > span:not(.fa-stack),
.panel-heading.cpanelheadwhiteb > span:not(.fa-stack) {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Panel header icon (.dashstack) — same tile treatment, sized to match */
.dashstack.fa-stack,
span.fa-stack.dashstack {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    background: var(--cerulean-10) !important;
    border: 1px solid var(--cerulean-20) !important;
    color: var(--cerulean-100) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    vertical-align: middle !important;
    flex: 0 0 auto;
}

.dashstack.fa-stack > .fa-circle.fa-stack-2x { display: none !important; }
.dashstack.fa-stack > .fa-stack-1x {
    color: var(--cerulean-100) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
}

/* Past-due alert calculator icon — keep the same tile but tinted error red
   (the markup uses inline style="color:darkred;" on the fa-circle) */
.panel.cpanelalert .alert-danger .dashicon.fa-stack {
    background: var(--error-10) !important;
    border-color: var(--error-100) !important;
}

.panel.cpanelalert .alert-danger .dashicon.fa-stack > .fa-stack-1x,
.panel.cpanelalert .alert-danger .dashicon.fa-stack > .dashwhite {
    color: var(--error-100) !important;
}

/* =====================================================================
   PAY NOW — Hero CTA with the amount inline + cerulean glow pulse
   Markup: <button class="paynowbutton">Pay <span class="pn-amount">$N</span> Now <i class="fa fa-arrow-right"></i></button>
   ===================================================================== */
button.paynowbutton,
.paynowbutton.btn,
.paynowbutton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 360px !important;
    height: 64px !important;
    padding: 0 24px !important;
    margin: 12px 0 16px !important;
    background: var(--cerulean-100) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45),
                0 2px 4px -2px rgba(10, 13, 18, 0.10),
                inset 0 -2px 0 rgba(10, 13, 18, 0.08),
                inset 0 0 0 1px rgba(10, 13, 18, 0.18) !important;
    transition: background 150ms ease, transform 150ms ease;
    animation: paynow-pulse 2.4s ease-in-out infinite;
}

button.paynowbutton:hover,
.paynowbutton.btn:hover,
.paynowbutton:hover {
    background: var(--btn-primary-bg-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    animation: none;
    text-decoration: none !important;
}

button.paynowbutton:focus,
.paynowbutton:focus {
    outline: none;
    animation: none;
    box-shadow: 0 0 0 3px rgba(0, 127, 156, 0.40),
                0 6px 16px -4px rgba(0, 127, 156, 0.45),
                inset 0 -2px 0 rgba(10, 13, 18, 0.08),
                inset 0 0 0 1px rgba(10, 13, 18, 0.18) !important;
}

button.paynowbutton:active,
.paynowbutton:active {
    background: var(--btn-primary-bg-active) !important;
    transform: translateY(0);
}

button.paynowbutton .pn-amount {
    font-weight: 800;
    letter-spacing: -0.01em;
}

button.paynowbutton .fa-arrow-right {
    font-size: 16px;
    opacity: 0.9;
}

@keyframes paynow-pulse {
    0%, 100% {
        box-shadow: 0 6px 16px -4px rgba(0, 127, 156, 0.45),
                    0 2px 4px -2px rgba(10, 13, 18, 0.10),
                    inset 0 -2px 0 rgba(10, 13, 18, 0.08),
                    inset 0 0 0 1px rgba(10, 13, 18, 0.18);
    }
    50% {
        box-shadow: 0 6px 24px -2px rgba(0, 127, 156, 0.75),
                    0 2px 4px -2px rgba(10, 13, 18, 0.10),
                    inset 0 -2px 0 rgba(10, 13, 18, 0.08),
                    inset 0 0 0 1px rgba(10, 13, 18, 0.18);
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    button.paynowbutton,
    .paynowbutton {
        animation: none !important;
    }
}