/* =====================================================
   ARC MEMBER BILLS PAGE
   Cream + navy + gold, matching the home page.
   Load AFTER style.css.
   ===================================================== */

:root {
    --mb-navy: #132b4a;
    --mb-navy-deep: #0b1a2e;
    --mb-navy-mid: #1a3a5c;
    --mb-gold: #c9a24a;
    --mb-gold-light: #e4c477;
    --mb-gold-pale: #f6e2a6;
    --mb-cream: #fbfaf6;
    --mb-cream-deep: #f4efe4;
    --mb-muted: #5d6b79;
    --mb-line: #e6e1d4;
    --mb-gutter: clamp(16px, 4vw, 48px);
    --mb-serif: "Cinzel", Georgia, "Times New Roman", serif;
    --mb-sans: "Jost", Arial, Helvetica, sans-serif;
}

html:has(body.mb-body),
body.mb-body {
    overflow-x: clip;
}

.mb-body {
    background: var(--mb-cream);
    color: var(--mb-navy);
    font-family: var(--mb-sans);
}

.mb-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-left: var(--mb-gutter);
    padding-right: var(--mb-gutter);
}

[hidden] {
    display: none !important;
}


/* =====================================================
   HEADER (same look as the guest room page)
   ===================================================== */

.mb-header {
    position: relative;
    z-index: 20;
    text-align: center;
    padding: clamp(26px, 3.4vw, 44px) 20px clamp(18px, 2.4vw, 28px);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 65%),
        linear-gradient(180deg, var(--mb-cream) 0%, var(--mb-cream-deep) 100%);
    border-bottom: 1px solid rgba(201, 162, 74, 0.35);
}

.mb-logo {
    position: absolute;
    top: clamp(12px, 1.6vw, 22px);
    left: clamp(12px, 2vw, 28px);
    z-index: 2;
}

.mb-logo img {
    display: block;
    width: clamp(56px, 6.5vw, 92px);
    height: clamp(56px, 6.5vw, 92px);
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16));
}

.mb-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 20px);
    margin: 0;
    font-family: var(--mb-serif);
    font-weight: 600;
    font-size: clamp(11px, 1.15vw, 15px);
    letter-spacing: 0.3em;
    padding-left: 0.3em;
    color: var(--mb-navy);
}

.mb-kicker::before,
.mb-kicker::after {
    content: "";
    flex: 0 1 clamp(24px, 10vw, 150px);
    height: 1.5px;
    background: linear-gradient(90deg, rgba(201, 162, 74, 0), var(--mb-gold) 35%, var(--mb-gold-light));
}

.mb-kicker::after {
    background: linear-gradient(270deg, rgba(201, 162, 74, 0), var(--mb-gold) 35%, var(--mb-gold-light));
}

.mb-title {
    margin: clamp(4px, 0.6vw, 8px) 0 0;
    font-family: var(--mb-serif);
    font-weight: 700;
    font-size: clamp(34px, 4.6vw, 64px);
    line-height: 1.04;
    letter-spacing: 0.04em;
    padding-left: 0.04em;
    background: linear-gradient(90deg, #0b1a2e 0%, #1a3a5c 25%, #24507e 50%, #1a3a5c 75%, #0b1a2e 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 6px 14px rgba(11, 26, 46, 0.16));
    animation: mbShimmer 7s ease-in-out infinite;
}

@keyframes mbShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.mb-ribbon {
    display: inline-block;
    margin: clamp(10px, 1.1vw, 14px) 0 0;
    padding: 0.5em 1.6em 0.45em;
    font-family: var(--mb-serif);
    font-weight: 600;
    font-size: clamp(10px, 1.2vw, 16px);
    letter-spacing: 0.14em;
    color: var(--mb-navy);
    white-space: nowrap;
    background: linear-gradient(90deg, #b88d32 0%, #e4c477 18%, #f6e2a6 50%, #e4c477 82%, #b88d32 100%);
    border-radius: 999px;
    box-shadow:
        0 6px 18px rgba(120, 90, 20, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(120, 90, 20, 0.2);
}

.mb-header .hamburger-container {
    top: clamp(14px, 1.8vw, 24px);
    right: clamp(12px, 2vw, 28px);
    z-index: 1000;
}

.mb-header .hamburger-button {
    background: rgba(15, 36, 64, 0.94);
    border-color: var(--mb-gold);
}

.mb-header .hamburger-button span {
    background: var(--mb-gold-light);
}

.mb-header .hamburger-button:hover {
    background: var(--mb-gold-light);
}

.mb-header .hamburger-button:hover span {
    background: #0f2440;
}

.mb-header .side-menu {
    text-align: left;
}


/* =====================================================
   BREADCRUMB + DEMO NOTICE
   ===================================================== */

.mb-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 18px 0 6px;
    font-size: 13px;
    color: var(--mb-muted);
}

.mb-breadcrumb li + li::before {
    content: "›";
    margin-right: 6px;
    color: var(--mb-gold);
}

.mb-breadcrumb a {
    color: var(--mb-navy);
    text-decoration: none;
    font-weight: 500;
}

.mb-breadcrumb a:hover {
    color: var(--mb-gold);
}




/* =====================================================
   PAYMENT NOTICE (top of the page)
   ===================================================== */

.mb-policy-wrap {
    padding-bottom: clamp(36px, 5vw, 56px);
}

.mb-policy {
    position: relative;
    margin: 0;
    padding: 18px 22px 16px 22px;
    border: 1px solid rgba(201, 162, 74, 0.55);
    border-left: 4px solid var(--mb-gold);
    border-radius: 14px;
    background: linear-gradient(135deg, #fffaf0 0%, #fbf1d6 100%);
    box-shadow: 0 10px 26px rgba(120, 90, 20, 0.08);
}

.mb-policy h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-family: var(--mb-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mb-navy);
}

.mb-policy h2 svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #b88d32;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mb-policy ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mb-policy li {
    position: relative;
    padding: 3px 0 3px 18px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mb-navy);
}

.mb-policy li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mb-gold);
}

.mb-policy p {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(201, 162, 74, 0.55);
    font-size: 14.5px;
    font-weight: 600;
    color: #8a6a1f;
}

@media (max-width: 600px) {

    .mb-policy {
        padding: 16px 16px 14px;
    }

    .mb-policy li,
    .mb-policy p {
        font-size: 13.5px;
    }
}


/* =====================================================
   LOOK-UP SECTION
   ===================================================== */

.mb-lookup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding-top: clamp(24px, 4vw, 48px);
    padding-bottom: clamp(24px, 3vw, 36px);
}

.mb-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mb-gold);
}

.mb-lookup-text h2 {
    margin: 0;
    font-family: var(--mb-serif);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.18;
    color: var(--mb-navy);
}

.mb-lead {
    max-width: 520px;
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--mb-muted);
}

.mb-points {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.mb-points li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.mb-point-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--mb-navy-mid), var(--mb-navy-deep));
}

.mb-point-icon svg,
.mb-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mb-point-icon svg {
    stroke: var(--mb-gold-light);
}

.mb-points h3 {
    margin: 2px 0 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--mb-navy);
}

.mb-points p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mb-muted);
}


/* ---------- FORM CARD ---------- */

.mb-card {
    position: relative;
    padding: 30px 28px 24px;
    border: 1px solid rgba(201, 162, 74, 0.45);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(228, 196, 119, 0.18), transparent 45%),
        linear-gradient(160deg, var(--mb-navy-mid) 0%, var(--mb-navy) 45%, var(--mb-navy-deep) 100%);
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(11, 26, 46, 0.28);
    overflow: hidden;
}

.mb-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #b88d32, #f6e2a6, #b88d32);
}

.mb-card-title {
    margin: 0 0 20px;
    font-family: var(--mb-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mb-gold-light);
}

.mb-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

.mb-field label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #b8c6d0;
}

.mb-field input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: var(--mb-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.35em;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mb-field input::placeholder {
    font-family: var(--mb-sans);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.35);
}

.mb-field input:focus {
    border-color: var(--mb-gold-light);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 4px rgba(228, 196, 119, 0.15);
}

.mb-hint {
    font-size: 12.5px;
    line-height: 1.45;
    color: #9fb1bc;
}

.mb-error {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 140, 140, 0.45);
    border-radius: 10px;
    background: rgba(160, 30, 30, 0.22);
    font-size: 14px;
    line-height: 1.45;
    color: #ffd7d7;
}

.mb-card-help {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    color: #9fb1bc;
}

.mb-card-help a {
    color: var(--mb-gold-light);
    font-weight: 600;
    text-decoration: none;
}


/* =====================================================
   BUTTONS
   ===================================================== */

.mb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--mb-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.mb-btn svg {
    stroke: currentColor;
}

.mb-btn:hover {
    transform: translateY(-1px);
}

.mb-btn:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.mb-btn-block {
    display: flex;
    width: 100%;
}

.mb-btn-gold {
    background: linear-gradient(90deg, #c9a24a 0%, #e9cd84 50%, #c9a24a 100%);
    color: var(--mb-navy-deep);
    box-shadow: 0 8px 20px rgba(201, 162, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mb-btn-navy {
    background: var(--mb-navy);
    border-color: var(--mb-gold);
    color: var(--mb-gold-light);
}

.mb-btn-navy:hover {
    background: var(--mb-navy-deep);
}

.mb-btn-ghost {
    background: transparent;
    border-color: var(--mb-line);
    color: var(--mb-navy);
}

.mb-btn-ghost:hover {
    border-color: var(--mb-gold);
}

.mb-body a:focus-visible,
.mb-body button:focus-visible {
    outline: 2px solid var(--mb-gold);
    outline-offset: 3px;
}


/* =====================================================
   RESULT
   ===================================================== */

.mb-result {
    padding-bottom: clamp(40px, 6vw, 72px);
    scroll-margin-top: 16px;
}

.mb-result-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--mb-line);
}

.mb-result-title {
    margin: 0;
    font-family: var(--mb-serif);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    color: var(--mb-navy);
}

/* month chips */
.mb-months {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mb-month {
    padding: 8px 14px;
    border: 1px solid var(--mb-line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--mb-navy);
    font-family: var(--mb-sans);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mb-month:hover {
    border-color: var(--mb-gold);
}

.mb-month[aria-selected="true"] {
    background: var(--mb-navy);
    border-color: var(--mb-navy);
    color: var(--mb-gold-light);
}


/* ---------- THE BILL ---------- */

.mb-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.mb-bill {
    position: relative;
    max-width: 440px;
    margin: 0 auto;
    border: 1px solid var(--mb-line);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(19, 43, 74, 0.14);
    overflow: hidden;
}

/* navy header band */
.mb-bill-band {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(228, 196, 119, 0.22), transparent 50%),
        linear-gradient(135deg, var(--mb-navy-deep) 0%, var(--mb-navy) 55%, var(--mb-navy-mid) 100%);
    color: #ffffff;
}

/* thin gold edge under the band */
.mb-bill-band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #b88d32, #f6e2a6, #b88d32);
}

.mb-bill-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.mb-bill-brand img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    padding: 2px;
}

.mb-bill-brand div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.mb-bill-org {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-gold-light);
}

.mb-bill-name {
    font-family: var(--mb-serif);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffffff;
}

.mb-bill-period {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}

.mb-bill-month {
    font-family: var(--mb-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--mb-gold-light);
    white-space: nowrap;
}

/* Paid / Unpaid badge */
.mb-status {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.mb-status.is-paid {
    background: #2e9b57;
    color: #ffffff;
}

.mb-status.is-unpaid {
    background: #f2c14e;
    color: #3d2a00;
}

/* member */
.mb-bill-member {
    padding: 20px 22px 4px;
}

.mb-bill-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mb-gold);
}

.mb-bill-person {
    display: block;
    margin-top: 4px;
    font-family: var(--mb-serif);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mb-navy);
    overflow-wrap: anywhere;
}

.mb-bill-prof {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mb-muted);
}

.mb-bill-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px dashed var(--mb-line);
}

.mb-bill-facts dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mb-muted);
}

.mb-bill-facts dd {
    margin: 3px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--mb-navy);
    overflow-wrap: anywhere;
}

/* grand total card */
.mb-bill-due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 22px 4px;
    padding: 14px 18px;
    border: 1px solid rgba(201, 162, 74, 0.55);
    border-radius: 14px;
    background: linear-gradient(135deg, #fffaf0 0%, #f8edcf 100%);
}

.mb-bill-due span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a6a1f;
}

.mb-bill-due strong {
    font-family: var(--mb-serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--mb-navy);
    font-variant-numeric: tabular-nums;
}

/* the 14 lines */
.mb-bill-table {
    width: calc(100% - 44px);
    min-width: 0 !important;   /* style.css makes tables 520px wide on phones */
    margin: 0 22px;
    border-collapse: collapse;
    background: transparent;
    font-size: 14px;
}

.mb-bill-table caption {
    padding: 18px 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: left;
    color: var(--mb-muted);
}

.mb-bill-table td,
.mb-bill-table th {
    background: transparent;   /* style.css paints every table heading navy */
    padding: 7px 4px;
    border: 0;
    border-bottom: 1px solid #f0ece2;
    text-align: left;
    font-weight: 400;
    color: var(--mb-navy);
}

.mb-bill-table tr:nth-child(even) {
    background: transparent;
}

/* number in a small circle */
.mb-bill-table .mb-no {
    width: 34px;
    padding-right: 0;
}

.mb-bill-table .mb-no span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1eee6;
    font-size: 11px;
    font-weight: 600;
    color: var(--mb-muted);
    font-variant-numeric: tabular-nums;
}

.mb-bill-table td:last-child {
    width: 96px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mb-bill-table td.is-empty {
    color: #c6ccd3;
    font-weight: 400;
}

.mb-bill-table tfoot td,
.mb-bill-table tfoot th {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 0;
    border-top: 2px solid var(--mb-navy);
    font-weight: 700;
}

.mb-bill-table tfoot .mb-no span {
    background: var(--mb-gold);
    color: #ffffff;
}

.mb-bill-table tfoot td:last-child {
    font-size: 16px;
}

.mb-bill-notes {
    margin: 14px 22px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--mb-gold);
    border-radius: 0 10px 10px 0;
    background: var(--mb-cream);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mb-navy);
    white-space: pre-wrap;
}

/* footer: queries left, "no signature required" strip bottom right */
.mb-bill-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 22px 18px;
    border-top: 1px dashed var(--mb-line);
    background: var(--mb-cream);
}

.mb-bill-contact {
    font-size: 12px;
    font-weight: 500;
    color: var(--mb-muted);
}

.mb-bill-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 9px;
    border: 1px solid rgba(201, 162, 74, 0.6);
    border-radius: 10px;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: var(--mb-navy);
    text-align: left;
}

.mb-bill-stamp svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--mb-gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mb-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.mb-paynote {
    margin: 16px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--mb-muted);
}


/* "Under verification" badge on the bill */
.mb-status.is-pending {
    background: #5aa9e6;
    color: #0b1a2e;
    font-size: 9.5px;
    letter-spacing: 0.08em;
}

.mb-status {
    white-space: nowrap;
}

/* Part payment badges */
.mb-status.is-partial {
    background: #e8893a;
    color: #ffffff;
}

.mb-status.is-carried {
    background: #8fa1ad;
    color: #0b1a2e;
}

/* Received / balance under the grand total */
.mb-bill-part {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 8px 22px 0;
}

.mb-bill-part div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border: 1px solid var(--mb-line);
    border-radius: 12px;
    background: #ffffff;
}

.mb-bill-part div + div {
    border-color: rgba(232, 137, 58, 0.55);
    background: #fff6ee;
}

.mb-bill-part span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mb-muted);
}

.mb-bill-part b {
    font-size: 16px;
    color: var(--mb-navy);
    font-variant-numeric: tabular-nums;
}

/* "ARC has received ..." line in the Pay panel */
.mb-pay-partinfo {
    margin: 10px 0 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 13px;
    line-height: 1.5;
    color: #dfe7ec;
}

/* short-payment warning in the receipt form */
.mb-pay-short {
    margin: -2px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(242, 193, 78, 0.55);
    border-radius: 10px;
    background: rgba(242, 193, 78, 0.12);
    font-size: 13px;
    line-height: 1.5;
    color: #fbe3a6;
}



/* =====================================================
   RESULT LAYOUT - bill on the left, Pay panel on the right
   ===================================================== */

.mb-result-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.mb-bill-col {
    min-width: 0;
}


/* =====================================================
   PAY THIS BILL
   ===================================================== */

.mb-pay {
    position: relative;
    padding: 26px 24px 24px;
    border: 1px solid rgba(201, 162, 74, 0.45);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(228, 196, 119, 0.16), transparent 45%),
        linear-gradient(160deg, var(--mb-navy-mid) 0%, var(--mb-navy) 45%, var(--mb-navy-deep) 100%);
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(11, 26, 46, 0.26);
    overflow: hidden;
}

.mb-pay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #b88d32, #f6e2a6, #b88d32);
}

.mb-pay-step {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid rgba(228, 196, 119, 0.5);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-gold-light);
}

.mb-pay-title {
    margin: 10px 0 0;
    font-family: var(--mb-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #ffffff;
}

.mb-pay-subtitle {
    margin: 10px 0 14px;
    font-family: var(--mb-serif);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.mb-pay-amount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fffaf0 0%, #f8edcf 100%);
}

.mb-pay-amount span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a6a1f;
}

.mb-pay-amount strong {
    font-family: var(--mb-serif);
    font-size: 24px;
    color: var(--mb-navy);
    font-variant-numeric: tabular-nums;
}

.mb-pay-lead {
    margin: 14px 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #c9d4dc;
}

.mb-pay-lead b {
    color: #ffffff;
}

/* account details with copy buttons */
.mb-pay-details {
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    overflow: hidden;
}

.mb-pay-details > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
}

.mb-pay-details > div + div {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mb-pay-details dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9fb1bc;
}

.mb-pay-details dd {
    margin: 3px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.mb-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid rgba(228, 196, 119, 0.45);
    border-radius: 999px;
    background: transparent;
    color: var(--mb-gold-light);
    font-family: var(--mb-sans);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.mb-copy:hover,
.mb-copy.is-copied {
    background: var(--mb-gold-light);
    color: var(--mb-navy-deep);
}

.mb-copy svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mb-pay-qr {
    margin: 14px 0 0;
    padding: 14px;
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
}

.mb-pay-qr img {
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    object-fit: contain;
}

.mb-pay-qr figcaption {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mb-navy);
}

.mb-pay-divider {
    height: 1px;
    margin: 22px 0 18px;
    background: linear-gradient(90deg, transparent, rgba(228, 196, 119, 0.55), transparent);
}

/* receipt form - smaller fields than the look-up form */
.mb-receipt .mb-field {
    margin-bottom: 14px;
}

.mb-receipt .mb-field label {
    font-size: 11px;
}

.mb-receipt .mb-field input,
.mb-receipt .mb-field select,
.mb-receipt .mb-field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: var(--mb-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    outline: none;
    color-scheme: dark;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mb-receipt .mb-field input::placeholder,
.mb-receipt .mb-field textarea::placeholder {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
}

.mb-receipt .mb-field select option {
    color: #12263f;
}

.mb-receipt .mb-field textarea {
    resize: vertical;
    min-height: 60px;
}

.mb-receipt .mb-field input:focus,
.mb-receipt .mb-field select:focus,
.mb-receipt .mb-field textarea:focus {
    border-color: var(--mb-gold-light);
    box-shadow: 0 0 0 4px rgba(228, 196, 119, 0.15);
}

.mb-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #8fa1ad;
}

.mb-pay-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

/* file picker */
.mb-drop {
    position: relative;
    display: block;
    margin-bottom: 16px;
    padding: 16px;
    border: 1.5px dashed rgba(228, 196, 119, 0.55);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.mb-drop:hover,
.mb-drop.is-over {
    background: rgba(228, 196, 119, 0.08);
    border-color: var(--mb-gold-light);
}

.mb-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.mb-drop:focus-within {
    outline: 2px solid var(--mb-gold);
    outline-offset: 3px;
}

.mb-drop-empty,
.mb-drop-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.mb-drop-empty svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--mb-gold-light);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mb-drop strong {
    font-size: 15px;
    color: #ffffff;
}

.mb-drop small {
    font-size: 12px;
    color: #9fb1bc;
}

.mb-drop-file img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    object-fit: contain;
}

.mb-file-pdf {
    display: grid;
    place-items: center;
    width: 46px;
    height: 56px;
    border-radius: 6px;
    background: #c0392b;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

.mb-file-name {
    max-width: 100%;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.mb-pay-rejected {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 140, 140, 0.45);
    border-radius: 10px;
    background: rgba(160, 30, 30, 0.22);
    font-size: 13.5px;
    line-height: 1.45;
    color: #ffd7d7;
}

/* submitted / paid states */
.mb-pay-done {
    padding: 10px 0 4px;
    text-align: center;
}

.mb-pay-done p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #c9d4dc;
}

.mb-pay-done p b {
    color: #ffffff;
}

.mb-pay-small {
    font-size: 13px !important;
}

.mb-pay-small a {
    color: var(--mb-gold-light);
    font-weight: 600;
    text-decoration: none;
}

.mb-pay-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.mb-pay-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mb-pay-icon.is-pending {
    background: rgba(90, 169, 230, 0.18);
    color: #8cc7f2;
}

.mb-pay-icon.is-paid {
    background: rgba(46, 155, 87, 0.22);
    color: #6fd39a;
}

.mb-linkbtn {
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mb-gold-light);
    font-family: var(--mb-sans);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}


/* =====================================================
   CLOSING BAND + BACK TO HOME
   ===================================================== */

.mb-cta-wave {
    display: block;
    width: 100%;
    height: clamp(50px, 7vw, 100px);
    margin-bottom: -1px;
}

.mb-cta-inner {
    background: linear-gradient(90deg, #0b1a2e 0%, #132b4a 55%, #1a3a5c 100%);
    padding: clamp(10px, 2vw, 24px) 0 clamp(36px, 5vw, 56px);
}

.mb-cta-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 40px;
    flex-wrap: wrap;
}

.mb-cta-kicker {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mb-gold-light);
}

.mb-cta h2 {
    margin: 0;
    font-family: var(--mb-serif);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    color: #ffffff;
}

.mb-cta-number {
    font-family: var(--mb-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mb-gold-light);
    text-decoration: none;
}

.mb-home {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: clamp(28px, 4vw, 44px);
    padding-top: clamp(24px, 3.4vw, 36px);
}

.mb-home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(520px, 80%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(228, 196, 119, 0), rgba(228, 196, 119, 0.6), rgba(228, 196, 119, 0));
}

.mb-home-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 8px 10px 8px 8px;
    border: 1px solid rgba(228, 196, 119, 0.55);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.mb-home-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(246, 226, 166, 0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
}

.mb-home-btn:hover {
    border-color: var(--mb-gold-light);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), 0 0 0 4px rgba(228, 196, 119, 0.12);
}

.mb-home-btn:hover::after {
    left: 120%;
}

.mb-home-arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b88d32 0%, #e9cd84 50%, #c9a24a 100%);
    color: var(--mb-navy-deep);
    box-shadow: 0 6px 16px rgba(201, 162, 74, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.mb-home-btn:hover .mb-home-arrow {
    transform: translateX(-4px);
}

.mb-home-arrow svg,
.mb-home-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mb-home-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-family: var(--mb-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.mb-home-text small {
    font-family: var(--mb-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mb-gold-light);
}

.mb-home-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: 6px;
    border-left: 1px solid rgba(228, 196, 119, 0.3);
    color: var(--mb-gold-light);
}

.mb-body footer {
    margin-top: 0;
    background: var(--mb-navy-deep);
    border-top: 1px solid rgba(201, 162, 74, 0.35);
}


/* =====================================================
   TABLET + PHONE
   ===================================================== */

@media (max-width: 960px) {

    .mb-result-grid {
        grid-template-columns: 1fr;
    }

    .mb-pay {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {

    .mb-lookup {
        grid-template-columns: 1fr;
    }

    .mb-card {
        max-width: 520px;
        width: 100%;
    }
}

@media (max-width: 700px) {

    .mb-header {
        padding-top: 78px;
    }

    .mb-actions .mb-btn {
        flex: 1 1 100%;
    }

    .mb-cta-grid {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {

    .mb-kicker {
        font-size: 10px;
        letter-spacing: 0.18em;
        padding-left: 0.18em;
    }

    .mb-ribbon {
        letter-spacing: 0.08em;
        padding-left: 1.1em;
        padding-right: 1.1em;
    }

    .mb-card,
    .mb-pay {
        padding: 26px 18px 20px;
    }

    .mb-pay-row {
        grid-template-columns: 1fr;
    }

    .mb-bill-band,
    .mb-bill-member,
    .mb-bill-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mb-bill-due,
    .mb-bill-part {
        margin-left: 16px;
        margin-right: 16px;
    }

    .mb-bill-table {
        width: calc(100% - 32px);
        margin: 0 16px;
    }

    .mb-bill-notes {
        margin-left: 16px;
        margin-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mb-title {
        animation: none;
    }

    .mb-btn,
    .mb-home-btn,
    .mb-home-btn::after,
    .mb-home-arrow {
        transition: none;
    }

    .mb-btn:hover,
    .mb-home-btn:hover,
    .mb-home-btn:hover .mb-home-arrow {
        transform: none;
    }
}


/* =====================================================
   PRINT - only the bill is printed
   ===================================================== */

@media print {

    @page {
        margin: 14mm;
    }

    body.mb-body {
        background: #ffffff;
        padding: 0;
    }

    .mb-header,
    .mb-breadcrumb,
    .mb-policy-wrap,
    .mb-lookup,
    .mb-result-bar,
    .mb-actions,
    .mb-paynote,
    .mb-pay,
    .mb-cta,
    .mb-body footer {
        display: none !important;
    }

    .mb-result {
        padding: 0;
    }

    .mb-result-grid {
        display: block;
    }

    .mb-wrap {
        max-width: none;
        padding: 0;
    }

    .mb-bill {
        max-width: 115mm;
        border: 1px solid #d8d2c2;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}