/* =========================
   Brand Variables
   ========================= */
:root {
    --black-900: #020617;
    --black-800: #020617;
    --emerald-800: #065f46;
    --emerald-700: #047857;
    --emerald-600: #059669;
    --text-primary: #111827;
    --text-muted: #6b7280;
    --bg-app: #f8fafc;
    --bg-card: #ffffff;
}

/* =========================
   Base
   ========================= */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-app);
    color: var(--text-primary);
}

a {
    color: var(--emerald-700);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* =========================
   App Layout
   ========================= */
.app-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* =========================
   Sidebar (FIXED)
   ========================= */
.sidebar {
    width: 260px;
    background: linear-gradient( 180deg, var(--black-900) 0%, var(--black-800) 30%, var(--emerald-800) 65%, var(--emerald-600) 100% );
    color: #ffffff;
    display: flex;
    justify-content: flex-start;
    padding-top: 40px;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.2);
}

/* =========================
   Brand Block (CENTERED)
   ========================= */
.brand {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /*  center horizontally */
    text-align: center;
    gap: 14px;
    padding: 0 16px;
}

/* Logo */
.brand-logo {
    width: 90px; /* controlled size */
    height: auto;
    display: block;
}

/* App Name */
.brand-text {
    font-size: 17px; /* professional size */
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.2;
    color: #ffffff;
}

/* =========================
   Main Content
   ========================= */
.content {
    flex: 1;
    padding: 48px;
    background: var(--bg-card);
}

/* =========================
   Buttons
   ========================= */
.btn-primary {
    background-color: var(--emerald-700);
    border-color: var(--emerald-700);
    color: #ffffff;
}

    .btn-primary:hover {
        background-color: var(--emerald-600);
        border-color: var(--emerald-600);
    }

/* =========================
   Forms
   ========================= */
.form-control:focus {
    border-color: var(--emerald-600);
    box-shadow: 0 0 0 0.15rem rgba(5, 150, 105, 0.25);
}

.validation-message {
    color: #dc2626;
}

/* =========================
   Blazor Error UI
   ========================= */
#blazor-error-ui {
    background: #fef2f2;
    color: #7f1d1d;
    bottom: 0;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.15);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 0.5rem;
    }


/* =========================
   Secure Welcome Credentials
   ========================= */
.credential-page-shell {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 185px);
    padding: 30px 16px 56px;
}

.credential-page-card {
    margin-left: auto;
    margin-right: auto;
    width: min(680px, 100%);
    margin-top: 18px;
    padding: 28px;
    border: 1px solid #dce8e3;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(20, 30, 25, 0.07);
}

.credential-intro,
.credential-final-note {
    color: var(--text-muted);
    line-height: 1.65;
}

.credential-passphrase-input {
    max-width: 420px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 650;
}

.credential-submit-button {
    min-width: 220px;
    min-height: 46px;
    border-radius: 999px;
    font-weight: 700;
}

.credential-security-note {
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px solid #d8ebe3;
    border-radius: 12px;
    background: #f4faf7;
    color: #456158;
    font-size: 0.9rem;
}

.credential-details {
    display: grid;
    gap: 12px;
    margin: 20px 0;
}

.credential-details > div {
    display: grid;
    grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
    gap: 16px;
    padding: 13px 14px;
    border: 1px solid #e3ebe7;
    border-radius: 12px;
    background: #f8fbfa;
}

.credential-details span {
    color: var(--text-muted);
}

.credential-value {
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 640px) {
    .credential-page-card {
        padding: 20px;
    }

    .credential-details > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .credential-submit-button {
        width: 100%;
    }
}

/* =========================
   Loading Indicator
   ========================= */
.loading-progress {
    position: absolute;
    width: 7rem;
    height: 7rem;
    inset: 20vh 0 auto 0;
    margin: auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e5e7eb;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--emerald-700);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }
.success-message {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    background-color: #e9fbe9;
    border: 2px solid #2e7d32;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

    .success-message img {
        width: 260px;
        height: 260px;
        object-fit: contain;
        flex-shrink: 0;
        display: block;
    }

    .success-message h4 {
        margin: 0 0 4px 0;
        color: #2e7d32;
    }

    .success-message p {
        margin: 0;
        color: #2e7d32;
    }

/* ========================= */
/* PRINT / PDF STYLES       */
/* ========================= */

@media print {

    body {
        background: #fff !important;
    }

    .print-document {
        max-width: 800px;
        margin: 0 auto;
        font-size: 12px;
        color: #000;
    }

    .card {
        page-break-inside: avoid;
        break-inside: avoid;
        margin-bottom: 16px;
    }

    h5, h6 {
        page-break-after: avoid;
        break-after: avoid;
    }

    hr {
        page-break-after: avoid;
    }

    .signature-block,
    .terms-block,
    .pg-block {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* ============================= */
/* Check Payment Disclaimer Modal */
/* ============================= */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-box {
    background: #ffffff;
    padding: 25px;
    width: 420px;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0,0,0,0.25);
}

    .modal-box h3 {
        margin-top: 0;
    }

.modal-buttons {
    margin-top: 20px;
    text-align: right;
}

    .modal-buttons button {
        margin-left: 10px;
    }

/* =========================
   Mobile Layout Adjustment
   ========================= */

@media (max-width: 768px) {

    .sidebar {
        display: none !important;
    }

    .content {
        padding: 24px !important;
        width: 100% !important;
    }

    .app-shell {
        flex-direction: column;
    }
}




/* =========================
   Saved document uploads
   ========================= */
.saved-upload-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

.saved-upload-file {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.saved-upload-check {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: #047857;
    font-weight: 700;
}

.saved-upload-label {
    color: #047857;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

.saved-upload-name {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}


/* =========================
   Signing experience
   ========================= */
.legal-scroll-box {
    height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 8px 8px;
    padding: 16px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    scroll-behavior: smooth;
}

.agreement-preview-heading {
    margin: 1.25rem 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.agreement-section-header {
    background: #eef5f3;
    border: 1px solid #cadbd6;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0b6658;
}

.agreement-legal-text {
    line-height: 1.55;
    color: #252a2e;
}

.agreement-scroll-content {
    min-height: calc(100% + 72px);
    display: flex;
    flex-direction: column;
}

.agreement-legal-text p {
    margin: 0 0 0.75rem;
}

.agreement-end-marker {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 1rem;
    color: #374151;
}

.agreement-scroll-finish {
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 600;
}

.agreement-scroll-status {
    padding: 0.55rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 0.8rem;
}

.agreement-scroll-complete {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
    font-weight: 600;
}

.agreement-acceptance {
    width: 100%;
    margin-top: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    text-align: left;
    font: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.agreement-acceptance-locked {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: pointer;
}

.agreement-acceptance-ready {
    background: #ffffff;
    color: #111827;
    cursor: pointer;
}

.agreement-acceptance-ready:hover {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.08);
}

.agreement-acceptance-selected {
    border-color: #059669;
    background: #ecfdf5;
}

.agreement-checkbox {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #9ca3af;
    border-radius: 4px;
    background: #ffffff;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

.agreement-acceptance-selected .agreement-checkbox {
    border-color: #059669;
    background: #059669;
}

.agreement-acceptance-text {
    line-height: 1.45;
    font-size: 0.9rem;
}

.agreement-review-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #ffffff;
}

.agreement-review-accepted {
    border-color: #86efac;
    background: #f0fdf4;
}

.agreement-review-copy {
    min-width: 0;
}

.agreement-review-title {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
}

.agreement-review-description {
    margin-top: 3px;
    color: #6b7280;
    font-size: 0.8rem;
}

.agreement-review-button {
    flex: 0 0 auto;
    min-width: 250px;
}

.agreement-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.72);
}

.agreement-modal-dialog {
    width: min(820px, 96vw);
    height: min(760px, 92vh);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.agreement-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.agreement-modal-header h5 {
    margin: 0;
    color: #0b6658;
    font-size: 1.08rem;
    font-weight: 700;
}

.agreement-modal-header p {
    margin: 5px 0 0;
    color: #6b7280;
    font-size: 0.84rem;
}

.agreement-modal-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.agreement-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    color: #252a2e;
    line-height: 1.58;
    scrollbar-gutter: stable;
}

.agreement-modal-scroll p {
    margin: 0 0 0.9rem;
}

.agreement-modal-end {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid #d1d5db;
}

.agreement-modal-end-label {
    margin-bottom: 0.8rem;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.agreement-modal-consent {
    padding: 12px 14px;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.48;
}

.agreement-modal-accept {
    width: 100%;
    margin-top: 14px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-weight: 700;
}

.agreement-modal-already-accepted {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
}

.agreement-modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: 12px 18px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.signature-card {
    max-width: 860px;
    padding: 1.15rem;
    border: 1px solid #c7d2cf;
    border-radius: 8px;
    background: #fcfdfd;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.signature-card-heading {
    margin-bottom: 1rem;
}

.signature-card-heading h6,
.signature-card > h6 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0b6658;
}

.signature-card-instruction {
    margin-top: 0.3rem;
    color: #6b7280;
    font-size: 0.8rem;
}

.signature-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
        "name title"
        "signature date";
    column-gap: 28px;
    row-gap: 20px;
    align-items: start;
    width: 100%;
}

.signature-name-field {
    grid-area: name;
}

.signature-title-field {
    grid-area: title;
}

.signature-draw-field {
    grid-area: signature;
}

.signature-date-panel {
    grid-area: date;
}

.signature-top-field {
    min-width: 0;
}

.signature-top-value {
    min-height: 38px;
    display: flex;
    align-items: flex-end;
    padding: 0 3px 6px;
    font-weight: 600;
    color: #111827;
    overflow-wrap: anywhere;
}

.signature-field-line {
    width: 100%;
    border-bottom: 1px solid #374151;
}

.signature-field-label {
    padding-top: 4px;
    font-size: 0.76rem;
    color: #6b7280;
}

.signature-draw-field,
.signature-date-panel {
    min-width: 0;
}

.signature-box-heading,
.signature-date-heading {
    height: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    color: #374151;
    font-size: 0.78rem;
    font-weight: 700;
}

.signature-pad-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.signature-inline-desktop {
    position: relative;
    width: 100%;
}

.signature-mobile-launch {
    display: none;
}


.signature-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    height: auto;
    min-width: 0;
    border: 2px solid #374151;
    border-radius: 8px;
    background: #ffffff;
    touch-action: none;
    cursor: crosshair;
    box-sizing: border-box;
}

.signature-canvas:focus {
    outline: 3px solid rgba(5, 150, 105, 0.2);
    outline-offset: 2px;
}

.signature-canvas-disabled {
    cursor: not-allowed;
    border-color: #9ca3af;
    background: #f3f4f6;
}

.signature-disabled-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: rgba(243, 244, 246, 0.94);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    font-size: 0.78rem;
    color: #6b7280;
    cursor: pointer;
}

.signature-lock-title {
    color: #374151;
    font-size: 0.84rem;
    font-weight: 700;
}

.signature-accepted-overlay {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(236, 253, 245, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #047857;
    font-size: 0.9rem;
    font-weight: 700;
    pointer-events: none;
}

.signature-preview-overlay {
    flex-direction: column;
    gap: 3px;
    padding: 6px 10px;
}

.signature-preview-overlay img {
    width: 92%;
    max-height: 70%;
    object-fit: contain;
}

.signature-preview-overlay span {
    font-size: 0.74rem;
}

.signature-box-caption {
    padding-left: 2px;
}

.signature-date-box {
    width: 100%;
    aspect-ratio: 3 / 1;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-bottom: 1px solid #374151;
    border-radius: 8px 8px 0 0;
    background: #ffffff;
    display: flex;
    align-items: flex-end;
    padding: 0 12px 10px;
    color: #111827;
    font-weight: 600;
}

.signature-actions {
    align-items: center;
}

.signature-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.72);
}

.signature-modal-dialog {
    width: min(760px, 96vw);
    max-height: 94vh;
    overflow-y: auto;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
    padding: 18px;
}

.signature-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.signature-modal-header h5 {
    margin: 0;
    color: #0b6658;
    font-size: 1.05rem;
    font-weight: 700;
}

.signature-modal-header p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 0.86rem;
}

.signature-modal-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.signature-modal-existing-note {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.8rem;
}

.signature-modal-pad {
    width: 100%;
}

.signature-modal-pad .signature-canvas {
    width: 100%;
    max-width: none;
    border-width: 2px;
    border-color: #111827;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.signature-modal-actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 10px;
}

.signature-modal-actions .btn {
    width: 100%;
}

@media (max-width: 767.98px) {
    .saved-upload-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .saved-upload-box .btn {
        width: 100%;
    }

    .legal-scroll-box {
        height: 210px;
        padding: 14px;
    }

    .signature-card {
        padding: 0.8rem;
    }

    .signature-card-instruction {
        font-size: 0.74rem;
    }

    .signature-form-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "name title"
            "signature date";
        column-gap: 10px;
        row-gap: 12px;
    }

    .signature-top-value {
        min-height: 32px;
        padding: 0 2px 5px;
        font-size: 0.76rem;
        line-height: 1.15;
    }

    .signature-field-label {
        font-size: 0.66rem;
    }

    .signature-box-heading,
    .signature-date-heading {
        height: 20px;
        margin-bottom: 4px;
        font-size: 0.67rem;
    }

    .signature-inline-desktop {
        display: none;
    }

    .signature-mobile-launch {
        width: 100%;
        aspect-ratio: 3 / 1;
        box-sizing: border-box;
        border: 2px solid #374151;
        border-radius: 8px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 5px;
        color: #374151;
        font: inherit;
        font-size: 0.67rem;
        font-weight: 700;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
    }

    .signature-mobile-launch:hover,
    .signature-mobile-launch:focus {
        border-color: #059669;
        outline: 2px solid rgba(5, 150, 105, 0.18);
        outline-offset: 1px;
    }

    .signature-mobile-icon {
        font-size: 1rem;
        line-height: 1;
    }

    .signature-mobile-signed {
        border-color: #059669;
        background: #ecfdf5;
    }

    .signature-mobile-preview {
        width: 92%;
        max-height: 63%;
        object-fit: contain;
    }

    .signature-mobile-status {
        color: #047857;
        font-size: 0.59rem;
        line-height: 1.05;
    }

    .signature-date-box {
        aspect-ratio: 3 / 1;
        padding: 0 6px 6px;
        font-size: 0.72rem;
    }

    .signature-desktop-actions {
        display: none !important;
    }

    .signature-modal-backdrop {
        padding: 10px;
        align-items: center;
    }

    .signature-modal-dialog {
        width: 100%;
        max-height: 96vh;
        padding: 14px;
        border-radius: 10px;
    }

    .signature-modal-header {
        margin-bottom: 10px;
    }

    .signature-modal-header h5 {
        font-size: 0.98rem;
    }

    .signature-modal-header p {
        font-size: 0.78rem;
    }

    .signature-modal-pad .signature-canvas {
        aspect-ratio: 3 / 1;
        width: 100%;
    }

    .signature-modal-actions {
        grid-template-columns: 0.8fr 0.8fr 1.4fr;
        gap: 8px;
    }

    .signature-modal-actions .btn {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 0.78rem;
    }

    .agreement-review-card {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .agreement-review-button {
        width: 100%;
        min-width: 0;
        font-size: 0.78rem;
    }

    .agreement-modal-backdrop {
        padding: 8px;
    }

    .agreement-modal-dialog {
        width: 100%;
        height: 94vh;
        border-radius: 10px;
    }

    .agreement-modal-header {
        padding: 14px 14px 11px;
    }

    .agreement-modal-header h5 {
        font-size: 0.98rem;
    }

    .agreement-modal-header p {
        font-size: 0.76rem;
    }

    .agreement-modal-scroll {
        padding: 15px;
        font-size: 0.88rem;
    }

    .agreement-modal-footer {
        padding: 10px 14px;
    }

    .agreement-modal-footer .btn {
        width: 100%;
    }
}


/* =========================
   Draft creation feedback
   ========================= */
.draft-create-panel {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    padding: 14px 16px;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    background: #ecfdf5;
    color: #065f46;
}

.draft-create-panel .spinner-border {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    border-width: .22em;
}

/* =========================
   Device dark-mode sync
   ========================= */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --text-primary: #e5e7eb;
        --text-muted: #b3c3b5;
        --bg-app: #080908;
        --bg-card: #1e211e;
        --emerald-800: #064e3b;
        --emerald-700: #059669;
        --emerald-600: #10b981;
    }

    html,
    body,
    .content {
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .card,
    .modal-box,
    .agreement-modal-dialog,
    .agreement-review-card,
    .legal-scroll-box,
    .signature-card,
    .bg-white {
        background-color: #1e211e !important;
        color: #e5e7eb !important;
        border-color: #404b42 !important;
    }

    .border,
    .border-top,
    .border-bottom,
    hr {
        border-color: #404b42 !important;
    }

    .form-control,
    .form-select {
        background-color: #242925;
        color: #f3f4f6;
        border-color: #526253;
    }

    .form-control:focus,
    .form-select:focus {
        background-color: #242925;
        color: #ffffff;
        border-color: #10b981;
        box-shadow: 0 0 0 0.15rem rgba(16, 185, 129, 0.22);
    }

    .form-control::placeholder {
        color: #a2b7a8;
        opacity: 1;
    }

    .form-control:disabled,
    .form-select:disabled {
        background-color: #2c322d;
        color: #b3c3b5;
        opacity: 1;
    }

    .form-check-input {
        background-color: #242925;
        border-color: #738878;
    }

    .form-check-input:checked {
        background-color: #059669;
        border-color: #059669;
    }

    .text-muted,
    .form-text {
        color: #b3c3b5 !important;
    }

    .saved-upload-box,
    .agreement-modal-header,
    .agreement-scroll-finish,
    .agreement-scroll-status,
    .agreement-acceptance-locked {
        background: #242925 !important;
        color: #d1d5db !important;
        border-color: #404b42 !important;
    }

    .saved-upload-name,
    .agreement-review-title,
    .agreement-legal-text,
    .agreement-acceptance-ready,
    .agreement-modal-scroll,
    .agreement-top-value {
        color: #e5e7eb !important;
    }

    .agreement-section-header {
        background: #0f2f2a;
        border-color: #1f4d43;
        color: #6ee7b7;
    }

    .agreement-acceptance-ready {
        background: #1e211e;
        border-color: #526253;
    }

    .agreement-acceptance-selected,
    .agreement-review-accepted,
    .agreement-scroll-complete {
        background: #052e24 !important;
        border-color: #047857 !important;
        color: #a7f3d0 !important;
    }

    .alert-secondary {
        background-color: #2c322d;
        border-color: #404b42;
        color: #e5e7eb;
    }

    .alert-info {
        background-color: #203b30;
        border-color: #3c7051;
        color: #c8f6d7;
    }

    .alert-warning {
        background-color: #3b2f0a;
        border-color: #854d0e;
        color: #fef3c7;
    }

    .alert-danger {
        background-color: #3f1519;
        border-color: #7f1d1d;
        color: #fecaca;
    }

    .alert-success,
    .success-message {
        background-color: #052e24 !important;
        border-color: #047857 !important;
        color: #a7f3d0 !important;
    }

    .success-message h4,
    .success-message p {
        color: #a7f3d0;
    }

    .modal-backdrop,
    .agreement-modal-backdrop {
        background: rgba(0, 0, 0, .76);
    }

    .agreement-modal-header h5 {
        color: #6ee7b7;
    }

    .agreement-modal-header p,
    .agreement-review-description {
        color: #b3c3b5;
    }

    .agreement-modal-close {
        background: #404b42;
        color: #f3f4f6;
    }

    .list-group-item {
        background-color: #242925;
        color: #e5e7eb;
        border-color: #404b42;
    }

    .draft-create-panel {
        background: #052e24;
        border-color: #047857;
        color: #a7f3d0;
    }

    #blazor-error-ui {
        background: #3f1519;
        color: #fecaca;
        box-shadow: 0 -1px 6px rgba(0, 0, 0, .5);
    }

    .agreement-modal-footer,
    .signature-modal-dialog {
        background: #1e211e;
        color: #e5e7eb;
        border-color: #404b42;
    }

    .agreement-modal-consent,
    .agreement-modal-already-accepted,
    .signature-accepted-overlay,
    .signature-mobile-signed {
        background: #052e24 !important;
        color: #a7f3d0 !important;
        border-color: #047857 !important;
    }

    .agreement-modal-end,
    .agreement-modal-footer {
        border-color: #404b42;
    }

    .agreement-modal-end-label,
    .signature-top-value,
    .signature-box-heading,
    .signature-date-heading,
    .signature-lock-title {
        color: #e5e7eb;
    }

    .signature-card-heading h6,
    .signature-card > h6,
    .signature-modal-header h5 {
        color: #6ee7b7;
    }

    .signature-card-instruction,
    .signature-field-label,
    .signature-modal-header p {
        color: #b3c3b5;
    }

    .signature-field-line {
        border-color: #a2b7a8;
    }

    .signature-date-box,
    .signature-mobile-launch {
        background: #242925;
        color: #e5e7eb;
        border-color: #738878;
    }

    .signature-disabled-overlay {
        background: rgba(31, 41, 55, .96);
        color: #c5dac9;
    }

    .signature-modal-close {
        background: #404b42;
        color: #f3f4f6;
    }

    .signature-modal-existing-note {
        background: #2a3d30;
        color: #d5f4df;
    }

    /* Keep the actual signing canvas white so captured signatures retain
       predictable contrast in dark mode and in the generated PDF. */
    .signature-canvas {
        background: #ffffff;
    }

    .signature-canvas-disabled {
        background: #e5e7eb;
    }
}



.application-nav-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 200px));
    gap: 16px;
    align-items: stretch;
    justify-content: start;
}

.application-nav-actions > .btn {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    text-align: center;
}

@media (max-width: 520px) {
    .application-nav-actions {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

.signed-success-panel {
    background-color: #e9fbe9;
}

@media (prefers-color-scheme: dark) {
    .signed-success-panel {
        background-color: #052e24 !important;
        color: #a7f3d0 !important;
    }
}


/* Focused, full-page layout for the one-time welcome credential screen. */
.welcome-access-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f7f9f8;
    color: #17211d;
}

.welcome-access-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px clamp(18px, 4vw, 58px);
    background: #fff;
    border-bottom: 1px solid #e3e9e6;
}

.welcome-access-logo {
    display: block;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    flex: 0 0 48px;
    object-fit: contain;
}

.welcome-access-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 1.3;
}

.welcome-access-brand strong { font-weight: 650; }
.welcome-access-brand span { color: #69766f; font-size: 12px; }

.welcome-access-main {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-access-main .credential-page-shell {
    width: 100%;
    min-height: 0;
    padding: 32px 20px;
}

.welcome-access-main .credential-page-card {
    margin: 0 auto;
    width: min(640px, 100%);
    border: 1px solid #dfe7e2;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(24, 48, 39, 0.055);
}

.welcome-access-footer {
    padding: 20px 16px 25px;
    text-align: center;
    color: #7b8781;
    font-size: 12px;
}

@media (max-width: 640px) {
    .welcome-access-header { padding: 14px 20px; }
    .welcome-access-main .credential-page-shell { padding: 20px 12px; }
    .welcome-access-footer { padding: 16px 12px 22px; }
}


/* Dark-mode finish for the welcome-access layout. */
@media (prefers-color-scheme: dark) {
    .welcome-access-layout {
        background: #171717;
        color: #e7ece8;
    }

    .welcome-access-header {
        background: #202020;
        border-color: #373b39;
    }

    .welcome-access-brand span,
    .welcome-access-footer {
        color: #a3aea8;
    }

    .welcome-access-main .credential-page-card {
        background: #222625;
        color: #e7ece8;
        border-color: #3b4540;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    }

    .welcome-access-main .credential-details > div {
        background: #2a302d;
        border-color: #414e46;
        color: #e7ece8;
    }

    .welcome-access-main .credential-security-note {
        background: #23362d;
        border-color: #405949;
        color: #c8e3d4;
    }
}

/* Keep signing progress visible while the server renders the final PDF. */
.submission-overlay {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 30, 17, .72);
    backdrop-filter: blur(4px);
}
.submission-overlay-card {
    width: min(440px, 100%);
    padding: 36px 30px;
    border-radius: 20px;
    background: #ffffff;
    color: #1e3126;
    border: 1px solid #d9ecdf;
    box-shadow: 0 24px 65px rgba(0,0,0,.22);
    text-align: center;
}
.submission-overlay-spinner {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-bottom: 22px;
}
.submission-overlay-card h4 {
    font-size: 1.23rem;
    font-weight: 750;
    margin: 0 0 12px;
}
.submission-overlay-card p {
    line-height: 1.55;
    margin: 0 0 15px;
}
.submission-overlay-card small { color: #5d7061; }
@media (prefers-color-scheme: dark) {
    :root {
        --black-900: #050605;
        --black-800: #101310;
        --bg-app: #080908;
        --bg-card: #1d211e;
        --text-primary: #eff7f0;
        --text-muted: #b2c6b6;
    }
    html, body { background: #080908; }
    .app-shell { background: #080908; }
    .content { background: #1d211e; }
    .sidebar {
        background: linear-gradient(180deg, #050605 0%, #101510 66%, #174d34 100%);
    }
    .submission-overlay { background: rgba(0,0,0,.83); }
    .submission-overlay-card {
        background: #232924;
        color: #e8f6eb;
        border-color: #405a46;
    }
    .submission-overlay-card h4 { color: #b2ecc0; }
    .submission-overlay-card small { color: #b7cbbd; }
    .welcome-access-layout { background: #080908; }
    .welcome-access-header { background: #1d211e; }
    .welcome-access-main .credential-page-card { background: #232924; }
    .welcome-access-main .credential-details > div { background: #2a322b; }
}
@media (prefers-reduced-motion: reduce) {
    .submission-overlay-spinner { animation: none; }
}

/* Full Application is clearly recommended; trade-offs remain visible
   without hovering. Details work with hover, keyboard focus and mobile tap. */
.account-choice-page {
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: clamp(16px, 4vw, 28px) 0 34px;
    color: var(--text-primary);
}
.account-choice-intro { text-align: center; margin: 0 0 25px; }
.account-choice-intro h2 {
    font-size: clamp(1.65rem, 3vw, 2.2rem);
    letter-spacing: -.03em;
    font-weight: 750;
    margin: 9px 0 12px;
}
.account-choice-intro p:last-child {
    max-width: 670px;
    margin: 0 auto;
    line-height: 1.6;
    color: var(--text-muted);
}
.account-choice-back {
    display: inline-flex;
    align-items: center;
    font-size: .88rem;
    margin-bottom: 17px;
    color: var(--emerald-700);
}
.account-choice-eyebrow {
    color: var(--emerald-700) !important;
    font-weight: 750;
    font-size: .75rem;
    letter-spacing: .13em;
    margin: 0;
}
.account-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.account-choice-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid #d4ddd7;
    background: #fff;
    border-radius: 17px;
    padding: clamp(19px, 2.8vw, 29px);
    box-shadow: 0 8px 20px rgba(14, 46, 29, .035);
}
.account-choice-recommended {
    border: 2px solid #2d8865;
    background: #f9fdfa;
    box-shadow: 0 10px 30px rgba(11, 95, 62, .11);
}
.account-choice-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.account-choice-recommendation,
.account-choice-secondary {
    padding: 5px 9px;
    border-radius: 7px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.25;
}
.account-choice-recommendation { color: #075a41; background: #d8f3e3; }
.account-choice-secondary { color: #5a665e; background: #edf1ee; }
.account-choice-card h3 {
    color: #143324;
    font-size: 1.45rem;
    letter-spacing: -.02em;
    margin: 0;
    font-weight: 730;
}
.account-choice-lead { margin: 0; line-height: 1.5; color: #3f5649; }
.account-choice-benefits,
.account-choice-limitations {
    display: grid;
    gap: 12px;
    padding-left: 22px;
    margin: 4px 0 0;
    font-size: .96rem;
    line-height: 1.45;
}
.account-choice-benefits li::marker { color: #167e50; }
.account-choice-limitations li::marker { color: #b26a33; }
.account-choice-methods {
    margin: 0;
    padding: 11px 12px;
    background: #eef2ef;
    color: #254c34;
    border-radius: 8px;
    font-weight: 600;
    font-size: .9rem;
}
.account-choice-tradeoff {
    border-top: 1px solid #dbe6df;
    padding-top: 14px;
    margin: auto 0 0;
    color: #55665a;
    font-size: .86rem;
    line-height: 1.5;
}
.account-choice-action {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    border-radius: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.account-choice-fineprint {
    color: var(--text-muted);
    font-size: .83rem;
    margin: 19px auto 0;
    text-align: center;
    max-width: 780px;
    line-height: 1.5;
}
.account-choice-info { position: relative; margin-left: auto; flex: 0 0 auto; z-index: 1; }
.account-choice-info:hover, .account-choice-info:focus-within, .account-choice-info[open] { z-index: 7; }
.account-choice-info summary {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #88a998;
    background: #fff;
    border-radius: 50%;
    color: #176348;
    font: 750 15px/1 'Segoe UI',sans-serif;
    cursor: help;
    list-style: none;
}
.account-choice-info summary::-webkit-details-marker { display: none; }
.account-choice-info summary::marker { content: ''; }
.account-choice-info summary:hover,
.account-choice-info summary:focus-visible {
    background: #dff4e8;
    outline: 2px solid #64ac7d;
    outline-offset: 2px;
}
.account-choice-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: min(310px, 78vw);
    padding: 16px 17px;
    border-radius: 11px;
    border: 1px solid #bad9c5;
    background: #fff;
    color: #264434;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
    font-size: .86rem;
    line-height: 1.5;
}
.account-choice-tooltip strong { display: block; margin-bottom: 7px; }
.account-choice-tooltip p { margin: 0; }
.account-choice-info:hover .account-choice-tooltip,
.account-choice-info:focus-within .account-choice-tooltip,
.account-choice-info[open] .account-choice-tooltip { display: block; }
.account-choice-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(1, 12, 5, .75);
}
.account-choice-modal {
    width: min(530px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    color: #1d3024;
    border-radius: 16px;
    border: 1px solid #b5d7c2;
    padding: clamp(20px, 4vw, 30px);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .26);
}
.account-choice-modal h3 { margin: 0 0 12px; font-weight: 730; }
.account-choice-modal p { line-height: 1.6; }
.account-choice-ack { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; font-weight: 600; }
.account-choice-ack input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: #147b56; }
.account-choice-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
@media (max-width: 800px) {
    .account-choice-grid { grid-template-columns: 1fr; }
    .account-choice-page { padding-top: 12px; }
    .account-choice-tooltip { right: 0; }
}
@media (prefers-color-scheme: dark) {
    .account-choice-card { background: #242925; border-color: #414d43; box-shadow: none; }
    .account-choice-recommended { background: #202e25; border-color: #65b684; }
    .account-choice-card h3 { color: #eaf9ec; }
    .account-choice-lead { color: #bdcec1; }
    .account-choice-recommendation { color: #c9f9d6; background: #244f36; }
    .account-choice-secondary { color: #c1ccc3; background: #373c38; }
    .account-choice-methods { background: #2f3d33; color: #d1f6da; }
    .account-choice-tradeoff { color: #b1c7b6; border-color: #4b5a50; }
    .account-choice-info summary { background: #2c3930; border-color: #658b71; color: #d4ffe0; }
    .account-choice-info summary:hover,
    .account-choice-info summary:focus-visible { background: #3d5845; }
    .account-choice-tooltip {
        background: #272e29;
        border-color: #58745f;
        color: #e2f0e6;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .5);
    }
    .account-choice-modal { background: #232a24; border-color: #567d61; color: #eaf7ed; }
}

/* Payment is the customer's choice; application type is derived automatically. */
.account-choice-method-list {
    margin: 2px 0 4px;
    padding: 0;
    border: 0;
    display: grid;
    gap: 9px;
}
.account-choice-method-list legend {
    font-size: .84rem;
    font-weight: 750;
    color: #315943;
    padding: 0 0 9px;
}
.account-choice-method {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 13px;
    border: 1px solid #d4dfd7;
    border-radius: 10px;
    background: #fff;
    color: #243d2d;
    cursor: pointer;
    line-height: 1.35;
}
.account-choice-method:hover,
.account-choice-method:has(input:checked) {
    border-color: #268c5c;
    background: #eaf7ee;
}
.account-choice-method:has(input:focus-visible) {
    outline: 2px solid #268c5c;
    outline-offset: 2px;
}
.account-choice-method input {
    margin: 3px 0 0;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #147a52;
}
.account-choice-method span { display: grid; gap: 4px; min-width: 0; }
.account-choice-method strong { font-size: .96rem; }
.account-choice-method small { font-size: .78rem; color: #526a59; }
.account-choice-selection-footer {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin: 22px auto 0;
    width: min(560px, 100%);
}
.account-choice-selection-footer .account-choice-action { margin: 0; }
.account-choice-selection-footer .account-choice-action:disabled {
    cursor: not-allowed;
    opacity: .62;
}
.account-choice-result {
    margin: 0;
    color: #2b573d;
    text-align: center;
    font-size: .97rem;
}
.account-choice-result strong { display: block; margin-top: 3px; }
.account-choice-selection-footer .account-choice-fineprint { margin-top: 0; }
@media (prefers-color-scheme: dark) {
    .account-choice-method-list legend { color: #b4ebc4; }
    .account-choice-method {
        background: #292f2a;
        border-color: #48584c;
        color: #f0faf2;
    }
    .account-choice-method:hover,
    .account-choice-method:has(input:checked) {
        background: #273d2f;
        border-color: #83bb92;
    }
    .account-choice-method small { color: #c5d7c9; }
    .account-choice-result { color: #b9e9c4; }
}

/* Compact single-screen Non-Credit customer form. */
.noncredit-form-page { width: min(980px, 100%); margin: 0 auto; padding: 20px 0 45px; }
.noncredit-form-header { margin-bottom: 18px; }
.noncredit-form-header h2 { color: var(--text-primary); font-weight: 760; letter-spacing: -.025em; margin: 8px 0; }
.noncredit-form-header > p { color: var(--text-muted); line-height: 1.6; }
.noncredit-payment-display {
    border: 1px solid #b7d9c4; border-radius: 10px; padding: 11px 15px;
    background: #e9f8ee; color: #16583b; display: flex; flex-wrap: wrap; gap: 6px;
}
.noncredit-form-section {
    background: #fff; border: 1px solid #d7e4dc; border-radius: 13px;
    padding: clamp(17px, 3vw, 25px); margin: 0 0 18px;
}
.noncredit-form-section h3 { color: #176347; font-size: 1.12rem; font-weight: 740; margin: 0 0 18px; }
.noncredit-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
.noncredit-field-grid label {
    color: #344b3c; font-size: .86rem; font-weight: 630; display: grid;
    gap: 6px; align-content: start; min-width: 0;
}
.noncredit-field-grid .form-control { color: #152b20; border-color: #c5d7cb; min-height: 42px; }
.noncredit-field-grid .form-control:focus { border-color: #358b61; box-shadow: 0 0 0 .16rem #358b6130; }
.noncredit-checkline { display: flex; gap: 10px; align-items: flex-start; margin: 17px 0; line-height: 1.45; }
.noncredit-checkline input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: #16714c; }
.noncredit-extra-contact {
    border: 1px solid #d0e2d5; border-radius: 10px; padding: 16px; margin: 15px 0;
    background: #f7fbf8;
}
.noncredit-contact-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.noncredit-add-contact { margin-top: 15px; }
.noncredit-note { color: #607267; font-size: .86rem; }
.noncredit-file-label { display: grid; gap: 8px; padding: 14px; border: 1px dashed #a9c9b4; border-radius: 10px; margin: 12px 0; color: #28553c; font-weight: 680; }
.noncredit-file-label small { color: #5b7764; font-weight: 500; }
.noncredit-terms-notice { background: #f5faf5; }
.noncredit-terms-notice p { line-height: 1.58; }
.noncredit-ack { font-weight: 690; }
.noncredit-submit-row { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.noncredit-submit-row p { color: var(--text-muted); font-size: .84rem; }
.noncredit-result {
    border: 1px solid #b4d8bf; border-radius: 16px; background: #f9fdf9;
    text-align: center; padding: clamp(24px, 5vw, 45px);
    display: grid; justify-items: center; gap: 16px;
}
.noncredit-result h2 { font-weight: 750; color: #165e40; margin: 0; }
.noncredit-result p { max-width: 650px; line-height: 1.6; margin: 0; }
.noncredit-success-symbol { background: #168054; color: #fff; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; font-size: 1.7rem; }
@media (max-width: 700px) { .noncredit-field-grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
    .noncredit-form-section, .noncredit-result { background: #232a25; border-color: #435e4b; color: #e8f7ea; }
    .noncredit-form-section h3, .noncredit-result h2 { color: #b4ebc4; }
    .noncredit-field-grid label { color: #d9f0df; }
    .noncredit-field-grid .form-control { color: #eff9f1; background: #151b17; border-color: #4d6853; }
    .noncredit-payment-display { background: #24412d; color: #d9ffe2; border-color: #487f55; }
    .noncredit-extra-contact, .noncredit-terms-notice { background: #28352b; border-color: #42634d; }
    .noncredit-file-label { color: #cff5d7; border-color: #5c8c68; }
    .noncredit-note, .noncredit-file-label small { color: #bbd4c2; }
}

/* Non-Credit COD collection rules and payment-specific guidance. */
.noncredit-cod-highlight {
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px solid #aac9b5;
    background: #edf7ee;
    color: #1c5434 !important;
    font-weight: 670;
    line-height: 1.48;
}
.noncredit-zelle-payment {
    width: 100%;
    max-width: 680px;
    padding: clamp(14px, 3vw, 22px);
    border: 1px solid #aad6b9;
    border-radius: 13px;
    background: #eaf8ef;
    color: #20573b;
    text-align: left;
    display: grid;
    gap: 12px;
}
.noncredit-zelle-address {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    word-break: break-word;
}
.noncredit-zelle-address a {
    font-size: clamp(1rem, 2.7vw, 1.25rem);
    font-weight: 780;
    color: #105a3a;
    text-decoration: underline;
}
.noncredit-zelle-payment p { max-width: none; text-align: left; }
.noncredit-payment-reminder {
    max-width: 640px;
    padding: 12px 16px;
    background: #eef7f0;
    border: 1px solid #bad6c1;
    border-radius: 9px;
    color: #245039;
}
.noncredit-card-authorization { border-color: #a5cdb3; }
.noncredit-card-terms {
    margin: 18px 0 14px;
    background: #f4f9f5;
    border: 1px solid #c6decf;
    border-radius: 10px;
    padding: 16px;
    color: #284c37;
    font-size: .88rem;
    line-height: 1.57;
}
.noncredit-card-terms p:last-child { margin-bottom: 0; }
.noncredit-form-section .form-select {
    min-height: 42px;
    border-color: #c5d7cb;
}
@media (prefers-color-scheme: dark) {
    .noncredit-cod-highlight, .noncredit-zelle-payment,
    .noncredit-payment-reminder, .noncredit-card-terms {
        background: #253c2c;
        border-color: #4b7859;
        color: #d3f5d9 !important;
    }
    .noncredit-zelle-address a { color: #baf5cb; }
    .noncredit-form-section .form-select {
        background: #151b17;
        border-color: #4d6853;
        color: #eff9f1;
    }
}

.noncredit-card-selected-fee {
    border: 1px solid #accdb7;
    border-radius: 9px;
    background: #e8f4ec;
    color: #21533a;
    padding: 11px 13px;
    line-height: 1.5;
}
.noncredit-card-selected-fee strong { font-size: 1.08rem; margin: 0 6px; }
@media (prefers-color-scheme: dark) {
    .noncredit-card-selected-fee { background: #284130; border-color: #588669; color: #d2f2d9; }
}

/* Loading feedback between language selection and remote payment feature check. */
.application-nav-loader {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 25px 15px;
    margin: 18px 0 0;
    border: 1px solid #cbdcd0;
    border-radius: 14px;
    color: #246246;
    background: #f3faf5;
    text-align: center;
}
.application-nav-loader-page {
    width: min(580px, 94%);
    min-height: 265px;
    margin: 50px auto 60px;
}
.application-nav-loader p { margin: 0; font-size: .88rem; }
.application-nav-spinner {
    display: block;
    width: 42px;
    height: 42px;
    border: 4px solid #bddfc9;
    border-top-color: #12754c;
    border-radius: 50%;
    animation: zuma-nav-loading-spin 0.8s linear infinite;
}
@keyframes zuma-nav-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .application-nav-spinner { animation: none; border: 4px solid #247854; }
}
@media (prefers-color-scheme: dark) {
    .application-nav-loader {
        background: #233629;
        border-color: #42664d;
        color: #e0f7e7;
    }
    .application-nav-spinner {
        border-color: #3d6449;
        border-top-color: #b2f4c7;
    }
}

/* Signed-out applicant's downloaded PDF still contains confidential
   business, owner, contact and uploaded document information. */
.noncredit-sensitive-download-note {
    width: min(680px, 100%);
    border: 1px solid #d5bf98;
    border-radius: 11px;
    background: #fff8ec;
    color: #65401d;
    padding: 15px 18px;
    text-align: left;
}
.noncredit-sensitive-download-note p {
    max-width: none;
    margin-top: 6px;
    line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
    .noncredit-sensitive-download-note {
        background: #3d3125;
        border-color: #896e46;
        color: #ffeaca;
    }
}


/* Non-credit submit feedback: explicit, accessible, clickable issues. */
.noncredit-validation-panel {
    margin: 0 0 18px; border: 1px solid #d78b70;
    border-radius: 10px; background: #fff6f1;
    padding: 15px 18px; color: #682e19;
}
.noncredit-validation-panel ul { margin: 8px 0 0; padding-left: 22px; }
.noncredit-validation-panel li { margin: 5px 0; }
.noncredit-error-link {
    background: transparent; border: none; padding: 0;
    color: inherit; text-decoration: underline; text-align: left;
    cursor: pointer; font: inherit;
}
.noncredit-error-link:focus-visible { outline: 2px solid #a64a2e; outline-offset: 3px; }
.noncredit-field-grid label.nc-invalid .form-control,
.noncredit-field-grid label.nc-invalid .form-select,
.noncredit-file-label.nc-invalid,
.noncredit-checkline.nc-invalid {
    border-color: #c73c2d !important;
    outline: 2px solid rgba(199,60,45,.45);
    outline-offset: 2px;
}
.noncredit-field-grid input,
.noncredit-file-label input,
.noncredit-checkline input { scroll-margin-top: 90px; }
.noncredit-card-notice {
    border: 1px solid #a5cdb3; border-radius: 10px;
    background: #f1f8f3; padding: 14px 16px;
    color: #214b33; font-weight: 650; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
    .noncredit-validation-panel { color: #ffd8c7; background: #3b211b; border-color: #9e5946; }
    .noncredit-card-notice { color: #d0f1db; background: #223c2d; border-color: #4b7859; }
}