/*
 * NYSC "Corper Fresh" theme
 * Loaded LAST on every master page. Re-points the design tokens to a flatter,
 * brighter palette (flag green, uniform khaki, warm paper) and calms down the
 * glow/gradient-heavy components underneath it.
 *
 * Token blocks use :root[data-theme=...] so they out-rank the legacy
 * prefers-color-scheme fallback in nysc-tokens.css (:root:not([data-theme])).
 */

/* ── Tokens: light ─────────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
    --fr-green:        #008751;   /* Nigerian flag green */
    --fr-green-deep:   #006B40;
    --fr-green-ink:    #0B2A1B;
    --fr-green-tint:   #E6F4EC;
    --fr-khaki:        #D8C8A0;   /* corps uniform khaki */
    --fr-khaki-tint:   #F4EEDD;
    --fr-khaki-ink:    #6E5A2C;
    --fr-sun:          #FFC23D;   /* single bright accent, used sparingly */
    --fr-paper:        #FAF8F3;
    --fr-flag:         linear-gradient(90deg, #008751 0 33.33%, #ffffff 33.33% 66.66%, #008751 66.66% 100%);

    --clr-primary:          #008751;
    --clr-primary-dark:     #006B40;
    --clr-primary-light:    #1FA36B;
    --clr-primary-xlight:   #E6F4EC;
    --clr-primary-glow:     rgba(0,135,81,0.18);
    --clr-accent:           #B8860B;
    --clr-accent-dark:      #8A6508;
    --clr-success:          #008751;
    --clr-danger:           #C8372D;
    --clr-warning:          #C76A00;

    /* Gradients flattened to solids */
    --grad-primary:         #008751;
    --grad-primary-hover:   #006B40;
    --grad-primary-vivid:   #008751;
    --grad-btn-animated:    #008751;
    --grad-nav:             #ffffff;
    --grad-sidebar:         #ffffff;
    --grad-table-head:      #F4EEDD;
    --grad-page-hero:       #0B2A1B;
    --grad-surface:         #ffffff;
    --grad-text-hero:       linear-gradient(#008751, #008751);

    --clr-bg:               #FAF8F3;
    --clr-bg-alt:           #ffffff;
    --clr-bg-muted:         #F3F0E8;
    --clr-surface:          #ffffff;
    --clr-surface-alt:      #F7F5EF;
    --clr-surface-raised:   #ffffff;

    --clr-text:             #13221A;
    --clr-text-muted:       #4F5E55;
    --clr-text-faint:       #6F7D74;   /* AA on white */
    --clr-text-link:        #006B40;

    --clr-border:           #E7E2D6;
    --clr-border-strong:    #CFC8B6;
    --clr-border-focus:     #008751;

    --clr-nav-bg:           #ffffff;
    --clr-nav-text:         #13221A;
    --clr-nav-hover:        #F3F0E8;
    --clr-nav-active-bar:   #008751;

    --clr-sidebar-bg:       #ffffff;
    --clr-sidebar-text:     #13221A;
    --clr-sidebar-hover-bg: #F3F0E8;
    --clr-sidebar-active:   #008751;
    --clr-sidebar-icon:     #008751;
    --clr-sidebar-divider:  #E7E2D6;

    --clr-footer-bg:        #0B2A1B;
    --clr-footer-text:      #B9C9BF;
    --clr-footer-link:      #FFC23D;

    --clr-input-bg:         #ffffff;
    --clr-input-border:     #D9D3C4;
    --clr-input-focus:      #008751;
    --clr-input-placeholder:#8A958E;
    --clr-input-bg-focus:   #ffffff;

    --clr-table-head:       #F4EEDD;
    --clr-table-head-text:  #4A3D1E;
    --clr-table-stripe:     #FBFAF6;
    --clr-table-hover:      #F3F0E8;
    --clr-table-border:     #E7E2D6;

    --clr-card-bg:          #ffffff;
    --clr-card-border:      #E7E2D6;
    --clr-card-shadow:      0 1px 2px rgba(19,34,26,0.04);
    --clr-card-shadow-hover:0 6px 20px rgba(19,34,26,0.08);
    --shadow-card:          0 1px 2px rgba(19,34,26,0.04);
    --shadow-card-hover:    0 6px 20px rgba(19,34,26,0.08);
    --shadow-glow-lg:       none;
    --shadow-glow-xl:       none;
    --shadow-btn-primary:   none;
    --shadow-btn-hover:     0 4px 12px rgba(0,135,81,0.22);

    --clr-toggle-bg:        #F3F0E8;
    --clr-toggle-icon:      #13221A;

    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  18px;
    --radius-xl:  24px;

    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Tokens: dark ──────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    --fr-green:        #2FBF7F;
    --fr-green-deep:   #1FA36B;
    --fr-green-ink:    #E8F2EC;
    --fr-green-tint:   #12301F;
    --fr-khaki:        #8C7B52;
    --fr-khaki-tint:   #2A2618;
    --fr-khaki-ink:    #E3D3A8;
    --fr-paper:        #0E1512;

    --clr-primary:          #2FBF7F;
    --clr-primary-dark:     #1FA36B;
    --clr-primary-light:    #5BD69C;
    --clr-primary-xlight:   #12301F;
    --clr-primary-glow:     rgba(47,191,127,0.20);
    --clr-danger:           #F06A5E;

    --grad-primary:         #1C8A57;
    --grad-primary-hover:   #22A066;
    --grad-primary-vivid:   #1C8A57;
    --grad-btn-animated:    #1C8A57;
    --grad-nav:             #111A16;
    --grad-sidebar:         #111A16;
    --grad-table-head:      #1A221C;
    --grad-page-hero:       #08100C;
    --grad-surface:         #141D18;
    --grad-text-hero:       linear-gradient(#2FBF7F, #2FBF7F);

    --clr-bg:               #0E1512;
    --clr-bg-alt:           #141D18;
    --clr-bg-muted:         #111A16;
    --clr-surface:          #141D18;
    --clr-surface-alt:      #18221C;
    --clr-surface-raised:   #1A251F;

    --clr-text:             #E8F2EC;
    --clr-text-muted:       #A3B5AA;
    --clr-text-faint:       #7F9387;
    --clr-text-link:        #5BD69C;

    --clr-border:           #24312A;
    --clr-border-strong:    #33433A;

    --clr-nav-bg:           #111A16;
    --clr-nav-text:         #E8F2EC;
    --clr-nav-hover:        #1A251F;
    --clr-nav-active-bar:   #2FBF7F;

    --clr-sidebar-bg:       #111A16;
    --clr-sidebar-text:     #E8F2EC;
    --clr-sidebar-hover-bg: #1A251F;
    --clr-sidebar-active:   #1C8A57;
    --clr-sidebar-active-text: #ffffff;

    --clr-footer-bg:        #08100C;
    --clr-footer-text:      #8FA398;

    --clr-input-bg:         #111A16;
    --clr-input-border:     #2C3A32;
    --clr-input-text:       #E8F2EC;
    --clr-input-bg-focus:   #111A16;

    --clr-table-head:       #1A221C;
    --clr-table-head-text:  #E3D3A8;
    --clr-table-stripe:     #121B16;
    --clr-table-hover:      #1A251F;
    --clr-table-border:     #24312A;

    --clr-card-bg:          #141D18;
    --clr-card-border:      #24312A;
    --clr-card-shadow:      none;
    --shadow-card:          none;
    --shadow-card-hover:    0 6px 20px rgba(0,0,0,0.35);
    --shadow-glow-lg:       none;
    --shadow-glow-xl:       none;
    --shadow-btn-primary:   none;

    --clr-toggle-bg:        #1A251F;
    --clr-toggle-icon:      #FFC23D;
}

/* ── Base ──────────────────────────────────────────────────────────── */
html, body { overflow-x: clip; }
body {
    font-family: var(--font-family) !important;
    background: var(--clr-bg) !important;
    color: var(--clr-text);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.btn, input, select, textarea, button, label, .table {
    font-family: var(--font-family);
}
h1, h2, h3 { letter-spacing: -0.02em; }
a { color: var(--clr-text-link); }
::selection { background: var(--fr-sun); color: #13221A; }

:focus-visible {
    outline: 3px solid var(--fr-sun) !important;
    outline-offset: 2px;
}

/* Calm the decorative motion sitewide */
.nysc-card::before, .nysc-card::after,
.nysc-page-hero::before,
.footer::after, .nysc-auth-header::after,
.nysc-auth-card::after, fieldset::before { display: none !important; }
.sidebar-menu > li > a { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Top navigation ───────────────────────────────────────────────── */
.mainmenu-wrapper {
    background: var(--clr-nav-bg) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--clr-border) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mainmenu-wrapper::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -3px;
    height: 3px;
    background: var(--clr-primary);
}
.mainmenu { height: 68px; }
/* #mainmenu: default-page.css styles links by id with !important */
.mainmenu > ul > li > a,
#mainmenu > ul > li > a {
    font-family: var(--font-family) !important;
    color: var(--clr-nav-text) !important;
    font-size: 14px;
    font-weight: 600;
    padding: 0 14px !important;
    letter-spacing: 0;
}
.mainmenu > ul > li > a:hover,
#mainmenu > ul > li > a:hover {
    background: transparent !important;
    color: var(--clr-primary) !important;
}
@media (min-width: 769px) {
    .nav-mobile-toggle { display: none !important; }
}
@media (max-width: 768px) {
    .mainmenu.mobile-open > ul > li:not(.logo-wrapper):not(.nav-theme-toggle):not(.nav-mobile-toggle) > a {
        padding: 14px 20px !important;
        border-top: 1px solid var(--clr-border) !important;
    }
    .mainmenu.mobile-open { background: var(--clr-nav-bg); }
}
.mainmenu > ul > li > a::after {
    left: 14px; right: 14px;
    height: 3px;
    background: var(--clr-primary);
    box-shadow: none;
}
.mainmenu > ul > li.logo-wrapper {
    border-right: 1px solid var(--clr-border);
    padding-right: 12px;
}
.mainmenu > ul > li.logo-wrapper > a,
.mainmenu > ul > li.logo-wrapper > a:hover,
#mainmenu > ul > li.logo-wrapper > a,
#mainmenu > ul > li.logo-wrapper > a:hover {
    box-shadow: none !important;
    transform: none;
    padding: 6px 10px;
    border-radius: var(--radius-md);
}
:root[data-theme="dark"] .mainmenu > ul > li.logo-wrapper > a { background: #ffffff !important; }
.mainmenu > ul > li.logo-wrapper img { height: 44px; }

.theme-toggle {
    background: var(--clr-toggle-bg) !important;
    color: var(--clr-toggle-icon) !important;
    border: 1px solid var(--clr-border) !important;
    box-shadow: none !important;
}
.mobile-menu-btn {
    background: var(--clr-bg-muted) !important;
    color: var(--clr-text) !important;
    border: 1px solid var(--clr-border) !important;
    box-shadow: none !important;
}

/* Logged-in user strip */
.nysc-user-bar {
    background: var(--fr-khaki-tint) !important;
    color: var(--fr-khaki-ink) !important;
    border-bottom: 1px solid var(--clr-border) !important;
    box-shadow: none !important;
    margin-top: 4px;
}
.nysc-user-bar * { color: var(--fr-khaki-ink) !important; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-success, .btn-green, .btn-red {
    background: var(--clr-primary) !important;
    border: 1px solid var(--clr-primary) !important;
    color: #fff !important;
}
/* Dark mode: brand green is lightened for text/links, so solid fills
   use the deeper --grad-primary to keep white labels readable */
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-success,
:root[data-theme="dark"] .btn-green,   :root[data-theme="dark"] .btn-red {
    background: var(--grad-primary) !important;
    border-color: var(--grad-primary) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-green:hover, .btn-red:hover {
    background: var(--clr-primary-dark) !important;
    border-color: var(--clr-primary-dark) !important;
}
.btn-primary::before, .btn-success::before { display: none !important; }
.btn-default, .btn-secondary {
    background: var(--clr-surface) !important;
    border: 1px solid var(--clr-border-strong) !important;
    color: var(--clr-text) !important;
}
.btn-default:hover, .btn-secondary:hover {
    border-color: var(--clr-primary) !important;
    color: var(--clr-primary) !important;
}
.btn-orange, .btn-warning {
    background: var(--fr-sun) !important;
    border: 1px solid var(--fr-sun) !important;
    color: #2A1E00 !important;
}
.btn-danger {
    background: var(--clr-danger) !important;
    border-color: var(--clr-danger) !important;
    color: #fff !important;
}

/* ── Forms ────────────────────────────────────────────────────────── */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--clr-input-border) !important;
    background: var(--clr-input-bg) !important;
    color: var(--clr-input-text, var(--clr-text)) !important;
    box-shadow: none !important;
    min-height: 44px;
    font-size: 15px;
}
textarea { min-height: 88px; }
.form-control:hover { border-color: var(--clr-border-strong) !important; }
.form-control:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 4px var(--clr-primary-glow) !important;
    outline: none;
}
label, .control-label { color: var(--clr-text); font-weight: 600; }

fieldset {
    background: var(--clr-surface) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}
fieldset:hover { box-shadow: none !important; }
legend {
    font-weight: 800; letter-spacing: -0.01em;
    color: var(--clr-text) !important;
    border: 0 !important;
}

/* ── Cards / panels ───────────────────────────────────────────────── */
.nysc-card, .panel, .well, .card {
    background: var(--clr-card-bg) !important;
    border: 1px solid var(--clr-card-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
}
.nysc-card:hover { transform: none !important; box-shadow: var(--shadow-card) !important; }
.nysc-card-header, .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--clr-border) !important;
    color: var(--clr-text) !important;
}
.nysc-card-header h3, .nysc-card-header h4, .panel-heading h3, .panel-heading h4 {
    color: var(--clr-text) !important; font-weight: 800;
}
.nysc-card-header-primary {
    background: var(--clr-primary) !important;
}
.nysc-card-header-primary h4 { color: #fff !important; }

/* Page hero banners used on inner pages (FAQ, etc.) */
.nysc-page-hero {
    background: var(--fr-green-ink) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
    padding-bottom: 34px !important;
}
.nysc-page-hero::after {
    /* flag stripe along the bottom; overrides the legacy blob */
    content: '' !important; display: block !important;
    position: absolute !important;
    top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: 6px !important; border-radius: 0 !important;
    background: var(--fr-flag) !important;
    opacity: 1 !important;
}
:root[data-theme="dark"] .nysc-page-hero { background-color: #13231A !important; }
.nysc-page-hero h3 { color: #fff !important; font-weight: 800; letter-spacing: -0.02em; }
.nysc-page-hero p  { color: rgba(255,255,255,0.82) !important; }
.nysc-page-hero h3 .fa { color: var(--fr-sun); }

/* ── Tables ───────────────────────────────────────────────────────── */
.table-responsive {
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}
.table-responsive::before { display: none !important; }
.table thead th, .table > tbody > tr > th {
    background: var(--clr-table-head) !important;
    color: var(--clr-table-head-text) !important;
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--clr-border) !important;
}
.table-hover > tbody > tr:hover > td:first-child { box-shadow: none !important; }

/* ── Badges / alerts ──────────────────────────────────────────────── */
.alert { border-radius: var(--radius-md) !important; box-shadow: none !important; border-width: 1px !important; }
.label, .badge { border-radius: 999px !important; font-weight: 700; }

/* ── Corps member sidebar ─────────────────────────────────────────── */
.blog-sidebar {
    background: var(--clr-sidebar-bg) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}
.sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid var(--clr-border) !important;
}
.sidebar-header h4 {
    color: var(--clr-text-muted) !important;
    font-size: 12px !important; font-weight: 800 !important;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.sidebar-close-btn { background: var(--clr-bg-muted) !important; color: var(--clr-text) !important; }
.sidebar-menu > li > a, .sidebar-menu-linkbtn {
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.sidebar-menu > li.active > a,
.sidebar-menu > li.active > a:hover {
    background: var(--clr-primary-xlight) !important;
    color: var(--clr-primary) !important;
    box-shadow: inset 3px 0 0 var(--clr-primary) !important;
}
.sidebar-menu > li.active > a .fa { color: var(--clr-primary) !important; }

/* ── Login card (signin-redesign.css) ─────────────────────────────── */
.login-card-header {
    background: var(--fr-green-ink) !important;
    animation: none !important;
    padding-bottom: 28px !important;
}
:root[data-theme="dark"] .login-card-header { background: #0A1A11 !important; }
.login-card-header::before { display: none !important; }
.login-card-header::after {
    /* flag stripe along the bottom edge of the header */
    content: '' !important;
    top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: 5px !important; border-radius: 0 !important;
    background: var(--fr-flag) !important;
}
.login-card-header h2, .login-card-header h3 { font-weight: 800 !important; letter-spacing: -0.02em; }
.btn-login {
    background: var(--clr-primary) !important;
    animation: none !important;
    border-radius: 999px !important;
    font-size: 15px !important; font-weight: 700 !important;
    min-height: 48px;
}
.btn-login:hover { background: var(--clr-primary-dark) !important; }
:root[data-theme="dark"] .btn-login { background: var(--grad-primary) !important; }

/* ── Auth card (login / sign-in masters) ──────────────────────────── */
.nysc-auth-card {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--clr-border) !important;
    box-shadow: 0 20px 50px rgba(11,42,27,0.18) !important;
    overflow: hidden;
}
.nysc-auth-header {
    background: var(--fr-green-ink) !important;
    position: relative;
}
.nysc-auth-header h2 { font-weight: 800 !important; letter-spacing: -0.02em; }

/* ── Footer ───────────────────────────────────────────────────────── */
.footer {
    background: var(--clr-footer-bg) !important;
    padding: 28px 0 !important;
}
.footer::before {
    height: 4px !important;
    background: var(--fr-flag) !important;
    animation: none !important;
}
.footer, .footer *:not(.fa) { font-family: var(--font-family) !important; }
.footer-copyright { font-size: 13px !important; }
.footer a { color: var(--clr-footer-link) !important; font-weight: 600; }

/* ── Session modal ────────────────────────────────────────────────── */
.nysc-session-modal-dialog { border-radius: var(--radius-xl) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.25) !important; }
.nysc-session-btn-stay { background: var(--clr-primary) !important; box-shadow: none !important; }

/* ── Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--clr-border-strong); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════════════════════
   REGISTRATION & PAYMENT FORMS
   Each form page ships its own inline <style> block, which loads after
   this file. Rules here are prefixed with ":root body" so they out-rank
   those page rules on specificity without needing !important; the few
   !important ones answer !important page rules or inline style=""
   attributes (e.g. Font-Names="Verdana" Font-Size="X-Small").
   ══════════════════════════════════════════════════════════════════ */
:root, :root[data-theme="light"] {
    --fr-amber-tint: #FFF4DC;
    --fr-amber-ink:  #8A5300;
    --fr-red-tint:   #FDECEA;
    --fr-red-ink:    #A12A21;
}
:root[data-theme="dark"] {
    --fr-amber-tint: #2C2412;
    --fr-amber-ink:  #F2C46B;
    --fr-red-tint:   #2E1715;
    --fr-red-ink:    #F59A90;
}

/* Static validators render visibility:hidden and still reserve a line;
   collapse them until ASP.NET flips them visible */
:root body span[style*="visibility:hidden"] { display: none !important; }

/* ── Page heroes ─────────────────────────────────────────────────── */
:root body .creg-hero {
    background: var(--fr-green-ink);
    animation: none;
    border-radius: 0 0 28px 28px;
    padding: 32px 0 40px;
}
:root[data-theme="dark"] body .creg-hero { background: #0A1A11; }
:root body .creg-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: var(--fr-flag);
}
:root body .creg-hero-blob1, :root body .creg-hero-blob2 { display: none; }
:root body .creg-hero-inner h1 {
    font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.03em; text-shadow: none;
}
:root body .creg-hero-inner h1 .fa { color: var(--fr-sun); opacity: 1 !important; }
:root body .creg-hero-inner p { font-size: 15px; color: rgba(255,255,255,0.78); }
:root body .creg-hero-inner img { box-shadow: none !important; }

:root body .ppb-page-header h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -0.03em; }
:root body .ppb-page-header p { font-size: 15px; }

/* ── Progress stepper (replaces Images/StepN.png) ────────────────── */
.fr-steps {
    list-style: none; margin: 0 auto; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 720px;
}
.fr-steps li {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--clr-text-faint);
    text-align: center;
}
.fr-steps li::before {
    /* connector to the previous step */
    content: ''; position: absolute; top: 17px; right: 50%; width: 100%; height: 3px;
    background: var(--clr-border); z-index: 0;
}
.fr-steps li:first-child::before { display: none; }
.fr-steps li.is-done::before, .fr-steps li.is-current::before { background: var(--clr-primary); }
.fr-step-num {
    position: relative; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--clr-surface); border: 2px solid var(--clr-border-strong);
    color: var(--clr-text-muted); font-size: 14px; font-weight: 800;
}
.fr-steps li.is-done .fr-step-num { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
.fr-steps li.is-current { color: var(--clr-text); }
.fr-steps li.is-current .fr-step-num {
    background: var(--fr-sun); border-color: var(--fr-sun); color: #2A1E00;
    box-shadow: 0 0 0 5px rgba(255,194,61,0.25);
}
:root[data-theme="dark"] .fr-steps li.is-done .fr-step-num { background: var(--grad-primary); border-color: var(--grad-primary); }
@media (max-width: 520px) {
    .fr-step-label { font-size: 11px; }
    .fr-steps li:not(.is-current) .fr-step-label { display: none; }
}

/* ── Cards ───────────────────────────────────────────────────────── */
:root body .creg-card,
:root body .pp-section-card,
:root body .ppb-card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    box-shadow: none;
    transition: none;
}
:root body .creg-card:hover { box-shadow: none; }

/* Headers: one calm style; the old colour variants now only tint the icon */
:root body .creg-card-header,
:root body .pp-section-header,
:root body .ppb-card-header {
    background: var(--clr-card-bg);
    animation: none;
    border-bottom: 1px solid var(--clr-border);
    padding: 18px 22px;
    gap: 14px;
}
:root body .creg-card-header .hdr-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--fr-green-tint); border: 0;
    backdrop-filter: none;
}
:root body .creg-card-header .hdr-icon i { color: var(--clr-primary); font-size: 17px; }
:root body .creg-card-header.blue   .hdr-icon { background: var(--fr-khaki-tint); }
:root body .creg-card-header.blue   .hdr-icon i { color: var(--fr-khaki-ink); }
:root body .creg-card-header.orange .hdr-icon { background: var(--fr-amber-tint); }
:root body .creg-card-header.orange .hdr-icon i { color: var(--fr-amber-ink); }
:root body .creg-card-header.red    .hdr-icon { background: var(--fr-red-tint); }
:root body .creg-card-header.red    .hdr-icon i { color: var(--fr-red-ink); }
:root body .creg-card-header h3,
:root body .pp-section-header h4,
:root body .ppb-card-header h3 {
    color: var(--clr-text); font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
}
:root body .creg-card-header p { color: var(--clr-text-muted); font-size: 13px; }
:root body .pp-section-header i,
:root body .ppb-card-header i {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 16px;
}
:root body .creg-card-body { padding: 22px; }
:root body .pp-section-body, :root body .ppb-card-body { padding: 22px; }

/* ── Labels ──────────────────────────────────────────────────────── */
:root body .creg-field label,
:root body .ppb-field-group label,
:root body .ppb-nin-group label,
:root body .login-card-body .field-group label,
:root body .nin-group label,
:root body .captcha-group label,
:root body .control-label {
    font-size: 14px; font-weight: 700;
    color: var(--clr-text);
    text-transform: none; letter-spacing: 0;
    margin-bottom: 8px;
}
:root body .creg-field label i,
:root body .ppb-field-group label i,
:root body .login-card-body .field-group label i,
:root body .nin-group label i,
:root body .captcha-group label i { color: var(--clr-primary); font-size: 14px; width: 16px; text-align: center; }
:root body .creg-field label .text-danger { color: var(--clr-danger); }

/* ── Inputs ──────────────────────────────────────────────────────── */
/* !important answers the inline Verdana/x-small that server controls emit */
:root body .creg-field .form-control,
:root body .ppb-field-group .form-control,
:root body .ppb-nin-group .form-control,
:root body .login-card-body .form-control,
:root body .nin-group .form-control,
:root body .captcha-group .form-control,
:root body .fr-pay .form-control {
    font-family: var(--font-family) !important;
    font-size: 15px !important;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px !important;
    border: 1.5px solid var(--clr-input-border) !important;
    background-color: var(--clr-input-bg) !important;
    color: var(--clr-input-text, var(--clr-text)) !important;
}
:root body .creg-field textarea.form-control { min-height: 104px; }
:root body .creg-field .form-control:focus,
:root body .ppb-field-group .form-control:focus,
:root body .login-card-body .form-control:focus,
:root body .nin-group .form-control:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 4px var(--clr-primary-glow) !important;
}
:root body .form-control[disabled], :root body .form-control[readonly] {
    background-color: var(--clr-bg-muted) !important; color: var(--clr-text-muted) !important;
}
:root body select.form-control {
    -webkit-appearance: none; appearance: none;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23889A8F' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}
:root body .creg-field-row { gap: 14px; }
:root body .creg-field .text-danger,
:root body .login-card-body .text-danger { font-size: 13px; font-weight: 600; }

/* Highlighted groups (NIN, captcha) */
:root body .nin-group,
:root body .ppb-nin-group,
:root body .captcha-group {
    background: var(--fr-khaki-tint);
    border: 1px solid var(--clr-border);
    border-left: 4px solid var(--fr-khaki);
    border-radius: 14px;
}

/* ── Segmented radio choices ─────────────────────────────────────── */
:root body .creg-radio-inline { gap: 8px; }
:root body .creg-radio-inline label {
    border-radius: 999px !important;
    border: 1.5px solid var(--clr-border-strong) !important;
    background: var(--clr-surface);
    color: var(--clr-text) !important;
    padding: 11px 20px;
    font-size: 14px !important; font-weight: 700 !important;
}
:root body .creg-radio-inline label:last-of-type { border-left: 1.5px solid var(--clr-border-strong) !important; }
:root body .creg-radio-inline label:hover { border-color: var(--clr-primary) !important; background: var(--clr-surface); color: var(--clr-primary) !important; }
:root body .creg-radio-inline label:has(input:checked),
:root body .creg-radio-inline input[type="radio"]:checked + label {
    background: var(--clr-primary-xlight);
    border-color: var(--clr-primary) !important;
    color: var(--clr-primary) !important;
}

:root body .creg-checklist label {
    border-radius: 12px; border: 1.5px solid var(--clr-border);
    background: var(--clr-surface); font-weight: 600;
}
:root body .creg-checklist label:has(input:checked) {
    border-color: var(--clr-primary); background: var(--clr-primary-xlight); color: var(--clr-primary);
}
:root body input[type="checkbox"], :root body input[type="radio"] { accent-color: var(--clr-primary); }

/* ── Notices ─────────────────────────────────────────────────────── */
:root body .creg-notice,
:root body .creg-section-note,
:root body .ppb-alert-warning,
:root body .create-info {
    background: var(--fr-amber-tint);
    border: 1px solid transparent;
    border-left: 4px solid var(--fr-sun);
    border-radius: 14px;
    color: var(--fr-amber-ink);
    font-size: 14px; font-weight: 600; line-height: 1.5;
    text-align: left;
    padding: 14px 16px;
}
:root body .creg-notice i, :root body .creg-section-note i,
:root body .ppb-alert-warning i, :root body .create-info i { color: var(--fr-amber-ink); }
:root body .creg-section-note.red,
:root body .ppb-alert-danger,
:root body .create-warning {
    background: var(--fr-red-tint);
    border: 1px solid transparent;
    border-left: 4px solid var(--clr-danger);
    border-radius: 14px;
    color: var(--fr-red-ink);
    font-size: 14px; font-weight: 600; line-height: 1.5;
    padding: 14px 16px;
}
:root body .create-warning i, :root body .ppb-alert-danger i { color: var(--clr-danger); }
:root body .creg-passport-specs {
    background: var(--fr-khaki-tint); border: 1px solid var(--clr-border); border-radius: 14px;
}
:root body .creg-passport-specs h4, :root body .creg-passport-specs ul li { color: var(--fr-khaki-ink); }
:root body .creg-passport-specs ul li { font-size: 13px; }
:root body .creg-passport-specs ul li:before { color: var(--fr-khaki-ink); }
:root body .creg-health-confidential { background: var(--clr-surface-alt); border-radius: 12px; font-style: normal; }
:root body .creg-name-result { background: var(--clr-surface-alt); border-color: var(--clr-border); border-radius: 14px; }
:root body .creg-checkbox { background: var(--fr-green-tint); border-color: transparent; border-radius: 12px; color: var(--clr-text); }

/* ── Tables inside forms ─────────────────────────────────────────── */
:root body .creg-kit-table th, :root body .creg-grid-wrap .HeaderStyle,
:root body .creg-grid-wrap .table th {
    background: var(--clr-table-head) !important; color: var(--clr-table-head-text) !important;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
:root body .creg-grid-wrap, :root body .creg-kit-table { border-radius: 14px; overflow: hidden; }

/* ── Buttons ─────────────────────────────────────────────────────── */
:root body .btn-creg,
:root body .ppb-btn-primary {
    background: var(--clr-primary);
    animation: none;
    box-shadow: none;
    border: 1.5px solid var(--clr-primary);
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-family);
    font-size: 15px; font-weight: 700;
    min-height: 50px; padding: 13px 30px;
    transition: background-color .15s, transform .1s;
}
:root body .btn-creg:hover, :root body .ppb-btn-primary:hover,
:root body .btn-creg:focus, :root body .ppb-btn-primary:focus {
    background: var(--clr-primary-dark); border-color: var(--clr-primary-dark);
    color: #fff; transform: none; box-shadow: none;
}
:root body .btn-creg:active, :root body .ppb-btn-primary:active { transform: translateY(1px); }
:root body .btn-creg[disabled], :root body .btn-login[disabled] { opacity: 0.7; cursor: progress; }
:root[data-theme="dark"] body .btn-creg,
:root[data-theme="dark"] body .ppb-btn-primary { background: var(--grad-primary); border-color: var(--grad-primary); }

:root body .btn-creg-exit,
:root body .pp-btn-outline,
:root body .ppb-btn-outline {
    background: var(--clr-surface);
    backdrop-filter: none;
    border: 1.5px solid var(--clr-border-strong);
    border-radius: 999px;
    color: var(--clr-text);
    font-family: var(--font-family);
    font-size: 15px; font-weight: 700;
    min-height: 50px;
}
:root body .pp-btn-outline, :root body .ppb-btn-outline { min-height: 48px; font-size: 14px; }
:root body .btn-creg-exit:hover, :root body .pp-btn-outline:hover, :root body .ppb-btn-outline:hover {
    background: var(--clr-surface); border-color: var(--clr-text); color: var(--clr-text); transform: none;
}
:root body .creg-actions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    padding: 28px 0 12px;
}
:root body .creg-actions > * { margin: 0; }
@media (max-width: 600px) {
    :root body .creg-actions { flex-direction: column-reverse; }
    :root body .creg-actions > * { width: 100%; justify-content: center; }
}

:root body .pp-link, :root body .ppb-link { color: var(--clr-primary); font-weight: 700; font-size: 14px; }

/* ── Login-card pages (PrePayment, CompletePayment, sign-in) ─────── */
:root body .login-card {
    border-radius: 24px;
    border: 1px solid var(--clr-border);
    box-shadow: 0 20px 50px rgba(11,42,27,0.16);
}
:root body .login-card-body { padding: 26px 28px 22px; }
:root body .login-card-footer { border-top: 1px solid var(--clr-border); background: var(--clr-surface-alt); }
:root body .forgot-link { color: var(--clr-primary); font-weight: 700; }
.fr-alt-action {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
    margin-top: 14px; font-size: 14px; color: var(--clr-text-muted);
}
.fr-alt-action a { color: var(--clr-primary); font-weight: 700; }
@media (max-width: 480px) {
    :root body .login-card-body { padding: 20px 18px; }
}

/* ── Modal popups used by the forms ──────────────────────────────── */
:root body .modalPopup {
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    background: var(--clr-card-bg);
    box-shadow: 0 20px 50px rgba(0,0,0,0.22);
    max-width: calc(100vw - 32px);
}
:root body .modalBackground, :root body .ModalPopupBG { background: rgba(11,20,15,0.6); opacity: 1; }
:root body .nysc-modal-header { background: var(--fr-green-ink); }
:root body .nysc-modal-btn-print { background: var(--clr-primary); border-radius: 999px; animation: none; }

/* ── Payment option cards (MakePayment, CorpsPaymentOptions) ─────── */
.fr-pay { max-width: 760px; margin: 8px auto 40px; padding: 0 4px; }
.fr-pay-head { margin-bottom: 22px; }
.fr-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800; color: var(--fr-khaki-ink);
    text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px;
}
.fr-eyebrow::before { content: ''; width: 18px; height: 3px; border-radius: 3px; background: var(--clr-primary); }
.fr-pay-head h2 {
    font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.03em;
    color: var(--clr-text); margin: 0 0 6px;
}
.fr-pay-head p { font-size: 15px; color: var(--clr-text-muted); margin: 0; max-width: 560px; }
.fr-pay-msg:empty { display: none; }
.fr-pay-msg {
    background: var(--fr-red-tint); color: var(--fr-red-ink);
    border-left: 4px solid var(--clr-danger); border-radius: 14px;
    padding: 14px 16px; margin-bottom: 18px; font-weight: 600;
}
.fr-pay-options { display: grid; gap: 14px; }
.fr-pay-option {
    display: flex; align-items: center; gap: 18px;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    padding: 20px 22px;
}
.fr-pay-option--primary { border: 2px solid var(--clr-primary); }
.fr-pay-option-img {
    width: 56px; height: 56px; object-fit: contain; flex-shrink: 0;
    border-radius: 14px; background: var(--fr-khaki-tint); padding: 8px;
}
.fr-pay-option-body { flex: 1; min-width: 0; }
.fr-pay-option-body h3 { font-size: 18px; font-weight: 800; color: var(--clr-text); margin: 0 0 4px; letter-spacing: -0.01em; }
.fr-pay-option-body p { font-size: 14px; color: var(--clr-text-muted); margin: 0 0 14px; }
.fr-pay-option-body .btn { min-height: 46px; padding: 11px 22px; font-size: 14px; white-space: normal; }
.fr-pay-brand {
    display: block; max-width: 260px; width: 100%; height: auto;
    border: 1px solid var(--clr-border); border-radius: 14px;
    background: #fff; padding: 10px 14px;
    transition: border-color .15s;
}
.fr-pay-brand:hover { border-color: var(--clr-primary); }
@media (max-width: 520px) {
    .fr-pay-option { flex-direction: column; align-items: flex-start; }
    .fr-pay-option-body .btn { width: 100%; }
}

/* Radio pills: RadioButtonList renders <input> and <label> as siblings, so the
   input is hidden visually (still focusable) and the label carries the state */
:root body .creg-radio-inline input[type="radio"] {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
:root body .creg-radio-inline input[type="radio"]:focus-visible + label {
    outline: 3px solid var(--fr-sun); outline-offset: 2px;
}

/* Long multi-card forms read better on a plain page than over the photo carousel */
body:has(.creg-page) .carousel { display: none; }

/* Font Awesome here is 4.6.3; fa-id-card / fa-id-badge are 4.7 icons and render
   blank (96 uses). Point them at the closest 4.6.3 glyphs until FA is upgraded. */
.fa-id-card:before, .fa-id-card-o:before { content: "\f09d"; }  /* credit-card */
.fa-id-badge:before { content: "\f007"; }                        /* user */
.fa-user-circle:before { content: "\f007"; }                     /* user */
.fa-handshake-o:before { content: "\f0c0"; }                     /* users */

/* ── Corps sidebar: one size for every item type ─────────────────────
   Items come in three shapes (li>a, li>div>a, li>div.sidebar-menu-linkbtn>a)
   and the legacy sheets size each differently. */
:root body .sidebar-menu > li { margin: 2px 8px; }
:root body .sidebar-menu > li > a,
:root body .sidebar-menu > li > div > a,
:root body .sidebar-menu .sidebar-menu-linkbtn {
    font-size: 14px; font-weight: 600; line-height: 1.3;
    padding: 10px 12px; gap: 12px;
    border-left: 0; border-radius: 12px;
}
:root body .sidebar-menu > li > div { padding: 0; margin: 0; }
:root body .sidebar-menu .sidebar-menu-linkbtn a,
:root body .sidebar-menu .sidebar-menu-linkbtn input {
    font-size: inherit !important; font-weight: inherit; padding: 0 !important; margin: 0;
}
:root body .sidebar-menu > li > a:hover,
:root body .sidebar-menu > li > div > a:hover,
:root body .sidebar-menu .sidebar-menu-linkbtn:hover {
    background: var(--clr-sidebar-hover-bg); color: var(--clr-primary) !important; padding-left: 12px;
}
:root body .sidebar-menu > li.menu-active > a,
:root body .sidebar-menu > li.menu-active > a > div,
:root body .sidebar-menu > li.menu-active .sidebar-menu-linkbtn {
    background: var(--clr-primary-xlight) !important;
    color: var(--clr-primary) !important;
    box-shadow: inset 3px 0 0 var(--clr-primary);
}
:root body .sidebar-toggle-btn {
    background: var(--clr-surface) !important;
    color: var(--clr-text) !important;
    border: 1px solid var(--clr-border) !important;
    box-shadow: none !important;
}
:root body .sidebar-toggle-btn:hover { border-color: var(--clr-primary) !important; color: var(--clr-primary) !important; transform: none; }

:root body .form-control::placeholder { font-size: inherit; color: var(--clr-input-placeholder); opacity: 1; }
:root body .creg-hero-badge {
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: none; color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   CORPS MEMBER DASHBOARD (CorpHome.aspx)
   The profile card, notices and info grid are built server-side in
   CorpHome.aspx.cs (pcm-* classes); the page's own <style> block loads
   after this file, hence the ":root body" prefix.
   ══════════════════════════════════════════════════════════════════ */

/* The Basic Details fieldset becomes a plain page container */
:root body #dvedit1 fieldset.pnlwidth {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
}
:root body #dvedit1 fieldset.pnlwidth > legend {
    display: block; width: 100%;
    font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.03em;
    color: var(--clr-text) !important;
    background: transparent !important;
    padding: 0 !important; margin: 4px 0 18px;
    border: 0 !important; box-shadow: none !important;
    text-transform: none;
}

/* ── Profile card ── */
:root body .pcm-profile-card {
    position: relative; overflow: hidden;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: 22px;
    padding: 28px 24px 22px;
}
:root body .pcm-profile-card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: var(--fr-flag);
}
:root body .pcm-name-row {
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 14px; margin-bottom: 14px; gap: 10px;
}
:root body .pcm-fullname {
    font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; letter-spacing: -0.02em;
    color: var(--clr-text);
}
:root body .pcm-fullname .fa { color: var(--clr-primary); opacity: 1 !important; }
:root body .pcm-batch-badge {
    background: var(--fr-sun); color: #2A1E00;
    font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
    padding: 6px 14px;
}
:root body .pcm-passport-img,
:root body .pcm-passport-placeholder {
    width: 112px; height: 136px;
    border-radius: 16px;
    border: 3px solid var(--clr-surface);
    box-shadow: 0 0 0 1px var(--clr-border), 0 8px 20px rgba(11,42,27,0.10);
}
:root body .pcm-info-grid { gap: 14px 24px; }
:root body .pcm-info-item { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; }
:root body .pcm-info-label {
    font-size: 12px; font-weight: 700; letter-spacing: 0;
    text-transform: none; color: var(--clr-text-muted);
}
:root body .pcm-info-label i { font-size: 12px; }
:root body .pcm-info-value { font-size: 15px; font-weight: 700; color: var(--clr-text); }
:root body .pcm-callup {
    font-size: 17px; color: var(--clr-primary);
    letter-spacing: 0.02em;
}
:root body .pcm-gender-badge { background: var(--fr-khaki-tint); color: var(--fr-khaki-ink); font-weight: 700; }
:root body .pcm-nhia-link {
    background: var(--fr-khaki-tint); border-left: 4px solid var(--fr-khaki);
    border-radius: 12px; font-size: 13px; color: var(--fr-khaki-ink);
}
:root body .pcm-nhia-link a, :root body .pcm-nhia-link i { color: var(--fr-khaki-ink); }

/* Quick actions under the profile card */
:root body .profile-actions {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 14px 0 6px;
}
:root body .profile-actions > div:empty { display: none; }
:root body .profile-actions .btn {
    min-height: 42px; padding: 9px 18px;
    font-size: 14px !important;
    background: var(--clr-surface) !important;
    border: 1.5px solid var(--clr-border-strong) !important;
    color: var(--clr-text) !important;
}
:root body .profile-actions .btn:hover { border-color: var(--clr-primary) !important; color: var(--clr-primary) !important; }
:root body .profile-actions .btn-success {
    background: var(--clr-primary) !important; border-color: var(--clr-primary) !important; color: #fff !important;
}
:root body .profile-actions .btn-success:hover { background: var(--clr-primary-dark) !important; color: #fff !important; }
:root body .profile-actions .btn-danger { color: var(--clr-danger) !important; }

/* ── Notices ── */
:root body .pcm-notice,
:root body .dash-notif {
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 14px;
    font-size: 14px; line-height: 1.6;
    padding: 14px 18px;
}
:root body .dash-notif { margin: 12px 0; }
:root body .pcm-notice { margin-top: 12px; }
:root body .pcm-notice-title {
    font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
}
:root body .pcm-notice-list li { margin-bottom: 6px; }
:root body .dash-notif h4 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
:root body .dash-notif h4 .fa { margin-right: 6px; }

/* info / success → calm green; warning → amber; danger → red */
:root body .pcm-notice-info,
:root body .dash-notif.alert-success {
    background: var(--fr-green-tint); border-left-color: var(--clr-primary); color: var(--clr-text);
}
:root body .pcm-notice-info .pcm-notice-title { color: var(--clr-primary); }
:root body .dash-notif.alert-info,
:root body .pcm-notice-conc,
:root body .dash-notif.alert-warning {
    background: var(--fr-amber-tint); border-left-color: var(--fr-sun); color: var(--fr-amber-ink);
}
:root body .pcm-notice-conc .pcm-notice-title,
:root body .dash-notif.alert-info h4,
:root body .dash-notif.alert-warning h4 { color: var(--fr-amber-ink); }
:root body .pcm-notice-danger,
:root body .dash-notif.alert-danger {
    background: var(--fr-red-tint); border-left-color: var(--clr-danger); color: var(--fr-red-ink);
}
:root body .pcm-notice-danger .pcm-notice-title { color: var(--fr-red-ink); }
:root body .dash-notif a { color: inherit; font-weight: 700; text-decoration: underline; }
:root body .dash-inline-notice { margin: 0 0 16px; }

:root body .btn-name-corr,
:root body .btn-dob-waec {
    background: var(--fr-green-ink); animation: none;
    border-radius: 999px; padding: 10px 18px;
    font-size: 14px; font-weight: 700;
    text-decoration: none !important;
}
:root[data-theme="dark"] body .btn-name-corr,
:root[data-theme="dark"] body .btn-dob-waec { background: var(--grad-primary); }
:root body .btn-name-corr:hover, :root body .btn-dob-waec:hover { transform: none; box-shadow: none; opacity: 0.9; }

.dash-finger-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.dash-finger-warn { font-size: 13px; font-weight: 700; color: var(--fr-red-ink); }

/* ── Action cards ── */
.dash-action { margin: 0 0 12px; }
.dash-action:first-of-type { margin-top: 18px; }
:root body .pay-cta-card {
    gap: 18px; padding: 20px 22px;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-left: 1px solid var(--clr-border);
    border-radius: 20px;
    box-shadow: none;
    transition: border-color .15s;
}
:root body .pay-cta-card:hover { transform: none; box-shadow: none; border-color: var(--clr-border-strong); }
:root body .pay-cta--featured { border: 2px solid var(--clr-primary); }
:root body .pay-cta--featured:hover { border-color: var(--clr-primary); }
:root body .pay-cta-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--fr-green-tint); color: var(--clr-primary);
    font-size: 22px; box-shadow: none;
}
:root body .pay-cta--khaki .pay-cta-icon { background: var(--fr-khaki-tint); color: var(--fr-khaki-ink); }
:root body .pay-cta--danger .pay-cta-icon { background: var(--fr-red-tint); color: var(--fr-red-ink); }
:root body .pay-cta-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 2px; }
:root body .pay-cta-text { font-size: 14px; margin-bottom: 14px; }
.pay-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-cta-btns > div:empty { display: none; }
:root body .pay-cta-alert:empty { display: none; }
:root body .pay-cta-alert { font-size: 13px; font-weight: 700; color: var(--fr-red-ink); margin-bottom: 10px; }

:root body .pay-cta-btn {
    background: var(--clr-primary);
    animation: none; box-shadow: none;
    border: 1.5px solid var(--clr-primary);
    min-height: 44px; padding: 10px 20px;
    font-size: 14px; font-weight: 700;
    transition: background-color .15s;
}
:root body .pay-cta-btn:hover { background: var(--clr-primary-dark); border-color: var(--clr-primary-dark); transform: none; box-shadow: none; }
:root[data-theme="dark"] body .pay-cta-btn { background: var(--grad-primary); border-color: var(--grad-primary); }
:root body .pay-cta-btn--ghost {
    background: var(--clr-surface); border-color: var(--clr-border-strong); color: var(--clr-text) !important;
}
:root body .pay-cta-btn--ghost:hover { background: var(--clr-surface); border-color: var(--clr-text); color: var(--clr-text) !important; }
:root[data-theme="dark"] body .pay-cta-btn--ghost { background: var(--clr-surface); border-color: var(--clr-border-strong); }
:root body .pay-cta--danger .pay-cta-btn {
    background: var(--clr-surface); border-color: var(--clr-danger); color: var(--clr-danger) !important;
}
:root body .pay-cta--danger .pay-cta-btn:hover { background: var(--fr-red-tint); }

:root body .dob-notice {
    background: var(--clr-card-bg); border: 1px solid var(--clr-border); border-left: 1px solid var(--clr-border);
    border-radius: 20px; padding: 20px 22px; margin: 0;
}
:root body .dob-notice-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--fr-khaki-tint); }
:root body .dob-notice-icon i { color: var(--fr-khaki-ink); font-size: 22px; }
:root body .dob-notice-title { font-size: 18px; font-weight: 800; }
:root body .dob-notice-text { font-size: 14px; }

@media (max-width: 600px) {
    :root body .pay-cta-card { text-align: left; align-items: flex-start; }
    :root body .pay-cta-btns, :root body .pay-cta-btns > div { width: 100%; }
    :root body .pcm-profile-card { padding: 24px 18px 18px; }
}

/* ── Secondary sections (State of Deployment, Choice of Centre, Signature) ── */
:root body #dvedit1 fieldset:not(.pnlwidth) {
    background: var(--clr-card-bg) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 20px !important;
    padding: 22px !important;
    margin: 16px 0;
}
:root body #dvedit1 fieldset:not(.pnlwidth) > legend {
    float: left; width: 100%;
    font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
    color: var(--clr-text) !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 0 12px !important; margin: 0 0 14px;
    border-bottom: 1px solid var(--clr-border) !important;
}
:root body #dvedit1 fieldset:not(.pnlwidth) > legend + * { clear: both; }
.dash-centre-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.dash-centre-field { flex: 1 1 280px; }
.dash-centre-row .btn { min-height: 48px; padding: 12px 26px; }

/* ── Follow row ── */
.dash-follow {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    padding: 18px 4px 6px; font-size: 13px; font-weight: 600; color: var(--clr-text-muted);
}
.dash-follow span { margin-right: 4px; }
.dash-follow a {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--clr-surface); border: 1px solid var(--clr-border);
    color: var(--clr-text); font-size: 15px; text-decoration: none;
}
.dash-follow a:hover { border-color: var(--clr-primary); color: var(--clr-primary); }

/* ── Deployment survey popup (ModalPopupExtender) ── */
:root body .PopupBody {
    background: var(--clr-card-bg) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25) !important;
    max-width: min(520px, calc(100vw - 32px)) !important;
    height: auto !important;
    padding: 22px !important;
    color: var(--clr-text);
}
:root body .PopupHeader {
    background: transparent !important; color: var(--clr-text) !important;
    font-size: 20px !important; font-weight: 800; letter-spacing: -0.02em;
    text-align: center; padding: 0 !important; margin: 0 0 10px !important;
    border: 0 !important; height: auto !important; line-height: 1.3 !important;
}
:root body .PopupBody .style8 { font-style: normal !important; color: var(--clr-text-muted); font-size: 15px; }
:root body .PopupBody .btn { margin-top: 16px; min-width: 120px; }

/* Legacy corp-redesign.css sizes every legend at --font-size-xs !important,
   boxes the profile row, and gives every .alert-warning a red edge */
:root body #dvedit1 fieldset.pnlwidth > legend { font-size: clamp(26px, 3.4vw, 34px) !important; margin-left: 0; }
:root body #dvedit1 fieldset:not(.pnlwidth) > legend { font-size: 18px !important; margin-left: 0; border-radius: 0 !important; }
:root body .dashboard-profile-row,
:root body .pnlwidth > .dashboard-profile-row {
    background: transparent !important; border: 0 !important;
    padding: 0 !important; margin: 0 !important; display: block;
}
:root body .pnlwidth > .dashboard-profile-row ~ * { margin-left: 0; margin-right: 0; }
:root body .dash-notif.alert-warning,
:root body .dash-notif.alert-info,
:root body .pnlwidth .alert-info {
    background: var(--fr-amber-tint) !important;
    border: 0 !important; border-left: 4px solid var(--fr-sun) !important;
    color: var(--fr-amber-ink) !important;
}
:root body .dash-notif.alert-success {
    border: 0 !important; border-left: 4px solid var(--clr-primary) !important;
}
:root body #dvedit1 .form-control { font-size: 15px !important; min-height: 48px; font-family: var(--font-family) !important; }

@media (max-width: 768px) {
    /* The pinned hamburger sat on top of page headings; make it a bottom-left
       "Menu" pill instead (Support chat lives bottom-right) */
    :root body .sidebar-toggle-btn {
        top: auto !important; bottom: 18px !important; left: 16px !important;
        width: auto !important; height: 46px !important;
        padding: 0 18px; gap: 8px; border-radius: 999px !important;
        background: var(--fr-green-ink) !important; color: #fff !important;
        border: 0 !important; box-shadow: 0 8px 24px rgba(11,42,27,0.28) !important;
        font-weight: 700; font-size: 15px;
    }
    :root body .sidebar-toggle-btn::after { content: 'Menu'; font-family: var(--font-family); }
    :root body .blog-sidebar .sidebar-header { background: var(--fr-green-ink) !important; }

    /* Legacy mobile rules centre everything; keep reading text left-aligned */
    :root body .pcm-notice, :root body .dash-notif,
    :root body .pay-cta-card, :root body .pay-cta-content { text-align: left !important; }
    :root body .profile-actions, :root body .pay-cta-btns { justify-content: flex-start; }
    :root body .pcm-photo-inline { text-align: left; margin: 0 0 14px; }
    :root body .pnlwidth .alert-success,
    :root body .pnlwidth .alert-info,
    :root body .pnlwidth .alert { margin: 12px 0 !important; }
}

/* nysc-atoms.css animates .section-white with fill-mode "both", which leaves
   a transform on it for good. A transformed ancestor becomes the containing
   block for position:fixed children, so the corps sidebar drawer, its overlay
   and the toggle were pinned to the page section instead of the screen. */
:root body .section-white { animation: none !important; transform: none !important; }

/* Dark mode: filled buttons use the deeper green so white labels stay readable */
:root[data-theme="dark"] body .profile-actions .btn-success {
    background: var(--grad-primary) !important; border-color: var(--grad-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CORPS SERVICE PAGES
   Course Correction, Change Password, PPA Letter, LGA Clearance,
   Disciplinary Case, Relocation, Form 2A, Bank Info, ID Card,
   Remobilization, Revalidation, Print Relocation, Surveys, Verify.
   Each page ships the same card / field / button pattern under its
   own class prefix, so they are themed together here.
   ══════════════════════════════════════════════════════════════════ */

/* ── Cards ───────────────────────────────────────────────────────── */
:root body :is(.rmob-card, .rval-card, .chpw-card, .ppa-card, .disc-card, .reloc-card,
               .ccorr-card, .bnk-card, .f2a-card, .idcard-card, .lgac-card, .printh-card,
               .sv-card, .vdet-card) {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    box-shadow: none;
    transition: none;
    transform: none;
}

/* Headers: one calm style; the old colour variants only tint the icon */
:root body :is(.rmob-card-header, .rval-card-header, .chpw-card-header, .ppa-card-header,
               .disc-card-header, .reloc-card-header, .ccorr-card-header, .bnk-card-header,
               .f2a-card-header, .idcard-card-header, .lgac-card-header, .printh-card-header,
               .sv-card-header, .vdet-card-header) {
    background: var(--clr-card-bg);
    animation: none;
    border-bottom: 1px solid var(--clr-border);
    padding: 18px 22px;
    gap: 14px;
    color: var(--clr-text);
}
:root body :is(.rmob-card-header, .rval-card-header, .chpw-card-header, .ppa-card-header,
               .disc-card-header, .reloc-card-header, .ccorr-card-header, .bnk-card-header,
               .f2a-card-header, .idcard-card-header, .lgac-card-header, .printh-card-header,
               .sv-card-header, .vdet-card-header) :is(h2, h3) {
    color: var(--clr-text); font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
}
:root body :is(.rmob-card-header, .rval-card-header, .chpw-card-header, .ppa-card-header,
               .disc-card-header, .reloc-card-header, .ccorr-card-header, .bnk-card-header,
               .f2a-card-header, .idcard-card-header, .lgac-card-header, .printh-card-header,
               .sv-card-header, .vdet-card-header) p {
    color: var(--clr-text-muted); font-size: 13px;
}
:root body :is(.header-icon, .ch-icon) {
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--fr-green-tint); border: 0; backdrop-filter: none;
}
:root body :is(.header-icon, .ch-icon) i,
:root body .idcard-card-header > i { color: var(--clr-primary); font-size: 17px; }
:root body :is(.orange, .warning, .amber) > :is(.header-icon, .ch-icon) { background: var(--fr-amber-tint); }
:root body :is(.orange, .warning, .amber) > :is(.header-icon, .ch-icon) i,
:root body .idcard-card-header.orange > i { color: var(--fr-amber-ink); }
:root body :is(.danger, .red) > :is(.header-icon, .ch-icon) { background: var(--fr-red-tint); }
:root body :is(.danger, .red) > :is(.header-icon, .ch-icon) i { color: var(--fr-red-ink); }
:root body :is(.blue, .accent) > :is(.header-icon, .ch-icon) { background: var(--fr-khaki-tint); }
:root body :is(.blue, .accent) > :is(.header-icon, .ch-icon) i,
:root body .idcard-card-header.blue > i { color: var(--fr-khaki-ink); }

:root body :is(.rmob-card-body, .rval-card-body, .chpw-card-body, .ppa-card-body,
               .disc-card-body, .reloc-card-body, .ccorr-card-body, .bnk-card-body,
               .f2a-card-body, .idcard-card-body, .lgac-card-body, .printh-card-body,
               .sv-card-body, .vdet-card-body) { padding: 22px; }

/* Sub-section headings inside a card */
:root body :is(.ccorr-section-hdr, .ccorr-form-section-hdr) h4,
:root body .f2a-step-title {
    font-size: 15px; font-weight: 800; color: var(--clr-text);
    text-transform: none; letter-spacing: 0;
}
:root body :is(.ccorr-section-hdr, .ccorr-form-section-hdr) .sec-icon { width: 32px; height: 32px; border-radius: 10px; }

/* ── Read-only detail rows ───────────────────────────────────────── */
:root body .ccorr-details-box { background: var(--clr-card-bg); border-color: var(--clr-border); border-radius: 14px; }
:root body :is(.rmob-detail-row, .rval-detail-row, .disc-detail-row, .reloc-detail-row,
               .ccorr-detail-row, .bnk-detail-row, .idcard-detail-row, .f2a-row, .f2a-review-row,
               .rmob-approval-row, .rval-approval-row, .reloc-approval-row) {
    border-color: var(--clr-border);
    padding-top: 12px; padding-bottom: 12px;
}
:root body :is(.rmob-detail-label, .rval-detail-label, .reloc-detail-label, .ccorr-detail-lbl,
               .bnk-detail-label, .idcard-detail-label, .disc-detail-row .detail-label, .f2a-label,
               .rmob-approval-label, .rval-approval-label, .reloc-approval-label) {
    font-size: 13px; font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: none; letter-spacing: 0;
}
:root body :is(.rmob-detail-label, .rval-detail-label, .reloc-detail-label, .ccorr-detail-lbl,
               .bnk-detail-label) i { color: var(--clr-text-faint); }
:root body :is(.rmob-detail-value, .rval-detail-value, .reloc-detail-value, .ccorr-detail-val,
               .bnk-detail-value, .idcard-detail-value, .disc-detail-row .detail-value, .f2a-value,
               .rmob-approval-value, .rval-approval-value, .reloc-approval-value) {
    font-size: 15px; font-weight: 700; color: var(--clr-text);
}
:root body :is(.rmob-approval-box, .rval-approval-box, .reloc-approval-box) {
    background: var(--fr-green-tint); border: 0; border-radius: 14px;
}

/* ── Field labels and inputs ─────────────────────────────────────── */
:root body :is(.rmob-field, .rval-field, .chpw-field, .ccorr-field, .bnk-field, .f2a-field,
               .idcard-field, .disc-form-field) label {
    font-size: 14px; font-weight: 700; color: var(--clr-text);
    text-transform: none; letter-spacing: 0; margin-bottom: 8px;
}
:root body :is(.rmob-field, .rval-field, .chpw-field, .ccorr-field, .bnk-field, .f2a-field,
               .idcard-field, .disc-form-field) label i { color: var(--clr-primary); font-size: 14px; }
/* !important answers the page rules and the inline Verdana/x-small */
:root body :is(.rmob-field, .rval-field, .chpw-field, .ccorr-field, .bnk-field, .f2a-field,
               .idcard-field, .disc-form-field, .reloc-detail-value) .form-control {
    font-family: var(--font-family) !important;
    font-size: 15px !important;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px !important;
    border: 1.5px solid var(--clr-input-border) !important;
    background-color: var(--clr-input-bg) !important;
    color: var(--clr-input-text, var(--clr-text)) !important;
}
:root body :is(.rmob-field, .rval-field, .chpw-field, .ccorr-field, .bnk-field, .f2a-field,
               .idcard-field, .disc-form-field, .reloc-detail-value) textarea.form-control { min-height: 104px; }
:root body :is(.rmob-field, .rval-field, .chpw-field, .ccorr-field, .bnk-field, .f2a-field,
               .idcard-field, .disc-form-field, .reloc-detail-value) .form-control:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 4px var(--clr-primary-glow) !important;
}
:root body :is(.rmob-checkbox, .rval-checkbox) {
    background: var(--fr-green-tint); border-color: transparent; border-radius: 12px;
    color: var(--clr-text); font-weight: 600;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
:root body :is(.btn-rmob, .btn-rval, .btn-chpw, .btn-ccorr, .btn-bnk, .btn-f2a-next, .btn-f2a-submit,
               .btn-idcard-submit, .btn-printh-pay, .btn-vdet, .btn-disc-primary, .btn-disc-orange,
               .btn-reloc-green, .btn-reloc-send, .ppa-pay-link, .reloc-pay-link) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--clr-primary);
    animation: none; box-shadow: none;
    border: 1.5px solid var(--clr-primary);
    border-radius: 999px;
    color: #fff !important;
    font-family: var(--font-family);
    font-size: 15px !important; font-weight: 700;
    min-height: 50px; padding: 12px 28px;
    letter-spacing: 0; text-decoration: none !important;
    transition: background-color .15s, transform .1s;
}
:root body :is(.btn-rmob, .btn-rval, .btn-chpw, .btn-ccorr, .btn-bnk, .btn-f2a-next, .btn-f2a-submit,
               .btn-idcard-submit, .btn-printh-pay, .btn-vdet, .btn-disc-primary, .btn-disc-orange,
               .btn-reloc-green, .btn-reloc-send, .ppa-pay-link, .reloc-pay-link):is(:hover, :focus) {
    background: var(--clr-primary-dark); border-color: var(--clr-primary-dark);
    color: #fff; transform: none; box-shadow: none;
}
:root[data-theme="dark"] body :is(.btn-rmob, .btn-rval, .btn-chpw, .btn-ccorr, .btn-bnk, .btn-f2a-next,
               .btn-f2a-submit, .btn-idcard-submit, .btn-printh-pay, .btn-vdet, .btn-disc-primary,
               .btn-disc-orange, .btn-reloc-green, .btn-reloc-send, .ppa-pay-link, .reloc-pay-link) {
    background: var(--grad-primary); border-color: var(--grad-primary);
}
/* Full-width submit buttons on the single-form pages */
:root body :is(.btn-chpw, .btn-ccorr, .btn-rmob, .btn-rval) { display: flex; width: 100%; }

:root body :is(.btn-bnk-cancel, .btn-f2a-back, .btn-idcard-cancel, .btn-sv-back, .btn-reloc-doc,
               .btn-printh-refund) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--clr-surface);
    animation: none; box-shadow: none;
    border: 1.5px solid var(--clr-border-strong);
    border-radius: 999px;
    color: var(--clr-text) !important;
    font-family: var(--font-family);
    font-size: 15px !important; font-weight: 700;
    min-height: 50px; padding: 12px 26px;
    text-decoration: none !important;
}
:root body :is(.btn-bnk-cancel, .btn-f2a-back, .btn-idcard-cancel, .btn-sv-back, .btn-reloc-doc,
               .btn-printh-refund):is(:hover, :focus) {
    background: var(--clr-surface); border-color: var(--clr-text); color: var(--clr-text); transform: none; box-shadow: none;
}
:root body .btn-reloc-red {
    background: var(--clr-surface); color: var(--fr-red-ink) !important;
    border: 1.5px solid var(--clr-danger); border-radius: 999px;
    font-size: 15px; font-weight: 700; min-height: 50px; padding: 12px 26px;
    box-shadow: none; filter: none; transform: none;
}
:root body .btn-reloc-red:hover { background: var(--fr-red-tint); filter: none; transform: none; box-shadow: none; }
:root body :is(.reloc-actions, .reloc-doc-actions, .bnk-btn-row, .idcard-actions, .f2a-nav) { gap: 12px; }

/* ── Notices ─────────────────────────────────────────────────────── */
:root body :is(.ppa-payment-notice, .printh-pay-notice, .printh-refund-notice, .reloc-pay-notice,
               .reloc-spouse-note, .idcard-notice.warning, .disc-notice.notice-warning) {
    background: var(--fr-amber-tint);
    border: 1px solid transparent; border-left: 4px solid var(--fr-sun);
    border-radius: 14px;
    color: var(--fr-amber-ink);
    font-size: 14px; font-weight: 600; line-height: 1.5;
    box-shadow: none;
}
:root body :is(.ppa-payment-notice, .printh-pay-notice, .printh-refund-notice, .reloc-pay-notice,
               .reloc-spouse-note, .idcard-notice.warning, .disc-notice.notice-warning) :is(i, .notice-text) {
    color: var(--fr-amber-ink); font-size: 14px;
}
:root body :is(.ppa-payment-notice, .printh-pay-notice, .printh-refund-notice) .notice-icon {
    background: rgba(255,194,61,0.25); box-shadow: none; border-radius: 12px;
}
:root body :is(.chpw-info, .lgac-info, .f2a-notice, .idcard-notice.info, .disc-notice.notice-info) {
    background: var(--fr-green-tint);
    border: 1px solid transparent; border-left: 4px solid var(--clr-primary);
    border-radius: 14px;
    color: var(--clr-text);
    font-size: 14px; font-weight: 500; line-height: 1.55;
}
:root body :is(.chpw-info, .lgac-info, .f2a-notice, .idcard-notice.info, .disc-notice.notice-info) i { color: var(--clr-primary); }
:root body .vdet-specs { background: var(--fr-khaki-tint); border: 1px solid var(--clr-border); border-radius: 14px; }
:root body .vdet-specs :is(h4, li) { color: var(--fr-khaki-ink); }
:root body .vdet-specs li { font-size: 13px; }

/* ── Tables ──────────────────────────────────────────────────────── */
:root body :is(.disc-table-wrap, .reloc-table-wrap, .lgac-table-wrap) {
    border: 1px solid var(--clr-border); border-radius: 14px; overflow: hidden; box-shadow: none;
}
:root body :is(.disc-table-wrap, .reloc-table-wrap, .lgac-table-wrap) .table th,
:root body :is(.disc-table-wrap, .reloc-table-wrap, .lgac-table-wrap) .HeaderStyle th {
    background: var(--clr-table-head) !important;
    color: var(--clr-table-head-text) !important;
    font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: 0.04em;
}
:root body :is(.disc-table-wrap, .reloc-table-wrap, .lgac-table-wrap) .table td { font-size: 14px; }

/* ── Form 2A progress and surveys ────────────────────────────────── */
:root body .f2a-progress-bar { background: var(--clr-border); border-radius: 999px; }
:root body .f2a-progress-fill { background: var(--clr-primary); border-radius: 999px; }
:root body .f2a-progress-label { font-size: 13px; font-weight: 700; color: var(--clr-text-muted); text-transform: none; letter-spacing: 0; }
:root body .f2a-step-hint { font-size: 14px; color: var(--clr-text-muted); }

:root body .survey-card {
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
    border-radius: 20px; box-shadow: none; transform: none;
}
:root body .survey-card::before { background: var(--fr-flag); height: 5px; opacity: 1; }
:root body .survey-card:hover { border-color: var(--clr-primary); box-shadow: none; transform: none; }
:root body .survey-title { font-size: 17px; font-weight: 800; color: var(--clr-text); }
:root body .survey-description { font-size: 14px; color: var(--clr-text-muted); }
:root body .category-badge { background: var(--fr-khaki-tint); color: var(--fr-khaki-ink); border-radius: 999px; font-weight: 700; }
:root body .sv-status-icon.success { background: var(--fr-green-tint); }
:root body .sv-status-icon.warning { background: var(--fr-amber-tint); }
:root body .sv-status-icon.error   { background: var(--fr-red-tint); }

/* Bank Info, Remobilization and Revalidation hard-code Open Sans, which no
   longer loads; give them the theme font (icons keep FontAwesome) */
:root body :is(.bnk-page, .rmob-page, .rval-page) :not(.fa) { font-family: var(--font-family); }

/* Button icons keep the button's own label colour inside tinted notices */
:root body :is(.btn-printh-pay, .btn-printh-refund, .ppa-pay-link, .reloc-pay-link) i { color: inherit !important; }

/* ID Card headers are a bare icon + text, with no h3 */
:root body .idcard-card-header { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
:root body .idcard-card-header > i {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint);
}
:root body .idcard-card-header.blue > i   { background: var(--fr-khaki-tint); }
:root body .idcard-card-header.orange > i { background: var(--fr-amber-tint); }

/* Stacked detail rows on phones: let inputs use the full row */
:root body :is(.reloc-detail-value, .bnk-detail-value, .rmob-detail-value, .rval-detail-value) { align-self: stretch; min-width: 0; }
:root body :is(.reloc-detail-value, .bnk-detail-value) .form-control { width: 100% !important; max-width: 100%; }

/* Corps area on phones: keep the footer copy clear of the floating Menu pill */
@media (max-width: 768px) {
    :root body:has(.sidebar-toggle-btn) .footer { padding-bottom: 76px !important; }
}

/* Desktop sidebar toggle: dock it in the sidebar header instead of pinning
   it to the window. corp-redesign.css places it with position:fixed and
   viewport offsets, which only lined up while .section-white carried a
   transform; without it the button straddled the sidebar edge and floated
   over the page on scroll. */
@media (min-width: 769px) {
    :root body .row:has(> #sidebarToggle) { position: relative; }
    :root body #sidebarToggle {
        position: absolute !important;
        top: 11px !important;                      /* centred on .sidebar-header */
        left: calc(16.6667% - 46px) !important;    /* right end of the col-sm-2 sidebar */
        width: 36px; height: 36px;
        z-index: 9996 !important;                 /* .blog-sidebar is 9995 */
    }
    /* Collapsed, the sidebar slides away entirely: the button takes the
       top-left corner and the content keeps a gutter clear of it */
    :root body.sidebar-collapsed #sidebarToggle { left: 0 !important; }
    :root body.sidebar-collapsed #mainContent { padding-left: 64px !important; }
}

/* Dashboard: #dashInfo is filled server-side only for some members (always
   with <br />s); empty, its padding pushed the profile card down */
:root body #dashInfo:not(:has(*)) { display: none; }

/* ══════════════════════════════════════════════════════════════════
   CORPS MENU PAGES: shared layout
   A compact title, a main column and a side column of help panels.
   Used by the PPA letter, LGA clearance, disciplinary case, Form 2A
   and survey list pages.
   ══════════════════════════════════════════════════════════════════ */
:root body .fr-page { max-width: 1080px; margin: 0 auto; padding: 4px 16px 56px; }
:root body .fr-ptitle { margin: 0 0 22px; }
:root body .fr-ptitle h2 {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.15; color: var(--clr-text);
}
:root body .fr-ptitle-icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 19px;
}
:root body .fr-ptitle p { margin: 0; font-size: 15px; color: var(--clr-text-muted); max-width: 70ch; }

:root body .fr-split {
    display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px; align-items: start;
}
:root body .fr-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:root body .fr-main > * { margin: 0 !important; }
:root body .fr-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

:root body .fr-panel {
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
    border-radius: 20px; padding: 20px;
}
:root body .fr-panel h4 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--clr-text);
}
:root body .fr-panel h4 i { color: var(--clr-primary); }
:root body .fr-panel p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--clr-text-muted); }
:root body .fr-panel--khaki { background: var(--fr-khaki-tint); border-color: transparent; }
:root body .fr-panel--khaki h4 i { color: var(--fr-khaki-ink); }
:root[data-theme="dark"] body .fr-panel--khaki { background: rgba(216,200,160,0.10); }

/* Numbered steps */
:root body .fr-howto { margin: 0; padding: 0; list-style: none; counter-reset: frhowto; display: grid; gap: 12px; }
:root body .fr-howto > li {
    position: relative; padding-left: 36px; counter-increment: frhowto;
    font-size: 14px; line-height: 1.5; color: var(--clr-text-muted);
}
:root body .fr-howto > li::before {
    content: counter(frhowto); position: absolute; left: 0; top: 0;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fr-khaki-ink); color: #fff; font-size: 12px; font-weight: 800;
}
:root body .fr-panel:not(.fr-panel--khaki) .fr-howto > li::before { background: var(--clr-primary); }
:root body .fr-howto strong { color: var(--clr-text); }

/* Bullet tips */
:root body .fr-tips { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--clr-text-muted); }

/* Key/value facts */
:root body .fr-facts { margin: 0; }
:root body .fr-facts > div {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 10px 0; border-top: 1px solid var(--clr-border);
}
:root body .fr-facts > div:first-child { border-top: 0; padding-top: 0; }
:root body .fr-facts dt { font-size: 13px; font-weight: 600; color: var(--clr-text-muted); white-space: nowrap; }
:root body .fr-facts dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--clr-text); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Identity tiles (name, state code, call-up) */
:root body .fr-idstrip { display: grid; grid-template-columns: 1.5fr 1fr 1.6fr; gap: 10px; }
:root body .fr-idstrip > div {
    padding: 12px 14px; border-radius: 14px; min-width: 0;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
}
:root body .fr-idstrip small { display: block; font-size: 12px; font-weight: 600; color: var(--clr-text-muted); margin-bottom: 3px; }
:root body .fr-idstrip span { display: block; font-size: 15px; font-weight: 700; color: var(--clr-text); overflow-wrap: anywhere; }

/* Section list that follows a step-by-step form */
:root body .fr-sections { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
:root body .fr-sections li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 12px;
    font-size: 14px; font-weight: 600; color: var(--clr-text-muted);
}
:root body .fr-sections li i {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--clr-surface-alt); border: 1px solid var(--clr-border);
    font-size: 11px; font-style: normal; font-weight: 800; color: var(--clr-text-muted);
}
:root body .fr-sections li.is-done i { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
:root body .fr-sections li.is-current { background: var(--fr-green-tint); color: var(--clr-text); }
:root[data-theme="dark"] body .fr-sections li.is-current { background: rgba(47,191,127,0.12); }
:root body .fr-sections li.is-current i { border-color: var(--clr-primary); color: var(--clr-primary); }

@media (max-width: 960px) {
    :root body .fr-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    :root body .fr-page { padding: 0 0 36px; }
    :root body .fr-ptitle-icon { width: 38px; height: 38px; font-size: 16px; }
    :root body .fr-idstrip { grid-template-columns: 1fr 1fr; }
    :root body .fr-idstrip > div:first-child { grid-column: 1 / -1; }
}

/* A message box that was never given a message (some pages don't hide it) */
:root body .msgbox:has(.msgbox-content:empty) { display: none; }

/* Dashboard choice link (CorpHome / CorpHomeV2) */
:root body .fr-dash-switch { display: flex; justify-content: flex-end; margin: 0 0 12px; }
:root body .fr-dash-switch a {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 38px; padding: 0 16px; border-radius: 999px;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
    font-size: 13px; font-weight: 700; color: var(--clr-text) !important; text-decoration: none !important;
}
:root body .fr-dash-switch a:hover { border-color: var(--clr-primary); }
:root body .fr-dash-switch a i { color: var(--clr-primary); }

/* Dashboard choice on the login form (ResumePayment) */
:root body .fr-dash-pick { margin: 4px 0 18px; border: 0; padding: 0; }
:root body .fr-dash-pick legend {
    display: block; width: auto; margin: 0 0 8px; border: 0; padding: 0;
    font-size: 14px; font-weight: 700; color: var(--clr-text);
}
:root body .fr-dash-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
:root body .fr-dash-opts input { position: absolute; opacity: 0; pointer-events: none; }
:root body .fr-dash-opts label {
    display: flex; flex-direction: column; gap: 2px; margin: 0; cursor: pointer;
    padding: 10px 14px; border-radius: 14px;
    border: 1.5px solid var(--clr-border); background: var(--clr-card-bg);
    font-size: 14px; font-weight: 700; color: var(--clr-text); text-transform: none; letter-spacing: 0;
}
:root body .fr-dash-opts label small { font-size: 12px; font-weight: 500; color: var(--clr-text-muted); }
:root body .fr-dash-opts input:checked + label { border-color: var(--clr-primary); background: var(--fr-green-tint); }
:root[data-theme="dark"] body .fr-dash-opts input:checked + label { background: rgba(47,191,127,0.12); }
:root body .fr-dash-opts input:focus-visible + label { outline: 3px solid var(--clr-primary-glow); outline-offset: 2px; }
/* the login page styles every fieldset/legend as a boxed panel with a green tab */
:root body fieldset.fr-dash-pick { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
:root body fieldset.fr-dash-pick > legend {
    background: none !important; color: var(--clr-text) !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important;
    position: static !important; margin: 0 0 8px !important;
}

/* ══════════════════════════════════════════════════════════════════
   AUTH PAGES: welcome panel + form card
   ResumePayment (login) and CreateEmailOnly (create account). The form
   side reuses the .login-card field styles above.
   ══════════════════════════════════════════════════════════════════ */
body:has(.fr-auth) .carousel { display: none; }
body:has(.fr-auth) { background: var(--fr-paper, #FAF8F3); }
:root[data-theme="dark"] body:has(.fr-auth) { background: var(--clr-bg, #0E1712); }
:root body .fr-auth {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    max-width: 1040px; margin: 32px auto 48px; border-radius: 28px; overflow: hidden;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
    box-shadow: 0 24px 60px rgba(11, 42, 27, 0.10);
}

/* Welcome panel */
:root body .fr-auth-brand {
    position: relative; display: flex; flex-direction: column; gap: 22px;
    padding: 40px 40px 36px; color: #fff;
    background: linear-gradient(150deg, #12704A 0%, #1B8A5A 100%);
}
:root[data-theme="dark"] body .fr-auth-brand { background: linear-gradient(150deg, #12402B 0%, #17543A 100%); }
:root body .fr-auth-brand::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: var(--fr-flag);
}
:root body .fr-auth-logo {
    align-self: flex-start; display: inline-flex; padding: 10px 14px;
    background: #fff; border-radius: 14px;
}
:root body .fr-auth-logo img { height: 40px; width: auto; display: block; }
:root body .fr-auth-brand h1 {
    margin: 6px 0 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800;
    line-height: 1.1; letter-spacing: -0.02em; color: #fff;
}
:root body .fr-auth-brand > p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.86); }
:root body .fr-auth-perks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
:root body .fr-auth-perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: #fff; }
:root body .fr-auth-perks i {
    width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.14); font-size: 15px;
}
:root body .fr-auth-links { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.18); display: grid; gap: 10px; }
:root body .fr-auth-links a { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #fff !important; text-decoration: none !important; }
:root body .fr-auth-links a:hover span { text-decoration: underline; }
:root body .fr-auth-links a i { width: 18px; text-align: center; opacity: 0.85; }

/* Form side: the login-card rules in nysc-fresh.css style the fields */
:root body .fr-auth .login-card {
    margin: 0 !important; max-width: none !important; width: auto !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: transparent !important; display: flex; flex-direction: column;
}
:root body .fr-auth-form-head { padding: 40px 40px 6px; }
:root body .fr-auth-form-head h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--clr-text); }
:root body .fr-auth-form-head p { margin: 0; font-size: 15px; color: var(--clr-text-muted); }
:root body .fr-auth .login-card-body { padding: 22px 40px 8px !important; }
:root body .fr-auth .field-group, :root body .fr-auth .nin-group { margin-bottom: 18px !important; }
:root body .fr-auth .captcha-group { margin-bottom: 18px !important; }
:root body .fr-auth .login-card-body span[id*="Validator"],
:root body .fr-auth .login-card-body span[id*="rfv"] { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--clr-danger); }
:root body .fr-auth .login-card-footer {
    padding: 14px 40px 32px !important; background: transparent !important; border: 0 !important; text-align: left !important;
}
:root body .fr-auth .forgot-link { font-size: 14px !important; font-weight: 700 !important; }

@media (max-width: 860px) {
    :root body .fr-auth { grid-template-columns: minmax(0, 1fr); margin: 12px 16px 32px; border-radius: 22px; }
    :root body .fr-auth-brand { padding: 28px 22px 22px; gap: 12px; }
    :root body .fr-auth-brand h1 { font-size: 26px; }
    :root body .fr-auth-brand > p { font-size: 14px; }
    :root body .fr-auth-perks, :root body .fr-auth-links { display: none; }
    :root body .fr-auth-logo img { height: 34px; }
    :root body .fr-auth-form-head { padding: 24px 20px 0; }
    :root body .fr-auth-form-head h2 { font-size: 22px; }
    :root body .fr-auth .login-card-body { padding: 18px 20px 6px !important; }
    :root body .fr-auth .login-card-footer { padding: 10px 20px 26px !important; }
    :root body .fr-auth-links-mobile { display: grid !important; }
}
:root body .fr-auth-links-mobile {
    display: none; gap: 10px; padding: 16px 20px 24px; border-top: 1px solid var(--clr-border);
}
:root body .fr-auth-links-mobile a { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--clr-text-link) !important; }

/* Numbered steps in the welcome panel (create account); stays on phones */
:root body .fr-auth-steps { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: frauth; display: grid; gap: 14px; }
:root body .fr-auth-steps li {
    position: relative; padding-left: 44px; counter-increment: frauth;
    font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.86);
}
:root body .fr-auth-steps li::before {
    content: counter(frauth); position: absolute; left: 0; top: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.16); color: #fff; font-size: 13px; font-weight: 800;
}
:root body .fr-auth-steps li.is-current::before { background: #fff; color: #0E5C3B; }
:root body .fr-auth-steps strong { display: block; font-size: 15px; color: #fff; }

/* Notices inside the form */
:root body .fr-auth-note {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 0 18px; padding: 12px 14px; border-radius: 14px;
    font-size: 13px; line-height: 1.5; color: var(--clr-text);
}
:root body .fr-auth-note i { margin-top: 2px; }
:root body .fr-auth-note--warn { background: var(--fr-amber-tint); }
:root body .fr-auth-note--warn i { color: var(--fr-amber-ink); }
:root body .fr-auth-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--clr-text-muted); }
:root body .fr-auth .validation-summary:empty, :root body .fr-auth .validation-summary[style*="none"] { display: none !important; }

@media (max-width: 860px) {
    :root body .fr-auth-steps { gap: 10px; }
    :root body .fr-auth-steps li { font-size: 13px; padding-left: 38px; }
    :root body .fr-auth-steps li::before { width: 26px; height: 26px; font-size: 12px; }
    :root body .fr-auth-steps strong { font-size: 14px; }
}

/* ==========================================================================
   REGISTRATION STEPS (CorpsRegistration*, PreviewPage): .cregx page header,
   two-column layout, progress side panel (JScript/creg-progress.js), actions bar
   ========================================================================== */
:root body .cregx { max-width: 1140px; padding: 22px 16px 48px; }
:root body .cregx-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
:root body .cregx-logo { flex-shrink: 0; }
:root body .cregx-logo img {
    display: block; height: 90px; width: auto; max-width: 100%; padding: 8px 16px; border-radius: 18px;
    background: #fff; border: 1px solid var(--clr-border);
}
:root body .cregx-eyebrow {
    display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--clr-primary);
}
:root body .cregx-head h1 { margin: 2px 0 4px; font-size: 28px; font-weight: 800; color: var(--clr-text); }
:root body .cregx-head p { margin: 0; font-size: 15px; color: var(--clr-text-muted); }
:root body .cregx-notice { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 14px; }
:root body .cregx-notice i { margin-top: 3px; }
:root body .cregx .creg-step { margin: 6px 0 22px; }

:root body .cregx-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
:root body .cregx-main { min-width: 0; }
:root body .cregx .creg-card { scroll-margin-top: 16px; }

:root body .cregx-aside { align-self: stretch; }
:root body .cregx-progress { position: sticky; top: 16px; }
:root body .cregx-tips { margin-bottom: 16px; }
:root body .cregx-panel {
    padding: 18px; border-radius: 18px;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
}
:root body .cregx-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
:root body .cregx-progress-head strong { font-size: 16px; font-weight: 800; color: var(--clr-text); }
:root body .cregx-progress-head span { font-size: 13px; font-weight: 600; color: var(--clr-text-muted); }
:root body .cregx-bar { height: 8px; margin: 10px 0 4px; border-radius: 99px; background: var(--clr-surface-alt); overflow: hidden; }
:root body .cregx-bar span { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--clr-primary); transition: width 0.3s ease; }
:root body .cregx-nav { list-style: none; margin: 12px 0 0; padding: 0; }
:root body .cregx-nav a {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px;
    font-size: 14px; font-weight: 600; color: var(--clr-text); text-decoration: none;
}
:root body .cregx-nav a:hover { background: var(--clr-surface-alt); text-decoration: none; }
:root body .cregx-nav li.is-current a { background: var(--fr-green-tint); }
:root body .cregx-dot {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--clr-border-strong, var(--clr-border)); color: transparent; font-size: 10px;
}
:root body .cregx-nav li.is-done .cregx-dot { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
:root body .cregx-nav li.is-info .cregx-dot { border-style: dashed; }
:root body .cregx-tips { background: var(--fr-khaki-tint); border: 0; }
:root[data-theme="dark"] body .cregx-tips { background: rgba(216,200,160,0.10); }
:root body .cregx-tips h4 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--clr-text); }
:root body .cregx-tips h4 i { color: var(--fr-khaki-ink); margin-right: 4px; }
:root body .cregx-tips ul { margin: 0; padding-left: 18px; }
:root body .cregx-tips li { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--clr-text-muted); }

/* Husband title + surname side by side */
:root body .cregx #CboTitlesSpouse { width: 100% !important; }
:root body .cregx .creg-field[style*="max-width:120px"] { flex: 0 0 140px; max-width: 140px !important; min-width: 0; }
:root body .cregx .creg-name-result { text-align: left; padding: 16px 18px; }
:root body .cregx .creg-name-result .Headertext { font-size: 14px; margin-bottom: 8px; }
:root body .cregx .creg-radio-group[hidden] { display: none; }

:root body .cregx-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 8px; padding: 18px 22px; border-radius: 18px; text-align: left;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
}
:root body .cregx-actions > * { margin: 0; }
:root body .cregx-actions-text strong { display: block; font-size: 16px; color: var(--clr-text); }
:root body .cregx-actions-text span { font-size: 13px; color: var(--clr-text-muted); }
:root body .cregx-actions-btns { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
    :root body .cregx-split { display: flex; flex-direction: column; gap: 16px; }
    :root body .cregx-main { width: 100%; }
    :root body .cregx-aside { order: -1; width: 100%; z-index: 20; position: sticky; top: 0; }
    :root body .cregx-progress { position: static; }
    :root body .cregx-aside .cregx-panel.cregx-progress { padding: 12px 14px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
    :root body .cregx-nav, :root body .cregx-tips { display: none; }
    :root body .cregx .creg-card { scroll-margin-top: 84px; }
}
@media (max-width: 600px) {
    :root body .cregx { padding: 14px 12px 40px; }
    :root body .cregx-head { gap: 12px; }
    :root body .cregx-logo img { height: 64px; padding: 6px 12px; }
    :root body .cregx-head h1 { font-size: 23px; }
    :root body .cregx-head p { font-size: 14px; }
    :root body .cregx-actions { padding: 16px; }
    :root body .cregx-actions-btns { width: 100%; flex-direction: column-reverse; }
    :root body .cregx-actions-btns > * { width: 100%; justify-content: center; }
}

/* Preview step: header block above the summary, a plain "Jump to" list, signature box */
:root body .cregx-top { padding-bottom: 0; margin-bottom: 0; }
:root body .cregx-body { padding-top: 0; }
:root body .cregx-progress--nav .cregx-dot { width: 8px; height: 8px; margin: 0 6px; border: 0; background: var(--clr-border-strong, var(--clr-border)); }
:root body .cregx-progress--nav li.is-current .cregx-dot { background: var(--clr-primary); }
:root body .cregx .creg-scroll-notice { text-align: left; }
:root body .cregx-sig-label { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--clr-text); }
:root body .cregx-sig-label i { color: var(--clr-primary); margin-right: 4px; }
:root body .cregx-sig { margin-bottom: 20px; padding: 16px; border-radius: 14px; border: 1.5px dashed var(--clr-border); background: var(--clr-surface-alt); }
:root body .cregx-actions .btn-creg-submit[disabled] { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 900px) {
    /* A plain list of sections is no help on a phone, where the list itself is hidden */
    :root body .cregx-aside:has(.cregx-progress--nav) { display: none; }
}
@media (max-width: 600px) {
    :root body .cregx-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==========================================================================
   POPUP FORM PAGES
   Small pages shown in an iframe inside a dashboard modal
   (NameAdditionAndRemoval, VerifyWAEC). The modal already carries the title,
   so the page opens with a short intro, then the form.
   ========================================================================== */
:root body.fpop { margin: 0; background: var(--clr-surface) !important; color: var(--clr-text); font-family: 'Open Sans', sans-serif; }
:root body .fpop-page { max-width: 600px; margin: 0 auto; padding: 20px 20px 28px; }

:root body .fpop-intro { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 20px; }
:root body .fpop-intro-icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 19px;
}
:root body .fpop-intro h1 { margin: 0 0 4px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--clr-text); }
:root body .fpop-intro p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--clr-text-muted); }

:root body .fpop-section-title {
    display: flex; align-items: center; gap: 8px; margin: 4px 0 14px;
    font-size: 15px; font-weight: 800; color: var(--clr-text);
}
:root body .fpop-section-title i { color: var(--clr-primary); }
:root body .fpop-section-title label { margin: 0; font: inherit; }

/* Fields */
:root body .fpop-field { margin-bottom: 16px; }
:root body .fpop-field > label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--clr-text); }
:root body .fpop-field .fpop-opt { font-weight: 600; color: var(--clr-text-faint); }
:root body .fpop-field .form-control {
    width: 100%; height: 46px; padding: 0 14px; box-sizing: border-box; box-shadow: none;
    font-size: 15px; color: var(--clr-text); background: var(--clr-input-bg);
    border: 1.5px solid var(--clr-input-border); border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}
:root body .fpop-field select.form-control { padding-right: 10px; }
:root body .fpop-field .form-control::placeholder { color: var(--clr-input-placeholder); }
:root body .fpop-field .form-control:focus { outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-glow); }
:root body .fpop-field .text-danger { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--clr-danger); }
:root body .fpop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* Choice cards (RadioButtonList with RepeatLayout="UnorderedList") */
:root body .fpop-choices ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
:root body .fpop-choices li { position: relative; margin: 0; }
:root body .fpop-choices input[type=radio] {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; margin: 0; accent-color: var(--clr-primary); cursor: pointer;
}
:root body .fpop-choices label {
    display: block; margin: 0; padding: 14px 16px 14px 46px; cursor: pointer;
    font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--clr-text);
    background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: 14px;
    transition: border-color .15s, background .15s;
}
:root body .fpop-choices label:hover { border-color: var(--clr-primary); }
:root body .fpop-choices li:has(input:checked) label { border-color: var(--clr-primary); background: var(--fr-green-tint); }
:root body .fpop-choices input:focus-visible + label { box-shadow: 0 0 0 3px var(--clr-primary-glow); }

/* Buttons */
:root body .fpop-actions { margin-top: 22px; }
:root body .fpop-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px;
    font-size: 15px; font-weight: 700; cursor: pointer; animation: none;
    background: var(--clr-primary); color: #fff; transition: background .15s;
}
:root body .fpop-btn:hover, :root body .fpop-btn:focus { background: var(--clr-primary-dark); color: #fff; outline: none; }
:root body .fpop-btn:focus-visible { box-shadow: 0 0 0 3px var(--clr-primary-glow); }
:root body .fpop-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Notes */
:root body .fpop-note {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px;
    border-radius: 14px; font-size: 13.5px; line-height: 1.55;
    background: var(--clr-surface-alt); border: 1px solid var(--clr-border); color: var(--clr-text-muted);
}
:root body .fpop-note > i { margin-top: 3px; color: var(--clr-primary); }
:root body .fpop-note strong { color: var(--clr-text); }
:root body .fpop-note a { color: var(--clr-text-link); font-weight: 700; text-decoration: underline; }
:root body .fpop-note--warn { background: var(--fr-amber-tint); border-color: transparent; color: var(--fr-amber-ink); }
:root body .fpop-note--warn > i, :root body .fpop-note--warn strong { color: var(--fr-amber-ink); }

/* Result summary (e.g. the WAEC record found) */
:root body .fpop-result { border: 1.5px solid var(--clr-primary); border-radius: 16px; overflow: hidden; }
:root body .fpop-result-head {
    display: flex; gap: 10px; align-items: center; padding: 12px 16px;
    background: var(--fr-green-tint); font-size: 14px; font-weight: 800; color: var(--clr-text);
}
:root body .fpop-result-head i { color: var(--clr-primary); font-size: 17px; }
:root body .fpop-result-body { padding: 4px 16px 16px; }
:root body .fpop-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--clr-border); }
:root body .fpop-row-icon {
    width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--clr-surface-alt); color: var(--clr-primary); font-size: 15px;
}
:root body .fpop-row-text { flex: 1; min-width: 0; }
:root body .fpop-row-label { font-size: 12.5px; font-weight: 600; color: var(--clr-text-muted); }
:root body .fpop-row .form-control[readonly] {
    width: 100%; height: auto; padding: 0; border: 0 !important; box-shadow: none !important; background: transparent !important;
    font-size: 15.5px; font-weight: 800; color: var(--clr-text) !important; cursor: default;
}

/* Messages written by the code-behind in place of the form */
:root body .fpop-page #divAvailable > center > h3 {
    margin: 0; padding: 16px; border-radius: 14px; text-align: left;
    font-size: 14.5px; font-weight: 700; line-height: 1.5;
    background: var(--fr-amber-tint); color: var(--fr-amber-ink);
}
:root body .fpop-loader { display: flex; justify-content: center; padding: 6px 0 12px; }

@media (max-width: 480px) {
    :root body .fpop-page { padding: 16px 16px 24px; }
    :root body .fpop-grid { grid-template-columns: 1fr; }
    :root body .fpop-intro h1 { font-size: 17px; }
}

/* ==========================================================================
   TERMS POPUP
   "Terms and Conditions for Compliance" built by GetNyscTermsV2() in
   CorpHome.aspx.cs and shown in the dashboard info popup (both dashboards).
   ========================================================================== */
:root body .nt { font-size: 14.5px; line-height: 1.6; color: var(--clr-text); }
:root body .nt p { margin: 0 0 10px; }
:root body .nt-intro { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 20px; }
:root body .nt-intro-icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 19px;
}
:root body .nt h4.nt-title { margin: 0 0 4px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--clr-text); text-transform: none; letter-spacing: 0; }
:root body .nt .nt-lead { margin: 0; font-size: 14px; color: var(--clr-text-muted); }

:root body .nt-sec { margin: 0 0 22px; }
:root body .nt h5.nt-h {
    display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
    font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--clr-text); text-transform: none; letter-spacing: 0;
}
:root body .nt-h-num {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--clr-primary); color: #fff; font-size: 13px; font-weight: 800;
}

/* Numbered rows */
:root body .nt-list { list-style: none; margin: 0; padding: 0; counter-reset: nt; border: 1px solid var(--clr-border); border-radius: 16px; overflow: hidden; background: var(--clr-card-bg); }
:root body .nt-list > li {
    counter-increment: nt; position: relative; margin: 0; padding: 11px 16px 11px 52px;
    border-bottom: 1px solid var(--clr-border); font-size: 14px; line-height: 1.55;
}
:root body .nt-list > li:last-child { border-bottom: 0; }
:root body .nt-list > li::before {
    content: counter(nt); position: absolute; left: 14px; top: 10px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 12px; font-weight: 800;
}
:root body .nt-list--alpha > li::before { content: counter(nt, lower-alpha); }
:root body .nt-list > li.nt-key { background: var(--fr-amber-tint); color: var(--fr-amber-ink); font-weight: 700; }
:root body .nt-list > li.nt-key::before { background: var(--fr-amber-ink); color: var(--clr-card-bg); }
:root body .nt-list > li.nt-bring { background: var(--fr-green-tint); font-weight: 600; }
:root body .nt-list > li.nt-bring::before { background: var(--clr-primary); color: #fff; }
:root body .nt-list > li > i { margin-right: 4px; }
:root body .nt-sub { margin: 6px 0 2px; padding-left: 18px; list-style: disc; }
:root body .nt-sub li { margin: 2px 0; }
:root body .nt-sub li::marker { color: var(--clr-primary); }

/* Special notice */
:root body .nt-callout { padding: 16px; border-radius: 18px; background: var(--fr-khaki-tint); }
:root body .nt-callout .nt-h-num { background: var(--fr-khaki-ink); color: var(--fr-khaki-tint); }
:root body .nt-callout .nt-list { margin: 0 0 10px; }
:root body .nt-callout .nt-list > li::before { background: var(--fr-khaki-tint); color: var(--fr-khaki-ink); }
:root body .nt .nt-aside { margin: 0; font-size: 13.5px; font-style: italic; color: var(--clr-text-muted); }

:root body .nt .nt-note {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 24px; padding: 12px 14px;
    border-radius: 14px; background: rgba(200,55,45,0.1); color: var(--clr-danger); font-weight: 700; font-size: 14px;
}
:root body .nt .nt-note i { margin-top: 3px; }

/* Signature lines */
:root body .nt-sign { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 8px; }
:root body .nt-sign-col { flex: 1 1 200px; text-align: center; }
:root body .nt-sign-line { min-height: 30px; padding-bottom: 4px; margin-bottom: 6px; border-bottom: 2px solid var(--clr-text); font-weight: 700; }
:root body .nt-sign-label { font-size: 12.5px; font-weight: 600; color: var(--clr-text-muted); }

@media (max-width: 600px) {
    :root body .nt-list > li { padding-left: 46px; }
    :root body .nt-list > li::before { left: 10px; }
    :root body .nt-callout { padding: 12px; }
}

/* ==========================================================================
   EXEMPTION NOTICE
   Built in additionalInfo() (CorpHome.aspx.cs) for exempted PCMs; shares the
   .nt intro styles from TERMS POPUP above.
   ========================================================================== */
:root body .nx-details { margin: 0 0 16px; border: 1px solid var(--clr-border); border-radius: 16px; overflow: hidden; background: var(--clr-card-bg); }
:root body .nx-row { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 16px; border-bottom: 1px solid var(--clr-border); }
:root body .nx-row:last-child { border-bottom: 0; }
:root body .nx-label { flex: 0 0 160px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--clr-text-muted); }
:root body .nx-value { flex: 1 1 200px; margin: 0; font-size: 15px; font-weight: 800; color: var(--clr-text); }
:root body .nx-next {
    display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 14px 16px;
    border-radius: 16px; background: var(--fr-green-tint);
}
:root body .nx-next > i { margin-top: 3px; font-size: 18px; color: var(--clr-primary); }
:root body .nx-next strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--clr-text); }
:root body .nt .nx-next p { margin: 0 0 4px; font-size: 14px; }
:root body .nt .nx-contact { margin: 0 0 6px; font-size: 14px; color: var(--clr-text-muted); }
:root body .nx-contact i { margin-right: 4px; color: var(--clr-primary); }
:root body .nx-contact a { font-weight: 700; color: var(--clr-text-link); }
:root body .nt .nx-thanks { margin: 0; font-weight: 700; }

/* ==========================================================================
   SCHEDULE SLIPS
   Monthly clearance and camp reporting slips (loadLGASchedule /
   loadCAMPCompletionSchedule in CorpHome.aspx.cs), shown in a dashboard popup.
   Reuse the EXEMPTION NOTICE detail rows.
   ========================================================================== */
:root body .slip-top { display: flex; gap: 18px; align-items: flex-start; }
:root body .slip-main { flex: 1; min-width: 0; }
:root body .slip-photo:empty { display: none; }
:root body .slip-photo img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 16px; border: 1px solid var(--clr-border); }
:root body .nt .slip-print-title { display: none; }
:root body .nt.slip .nx-details { margin-bottom: 14px; }
:root body .nx-row--key .nx-value { color: var(--clr-primary); }
:root body .slip-steps { margin: 4px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
:root body .slip-steps li { margin-bottom: 4px; }
:root body .nt.slip .nt-note { margin-bottom: 0; }
@media (max-width: 560px) {
    :root body .slip-top { flex-direction: column-reverse; }
}

/* ==========================================================================
   DATE PICKERS
   Dates use the browser's own picker (asp:TextBox TextMode="Date"); the server
   reads them with clsLoadControls.GetDate(TextBox, ...).
   ========================================================================== */
:root body .date-picker { max-width: 260px; cursor: pointer; }
:root body .date-picker::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
:root[data-theme="dark"] body .date-picker { color-scheme: dark; }
:root body .date-picker[disabled] { cursor: not-allowed; }
@media (max-width: 600px) { :root body .date-picker { max-width: none; } }

/* ==========================================================================
   SENATE LIST PAGES
   MapSenateList and VerifySenateLists: one card on the sign-in background.
   ========================================================================== */
/* --- Map My Senate List: "Corper Fresh" card on the sign-in background --- */
:root body .msl-wrap { display: flex; justify-content: center; padding: 32px 16px 56px; }
:root body .msl-card {
    width: 100%; max-width: 760px; overflow: hidden;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border); border-radius: 24px;
    box-shadow: 0 24px 64px rgba(11,42,27,0.16);
}
:root body .msl-head { display: flex; gap: 14px; align-items: flex-start; padding: 24px 26px 18px; border-bottom: 1px solid var(--clr-border); }
:root body .msl-head-icon {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 20px;
}
:root body .msl-head h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--clr-text); }
:root body .msl-head p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--clr-text-muted); }
:root body .msl-body { padding: 22px 26px 26px; }

:root body .msl-account {
    display: flex; gap: 10px; align-items: center; margin: 0 0 18px; padding: 12px 14px;
    border-radius: 14px; background: var(--clr-surface-alt); border: 1px solid var(--clr-border);
    font-size: 14px; color: var(--clr-text-muted);
}
:root body .msl-account i { color: var(--clr-primary); }
:root body .msl-account strong { color: var(--clr-text); word-break: break-all; }

:root body .msl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
:root body .msl-field { margin-bottom: 16px; }
:root body .msl-field--wide { grid-column: 1 / -1; }
:root body .msl-field > label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--clr-text); }
:root body .msl-field .form-control {
    width: 100% !important; max-width: none; height: 46px; padding: 0 14px; box-sizing: border-box; box-shadow: none;
    font-size: 15px; color: var(--clr-text); background: var(--clr-input-bg);
    border: 1.5px solid var(--clr-input-border); border-radius: 12px;
}
:root body .msl-field .form-control:focus { outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-glow); }
:root body .msl-field .form-control[disabled] { background: var(--clr-surface-alt); color: var(--clr-text-muted); cursor: not-allowed; }
:root body .msl-field .text-danger { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--clr-danger); }

:root body .msl-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
:root body .msl-btn {
    min-height: 48px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--clr-primary); color: #fff; font-size: 15px; font-weight: 700;
}
:root body .msl-btn:hover { background: var(--clr-primary-dark); }
:root body .msl-progress { display: flex; justify-content: center; padding: 8px 0; }
:root body .msl-note {
    display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px;
    border-radius: 14px; background: var(--fr-amber-tint); color: var(--fr-amber-ink);
    font-size: 13.5px; line-height: 1.55; font-weight: 600;
}
:root body .msl-note i { margin-top: 3px; }

/* Results */
:root body .msl-results { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--clr-border); }
:root body .msl-results fieldset { margin: 0; padding: 0; border: 0; }
:root body .msl-results legend {
    width: auto; margin: 0 0 4px; padding: 0; border: 0;
    font-size: 16px; font-weight: 800; color: var(--clr-text);
}
:root body .msl-results-title { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--clr-text); }
:root body .msl-results-hint { margin: 0 0 12px; font-size: 13.5px; color: var(--clr-text-muted); }
:root body .msl-table-wrap { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: 14px; }
:root body .msl-table-wrap table.table { width: 100% !important; margin: 0; border: 0 !important; background: var(--clr-card-bg); }
:root body .msl-table-wrap th {
    padding: 11px 12px !important; white-space: nowrap; border: 0 !important; border-bottom: 1px solid var(--clr-border) !important;
    background: var(--clr-table-head) !important; color: var(--clr-table-head-text) !important;
    font-size: 12.5px; font-weight: 800;
}
:root body .msl-table-wrap td {
    padding: 11px 12px !important; vertical-align: middle !important; border: 0 !important;
    border-bottom: 1px solid var(--clr-border) !important; background: transparent !important;
    color: var(--clr-text) !important; font-size: 14px;
}
:root body .msl-table-wrap tr:last-child td { border-bottom: 0 !important; }
:root body .msl-table-wrap a[id*="LnkSelect"] {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; white-space: nowrap;
    border-radius: 999px; background: var(--clr-primary); color: #fff !important; font-weight: 700; text-decoration: none;
}
:root body .msl-table-wrap a[id*="LnkSelect"]:hover { background: var(--clr-primary-dark); }

@media (max-width: 600px) {
    :root body .msl-wrap { padding: 16px 10px 40px; }
    :root body .msl-head, :root body .msl-body { padding-left: 16px; padding-right: 16px; }
    :root body .msl-head h1 { font-size: 19px; }
    :root body .msl-grid { grid-template-columns: 1fr; }
    :root body .msl-btn { width: 100%; }
}

/* Logo above the card on public pages (VerifySenateLists) */
:root body .msl-logo { display: block; width: fit-content; margin: 0 auto 16px; }
:root body .msl-logo img { display: block; height: 72px; width: auto; max-width: 100%; padding: 8px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--clr-border); }
:root body .msl-col { width: 100%; max-width: 760px; }
:root body .msl-status {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
    background: var(--clr-surface-alt); border: 1px solid var(--clr-border); font-size: 13px; font-weight: 700; color: var(--clr-text);
}
:root body .msl-status:empty { display: none; }
@media (max-width: 600px) { :root body .msl-logo img { height: 56px; } }

/* ==========================================================================
   PUBLIC HELP PAGES
   Payment status (Transactionstatus_Remita), Certificate replacement,
   Contact and FAQ. They use the CORPS MENU PAGES layout (.fr-page,
   .fr-ptitle, .fr-split, .fr-panel) plus the pieces below.
   ========================================================================== */
/* --- Cards --- */
:root body .pub-card {
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
    border-radius: 20px; overflow: hidden;
}
:root body .pub-card-head {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid var(--clr-border);
}
:root body .pub-card-head h3 { margin: 0 0 2px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--clr-text); }
:root body .pub-card-head p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--clr-text-muted); }
:root body .pub-card-icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 17px;
}
:root body .pub-card-icon--amber { background: var(--fr-amber-tint); color: var(--fr-amber-ink); }
:root body .pub-card-icon--khaki { background: var(--fr-khaki-tint); color: var(--fr-khaki-ink); }
:root body .pub-card-icon--red   { background: var(--fr-red-tint);   color: var(--fr-red-ink); }
:root body .pub-card-body { padding: 22px; }

/* --- Fields --- */
:root body .pub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
:root body .pub-grid > .pub-field--wide { grid-column: 1 / -1; }
:root body .pub-field { margin-bottom: 16px; }
:root body .pub-field > label {
    display: block; margin: 0 0 7px; font-size: 14px; font-weight: 700; color: var(--clr-text);
    text-transform: none; letter-spacing: 0;
}
:root body .pub-field .req { color: var(--clr-danger); margin-left: 2px; }
:root body .pub-field .form-control {
    width: 100% !important; max-width: none; min-height: 48px; height: auto; padding: 11px 14px; box-sizing: border-box;
    font-family: var(--font-family); font-size: 15px; color: var(--clr-input-text, var(--clr-text));
    background-color: var(--clr-input-bg); border: 1.5px solid var(--clr-input-border); border-radius: 12px; box-shadow: none;
}
:root body .pub-field textarea.form-control { min-height: 110px; resize: vertical; }
:root body .pub-field input[type="file"].form-control { padding: 10px 12px; }
:root body .pub-field .form-control:focus { outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 4px var(--clr-primary-glow); }
:root body .pub-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--clr-text-muted); }
:root body .pub-error { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--clr-danger); }

/* A field and its button on one line (search boxes) */
:root body .pub-inline { display: flex; gap: 10px; align-items: stretch; }
:root body .pub-inline .form-control { flex: 1; min-width: 0; }

/* --- Buttons --- */
:root body .pub-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 26px; border-radius: 999px; cursor: pointer;
    background: var(--clr-primary); border: 1.5px solid var(--clr-primary); color: #fff !important;
    font-family: var(--font-family); font-size: 15px; font-weight: 700; white-space: nowrap;
    text-decoration: none !important; box-shadow: none; transition: background-color .15s;
}
:root body .pub-btn:is(:hover, :focus) { background: var(--clr-primary-dark); border-color: var(--clr-primary-dark); color: #fff; }
:root[data-theme="dark"] body .pub-btn { background: var(--grad-primary); border-color: var(--grad-primary); }
:root body .pub-btn--ghost { background: var(--clr-surface); border-color: var(--clr-border-strong); color: var(--clr-text) !important; }
:root body .pub-btn--ghost:is(:hover, :focus) { background: var(--clr-surface); border-color: var(--clr-text); color: var(--clr-text); }
:root[data-theme="dark"] body .pub-btn--ghost { background: transparent; border-color: var(--clr-border-strong); }
:root body .pub-btn--danger { background: var(--clr-surface); border-color: var(--clr-danger); color: var(--fr-red-ink) !important; }
:root body .pub-btn--danger:is(:hover, :focus) { background: var(--fr-red-tint); border-color: var(--clr-danger); color: var(--fr-red-ink); }
:root[data-theme="dark"] body .pub-btn--danger { background: transparent; border-color: var(--clr-danger); }
:root body .pub-btn--block { display: flex; width: 100%; }
:root body .pub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
:root body .pub-actions:not(:has(*)) { display: none; }

/* --- Notes --- */
:root body .pub-note {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px;
    border-radius: 14px; background: var(--fr-amber-tint); color: var(--fr-amber-ink);
    font-size: 14px; font-weight: 600; line-height: 1.5;
}
:root body .pub-note i { margin-top: 3px; flex-shrink: 0; }
:root body .pub-note--green { background: var(--fr-green-tint); color: var(--clr-text); font-weight: 500; }
:root body .pub-note--green i { color: var(--clr-primary); }
:root body .pub-note--red { background: var(--fr-red-tint); color: var(--fr-red-ink); }

/* --- Read-only detail rows --- */
:root body .pub-rows { margin: 0; }
:root body .pub-row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 12px 0; border-top: 1px solid var(--clr-border);
}
:root body .pub-rows > .pub-row:first-child { border-top: 0; padding-top: 0; }
:root body .pub-row-label { font-size: 13.5px; font-weight: 600; color: var(--clr-text-muted); flex-shrink: 0; }
:root body .pub-row-value small { font-size: 12.5px; font-weight: 600; color: var(--clr-text-muted); }
:root body .pub-row-value { font-size: 15px; font-weight: 700; color: var(--clr-text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
:root body .pub-row-value .form-control { width: 280px !important; max-width: 100%; text-align: left; }

/* --- Status pills --- */
:root body .pub-pill {
    display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px;
    background: var(--clr-surface-alt); border: 1px solid var(--clr-border);
    font-size: 13px; font-weight: 700; color: var(--clr-text); white-space: nowrap;
}
:root body .pub-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
:root body .pub-pill:empty { display: none; }
:root body .pub-pill--ok   { background: var(--fr-green-tint); border-color: transparent; color: var(--clr-primary); }
:root body .pub-pill--warn { background: var(--fr-amber-tint); border-color: transparent; color: var(--fr-amber-ink); }
:root body .pub-pill--bad  { background: var(--fr-red-tint);   border-color: transparent; color: var(--fr-red-ink); }

/* --- Tables --- */
:root body .pub-table-wrap { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: 14px; -webkit-overflow-scrolling: touch; }
:root body .pub-table-wrap table.table { width: 100% !important; min-width: 760px; margin: 0; border: 0 !important; background: var(--clr-card-bg); }
:root body .pub-table-wrap th {
    padding: 11px 12px !important; white-space: nowrap; border: 0 !important; border-bottom: 1px solid var(--clr-border) !important;
    background: var(--clr-table-head) !important; color: var(--clr-table-head-text) !important;
    font-size: 12.5px; font-weight: 800; text-transform: none; letter-spacing: 0;
}
:root body .pub-table-wrap td {
    padding: 11px 12px !important; vertical-align: middle !important; border: 0 !important;
    border-bottom: 1px solid var(--clr-border) !important; background: transparent !important;
    color: var(--clr-text) !important; font-size: 14px; white-space: nowrap;
}
:root body .pub-table-wrap tr:last-child td { border-bottom: 0 !important; }
:root body .pub-table-wrap td a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; white-space: nowrap;
    border-radius: 999px; background: var(--clr-primary); color: #fff !important; font-weight: 700; text-decoration: none !important;
}
:root body .pub-table-wrap td a:hover { background: var(--clr-primary-dark); }
:root body .pub-table-wrap td a[disabled] { background: var(--clr-surface-alt); color: var(--clr-text-muted) !important; pointer-events: none; }
:root body .pub-scroll-hint { display: none; margin: 0 0 8px; font-size: 12.5px; color: var(--clr-text-muted); }
:root body .pub-count { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--clr-text-muted); }
:root body .pub-count:empty { display: none; }
:root body .pub-progress { display: flex; justify-content: center; padding: 10px 0; }

/* --- Popup (ModalPopupExtender panel) --- */
:root body .pub-modal {
    width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border); border-radius: 22px;
    box-shadow: 0 24px 64px rgba(11,42,27,0.28);
}
:root body .pub-modal-body { padding: 4px 22px 18px; }
:root body .pub-modal-foot { display: flex; justify-content: flex-end; padding: 14px 22px 18px; border-top: 1px solid var(--clr-border); }

/* --- Self-help shortcuts (Contact) --- */
:root body .pub-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
:root body .pub-quick a {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
    color: var(--clr-text) !important; text-decoration: none !important;
}
:root body .pub-quick a:hover { border-color: var(--clr-primary); }
:root body .pub-quick a > i:first-child {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 16px;
}
:root body .pub-quick strong { display: block; font-size: 14.5px; font-weight: 800; }
:root body .pub-quick small { display: block; font-size: 12.5px; color: var(--clr-text-muted); line-height: 1.4; }

/* --- Contact cards --- */
:root body .ct2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 20px; }
:root body .ct2-for { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--clr-text-muted); }
:root body .ct2-for strong { color: var(--clr-text); }
:root body .ct2-block { padding: 14px 0; border-top: 1px solid var(--clr-border); }
:root body .ct2-block h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--clr-text-muted); }
:root body .ct2-block h4 i { color: var(--clr-primary); width: 14px; text-align: center; }
:root body .ct2-block address { margin: 0; font-style: normal; font-size: 15px; line-height: 1.55; color: var(--clr-text); }
:root body .ct2-links { display: flex; flex-wrap: wrap; gap: 8px; }
:root body .ct2-links a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
    background: var(--clr-surface-alt); border: 1px solid var(--clr-border);
    font-size: 14.5px; font-weight: 700; color: var(--clr-text) !important; text-decoration: none !important;
    overflow-wrap: anywhere;
}
:root body .ct2-links a:hover { border-color: var(--clr-primary); }
:root body .ct2-links a i { color: var(--clr-primary); }
:root body .ct2-map { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--clr-primary) !important; }
:root body .ct2-card-foot { padding-top: 16px; border-top: 1px solid var(--clr-border); }

/* --- FAQ --- */
:root body .faq2-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
:root body .faq2-search { position: relative; flex: 1 1 280px; }
:root body .faq2-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--clr-text-muted); }
:root body .faq2-search input {
    width: 100%; min-height: 48px; padding: 0 16px 0 42px; box-sizing: border-box;
    font-family: var(--font-family); font-size: 15px; color: var(--clr-text);
    background: var(--clr-input-bg); border: 1.5px solid var(--clr-input-border); border-radius: 999px;
}
:root body .faq2-search input:focus { outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 4px var(--clr-primary-glow); }
:root body .faq2-toggle {
    min-height: 48px; padding: 0 18px; border-radius: 999px; cursor: pointer;
    background: var(--clr-card-bg); border: 1.5px solid var(--clr-border-strong);
    font-family: var(--font-family); font-size: 14px; font-weight: 700; color: var(--clr-text);
}
:root body .faq2-toggle:hover { border-color: var(--clr-text); }
:root body .faq2-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
:root body .faq2-topics button {
    min-height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
    font-family: var(--font-family); font-size: 13.5px; font-weight: 700; color: var(--clr-text-muted);
}
:root body .faq2-topics button[aria-pressed="true"] { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
:root body .faq2-group { margin: 0 0 26px; }
:root body .faq2-group > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--clr-text); }
:root body .faq2-group > h3 i {
    width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--fr-khaki-tint); color: var(--fr-khaki-ink); font-size: 15px;
}
:root body .faq2-list { display: grid; gap: 10px; }
:root body .faq2-item { background: var(--clr-card-bg); border: 1px solid var(--clr-border); border-radius: 16px; }
:root body .faq2-item[open] { border-color: var(--clr-primary); }
:root body .faq2-item > summary {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none;
    font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--clr-text);
}
:root body .faq2-item > summary::-webkit-details-marker { display: none; }
:root body .faq2-item > summary::after {
    content: '\f107'; font-family: FontAwesome; margin-left: auto; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--clr-surface-alt); color: var(--clr-text-muted); font-size: 16px; transition: transform .2s;
}
:root body .faq2-item[open] > summary::after { transform: rotate(180deg); background: var(--fr-green-tint); color: var(--clr-primary); }
:root body .faq2-item > summary:focus-visible { outline: 3px solid var(--clr-primary-glow); outline-offset: 2px; border-radius: 16px; }
:root body .faq2-answer { padding: 0 18px 18px; font-size: 15px; line-height: 1.65; color: var(--clr-text-muted); }
:root body .faq2-answer p { margin: 0 0 12px; }
:root body .faq2-answer p:last-child, :root body .faq2-answer ol:last-child { margin-bottom: 0; }
:root body .faq2-answer ol { margin: 0 0 12px; padding-left: 20px; }
:root body .faq2-answer strong { color: var(--clr-text); }
:root body .faq2-answer a { color: var(--clr-primary); font-weight: 700; }
:root body .faq2-answer mark { background: var(--fr-amber-tint); color: inherit; padding: 0 2px; border-radius: 3px; }
:root body .faq2-empty { padding: 24px; text-align: center; border: 1px dashed var(--clr-border-strong); border-radius: 16px; color: var(--clr-text-muted); font-size: 15px; }

@media (max-width: 760px) {
    :root body .pub-grid, :root body .ct2-grid, :root body .pub-quick { grid-template-columns: 1fr; }
    :root body .pub-scroll-hint { display: block; }
}
@media (max-width: 600px) {
    :root body .pub-card-head { padding: 16px; }
    :root body .pub-card-body { padding: 18px 16px; }
    :root body .pub-inline { flex-direction: column; }
    :root body .pub-btn { width: 100%; }
    :root body .pub-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    :root body .pub-row-value { text-align: left; }
    :root body .pub-row-value .form-control { width: 100% !important; }
    :root body .pub-row-value:has(.form-control) { align-self: stretch; }
    :root body .faq2-item > summary { padding: 14px; font-size: 15px; }
    :root body .faq2-answer { padding: 0 14px 16px; }
}

/* Payment status: results card only once a search returns rows; Remita credit */
:root body .pub-note:empty { display: none; }
:root body .txn-results:not(:has(table)) { display: none; }
:root body .txn-remita {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 22px; border-top: 1px solid var(--clr-border); background: var(--clr-surface-alt);
    font-size: 13px; font-weight: 600; color: var(--clr-text-muted);
}
:root body .txn-remita i { color: var(--clr-primary); margin-right: 4px; }
:root body .txn-remita img { height: 40px; width: auto; max-width: 100%; padding: 4px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--clr-border); }
@media (max-width: 600px) { :root body .txn-remita { justify-content: center; text-align: center; padding: 12px 16px; } }

/* Certificate replacement: cards inside the UpdatePanel, passport photo box */
:root body .cr-stack { display: flex; flex-direction: column; gap: 20px; }
:root body .cr-stack > div:empty { display: none; }
:root body .cr-extra { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--clr-border); }
:root body .cr-extra .pub-field { margin-bottom: 0; }
:root body .pub-field .cr-file { margin-top: 8px; }
:root body .cr-passport { display: flex; gap: 16px; align-items: stretch; }
:root body .cr-passport-box {
    width: 120px; height: 144px; flex-shrink: 0; overflow: hidden; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--clr-surface-alt); border: 1.5px dashed var(--clr-border-strong);
}
:root body .cr-passport-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--clr-text-muted); }
:root body .cr-passport-empty i { font-size: 26px; color: var(--clr-text-faint); }
/* the photo shows in the box on the left, so the upload control's own preview is hidden */
:root body .cr-passport .imgctl { flex: 1; min-width: 0; justify-content: center; border-radius: 14px; }
:root body .cr-passport .imgctl-preview { display: none; }
:root body .cr-actions { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--clr-border); }
@media (max-width: 600px) {
    :root body .cr-passport { flex-direction: column; align-items: center; }
    :root body .cr-passport .imgctl { width: 100%; }
}
:root body .pub-page { padding-top: 28px; }
@media (max-width: 600px) { :root body .pub-page { padding-top: 18px; } }

/* Support helplines (RegSupport): numbers grouped by network */
:root body .rs-net { padding: 16px 0; border-top: 1px solid var(--clr-border); }
:root body .rs-net:last-child { padding-bottom: 0; }
:root body .rs-net h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--clr-text); }
:root body .rs-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
:root body .rs-dot--mtn     { background: #FFCB05; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
:root body .rs-dot--airtel  { background: #E40000; }
:root body .rs-dot--glo     { background: #3EAE36; }
:root body .rs-dot--9mobile { background: #006F3E; }
:root body .ct2-links a.rs-text { background: var(--fr-amber-tint); border-color: transparent; }
:root body .ct2-links a.rs-text i { color: var(--fr-amber-ink); }
:root body .ct2-links a.rs-text small { margin-left: 2px; font-size: 11.5px; font-weight: 800; color: var(--fr-amber-ink); text-transform: uppercase; letter-spacing: .03em; }
:root body .fr-tips a { color: var(--clr-primary); }

/* ==========================================================================
   DOCUMENT VIEWER (corpsppaletter, PrintHandle)
   The document sits in a frame that js/doc-viewer.js sizes to its content;
   print controls live in the card header, outside the frame.
   ========================================================================== */
:root body .docv-steps {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    margin: 0 0 18px; padding: 0; list-style: none; counter-reset: docvstep;
}
:root body .docv-steps li {
    position: relative; padding: 14px 16px 14px 52px; border-radius: 16px; counter-increment: docvstep;
    background: var(--clr-card-bg); border: 1px solid var(--clr-border);
    font-size: 13.5px; line-height: 1.45; color: var(--clr-text-muted);
}
:root body .docv-steps li::before {
    content: counter(docvstep); position: absolute; left: 16px; top: 14px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--clr-primary); color: #fff; font-size: 13px; font-weight: 800;
}
:root body .docv-steps strong { display: block; color: var(--clr-text); font-size: 14px; }

:root body :is(.ppa-card, .printh-card) { overflow: hidden; }
:root body :is(.ppa-card-header, .printh-card-header) { display: flex; align-items: center; flex-wrap: wrap; }
:root body .printh-card-header .header-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
:root body .docv-title { flex: 1 1 200px; min-width: 0; }
:root body .docv-title h3 { margin: 0 0 2px; }
:root body .docv-title p { margin: 0; }
:root body .docv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
:root body .docv-actions[data-kind="message"] { display: none; }
:root body .docv-actions[data-kind="form"] .docv-print { display: none; }
:root body :is(.docv-print, .docv-open) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    font-family: var(--font-family); font-size: 14.5px; font-weight: 700; text-decoration: none !important;
}
:root body .docv-print { background: var(--clr-primary); border: 1.5px solid var(--clr-primary); color: #fff; }
:root body .docv-print:hover:not(:disabled) { background: var(--clr-primary-dark); border-color: var(--clr-primary-dark); }
:root[data-theme="dark"] body .docv-print { background: var(--grad-primary); border-color: var(--grad-primary); }
:root body .docv-print:disabled { opacity: .55; cursor: progress; }
:root body .docv-open { background: var(--clr-surface); border: 1.5px solid var(--clr-border-strong); color: var(--clr-text) !important; }
:root[data-theme="dark"] body .docv-open { background: transparent; }
:root body .docv-open:hover { border-color: var(--clr-text); }

:root body :is(.ppa-card-body, .printh-card-body) { padding: 0; }
:root body .ppa-payment-notice { display: flex; align-items: flex-start; gap: 14px; margin: 20px 20px 0; padding: 16px 18px; }
:root body .ppa-payment-notice .notice-icon {
    width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
:root body .ppa-payment-notice .notice-content { flex: 1; }
:root body .ppa-payment-notice .notice-text { margin-bottom: 10px; }

:root body .docv-viewer { position: relative; padding: 16px 20px 6px; background: var(--clr-surface-alt); }
:root body .docv-viewer iframe {
    display: block; width: 100%; height: 640px; border: 0; background: transparent;
    color-scheme: light;   /* matches the letter, so the frame stays see-through in dark mode */
    transition: height .15s;
}
:root body .docv-viewer[data-kind="pdf"] iframe { height: min(82vh, 1100px); border: 1px solid var(--clr-border); border-radius: 12px; background: #fff; }
:root body .docv-loading {
    position: absolute; inset: 40px 0 auto; text-align: center;
    font-size: 14px; font-weight: 600; color: var(--clr-text-muted);
}
:root body .docv-help {
    display: flex; gap: 10px; align-items: flex-start; padding: 14px 20px;
    border-top: 1px solid var(--clr-border); font-size: 13.5px; line-height: 1.5; color: var(--clr-text-muted);
}
:root body .docv-help i { color: var(--fr-khaki-ink); margin-top: 3px; }
:root body .docv-help strong { color: var(--clr-text); }

@media (max-width: 860px) {
    :root body .docv-steps { grid-template-columns: 1fr; gap: 8px; }
    :root body .docv-steps li { padding: 12px 14px 12px 50px; }
    :root body .docv-steps li::before { top: 12px; }
}
@media (max-width: 600px) {
    :root body .docv-actions { width: 100%; }
    :root body .docv-print { flex: 1; }
    :root body .docv-viewer { padding: 10px 8px 4px; }
    :root body .ppa-payment-notice { margin: 14px 14px 0; flex-direction: column; }
    :root body .docv-help { padding: 12px 16px; }
}

/* ==========================================================================
   GRADUATION LIST (CheckInstitutionCoursesPCMs)
   Public page on the PUBLIC HELP PAGES pieces; the list is a DataTables table.
   ========================================================================== */
:root body .gl-filters, :root body .gl-results { margin-bottom: 20px; }
:root body .gl-filters .pub-btn { margin-top: 4px; }
:root body .gl-table { border: 0; border-radius: 0; overflow: visible; }
:root body .gl-table table.table { min-width: 0; border: 1px solid var(--clr-border) !important; border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
:root body .gl-table thead th { position: relative; cursor: pointer; }
:root body .gl-table thead th:after { opacity: .45; }
:root body .gl-table .dataTables_wrapper .row { margin: 0; }
:root body .gl-table .dataTables_wrapper .row > [class*="col-"] { padding: 0; }
:root body .gl-table .dataTables_length,
:root body .gl-table .dataTables_filter { margin: 0 0 12px; font-size: 14px; color: var(--clr-text-muted); }
:root body .gl-table .dataTables_filter { text-align: right; }
:root body .gl-table .dataTables_length select,
:root body .gl-table .dataTables_filter input {
    height: 42px; margin: 0 0 0 6px; padding: 0 14px;
    font-family: var(--font-family); font-size: 14.5px; color: var(--clr-text);
    background: var(--clr-input-bg); border: 1.5px solid var(--clr-input-border); border-radius: 999px; box-shadow: none;
}
:root body .gl-table .dataTables_length select { width: auto; min-width: 84px; padding: 0 30px 0 14px; line-height: normal; display: inline-block; }
:root body .gl-table .dataTables_filter input { width: 240px; margin: 0; }
/* dataTables.bootstrap paints rows white, which hid the text in dark mode */
:root body .gl-table table.dataTable tbody tr { background: transparent !important; }
:root body .gl-table table.dataTable { width: 100% !important; margin: 0 !important; box-sizing: border-box; }
:root body .gl-table .dataTables_filter input:focus { outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 4px var(--clr-primary-glow); }
:root body .gl-table .dataTables_info { padding-top: 14px; font-size: 13.5px; color: var(--clr-text-muted); }
:root body .gl-table .dataTables_paginate { padding-top: 10px; }
:root body .gl-table .pagination { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
:root body .gl-table .pagination > li > a {
    min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--clr-border) !important; border-radius: 999px !important;
    background: var(--clr-card-bg); color: var(--clr-text); font-weight: 700; font-size: 13.5px;
}
:root body .gl-table .pagination > .active > a { background: var(--clr-primary); border-color: var(--clr-primary) !important; color: #fff; }
:root body .gl-table .pagination > .disabled > a { opacity: .45; }
@media (max-width: 760px) {
    :root body .gl-table .dataTables_filter { text-align: left; }
    :root body .gl-table .dataTables_filter label, :root body .gl-table .dataTables_filter input { width: 100%; }
    :root body .gl-table .dataTables_length { display: none; }
    :root body .gl-table .pagination { justify-content: center; }
    :root body .gl-table .dataTables_info { text-align: center; }
    /* the course is in the card title, and # adds little on a phone */
    :root body .gl-table table th:nth-child(1), :root body .gl-table table td:nth-child(1),
    :root body .gl-table table th:nth-child(5), :root body .gl-table table td:nth-child(5) { display: none; }
    :root body .gl-table td { white-space: normal; }
    :root body .gl-results .pub-card-body { padding: 14px 10px; }
    :root body .gl-table :is(th, td) { padding: 10px 6px !important; font-size: 13.5px; }
    :root body .gl-table .pub-pill { padding: 0 9px; font-size: 12px; min-height: 24px; }
    :root body .gl-table .pub-pill::before { display: none; }
}

/* ==========================================================================
   SENATE LIST CHECK (VerifySenateLists): results under the search form
   ========================================================================== */
:root body .vsl-results { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--clr-border); }
:root body .vsl-results-title { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--clr-text); }
:root body .vsl-results .pub-table-wrap table.table { min-width: 640px; }

/* ==========================================================================
   REGISTRATION REQUIREMENTS (pre-Registration)
   ========================================================================== */
:root body .prq-scanner {
    display: flex; gap: 16px; align-items: center; margin: 0 0 16px; padding: 14px;
    border-radius: 16px; background: var(--clr-surface-alt); border: 1px solid var(--clr-border);
}
:root body .prq-scanner img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; border-radius: 12px; background: #fff; padding: 4px; }
:root body .prq-scanner strong { display: block; font-size: 15px; font-weight: 800; color: var(--clr-text); }
:root body .prq-scanner span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--clr-text-muted); }
:root body .prq-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
:root body .prq-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--clr-text-muted); }
:root body .prq-checks li > i {
    width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 14px;
}
:root body .prq-checks--ok li > i { width: 24px; height: 24px; border-radius: 50%; font-size: 12px; margin-top: 1px; }
:root body .prq-checks strong { color: var(--clr-text); }
:root body .prq-checks a, :root body .fr-panel p a { color: var(--clr-primary); font-weight: 700; }
:root body .prq-actions { margin: 18px 0; }
:root body .prq-note { margin: 0; }
:root body .prq-photo { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 20px; align-items: start; }
:root body .prq-sample { display: block; text-decoration: none !important; text-align: center; }
:root body .prq-sample img { display: block; width: 132px; height: 160px; object-fit: cover; border-radius: 14px; border: 1px solid var(--clr-border); background: #fff; }
:root body .prq-sample span { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--clr-primary); }
:root body .prq-legacy > summary { font-size: 14.5px; color: var(--clr-text-muted); }
:root body .prq-legacy ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; }
@media (max-width: 600px) {
    :root body .prq-photo { grid-template-columns: 1fr; }
    :root body .prq-sample { justify-self: center; }
}

/* ==========================================================================
   ACCREDITED COURSES (CheckInstitutionCourses): a filterable two-column list
   ========================================================================== */
:root body .cic-search { display: block; margin: 0 0 14px; }
:root body table.cic-list, :root body table.cic-list tbody { display: block; width: 100% !important; border: 0; }
:root body table.cic-list tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:root body table.cic-list tr { display: block; }
:root body table.cic-list tr[hidden] { display: none; }
:root body table.cic-list td {
    display: flex; align-items: center; gap: 10px; height: 100%; padding: 11px 14px; box-sizing: border-box;
    border-radius: 12px; background: var(--clr-surface-alt); border: 1px solid var(--clr-border);
    font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--clr-text);
}
:root body table.cic-list td::before { content: '\f19d'; font-family: FontAwesome; font-weight: normal; color: var(--clr-primary); }
@media (max-width: 600px) { :root body table.cic-list tbody { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOREIGN-TRAINED REQUIREMENTS (ForeignReq)
   ========================================================================== */
:root body .freq-key { margin-bottom: 22px; }
:root body .freq-sec { scroll-margin-top: 90px; }
:root body .freq-sec-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--clr-border); }
:root body .freq-sec-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--clr-text); }
:root body .freq-num {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fr-green-tint); color: var(--clr-primary); font-size: 15px; font-weight: 800;
}
:root body .freq-sec--important .freq-sec-head { background: var(--fr-amber-tint); }
:root body .freq-sec--important .freq-num { background: var(--fr-amber-ink); color: #fff; }
:root body .freq :is(.intro-text, .standalone-text) { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--clr-text-muted); }
:root body .freq .standalone-text { margin: 0; }
:root body .freq :is(.intro-text, .standalone-text) strong { color: var(--clr-text); }
:root body .freq-list { margin: 0; padding: 0; list-style: none; counter-reset: freq; display: grid; gap: 0; }
:root body .freq-list > li {
    position: relative; padding: 11px 0 11px 40px; counter-increment: freq;
    border-top: 1px solid var(--clr-border); font-size: 14.5px; line-height: 1.55; color: var(--clr-text);
}
:root body .freq-list > li:first-child { border-top: 0; }
:root body .freq-list > li::before {
    content: counter(freq, lower-roman); position: absolute; left: 0; top: 11px;
    min-width: 28px; height: 22px; padding: 0 6px; border-radius: 999px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--clr-surface-alt); border: 1px solid var(--clr-border);
    font-size: 11.5px; font-weight: 800; color: var(--clr-text-muted);
}
:root body .freq-note {
    display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 9px 12px;
    border-radius: 12px; background: var(--fr-amber-tint); color: var(--fr-amber-ink); font-size: 13.5px; font-weight: 600;
}
:root body .freq-note i { margin-top: 3px; }
:root body .freq-index { margin: 0; padding: 0; list-style: none; counter-reset: fidx; display: grid; gap: 2px; }
:root body .freq-index li { counter-increment: fidx; }
:root body .freq-index a {
    display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px;
    font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--clr-text) !important; text-decoration: none !important;
}
:root body .freq-index a::before { content: counter(fidx); min-width: 18px; font-weight: 800; color: var(--clr-primary); }
:root body .freq-index a:hover { background: var(--fr-green-tint); }
@media (min-width: 961px) {
    :root body .freq-aside { position: sticky; top: 90px; }
}
@media (max-width: 960px) {
    /* the index is most useful before the sections on a phone */
    :root body .freq .fr-split { display: flex; flex-direction: column-reverse; }
    :root body .freq-aside .fr-panel:not(:first-child) { display: none; }
}
@media (max-width: 600px) {
    :root body .freq-sec-head { padding: 16px; }
    :root body .freq-list > li { padding-left: 36px; }
}
:root body .pub-card .fr-howto > li::before { background: var(--clr-primary); }