/* =========================================================================
   bulkpanelshop.net — design system
   Loads AFTER bootstrap.css. Overrides Bootstrap 3, adds bps-* components.
   No external hosts: system fonts, inline SVG, assets via Appearance → Files.
   ========================================================================= */

:root{
  --bps-ink:#0D0D0F;
  --bps-ink-70:rgba(13,13,15,.7);
  --bps-ink-45:rgba(13,13,15,.45);
  --bps-ink-18:rgba(13,13,15,.18);
  --bps-ink-08:rgba(13,13,15,.08);
  --bps-paper:#F2EFE9;
  --bps-paper-2:#E7E3DA;
  --bps-white:#FBFAF7;
  --bps-accent:#FF3B18;
  --bps-accent-ink:#fff;
  --bps-lime:#C8F53C;
  --bps-ok:#1E7A46;
  --bps-warn:#B26A00;
  --bps-err:#C5220C;

  --bps-line:2px solid var(--bps-ink);
  --bps-hair:1px solid var(--bps-ink-18);
  --bps-shadow:6px 6px 0 var(--bps-ink);
  --bps-shadow-sm:4px 4px 0 var(--bps-ink);

  --bps-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --bps-sans:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --bps-gut:20px;
}

/* ---------- base ---------------------------------------------------- */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bps-paper);
  color:var(--bps-ink);
  font-family:var(--bps-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bps-ink);text-decoration:underline;text-underline-offset:2px}
a:hover,a:focus{color:var(--bps-ink);text-decoration:none}
hr{border-top:var(--bps-hair)}
::selection{background:var(--bps-lime);color:var(--bps-ink)}
:focus-visible{outline:3px solid var(--bps-accent);outline-offset:2px}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{
  font-family:var(--bps-sans);
  font-weight:800;
  letter-spacing:-.025em;
  color:var(--bps-ink);
  margin-top:0;
}
h1,.h1{font-size:clamp(30px,4.6vw,50px);line-height:1.1}
h2,.h2{font-size:clamp(24px,3.2vw,36px);line-height:1.12}
h3,.h3{font-size:21px;line-height:1.2}
h4,.h4{font-size:18px;line-height:1.25}
h5{font-size:16px}
small,.small{font-size:87%}
code,kbd,pre{font-family:var(--bps-mono)}
code{background:var(--bps-paper-2);color:var(--bps-ink);border:1px solid var(--bps-ink-18);padding:1px 5px;border-radius:0}

/* ---------- buttons -------------------------------------------------- */
.btn{
  font-family:var(--bps-sans);
  font-weight:700;
  font-size:15px;
  line-height:1.2;
  padding:11px 20px;
  border:var(--bps-line);
  border-radius:0;
  background:var(--bps-paper);
  color:var(--bps-ink);
  box-shadow:var(--bps-shadow-sm);
  text-decoration:none;
  transition:transform .08s ease,box-shadow .08s ease,background .12s ease;
  white-space:normal;
}
.btn:hover,.btn:focus{background:var(--bps-paper-2);color:var(--bps-ink);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--bps-ink)}
.btn:active,.btn.active{transform:translate(4px,4px);box-shadow:0 0 0 var(--bps-ink)}
.btn[disabled],.btn.disabled{opacity:.45;box-shadow:none;transform:none}

.btn-primary{background:var(--bps-accent);border-color:var(--bps-ink);color:var(--bps-accent-ink)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:#E43314;color:#fff;border-color:var(--bps-ink)}
.btn-success{background:var(--bps-lime);color:var(--bps-ink)}
.btn-success:hover,.btn-success:focus{background:#B9E62F;color:var(--bps-ink)}
.btn-danger{background:var(--bps-err);color:#fff}
.btn-danger:hover,.btn-danger:focus{background:#A81C09;color:#fff}
.btn-default{background:var(--bps-paper)}
.btn-link{border:0;box-shadow:none;background:none;text-decoration:underline;padding:6px 4px}
.btn-link:hover{transform:none;box-shadow:none;background:none}
.btn-lg{font-size:17px;padding:14px 26px;box-shadow:var(--bps-shadow)}
.btn-sm,.btn-xs{font-size:13.5px;padding:7px 13px;box-shadow:3px 3px 0 var(--bps-ink)}
.btn-block{display:block;width:100%}

/* ---------- forms ---------------------------------------------------- */
label,.control-label{
  font-family:var(--bps-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--bps-ink-70);
  margin-bottom:7px;
}
.form-control{
  height:auto;
  padding:11px 13px;
  font-size:16px;
  font-family:var(--bps-sans);
  color:var(--bps-ink);
  background:var(--bps-white);
  border:var(--bps-line);
  border-radius:0;
  box-shadow:none;
  transition:box-shadow .1s ease;
}
.form-control:focus{border-color:var(--bps-ink);box-shadow:3px 3px 0 var(--bps-accent);outline:0}
.form-control::placeholder{color:var(--bps-ink-45)}
.form-control[disabled],.form-control[readonly]{background:var(--bps-paper-2);opacity:.75}
select.form-control{-webkit-appearance:none;appearance:none;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--bps-ink) 50%),linear-gradient(135deg,var(--bps-ink) 50%,transparent 50%);
  /* centred, not a fixed offset — the platform also ships 30px-tall .input-sm selects */
  background-position:right 19px center,right 13px center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
/* bootstrap pins select.input-sm to height:30px, which clips our padding and
   pushes the arrow out of the box (API docs block, child-panel forms) */
.form-control.input-sm,select.form-control.input-sm,textarea.form-control.input-sm{
  height:auto;line-height:1.4;padding:8px 12px;font-size:14px;
}
/* the two halves must be exactly one background-size apart, otherwise the
   triangle shows a seam down the middle */
select.form-control.input-sm{padding-right:30px;background-position:right 16px center,right 10px center}
/* macOS sizes the native <select> popup from the DECLARED width, not the
   rendered box — with bootstrap's width:100% the menu opened ~800px wide and
   ran off the window, even while max-width kept the field itself narrow.
   Set an explicit width; max-width keeps it inside narrow containers. */
select.form-control{width:560px;max-width:100%}
select.form-control.input-sm{width:320px;max-width:100%}
/* one column width for every control inside a form card, so the capped selects
   do not read as accidentally clipped next to full-width inputs */
.well .form-control,.well .select2-container,.well .input-group,.well textarea{max-width:min(560px,100%)}
/* and the card itself follows that column — 560 of content plus padding and
   border — so form cards stop having a dead half. Cards holding tables keep
   the full width. */
@media (min-width:992px){
  .bps-main .well:not(.well-float):not(:has(>.table)):not(:has(>form>.table)){max-width:616px;margin-left:auto;margin-right:auto}
}
textarea.form-control{min-height:120px}
.form-group{margin-bottom:20px}
.help-block{font-size:13.5px;color:var(--bps-ink-70)}
.has-error .form-control{border-color:var(--bps-err)}
.has-error .form-control:focus{box-shadow:3px 3px 0 var(--bps-err)}
.has-error .control-label,.has-error .help-block{color:var(--bps-err)}
.input-group-addon{background:var(--bps-ink);color:var(--bps-paper);border:var(--bps-line);border-radius:0;font-family:var(--bps-mono);font-size:13px}
.checkbox label,.radio label{font-family:var(--bps-sans);font-size:15px;text-transform:none;letter-spacing:0;color:var(--bps-ink)}
/* platform pins .forgot-password absolutely to the bottom-right of the password
   group; our taller inputs put it INSIDE the field — drop it below instead */
.form-group__password .forgot-password{
  position:static;display:block;text-align:right;margin-top:8px;
  font-family:var(--bps-mono);font-size:12.5px;color:var(--bps-ink-70);
}
.rtl-form .form-group__password .forgot-password{text-align:left}
/* the services filter toggle is a secondary control — keep the accent for CTAs */
.btn-primary.dropdown-toggle{background:var(--bps-paper);color:var(--bps-ink)}
.btn-primary.dropdown-toggle:hover,.btn-primary.dropdown-toggle:focus{background:var(--bps-lime);color:var(--bps-ink)}

/* card title: our own <h3 class="bps-card-h">, plus the stock cabinet pattern
   of a bare <label class="control-label"> sitting straight inside a .well */
.bps-card-h,.well>.control-label{
  font-family:var(--bps-sans);font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.2;
  text-transform:none;color:var(--bps-ink);display:block;margin:0 0 18px;padding-bottom:14px;
  border-bottom:var(--bps-hair);
}

/* ---------- containers: well / panel --------------------------------- */
.well{
  background:var(--bps-white);
  border:var(--bps-line);
  border-radius:0;
  box-shadow:var(--bps-shadow);
  padding:26px;
  margin-bottom:26px;
}
.well-sm{padding:18px}
.panel{background:var(--bps-white);border:var(--bps-line);border-radius:0;box-shadow:var(--bps-shadow);margin-bottom:26px}
.panel-default>.panel-heading,.panel-heading{
  background:var(--bps-ink);color:var(--bps-paper);border:0;border-radius:0;
  font-family:var(--bps-mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;padding:12px 18px;
}
.panel-heading a,.panel-heading .panel-title{color:var(--bps-paper);font-size:12px;font-weight:600}
.panel-body{padding:20px}
/* platform helper boxes: payment instruction, service description on /neworder */
.panel-body.border-solid{background:var(--bps-paper);border:var(--bps-hair);border-radius:0;padding:14px 16px}
.border-rounded{border-radius:0}
.instruction .panel-body{text-align:left}
.instruction .panel-body p:last-child{margin-bottom:0}
.panel-footer{background:var(--bps-paper-2);border-top:var(--bps-hair);border-radius:0}

/* ---------- tables --------------------------------------------------- */
.table{margin-bottom:0;color:var(--bps-ink)}
.table>thead>tr>th{
  background:var(--bps-ink);color:var(--bps-paper);
  font-family:var(--bps-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  border:0;padding:13px 16px;vertical-align:middle;
}
.table>tbody>tr>td{padding:13px 16px;border-top:var(--bps-hair);vertical-align:middle;font-size:15px}
.table>tbody>tr:hover{background:var(--bps-paper-2)}
.table-striped>tbody>tr:nth-of-type(odd){background:rgba(13,13,15,.035)}
.table-responsive{border:var(--bps-line);box-shadow:var(--bps-shadow);border-radius:0;margin-bottom:26px}
.table-responsive>.table{border:0}
.bps-num{font-family:var(--bps-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Wide cabinet tables (orders, refunds, subscriptions…) sit in a bare .well /
   .well-float, which the platform lets grow past the viewport — below 992px
   that dragged the whole page sideways. Scroll inside the card instead. */
.well-float{overflow-x:auto;-webkit-overflow-scrolling:touch;float:none;width:100%}
.well:has(>.table){overflow-x:auto}
/* Fallback for browsers without :has() (Firefox <121, Safari <15.4): the rule
   above never matches there, so a wide table drags the whole page sideways.
   Make the table itself the scroll container instead. */
@supports not selector(:has(*)){
  .well>.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
.well-float>.table{min-width:840px}
/* the platform pins the link column to 40% !important, which squeezes date and
   service into 3-4 wrapped lines — give the text columns room back */
.width-40{width:26%!important;min-width:190px}
/* keep the date column on one line — but ONLY in wide order-style tables
   (9+ columns). On /services the second column is the service name. */
.well-float>.table>tbody>tr:has(td:nth-child(9))>td:nth-child(2){white-space:nowrap}
.service-name{white-space:normal;word-break:break-word}
/* status column reads as a token, not prose */
.well-float>.table>tbody>tr>td:nth-child(8){font-family:var(--bps-mono);font-size:13px;white-space:nowrap}
/* row actions (Refill / Cancel) are secondary — the accent stays reserved for
   the one action that spends money on each screen */
.table .btn-xs.btn-primary,.table .btn-sm.btn-primary{background:var(--bps-paper);color:var(--bps-ink)}
.table .btn-xs.btn-primary:hover,.table .btn-sm.btn-primary:hover{background:var(--bps-lime);color:var(--bps-ink)}

/* ---------- alerts --------------------------------------------------- */
.alert{
  position:relative;
  border:var(--bps-line);border-radius:0;box-shadow:var(--bps-shadow-sm);
  padding:15px 44px 15px 18px;font-size:15px;color:var(--bps-ink);background:var(--bps-white);
}
.alert h4{margin-bottom:6px;font-size:17px}
.alert-success{background:var(--bps-lime)}
.alert-danger{background:#FFE2DC;border-color:var(--bps-ink)}
.alert-warning{background:#FFEFC7}
.alert-info{background:#DCEBFF}
/* pin the dismiss × inside the box (bootstrap floats it, which overflowed the
   reserved space on narrow screens) */
.alert .close{position:absolute;top:9px;right:12px;float:none;margin:0;color:var(--bps-ink);opacity:.6;text-shadow:none;font-size:24px;line-height:1}
.alert .close:hover{opacity:1}

/* ---------- badges, labels ------------------------------------------- */
.badge{background:var(--bps-lime);color:var(--bps-ink);border:1px solid var(--bps-ink);border-radius:0;font-family:var(--bps-mono);font-size:12px;font-weight:700;padding:3px 8px}
.label{border-radius:0;font-family:var(--bps-mono);font-size:11.5px;letter-spacing:.06em;padding:4px 8px;font-weight:600}
.label-success{background:var(--bps-ok)}
.label-danger{background:var(--bps-err)}
.label-warning{background:var(--bps-warn)}
.label-default{background:var(--bps-ink)}
.label-info{background:#1B4DFF}

/* ---------- navbar --------------------------------------------------- */
.navbar{margin-bottom:0;min-height:0;border-radius:0}
.navbar-default{
  background:var(--bps-paper);
  border:0;border-bottom:var(--bps-line);
}
.navbar-default .navbar-brand{
  height:auto;padding:20px 0;margin-right:26px;
  font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--bps-ink);text-decoration:none;
  display:flex;align-items:center;gap:10px;
}
.navbar-default .navbar-brand:hover{color:var(--bps-ink)}
.navbar-default .navbar-brand img{max-height:34px;width:auto}
.navbar-default .navbar-nav>li>a{
  color:var(--bps-ink);font-size:15px;font-weight:500;padding:24px 13px;text-decoration:none;
  border-bottom:2px solid transparent;
}
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{background:transparent;color:var(--bps-ink);border-bottom-color:var(--bps-ink)}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{background:transparent;color:var(--bps-ink);border-bottom-color:var(--bps-accent)}
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover{background:var(--bps-paper-2);color:var(--bps-ink)}
.navbar-default .navbar-toggle{border:var(--bps-line);border-radius:0;margin:19px 0}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background:var(--bps-lime)}
.navbar-default .navbar-toggle .icon-bar{background:var(--bps-ink);height:3px;border-radius:0;width:22px}
.navbar-default .navbar-collapse{border-color:var(--bps-ink-18)}
.navbar-icon{margin-right:6px}
/* the balance chip is not a link — no hover underline, no pointer */
.navbar-default .navbar-nav>li:not(.dropdown)>a:not([href]){cursor:default}
.navbar-default .navbar-nav>li:not(.dropdown)>a:not([href]):hover,
.navbar-default .navbar-nav>li:not(.dropdown)>a:not([href]):focus{background:transparent;border-bottom-color:transparent}
.navbar-nav>li>a .badge{margin-left:4px}

/* ---------- cabinet sidebar (authenticated, ≥992px) ------------------
   Same recipe as autosmo, bps palette. Platform JS is bound to #navbar
   and data-toggle="collapse", so markup is UNTOUCHED — pure CSS plus the
   .bps-cab class on <body>. Below 992px it reverts to the burger.
   Three traps, all hit on the live panel:
   1) .container-fluid needs justify-content:flex-start — the base navbar
      rule is space-between and in a full-height column it rips the brand
      to the top and the menu to the bottom.
   2) width:100% belongs to .navbar-left-block ONLY; the right bar is
      position:fixed, so 100% there is 100% of the window and the balance
      slides off-screen.
   3) content padding-top needs the three-class .bps-cab .navbar+.bps-main
      because .navbar+.bps-main{padding-top:30px} sits lower at equal
      specificity and would win on source order. */
@media (min-width:992px){
  .bps-cab .navbar{position:fixed;top:0;left:0;bottom:0;width:228px;z-index:1030;
    background:var(--bps-paper);border:0;border-right:var(--bps-line);
    overflow-y:auto;overflow-x:hidden}
  .bps-cab .navbar .container-fluid{display:flex;flex-direction:column;align-items:stretch;
    gap:0;justify-content:flex-start;min-height:100%;padding:0}
  .bps-cab .navbar-header{padding:18px 18px 16px;border-bottom:var(--bps-hair);width:100%;float:none}
  /* the platform JS renames #navbar's class to .navbar-collapsed at runtime
     and leaves it display:none on desktop (Bootstrap's show rule targets the
     old .navbar-collapse), so match the live class and force it visible —
     scoped to .bps-cab and ≥992, the burger below still works untouched */
  .bps-cab .navbar-collapse,.bps-cab .navbar-collapsed{display:flex!important;
    flex-direction:column;align-items:stretch;gap:0;
    flex:1;padding:0;justify-content:flex-start;border:0}
  .bps-cab .navbar-left-block{flex-direction:column;align-items:stretch;gap:0;width:100%;margin:0;float:none}
  .bps-cab .navbar-left-block>li>a{padding:10px 18px;border-bottom:0;
    border-left:3px solid transparent;font-size:14px;font-weight:500}
  .bps-cab .navbar-left-block>li>a:hover,.bps-cab .navbar-left-block>li>a:focus{
    background:var(--bps-paper-2);border-left-color:var(--bps-ink-18)}
  .bps-cab .navbar-left-block>li.active>a,
  .bps-cab .navbar-left-block>li.active>a:hover,
  .bps-cab .navbar-left-block>li.active>a:focus{
    border-left-color:var(--bps-accent);background:var(--bps-paper-2);color:var(--bps-ink)}
  .bps-cab .navbar-right-block{position:fixed;top:0;left:228px;right:0;height:52px;
    display:flex;align-items:center;justify-content:flex-end;gap:16px;margin:0;padding:0 24px;
    width:auto;float:none;background:var(--bps-paper);border-bottom:var(--bps-line);z-index:1029}
  /* the anchors default to display:block and stretch each li to a third of
     the bar, so justify-content:flex-end has no free space to work with —
     shrink them to their content and the trio clusters at the right */
  .bps-cab .navbar-right-block>li{flex:0 0 auto;width:auto;float:none}
  .bps-cab .navbar-right-block>li>a{display:inline-block;width:auto;padding:0}
  .bps-cab .navbar-right-block .dropdown-menu{top:100%;right:0;left:auto}
  .bps-cab .navbar-toggle{display:none}
  /* Pad the whole cabinet body left by the sidebar width instead of chasing
     each content wrapper: templates differ (.bps-main on most pages, a bare
     .container on /services, a .bps-page-head header on the dashboard) and any
     block NOT offset slides under the fixed 228px column. The fixed nav ignores
     body padding, so this shifts every content block uniformly and nothing
     hides. box-sizing keeps the padding inside the viewport (no scrollbar). */
  /* padding-top clears the fixed 52px top bar the same universal way: chasing
     the first content block with .navbar+* lost a specificity tie to the
     theme's own .navbar+.bps-main{padding-top:30px} (30<52 → content hid under
     the bar on every interior page). Padding the body pushes the first block of
     ANY page below the bar; later blocks flow lower, so nothing hides. */
  .bps-cab{padding-left:228px;padding-top:52px;box-sizing:border-box}
  /* the theme's .container is a fixed 1320px; inside the reduced content width
     let it flow (the nav uses .container-fluid, so the sidebar is untouched) */
  .bps-cab .container{width:auto;max-width:100%}
}

/* dropdowns */
.dropdown-menu{
  background:var(--bps-white);border:var(--bps-line);border-radius:0;box-shadow:var(--bps-shadow);padding:6px 0;margin-top:0;
}
.dropdown-menu>li>a{padding:9px 16px;font-size:15px;color:var(--bps-ink)}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background:var(--bps-lime);color:var(--bps-ink)}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover{background:var(--bps-ink);color:var(--bps-paper)}
.dropdown-max-height{max-height:320px;overflow-y:auto}
.caret{border-top-width:5px;border-right-width:5px;border-left-width:5px}

/* ---------- pagination, modal, tabs ---------------------------------- */
.pagination>li>a,.pagination>li>span{
  color:var(--bps-ink);background:var(--bps-white);border:var(--bps-line);margin-left:-2px;border-radius:0!important;
  font-family:var(--bps-mono);font-size:13.5px;padding:9px 14px;
}
.pagination>li>a:hover{background:var(--bps-paper-2)}
.pagination>.active>a,.pagination>.active>a:hover,.pagination>.active>span{background:var(--bps-ink);border-color:var(--bps-ink);color:var(--bps-paper)}
.modal-content{border:var(--bps-line);border-radius:0;box-shadow:var(--bps-shadow);background:var(--bps-white)}
.modal-header{border-bottom:var(--bps-line);padding:16px 20px}
.modal-header .modal-title{font-weight:800;letter-spacing:-.02em}
.modal-footer{border-top:var(--bps-hair);padding:14px 20px}
.modal-backdrop.in{opacity:.55}
.nav-pills{margin-bottom:22px}
.nav-pills>li>a{
  border-radius:0;border:2px solid transparent;text-decoration:none;
  color:var(--bps-ink);font-family:var(--bps-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;padding:10px 14px;
}
.nav-pills>li>a:hover,.nav-pills>li>a:focus{background:var(--bps-paper-2);color:var(--bps-ink)}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{background:var(--bps-ink);color:var(--bps-paper)}
.nav-tabs{border-bottom:var(--bps-line)}
.nav-tabs>li>a{border-radius:0;border:0;color:var(--bps-ink-70);font-family:var(--bps-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;padding:12px 16px}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:var(--bps-ink);color:var(--bps-paper);border:0}
.tooltip-inner{background:var(--bps-ink);border-radius:0;font-family:var(--bps-mono);font-size:12.5px;padding:7px 10px}
.tooltip.top .tooltip-arrow{border-top-color:var(--bps-ink)}
.progress{border:var(--bps-line);border-radius:0;background:var(--bps-white);box-shadow:none;height:22px}
.progress-bar{background:var(--bps-lime);color:var(--bps-ink);font-family:var(--bps-mono);font-size:12px;line-height:20px}

/* ---------- marketing components (bps-*) ------------------------------ */
.bps-ticker{background:var(--bps-ink);color:#EDEAE4;font-family:var(--bps-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:9px 0;overflow:hidden;white-space:nowrap}
.bps-ticker span{margin-right:36px}
.bps-ticker b{color:var(--bps-lime);font-weight:600}

.bps-eyebrow{font-family:var(--bps-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:inline-block;border:var(--bps-line);padding:5px 10px;margin-bottom:18px;background:var(--bps-paper)}
.bps-sticker{display:inline-block;background:var(--bps-lime);color:var(--bps-ink);padding:.06em .14em .1em;box-shadow:5px 5px 0 var(--bps-ink)}
.bps-micro{font-family:var(--bps-mono);font-size:14px;color:var(--bps-ink-70)}

.bps-section{border-bottom:var(--bps-line);padding:62px 0}
.bps-section--flush{border-bottom:0}
.bps-hero{border-bottom:var(--bps-line);padding:64px 0 0}
.bps-hero h1{margin-bottom:20px;line-height:1.12;max-width:15ch}
.bps-hero .bps-lede{font-size:19px;max-width:54ch;margin-bottom:28px}
.bps-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}

/* equal-height columns: the supply-stack card is taller than the niche grid,
   and Bootstrap floats left a hole under the shorter one */
@media (min-width:992px){
  .bps-row-stretch{display:flex;align-items:stretch}
  .bps-row-stretch>[class*=col-]{float:none;display:flex;flex-direction:column}
  .bps-row-stretch .bps-grid,.bps-row-stretch .bps-stack{flex:1}
  .bps-row-stretch .bps-grid{grid-auto-rows:1fr}
}

.bps-sec-head{display:flex;align-items:flex-end;gap:22px;margin-bottom:32px;flex-wrap:wrap}
.bps-sec-head h2{margin:0;max-width:20ch}
.bps-sec-head p{margin:0;max-width:44ch;color:var(--bps-ink-70);font-size:16.5px}

/* stats strip */
.bps-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--bps-line);margin-top:56px}
.bps-stat{padding:24px 20px;border-right:var(--bps-line)}
.bps-stat:last-child{border-right:0}
.bps-stat b{display:block;font-family:var(--bps-mono);font-size:clamp(24px,3.2vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1}
.bps-stat span{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--bps-ink-70);display:block;margin-top:7px}

/* supply-stack card */
.bps-stack{border:var(--bps-line);background:var(--bps-paper);box-shadow:var(--bps-shadow)}
.bps-stack-h{font-family:var(--bps-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:11px 14px;background:var(--bps-ink);color:var(--bps-paper)}
.bps-stack-col{padding:16px 16px 18px;border-bottom:var(--bps-line)}
.bps-stack-col:last-of-type{border-bottom:0;background:var(--bps-lime)}
.bps-stack-col h4{margin:0 0 12px;font-family:var(--bps-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bps-ink-70)}
.bps-row{display:flex;align-items:center;gap:10px;font-size:14.5px;padding:5px 0;font-family:var(--bps-mono)}
.bps-row i{width:9px;height:9px;background:var(--bps-ink);display:block;flex:none;opacity:.35}
.bps-stack-col:last-of-type .bps-row i{opacity:1}
.bps-row s{opacity:.55}
.bps-stack-foot{font-family:var(--bps-mono);font-size:12.5px;padding:11px 16px;border-top:var(--bps-line);color:var(--bps-ink-70)}

/* niche grid */
.bps-grid{display:grid;grid-template-columns:repeat(4,1fr);border:var(--bps-line);box-shadow:var(--bps-shadow);background:var(--bps-paper)}
.bps-grid>div{padding:22px 20px;border-right:var(--bps-line);border-bottom:var(--bps-line)}
.bps-grid>div:nth-child(4n){border-right:0}
.bps-grid>div:nth-child(n+5){border-bottom:0}
.bps-grid h3{margin:0 0 6px;font-size:17px}
.bps-grid p{margin:0;font-size:15px;color:var(--bps-ink-70)}
.bps-tag{font-family:var(--bps-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--bps-lime);color:var(--bps-ink);border:1px solid var(--bps-ink);padding:2px 6px;display:inline-block;margin-bottom:10px}

/* steps */
.bps-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bps-step{border:var(--bps-line);background:var(--bps-paper);box-shadow:var(--bps-shadow);padding:22px 20px 24px}
.bps-step b{font-family:var(--bps-mono);font-size:13px;letter-spacing:.1em;display:inline-block;background:var(--bps-ink);color:var(--bps-paper);padding:3px 9px;margin-bottom:14px}
.bps-step h3{margin:0 0 7px;font-size:18px}
.bps-step p{margin:0;font-size:15px;color:var(--bps-ink-70)}

/* code box */
.bps-code{border:var(--bps-line);background:var(--bps-ink);color:#E8E6E1;box-shadow:var(--bps-shadow);font-family:var(--bps-mono);font-size:13.5px;line-height:1.62}
.bps-code-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #33323a;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#9d9aa5}
.bps-code-copy{margin-left:auto;font-family:var(--bps-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bps-ink);background:var(--bps-lime);border:0;border-radius:0;padding:5px 12px;cursor:pointer;line-height:1}
.bps-code-copy:hover,.bps-code-copy:focus-visible{background:#d7ff5c}
.bps-code-copy.is-copied{background:#E8E6E1;color:var(--bps-ink)}
.bps-code pre{margin:0;padding:16px 14px;overflow-x:auto;background:transparent;border:0;color:inherit;font-size:13.5px;border-radius:0;white-space:pre}
.bps-code .k{color:var(--bps-lime)}
.bps-code .s{color:#ffb38a}
.bps-code .c{color:#7d7a86}

/* faq accordion (native details) */
.bps-faq{border:var(--bps-line);box-shadow:var(--bps-shadow);background:var(--bps-paper)}
.bps-faq details{border-bottom:var(--bps-hair)}
.bps-faq details:last-child{border-bottom:0}
.bps-faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:18px;align-items:center}
.bps-faq summary::-webkit-details-marker{display:none}
.bps-faq summary::after{content:"+";font-family:var(--bps-mono);font-size:22px;line-height:1;color:var(--bps-ink-45)}
.bps-faq details[open] summary::after{content:"\2013"}
.bps-faq details[open] summary{background:var(--bps-paper-2)}
.bps-faq details p{margin:0;padding:0 22px 20px;max-width:78ch;color:var(--bps-ink-70);font-size:16px}

/* dark call-to-action band */
.bps-band{background:var(--bps-ink);color:var(--bps-paper);padding:58px 0}
.bps-band h2{color:var(--bps-paper);margin-bottom:14px;max-width:20ch}
.bps-band p{color:rgba(242,239,233,.85);max-width:50ch;margin-bottom:26px}
/* pull the buttons over to the empty right half on desktop */
@media (min-width:992px){
  .bps-band .container{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:48px}
  .bps-band h2{grid-column:1;grid-row:1}
  .bps-band p{grid-column:1;grid-row:2;margin-bottom:0}
  .bps-band .bps-cta-row{grid-column:2;grid-row:1/3;margin-bottom:0;justify-content:flex-end}
}
.bps-band .bps-cta-row{gap:22px}
.bps-band .btn{box-shadow:6px 6px 0 var(--bps-accent)}
.bps-band .btn:hover{box-shadow:3px 3px 0 var(--bps-accent)}
/* red shadow under the red button is invisible on ink — give it paper instead */
.bps-band .btn-primary{box-shadow:6px 6px 0 var(--bps-paper)}
.bps-band .btn-primary:hover{box-shadow:3px 3px 0 var(--bps-paper)}
.bps-band .btn-ghost{background:transparent;color:var(--bps-paper);border-color:var(--bps-paper)}

/* footer */
.bps-footer{padding:44px 0 56px;font-size:15px;border-top:var(--bps-line)}
/* the footer logo is a .navbar-brand outside .navbar — kill Bootstrap's float
   so the description below it does not wrap around the mark */
.bps-footer .navbar-brand{
  float:none;display:inline-flex;align-items:center;gap:10px;height:auto;
  font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--bps-ink);text-decoration:none;
}
.bps-footer h4{font-family:var(--bps-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bps-ink-45);margin:0 0 14px}
.bps-footer a{display:block;text-decoration:none;padding:4px 0;color:var(--bps-ink)}
.bps-footer a:hover{text-decoration:underline}
.bps-footer-bottom{margin-top:34px;padding-top:18px;border-top:var(--bps-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--bps-mono);font-size:12.5px;color:var(--bps-ink-70)}

/* logo mark */
.bps-mark{font-style:normal;background:var(--bps-ink);color:var(--bps-lime);font-weight:800;font-size:15px;padding:6px 8px 5px;display:inline-block;line-height:1}
.bps-wordmark .thin{font-weight:400;color:var(--bps-ink-45)}

/* ---------- cabinet chrome (track B, cosmetic only) ------------------- */
.bps-page-head{border-bottom:var(--bps-line);padding:26px 0;margin-bottom:30px;background:var(--bps-paper)}
.bps-page-head h1{margin:0;font-size:clamp(24px,3vw,34px)}
.bps-balance{font-family:var(--bps-mono);font-weight:700}
main,.bps-main{display:block;padding-bottom:50px}
/* cabinet interior pages dropped their page-head; when .bps-main sits directly
   under the navbar (no head), give the content room to breathe */
.navbar + .bps-main{padding-top:30px}

/* platform search-dropdown widget: keep behaviour, restyle only */
.search-dropdown .form-control{padding-left:36px}
.search-dropdown ul,.select-search-list{background:var(--bps-white);border:var(--bps-line);border-radius:0;box-shadow:var(--bps-shadow)}
.search-dropdown li:hover,.select-search-list li:hover{background:var(--bps-lime)}

/* ---------- cabinet home dashboard (neworder) ------------------------- */
.bps-page-sub{margin:6px 0 0;color:var(--bps-ink-70);font-size:15px}
.bps-dash-wrap{padding-bottom:0}
.bps-dash{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:16px;margin-bottom:26px}
.bps-dash-card{border:var(--bps-line);box-shadow:var(--bps-shadow);background:var(--bps-white);padding:20px;min-height:132px}
.bps-dash-lab{font-family:var(--bps-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bps-ink-70)}
.bps-dash-bal{background:var(--bps-ink);color:var(--bps-paper);display:flex;flex-direction:column;justify-content:space-between}
.bps-dash-bal .bps-dash-lab{color:rgba(242,239,233,.6)}
.bps-dash-big{font-family:var(--bps-mono);font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.03em;color:var(--bps-lime);margin:8px 0 14px;word-break:break-all;line-height:1}
.bps-dash-actrow{display:flex;gap:10px;flex-wrap:wrap}
.bps-btn-ghost{background:transparent;color:var(--bps-paper);border-color:var(--bps-paper)}
.bps-btn-ghost:hover,.bps-btn-ghost:focus{background:var(--bps-paper);color:var(--bps-ink);border-color:var(--bps-paper)}
.bps-dash-qa{display:flex;flex-direction:column;text-decoration:none;color:var(--bps-ink)}
.bps-dash-qa:hover,.bps-dash-qa:focus{background:var(--bps-paper-2);color:var(--bps-ink)}
.bps-dash-qa h3{font-size:20px;margin:10px 0 0}
.bps-dash-qa .bps-dash-lab{margin-top:auto;padding-top:8px}
.bps-qa-arw{font-size:22px;line-height:1}
.bps-dash-qa--on,.bps-dash-qa--on:hover,.bps-dash-qa--on:focus{background:var(--bps-lime)}
.bps-dash-sechead{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.bps-dash-sechead .bps-eyebrow{margin-bottom:0}
.bps-dash-sechead h2{font-size:22px;margin:0}
.bps-dash-hint{color:var(--bps-ink-70);font-size:14px;margin-left:auto}
.bps-dash-sechead--form{margin-top:4px}
.bps-tilegrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--bps-line);border-left:var(--bps-line);box-shadow:var(--bps-shadow);background:var(--bps-paper);margin-bottom:26px}
.bps-tilegrid a{display:flex;align-items:center;gap:10px;padding:14px 16px;border-right:var(--bps-line);border-bottom:var(--bps-line);text-decoration:none;color:var(--bps-ink)}
.bps-tilegrid a:hover,.bps-tilegrid a:focus{background:var(--bps-lime);color:var(--bps-ink)}
.bps-tile-nm{font-weight:600;font-size:15px}
.bps-tile-go{margin-left:auto;font-family:var(--bps-mono);color:var(--bps-ink-45)}
.bps-tilegrid a:hover .bps-tile-go{color:var(--bps-ink)}
.bps-rare-strip{border:var(--bps-line);box-shadow:var(--bps-shadow);background:var(--bps-ink);color:var(--bps-paper);padding:16px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.bps-rare-strip .bps-tag{margin-bottom:0}
.bps-rare-strip b{font-size:16px}
.bps-rare-items{font-family:var(--bps-mono);font-size:13px;color:rgba(242,239,233,.8)}
.bps-rare-strip>a{margin-left:auto;color:var(--bps-paper);font-size:14px}
/* order form + right rail. Desktop: form left (616), rail fills the space
   right of it. Mobile: rail hidden (nav covers it), balance shown up top. */
.bps-order-layout{display:flex;flex-direction:column;gap:24px}
.bps-order-main{min-width:0}
@media (min-width:992px){
  .bps-order-layout{flex-direction:row;align-items:flex-start}
  .bps-order-main{flex:0 0 616px}
  .bps-order-side{flex:1 1 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-content:start}
  .bps-order-side .bps-dash-bal{grid-column:1 / -1}
}
.bps-order-side .bps-dash-card{min-height:118px}
/* the balance now lives in the fixed top bar on desktop, so the big balance
   card in the order rail just duplicates it — hide it there. The rail keeps the
   Mass order / API v2 tiles; the mobile balance (.bps-mob-balance) is untouched
   and stays the only balance readout once the top bar collapses below 992. */
.bps-order-side>.bps-dash-bal{display:none}
@media (max-width:991px){ .bps-order-side{display:none} }
/* cabinet only: the 228px sidebar eats into the content, so the order form's
   two-column row (616 form + rail) no longer fits between 992 and ~1200 and
   pushes a horizontal scrollbar — keep it stacked there, the rail drops below
   the form at full content width. Row resumes at ≥1200 where it fits again. */
@media (min-width:992px) and (max-width:1199px){
  .bps-cab .bps-order-layout{flex-direction:column}
  .bps-cab .bps-order-main{flex:1 1 auto}
}
.bps-mob-balance{display:none;margin-bottom:24px}
@media (max-width:991px){ .bps-mob-balance{display:block} }
.bps-mob-balance .bps-dash-card{min-height:0}
/* on the dashboard page the order form sits below full-width cards — left-align
   it (kill the stock col offset + the cabinet-well auto-centering) so its left
   edge lines up with the strip above */
.bps-dash-wrap + .bps-main .col-md-offset-2{margin-left:0}
/* must out-specify the cabinet-well auto-centering rule (which carries three
   :not()s), so repeat the chain here to win and pin the form to the left */
@media (min-width:992px){
  .bps-dash-wrap + .bps-main .well:not(.well-float):not(:has(>.table)):not(:has(>form>.table)){margin-left:0;margin-right:0}
}

/* ---------- RTL ------------------------------------------------------- */
.rtl-navbar .navbar-brand{margin-right:0;margin-left:26px}
.rtl-form label,.rtl-content,.rtl-alert{text-align:right}
.rtl-form .form-control{text-align:right}

/* ---------- responsive ------------------------------------------------ */
/* Bootstrap 3 caps .container at 1170px — on a 1920 monitor that leaves 375px
   of dead margin either side. Give wide screens a wider column. */
@media (min-width:1400px){ .container{width:1320px} }
@media (min-width:1700px){ .container{width:1480px} }
/* the sign-in card should not stretch with the column on wide screens */
@media (min-width:1400px){ .bps-hero .well{max-width:460px;margin-left:auto} }
@media (max-width:991px){
  /* platform sets .well-float{width:auto;min-width:100%} below 992px, which lets
     the card grow past the screen — pin it and scroll the table inside instead */
  .well-float{width:100%!important;min-width:0!important}
  .bps-stats{grid-template-columns:repeat(2,1fr)}
  .bps-stat:nth-child(2n){border-right:0}
  .bps-stat:nth-child(-n+2){border-bottom:var(--bps-line)}
  .bps-grid{grid-template-columns:repeat(2,1fr)}
  .bps-grid>div:nth-child(2n){border-right:0}
  .bps-grid>div:nth-child(n+5){border-bottom:var(--bps-line)}
  .bps-grid>div:nth-last-child(-n+2){border-bottom:0}
  .bps-steps{grid-template-columns:repeat(2,1fr)}
  .bps-dash{grid-template-columns:1fr 1fr}
  .bps-tilegrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .bps-dash{grid-template-columns:1fr}
  .bps-dash-card{min-height:0}
  .bps-tilegrid{grid-template-columns:1fr}
  .bps-rare-strip>a{margin-left:0}
  body{font-size:15.5px}
  /* the ticker is static, so anything past the fold is simply lost — let it wrap */
  .bps-ticker{white-space:normal;font-size:11.5px;letter-spacing:.06em;line-height:1.8}
  .bps-ticker span{margin-right:16px}
  /* bootstrap pulls the collapsed menu 15px left; without that compensation the
     links sit flush against the screen edge while the logo keeps its indent */
  .navbar-collapse .navbar-nav{margin-left:0;margin-right:0}
  .navbar>.container .navbar-header,.navbar>.container-fluid .navbar-header{margin-left:0;margin-right:0}
  .navbar-default .navbar-nav>li>a{padding:12px 0;border-bottom:0}
  .navbar-default .navbar-brand{padding:16px 0}
  .well,.panel-body{padding:18px}
  .bps-section,.bps-hero{padding:40px 0}
  .bps-hero{padding-bottom:0}
  .bps-steps{grid-template-columns:1fr}
  .bps-grid{grid-template-columns:1fr}
  .bps-grid>div{border-right:0!important;border-bottom:var(--bps-line)!important}
  .bps-grid>div:last-child{border-bottom:0!important}
  .bps-footer-bottom{flex-direction:column;gap:8px}
  /* footer columns stack on mobile — space them so CONTACT isn't glued to PANEL */
  .bps-footer [class*="col-"] + [class*="col-"]{margin-top:28px}
  /* the pulled-right search box inside the status pills hangs off screen once
     the pills wrap — drop it onto its own row */
  .nav-pills>li.search{float:none!important;width:100%;margin-top:10px}
  .nav-pills>li.search .input-group{width:100%}
  .table>tbody>tr>td,.table>thead>tr>th{padding:11px 12px;font-size:14px}
}

/* ---------- print ----------------------------------------------------- */
@media print{
  .navbar,.bps-ticker,.bps-band,.btn{display:none!important}
  body{background:#fff}
}