/* ============================================================
   PayBO v1 blue theme — overrides the Iwakiri red palette to
   match the Metronic/Keenthemes blue screenshot reference.
   Applies when the PayBO mode attribute is set on the root.
   ============================================================ */

:root[data-paybo="on"] {
  /* Primary chain: derived from --p-* (the scale updated by the Tweaks
     accent swapper), so picking PayBO blue / Iwakiri red / Teal / etc.
     cascades to every element that uses --primary-* below. */
  --primary:       var(--p-500);
  --primary-dark:  var(--p-700);
  --primary-hover: var(--p-600);
  --primary-soft:  var(--p-100);

  /* Navy strip is intentionally neutral across accents */
  --topbar-bg:     #0f1729;
  --topbar-label:  var(--p-400);
  --topbar-value:  #ffffff;
  --paybo-bg:      #f4f5f8;
  --paybo-surface: #ffffff;
  --paybo-ink:     #1a1d26;
  --paybo-heading: var(--p-700);
  --paybo-muted:   #6b7280;
  --paybo-border:  #e5e7eb;
  --paybo-border-soft: #eef0f4;

  /* Status — always consistent across accents */
  --ok:    #059669;   --ok-bg:    #d1fae5;
  --warn:  #d97706;   --warn-bg:  #fef3c7;
  --err:   #dc2626;   --err-bg:   #fee2e2;
  --info:  var(--p-600); --info-bg: var(--p-100);
  --slate: #475569;   --slate-bg: #e2e8f0;

  /* Default accent scale — PayBO blue. The accent swapper sets these
     inline as style on the root, which overrides this block. */
  --p-50:  #eef0fd;
  --p-100: #dbe0fa;
  --p-200: #b8c1f5;
  --p-300: #8e9bee;
  --p-400: #5d6ee2;
  --p-500: #2a3fd0;
  --p-600: #2334ae;
  --p-700: #1c298c;
  --p-800: #141d69;
  --p-900: #0d1246;
}

/* ----- Font weight tuning: amounts use Poppins medium, no separate mono ----- */
:root[data-paybo="on"] .mono,
:root[data-paybo="on"] .strong {
  font-family: "Poppins", system-ui, sans-serif !important;
  font-weight: 500;
}

/* ----- Page titles deep blue ----- */
:root[data-paybo="on"] .page__title {
  color: var(--paybo-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ============================================================
   NAVY 3-KPI STRIP (above existing topbar)
   Uses CSS grid for three centered stat blocks + right-side actions
   ============================================================ */
.paybo-navy {
  background: var(--topbar-bg, #0f1729);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  gap: 20px;
  position: relative;
  z-index: 40;
}
.paybo-navy__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  color: #fff;
}
.paybo-navy__brand .p-dot {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, var(--p-400), var(--p-500));
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 12px;
}
.paybo-navy__stats {
  display: flex; gap: 40px; margin: 0 auto;
  align-items: center;
}
.paybo-navy__stat { text-align: center; line-height: 1.1; }
.paybo-navy__stat .lbl {
  color: var(--topbar-label, var(--p-400));
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.paybo-navy__stat .val {
  color: #fff; font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
}
.paybo-navy__actions {
  display: flex; align-items: center; gap: 6px; margin-left: auto;
}
.paybo-navy__iconbtn {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #c9d4eb; border: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.paybo-navy__iconbtn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.paybo-navy__avatar {
  width: 30px; height: 30px; border-radius: 999px;
  background: linear-gradient(135deg, var(--p-400), var(--p-500));
  color: #fff; font-weight: 700; font-size: 11px;
  display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,0.12);
}

/* ============================================================
   DASHBOARD KPI STRIP — white + blue-filled variants
   Connected with thin horizontal lines per screenshot.
   ============================================================ */
.paybo-kpistrip {
  display: grid; gap: 0;
  grid-template-columns: repeat(3, 1fr);
  background: #fff; border-radius: 10px;
  border: 1px solid var(--paybo-border, #e5e7eb);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15,20,32,.04);
}
.paybo-kpi {
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  background: #eef2f7;
  border-right: 1px solid var(--paybo-border, #e5e7eb);
  position: relative;
}
.paybo-kpi:last-child { border-right: 0; }
.paybo-kpi--filled {
  background: var(--primary, var(--p-500));
  color: #fff;
}
.paybo-kpi__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--p-700);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.paybo-kpi--filled .paybo-kpi__head { color: var(--p-100); }
.paybo-kpi__value {
  font-size: 38px; font-weight: 700;
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--p-500);
}
.paybo-kpi--filled .paybo-kpi__value { color: #fff; }
.paybo-kpi__sub {
  font-size: 12px; color: #475569; opacity: .85;
}
.paybo-kpi--filled .paybo-kpi__sub { color: var(--p-100); }
.paybo-kpi[data-formula]:hover::after {
  content: attr(data-formula);
  position: absolute; left: 14px; right: 14px; bottom: 8px;
  font-size: 10.5px; color: #475569;
  background: rgba(255,255,255,0.9); padding: 4px 8px;
  border-radius: 6px; border: 1px solid #e5e7eb;
  pointer-events: none;
}
.paybo-kpi--filled[data-formula]:hover::after {
  background: rgba(15,23,41,0.9); color: var(--p-100); border-color: var(--p-700);
}

/* ============================================================
   TOAST HOST — bottom-right stack for new To Confirm
   ============================================================ */
.paybo-toasts {
  position: fixed; bottom: 20px; right: 20px; z-index: 9000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 380px;
}
.paybo-toast {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 10px;
  background: #fff; border: 1px solid var(--paybo-border, #e5e7eb);
  box-shadow: 0 10px 30px -8px rgba(15,20,32,0.18), 0 4px 10px -2px rgba(15,20,32,0.08);
  border-left: 4px solid var(--info, #2563eb);
  animation: pb-toast-in .25s ease-out;
}
.paybo-toast--high { border-left-color: var(--warn, #d97706); }
.paybo-toast__icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--info-bg, var(--p-100)); color: var(--info, #2563eb);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 14px; font-weight: 700;
}
.paybo-toast__body { flex: 1; min-width: 0; }
.paybo-toast__head {
  font-size: 11px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.paybo-toast__title {
  font-size: 13.5px; font-weight: 650; color: #1a1d26; margin-top: 2px;
}
.paybo-toast__sub {
  font-size: 12px; color: #6b7280; margin-top: 3px;
}
.paybo-toast__amount {
  font-weight: 700; color: var(--primary, var(--p-500));
}
.paybo-toast__actions {
  display: flex; gap: 6px; margin-top: 8px;
}
.paybo-toast__btn {
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 5px;
  background: var(--primary, var(--p-500)); color: #fff;
  border: 0; cursor: pointer;
}
.paybo-toast__btn--ghost {
  background: transparent; color: #6b7280;
}
.paybo-toast__close {
  background: transparent; border: 0; cursor: pointer;
  color: #9ca3af; padding: 2px;
}
@keyframes pb-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   ACTION MODAL — reason + note + partial
   ============================================================ */
.paybo-modal-bg {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,20,32,0.45); backdrop-filter: blur(4px);
  display: grid; place-items: center;
}
.paybo-modal {
  width: 480px; max-height: 88vh; overflow: auto;
  background: #fff; border-radius: 12px;
  box-shadow: 0 30px 60px -15px rgba(15,20,32,.35);
}
.paybo-modal__head {
  padding: 18px 22px; border-bottom: 1px solid var(--paybo-border-soft);
  display: flex; align-items: center; gap: 12px;
}
.paybo-modal__title { font-size: 16px; font-weight: 700; color: var(--p-700); }
.paybo-modal__sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.paybo-modal__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.paybo-modal__foot {
  padding: 14px 22px; border-top: 1px solid var(--paybo-border-soft);
  display: flex; gap: 8px; justify-content: flex-end;
}
.paybo-field { display: flex; flex-direction: column; gap: 6px; }
.paybo-field label {
  font-size: 11px; font-weight: 600; color: #475569;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.paybo-field label.req::after {
  content: "*"; color: var(--err, #dc2626); margin-left: 3px;
}
.paybo-field select,
.paybo-field input,
.paybo-field textarea {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 13px; color: #1a1d26;
  padding: 9px 11px; border-radius: 6px;
  border: 1px solid var(--paybo-border);
  background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.paybo-field select:focus,
.paybo-field input:focus,
.paybo-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}
.paybo-field textarea { min-height: 80px; resize: vertical; }
.paybo-field__counter {
  font-size: 11px; color: #6b7280; text-align: right;
}
.paybo-field__counter--ok  { color: var(--ok); }
.paybo-field__counter--err { color: var(--err); }
.paybo-btn {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s;
}
.paybo-btn--primary { background: var(--primary); color: #fff; }
.paybo-btn--primary:hover { background: var(--primary-hover, var(--p-600)); }
.paybo-btn--primary:disabled { background: #cbd5e1; cursor: not-allowed; }
.paybo-btn--secondary { background: #fff; color: var(--primary); border-color: var(--primary); }
.paybo-btn--secondary:hover { background: var(--primary-soft); }
.paybo-btn--danger { background: var(--err, #dc2626); color: #fff; }
.paybo-btn--danger:hover { background: #b91c1c; }
.paybo-btn--ghost { background: transparent; color: #6b7280; }
.paybo-btn--ghost:hover { background: #f4f5f8; }

/* ============================================================
   STATE MACHINE VISUALIZER — horizontal pill sequence
   ============================================================ */
.paybo-fsm {
  display: flex; align-items: center; gap: 0;
  padding: 10px 0; margin: 4px 0 14px;
  overflow-x: auto;
}
.paybo-fsm__pill {
  padding: 5px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--paybo-border);
  color: #6b7280; background: #fff;
  flex-shrink: 0;
}
.paybo-fsm__pill.done {
  background: var(--primary-soft); color: var(--primary-dark);
  border-color: var(--primary-soft);
}
.paybo-fsm__pill.current {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 2px 6px -1px color-mix(in oklab, var(--primary) 40%, transparent);
}
.paybo-fsm__pill.terminal-ok  { background: var(--ok);  color:#fff; border-color: var(--ok); }
.paybo-fsm__pill.terminal-err { background: var(--err); color:#fff; border-color: var(--err); }
.paybo-fsm__arrow {
  width: 12px; height: 2px; background: var(--paybo-border);
  margin: 0 4px; flex-shrink: 0;
}
.paybo-fsm__arrow.done { background: var(--primary); }

/* ============================================================
   PLACEHOLDER (Coming in v2) card
   ============================================================ */
.paybo-v2 {
  padding: 28px; border: 1.5px dashed #cbd5e1;
  border-radius: 12px; background: #f8fafc;
  text-align: left;
}
.paybo-v2__tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: #e2e8f0; color: #475569;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 10px;
}
.paybo-v2__title {
  font-size: 20px; font-weight: 700; color: var(--paybo-heading, var(--p-700));
  letter-spacing: -0.01em;
}
.paybo-v2__desc {
  font-size: 13px; color: #475569; margin-top: 6px; max-width: 640px;
}
.paybo-v2__list {
  margin-top: 14px; padding-left: 20px;
  font-size: 13px; color: #475569; line-height: 1.75;
}
.paybo-v2__table {
  width: 100%; margin-top: 16px; border-collapse: collapse;
  font-size: 12.5px; opacity: 0.75;
}
.paybo-v2__table th,
.paybo-v2__table td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
/* Matches the platform table header (Arbi, Aug 2026). This was the last
   light-header table left after `.data-table` was unified onto the navy —
   PayBO's Players list uses its own `paybo-v2__table` class, so the base rule
   never reached it. */
.paybo-v2__table th {
  background: #28387a; color: #fff;
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.paybo-v2__slider {
  width: 100%; accent-color: var(--primary, var(--p-500));
  opacity: 0.5; pointer-events: none;
}

/* ============================================================
   STRICT-BLOCK BANNER (Limits page)
   ============================================================ */
.paybo-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 10px;
  background: var(--warn-bg, #fef3c7);
  border: 1px solid #fcd34d;
  color: #78350f;
  margin-bottom: 16px;
}
.paybo-banner__icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: #f59e0b; color: #fff;
  display: grid; place-items: center; font-weight: 800; flex-shrink: 0;
}
.paybo-banner__title {
  font-size: 13.5px; font-weight: 650; color: #78350f;
}
.paybo-banner__text {
  font-size: 12.5px; color: #92400e; margin-top: 3px;
}

/* Activity page CSV button gets primary styling */
:root[data-paybo="on"] .activity__csv {
  background: var(--primary); color: #fff;
  border-color: var(--primary);
}
:root[data-paybo="on"] .activity__csv:hover { background: var(--primary-hover); }

/* Drawer width — 560px per spec */
:root[data-paybo="on"] .drawer { width: 560px !important; }

/* ============================================================
   HOST SHELL — White Label wrapper around PayBO ("Payments" module)
   ============================================================ */
.paybo-host {
  position: relative;
  min-height: 100vh;
  background: var(--paybo-bg, #f4f5f8);
  display: grid;
  grid-template-rows: auto auto 1fr;
}

/* navy top strip — three-column grid so stats center between logo + actions */
.paybo-host__navy {
  background: #0f1729;
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 56px;
  padding: 0 18px;
  gap: 24px;
  position: sticky; top: 0; z-index: 50;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;  /* belt-and-braces: never horizontal-scroll the page */
}
.paybo-host__navy-logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.08em;
  color: #fff;
}
.paybo-host__navy-logo .gdot {
  width: 26px; height: 26px; border-radius: 999px;
  background: #fff; color: var(--p-500);
  display: grid; place-items: center;
  font-weight: 900; font-size: 15px; line-height: 1;
}
.paybo-host__navy-stats {
  display: flex; gap: 22px;
  align-items: center;
  justify-self: center;  /* center within the grid's 1fr middle column */
  min-width: 0;
}
.paybo-host__navy-stats .stat {
  text-align: center; line-height: 1.15;
  min-width: 0;
  flex: 0 0 auto;
}
.paybo-host__navy-stats .lbl {
  font-size: 12px; font-weight: 600; color: var(--p-400);
  margin-bottom: 2px;
}
.paybo-host__navy-stats .val {
  font-size: 15px; font-weight: 600; color: #fff;
  letter-spacing: -0.01em;
}
.paybo-host__navy-actions {
  display: flex; align-items: center; gap: 10px;
}
.paybo-host__navy-actions .icon-btn {
  background: transparent; border: 0; color: #c9d4eb;
  width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center; cursor: pointer;
}
.paybo-host__navy-actions .icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.paybo-host__navy-actions .lang {
  width: 46px; height: 30px; border-radius: 5px;
  background: #fff; display: grid; place-items: center;
  font-size: 16px; overflow: hidden;
}
.paybo-host__navy-actions .avatar {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--p-500); color: #fff;
  display: grid; place-items: center;
}

/* blue host nav — items share the full width in equal-width cells so
   each label is centered in its own box. At wide viewports every cell
   is the same width; when total content exceeds the container, items
   fall back to their natural width and the nav scrolls horizontally
   (flex-basis: auto + flex-shrink: 0). */
.paybo-host__nav {
  background: var(--p-500);
  color: #fff;
  display: flex;
  align-items: stretch;
  position: sticky; top: 56px; z-index: 45;
  min-height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
  box-sizing: border-box;
}
.paybo-host__nav::-webkit-scrollbar { display: none; }
.paybo-host__nav-item {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 8px; min-height: 44px;
  font-size: 12px; font-weight: 500;
  line-height: 1;             /* pin the text box to its glyph height so flex centering is pixel-exact */
  color: var(--p-100);
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  transition: background .12s;
  position: relative;
  flex: 1 0 auto;             /* equal share of extra width, never shrink below content (keeps scroll intact) */
  text-align: center;
}
.paybo-host__nav-item > span { line-height: 1; display: inline-flex; align-items: center; }
@media (min-width: 1200px) {
  .paybo-host__nav-item { padding: 0 10px; font-size: 12.5px; }
}
@media (min-width: 1500px) {
  .paybo-host__nav-item { padding: 0 13px; font-size: 13px; }
}
.paybo-host__nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.paybo-host__nav-item.active {
  background: #fff; color: var(--p-700); font-weight: 600;
}
.paybo-host__nav-item .count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 18px;
  padding: 0 5px; margin-left: 5px;
  background: #dc2626; color: #fff;
  border-radius: 4px; font-size: 10.5px; font-weight: 700;
}
.paybo-host__nav-item.active .count { background: #dc2626; }
.paybo-host__nav-item .caret { font-size: 9px; opacity: .7; margin-left: 2px; transition: transform .12s; }
/* Keep the trigger highlighted while its dropdown is open. */
.paybo-host__nav-item.menu-open { background: rgba(255,255,255,0.08); color: #fff; }
.paybo-host__nav-item.menu-open .caret { transform: rotate(180deg); opacity: 1; }

/* Host nav hover dropdown (e.g. Report) — fixed so it escapes the blue nav's
   overflow clip; coords come from the hovered item's bounding rect. */
.paybo-host__nav-menu {
  position: fixed; z-index: 60;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--paybo-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,20,32,.18), 0 2px 8px rgba(15,20,32,.08);
  padding: 6px;
  display: flex; flex-direction: column;
  animation: paybo-nav-menu-in .12s ease;
}
@keyframes paybo-nav-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.paybo-host__nav-menu-item {
  display: block; width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0; background: transparent;
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 13px; font-weight: 500; font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.paybo-host__nav-menu-item:hover { background: var(--p-50); color: var(--p-700); }

/* ============================================================
   SECONDARY NAV — sticky PayBO section bar (below the blue host nav)
   Always visible; acts as chrome equivalent to the left rail.
   ============================================================ */
.paybo-host__subnav {
  background: #fff;
  border-bottom: 1px solid var(--paybo-border);
  display: flex; align-items: stretch; gap: 8px;
  position: sticky; top: 100px; z-index: 44;
  padding: 6px 12px 6px 70px;  /* leave room for the floating rail */
  min-height: 44px;
  box-shadow: 0 1px 2px rgba(15,20,32,.04);
}
.paybo-host__subnav-scroll {
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.paybo-host__subnav-scroll::-webkit-scrollbar { display: none; }

.paybo-host__subnav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500;
  color: var(--paybo-muted);
  background: transparent; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.paybo-host__subnav-item:hover {
  background: var(--p-50); color: var(--primary-dark);
}
.paybo-host__subnav-item.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 2px 6px -1px color-mix(in oklab, var(--primary) 30%, transparent);
}
.paybo-host__subnav-v2 {
  display: inline-flex; align-items: center;
  padding: 1px 5px; border-radius: 999px;
  background: #e2e8f0; color: #475569;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.paybo-host__subnav-item.active .paybo-host__subnav-v2 {
  background: rgba(255,255,255,0.25); color: #fff;
}
.paybo-host__subnav-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 16px;
  padding: 0 5px; border-radius: 4px;
  background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 700;
  line-height: 1;
}
.paybo-host__subnav-brand {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 8px;
  background: #eef2f7; border: 1px solid var(--paybo-border);
  cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--paybo-ink);
  flex-shrink: 0;
}
.paybo-host__subnav-brand:hover { background: var(--p-100); border-color: var(--primary); }
.paybo-host__subnav-brand .bname {
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Mega-menu (retained for backward compat — not rendered) */
.paybo-host__mega {
  position: absolute; top: 46px; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--paybo-border);
  box-shadow: 0 20px 40px -20px rgba(15,20,32,.25);
  z-index: 60;
}
.paybo-host__mega-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 20px 24px 14px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.paybo-host__mega-col { display: flex; flex-direction: column; gap: 2px; }
.paybo-host__mega-heading {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--p-500);
  padding: 6px 10px 8px; border-bottom: 1px solid #eef0f4;
  margin-bottom: 4px;
}
.paybo-host__mega-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 1px;
  padding: 9px 10px; border-radius: 8px;
  cursor: pointer; color: var(--paybo-ink);
  transition: background .1s, color .1s;
}
.paybo-host__mega-item:hover { background: var(--p-50); color: var(--p-700); }
.paybo-host__mega-item.current { background: var(--p-100); color: var(--p-700); }
.paybo-host__mega-icon {
  grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--p-50); color: var(--p-500);
}
.paybo-host__mega-item.current .paybo-host__mega-icon {
  background: var(--p-500); color: #fff;
}
.paybo-host__mega-label {
  grid-column: 2; grid-row: 1;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.paybo-host__mega-v2 {
  font-size: 9px; font-weight: 700;
  background: #e2e8f0; color: #475569;
  padding: 1px 5px; border-radius: 999px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.paybo-host__mega-hint {
  grid-column: 2; grid-row: 2;
  font-size: 11px; color: #6b7280;
}
.paybo-host__mega-footer {
  grid-column: 1 / -1;
  margin-top: 8px; padding: 12px 14px 2px;
  border-top: 1px solid #eef0f4;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: #475569;
}
.paybo-host__mega-footer strong { color: var(--p-700); font-weight: 700; }
.paybo-host__mega-footer .dot { margin: 0 8px; color: #9ca3af; }
.paybo-host__mega-brand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  background: #eef2f7; border: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #1a1d26;
}
.paybo-host__mega-brand:hover { background: var(--p-100); }

/* Floating left icon rail — aligned with the sticky secondary nav */
.paybo-host__rail {
  position: fixed;
  top: 108px; left: 12px; z-index: 55;
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 5px; border-radius: 12px;
  background: #fff;
  border: 1px solid var(--paybo-border);
  box-shadow: 0 10px 30px -10px rgba(15,20,32,.15),
              0 4px 10px -2px rgba(15,20,32,.08);
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  scrollbar-width: none;
}
.paybo-host__rail::-webkit-scrollbar { display: none; }
.paybo-host__rail-btn { width: 36px; height: 36px; border-radius: 9px; }
.paybo-host__rail-btn {
  width: 40px; height: 40px;
  border: 0; background: transparent;
  color: #6b7280; border-radius: 10px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
}
.paybo-host__rail-btn:hover { background: var(--p-50); color: var(--p-500); }
.paybo-host__rail-btn.active {
  background: var(--p-500); color: #fff;
  box-shadow: 0 4px 10px -2px rgba(30,64,175,.45);
}
.paybo-host__rail-btn:hover::after {
  content: attr(title);
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: #0f1729; color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: 5px;
  white-space: nowrap; z-index: 100;
  pointer-events: none;
}

/* Main content area — full-width; no cap so chrome covers 100% viewport */
.paybo-host__main {
  padding: 14px 24px 40px 72px;  /* left padding reserves rail space */
  width: 100%;
  max-width: 100vw;
  min-height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow-x: hidden;  /* outer clip; scrollable children handle their own overflow */
}

/* All panels inside the host get horizontal scroll so wide tables don't
   clip beyond the viewport. Pages that opt-in already have overflow:auto
   wrappers; this is the safety net. */
.paybo-host .panel {
  overflow-x: auto;
  max-width: 100%;
}

/* Generic page container */
.paybo-host .page {
  max-width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   MOBILE — responsive breakpoints
   ============================================================ */
@media (max-width: 900px) {
  .paybo-host__navy {
    grid-template-columns: auto 1fr auto;
    padding: 0 12px; gap: 10px;
  }
  .paybo-host__navy-logo { font-size: 13px; }
  .paybo-host__navy-logo .gdot { width: 24px; height: 24px; }
  .paybo-host__navy-stats {
    gap: 14px; overflow-x: auto; scrollbar-width: none;
  }
  .paybo-host__navy-stats::-webkit-scrollbar { display: none; }
  .paybo-host__navy-stats .val { font-size: 12px; white-space: nowrap; }
  .paybo-host__navy-stats .lbl { font-size: 10px; }

  .paybo-host__subnav { padding-left: 66px; }
  .paybo-host__subnav-brand .bname { display: none; }

  .paybo-host__main {
    padding: 12px 12px 32px 72px;
  }
}

@media (max-width: 640px) {
  .paybo-host__navy { height: 48px; }
  .paybo-host__navy-stats { display: none; }  /* too cramped — hidden on phones */
  .paybo-host__nav { top: 48px; min-height: 40px; }
  .paybo-host__nav-item { padding: 0 9px; min-height: 40px; font-size: 12px; }
  .paybo-host__nav-item .count { min-width: 18px; height: 16px; font-size: 10px; }

  /* Secondary nav: stacks directly below main nav, still sticky */
  .paybo-host__subnav {
    top: 88px; padding: 6px 10px;
    min-height: 42px;
  }
  .paybo-host__subnav-item { padding: 6px 10px; font-size: 12px; }
  .paybo-host__subnav-brand { display: none; }  /* brand via icon rail instead */

  /* Rail collapses to a horizontal bottom bar — thumb-reachable */
  .paybo-host__rail {
    top: auto; bottom: 12px; left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    max-width: calc(100vw - 24px);
    overflow-x: auto; overflow-y: hidden;
    max-height: none;
    padding: 6px;
  }
  .paybo-host__rail-btn { width: 38px; height: 38px; }
  .paybo-host__rail-btn:hover::after { display: none; }  /* no tooltip on touch */

  .paybo-host__main {
    padding: 10px 12px 96px;  /* bottom padding clears the bottom rail */
  }

  /* Drawer becomes full-width sheet on phones */
  :root[data-paybo="on"] .drawer {
    width: 100% !important;
    max-width: 100%;
  }

  /* Page header stacks */
  .page__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* Tables scroll horizontally */
  .panel { overflow-x: auto !important; }

  /* Toasts shrink */
  .paybo-toasts {
    left: 12px; right: 12px; bottom: 76px;
    max-width: none;
  }

  /* Action modal full-width */
  .paybo-modal { width: calc(100vw - 24px); max-height: 92vh; }

  /* Device-phase code blocks smaller */
  .paybo-devcard pre { font-size: 10.5px; padding: 10px 12px; }
}

/* Hide the Tweaks floating gear on mobile to save space */
@media (max-width: 640px) {
  .tweaks-toggle, .tweaks:not(.visible) { display: none !important; }
}

/* Inside the host the existing .app chrome (topbar, subnav, sidebar) is
   hidden so the host owns the entire chrome. */
.paybo-host .topbar,
.paybo-host .subnav,
.paybo-host .side {
  display: none !important;
}
.paybo-host .app {
  display: block !important;
  grid-template-areas: none !important;
  grid-template-columns: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.paybo-host .main {
  padding: 20px 0 0;
  height: auto !important;
  overflow: visible !important;
}

/* Pages stretch fully inside the host */
.paybo-host .page {
  min-height: 0;
}

/* ============================================================
   LAYOUT MODES — driven by Tweaks panel (data-layout on .paybo-host)
   ============================================================ */

/* "top": blue nav + subnav, no floating rail */
.paybo-host[data-layout="top"] .paybo-host__rail { display: none; }
.paybo-host[data-layout="top"] .paybo-host__subnav { padding-left: 14px; }
.paybo-host[data-layout="top"] .paybo-host__main { padding-left: 24px; }

/* "rail-only" / "collapsed" / "floating-rail": rail visible, subnav hidden */
.paybo-host[data-layout="collapsed"] .paybo-host__subnav,
.paybo-host[data-layout="floating-rail"] .paybo-host__subnav { display: none; }

/* "dual-top": both top bars, but no subnav + no rail */
.paybo-host[data-layout="dual-top"] .paybo-host__subnav { display: none; }
.paybo-host[data-layout="dual-top"] .paybo-host__rail { display: none; }
.paybo-host[data-layout="dual-top"] .paybo-host__main { padding-left: 24px; }

/* "command": minimal chrome — navy only, hide blue nav */
.paybo-host[data-layout="command"] .paybo-host__nav { display: none; }
.paybo-host[data-layout="command"] .paybo-host__subnav { top: 56px; }

/* "sidebar": expand the rail into a full labelled sidebar */
.paybo-host[data-layout="sidebar"] .paybo-host__rail {
  left: 0; top: 100px; border-radius: 0;
  border-left: 0; border-top: 0; border-bottom: 0;
  width: 220px; max-width: 220px;
  padding: 10px 8px;
  max-height: calc(100vh - 100px);
  box-shadow: 1px 0 4px rgba(15,20,32,.06);
}
.paybo-host[data-layout="sidebar"] .paybo-host__rail-btn {
  width: 100%; height: 36px; border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  justify-content: flex-start;
  font-size: 12.5px; font-weight: 500;
}
.paybo-host[data-layout="sidebar"] .paybo-host__rail-btn::before {
  content: attr(title);
  color: inherit;
}
.paybo-host[data-layout="sidebar"] .paybo-host__rail-btn:hover::after {
  display: none;
}
.paybo-host[data-layout="sidebar"] .paybo-host__subnav { display: none; }
.paybo-host[data-layout="sidebar"] .paybo-host__main { padding-left: 240px; }

/* "mega-top": rail hidden, subnav wraps to multi-row card-like chips */
.paybo-host[data-layout="mega-top"] .paybo-host__rail { display: none; }
.paybo-host[data-layout="mega-top"] .paybo-host__subnav {
  padding-left: 14px;
  flex-wrap: wrap; min-height: 54px;
}
.paybo-host[data-layout="mega-top"] .paybo-host__main { padding-left: 24px; }

/* ============================================================
   DENSITY — driven by Tweaks (data-density on :root)
   ============================================================ */
:root[data-density="compact"]  .paybo-host__navy { height: 50px; }
:root[data-density="compact"]  .paybo-host__nav  { min-height: 40px; }
:root[data-density="compact"]  .paybo-host__nav-item { min-height: 40px; padding: 0 9px; font-size: 12px; }
:root[data-density="compact"]  .paybo-host__subnav { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
:root[data-density="compact"]  .paybo-host__subnav-item { padding: 5px 9px; font-size: 12px; }
:root[data-density="compact"]  .paybo-host__main { padding-top: 10px; }

:root[data-density="cozy"]     .paybo-host__navy { height: 56px; }
:root[data-density="cozy"]     .paybo-host__nav  { min-height: 44px; }
:root[data-density="cozy"]     .paybo-host__subnav { min-height: 44px; }

:root[data-density="comfy"]    .paybo-host__navy { height: 62px; }
:root[data-density="comfy"]    .paybo-host__nav  { min-height: 50px; }
:root[data-density="comfy"]    .paybo-host__nav-item { min-height: 50px; padding: 0 14px; font-size: 13.5px; }
:root[data-density="comfy"]    .paybo-host__subnav { min-height: 50px; padding: 8px 14px 8px 70px; }
:root[data-density="comfy"]    .paybo-host__subnav-item { padding: 8px 13px; font-size: 13px; }
:root[data-density="comfy"]    .paybo-host__main { padding-top: 18px; }

:root[data-density="spacious"] .paybo-host__navy { height: 68px; }
:root[data-density="spacious"] .paybo-host__nav  { min-height: 54px; }
:root[data-density="spacious"] .paybo-host__nav-item { min-height: 54px; padding: 0 16px; font-size: 14px; }
:root[data-density="spacious"] .paybo-host__subnav { min-height: 56px; padding: 10px 16px 10px 72px; }
:root[data-density="spacious"] .paybo-host__subnav-item { padding: 10px 14px; font-size: 13.5px; }
:root[data-density="spacious"] .paybo-host__main { padding: 24px 28px 40px 72px; }

/* Recompute sticky offsets per density so secondary nav and rail sit flush */
:root[data-density="compact"]  .paybo-host__nav { top: 50px; }
:root[data-density="compact"]  .paybo-host__subnav { top: 90px; }
:root[data-density="compact"]  .paybo-host__rail { top: 96px; }
:root[data-density="comfy"]    .paybo-host__nav { top: 62px; }
:root[data-density="comfy"]    .paybo-host__subnav { top: 112px; }
:root[data-density="comfy"]    .paybo-host__rail { top: 122px; }
:root[data-density="spacious"] .paybo-host__nav { top: 68px; }
:root[data-density="spacious"] .paybo-host__subnav { top: 122px; }
:root[data-density="spacious"] .paybo-host__rail { top: 134px; }

/* Dev-phase callout blocks */
.paybo-devcard {
  background: #fff; border: 1px solid var(--paybo-border, #e5e7eb);
  border-radius: 10px; padding: 20px 22px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15,20,32,.04);
}
.paybo-devcard h3 {
  margin: 0 0 10px; font-size: 15.5px; font-weight: 650;
  color: var(--paybo-heading, var(--p-700)); letter-spacing: -0.01em;
}
.paybo-devcard ol,
.paybo-devcard ul {
  padding-left: 20px; font-size: 13px;
  color: #1a1d26; line-height: 1.75; margin: 0;
}
.paybo-devcard code {
  background: #eef2f7; padding: 1px 6px; border-radius: 4px;
  font-size: 12px; color: var(--p-700);
  font-family: "Poppins", system-ui, sans-serif; font-weight: 500;
}
.paybo-devcard pre {
  background: #0f1729; color: var(--p-100);
  padding: 14px 16px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.7; overflow-x: auto;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 400;
  margin: 10px 0 0;
}

/* ============================================================
   MOBILE — hamburger + full-height left drawer
   Visible only below 900px. Desktop keeps the existing chrome.
   ============================================================ */
.paybo-host__hamburger {
  display: none;
  width: 36px; height: 36px;
  background: transparent; border: 0;
  color: #fff; cursor: pointer;
  border-radius: 8px;
  align-items: center; justify-content: center;
  margin-right: 6px;
}
.paybo-host__hamburger:hover { background: rgba(255,255,255,0.08); }

.paybo-host__mobile { display: none; }

@media (max-width: 900px) {
  .paybo-host__hamburger { display: inline-flex; }

  /* Hide desktop chrome on mobile */
  .paybo-host__nav    { display: none; }
  .paybo-host__subnav { display: none; }
  .paybo-host__rail   { display: none; }

  /* Let the main content take full width and sit right under the navy strip */
  .paybo-host__main { margin-left: 0; padding-top: 12px; }

  /* Drawer container: scrim + sliding aside */
  .paybo-host__mobile {
    display: block;
    position: fixed; inset: 0; z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
  }
  .paybo-host__mobile.open {
    pointer-events: auto;
    opacity: 1;
  }
  .paybo-host__mobile-scrim {
    position: absolute; inset: 0;
    background: rgba(15, 20, 32, 0.55);
  }
  .paybo-host__mobile-drawer {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: min(84vw, 340px);
    background: #fff;
    box-shadow: 0 16px 48px rgba(15,20,32,.4);
    display: flex; flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .paybo-host__mobile.open .paybo-host__mobile-drawer {
    transform: translateX(0);
  }
  .paybo-host__mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--paybo-border);
    color: var(--paybo-heading);
  }
  .paybo-host__mobile-stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
    padding: 12px 14px; background: var(--n-25);
    border-bottom: 1px solid var(--paybo-border);
  }
  .paybo-host__mobile-stats .lbl {
    font-size: 10px; font-weight: 600; color: var(--paybo-muted);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .paybo-host__mobile-stats .val {
    font-size: 12px; font-weight: 700; color: var(--paybo-heading);
    margin-top: 2px;
  }
  .paybo-host__mobile-section {
    padding: 8px 8px 14px;
    border-bottom: 1px solid var(--paybo-border);
  }
  .paybo-host__mobile-section--footer {
    border-bottom: 0;
    margin-top: auto;
    background: var(--n-25);
  }
  .paybo-host__mobile-sectitle {
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--paybo-muted);
    padding: 6px 10px 4px;
  }
  .paybo-host__mobile-subtitle {
    font-size: 10.5px; font-weight: 600; color: var(--paybo-muted);
    padding: 8px 10px 4px;
  }
  .paybo-host__mobile-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 10px 12px; border-radius: 8px;
    background: transparent; border: 0;
    font-size: 13px; font-weight: 500;
    /* Was `var(--paybo-heading)` = `var(--p-700)`. With one shared accent that
       painted every row in brand colour, so nothing stood out because
       everything did. Neutral label, accent reserved for the open group and the
       current page. Changed here rather than overridden elsewhere because this
       file loads last (index.html) and would win anyway. */
    color: var(--text-primary); text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  .paybo-host__mobile-item:hover { background: var(--p-50); }
  .paybo-host__mobile-item.active {
    background: var(--primary); color: #fff;
  }
  .paybo-host__mobile-item .count {
    margin-left: auto;
    min-width: 18px; height: 18px;
    padding: 0 6px;
    background: #dc2626; color: #fff;
    border-radius: 4px;
    font-size: 10.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .paybo-host__mobile-item .v2-tag {
    margin-left: auto;
    padding: 1px 6px; border-radius: 999px;
    background: #e2e8f0; color: #475569;
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
  }
  .paybo-host__mobile-item.active .v2-tag {
    background: rgba(255,255,255,.25); color: #fff;
  }

  /* Make the navy strip tighter on mobile so stats still fit */
  .paybo-host__navy { padding: 0 10px; gap: 10px; }
  .paybo-host__navy-logo { font-size: 13px; }
  .paybo-host__navy-stats { gap: 10px; }
  .paybo-host__navy-stats .val { font-size: 12px; }
  .paybo-host__navy-stats .lbl { font-size: 10px; }

  /* Page content responsive basics */
  .page { padding: 12px; }
  .page__header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page__actions { width: 100%; flex-wrap: wrap; }
  .grid.grid-4 { grid-template-columns: 1fr 1fr; }
  .grid.grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .paybo-host__navy-stats { display: none; }
  .grid.grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   PayBO → To Confirm (/payments/to-confirm)
   Cascade holds, not transactions. See PayboToConfirm.jsx.
   ============================================================ */
.ptc-mono { font-family: "JetBrains Mono", monospace; font-size: 11.5px; }
.ptc-dim { color: var(--text-tertiary); font-size: 11px; }

.ptc-why { display: inline-block; font-size: 12px; font-weight: 600; }
.ptc-why--review { color: #a8710a; }
.ptc-why__sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; font-weight: 500; color: var(--text-tertiary); margin-top: 1px;
}

.ptc-amt { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ptc-reserved {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: #fdecec; color: #8a1c1c; border: 1px solid #f2bcbc;
  padding: 1px 5px; border-radius: 4px;
}

.ptc-err { font-size: 11.5px; color: var(--text-tertiary); }
.ptc-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* Skip on a reserved hold is a refund. It must not look like the neutral Skip. */
.ptc-btn--danger { border-color: #d64545 !important; color: #a01c1c !important; }
.ptc-btn--danger:hover { background: #fdecec !important; }

.ptc-consequence {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--n-50); border: 1px solid var(--n-200);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 14px;
  font-size: 12.5px; line-height: 1.55;
}
.ptc-consequence--danger { background: #fdecec; border-color: #f2bcbc; color: #7a1818; }
.ptc-consequence code {
  background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 4px; font-size: 10.5px;
}

.ptc-dl { margin: 0; display: grid; gap: 6px; }
.ptc-dl > div { display: flex; gap: 12px; font-size: 12.5px; }
.ptc-dl dt { flex: 0 0 108px; color: var(--text-tertiary); font-weight: 600; margin: 0; }
.ptc-dl dd { margin: 0; }
.ptc-dl code { font-size: 11px; background: var(--n-75); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 640px) {
  .ptc-dl > div { flex-direction: column; gap: 1px; }
  .ptc-dl dt { flex: none; }
  .ptc-actions { flex-direction: column; align-items: stretch; }
}

/* brandLocked — a single-skin operator gets no switcher upstream, just a
   padlocked label (admin/payments/index.blade.php:78-85). Same affordance
   here: it must not read as a button. */
.paybo-host__subnav-brand--locked { cursor: default; opacity: .78; }
.paybo-host__subnav-brand--locked:hover { background: inherit; }