/**
 * Silver Lines theme override for the boarding forms (application, review,
 * documents, dashboard, partner, prevet).
 * Loaded AFTER application-form-assets/css/style.css (the original
 * broad-payment.com stylesheet these forms were built against - kept
 * for its layout/behavior rules) to replace its teal/Georgia look with
 * Silver Lines's own brand: charcoal + silver + tan, Archivo, rounded cards, soft shadows.
 * Structure/markup/JS are untouched - this only restyles.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Bitter:wght@600;700;800&display=swap');

:root {
    --bm-blue: #16171a;
    --bm-blue-600: #24262c;
    --bm-ink: #16171a;
    --bm-muted: #5f6167;
    --bm-border: #ddd7cb;
    --bm-surface: #fbfaf7;
}

* {
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

body {
    background-color: var(--bm-surface);
}

/* ---- Card shell ---- */
.card {
    border: 1px solid var(--bm-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(11, 11, 18, .08);
}

/* ---- Header band (logo + page title) ---- */
.card-header {
    background: linear-gradient(90deg, var(--bm-blue), #24262c) !important;
    padding: 1.6rem 1.8rem;
}
.card-header .tellus9,
.card-header h2,
.card-header .card-title {
    font-family: 'Bitter', 'Archivo', sans-serif;
    color: #fff !important;
    font-weight: 700;
    /* .card-title's own teal background/padding (style.css) would
       otherwise still show through since the heading carries both
       classes - neutralize them here rather than the color-only rule
       above silently losing the specificity fight. */
    background: transparent !important;
    padding: 0 !important;
}
/* .card-title is also used bare (not inside .card-header) for in-body
   GROUP headers ("Ownership Profile", "Trade References" on Prevet) -
   one level down from the solid .fomrsubheading20 section bands below.
   Originally this rendered with the exact same solid teal fill as
   every other band on the page (three different heading levels, one
   flat color, stacked back-to-back) - visually that reads as a wall of
   saturated color rather than a hierarchy, which is what "hurts the
   eyes" here. Giving each level a different weight (solid -> tinted ->
   text-only accent below) fixes that without changing any markup. */
.card-body .card-title {
    background: var(--bm-surface) !important;
    color: var(--bm-blue-600) !important;
    padding: .6rem 1rem !important;
    border-left: 4px solid var(--bm-blue);
    border-radius: 6px;
    margin-top: 1.5rem;
}
.card-body .card-title .smallfs {
    color: var(--bm-muted);
    font-weight: 400;
}
/* The decorative broad-payment icon next to the page title (both an
   inline <img>, removed in the view, and style.css's .tellus9::after
   pseudo-element background image) shouldn't carry over to Silver Lines
   Merchant's look. */
.card-header h2 img,
.tellus9::after {
    display: none !important;
}

/* ---- Top-level section bands (Company Information, Business Type,
   etc.) - the strongest heading weight on the page, so these stay
   solid, but with room around them instead of stacking edge-to-edge. ---- */
.fomrsubheading20 {
    background: var(--bm-blue) !important;
    color: #fff;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .65rem 1rem;
    border-radius: 8px;
    margin-top: 1.75rem;
}

/* ---- Sub-toggle rows (PRINCIPAL, BUSINESS #2, etc.) - lightest
   weight: a tinted chip rather than another solid block, so three
   heading levels don't all read as the same intensity of blue. ---- */
.fomrsubheading {
    background: #efeae0 !important;
    color: var(--bm-blue-600) !important;
    font-size: .78rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .55rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--bm-border);
}
.fomrsubheading .form-check-label,
.fomrsubheading label {
    color: var(--bm-blue-600) !important;
}

/* ---- Alternating row tint (was light teal) ---- */
.even {
    background-color: var(--bm-surface) !important;
}

/* ---- Inputs ---- */
.form-control,
.form-select,
.input-group-text,
select,
textarea,
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=date] {
    border: 1.5px solid #7b7d84 !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    color: var(--bm-ink);
    font-size: .92rem;
    padding: .5rem .75rem;
    box-shadow: 0 1px 2px rgba(11, 11, 18, .06), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.form-control:hover,
.form-select:hover,
select:hover,
textarea:hover,
input:hover {
    border-color: var(--bm-blue) !important;
}
.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
    border-color: var(--bm-blue) !important;
    box-shadow: 0 0 0 4px rgba(201, 149, 79, .16), 0 2px 6px rgba(201, 149, 79, .18) !important;
    outline: none;
    transform: translateY(-1px);
}
.input-group-text {
    background-color: var(--bm-surface) !important;
    border-radius: 5px !important;
}

.col-form-label,
label {
    color: var(--bm-ink);
}

/* ---- Checkboxes / radios ---- */
input[type=checkbox],
input[type=radio] {
    accent-color: var(--bm-blue);
    width: 16px;
    height: 16px;
}

/* ---- Buttons ---- */
.btn,
button[type=submit],
.submitbutton {
    border-radius: 12px !important;
    font-weight: 600;
    padding: .7rem 1.4rem;
}
.btn-primary,
button[type=submit],
.submitbutton {
    background: linear-gradient(90deg, var(--bm-blue), var(--bm-blue-600)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(201, 149, 79, .28);
}
.btn-primary:hover,
button[type=submit]:hover {
    transform: translateY(-2px);
}

/* ---- Upload dropzones ---- */
.dz-message, [class*="dropzone"], [class*="upload-box"] {
    border-radius: 14px !important;
}

/* =====================================================================
   APPLICATION / REVIEW / DOCUMENT PAGES
   ---------------------------------------------------------------------
   These share app_header.php and are built from bare <table> blocks -
   a <th> caption row plus one <tr> per field (label <td> + input <td>).
   The original stylesheet painted every <th> solid #004240 and zebra-
   striped the rows in teal, so the page read as a stack of dense data
   tables rather than a form.

   Nothing below changes markup: the tables are restyled into field
   cards with a single heading weight, no zebra striping, and one
   consistent label column.
   ===================================================================== */

/* ---- Page shell ---- */
body {
    background-color: #efeae0;
    color: var(--bm-ink);
}
.bgcolornav {
    background-color: #fff !important;
    border-bottom: 1px solid var(--bm-border);
    box-shadow: 0 1px 3px rgba(11, 11, 18, .06);
}

/* The page title's decorative broad-payment artwork (money.gif and the
   westrenelements sprites) is injected by style.css as ::after images -
   they don't belong to this brand, and they overlap the headings. */
.tellus::after, .tellus2::after, .tellus3::after, .tellus4::after,
.tellus5::after, .tellus6::after, .tellus7::after, .tellus8::after,
.tellus9::after { display: none !important; }
.card-title img { display: none !important; }

/* ---- Field cards (each <table> is one) ---- */
.card-body table {
    width: 100%;
    background: #fff;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    /* NOT overflow:hidden. It rounds the corners neatly, but it also clips
       anything a cell opens outwards - which silently killed the
       intl-tel-input country dropdown on every phone field: the flag list
       is a child of the cell, so it was cut off at the card edge and the
       picker looked dead. Corners are rounded per-cell below instead. */
    overflow: visible;
    box-shadow: 0 2px 8px rgba(11, 11, 18, .05);
    margin-bottom: 1.25rem;
    border-collapse: separate;
    border-spacing: 0;
}

/* Corner rounding, previously handled by overflow:hidden on the table. */
.card-body table th:first-child { border-top-left-radius: 10px; }
.card-body table th:last-child { border-top-right-radius: 10px; }
.card-body table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.card-body table tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }

/* The open country list has to sit above the cards that follow it. */
.card-body table td .intl-tel-input .country-list {
    z-index: 1060;
    max-height: 220px;
}
.card-body table td .intl-tel-input.iti-container,
.card-body table td .intl-tel-input { position: relative; }

/* Card caption. One heading weight, not the solid slab the base sheet used. */
.card-body table th {
    background: #efeae0 !important;
    color: var(--bm-ink) !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--bm-border);
}
/* A checkbox riding along in the caption ("Same As Business", "Non US
   Citizen") shouldn't inherit the uppercase caption treatment. */
.card-body table th label,
.card-body table th .form-check-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    font-weight: 500;
    color: var(--bm-muted);
}

/* Zebra striping is for scannable data, not for form rows - it fights
   the input borders and makes alternate fields look disabled. */
.card-body table tr:nth-child(even),
.card-body table tr:nth-child(odd) {
    background-color: transparent !important;
}
.card-body table tbody tr + tr td {
    border-top: 1px solid #efeae0;
}

/* ---- Label / field columns ---- */
.card-body table td {
    padding: .6rem .9rem;
    font-size: .82rem;
    vertical-align: middle;
    color: var(--bm-ink);
}
.card-body table td:first-child {
    width: 42%;
    color: var(--bm-muted);
    font-weight: 500;
    line-height: 1.35;
}
.card-body table td .form-control,
.card-body table td .form-select,
.card-body table td select,
.card-body table td input {
    width: 100%;
    font-size: .85rem;
    padding: .45rem .65rem;
}

/* intl-tel-input sits inside a field cell on these forms too. */
.card-body table td .intl-tel-input { display: block; width: 100%; }
.card-body table td .iti-flag { box-shadow: none; }

/* ---- Section headings above the card rows ---- */
.card-body .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ---- Submit area ---- */
.submitbutton,
button[type=submit] {
    min-width: 190px;
}

/* ---- Footer (its teal is an inline style, so this needs !important) ---- */
footer {
    background-color: var(--bm-ink) !important;
    color: #fff;
    padding: 1rem 0 !important;
}



/* ---- Column balance -------------------------------------------------
   The markup hard-codes style="width: 50%" on every value cell, which
   leaves the field too narrow at col-md-4: longer placeholders such as
   "Settlement Transit ABA / Routing Number" get clipped mid-word. The
   label side reads fine much narrower, so hand the difference over.
   Beating an inline style needs !important. ---- */
.card-body table td:first-child { width: 36%; }
.card-body table td + td { width: 64% !important; }

/* Padding must never push a field past its cell. */
.card-body table td .form-control,
.card-body table td .form-select,
.card-body table td select,
.card-body table td textarea,
.card-body table td input {
    box-sizing: border-box;
    max-width: 100%;
}

/* ---- Caption checkboxes ("Same As Business", "Non US Citizen") ------
   These sit in the <th> with no spacing of their own, so the box ends
   up touching its label. ---- */
.card-body table th .form-check {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-left: 0;
    margin-bottom: 0;
}
.card-body table th .form-check-input {
    float: none;
    margin: 0;
    flex: 0 0 auto;
}

/* ---- Card heights are deliberately left alone ------------------------
   Stretching each table to its row's height (height:100%) lines the card
   bottoms up, but a <table> distributes that extra height across its
   rows: a 4-field card beside a 6-field one ends up with visibly looser
   row spacing than its neighbour. A consistent row rhythm across every
   card reads better than flush bottoms, so the ragged edge stays. ---- */

/* ---- Standalone toggles between sections (e.g. "Second Owner") ------ */
.card-body > .form-check,
.card-body .row + .form-check {
    background: #fff;
    border: 1px solid var(--bm-border);
    border-radius: 10px;
    padding: .7rem 1rem .7rem 2.2rem;
    margin: .25rem 0 1.25rem;
    font-weight: 500;
}

/* ---- Long free-text fields ---- */
.card-body table td textarea { min-height: 96px; resize: vertical; }

/* Select labels run longer than input placeholders ("Please Select
   Business Type"), so give them slightly more room in the same cell. */
.card-body table td .form-select,
.card-body table td select { font-size: .82rem; padding-right: 1.75rem; }

/* =====================================================================
   PROGRESS STEPPER (app_header.php)
   ===================================================================== */
.bm-steps-wrap {
    background: #fff;
    border-bottom: 1px solid var(--bm-border);
    padding: .85rem 0;
}
.bm-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.bm-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bm-muted);
    white-space: nowrap;
}
/* Connector between steps. Drawn on the item rather than a pseudo-element
   of the list so it never appears before the first or after the last. */
.bm-step + .bm-step::before {
    content: "";
    width: clamp(24px, 7vw, 92px);
    height: 2px;
    background: var(--bm-border);
    margin: 0 .75rem;
    border-radius: 2px;
}
.bm-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 700;
    background: var(--bm-surface);
    color: var(--bm-muted);
    border: 1.5px solid var(--bm-border);
}
.bm-step.is-current { color: var(--bm-ink); }
.bm-step.is-current .bm-step-dot {
    background: var(--bm-blue);
    border-color: var(--bm-blue);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(201, 149, 79, .14);
}
.bm-step.is-done { color: var(--bm-ink); }
.bm-step.is-done .bm-step-dot {
    background: #e8e2d4;
    border-color: var(--bm-blue);
    color: var(--bm-blue);
}
.bm-step.is-done + .bm-step::before { background: var(--bm-blue); }

/* =====================================================================
   POLISH
   ===================================================================== */

/* ---- Page title band ---- */
.card-header .card-title.tellus {
    font-size: 1.45rem;
    letter-spacing: -.01em;
}

/* ---- Section bands: number them so the form reads as a sequence ---- */
.card-body .card-title {
    display: flex;
    align-items: center;
    gap: .6rem;
}
form#ApplicationFrmId .card-title { counter-increment: bm-section; }
/* Only the application form and the review page are an ordered sequence, and
   both wrap their sections in form#ApplicationFrmId. The dashboard reuses the
   same .card-title class for unordered panels ("Active Docs", "Upload
   Document", ...) - and with no counter-reset ancestor there, CSS scopes the
   counter to each element, so every one of them rendered "1". Numbering is
   restricted to the form that actually has an order. */
form#ApplicationFrmId .card-body .card-title::before,
.card-body form#ApplicationFrmId .card-title::before,
form#ApplicationFrmId .card-title::before {
    content: counter(bm-section);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--bm-blue);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
}
form#ApplicationFrmId { counter-reset: bm-section; }

/* ---- Field cards: lift the one being filled in ---- */
.card-body table {
    transition: box-shadow .2s ease, border-color .2s ease;
}
.card-body table:focus-within {
    border-color: #c6bfae;
    box-shadow: 0 6px 18px rgba(201, 149, 79, .10);
}
.card-body table th {
    background: linear-gradient(180deg, #fbfaf7, #efeae0) !important;
}

/* ---- Required fields get a marker, so "required" is visible before the
   browser complains about it on submit.
   The space is a non-breaking one: with a normal space the asterisk is its
   own word and wraps to a line of its own under a two-word label, which in a
   36%-wide label column is most of them. :has() is unsupported on older
   browsers, where the marker simply doesn't appear - the field still behaves
   exactly the same. ---- */
.card-body table td:has(+ td [required])::after {
    /* No space in the content string on purpose: a leading space makes
       the asterisk its own word, which then wraps to a line of its own
       under a two-word label - and in a 36%-wide label column that is
       most of them. margin-left gives the gap without offering the line
       breaker anywhere to break. */
    content: "*";
    margin-left: 3px;
    color: #d64545;
    font-weight: 700;
}

/* ---- Submit row reads as the end of the form, not a stray button ---- */
.card-body hr,
.card-body .border-top {
    border-color: var(--bm-border) !important;
    opacity: 1;
}
.card-body .text-end:last-child,
.card-body .d-flex.justify-content-end:last-child {
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-top: .5rem;
}

/* ---- Standalone toggles ("Second Owner") read as an action, not a stray
   checkbox floating between two sections. ---- */
.card-body .form-check:not(table .form-check):not(.bm-steps *) {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid var(--bm-border);
    border-radius: 999px;
    padding: .5rem 1.1rem .5rem .9rem;
    margin: .25rem 0 1.5rem;
    font-weight: 600;
    font-size: .86rem;
    box-shadow: 0 1px 3px rgba(11, 11, 18, .05);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.card-body .form-check:not(table .form-check):not(.bm-steps *):hover {
    border-color: var(--bm-blue);
    box-shadow: 0 2px 8px rgba(201, 149, 79, .14);
}
.card-body .form-check:not(table .form-check):not(.bm-steps *) .form-check-input {
    float: none;
    margin: 0;
}


/* =====================================================================
   DEPTH PASS
   ---------------------------------------------------------------------
   The palette above is correct but very low-contrast: near-white cards on
   a near-white page, hairline borders, and tall inputs that spread every
   card out. This block deepens the surfaces, tightens the fields and
   gives each box a defined edge, without changing any hue.
   ===================================================================== */

:root {
    --bm-border: #c6bfae;          /* was #ddd7cb - too faint to read as an edge */
    --bm-border-strong: #b5ad9a;
    --bm-page: #efeae0;
    --bm-head: #efeae0;
}

/* ---- Page: a soft vertical wash instead of one flat tint ---- */
body {
    background-color: var(--bm-page);
    background-image: linear-gradient(180deg, #efeae0 0%, var(--bm-page) 420px);
    background-repeat: no-repeat;
}

/* ---- The outer card carries the page, so it gets real elevation ---- */
.card {
    border-color: var(--bm-border);
    box-shadow: 0 18px 48px rgba(11, 11, 18, .12), 0 2px 6px rgba(11, 11, 18, .06);
}

/* ---- Field cards: defined edge + layered shadow ---- */
.card-body table {
    border-color: var(--bm-border);
    box-shadow: 0 1px 2px rgba(11, 11, 18, .05), 0 6px 16px rgba(11, 11, 18, .06);
}
.card-body table:focus-within {
    border-color: #7d5a2c;
    box-shadow: 0 2px 4px rgba(201, 149, 79, .08), 0 10px 26px rgba(201, 149, 79, .16);
}

/* ---- Card captions: a real header band, not a white strip ---- */
.card-body table th {
    background: linear-gradient(180deg, #efeae0, var(--bm-head)) !important;
    border-bottom: 1px solid var(--bm-border) !important;
    color: #16171a !important;
}

/* Row separators need to be visible against the deeper surfaces. */
.card-body table tbody tr + tr td { border-top: 1px solid #e8e2d4; }

/* ---- Inputs: shorter, denser, crisper ---- */
.card-body table td {
    padding: .45rem .8rem;
}
.card-body table td .form-control,
.card-body table td .form-select,
.card-body table td select,
.card-body table td input {
    padding: .34rem .6rem;
    font-size: .84rem;
    line-height: 1.35;
    min-height: 0;
    border-width: 1px !important;
    border-color: var(--bm-border-strong) !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 2px rgba(11, 11, 18, .05);
}
.card-body table td .form-select,
.card-body table td select {
    padding: .34rem 1.6rem .34rem .6rem;
    background-position: right .5rem center;
}
/* The date control ships its own picker button, which sets a taller
   intrinsic height than the text inputs unless it is pinned too. */
.card-body table td input[type=date] { padding-block: .28rem; }

.card-body table td .form-control:focus,
.card-body table td .form-select:focus,
.card-body table td select:focus,
.card-body table td input:focus {
    border-color: var(--bm-blue) !important;
    box-shadow: 0 0 0 3px rgba(201, 149, 79, .18) !important;
    transform: none;   /* the -1px lift reads as jitter on a dense grid */
}

/* ---- Section bands: give them body ---- */
.card-body .card-title {
    background: linear-gradient(90deg, #e8e2d4, #efeae0) !important;
    border-left-width: 5px;
    box-shadow: inset 0 -1px 0 rgba(201, 149, 79, .10);
    padding: .7rem 1rem !important;
}

/* ---- Page title band: deeper, with a gold hairline echoing the brand ---- */
.card-header {
    background: linear-gradient(120deg, #16171a 0%, #1e2025 55%, #24262c 100%) !important;
    border-bottom: 3px solid #c9954f;
}

/* ---- Stepper sits on the deeper page, so it needs its own edge ---- */
.bm-steps-wrap {
    border-bottom: 1px solid var(--bm-border);
    box-shadow: 0 1px 3px rgba(11, 11, 18, .05);
}

/* ---- Submit bar ---- */
.card-body .text-end:last-child,
.card-body .d-flex.justify-content-end:last-child {
    background: linear-gradient(180deg, #efeae0, #e8e2d4);
    border-color: var(--bm-border);
}


/* =====================================================================
   DEPTH PASS 2
   ---------------------------------------------------------------------
   Still reading washed out: the heading levels were separated by a few
   percent of tint each, which disappears against a white card. Each level
   now steps down in strength clearly - solid gradient page title, tinted
   section band with a blue rule, then a field-card header with a real
   fill and an accent edge.
   ===================================================================== */

/* ---- Field card: accent edge along the top, deeper header fill ---- */
.card-body table {
    border-color: #c6bfae;
    border-top: 3px solid var(--bm-blue);
    border-radius: 12px;
}
.card-body table th {
    background: linear-gradient(180deg, #e8e2d4, #ddd7cb) !important;
    border-bottom: 1px solid #c6bfae !important;
    color: #16171a !important;
    font-size: .73rem;
    padding: .72rem .9rem;
}

/* ---- Section bands: stronger tint and a defined rule underneath ---- */
.card-body .card-title {
    background: linear-gradient(90deg, #ddd7cb, #e8e2d4) !important;
    color: #1e2025 !important;
    border-left: 5px solid var(--bm-blue);
    border-bottom: 1px solid #c6bfae;
    box-shadow: 0 2px 6px rgba(16, 48, 110, .07);
}

/* ---- Labels: darker so they hold against the deeper surfaces ---- */
.card-body table td:first-child {
    color: #333537;
    font-weight: 600;
}

/* ---- Inputs: a touch more contrast at rest ---- */
.card-body table td .form-control,
.card-body table td .form-select,
.card-body table td select,
.card-body table td input {
    border-color: #b5ad9a !important;
    background-color: #ffffff !important;
}
.card-body table td .form-control::placeholder,
.card-body table td input::placeholder {
    color: #7b7d84;
}

/* ---- Alternate the field rows very slightly: enough to guide the eye
   across a wide label/value gap, far short of the old teal striping. ---- */
.card-body table tbody tr:nth-child(even) td {
    background-color: #fbfaf7 !important;
}

/* ---- Page background: deepen so the white cards actually lift off it ---- */
body {
    background-color: #ddd7cb;
    background-image: linear-gradient(180deg, #e8e2d4 0%, #ddd7cb 520px);
}


/* =====================================================================
   SELECT2 (the MCC picker)
   ---------------------------------------------------------------------
   select2.css is vendor code, so it is left untouched and overridden
   here: its highlight colour is still the old teal #007975, and its
   results box is capped at 200px, which on a list of hundreds of MCC
   codes shows about five at a time.
   ===================================================================== */
.select2-container--default .select2-results > .select2-results__options,
.select2-results > .select2-results__options {
    max-height: 340px !important;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bm-blue) !important;
    color: #fff !important;
}
.select2-container--default .select2-results__option--selected {
    background-color: #e8e2d4 !important;
    color: var(--bm-ink) !important;
}
.select2-dropdown {
    border-color: #b5ad9a !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(11, 11, 18, .16);
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #b5ad9a !important;
    border-radius: 6px;
    padding: .35rem .5rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--bm-blue) !important;
    box-shadow: 0 0 0 3px rgba(201, 149, 79, .18);
    outline: none;
}
.select2-results__option { font-size: .84rem; padding: .4rem .6rem; }

/* Match the closed control to the other inputs on the row. */
.card-body table td .select2-container .select2-selection--single {
    height: auto !important;
    min-height: 0;
    padding: .2rem .3rem;
    border: 1px solid #b5ad9a !important;
    border-radius: 7px !important;
}
.card-body table td .select2-container { width: 100% !important; }

/* =====================================================================
   PHONE FIELDS
   ---------------------------------------------------------------------
   The flag dropdown opens out of its cell, so it must not be clipped and
   must paint above the cards below it.
   ===================================================================== */
.card-body table td .intl-tel-input { display: block; width: 100%; }
.card-body table td .intl-tel-input .selected-flag { border-radius: 7px 0 0 7px; }
.card-body table td .intl-tel-input .country-list {
    text-align: left;
    border: 1px solid #b5ad9a;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(11, 11, 18, .16);
}
/* The plugin measures the flag button and sets padding-left inline; the
   shared input padding above must not fight it. */
.card-body table td .intl-tel-input input[type=text],
.card-body table td .intl-tel-input input[type=tel] {
    padding-right: .6rem;
}


/* =====================================================================
   READ-ONLY FIELDS (review page)
   ---------------------------------------------------------------------
   review-application-form.php renders every field disabled - it is a
   confirmation screen, not an editable form. Styled like the editable
   inputs they invite a click that does nothing, so they get a flat,
   obviously-inert treatment instead.
   ===================================================================== */
.card-body table td .form-control:disabled,
.card-body table td .form-select:disabled,
.card-body table td select:disabled,
.card-body table td input:disabled,
.card-body table td textarea:disabled {
    background-color: #efeae0 !important;
    border-color: #ddd7cb !important;
    color: #24262c;
    box-shadow: none;
    cursor: default;
    opacity: 1;            /* Bootstrap dims disabled controls; the value must stay readable */
    -webkit-text-fill-color: #24262c;   /* Safari/iOS ignore `color` on a disabled input */
}
.card-body table td .form-select:disabled,
.card-body table td select:disabled {
    background-image: none;   /* no caret on something that cannot open */
}
/* A disabled field can't be focused, so the card hover lift would never
   fire on this page - leave the border cue on the card itself. */
.card-body table:has(input:disabled):focus-within {
    border-color: #c6bfae;
    box-shadow: 0 1px 2px rgba(11, 11, 18, .05), 0 6px 16px rgba(11, 11, 18, .06);
}


/* =====================================================================
   DASHBOARD - remaining teal
   ---------------------------------------------------------------------
   style.css still paints the pill tabs, the pagination and disabled
   buttons in the old #007975 / #004240. Those rules are vendor-ish and
   shared, so they are overridden here rather than edited.
   ===================================================================== */

/* Pill tabs: "Requested Docs / Active / Upload Docs / ...", "Open / Close" */
.nav-pills .nav-link {
    background-color: #e8e2d4 !important;
    color: var(--bm-blue) !important;
    border: 1px solid var(--bm-border);
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    padding: .4rem .85rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bm-blue) !important;
    border-color: var(--bm-blue);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(201, 149, 79, .28);
}
.nav-link { color: var(--bm-blue); }
.nav-link:hover { color: #1e2025; }

/* DataTables pagination */
.page-link {
    color: var(--bm-blue);
    border-color: var(--bm-border);
}
.page-link:hover {
    color: #1e2025;
    background-color: #e8e2d4;
    border-color: var(--bm-border);
}
.page-link:focus {
    color: #1e2025;
    box-shadow: 0 0 0 3px rgba(201, 149, 79, .18);
}
.active > .page-link,
.page-link.active {
    background-color: var(--bm-blue) !important;
    border-color: var(--bm-blue) !important;
    color: #fff !important;
}
.disabled > .page-link,
.page-link.disabled {
    color: #7b7d84;
    border-color: var(--bm-border);
}

/* A disabled button painted solid teal read as an enabled one. */
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    background-color: #b5ad9a !important;
    border-color: #b5ad9a !important;
    color: #fff !important;
    box-shadow: none;
    opacity: 1;
}

/* Leftover broad-payment artwork (money.gif and friends) - wrong brand, and
   it sits between the content and the footer doing nothing. */
.imgrouded,
.imgbull,
.bgimgbank { display: none !important; }

/* The dashboard's own card headers use .tellus2 / .tellus4 / .tellus8, which
   style.css gives the same decorative ::after images as the form's .tellus. */
.tellus2::after, .tellus4::after, .tellus8::after { display: none !important; }

/* DataTables chrome: keep the controls in the same visual language. */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #b5ad9a !important;
    border-radius: 7px !important;
    padding: .3rem .55rem;
    font-size: .84rem;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--bm-blue) !important;
    box-shadow: 0 0 0 3px rgba(201, 149, 79, .18);
    outline: none;
}


/* ---- Pill tabs that sit ON the blue card header ---------------------
   The KYC & KYB Docs and Information Requested panels put their tabs
   inside .card-header, which is the dark blue gradient band. A solid
   blue active pill there is blue-on-blue and disappears, so inside the
   header the polarity flips: solid white marks the active tab and the
   rest are translucent. ---- */
.card-header .nav-pills .nav-link {
    background-color: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .28);
    color: #fff !important;
}
.card-header .nav-pills .nav-link:hover {
    background-color: rgba(255, 255, 255, .28) !important;
}
.card-header .nav-pills .nav-link.active,
.card-header .nav-pills .show > .nav-link {
    background-color: #fff !important;
    border-color: #fff;
    color: var(--bm-blue) !important;
    box-shadow: 0 3px 10px rgba(7, 27, 60, .22);
}


/* =====================================================================
   DATA TABLES (Active Docs, Information Requested List, ...)
   ---------------------------------------------------------------------
   These are real data grids, not the label/value field cards above, but
   both are a plain <table> inside .card-body - so the card rules' 36/64
   column split was being applied here as well. That squeezed the action
   column until the Download buttons overlapped and "View Notes" wrapped.
   Everything the card rules impose is handed back to the table here.
   ===================================================================== */
.card-body .table-responsive table td,
.card-body table.dataTable td,
.card-body .dt-container table td,
.card-body .dataTables_wrapper table td,
.card-body .table-responsive table th,
.card-body table.dataTable th,
.card-body .dt-container table th,
.card-body .dataTables_wrapper table th {
    width: auto !important;
    display: table-cell !important;
    vertical-align: middle;
    padding: .6rem .7rem;
    font-size: .82rem;
    border-top: 0;
}
.card-body .table-responsive table,
.card-body table.dataTable,
.card-body .dt-container table,
.card-body .dataTables_wrapper table {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    border-top: 0;
    background: transparent;
}

/* Header row */
.card-body .table-responsive table thead th,
.card-body table.dataTable thead th,
.card-body .dt-container table thead th,
.card-body .dataTables_wrapper table thead th {
    background: linear-gradient(180deg, #e8e2d4, #ddd7cb) !important;
    color: #16171a !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid #c6bfae !important;
}

/* Body rows */
.card-body .table-responsive table tbody tr,
.card-body table.dataTable tbody tr,
.card-body .dt-container table tbody tr,
.card-body .dataTables_wrapper table tbody tr { border-bottom: 1px solid #efeae0; }
.card-body .table-responsive table tbody tr:hover td,
.card-body table.dataTable tbody tr:hover td,
.card-body .dt-container table tbody tr:hover td,
.card-body .dataTables_wrapper table tbody tr:hover td { background-color: #fbfaf7 !important; }
.card-body .table-responsive table tbody td,
.card-body table.dataTable tbody td,
.card-body .dt-container table tbody td,
.card-body .dataTables_wrapper table tbody td { color: var(--bm-ink); }

/* The label column in a card is 36% wide and muted; in a data grid the
   first cell is just data. */
.card-body .table-responsive table td:first-child,
.card-body table.dataTable td:first-child,
.card-body .dt-container table td:first-child,
.card-body .dataTables_wrapper table td:first-child {
    color: var(--bm-ink);
    font-weight: 500;
}

/* ---- Action buttons ---- */
.card-body .table-responsive table .btn,
.card-body table.dataTable .btn,
.card-body .dt-container table .btn,
.card-body .dataTables_wrapper table .btn {
    white-space: nowrap;
    padding: .35rem .7rem !important;
    border-radius: 8px !important;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: none;
}
/* Icon-only buttons (Download / Archive) sit several to a cell - lay them
   out in a row with a gap instead of letting them collide. */
.card-body .table-responsive table td .btn + .btn,
.card-body table.dataTable td .btn + .btn,
.card-body .dt-container table td .btn + .btn,
.card-body .dataTables_wrapper table td .btn + .btn { margin-left: .35rem; }
.card-body .table-responsive table td .btn i,
.card-body table.dataTable td .btn i,
.card-body .dt-container table td .btn i,
.card-body .dataTables_wrapper table td .btn i { line-height: 1; }

/* Keep the action column from being squeezed by long text columns. */
.card-body .table-responsive table td:last-child,
.card-body table.dataTable td:last-child,
.card-body .dt-container table td:last-child,
.card-body .dataTables_wrapper table td:last-child,
.card-body .table-responsive table th:last-child,
.card-body table.dataTable th:last-child,
.card-body .dt-container table th:last-child,
.card-body .dataTables_wrapper table th:last-child {
    white-space: nowrap;
    text-align: center;
    width: 1%;
}

/* The wrapper already scrolls; make sure it actually can. */
.card-body .table-responsive { overflow-x: auto; }


/* =====================================================================
   DOCUMENT UPLOAD PAGE (document-page.php, scoped to .bm-docs)
   ===================================================================== */

/* ---- Header ---- */
.bm-docs .bm-docs-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 1.8rem;
}
.bm-docs-check {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .55);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .08);
}
.bm-docs .bm-docs-head .card-title { font-size: 1.45rem; }
.bm-docs-sub { color: rgba(255, 255, 255, .85); font-size: .95rem; }

/* ---- Progress strip ---- */
.bm-docs-track {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
}
.bm-docs-track li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem .4rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bm-muted);
    background: #efeae0;
    border: 1px solid var(--bm-border);
}
.bm-docs-track li span {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: .72rem;
    background: #fff;
    border: 1px solid var(--bm-border);
}
.bm-docs-track li.is-done { color: #0e7a4b; background: #e8f7ef; border-color: #bfe6d0; }
.bm-docs-track li.is-done span { background: #16a36a; border-color: #16a36a; color: #fff; }
.bm-docs-track li.is-current { color: var(--bm-blue); background: #e8e2d4; border-color: #c6bfae; }
.bm-docs-track li.is-current span { background: var(--bm-blue); border-color: var(--bm-blue); color: #fff; }

/* ---- Shared type ---- */
/* style.css sets every <p> to bold, 12px, with 7px padding site-wide - that is
   what made these subtitles bold and nudged them off the heading's edge. */
.bm-docs p { padding: 0; font-weight: 400; }

.bm-docs-h { font-size: 1.1rem; font-weight: 700; color: var(--bm-ink); margin-bottom: .25rem; }
.bm-docs-muted { color: var(--bm-muted); font-size: .88rem; margin-bottom: 1rem; }

.bm-docs-ic {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    font-size: 1.25rem;
}
.bm-docs-ic-blue { background: #e8e2d4; color: var(--bm-blue); }
.bm-docs-ic-gold { background: #fdf3e1; color: #b9832a; }

/* ---- Document checklists ---- */
.bm-docs-list {
    background: #fff;
    border: 1px solid var(--bm-border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(11, 11, 18, .05);
    transition: box-shadow .2s ease, transform .2s ease;
}
.bm-docs-list:hover { box-shadow: 0 8px 22px rgba(11, 11, 18, .09); transform: translateY(-2px); }
.bm-docs-list-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .75rem; }
.bm-docs-list-head h6 { margin: 0; font-weight: 700; color: var(--bm-ink); font-size: .98rem; }
.bm-docs-list-head small { color: var(--bm-muted); font-size: .76rem; }
.bm-docs-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bm-docs-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .88rem;
    color: #24262c;
    line-height: 1.4;
}
.bm-docs-list li i { color: #16a36a; margin-top: .12rem; flex: 0 0 auto; }

/* ---- Upload panel ---- */
.bm-docs-upload {
    background: linear-gradient(180deg, #fbfaf7, #efeae0);
    border: 1px solid var(--bm-border);
    border-radius: 16px;
    padding: 1.3rem 1.3rem 1.1rem;
}
.bm-docs-upload-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }

.bm-docs .doc-row {
    position: relative;
    background: #fff;
    border: 1.5px dashed #c6bfae;
    border-radius: 12px;
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.bm-docs .doc-row:focus-within {
    border-style: solid;
    border-color: var(--bm-blue);
    box-shadow: 0 0 0 4px rgba(201, 149, 79, .10);
}
.bm-docs-row-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: end;
}
.bm-docs-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bm-muted);
    margin-bottom: .3rem;
}
.bm-docs .doc-row .form-select,
.bm-docs .doc-row .form-control { font-size: .86rem; }

.bm-docs .removeDoc {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 !important;
    border-radius: 9px !important;
    border: 1px solid #f3c8c8 !important;
    background: #fff5f5 !important;
    color: #d64545 !important;
    box-shadow: none !important;
}
.bm-docs .removeDoc:hover { background: #fdeaea !important; }
/* The first row cannot be removed, so its hidden button takes no space. */
.bm-docs .removeDoc.d-none { display: none !important; }

.bm-docs .progressBarContainer { margin-top: .65rem; }
.bm-docs .progressBar { width: 100%; height: 6px; accent-color: var(--bm-blue); }

/* The response slot rendered as a shadowed bar even when empty. It only gets
   a box once the upload script has put something in it. */
.bm-docs .response_show:empty { display: none; }
.bm-docs .response_show:not(:empty) {
    margin-top: .65rem;
    padding: .55rem .75rem;
    border-radius: 9px;
    background: #efeae0;
    font-size: .84rem;
}

.bm-docs-add {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .65rem 1rem;
    margin: .1rem 0 1rem;
    border-radius: 11px;
    border: 1.5px dashed var(--bm-blue);
    background: rgba(201, 149, 79, .05);
    color: var(--bm-blue);
    font-weight: 600;
    font-size: .88rem;
    transition: background-color .18s ease;
}
.bm-docs-add:hover { background: rgba(201, 149, 79, .11); }

.bm-docs-secure {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .75rem .9rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--bm-border);
    font-size: .82rem;
    color: var(--bm-muted);
    line-height: 1.45;
}
.bm-docs-secure i { color: #16a36a; font-size: 1.1rem; flex: 0 0 auto; margin-top: .05rem; }
.bm-docs-secure a { color: var(--bm-blue); font-weight: 600; }

/* ---- Actions ---- */
.bm-docs-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--bm-border);
}
.bm-docs .bm-docs-skip {
    background: transparent !important;
    border: 1px solid var(--bm-border) !important;
    color: var(--bm-muted) !important;
    box-shadow: none !important;
    padding: .7rem 1.3rem;
    font-weight: 600;
}
.bm-docs .bm-docs-skip:hover { background: #efeae0 !important; color: var(--bm-ink) !important; }
.bm-docs .bm-docs-go { min-width: 210px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }

@media (max-width: 767.98px) {
    .bm-docs .bm-docs-head { padding: 1.2rem; }
    .bm-docs .bm-docs-head .card-title { font-size: 1.15rem; }
    .bm-docs-row-grid { grid-template-columns: 1fr; }
    .bm-docs-actions { flex-direction: column-reverse; align-items: stretch; }
    .bm-docs .bm-docs-go, .bm-docs .bm-docs-skip { width: 100%; }
}


/* =====================================================================
   NARROW SCREENS - keep this block last
   ---------------------------------------------------------------------
   It overrides the desktop column split above, which is itself
   !important (the markup hard-codes width:50% inline). Equal specificity
   plus equal !important means source order decides, so anything added
   after this block would silently win on mobile too.
   ===================================================================== */
/* ---- Narrow screens: a 42/58 label split is unusable on a phone,
   so each field becomes label-over-input. ---- */
@media (max-width: 575.98px) {
    /* The whole table has to leave table layout together. Switching only
       the cells to display:block leaves <tr> as a table-row, so each cell
       gets wrapped in an anonymous cell that shrinks to fit its content -
       which is why the inputs stayed ~200px wide instead of filling. */
    .card-body table,
    .card-body table tbody,
    .card-body table tr,
    .card-body table th,
    .card-body table td,
    .card-body table td:first-child,
    .card-body table td + td {
        display: block;
        /* beats the 36/64 desktop split, which is itself !important */
        width: 100% !important;
    }
    .card-body table td:first-child {
        padding-bottom: .15rem;
        font-size: .76rem;
    }
    .card-body table tbody tr + tr td { border-top: 0; }
    .card-body table tbody tr + tr td:first-child {
        border-top: 1px solid #efeae0;
        padding-top: .7rem;
    }

    /* Data tables must NOT become a stack of blocks - they scroll sideways
       in their .table-responsive wrapper instead. Without this the rule
       above turns every cell into a full-width block and the grid collapses
       into one long column. */
    .card-body .table-responsive table td,
    .card-body .table-responsive table th,
    .card-body .table-responsive table tr,
    .card-body .table-responsive table tbody,
    .card-body .table-responsive table,
    .card-body table.dataTable td,
    .card-body table.dataTable th,
    .card-body table.dataTable tr,
    .card-body table.dataTable tbody,
    .card-body table.dataTable ,
    .card-body .dt-container table td,
    .card-body .dt-container table th,
    .card-body .dt-container table tr,
    .card-body .dt-container table tbody,
    .card-body .dt-container table,
    .card-body .dataTables_wrapper table td,
    .card-body .dataTables_wrapper table th,
    .card-body .dataTables_wrapper table tr,
    .card-body .dataTables_wrapper table tbody,
    .card-body .dataTables_wrapper table {
        display: revert !important;
        width: auto !important;
    }
}

/* Partner / Prevet header logo: style.css whitens it with a brightness(0)
   invert(1) filter, which was built for the old monochrome mark. The Silver Lines
   wordmark (images/logo.svg) is already light-on-dark with a lime mark, so
   the filter only erases its colour. */
.logopartner { filter: none !important; }

/* =====================================================================
   Silver Lines edges: cut steel and stamped leather - zero radius on the
   boarding chrome, matching the marketing site.
   ===================================================================== */
.card, .card-header, .card-body, .btn, .form-control, .form-select, .input-group-text,
.alert, .modal-content, .dropdown-menu, .nav-pills .nav-link, .badge, .select2-container .select2-selection--single,
.bm-docs-add, .table, .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
    border-radius: 0 !important;
}