/* =========================================================================
   brand.css
   PSP (Pennsylvania State Police) visual brand layer on top of Bootstrap 5.
   Colors, typography, and semantic component styling extracted from the
   original Figma design (Applicationstyles.css) and re-expressed as
   responsive, semantic classes. Contains NO absolute positioning and NO
   `zoom` scaling — all layout is delegated to Bootstrap's grid.
   Load order (see _Layout.cshtml):
       bootstrap -> fontawesome -> app-styles -> brand -> (legacy shims)
   ========================================================================= */

/* --- Brand tokens ------------------------------------------------------- */
:root {
    --psp-navy: #002469; /* primary blue used for headings/buttons */
    --psp-navy-hover: #001a4d;
    --psp-navy-field: #002469; /* solid navy for form field wrappers */
    --psp-gold: #bf940d; /* accent gold for callouts / notices */
    --psp-note-bg: #c62828; /* solid red note banner */
    --psp-note-text: #ffffff;
    --psp-page-bg: #ffffff; /* app content background */
    --psp-card-bg: #ebebeb; /* light gray card body wrapper */
    --psp-text: #212529;
    --psp-muted: #6c757d;
    --psp-header-bg: #212529; /* dark charcoal top nav */
    --psp-footer-bg: #212529;
    --psp-font: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* --- Global type & background ------------------------------------------ */
body {
    background-color: var(--psp-page-bg);
    color: var(--psp-text);
    font-family: var(--psp-font);
    font-size: 16px;
    line-height: 1.5;
}

/* Helper text (e.g. #note under search form). Bootstrap's .text-muted
   (#6c757d) only reaches ~4.54:1 on white and gets flagged by accessibility
   auditors for small text. Use a darker gray that still reads as muted but
   passes WCAG AA (>= 7:1) without changing brand colors. */
.note-helper {
    color: #495057;
}

/* Force Montserrat across all elements (Bootstrap resets font-family on
   form controls, buttons, and other components to system-ui by default). */
body,
button,
input,
select,
optgroup,
textarea,
.btn,
.form-control,
.form-select,
.form-label,
.navbar,
.nav-link,
.card,
.card-header,
.card-body,
.card-footer,
.alert,
.modal,
.dropdown-menu,
.list-group,
table,
th,
td {
    font-family: var(--psp-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--psp-font);
    color: var(--psp-navy);
}

a {
    color: var(--psp-navy);
}

    a:hover {
        color: var(--psp-navy-hover);
    }

/* --- Override Bootstrap primary to PSP navy ---------------------------- */
.btn-primary,
.bg-primary {
    background-color: var(--psp-navy) !important;
    border-color: var(--psp-navy) !important;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--psp-navy-hover) !important;
        border-color: var(--psp-navy-hover) !important;
    }

.text-primary {
    color: var(--psp-navy) !important;
}

.btn-link {
    color: var(--psp-navy);
}

/* --- Cards get a soft branded look ------------------------------------- */
.card {
    background-color: var(--psp-card-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.card-header {
    background-color: var(--psp-card-bg) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 600;
    color: var(--psp-navy);
}

.card-footer {
    background-color: var(--psp-card-bg);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Red "Please Note" callout (matches Figma) ------------------------- */
.alert-note {
    background-color: var(--psp-note-bg);
    border: 1px solid var(--psp-note-bg);
    color: var(--psp-note-text);
    border-radius: 4px;
}

    .alert-note strong {
        color: var(--psp-note-text);
    }

/* --- Step circles: outlined navy, vertical rail ------------------------ */
.step-circle {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--psp-navy);
    border: 2px solid var(--psp-navy);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.step-item {
    position: relative;
}
    /* Vertical connector line between steps (all but last) */
    .step-item:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 0.9375rem; /* half of step-circle width (2rem/2 = 1rem) minus 1px border */
        top: 2rem;
        bottom: -1rem;
        width: 2px;
        background-color: var(--psp-navy);
        opacity: 0.35;
        z-index: 0;
    }

/* --- Search form: navy field blocks ----------------------------------- */
.field-block {
    background-color: var(--psp-navy-field);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 4px;
}

    .field-block .form-label {
        color: #ffffff;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        margin-bottom: 0.375rem;
    }

    .field-block .form-control {
        background-color: #ffffff;
        border: none;
        border-radius: 2px;
    }

        .field-block .form-control:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
        }

    .field-block .btn-link {
        color: #ffffff;
        text-decoration: underline;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

/* --- Form controls (outside field blocks) ----------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--psp-navy);
    box-shadow: 0 0 0 0.2rem rgba(0, 36, 105, 0.15);
}

.form-label {
    font-weight: 600;
    color: var(--psp-navy);
    font-size: 0.875rem;
}

/* --- OR divider styling ------------------------------------------------ */
.or-divider {
    color: var(--psp-text);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

/* --- Hero banner (photo + trooper badge + title) ---------------------- */
.hero-banner {
    position: relative;
    background: url("../content/images/bkgr.jpg") center center / cover no-repeat;
    min-height: 320px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

    .hero-banner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        pointer-events: none;
    }

    .hero-banner .hero-badge {
        position: relative;
        z-index: 1;
        max-height: 260px;
        max-width: 90%;
        width: auto;
        height: auto;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    }

/* Hide hero on small mobile (425px and below) */
@media (max-width: 425px) {
    .hero-banner {
        display: none;
    }
}

/* --- Site header (navbar) polish --------------------------------------- */
.navbar.bg-dark {
    background-color: var(--psp-header-bg) !important;
}

/* --- Footer polish ------------------------------------------------------ */
footer.palinks {
    background-color: var(--psp-footer-bg) !important;
}

    footer.palinks .fw-bold {
        color: var(--psp-gold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.875rem;
    }

    footer.palinks a {
        color: #cfd4dc;
    }

        footer.palinks a:hover {
            color: #ffffff;
            text-decoration: underline;
        }

/* --- Contact section ---------------------------------------------------- */
section.contact h3 {
    color: var(--psp-navy);
    font-weight: 700;
}

/* --- Search results table (navy header, uppercase labels) -------------- */
.search-results-table {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

    .search-results-table thead th {
        background-color: var(--psp-navy);
        color: #ffffff;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.8125rem;
        letter-spacing: 0.04em;
        vertical-align: middle;
        border-color: var(--psp-navy);
        padding: 0.9rem 0.75rem;
    }

    .search-results-table tbody td {
        padding: 0.9rem 0.75rem;
        vertical-align: middle;
    }

    .search-results-table tbody tr:hover {
        background-color: rgba(0, 36, 105, 0.04);
    }

/* Mobile: convert the results table into stacked cards. Each row becomes
   a card, each cell shows its column label via data-label. No horizontal
   scroll needed. */
@media (max-width: 767.98px) {
    .search-results-table,
    .search-results-table thead,
    .search-results-table tbody,
    .search-results-table tr,
    .search-results-table td {
        display: block;
        width: 100%;
    }

        .search-results-table thead {
            display: none;
        }

        .search-results-table tbody tr {
            margin-bottom: 1rem;
            border: 1px solid rgba(0, 36, 105, 0.2);
            border-radius: 6px;
            overflow: hidden;
            background-color: #ffffff;
        }

        .search-results-table tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 0.65rem 0.9rem;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            text-align: right;
        }

            .search-results-table tbody td:last-child {
                border-bottom: none;
            }

            .search-results-table tbody td::before {
                content: attr(data-label);
                color: var(--psp-navy);
                font-weight: 700;
                font-size: 0.75rem;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                text-align: left;
                flex: 0 0 45%;
            }

            .search-results-table tbody td.text-center {
                justify-content: space-between;
                text-align: right;
            }
}

/* --- Application form section on SearchResult page --------------------- */
.application-form-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto 0;
    margin-top: 0;
    padding: 0;
    position: relative;
}

/* Wizard footer: Previous | step dots | Next in a single row */
.wizard-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

    .wizard-footer .step-dots {
        order: 2;
        flex: 1 1 auto;
        text-align: center;
        margin-bottom: 0 !important;
    }

    .wizard-footer .wizard-btn-prev {
        order: 1;
        flex: 0 0 auto;
        width: 140px;
    }

    .wizard-footer .wizard-btn-next {
        order: 3;
        flex: 0 0 auto;
        width: 140px;
    }

/* --- Wizard field-block styling ----------------------------------------
   The wizard markup still uses Figma-generated .e125_* wrappers. Rather
   than rewrite the DOM (JS depends on IDs, structure is stable), we style
   the wrappers directly, scoped to .application-form-wrapper so nothing
   else on the site is affected.

   Structure per field:
     .e125_1370 / .e125_1385 / .e125_1391  = whole field block
        .e125_1371 / .e125_1386 / .e125_1392  = label row (label + required)
           .e125_1372 / .e125_1387 / .e125_1393  = label
           .e125_1373 / .e125_1388 / .e125_1394  = "* required" span
        .e125_1374 / .e125_1389 / .e125_1395  = input wrapper
   .e125_1369 / .e125_1367 / .e125_1368 / .e125_1377 = row/column layout wrappers
   .e125_1364 / .e125_1365 / .e125_1366 = section heading block
------------------------------------------------------------------------ */

.application-form-wrapper .tab {
    /*padding: 1rem 0;*/
}

.application-form-wrapper #formdiv.disabledDiv {
    opacity: 0.55;
    pointer-events: none;
    background-color: #ebebeb;
    padding: 20px;
    border-radius: 10px;
}

.application-form-wrapper #formdiv {
    background-color: #ebebeb;
    padding: 20px;
    border-radius:10px;
}

/* Section heading (REQUESTER INFORMATION + Step X out of 4) */
.application-form-wrapper .e125_1364 {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 36, 105, 0.15);
}

.application-form-wrapper .e125_1365 {
    color: var(--psp-navy);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}

.application-form-wrapper .e125_1366 {
    color: var(--psp-navy);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}

/* Row wrappers -> Bootstrap-style flex row */
.application-form-wrapper .e125_1367 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.application-form-wrapper .e125_1368,
.application-form-wrapper .e125_1369 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .application-form-wrapper .e125_1368 > *,
    .application-form-wrapper .e125_1377,
    .application-form-wrapper .e125_1369 > * {
        flex: 1 1 240px;
        min-width: 0;
    }

/* Individual field block (navy background, white label, white input) */
.application-form-wrapper .e125_1370,
.application-form-wrapper .e125_1385,
.application-form-wrapper .e125_1391 {
    background-color: var(--psp-navy);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    display: block;
    position: static;
    width: auto;
    height: auto;
    top: auto;
    left: auto;
}

/* Label row within a field block */
.application-form-wrapper .e125_1371,
.application-form-wrapper .e125_1386,
.application-form-wrapper .e125_1392 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.375rem;
}

/* Label text */
.application-form-wrapper .e125_1372,
.application-form-wrapper .e125_1387,
.application-form-wrapper .e125_1393 {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin: 0;
}

/* * required helper text */
.application-form-wrapper .e125_1373,
.application-form-wrapper .e125_1388,
.application-form-wrapper .e125_1394 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Input wrapper */
.application-form-wrapper .e125_1374,
.application-form-wrapper .e125_1389,
.application-form-wrapper .e125_1395 {
    display: block;
    position: static;
    width: 100%;
    height: auto;
}

/* Actual input / select / textarea inside a navy field block */
.application-form-wrapper .e125_1370 .form-control,
.application-form-wrapper .e125_1385 .form-control,
.application-form-wrapper .e125_1391 .form-control,
.application-form-wrapper .e125_1370 input,
.application-form-wrapper .e125_1385 input,
.application-form-wrapper .e125_1391 input,
.application-form-wrapper .e125_1370 select,
.application-form-wrapper .e125_1385 select,
.application-form-wrapper .e125_1391 select,
.application-form-wrapper .e125_1370 textarea,
.application-form-wrapper .e125_1385 textarea,
.application-form-wrapper .e125_1391 textarea {
    background-color: #ffffff;
    border: none;
    border-radius: 2px;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--psp-text);
}

    .application-form-wrapper .e125_1370 .form-control:focus,
    .application-form-wrapper .e125_1385 .form-control:focus,
    .application-form-wrapper .e125_1391 .form-control:focus,
    .application-form-wrapper .e125_1370 input:focus,
    .application-form-wrapper .e125_1385 input:focus,
    .application-form-wrapper .e125_1391 input:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
        outline: none;
    }

/* --- Tab 3: "Others involved in the crash" rows ------------------------
   Each involvement entry (.e84_1542) is a horizontal row of:
     - NAME field block (.e84_1543)
     - LEVEL OF INVOLVEMENT field block (.e84_1551)
     - trash icon (.e84_1559)
   Fields use the same navy field-block visual as tab 1. */

.application-form-wrapper .e84_1542 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    position: static !important;
}

.application-form-wrapper .e84_1543,
.application-form-wrapper .e84_1551 {
    background-color: var(--psp-navy);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    flex: 1 1 240px;
    min-width: 0;
    position: static;
}
/* label rows */
.application-form-wrapper .e84_1544,
.application-form-wrapper .e84_1552 {
    display: block;
    margin-bottom: 0.375rem;
}

.application-form-wrapper .e84_1545,
.application-form-wrapper .e84_1553 {
    display: block;
}

.application-form-wrapper .e84_1546,
.application-form-wrapper .e84_1554 {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin: 0;
}
/* input wrappers */
.application-form-wrapper .e84_1548,
.application-form-wrapper .e84_1556 {
    display: block;
    width: 100%;
}

.application-form-wrapper .e84_1543 input,
.application-form-wrapper .e84_1551 input,
.application-form-wrapper .e84_1543 .form-control,
.application-form-wrapper .e84_1551 .form-control {
    background-color: #ffffff;
    border: none;
    border-radius: 2px;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--psp-text);
}

    .application-form-wrapper .e84_1543 .form-control:focus,
    .application-form-wrapper .e84_1551 .form-control:focus,
    .application-form-wrapper .e84_1543 input:focus,
    .application-form-wrapper .e84_1551 input:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
        outline: none;
    }
/* trash icon column */
.application-form-wrapper .e84_1559 {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: #495057;
    cursor: pointer;
    position: static !important;
    font-size: 1.1rem;
}

    .application-form-wrapper .e84_1559:hover {
        color: #dc3545;
    }

/* --- "ADD OTHER INVOLVED PERSON" button (tab 3) ------------------------ */
.application-form-wrapper #AddOtherInvolvement {
    display: flex;
    justify-content: center;
    margin: 1rem auto 1.5rem;
    position: static !important;
}

    .application-form-wrapper #AddOtherInvolvement .e84_1623 {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 2rem;
        border: 2px dashed var(--psp-navy);
        border-radius: 6px;
        background-color: transparent;
        cursor: pointer;
        transition: background-color 0.15s ease-in-out;
    }

        .application-form-wrapper #AddOtherInvolvement .e84_1623:hover {
            background-color: rgba(0, 36, 105, 0.05);
        }

    .application-form-wrapper #AddOtherInvolvement .e84_1624 {
        color: var(--psp-navy);
        font-weight: 700;
        font-size: 0.9375rem;
        letter-spacing: 0.05em;
        margin: 0;
        cursor: pointer;
    }

    .application-form-wrapper #AddOtherInvolvement .e84_1625 {
        display: inline-flex;
        align-items: center;
        color: var(--psp-navy);
    }

    .application-form-wrapper #AddOtherInvolvement #addInvolvement {
        cursor: pointer;
    }

        .application-form-wrapper #AddOtherInvolvement #addInvolvement .fa-plus-circle {
            font-size: 1.25rem;
            color: var(--psp-navy);
        }

/* --- Tab 4: Form Delivery Information ---------------------------------- */
/* Section heading uses different class names than tab 1 */
.application-form-wrapper .e125_1229 {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 36, 105, 0.15);
}

.application-form-wrapper .e125_1230 {
    color: var(--psp-navy);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}

.application-form-wrapper .e125_1231 {
    color: var(--psp-navy);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}

/* "Same as requester info" checkbox row */
.application-form-wrapper .e125_1232 {
    margin: 1rem 0;
    padding: 0.5rem 0.75rem;
    background-color: rgba(0, 36, 105, 0.05);
    border: 1px solid rgba(0, 36, 105, 0.15);
    border-radius: 4px;
}

.application-form-wrapper .e125_1233 label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--psp-navy);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

.application-form-wrapper .e125_1233 input[type="checkbox"] {
    margin: 0 !important;
}

/* Delivery fields row: reuse tab 1 field-block styling, just force a
   proper flex row for FIRST NAME / LAST NAME. */
.application-form-wrapper #firstRow,
.application-form-wrapper #secondRow {
    position: static !important;
    top: auto !important;
}

.application-form-wrapper #sameDeliveryDiv.disabledDiv {
    opacity: 0.55;
    pointer-events: none;
}

/* --- Terms & signature block (dark navy card) -------------------------- */
.application-form-wrapper .e125_1268 {
    background-color: var(--psp-navy);
    color: #ffffff;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    margin-top: 1.25rem;
}

.application-form-wrapper .e125_1269 {
    margin-bottom: 1rem;
}

.application-form-wrapper .e125_1271 {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0;
    cursor: pointer;
}

.application-form-wrapper #chkTCInfo {
    flex: 0 0 auto;
    margin: 0 !important;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.application-form-wrapper #validationTC {
    color: #ffd54f !important;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    margin: 0.5rem 0 0.75rem;
}

/* Name + Date row inside terms block */
.application-form-wrapper .e125_1272 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.application-form-wrapper .e125_1273,
.application-form-wrapper .e125_1280 {
    background-color: #ffffff;
    color: var(--psp-text);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    flex: 1 1 240px;
    min-width: 0;
}

.application-form-wrapper .e125_1274,
.application-form-wrapper .e125_1281 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.375rem;
}

.application-form-wrapper .e125_1275,
.application-form-wrapper .e125_1282 {
    color: var(--psp-navy);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin: 0;
}

.application-form-wrapper .e125_1276,
.application-form-wrapper .e125_1283 {
    color: rgba(255, 255, 255, 0.85); /* hidden by default; validation JS flips to red on invalid submit */
    font-size: 0.75rem;
    font-weight: 600;
}

.application-form-wrapper .e125_1277,
.application-form-wrapper .e125_1284 {
    display: block;
    width: 100%;
}

.application-form-wrapper .e125_1273 input,
.application-form-wrapper .e125_1280 input,
.application-form-wrapper .e125_1273 .form-control,
.application-form-wrapper .e125_1280 .form-control {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--psp-text);
}

    .application-form-wrapper .e125_1273 input:focus,
    .application-form-wrapper .e125_1280 input:focus,
    .application-form-wrapper .e125_1273 .form-control:focus,
    .application-form-wrapper .e125_1280 .form-control:focus {
        border-color: var(--psp-navy);
        box-shadow: 0 0 0 0.2rem rgba(0, 36, 105, 0.2);
        outline: none;
    }

/* --- Wizard step-tab visibility & dots (migrated from formstepper.css) --- */
.tab {
    display: none;
}

.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: var(--psp-navy);
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.35;
}

    .step.active {
        opacity: 1;
    }

    .step.finish {
        opacity: 0.6;
    }

input.invalid,
textarea.invalid {
    background-color: #ffdddd !important;
}

/* =========================================================================
   Requested / "Form Submission Received" page
   ========================================================================= */
.requested-page {
    background-color: var(--psp-page-bg);
}

.requested-card {
    background-color: var(--psp-card-bg);
    border-radius: 6px;
    padding: 2rem 2.5rem;
    max-width: 1100px;
}

.requested-header {
    margin-bottom: 1.5rem;
}

.requested-title {
    color: var(--psp-text);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.requested-subtitle {
    color: var(--psp-text);
    font-size: 1rem;
    margin: 0;
}

.requested-body {
    color: var(--psp-text);
    font-size: 1rem;
    line-height: 1.55;
    margin: 1.5rem 0 0.5rem;
}

.requested-again {
    color: var(--psp-text);
    font-weight: 700;
    font-size: 1rem;
    margin: 0.5rem 0 1rem;
}

/* Progress tracker */
.progress-tracker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
}

    .progress-tracker .pt-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 0 0 auto;
        min-width: 90px;
    }

    .progress-tracker .pt-circle {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #ffffff;
        border: 2px solid #6c757d;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
    }

    .progress-tracker .pt-done .pt-circle {
        background-color: var(--psp-navy);
        border-color: var(--psp-navy);
        color: #ffffff;
    }

    .progress-tracker .pt-current .pt-circle {
        background-color: var(--psp-navy);
        border-color: var(--psp-navy);
    }

    .progress-tracker .pt-current .pt-dot {
        width: 10px;
        height: 10px;
        background-color: #ffffff;
        border-radius: 50%;
        display: block;
    }

    .progress-tracker .pt-label {
        margin-top: 0.5rem;
        color: var(--psp-text);
        font-size: 0.95rem;
        font-weight: 500;
    }

    .progress-tracker .pt-bar {
        flex: 1 1 auto;
        height: 3px;
        background-color: #6c757d;
        margin: 0 -8px 28px;
        align-self: center;
    }

    .progress-tracker .pt-bar-done {
        background-color: var(--psp-navy);
    }

/* Navy field blocks for the "Search again" row */
.requested-search-row .field-block {
    background-color: var(--psp-navy-field);
    color: #ffffff;
    padding: 1rem 1.25rem;
    border-radius: 4px;
    height: 100%;
}

.requested-search-row .field-block-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.375rem;
}

.requested-search-row .field-block-label {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

.requested-search-row .field-block-hint {
    display: block;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

    .requested-search-row .field-block-hint:hover {
        text-decoration: underline;
    }

.requested-search-row .field-block .form-control {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    color: var(--psp-text);
}

    .requested-search-row .field-block .form-control:focus {
        border-color: var(--psp-gold);
        box-shadow: 0 0 0 0.2rem rgba(191, 148, 13, 0.25);
        outline: none;
    }

.requested-or {
    color: var(--psp-text);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Captcha and submit */
.requested-captcha-row {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 0.75rem;
}

    .requested-captcha-row #divCaptcha {
        display: flex;
        justify-content: center;
    }

.requested-submit-row {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

    .requested-submit-row .btnSearch {
        background-color: var(--psp-navy);
        border-color: var(--psp-navy);
        color: #ffffff;
        font-weight: 700;
        padding: 0.6rem 2.5rem;
        border-radius: 4px;
        text-transform: none;
    }

        .requested-submit-row .btnSearch:hover,
        .requested-submit-row .btnSearch:focus {
            background-color: var(--psp-navy-hover);
            border-color: var(--psp-navy-hover);
            color: #ffffff;
            box-shadow: 0 0 0 0.2rem rgba(0, 36, 105, 0.25);
        }

@media (max-width: 767.98px) {
    .requested-card {
        padding: 1.25rem;
    }

    .progress-tracker {
        padding: 0;
    }

        .progress-tracker .pt-step {
            min-width: 60px;
        }

        .progress-tracker .pt-label {
            font-size: 0.75rem;
            text-align: center;
        }

    .requested-or {
        padding: 0.5rem 0;
    }
}

/* =========================================================================
   Desktop vertical-spacing trim (SearchResult + Requested only).
   Reduces ONLY top/bottom padding and margins so the pages fit without a
   vertical scrollbar. Font sizes, widths, colors, and alignment untouched.
   Applies only at desktop widths (>= 992px).
   ========================================================================= */
@media (min-width: 992px) {
    /* Outer chrome: only on these two pages */
    body:has(.application-form-wrapper) main#main,
    body:has(.requested-page) main#main {
        padding-top: 0;
        padding-bottom: 0;
    }

    body:has(.application-form-wrapper) .container.py-4,
    body:has(.application-form-wrapper) .container.py-5,
    body:has(.requested-page) .container.py-4,
    body:has(.requested-page) .container.py-5 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* ---- SearchResult (wizard) vertical spacing ---- */
    .application-form-wrapper {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

        .application-form-wrapper h2.h3 {
            margin-bottom: 0.75rem !important;
        }

    .search-results-table {
        margin-bottom: 0.75rem;
    }

        .search-results-table th,
        .search-results-table td {
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }

    .application-form-wrapper .e125_1365,
    .application-form-wrapper .e125_1229 .e125_1230 {
        margin-bottom: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .application-form-wrapper .e125_1366,
    .application-form-wrapper .e125_1231 {
        margin-bottom: 0.5rem;
    }

    .application-form-wrapper .field-block,
    .application-form-wrapper .e125_1368,
    .application-form-wrapper .e125_1369,
    .application-form-wrapper .e125_1370 {
        /*padding-top: 0.4rem !important;*/
        padding-bottom: 0.4rem !important;
    }

    .application-form-wrapper .field-block-header,
    .application-form-wrapper .field-block-label {
        margin-bottom: 0.15rem;
    }

    .application-form-wrapper .row {
        margin-bottom: 0.35rem;
    }

        .application-form-wrapper .row > [class*="col-"] {
            padding-top: 0.15rem;
            padding-bottom: 0.15rem;
        }

    .application-form-wrapper .e125_1268 {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        margin-top: 0.6rem;
    }

    .application-form-wrapper .e125_1269 {
        margin-bottom: 0.5rem;
    }

    .application-form-wrapper .e125_1272 {
        margin-top: 0.35rem;
    }

    .wizard-footer {
        padding-top: 0.5rem;
        padding-bottom: 0.25rem;
        margin-top: 0.5rem;
    }

    /* ---- Requested page vertical spacing ---- */
    .requested-card {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .requested-header {
        margin-bottom: 0.5rem;
    }

    .requested-title {
        margin-bottom: 0.25rem;
    }

    .requested-body {
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .requested-again {
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
    }

    .progress-tracker {
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
    }

        .progress-tracker .pt-label {
            margin-top: 0.2rem;
        }

        .progress-tracker .pt-bar {
            margin-bottom: 22px;
        }

    .requested-search-row .field-block {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .requested-search-row .field-block-header {
        margin-bottom: 0.2rem;
    }

    .requested-captcha-row {
        margin-top: 0.6rem;
        margin-bottom: 0.25rem;
    }

    .requested-submit-row {
        margin-top: 0.35rem;
    }
}

/* =========================================================================
   Terms & Conditions modal (Notice) - responsive sizing
   Was previously locked to 40% max-width via inline style, which made it
   only ~170px wide on 425px phones. Cap 40% only at desktop breakpoints.
   ========================================================================= */
.terms-modal-footer {
    gap: 0.5rem;
    flex-wrap: wrap;
}
@media (min-width: 992px) {
    .terms-modal-dialog {
        max-width: 40%;
    }
}
@media (max-width: 575.98px) {
    #termsModal .modal-dialog.terms-modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    #termsModal .modal-body {
        font-size: 0.9rem;
    }
    #termsModal .terms-modal-footer {
        justify-content: space-between !important;
    }
    #termsModal #declineButton,
    #termsModal #acceptButton {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* =========================================================================
   iOS Safari fixes for Step 4:
   1) input[type=date] ignores the HTML `readonly` attribute on iOS and still
      opens the native picker. Disable pointer events + user-select to make
      it truly non-interactive. Also normalize -webkit-appearance so the
      field doesn't overflow the navy field-block on iPhone.
   2) Bootstrap `.modal-dialog-scrollable .modal-body` doesn't get momentum
      scrolling on iOS unless -webkit-overflow-scrolling: touch is set, and
      the modal must allow touch actions to scroll the body.
   ========================================================================= */
.application-form-wrapper input#AcceptTermsDate.accept-terms-date {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 38px;
}

    .application-form-wrapper input#AcceptTermsDate.accept-terms-date::-webkit-date-and-time-value {
        text-align: left;
    }

    .application-form-wrapper input#AcceptTermsDate.accept-terms-date::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }

#termsModal .modal-dialog-scrollable .modal-body {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    touch-action: pan-y;
}

#termsModal {
    -webkit-overflow-scrolling: touch;
}

/* =========================================================================
   Home page "Not Available" + "Notify me" modals - responsive sizing
   Same problem as the T&C modal: inline max-width:50% made them too narrow
   on phones. Cap 50% only at desktop, full-width on mobile, and let the
   notification form's flex rows wrap so labels don't get squeezed.
   ========================================================================= */
@media (min-width: 992px) {
    .home-modal-dialog {
        max-width: 50%;
        margin-top: 5%;
    }
}
@media (max-width: 575.98px) {
    #NotAvailableModal .modal-dialog.home-modal-dialog,
    #exampleModalCenter .modal-dialog.home-modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    #NotAvailableModal .modal-title,
    #exampleModalCenter .modal-title {
        font-size: 1rem;
        line-height: 1.3;
    }
    #NotAvailableModal .modal-body,
    #exampleModalCenter .modal-body {
        font-size: 0.9rem;
    }
    /* Notification form: stack label above input on mobile */
    #exampleModalCenter #notificationForm > div[style*="display:flex"] {
        flex-wrap: wrap;
    }
    #exampleModalCenter #notificationForm label[for],
    #exampleModalCenter #notificationForm input {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }
    #exampleModalCenter #emailError {
        width: 100% !important;
    }
    /* Footer buttons: full width, no cramped margins */
    #NotAvailableModal .modal-footer,
    #exampleModalCenter .modal-footer {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    #NotAvailableModal .modal-footer .btn,
    #exampleModalCenter .modal-footer .btn,
    #NotAvailableModal .modal-footer button,
    #exampleModalCenter .modal-footer button {
        flex: 1 1 0;
        width: 0;
        margin: 0 !important;
        padding: 0.5rem 1rem !important;
    }
}

/* --- Full-page loader overlay (shown during form submit) --------------- */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(245, 245, 245, 0.6);
}

#loader {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1001;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border: 10px solid #ffffff;
    border-top-color: var(--psp-navy);
    border-bottom-color: var(--psp-navy);
    border-radius: 50%;
    animation: psp-loader-spin 1s infinite linear;
}

@keyframes psp-loader-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Wizard footer: keep Previous | dots | Next on one row on =425px --- */
/* Placed at end of file so it overrides the base .wizard-footer rules
   (which use fixed 140px button widths that overflow on narrow phones). */
@media (max-width: 425px) {
    .wizard-footer {
        flex-wrap: nowrap !important;
        gap: 0.4rem;
    }

    .wizard-footer .wizard-btn-prev,
    .wizard-footer .wizard-btn-next {
        width: auto !important;
        min-width: 0;
        flex: 0 1 auto;
    }

    .wizard-footer .wizard-btn-prev .btn,
    .wizard-footer .wizard-btn-next .btn {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .wizard-footer .step-dots {
        flex: 1 1 auto;
        min-width: 0;
    }

    .wizard-footer .step-dots .step {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }
}

/* Mobile: fields inside .e125_1368 wrap into a single column. The wrap-gap
   (0.75rem) applies between FIRST NAME and LAST NAME inside #firstRow, but
   the gap between #firstRow (LAST NAME) and #secondRow (EMAIL) is only the
   0.4rem padding-bottom, which looks inconsistent. Match them on mobile. */
@media (max-width: 575.98px) {
    .application-form-wrapper #firstRow.e125_1368 {
        margin-bottom: 0.75rem;
    }
}