/* BLUEMIXPAY UI fixes v25 */

/* ── Autofill: keep our field colours instead of the browser's white/blue box ── */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bmp-surface, #fff) inset !important;
  box-shadow: 0 0 0 1000px var(--bmp-surface, #fff) inset !important;
  -webkit-text-fill-color: var(--bmp-text, #010f3e) !important;
  caret-color: var(--bmp-text, #010f3e);
  transition: background-color 600000s 0s, color 600000s 0s;
  border-radius: 10px;
}
ion-input .native-input:-webkit-autofill { background-clip: content-box !important; }

/* ── Sign-in: icons, show/hide password, background ── */
bmp-login .bmp-field, bmp-register .bmp-field { position: relative; }
bmp-login ion-input#email, bmp-login ion-input#password { --padding-start: 44px; }
bmp-login ion-input#email::before, bmp-login ion-input#password::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; z-index: 3; pointer-events: none;
  background: no-repeat center / 18px 18px;
}
bmp-login ion-input#email::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E"); }
bmp-login ion-input#password::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.bmp-has-eye { position: relative; }
.bmp-has-eye ion-input { --padding-end: 48px; }
.bmp-eye {
  position: absolute; right: 6px; width: 40px; height: 40px; z-index: 4; border: 0; background: transparent; border-radius: 10px;
  display: grid; place-items: center; color: var(--bmp-text-muted, #64748b); cursor: pointer; padding: 0;
}
.bmp-eye:hover, .bmp-eye:focus-visible { color: var(--bmp-navy-900, #010f3e); background: rgba(1, 15, 62, .06); outline: none; }
:root.bmp-dark .bmp-eye:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* left brand panel: more breathing room from the screen edge on wide screens */
bmp-auth-layout .wrap .brand { padding: 48px clamp(48px, 7vw, 140px); }
/* minimal background design behind the form (desktop + phone) */
bmp-auth-layout .wrap .form-side {
  background-color: var(--bmp-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 60C200 10 330 140 520 90S760 20 800 50' stroke='%23010F3E' stroke-opacity='.07' stroke-width='1.5'/%3E%3Cpath d='M0 82C200 32 330 162 520 112S760 42 800 72' stroke='%23010F3E' stroke-opacity='.07' stroke-width='1.5'/%3E%3Cpath d='M0 104C200 54 330 184 520 134S760 64 800 94' stroke='%23F5B21B' stroke-opacity='.35' stroke-width='1.5'/%3E%3Cpath d='M0 126C200 76 330 206 520 156S760 86 800 116' stroke='%23010F3E' stroke-opacity='.07' stroke-width='1.5'/%3E%3Cpath d='M0 148C200 98 330 228 520 178S760 108 800 138' stroke='%23010F3E' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 300C180 360 360 230 560 290S760 360 800 320' stroke='%23010F3E' stroke-opacity='.06' stroke-width='1.5'/%3E%3Cpath d='M0 278C180 338 360 208 560 268S760 338 800 298' stroke='%23010F3E' stroke-opacity='.06' stroke-width='1.5'/%3E%3Cpath d='M0 256C180 316 360 186 560 246S760 316 800 276' stroke='%23010F3E' stroke-opacity='.06' stroke-width='1.5'/%3E%3Cpath d='M0 234C180 294 360 164 560 224S760 294 800 254' stroke='%23010F3E' stroke-opacity='.06' stroke-width='1.5'/%3E%3Cpath d='M0 212C180 272 360 142 560 202S760 272 800 232' stroke='%23010F3E' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center bottom;
  background-size: 100% 220px, 100% 220px;
}
:root.bmp-dark bmp-auth-layout .wrap .form-side { background-image: none; }
@media (max-width: 860px) {
  bmp-auth-layout .wrap .form-side { background-color: var(--bmp-bg); background-position: center top 58px, center bottom; background-size: 100% 150px, 100% 170px; }
}
/* "New to BLUEMIXPAY? Create a merchant account" on one line (wide screens only — phones wrap, never overflow) */
@media (min-width: 861px) { bmp-login .alt { white-space: nowrap; } }
bmp-login .bmp-auth-card, bmp-login form, bmp-login .bmp-field { max-width: 100%; min-width: 0; }
bmp-auth-layout .wrap .form-side { min-width: 0; overflow-x: hidden; }

/* ── Phone pages: never wider than the screen ── */
.bmp-page > * { min-width: 0; }

/* Reports: date presets scroll sideways, KPI cards resize to the phone */
bmp-reports .controls { min-width: 0; }
bmp-reports .seg { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
bmp-reports .seg::-webkit-scrollbar { display: none; }
bmp-reports .seg button { flex: 0 0 auto; white-space: nowrap; }
bmp-reports .bmp-kpi { min-width: 0; }
bmp-reports .bmp-kpi .v, bmp-reports .bmp-kpi .s { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .bmp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bmp-kpi { padding: 12px 14px; }
  .bmp-kpi .k { font-size: .75rem; }
  .bmp-kpi .v { font-size: 1.05rem; }
  .bmp-kpi .s { font-size: .6875rem; }
  bmp-reports .cons { grid-template-columns: 1fr 1fr; }
  bmp-reports .cons b { font-size: 1.05rem; overflow-wrap: anywhere; }
  bmp-reports .chart { max-width: 100%; }
}

/* ── Modals on phones (e.g. Settings › Team › Invite staff): clear the status bar ── */
@media (max-width: 767px) {
  ion-modal .bmp-modal-body { padding-top: calc(var(--ion-safe-area-top, 0px) + 12px); }
  ion-modal .bmp-modal-title {
    margin: -12px -20px 16px; padding: 14px 12px 14px 20px;
    background: linear-gradient(120deg, var(--bmp-surface-2, #eef2f8) 0%, var(--bmp-surface, #fff) 100%);
    border-bottom: 1px solid var(--bmp-border, #e2e8f0);
  }
  ion-modal .bmp-modal-title h2, ion-modal .bmp-modal-title h3 { margin: 0; font-size: 1.125rem; }
}

/* ── Pager "Previous · Page 1 of 1 · Next" lined up ── */
.bmp-pager { gap: 8px; flex-wrap: wrap; }
.bmp-pager > span:last-child { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bmp-pager ion-button { --border-radius: 999px; --padding-start: 12px; --padding-end: 12px; margin: 0; }
@media (max-width: 720px) {
  .bmp-pager ion-button { --background: var(--bmp-surface-2, #eef2f8); height: 30px; font-size: .75rem; }
}

/* ── Customers on phones: one card per customer with icons ── */
@media (max-width: 720px) {
  bmp-customers .bmp-table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  bmp-customers .bmp-table tbody tr {
    background: var(--bmp-surface); border: 1px solid var(--bmp-border); border-radius: 16px; box-shadow: var(--bmp-shadow-sm);
    padding: 14px 16px; margin-bottom: 12px;
  }
  bmp-customers .bmp-table td { align-items: center; padding: 6px 0; font-size: .875rem; }
  bmp-customers .bmp-table td + td { border-top: 1px solid var(--bmp-border); }
  bmp-customers .bmp-table td[data-label="Name"] { justify-content: flex-start; gap: 12px; padding: 0 0 10px; font-size: 1rem; }
  bmp-customers .bmp-table td[data-label="Name"]::before {
    content: ""; width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
    background: rgba(245, 178, 27, .22) no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010F3E' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
  }
  bmp-customers .bmp-table td[data-label="Email"]::before, bmp-customers .bmp-table td[data-label="Phone"]::before,
  bmp-customers .bmp-table td[data-label="Country"]::before, bmp-customers .bmp-table td[data-label="Added"]::before {
    padding-left: 24px; background: no-repeat left center / 16px 16px; min-height: 18px; line-height: 18px; flex-shrink: 0;
  }
  bmp-customers .bmp-table td[data-label="Email"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E"); }
  bmp-customers .bmp-table td[data-label="Phone"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 13l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
  bmp-customers .bmp-table td[data-label="Country"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
  bmp-customers .bmp-table td[data-label="Added"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
  bmp-customers .bmp-pager { background: var(--bmp-surface); border: 1px solid var(--bmp-border); border-radius: 14px; }
}

/* ── Invoice line items on phones: show the field labels ── */
@media (max-width: 760px) {
  bmp-invoice-editor .line { row-gap: 30px !important; padding-top: 30px !important; position: relative; }
  bmp-invoice-editor .line > :nth-child(-n+5) { position: relative; overflow: visible; }
  bmp-invoice-editor .line > :nth-child(-n+5)::after {
    position: absolute; left: 2px; top: -20px; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--bmp-text-muted); white-space: nowrap; pointer-events: none;
  }
  bmp-invoice-editor .line > :nth-child(1)::after { content: "Description"; }
  bmp-invoice-editor .line > :nth-child(2)::after { content: "Qty"; }
  bmp-invoice-editor .line > :nth-child(3)::after { content: "Unit price"; }
  bmp-invoice-editor .line > :nth-child(4)::after { content: "Discount"; }
  bmp-invoice-editor .line > :nth-child(5)::after { content: "VAT %"; }
}

/* ── Export ready sheet (phone app) ── */
#bmp-save-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
#bmp-save-sheet .bmp-ss-back { position: absolute; inset: 0; background: rgba(1, 15, 62, .45); }
#bmp-save-sheet .bmp-ss-card {
  position: relative; width: 100%; max-width: 480px; background: var(--bmp-surface, #fff); color: var(--bmp-text, #010f3e);
  border-radius: 20px 20px 0 0; padding: 22px 20px calc(18px + var(--ion-safe-area-bottom, 0px)); display: grid; gap: 10px; text-align: center;
  font-family: inherit; box-shadow: 0 -10px 30px rgba(1, 15, 62, .18);
}
#bmp-save-sheet .bmp-ss-ico { width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 178, 27, .2); font-size: 22px; }
#bmp-save-sheet .bmp-ss-t { font-weight: 800; font-size: 1.0625rem; }
#bmp-save-sheet .bmp-ss-n { font-size: .8125rem; color: var(--bmp-text-muted, #64748b); word-break: break-all; }
#bmp-save-sheet .bmp-ss-err { font-size: .8125rem; color: var(--bmp-danger, #c0392b); }
#bmp-save-sheet button { font: inherit; font-weight: 700; border: 0; border-radius: 12px; min-height: 48px; cursor: pointer; }
#bmp-save-sheet .bmp-ss-save { background: var(--bmp-gold-500, #f5b21b); color: var(--bmp-navy-900, #010f3e); }
#bmp-save-sheet .bmp-ss-close { background: transparent; color: var(--bmp-text-muted, #64748b); }

/* ── Scan QR › My QR (the business's own payment QR) ── */
bmp-scan .bmp-page.mq-on > :not(.mq-keep) { display: none !important; }
bmp-scan .bmp-page:not(.mq-on) > .mq-panel { display: none; }
.mq-tabs { display: inline-flex; background: var(--bmp-surface); border: 1px solid var(--bmp-border); border-radius: 12px; padding: 4px; gap: 4px; justify-self: start; }
.mq-tabs button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--bmp-text-muted); padding: 8px 16px; border-radius: 9px; min-height: 40px; cursor: pointer; }
.mq-tabs button.on { background: var(--bmp-navy-900); color: var(--bmp-gold-500); }
.mq-card { text-align: center; display: grid; gap: 6px; justify-items: center; }
.mq-biz { margin: 4px 0 0; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bmp-text-muted); }
.mq-qrbox { background: #fff; border: 1px solid var(--bmp-border); border-radius: 22px; padding: 14px; margin: 6px 0; box-shadow: var(--bmp-shadow-sm); }
.mq-img { width: min(300px, 70vw); height: auto; display: block; }
.mq-instr { margin: 4px 0 0; font-weight: 700; font-size: 1rem; }
.mq-sub { margin: 0; font-size: .8125rem; color: var(--bmp-text-muted); }
.mq-wal { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.mq-wal span { font-size: .75rem; font-weight: 700; border: 1px solid var(--bmp-border); border-radius: 999px; padding: 4px 10px; color: var(--bmp-text-muted); }
.mq-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; width: 100%; }
.mq-btn { font: inherit; font-weight: 700; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--bmp-border); background: var(--bmp-surface); color: var(--bmp-text); cursor: pointer; }
.mq-btn.primary { background: var(--bmp-gold-500); border-color: var(--bmp-gold-500); color: var(--bmp-navy-900); }
.mq-btn.ghost { margin-top: 10px; }
.mq-btn:disabled { opacity: .6; }
.mq-note { font-size: .8125rem; font-weight: 700; color: var(--bmp-success); }
.mq-stats, .mq-tip { margin: 6px 0 0; font-size: .8125rem; color: var(--bmp-text-muted); }
.mq-renew { margin-top: 8px; font-size: .8125rem; color: var(--bmp-danger) !important; }
@media (max-width: 560px) { .mq-acts .mq-btn { flex: 1 1 calc(50% - 8px); } .mq-acts .mq-btn.primary { flex-basis: 100%; } }

/* ── Phone lists (Customers, Transactions, …): never wider than the screen; long emails / names wrap ── */
@media (max-width: 720px) {
  .bmp-table-wrap { max-width: 100%; }
  .bmp-table { display: block; width: 100%; max-width: 100%; }
  .bmp-table tbody { display: block; width: 100%; }
  .bmp-table tr { box-sizing: border-box; max-width: 100%; }
  .bmp-table td { min-width: 0; overflow-wrap: anywhere; word-break: break-word; text-align: right; }
  .bmp-table td::before { flex-shrink: 0; text-align: left; }
  .bmp-table td > * { min-width: 0; }
  bmp-customers .bmp-table td[data-label="Name"] { text-align: left; }
  bmp-customers .bmp-table td[data-label="Name"] strong { overflow-wrap: anywhere; }
}

/* Home shortcuts: long labels (e.g. "Recurring Invoice") show in full on two lines */
bmp-dashboard .tile > span:last-child { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-align: center; line-height: 1.15; }
@media (max-width: 720px) { .ri-search { flex: 1 1 100% !important; min-width: 0 !important; } }
@media (max-width: 720px) {
  .ri-wrap .bmp-table td { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
  .ri-wrap .bmp-table td::before { grid-column: 1; grid-row: 1 / span 6; }
  .ri-wrap .bmp-table td > * { grid-column: 2; justify-self: end; text-align: right; }
  .ri-wrap .bmp-table td[colspan] { display: block; }
  .ri-wrap .bmp-table td[colspan]::before { display: none; }
}

/* ── POS Terminal: amount keypad only (no Items), full screen on phones / tablets ── */
bmp-pos .modes { display: none !important; }
bmp-pos .accepts { font-size: .6875rem !important; line-height: 1.35; letter-spacing: -.005em; margin-top: 8px !important; }
.bmp-pos-x { display: none; }
@media (max-width: 991px) {
  html.bmp-pos-full #main > ion-header.topbar,
  html.bmp-pos-full #main > nav.tabs,
  html.bmp-pos-full #main > .verify { display: none !important; }
  html.bmp-pos-full bmp-pos .pos { padding-top: calc(var(--ion-safe-area-top, 0px) + 14px) !important; padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + 24px) !important; }
  html.bmp-pos-full bmp-pos .bar { padding-right: 50px; }
  html.bmp-pos-full bmp-pos .mbar { bottom: calc(14px + var(--ion-safe-area-bottom, 0px)) !important; }
  html.bmp-pos-full .bmp-pos-x {
    display: grid; place-items: center; position: fixed; z-index: 30; top: calc(var(--ion-safe-area-top, 0px) + 10px); right: 12px;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bmp-border); background: var(--bmp-surface);
    color: var(--bmp-text); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--bmp-shadow-sm); padding: 0;
  }
}

/* ── Phones: slightly smaller text everywhere ── */
@media (max-width: 560px) {
  html { font-size: 14px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.05rem; }
  ion-button { font-size: 13px; }
  ion-input, ion-select, ion-textarea { font-size: 14px; }
  bmp-pos .accepts { font-size: .625rem !important; }
  bmp-pos .kdisplay.big { font-size: clamp(1.9rem, 9vw, 2.4rem) !important; }
  bmp-pos .kcard .pad button { min-height: 54px !important; font-size: 1.25rem !important; }
}

/* ── Phone fixes v19 ── */
@media (max-width: 560px) {
  /* POS: one tidy header — title, then TID · MID on one line; the currency is already in the amount */
  html.bmp-pos-full bmp-pos .bar { align-items: flex-start; }
  html.bmp-pos-full bmp-pos .bar > :first-child { min-width: 0; flex: 1 1 auto; }
  html.bmp-pos-full bmp-pos .bar > :not(:first-child) { display: none !important; }
  bmp-pos .bar p { font-size: .6875rem !important; line-height: 1.4; margin-top: 2px !important; }
  bmp-pos .bar h1 { font-size: 1.35rem !important; margin: 0 !important; }
  bmp-pos .accepts { font-size: .5625rem !important; letter-spacing: 0; text-wrap: balance; }
  /* My QR: QR and buttons fit above the bottom tabs */
  .mq-img { width: min(230px, 60vw); }
  .mq-qrbox { padding: 10px; border-radius: 18px; }
  .mq-instr { font-size: .875rem; }
  .mq-wal span { font-size: .6875rem; padding: 3px 8px; }
  .mq-btn { min-height: 40px; font-size: .8125rem; }
  bmp-scan .bmp-page { padding-bottom: 110px; }
  /* Create invoice: roomier single column fields */
  bmp-invoice-editor .grid { grid-template-columns: 1fr 1fr; gap: 10px !important; }
  bmp-invoice-editor ion-select, bmp-invoice-editor ion-input { font-size: 13px; }
  bmp-invoice-editor .bmp-card { padding: 14px !important; }
  /* Support modal */
  ion-modal .bmp-modal-title h2 { font-size: 1.05rem; }
}
/* Support contacts */
.bmp-contacts { background: var(--bmp-surface); border: 1px solid var(--bmp-border); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; }
.bmp-contacts-t { margin: 0 0 8px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--bmp-text-muted); }
.bmp-contacts-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.bmp-contact { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--bmp-border); border-radius: 12px; text-decoration: none; color: var(--bmp-text); min-width: 0; }
.bmp-contact:hover { border-color: var(--bmp-navy-900); }
.bmp-contact .i { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.bmp-contact.email .i { background: #010F3E; } .bmp-contact.whatsapp .i { background: #25D366; } .bmp-contact.messenger .i { background: #0866FF; } .bmp-contact.viber .i { background: #7360F2; }
.bmp-contact b { display: block; font-size: .8125rem; }
.bmp-contact small { display: block; font-size: .6875rem; color: var(--bmp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmp-contact > span:last-child { min-width: 0; }
.bmp-contacts.compact { padding: 10px 12px; }
@media (max-width: 560px) { .bmp-contacts-l { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* Printer chooser (Sunmi built-in printer via RawBT, or the normal print dialog) */
#bmp-print-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
#bmp-print-sheet .bmp-ss-back { position: absolute; inset: 0; background: rgba(1, 15, 62, .45); }
#bmp-print-sheet .bmp-ss-card { position: relative; width: 100%; max-width: 480px; background: var(--bmp-surface, #fff); color: var(--bmp-text, #010f3e); border-radius: 20px 20px 0 0; padding: 22px 20px calc(18px + var(--ion-safe-area-bottom, 0px)); display: grid; gap: 10px; text-align: center; font-family: inherit; }
#bmp-print-sheet .bmp-ss-ico { width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 178, 27, .2); font-size: 22px; }
#bmp-print-sheet .bmp-ss-t { font-weight: 800; font-size: 1.0625rem; }
#bmp-print-sheet .bmp-ss-n { font-size: .8125rem; color: var(--bmp-text-muted, #64748b); }
#bmp-print-sheet button { font: inherit; font-weight: 700; border: 0; border-radius: 12px; min-height: 48px; cursor: pointer; }
#bmp-print-sheet .bmp-ss-save { background: var(--bmp-gold-500, #f5b21b); color: var(--bmp-navy-900, #010f3e); }
#bmp-print-sheet .bmp-ss-alt { background: var(--bmp-surface-2, #eef2f8); color: var(--bmp-text, #010f3e); }
#bmp-print-sheet .bmp-ss-close { background: transparent; color: var(--bmp-text-muted, #64748b); }
#bmp-print-sheet .bmp-ss-rem { font-size: .8125rem; color: var(--bmp-text-muted); display: flex; gap: 8px; justify-content: center; align-items: center; }