/* ==========================================================================
   HostDime Orbit — client area theme for WHMCS 9
   Loads after theme.min.css. Local tweaks belong in custom.css (loads last).
   1 tokens  2 base  3 shell & navigation  4 top bar & panels  5 dashboard
   6 cards  7 tables  8 forms & buttons  9 components  10 store & cart
   11 auth & misc pages  12 responsive  13 print
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --ob-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ob-accent: #5b3ff0;
  --ob-accent-hover: #4a2fd6;
  --ob-on-accent: #ffffff;
  --ob-accent-link: #4f34e0;
  --ob-accent-soft: rgba(91, 63, 240, .09);
  --ob-accent-soft-2: rgba(91, 63, 240, .16);
  --ob-accent-ring: rgba(91, 63, 240, .30);
  --ob-art-hi: #b4a4ff;
  --ob-art-mid: #7c62ff;
  --ob-art-lo: #4a2fd6;

  --ob-bg: #f5f4fb;
  --ob-surface: #ffffff;
  --ob-surface-2: #f8f7fd;
  --ob-surface-3: #efedf8;
  --ob-border: #e9e7f3;
  --ob-border-strong: #d7d4e7;
  --ob-text: #1c1938;
  --ob-text-2: #3d3960;
  --ob-muted: #6f6b8f;

  --ob-success: #12845a;  --ob-success-bg: #e4f7ee;
  --ob-warning: #9a5b00;  --ob-warning-bg: #fff3dc;
  --ob-danger:  #c42f45;  --ob-danger-bg:  #fde9ec;
  --ob-info:    #1f66c9;  --ob-info-bg:    #e5efff;
  --ob-neutral: #5f5b7d;  --ob-neutral-bg: #efedf6;

  --ob-r-xs: 8px;
  --ob-r-sm: 10px;
  --ob-r: 14px;
  --ob-r-lg: 18px;
  --ob-shadow-sm: 0 1px 2px rgba(28, 25, 56, .05);
  --ob-shadow: 0 1px 2px rgba(28, 25, 56, .04), 0 10px 28px -14px rgba(40, 30, 110, .14);
  --ob-shadow-lg: 0 24px 60px -16px rgba(28, 20, 80, .28);

  --ob-rail-w: 264px;
  --ob-rail-w-collapsed: 84px;
  --ob-gap: 22px;
  --ob-pad-x: 32px;
  --ob-ctl-h: 42px;
  --ob-tr: .18s cubic-bezier(.4, 0, .2, 1);

  /* ---- WHMCS core tokens (used by theme.min.css) mapped to Orbit ---- */
  --bg: var(--ob-surface);
  --bg-lifted: var(--ob-bg);
  --bg-muted: var(--ob-bg);
  --bg-accented: var(--ob-surface-3);
  --bg-light: var(--ob-surface-2);
  --bg-dark: var(--ob-text);
  --bg-color: var(--ob-surface);
  --bg-inverted: var(--ob-accent);
  --text: var(--ob-text);
  --text-color: var(--ob-text);
  --text-lifted: var(--ob-text-2);
  --text-muted: var(--ob-muted);
  --text-secondary: var(--ob-muted);
  --text-accented: var(--ob-accent-link);
  --text-inverted: var(--ob-on-accent);
  --border: var(--ob-border);
  --border-muted: var(--ob-border);
  --border-lifted: var(--ob-border);
  --border-accented: var(--ob-border-strong);
  --grayscale: var(--ob-accent);
  --grayscale-lifted: var(--ob-accent-hover);
  --grayscale-accented: var(--ob-accent-hover);
  --primary-color: var(--ob-accent);
  --accent-color: var(--ob-accent);
  --secondary-color: var(--ob-muted);
  --secondary: var(--ob-muted);
  --success: var(--ob-success);   --success-accented: var(--ob-success);
  --info: var(--ob-info);         --info-accented: var(--ob-info);
  --warning: var(--ob-warning);   --warning-accented: var(--ob-warning);
  --error: var(--ob-danger);      --error-lifted: var(--ob-danger);
  --notice: #7c4fd6;              --notice-lifted: #9a6be8;
  --neutral: var(--ob-muted);     --neutral-lifted: var(--ob-muted);  --neutral-accented: var(--ob-text-2);
  --yellow-200: #ffe9a8; --yellow-300: #f5b83d; --teal-300: #29b6a6; --teal-400: #14a090;
  --pink-400: #e0548e;   --emerald-300: #33c481;
  --rounding-sm: var(--ob-r-xs);
  --rounding-md: var(--ob-r-sm);
  --rounding-lg: var(--ob-r);
  --shadow-soft: var(--ob-shadow-sm);
  --shadow-medium: var(--ob-shadow);
  --shadow-large: var(--ob-shadow-lg);
  --transition: var(--ob-tr);
  --letter-spacing: normal;
  --disabled-opacity: .55;
  --gradient: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-hover));
}

/* ---------- accent palettes ---------- */
html[data-accent="amber"]   { --ob-accent:#f7941d; --ob-accent-hover:#e07f0a; --ob-on-accent:#1f1204; --ob-accent-link:#b05a00; --ob-accent-soft:rgba(247,148,29,.11); --ob-accent-soft-2:rgba(247,148,29,.2); --ob-accent-ring:rgba(247,148,29,.34); --ob-art-hi:#ffd596; --ob-art-mid:#f9a23a; --ob-art-lo:#cf6d00; }
html[data-accent="blue"]    { --ob-accent:#2563eb; --ob-accent-hover:#1d4fd8; --ob-on-accent:#fff; --ob-accent-link:#1d4fd8; --ob-accent-soft:rgba(37,99,235,.09); --ob-accent-soft-2:rgba(37,99,235,.17); --ob-accent-ring:rgba(37,99,235,.3); --ob-art-hi:#9cc0ff; --ob-art-mid:#4483ff; --ob-art-lo:#1c47c9; }
html[data-accent="emerald"] { --ob-accent:#0e9f6e; --ob-accent-hover:#0b875d; --ob-on-accent:#fff; --ob-accent-link:#0b7a55; --ob-accent-soft:rgba(14,159,110,.1); --ob-accent-soft-2:rgba(14,159,110,.18); --ob-accent-ring:rgba(14,159,110,.3); --ob-art-hi:#8be6c3; --ob-art-mid:#1fb784; --ob-art-lo:#087550; }
html[data-accent="rose"]    { --ob-accent:#e11d58; --ob-accent-hover:#c5164b; --ob-on-accent:#fff; --ob-accent-link:#c5164b; --ob-accent-soft:rgba(225,29,88,.08); --ob-accent-soft-2:rgba(225,29,88,.16); --ob-accent-ring:rgba(225,29,88,.3); --ob-art-hi:#ffa3bf; --ob-art-mid:#f24c80; --ob-art-lo:#b3103e; }

/* ---------- density ---------- */
html[data-density="compact"] { --ob-gap: 16px; --ob-pad-x: 22px; --ob-ctl-h: 36px; }

/* ---------- 2. BASE ---------- */
html { -webkit-text-size-adjust: 100%; background-color: var(--ob-bg) !important; height: auto; min-height: 100%; }
body.ob-body { height: auto !important; min-height: 100vh; }
body.ob-body {
  margin: 0;
  font-family: var(--ob-font);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ob-text);
  background-color: var(--ob-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-density="compact"] body.ob-body { font-size: .85rem; }
body.ob-body .primary-bg-color { background-color: var(--ob-bg); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ob-text); font-family: var(--ob-font); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--ob-accent-link); }
a:hover { color: var(--ob-accent-hover); }
hr { border-color: var(--ob-border); }
small, .small { color: inherit; }
.text-muted { color: var(--ob-muted) !important; }
::selection { background: var(--ob-accent-soft-2); }
:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
.btn:focus, .btn.focus, .form-control:focus, .custom-select:focus { box-shadow: 0 0 0 4px var(--ob-accent-ring); }

.ob-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: var(--ob-r-sm); background: var(--ob-accent); color: var(--ob-on-accent); font-weight: 600; transition: top var(--ob-tr); }
.ob-skip:focus { top: 12px; color: var(--ob-on-accent); }

/* ---------- 3. SHELL & NAVIGATION ---------- */
.ob-shell { display: flex; min-height: 100vh; }

.ob-rail {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040;
  width: var(--ob-rail-w);
  display: flex; flex-direction: column;
  background: var(--ob-surface);
  border-right: 1px solid var(--ob-border);
  transition: width var(--ob-tr), transform .26s cubic-bezier(.4, 0, .2, 1);
}
.ob-main { flex: 1; min-width: 0; margin-left: var(--ob-rail-w); display: flex; flex-direction: column; min-height: 100vh; transition: margin-left var(--ob-tr); }

.ob-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 22px 20px 14px 24px; }
.ob-logo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--ob-text); text-decoration: none; }
.ob-logo:hover { color: var(--ob-text); text-decoration: none; }
.ob-logo img { max-height: 38px; max-width: 180px; width: auto; display: block; }
.ob-logo-mark { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, var(--ob-art-mid), var(--ob-art-lo)); color: #fff; font-size: 15px; }
.ob-logo-text { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-icon-btn.ob-rail-close { display: none; }

.ob-rail-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 14px 8px; scrollbar-width: thin; scrollbar-color: var(--ob-border-strong) transparent; }
.ob-rail-scroll::-webkit-scrollbar { width: 6px; }
.ob-rail-scroll::-webkit-scrollbar-thumb { background: var(--ob-border-strong); border-radius: 6px; }

.ob-nav-group { margin: 18px 12px 6px; font-size: .75rem; font-weight: 600; color: var(--ob-muted); letter-spacing: .01em; }
.ob-nav { list-style: none; margin: 0; padding: 0; }
.ob-nav-item { margin: 1px 0; }
.ob-nav-link {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 42px; padding: 9px 12px; border-radius: 12px;
  color: var(--ob-text-2); font-size: .9rem; font-weight: 500; line-height: 1.25;
  text-decoration: none; transition: background-color var(--ob-tr), color var(--ob-tr);
}
.ob-nav-link:hover, .ob-nav-link:focus { background: var(--ob-surface-3); color: var(--ob-text); text-decoration: none; }
.ob-nav-icon { flex: none; width: 22px; text-align: center; font-size: 1.08rem; color: var(--ob-muted); transition: color var(--ob-tr); }
.ob-nav-link:hover .ob-nav-icon { color: var(--ob-accent-link); }
.ob-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-nav-badge { flex: none; margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--ob-accent-soft-2); color: var(--ob-accent-link); font-size: .7rem; font-weight: 700; text-align: center; }
.ob-nav-caret { flex: none; margin-left: 4px; font-size: .75rem; color: var(--ob-muted); transition: transform var(--ob-tr); }
.ob-nav-item.open > .ob-nav-link .ob-nav-caret { transform: rotate(180deg); }

.ob-nav-item.current:not(.has-children) > .ob-nav-link {
  background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-hover));
  color: var(--ob-on-accent); font-weight: 600;
  box-shadow: 0 10px 20px -10px var(--ob-accent-ring);
}
.ob-nav-item.current:not(.has-children) > .ob-nav-link .ob-nav-icon { color: var(--ob-on-accent); }
.ob-nav-item.current:not(.has-children) > .ob-nav-link .ob-nav-badge { background: rgba(255, 255, 255, .22); color: var(--ob-on-accent); }
.ob-nav-item.has-children.current > .ob-nav-link { color: var(--ob-text); font-weight: 600; }
.ob-nav-item.has-children.current > .ob-nav-link .ob-nav-icon { color: var(--ob-accent-link); }

.ob-submenu { display: none; list-style: none; margin: 2px 0 8px 23px; padding: 0 0 0 12px; border-left: 1px solid var(--ob-border); }
.ob-nav-item.open > .ob-submenu { display: block; }
.ob-submenu-link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--ob-r-xs); color: var(--ob-muted); font-size: .85rem; text-decoration: none; }
.ob-submenu-link:hover, .ob-submenu-link:focus { background: var(--ob-surface-3); color: var(--ob-text); text-decoration: none; }
.ob-submenu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-submenu-item.current > .ob-submenu-link { color: var(--ob-accent-link); font-weight: 600; background: var(--ob-accent-soft); }
.ob-submenu-divider { height: 1px; margin: 6px 10px; background: var(--ob-border); }

.ob-rail-foot { padding: 10px 14px 14px; border-top: 1px solid transparent; }
.ob-help {
  padding: 14px 16px 16px; border-radius: var(--ob-r-lg);
  background: linear-gradient(160deg, var(--ob-accent-soft-2), var(--ob-accent-soft) 55%, transparent);
  border: 1px solid var(--ob-border);
}
.ob-help .ob-art { display: block; width: 120px; height: 82px; margin: 0 auto 8px; }
.ob-help-title { display: block; font-size: .95rem; font-weight: 700; color: var(--ob-text); }
.ob-help-text { margin: 2px 0 12px; font-size: .8rem; color: var(--ob-muted); }
.ob-help-btn.btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-color: var(--ob-accent-ring); color: var(--ob-accent-link); background: var(--ob-surface); }
.ob-help-btn.btn:hover { background: var(--ob-accent); border-color: var(--ob-accent); color: var(--ob-on-accent); }

.ob-user { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 8px 10px 10px; border: 1px solid var(--ob-border); border-radius: var(--ob-r); background: var(--ob-surface); }
.ob-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ob-accent-soft-2); color: var(--ob-accent-link); font-weight: 700; font-size: .8rem; }
.ob-user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ob-user-meta strong { font-size: .85rem; color: var(--ob-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-user-meta small { font-size: .74rem; color: var(--ob-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-user .ob-icon-btn { width: 34px; height: 34px; }
.ob-user-panel.ob-panel { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 0; }

.ob-collapse { display: none; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 8px 12px; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-muted); font: inherit; font-size: .82rem; cursor: pointer; }
.ob-collapse:hover { background: var(--ob-surface-3); color: var(--ob-text); }
.ob-collapse i { width: 22px; text-align: center; transition: transform var(--ob-tr); }

.ob-overlay { position: fixed; inset: 0; z-index: 1035; background: rgba(17, 14, 40, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }

/* collapsed rail (desktop) */
@media (min-width: 1200px) {
  .ob-collapse { display: flex; }
  html[data-sidebar="collapsed"] .ob-rail { width: var(--ob-rail-w-collapsed); }
  html[data-sidebar="collapsed"] .ob-main { margin-left: var(--ob-rail-w-collapsed); }
  html[data-sidebar="collapsed"] .ob-rail-head { justify-content: center; padding: 22px 10px 14px; }
  html[data-sidebar="collapsed"] .ob-logo img { max-width: 48px; object-fit: contain; object-position: left; }
  html[data-sidebar="collapsed"] .ob-logo-text,
  html[data-sidebar="collapsed"] .ob-nav-label,
  html[data-sidebar="collapsed"] .ob-nav-caret,
  html[data-sidebar="collapsed"] .ob-help,
  html[data-sidebar="collapsed"] .ob-user-meta,
  html[data-sidebar="collapsed"] .ob-submenu { display: none !important; }
  html[data-sidebar="collapsed"] .ob-nav-group { height: 1px; margin: 12px 14px; overflow: hidden; font-size: 0; background: var(--ob-border); }
  html[data-sidebar="collapsed"] .ob-nav-link { justify-content: center; padding: 10px; }
  html[data-sidebar="collapsed"] .ob-nav-badge { position: absolute; top: 3px; right: 6px; min-width: 16px; padding: 0 4px; font-size: .6rem; }
  html[data-sidebar="collapsed"] .ob-user { flex-direction: column; padding: 8px 4px; }
  html[data-sidebar="collapsed"] .ob-user-panel.ob-panel { left: calc(100% + 12px); right: auto; bottom: 0; min-width: 220px; }
  html[data-sidebar="collapsed"] .ob-collapse { justify-content: center; }
  html[data-sidebar="collapsed"] .ob-collapse .ob-nav-label { display: none; }
  html[data-sidebar="collapsed"] .ob-collapse i { transform: rotate(180deg); }
}
.ob-tip { position: fixed; z-index: 1100; padding: 6px 10px; border-radius: var(--ob-r-xs); background: var(--ob-text); color: var(--ob-surface); font-size: .78rem; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--ob-shadow); transform: translateY(-50%); }

/* ---------- 4. TOP BAR & PANELS ---------- */
body header.header.ob-topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: 16px;
  min-height: 84px; padding: 16px var(--ob-pad-x);
  background-color: color-mix(in srgb, var(--ob-bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { body header.header.ob-topbar { background-color: var(--ob-bg); } }
body.ob-scrolled header.header.ob-topbar { border-bottom-color: var(--ob-border); }

.ob-icon-btn.ob-burger { display: none; }
.ob-title { flex: 1; min-width: 0; }
.ob-title-h { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-wave { color: #f5b041; --fa-secondary-color: #f5b041; --fa-primary-color: #e08a00; font-size: .9em; margin-left: 2px; }
.ob-title-sub { margin: 3px 0 0; font-size: .85rem; color: var(--ob-muted); }
.ob-crumbs .breadcrumb { display: flex; flex-wrap: nowrap; overflow: hidden; margin: 0; padding: 0; background: transparent; font-size: .82rem; }
.ob-crumbs .breadcrumb-item { white-space: nowrap; color: var(--ob-muted); }
.ob-crumbs .breadcrumb-item.active { color: var(--ob-text-2); overflow: hidden; text-overflow: ellipsis; }
.ob-crumbs .breadcrumb-item a { color: var(--ob-muted); }
.ob-crumbs .breadcrumb-item a:hover { color: var(--ob-accent-link); }
.ob-crumbs .breadcrumb-item + .breadcrumb-item::before { color: var(--ob-border-strong); content: "/"; }

.ob-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ob-search { position: relative; display: flex; align-items: center; margin: 0 6px 0 0; }
.ob-search .form-control {
  width: 260px; height: 44px; padding: 0 40px 0 16px;
  border-radius: 12px; border: 1px solid var(--ob-border); background: var(--ob-surface);
  color: var(--ob-text); font-size: .86rem; box-shadow: var(--ob-shadow-sm);
  transition: width var(--ob-tr), border-color var(--ob-tr), box-shadow var(--ob-tr);
}
.ob-search .form-control::-webkit-search-cancel-button { display: none; }
.ob-search .form-control:focus { width: 320px; border-color: var(--ob-accent); }
.ob-search-icon { position: absolute; right: 14px; color: var(--ob-muted); pointer-events: none; }
.ob-kbd { position: absolute; right: 38px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--ob-border); background: var(--ob-surface-2); color: var(--ob-muted); font: 600 .7rem var(--ob-font); box-shadow: none; }
.ob-search .form-control:focus ~ .ob-kbd, .ob-search .form-control:not(:placeholder-shown) ~ .ob-kbd { display: none; }
.ob-icon-btn.ob-search-open { display: none; }

.ob-icon-btn {
  position: relative; flex: none;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--ob-border); border-radius: 12px;
  background: var(--ob-surface); color: var(--ob-text-2);
  font-size: 1.05rem; line-height: 1; cursor: pointer; text-decoration: none;
  box-shadow: var(--ob-shadow-sm);
  transition: background-color var(--ob-tr), color var(--ob-tr), border-color var(--ob-tr);
}
.ob-icon-btn:hover, .ob-icon-btn:focus, .ob-icon-btn[aria-expanded="true"] { background: var(--ob-surface-2); border-color: var(--ob-border-strong); color: var(--ob-accent-link); text-decoration: none; }
.ob-rail .ob-icon-btn { box-shadow: none; border-color: transparent; background: transparent; }
.ob-rail .ob-icon-btn:hover { background: var(--ob-surface-3); }

.ob-dot-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; border: 2px solid var(--ob-bg); background: var(--ob-accent); color: var(--ob-on-accent); font-size: .64rem; font-weight: 700; line-height: 15px; text-align: center; }
.ob-dot-badge.ob-dot-empty { display: none; }
.ob-admin-return { color: var(--ob-warning); }
.ob-guest-actions { display: flex; gap: 8px; }

.ob-dropdown { position: relative; }
.ob-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1060;
  display: none; min-width: 300px; padding: 14px;
  background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: 16px;
  box-shadow: var(--ob-shadow-lg); color: var(--ob-text);
}
.ob-panel.show { display: block; animation: ob-pop .14s ease-out; }
@keyframes ob-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.ob-panel-title { margin: 0 0 12px; font-size: .95rem; font-weight: 700; }
.ob-setting { margin-bottom: 14px; }
.ob-setting-label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 600; color: var(--ob-muted); }
.ob-seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--ob-r-sm); background: var(--ob-surface-3); }
.ob-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border: 0; border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-muted); font: 600 .8rem var(--ob-font); cursor: pointer; white-space: nowrap; }
.ob-seg button:hover { color: var(--ob-text); }
.ob-seg button.active { background: var(--ob-surface); color: var(--ob-text); box-shadow: var(--ob-shadow-sm); }
.ob-swatches { display: flex; gap: 10px; }
.ob-swatches button { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 3px solid var(--ob-surface); background: var(--sw); box-shadow: 0 0 0 1px var(--ob-border-strong); cursor: pointer; }
.ob-swatches button.active { box-shadow: 0 0 0 2px var(--sw); }
.ob-reset { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--ob-muted); font: 600 .8rem var(--ob-font); cursor: pointer; }
.ob-reset:hover { color: var(--ob-accent-link); }

.ob-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--ob-r-sm); color: var(--ob-text); font-size: .86rem; text-decoration: none; }
.ob-menu-item i { width: 18px; text-align: center; color: var(--ob-muted); }
.ob-menu-item:hover { background: var(--ob-surface-2); color: var(--ob-text); text-decoration: none; }
.ob-menu-danger, .ob-menu-danger i { color: var(--ob-danger); }
.ob-menu-danger:hover { background: var(--ob-danger-bg); color: var(--ob-danger); }
.ob-menu-divider { height: 1px; margin: 6px 0; background: var(--ob-border); }

/* notifications popover (bootstrap) */
.popover { background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r); box-shadow: var(--ob-shadow-lg); font-family: var(--ob-font); color: var(--ob-text); max-width: 360px; }
.popover .arrow::before { border-bottom-color: var(--ob-border) !important; }
.popover .arrow::after { border-bottom-color: var(--ob-surface) !important; }
.popover-body { color: var(--ob-text); padding: 6px; }
.popover .client-alerts { list-style: none; margin: 0; padding: 0; }
.popover .client-alerts li a { display: flex; gap: 10px; padding: 10px; border-radius: var(--ob-r-sm); color: var(--ob-text); text-decoration: none; }
.popover .client-alerts li a:hover { background: var(--ob-surface-2); }
.popover .client-alerts li a i { margin-top: 3px; color: var(--ob-accent-link); }
.popover .client-alerts li.none { padding: 12px; color: var(--ob-muted); text-align: center; }
.tooltip-inner { background: var(--ob-text); color: var(--ob-surface); border-radius: var(--ob-r-xs); font-family: var(--ob-font); font-weight: 600; }

/* ---------- content area ---------- */
.ob-content-wrap { flex: 1; padding: 4px var(--ob-pad-x) 8px; }
html[data-width="contained"] .ob-content-wrap,
html[data-width="contained"] body footer.footer.ob-footer,
html[data-width="contained"] body header.header.ob-topbar { padding-left: max(var(--ob-pad-x), calc((100% - 1360px) / 2)); padding-right: max(var(--ob-pad-x), calc((100% - 1360px) / 2)); }
.ob-content-wrap > .alert.network-issue-alert { margin: 0 0 var(--ob-gap) !important; border-radius: var(--ob-r); }
.ob-content-wrap > .alert .container { max-width: none; padding: 0; }

body section#main-body.ob-content { margin: 0; padding: 0; min-height: 0; background: transparent; }
.ob-grid { display: block; }
.ob-grid-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ob-gap); align-items: start; }
.ob-grid-aside > .ob-aside { order: 2; position: sticky; top: 100px; max-height: calc(100vh - 116px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 2px; }
html[data-panel="left"] .ob-grid-aside { grid-template-columns: 300px minmax(0, 1fr); }
html[data-panel="left"] .ob-grid-aside > .ob-aside { order: 0; }
.ob-primary { min-width: 0; }
.ob-aside .sidebar .card:last-child { margin-bottom: var(--ob-gap) !important; }

.ob-home-sidebars { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 var(--ob-gap); margin-top: 4px; }
.ob-home-sidebars > .card { margin-bottom: var(--ob-gap) !important; }

/* ---------- 5. DASHBOARD ---------- */
.ob-banner { display: flex; align-items: center; gap: 12px; margin-bottom: var(--ob-gap); padding: 14px 18px; border-radius: var(--ob-r); border: 1px solid transparent; font-size: .88rem; text-decoration: none; }
.ob-banner:hover { text-decoration: none; }
.ob-banner > i { font-size: 1.15rem; }
.ob-banner-warn { background: var(--ob-warning-bg); border-color: color-mix(in srgb, var(--ob-warning) 22%, transparent); color: var(--ob-warning); }
.ob-banner-warn:hover { color: var(--ob-warning); border-color: var(--ob-warning); }
.ob-banner-warn span { color: var(--ob-text); }
.ob-banner-go { margin-left: auto; white-space: nowrap; font-weight: 700; color: var(--ob-warning) !important; }

.ob-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ob-gap); margin-bottom: var(--ob-gap); }
.ob-stat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 156px; padding: 20px 20px 18px;
  border-radius: var(--ob-r-lg); border: 1px solid var(--ob-border);
  background: var(--ob-surface); box-shadow: var(--ob-shadow);
  color: var(--ob-text); text-decoration: none;
  transition: border-color var(--ob-tr), box-shadow var(--ob-tr);
}
.ob-stat:hover, .ob-stat:focus { color: var(--ob-text); text-decoration: none; border-color: var(--ob-accent-ring); }
.ob-stat-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 600; }
.ob-stat-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ob-accent-soft); color: var(--ob-accent-link); font-size: 1.05rem; }
.ob-stat-num { position: relative; z-index: 1; margin-top: auto; font-size: 2.3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ob-stat-sub { position: relative; z-index: 1; font-size: .8rem; color: var(--ob-muted); }
.ob-stat-alert .ob-stat-num { color: var(--ob-danger); }
.ob-stat .ob-art { position: absolute; right: 10px; bottom: 8px; width: 118px; height: 102px; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.ob-stat:hover .ob-art { transform: translateY(-4px) rotate(-2deg); }

/* illustrations: colours follow the accent */
.ob-art .ob-st-hi { stop-color: var(--ob-art-hi); }
.ob-art .ob-st-mid { stop-color: var(--ob-art-mid); }
.ob-art .ob-st-lo { stop-color: var(--ob-art-lo); }
.ob-art-shadow { fill: var(--ob-accent); opacity: .12; }
.ob-art-face-l { fill: var(--ob-art-lo); opacity: .9; }
.ob-art-led { fill: #fff; opacity: .95; }
.ob-art-led-2 { fill: var(--ob-art-hi); opacity: 1; }
.ob-art-slot { stroke: rgba(255, 255, 255, .45); stroke-width: 2; stroke-linecap: round; }
.ob-art-paper { fill: var(--ob-surface); stroke: var(--ob-border-strong); stroke-width: 1.2; }
.ob-art-paper-back { fill: var(--ob-accent-soft-2); }
.ob-art-line { fill: var(--ob-surface-3); }
.ob-art-soft { fill: var(--ob-accent-soft-2); }
.ob-art-glyph { fill: var(--ob-accent-link); font: 800 11px var(--ob-font); }
.ob-art-white { fill: #fff; }
.ob-art-dim { opacity: .35; }
.ob-art-mesh { fill: none; stroke: rgba(255, 255, 255, .38); stroke-width: 1.4; }
.ob-art-band { fill: var(--ob-surface); filter: drop-shadow(0 4px 6px rgba(40, 20, 120, .18)); }
.ob-art-www { fill: var(--ob-accent-link); font: 800 13px var(--ob-font); letter-spacing: 1.5px; }
.ob-art-band-arc { fill: none; stroke: var(--ob-art-mid); stroke-width: 7; stroke-linecap: round; }
.ob-art-boom { fill: none; stroke: var(--ob-art-lo); stroke-width: 3; stroke-linecap: round; }
.ob-art-mic { fill: var(--ob-art-lo); }
.ob-art-bubble { fill: var(--ob-art-mid); }
.ob-art-spark { fill: var(--ob-art-hi); }

.ob-card { background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); box-shadow: var(--ob-shadow); }
.ob-block { margin-bottom: var(--ob-gap); overflow: hidden; }
.ob-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; }
.ob-block-title { margin: 0; font-size: 1.08rem; font-weight: 700; }
.ob-block-sub { margin: 3px 0 0; font-size: .82rem; color: var(--ob-muted); }
.ob-view-all.btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--ob-accent-soft); border-color: transparent; color: var(--ob-accent-link); }
.ob-view-all.btn:hover { background: var(--ob-accent-soft-2); border-color: transparent; color: var(--ob-accent-link); }
.ob-view-all i { font-size: .75em; }
.ob-block-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--ob-border); font-size: .82rem; color: var(--ob-muted); }
.ob-link { font-weight: 600; color: var(--ob-accent-link); }

.ob-table-wrap { overflow-x: auto; }
.ob-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ob-table th { padding: 12px 22px; border-top: 1px solid var(--ob-border); border-bottom: 1px solid var(--ob-border); background: var(--ob-surface-2); color: var(--ob-muted); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.ob-table td { padding: 14px 22px; border-bottom: 1px solid var(--ob-border); vertical-align: middle; color: var(--ob-text-2); font-variant-numeric: tabular-nums; }
.ob-table tbody tr:last-child td { border-bottom: 0; }
.ob-table tbody tr:hover td { background: var(--ob-surface-2); }
.ob-svc { display: flex; align-items: center; gap: 12px; color: var(--ob-text); text-decoration: none; }
.ob-svc:hover { color: var(--ob-accent-link); text-decoration: none; }
.ob-svc strong { display: block; font-size: .88rem; font-weight: 700; }
.ob-svc small { display: block; font-size: .76rem; color: var(--ob-muted); }
.ob-svc-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--ob-accent-soft); color: var(--ob-accent); --fa-primary-color: var(--ob-accent); --fa-secondary-color: var(--ob-art-hi); --fa-secondary-opacity: .9; font-size: 1.05rem; }
.ob-cell-sub { display: block; font-size: .74rem; color: var(--ob-muted); }
.ob-mono-ish { font-weight: 500; color: var(--ob-text); word-break: break-all; }
.ob-cell-actions { width: 1%; white-space: nowrap; }
.ob-kebab { width: 36px; height: 34px; border-radius: var(--ob-r-sm); border: 1px solid var(--ob-border); background: var(--ob-surface); color: var(--ob-text-2); cursor: pointer; }
.ob-kebab:hover, .ob-kebab[aria-expanded="true"] { border-color: var(--ob-border-strong); color: var(--ob-accent-link); }

.ob-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--ob-neutral-bg); color: var(--ob-neutral); font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.ob-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ob-status[style*="--st"] { color: var(--st); background: color-mix(in srgb, var(--st) 13%, transparent); }
.ob-status.ob-status-active, .ob-status.ob-status-paid, .ob-status.ob-status-answered, .ob-status.ob-status-completed { color: var(--ob-success); background: var(--ob-success-bg); }
.ob-status.ob-status-unpaid, .ob-status.ob-status-payment-pending, .ob-status.ob-status-on-hold, .ob-status.ob-status-customer-reply { color: var(--ob-warning); background: var(--ob-warning-bg); }
.ob-status.ob-status-suspended, .ob-status.ob-status-overdue, .ob-status.ob-status-collections, .ob-status.ob-status-fraud { color: var(--ob-danger); background: var(--ob-danger-bg); }
.ob-status.ob-status-pending, .ob-status.ob-status-in-progress { color: var(--ob-info); background: var(--ob-info-bg); }
.ob-status.ob-status-open { color: var(--ob-accent-link); background: var(--ob-accent-soft-2); }
.ob-status.ob-status-closed, .ob-status.ob-status-cancelled, .ob-status.ob-status-refunded, .ob-status.ob-status-terminated { color: var(--ob-neutral); background: var(--ob-neutral-bg); }

.ob-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-gap); }
.ob-duo > .ob-block { display: flex; flex-direction: column; }
.ob-list { list-style: none; margin: 0; padding: 0 16px 14px; flex: 1; }
.ob-list li + li { margin-top: 8px; }
.ob-list-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--ob-border); border-radius: var(--ob-r); color: var(--ob-text); text-decoration: none; transition: border-color var(--ob-tr), background-color var(--ob-tr); }
.ob-list-row:hover, .ob-list-row:focus { border-color: var(--ob-accent-ring); background: var(--ob-surface-2); color: var(--ob-text); text-decoration: none; }
.ob-list-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ob-accent-soft); color: var(--ob-accent-link); font-size: 1.05rem; }
.ob-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-list-main strong { font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-list-main small { font-size: .76rem; color: var(--ob-muted); }
.ob-list-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ob-list-inline .ob-list-end { flex-direction: row; align-items: center; gap: 12px; }
.ob-list-go { color: var(--ob-muted); font-size: .85rem; }
.ob-amount { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob-empty { padding: 30px 22px 34px; text-align: center; color: var(--ob-muted); }
.ob-empty > i { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 10px; border-radius: 16px; background: var(--ob-accent-soft); color: var(--ob-accent-link); font-size: 1.4rem; }
.ob-empty p { max-width: 36ch; margin: 0 auto 12px; font-size: .86rem; }

.ob-addon-html { margin-bottom: var(--ob-gap); }
.ob-home-cards { margin-top: 0; }
.ob-panel-wide > .card { margin-bottom: var(--ob-gap); }
.ob-panels { column-count: 2; column-gap: var(--ob-gap); }
.ob-panels > .card { display: inline-block; width: 100%; break-inside: avoid; margin-bottom: var(--ob-gap); }

/* ---------- 6. CARDS ---------- */
body .card, body .mc-promo-manage, body .mc-promo-login {
  background-color: var(--ob-surface); color: var(--ob-text);
  border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg);
  box-shadow: var(--ob-shadow);
}
body .card-header { background-color: transparent; border-bottom: 1px solid var(--ob-border); padding: 15px 20px; color: var(--ob-text); }
body .card-header:first-child { border-radius: calc(var(--ob-r-lg) - 1px) calc(var(--ob-r-lg) - 1px) 0 0; }
body .card-footer { background-color: var(--ob-surface-2); border-top: 1px solid var(--ob-border); padding: 12px 20px; color: var(--ob-muted); }
body .card-footer:last-child { border-radius: 0 0 calc(var(--ob-r-lg) - 1px) calc(var(--ob-r-lg) - 1px); }
body .card-footer:empty { display: none; }
body .card-body { padding: 20px; }
html[data-density="compact"] body .card-body { padding: 14px; }
html[data-density="compact"] body .card-header { padding: 11px 14px; }
body .card-title { font-size: 1rem; font-weight: 700; color: var(--ob-text); }
body .card .card-title i:first-child { color: var(--ob-accent-link); margin-right: 4px; }
body [class*="card-accent-"] { border-top-width: 1px; }
body .card .list-group-item:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }

/* sidebars (info panel) */
body .card-sidebar .card-header { padding: 13px 16px; }
body .card-sidebar .card-title { font-size: .92rem; }
body .card-sidebar .card-minimise { color: var(--ob-muted); font-size: .8rem; margin-top: 4px; cursor: pointer; }
body .card-sidebar .list-group-item { padding: 10px 16px; border-color: var(--ob-border); font-size: .86rem; }
body .card-sidebar .list-group-item.active, body .card-sidebar .list-group-item.active:hover, body .card-sidebar .list-group-item.active:focus {
  background-color: var(--ob-accent-soft); border-color: var(--ob-border); color: var(--ob-accent-link); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ob-accent);
}
body .card-sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--ob-accent-link); }
body .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; }
body .sidebar-menu-item-icon-wrapper { flex: none; width: 20px; text-align: center; color: var(--ob-muted); }
body .sidebar-menu-item-label { flex: 1; min-width: 0; }
body .sidebar-menu-item-badge .badge { background: var(--ob-surface-3); color: var(--ob-text-2); border-radius: 999px; font-weight: 600; }
body .card-sidebar .card-body { font-size: .86rem; }

/* dashboard panels from WHMCS / modules */
body .client-home-cards .card .card-header { background-color: transparent; border-bottom: 1px solid var(--ob-border); color: var(--ob-text); }
body .primary-content .client-home-cards .card .card-footer { background: var(--ob-surface-2); border-top: 1px solid var(--ob-border); }
body .primary-content .client-home-cards .card .card-footer a { color: var(--ob-accent-link); font-weight: 600; }
body .primary-content .client-home-cards .card .card-header .btn,
body .primary-content .client-home-cards .mc-promo-manage .card-header .btn {
  background: var(--ob-accent-soft); color: var(--ob-accent-link); border: 0;
  border-radius: var(--ob-r-xs); padding: .3rem .75rem; font-size: .78rem; font-weight: 600;
}
body .primary-content .client-home-cards .card .card-header .btn:hover,
body .primary-content .client-home-cards .mc-promo-manage .card-header .btn:hover { background: var(--ob-accent); color: var(--ob-on-accent); }
body .primary-content .client-home-cards .card .card-header .btn i { color: inherit; }
body .primary-content .client-home-cards .card .btn-success { background: var(--ob-accent); border-color: var(--ob-accent); color: var(--ob-on-accent); }
body .client-home-cards .list-group-item { font-size: .86rem; }
body .client-home-cards small { color: var(--ob-muted); }

/* ---------- 7. TABLES ---------- */
body .table { color: var(--ob-text); }
body .table th, body .table td { border-color: var(--ob-border); vertical-align: middle; }
body .table thead th { border-bottom: 1px solid var(--ob-border); background: var(--ob-surface-2); color: var(--ob-muted); font-size: .78rem; font-weight: 600; }
body .table-striped tbody tr:nth-of-type(odd) { background-color: var(--ob-surface-2); }
body .table-hover tbody tr:hover { background-color: var(--ob-accent-soft); color: var(--ob-text); }
body .table-bordered, body .table-bordered td, body .table-bordered th { border-color: var(--ob-border); }
html[data-density="compact"] body .table td, html[data-density="compact"] body .table th { padding: 8px 12px; }

body .table-container { background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); box-shadow: var(--ob-shadow); padding: 4px 0; overflow: hidden; }
body .table-list { background: transparent; }
body .table-list > thead > tr > th { background: var(--ob-surface-2); color: var(--ob-muted); border-color: var(--ob-border); font-size: .78rem; font-weight: 600; padding: 12px 16px; }
body .table-list > tbody > tr > td { background: var(--ob-surface); border-color: var(--ob-border); color: var(--ob-text-2); padding: 13px 16px; }
body .table-list > tbody > tr:hover > td { background: var(--ob-surface-2); color: var(--ob-text); }
body .table-list .text-domain, body .table-list strong { color: var(--ob-text); }
body .dataTables_wrapper .dataTables_info { color: var(--ob-muted); font-size: .8rem; padding: 12px 16px; }
body .dataTables_wrapper .dataTables_length, body .dataTables_wrapper .dataTables_length label { color: var(--ob-muted); font-size: .82rem; }
body .dataTables_wrapper .dataTables_filter label .form-control, body .dataTables_wrapper .dataTables_length select { background: var(--ob-surface); color: var(--ob-text); border-color: var(--ob-border-strong); border-radius: var(--ob-r-sm); }
body .dataTables_wrapper .dataTables_paginate { padding: 8px 12px; }

/* WHMCS status labels */
body .label, body .badge { font-family: var(--ob-font); }
body .label.status, body span.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; border: 0;
  font-size: .74rem; font-weight: 600; line-height: 1.5; text-shadow: none;
  background: var(--ob-neutral-bg); color: var(--ob-neutral);
}
body .label.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body .status-active, body .status-paid, body .status-completed, body .status-answered, body .status-accepted, body .status-delivered { background: var(--ob-success-bg) !important; color: var(--ob-success) !important; }
body .status-pending, body .status-in-progress, body .status-pending-transfer, body .status-pending-registration, body .status-sent { background: var(--ob-info-bg) !important; color: var(--ob-info) !important; }
body .status-unpaid, body .status-payment-pending, body .status-customer-reply, body .status-on-hold, body .status-grace { background: var(--ob-warning-bg) !important; color: var(--ob-warning) !important; }
body .status-suspended, body .status-overdue, body .status-fraud, body .status-collections, body .status-redemption, body .status-dead, body .status-lost { background: var(--ob-danger-bg) !important; color: var(--ob-danger) !important; }
body .status-cancelled, body .status-terminated, body .status-expired, body .status-closed, body .status-refunded, body .status-draft, body .status-transferred-away { background: var(--ob-neutral-bg) !important; color: var(--ob-neutral) !important; }
body .status-open { background: var(--ob-accent-soft-2) !important; color: var(--ob-accent-link) !important; }

/* ---------- 8. FORMS & BUTTONS ---------- */
body .btn { border-radius: var(--ob-r-sm); font-weight: 600; font-family: var(--ob-font); }
body .btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.btn-block):not(.btn-link) { min-height: 40px; }
body .btn-sm { border-radius: var(--ob-r-xs); padding: .38rem .85rem; font-size: .8rem; }
body .btn-xs { border-radius: 7px; }
body .btn-primary, body .btn-primary:not(:disabled):not(.disabled):active, body .btn-primary.disabled, body .btn-primary:disabled {
  background-color: var(--ob-accent); border-color: var(--ob-accent); color: var(--ob-on-accent);
}
body .btn-primary:hover, body .btn-primary:focus { background-color: var(--ob-accent-hover); border-color: var(--ob-accent-hover); color: var(--ob-on-accent); }
body .btn-primary:not(.btn-sm):not(.btn-xs) { box-shadow: 0 10px 22px -12px var(--ob-accent-ring); }
body .btn-default, body .btn-secondary, body .btn-light, body .btn-outline-secondary {
  background-color: var(--ob-surface); border: 1px solid var(--ob-border-strong); color: var(--ob-text);
}
body .btn-default:hover, body .btn-secondary:hover, body .btn-light:hover, body .btn-outline-secondary:hover,
body .btn-default:focus, body .btn-secondary:focus { background-color: var(--ob-surface-3); border-color: var(--ob-border-strong); color: var(--ob-text); }
body .btn-outline-primary { color: var(--ob-accent-link); border-color: var(--ob-accent-ring); }
body .btn-outline-primary:hover { background: var(--ob-accent); border-color: var(--ob-accent); color: var(--ob-on-accent); }
body .btn-link { color: var(--ob-accent-link); }
body .btn-success { background-color: #12936a; border-color: #12936a; }
body .btn-success:hover { background-color: #0d7d59; border-color: #0d7d59; }
body .btn-danger { background-color: #d23a50; border-color: #d23a50; }

body .form-control, body .custom-select, body select.form-control {
  height: var(--ob-ctl-h); border-radius: var(--ob-r-sm);
  background-color: var(--ob-surface); border: 1px solid var(--ob-border-strong); color: var(--ob-text);
  font-family: var(--ob-font); font-size: .88rem;
  transition: border-color var(--ob-tr), box-shadow var(--ob-tr);
}
body textarea.form-control, body select[multiple].form-control, body select[size].form-control { height: auto; }
body .form-control:focus, body .custom-select:focus { border-color: var(--ob-accent); background-color: var(--ob-surface); color: var(--ob-text); }
body .form-control::placeholder { color: var(--ob-muted); opacity: .8; }
body .form-control:disabled, body .form-control[readonly] { background-color: var(--ob-surface-2); color: var(--ob-muted); }
body .input-group-text { background-color: var(--ob-surface-2); border-color: var(--ob-border-strong); color: var(--ob-muted); border-radius: var(--ob-r-sm); }
body .input-group > .form-control:not(:last-child), body .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body .input-group > .form-control:not(:first-child), body .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body .input-group-merge .input-group-prepend .input-group-text { border-right: 0; background: var(--ob-surface); }
body .input-group-merge .form-control:not(:first-child) { border-left: 0; }
body label, body .form-control-label, body .control-label, body .col-form-label { color: var(--ob-text-2); font-weight: 600; font-size: .84rem; }
body .form-text, body .help-block { color: var(--ob-muted); }
body .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ob-accent); border-color: var(--ob-accent); }
body .custom-control-label::before { background-color: var(--ob-surface); border-color: var(--ob-border-strong); }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--ob-accent); }
body .bootstrap-switch { border-color: var(--ob-border-strong); border-radius: var(--ob-r-sm); }
body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--ob-accent); color: var(--ob-on-accent); }
body .bootstrap-switch .bootstrap-switch-label { background: var(--ob-surface); }

/* ---------- 9. COMPONENTS ---------- */
body .list-group-item { background-color: var(--ob-surface); border-color: var(--ob-border); color: var(--ob-text-2); }
body .list-group-item-action:hover, body .list-group-item-action:focus { background-color: var(--ob-surface-2); color: var(--ob-text); }
body .list-group-item.active { background-color: var(--ob-accent-soft); border-color: var(--ob-border); color: var(--ob-accent-link); }
body .list-group-item.disabled { color: var(--ob-muted); background: var(--ob-surface); }

body .nav-tabs { border-bottom-color: var(--ob-border); }
body .nav-tabs .nav-link { color: var(--ob-muted); font-weight: 600; border-radius: var(--ob-r-sm) var(--ob-r-sm) 0 0; }
body .nav-tabs .nav-link:hover { border-color: transparent; color: var(--ob-text); }
body .nav-tabs .nav-link.active, body .nav-tabs .nav-item.show .nav-link { background: var(--ob-surface); color: var(--ob-accent-link); border-color: var(--ob-border) var(--ob-border) var(--ob-surface); box-shadow: inset 0 2px 0 var(--ob-accent); }
body .nav-pills .nav-link { border-radius: var(--ob-r-sm); color: var(--ob-text-2); }
body .nav-pills .nav-link.active, body .nav-pills .show > .nav-link { background: var(--ob-accent); color: var(--ob-on-accent); }
body .tab-content > .tab-pane { color: var(--ob-text); }

body .dropdown-menu { background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r); box-shadow: var(--ob-shadow-lg); padding: 6px; font-size: .86rem; }
body .dropdown-item { border-radius: var(--ob-r-xs); padding: 8px 12px; color: var(--ob-text); }
body .dropdown-item i { color: var(--ob-muted); margin-right: 4px; }
body .dropdown-item:hover, body .dropdown-item:focus { background: var(--ob-surface-2); color: var(--ob-text); }
body .dropdown-item.active, body .dropdown-item:active { background: var(--ob-accent-soft); color: var(--ob-accent-link); }
body .dropdown-item.text-danger, body .dropdown-item.text-danger i { color: var(--ob-danger) !important; }
body .dropdown-divider { border-top-color: var(--ob-border); margin: 6px 0; }

body .modal-content { background: var(--ob-surface); color: var(--ob-text); border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); box-shadow: var(--ob-shadow-lg); }
body .modal-header, body .modal-footer { border-color: var(--ob-border); }
body .modal-footer { background: var(--ob-surface-2); border-radius: 0 0 var(--ob-r-lg) var(--ob-r-lg); }
body .close { color: var(--ob-text); text-shadow: none; opacity: .55; }
body .close:hover { color: var(--ob-text); opacity: .9; }
body .modal-backdrop { background: #0e0b24; }
body .modal-backdrop.show { opacity: .55; }

body .alert { border-radius: var(--ob-r); border: 1px solid transparent; font-size: .88rem; }
body .alert-success { background: var(--ob-success-bg); color: var(--ob-success); border-color: color-mix(in srgb, var(--ob-success) 20%, transparent); }
body .alert-info { background: var(--ob-info-bg); color: var(--ob-info); border-color: color-mix(in srgb, var(--ob-info) 20%, transparent); }
body .alert-warning { background: var(--ob-warning-bg); color: var(--ob-warning); border-color: color-mix(in srgb, var(--ob-warning) 22%, transparent); }
body .alert-danger { background: var(--ob-danger-bg); color: var(--ob-danger); border-color: color-mix(in srgb, var(--ob-danger) 20%, transparent); }
body .alert a, body .alert .alert-link { color: inherit; text-decoration: underline; font-weight: 700; }

body .badge { border-radius: 999px; font-weight: 600; }
body .badge-primary, body .badge-info { background: var(--ob-accent); color: var(--ob-on-accent); }
body .badge-light, body .badge-secondary, body .badge-default { background: var(--ob-surface-3); color: var(--ob-text-2); }

body .pagination .page-link { margin: 0 3px; border-radius: var(--ob-r-sm) !important; border: 1px solid var(--ob-border); background: var(--ob-surface); color: var(--ob-text-2); min-width: 36px; text-align: center; }
body .pagination .page-link:hover { background: var(--ob-surface-2); color: var(--ob-accent-link); }
body .pagination .page-item.active .page-link { background: var(--ob-accent-soft-2); border-color: transparent; color: var(--ob-accent-link); font-weight: 700; }
body .pagination .page-item.disabled .page-link { background: var(--ob-surface); color: var(--ob-muted); opacity: .6; }

body .progress { background: var(--ob-surface-3); border-radius: 999px; }
body .progress-bar { background: var(--ob-accent); }
body .breadcrumb { background: transparent; }
body .jumbotron, body .well { background: var(--ob-surface-2); color: var(--ob-text); border-radius: var(--ob-r-lg); }
body pre, body code { color: var(--ob-text); }
body pre { background: var(--ob-surface-2); border: 1px solid var(--ob-border); border-radius: var(--ob-r-sm); padding: 12px; }
body blockquote { border-left: 3px solid var(--ob-accent-ring); padding-left: 14px; color: var(--ob-text-2); }
body .bg-color-blue, body .bg-color-green, body .bg-color-red, body .bg-color-gold { border: 0; }

/* product details: module output (cPanel, Plesk, VPS panels...) keeps its own look inside a card */
body .product-details .product-icon { background: var(--ob-surface-2); border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); color: var(--ob-text); }
body .product-details .product-icon h3, body .product-details .product-icon h4 { color: var(--ob-text); }
body .product-details .product-icon .fa-stack .fa-circle { color: var(--ob-accent); }
body .product-status { border-radius: var(--ob-r-lg); overflow: hidden; }
body .module-client-area { color: var(--ob-text); }
body .module-client-area img { max-width: 100%; height: auto; }
body .module-quick-shortcuts a, body .cpanel-feature-row a { color: var(--ob-text); border-radius: var(--ob-r-sm); }
body .module-quick-shortcuts a:hover, body .cpanel-feature-row a:hover { background: var(--ob-surface-2); color: var(--ob-accent-link); }
body .module-quick-shortcuts a img, body .cpanel-feature-row a img { max-width: 48px; }

/* support */
body .ticket-reply { border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); overflow: hidden; background: var(--ob-surface); }
body .ticket-reply .posted-by { background: var(--ob-surface-2); border-bottom: 1px solid var(--ob-border); color: var(--ob-muted); }
body .ticket-reply.staff .posted-by { background: var(--ob-accent-soft); }
body .ticket-reply .message { color: var(--ob-text); }
body .ticket-reply .posted-by .posted-by-name { color: var(--ob-text); font-weight: 700; }
body .ticket-subject, body .ticket-number { color: var(--ob-text); }
body .kb-article-title, body .kb-article-content { color: var(--ob-text); }
body .kb-category, body .kbcategories a { color: var(--ob-text); }
body .announcement-single h3, body .announcement-single a { color: var(--ob-text); }
body .announcements .announcement article { border-color: var(--ob-border); }

/* view invoice / quote inside the client area */
body .invoice-container { background: var(--ob-surface); color: var(--ob-text); border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); }
body .invoice-container .table td, body .invoice-container .table th { color: var(--ob-text); }

/* language / currency modal (core forces a dark modal with a map image) */
body .modal-localisation .modal-content { background-color: var(--ob-surface); }
body .modal-localisation .modal-body { background: none; padding: 26px 26px 18px; }
body .modal-localisation .h5, body .modal-localisation h5 { color: var(--ob-text); font-weight: 700; }
body .modal-localisation .h5 i { color: var(--ob-accent-link); margin-right: 6px; }
body .modal-localisation .close { position: absolute; top: 14px; right: 18px; }
body .modal-localisation .item-selector .item { display: block; padding: 9px 12px; margin: 4px 0; border: 1px solid var(--ob-border-strong); border-radius: var(--ob-r-sm); background: var(--ob-surface); color: var(--ob-text); font-weight: 500; text-decoration: none; }
body .modal-localisation .item-selector .item:hover { border-color: var(--ob-accent); color: var(--ob-text); background: var(--ob-surface-2); }
body .modal-localisation .item-selector .item.active { background: var(--ob-accent); border-color: var(--ob-accent); color: var(--ob-on-accent); font-weight: 700; }

/* footer */
body footer.footer.ob-footer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  margin: 8px 0 0; padding: 18px var(--ob-pad-x) 22px;
  background: transparent; color: var(--ob-muted); font-size: .8rem; text-align: center;
}
body footer.footer.ob-footer .copyright { width: 100%; margin: 0; text-align: center; font-size: .8rem; color: var(--ob-muted); }
.ob-footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.ob-footer-links a, body footer.footer.ob-footer .nav-link { color: var(--ob-muted); padding: 0; }
.ob-footer-links a:hover { color: var(--ob-accent-link); text-decoration: none; }
.ob-footer-links .list-inline-item { margin: 0; }
.ob-footer-locale { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--ob-border); border-radius: var(--ob-r-xs); background: var(--ob-surface); color: var(--ob-text-2); font: 500 .78rem var(--ob-font); cursor: pointer; }
.ob-footer-locale:hover { border-color: var(--ob-border-strong); color: var(--ob-text); }

.ob-totop { position: fixed; right: 20px; bottom: 20px; z-index: 1030; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--ob-border); background: var(--ob-surface); color: var(--ob-accent-link); box-shadow: var(--ob-shadow); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--ob-tr), transform var(--ob-tr); }
.ob-totop.show { opacity: 1; transform: none; pointer-events: auto; }

/* "Powered by" line is removed by orbit.js; this hides the usual wrappers instantly */
.powered-by-whmcs, .whmcs-powered-by, #poweredby, .poweredby { display: none !important; }

/* ---------- 10. STORE, DOMAINS & CART ---------- */
body #order-standard_cart .products .product,
body #order-standard_cart .cart-body .products .product header,
body #order-standard_cart .cart-body .view-cart-empty,
body #order-standard_cart .domain-selection-options,
body #order-standard_cart .domain-promo-box,
body #order-standard_cart .panel, body #order-standard_cart .panel .panel-heading, body #order-standard_cart .panel .panel-footer,
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true],
body .secondary-cart-body #domainRenewals,
body #order-standard_cart .view-cart-items, body #order-standard_cart .view-cart-items .item { background: var(--ob-surface); color: var(--ob-text); border-color: var(--ob-border); }
body #order-standard_cart .products .product { border-radius: var(--ob-r-lg); box-shadow: var(--ob-shadow); overflow: hidden; }
body #order-standard_cart .products .product header { border-bottom: 1px solid var(--ob-border); }
body #order-standard_cart .products .product header span { color: var(--ob-text); font-weight: 700; }
body #order-standard_cart .products .product div.product-desc, body #order-standard_cart .products .product div.product-desc li { color: var(--ob-text-2); }
body #order-standard_cart .products .product div.product-pricing span.price { color: var(--ob-text); }
body #order-standard_cart .view-cart-items-header { background: var(--ob-accent); color: var(--ob-on-accent); border-radius: var(--ob-r) var(--ob-r) 0 0; }
body #order-standard_cart .order-summary { background: var(--ob-surface-2); border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); overflow: hidden; }
body #order-standard_cart .order-summary h2 { background: var(--ob-accent); color: var(--ob-on-accent); font-size: 1rem; }
body #order-standard_cart .summary-container { background: var(--ob-surface); color: var(--ob-text); }
body #order-standard_cart .order-summary .total-due-today .amt { color: var(--ob-text); }
body #order-standard_cart .domain-selection-options .option-selected { background: var(--ob-accent-soft); }
body #order-standard_cart .sub-heading { border-top-color: var(--ob-border); }
body #order-standard_cart .sub-heading span { background: var(--ob-bg); color: var(--ob-text-2); }
body #order-standard_cart .field, body #order-standard_cart .form-control { background: var(--ob-surface); color: var(--ob-text); border-color: var(--ob-border-strong); }
body #order-standard_cart .product-info { background: var(--ob-surface-2); border-color: var(--ob-border); color: var(--ob-text); }
body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
body #order-standard_cart .domain-pricing .tld-pricing-header div,
.domain-pricing .tld-pricing-header .col-xs-2, .domain-pricing .tld-pricing-header .col-sm-2, .domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header div:nth-child(odd) { background: var(--ob-surface-2); color: var(--ob-text-2); }
body #order-standard_cart .domain-pricing .tld-filters .badge { background: var(--ob-surface-3); color: var(--ob-text-2); }
.domain-pricing .tld-row { border-color: var(--ob-border); }
.domain-pricing .tld-row.highlighted { background: var(--ob-accent-soft); }
body #order-standard_cart .domain-checker-container, body .domain-checker-container { background: linear-gradient(135deg, var(--ob-art-mid), var(--ob-art-lo)); border-radius: var(--ob-r-lg); }
.store-order-container .store-domain-tabs li a { background: var(--ob-surface-2); color: var(--ob-text-2); }
.store-order-container .store-domain-tabs li.active a { background: var(--ob-surface); color: var(--ob-accent-link); }
div.credit-card { background: var(--ob-surface-2); color: var(--ob-text); }
div.credit-card div.card-number { background: var(--ob-surface-3); color: var(--ob-text); }
.home-domain-search { border-radius: var(--ob-r-lg); margin-bottom: var(--ob-gap); }
.home-domain-search .input-group-wrapper { background: var(--ob-surface); border-radius: var(--ob-r); }
body .ob-in-cart #order-standard_cart { color: var(--ob-text); }

/* ---------- 10b. ORDER FORM (cartx_child / standard_cart): fonts + product addons ----------
   cartx asks for an 'Open Sans Bold' font that is never loaded (browsers fall back to Times),
   and loads after this file, so these rules win on specificity / !important. */
body #order-standard_cart,
body #order-standard_cart :is(h1, h2, h3, h4, h5, h6, p, span, a, label, button, select, input, textarea, td, th, li, div, strong, small, b),
body .cart-head-bar, body .cart-head-bar :is(h1, h2, p, span) { font-family: var(--ob-font) !important; }
body #order-standard_cart .btn-success:not(.btn-checkout) {
  background: var(--ob-accent) !important; border-color: var(--ob-accent) !important; color: var(--ob-on-accent) !important;
}
body #order-standard_cart .btn-success:not(.btn-checkout):hover, body #order-standard_cart .btn-success:not(.btn-checkout):focus { background: var(--ob-accent-hover) !important; border-color: var(--ob-accent-hover) !important; }


/* container: drop cartx's grey-shadowed, centred box */
body #order-standard_cart.m-cart-30 { margin: 0 !important; }
body #order-standard_cart.m-cart-30 > .row { margin: 0; }
body #order-standard_cart .cart-body.product-addon-page { flex: 1 1 100%; width: 100%; max-width: 100%; min-height: 0; margin: 0; padding: 0 !important; background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: left; }
body #order-standard_cart .product-addon-page .products { margin: 0; }
body #order-standard_cart .product-addon-page .products > .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--ob-gap); margin: 0; }
body #order-standard_cart .product-addon-page .products > .row + .row { margin-top: var(--ob-gap); }
body #order-standard_cart .product-addon-page .products > .row:empty { display: none; }
body #order-standard_cart .product-addon-page .products > .row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; }

/* addon card */
body #order-standard_cart .product-addon-page .products .product {
  display: flex; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 !important; overflow: hidden;
  background: var(--ob-surface) !important; color: var(--ob-text);
  border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); box-shadow: var(--ob-shadow);
  transition: border-color var(--ob-tr);
}
body #order-standard_cart .product-addon-page .products .product:hover { border-color: var(--ob-accent-ring); }
body #order-standard_cart .product-addon-page .product form.form-inline { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; }
body #order-standard_cart .product-addon-page .products .product h2 {
  /* tinted header band, same as the package cards */
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  min-height: 0; margin: 0; padding: 22px 22px 18px;
  background: linear-gradient(180deg, var(--ob-accent-soft), transparent); border-bottom: 1px solid var(--ob-border);
  font-size: 1.02rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--ob-text); text-align: left;
}
body #order-standard_cart .product-addon-page .products .product h2::before {
  content: "\f12e"; font-family: "Font Awesome 6 Pro"; font-weight: 300;
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--ob-surface); border: 1px solid var(--ob-border); box-shadow: var(--ob-shadow-sm); color: var(--ob-accent-link); font-size: 1.05rem; line-height: 1;
}
body #order-standard_cart .product-addon-page .products .product h2[data-ob-brand]::before { content: ""; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 62% auto; }
body #order-standard_cart .product-addon-page .products .product h2[data-ob-brand="cpanel"]::before { background-image: url(../img/addon-cpanel.png); }
body #order-standard_cart .product-addon-page .products .product h2[data-ob-brand="directadmin"]::before { background-image: url(../img/addon-directadmin.png); background-size: 56% auto; }
body #order-standard_cart .product-addon-page .product .product-desc { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 18px 22px 22px !important; margin: 0; float: none; }
body #order-standard_cart .product-addon-page .products .product p { margin: 0 0 18px; font-size: .86rem; line-height: 1.5; color: var(--ob-muted); text-align: left; }
body #order-standard_cart .product-addon-page .p_addon_price { position: static; margin: auto 0 16px; padding-top: 16px; border-top: 1px solid var(--ob-border); }
body #order-standard_cart .product-addon-page .p_addon_price span { display: block; padding: 0; font-size: 1.2rem; font-weight: 700; color: var(--ob-text); text-align: left; font-variant-numeric: tabular-nums; }
body #order-standard_cart .product-addon-page .form-group.select-button-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; width: 100%; margin: 0; float: none; }
body #order-standard_cart .product-addon-page .form-group.select-button-section::before { content: "Add to service"; grid-column: 1 / -1; font-size: .76rem; font-weight: 600; color: var(--ob-muted); }
body #order-standard_cart .product-addon-page .products .product select {
  order: 0; float: none; width: 100%; max-width: none; height: 42px; margin: 0; padding: 0 12px;
  border: 1px solid var(--ob-border-strong); border-radius: var(--ob-r-sm); background-color: var(--ob-surface-2);
  color: var(--ob-text); font-size: .86rem;
}
body #order-standard_cart .product-addon-page .products .product select:focus { border-color: var(--ob-accent); box-shadow: 0 0 0 4px var(--ob-accent-ring); }
body #order-standard_cart .product-addon-page .products .product .btn-success {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto !important; max-width: none; height: 42px; min-height: 42px; padding: 0 18px; border-radius: var(--ob-r-sm);
  font-size: .86rem; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 22px -12px var(--ob-accent-ring);
}

/* no addons available */
body #order-standard_cart .noAddonsSec { margin: 0 0 16px; padding: 40px 24px; background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); box-shadow: var(--ob-shadow); text-align: center; color: var(--ob-muted); }
body #order-standard_cart .noAddonsSec img { max-width: 84px; margin-bottom: 12px; }
body #order-standard_cart .noAddonsSec p { margin: 0; color: var(--ob-muted); font-size: .9rem; }

@media (max-width: 575.98px) {
  body #order-standard_cart .product-addon-page .products > .row { grid-template-columns: 1fr; }
  body #order-standard_cart .product-addon-page .form-group.select-button-section { grid-template-columns: 1fr; }
}

/* ---------- 10c. ORDER FORM: product listing (store/<group>) + shared cart heading ---------- */
/* every cart page heading: drop cartx's striped image bar */
body .cart-head-bar:not(.configure-cart-head) { display: block; width: auto; margin: 0 0 18px; padding: 0; background: none; border: 0; }
body .cart-head-bar h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: var(--ob-text); }
body .cart-head-bar h1 i { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 12px; background: var(--ob-accent-soft); color: var(--ob-accent-link); font-size: 1.05rem; }
body .cart-head-bar p { padding-left: 54px; color: var(--ob-muted); }

/* category tabs */
body #order-standard_cart .host-nav.product-listing-page { display: block; width: 100%; margin: 0 0 6px; padding: 6px; background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r); box-shadow: var(--ob-shadow-sm); }
body #order-standard_cart .host-nav.product-listing-page > ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
body #order-standard_cart .host-nav.product-listing-page > ul > li { float: none; margin: 0; }
body #order-standard_cart .host-nav.product-listing-page .drop-nav {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: var(--ob-r-sm);
  background: transparent; color: var(--ob-text-2); font-size: .86rem; font-weight: 600; text-decoration: none; box-shadow: none; white-space: nowrap;
}
body #order-standard_cart .host-nav.product-listing-page .drop-nav:hover { background: var(--ob-surface-3); color: var(--ob-text); }
body #order-standard_cart .host-nav.product-listing-page li.active > .drop-nav,
body #order-standard_cart .host-nav.product-listing-page .drop-nav.active { background: var(--ob-accent-soft-2); color: var(--ob-accent-link); }
body #order-standard_cart .host-nav .dropdown-menu { padding: 6px; border: 1px solid var(--ob-border); border-radius: var(--ob-r); box-shadow: var(--ob-shadow-lg); }
body #order-standard_cart .host-nav .dropdown-menu::before { display: none; }
body #order-standard_cart .host-nav .dropdown-menu li { border: 0 !important; }
body #order-standard_cart .host-nav .dropdown-menu li a { padding: 8px 12px !important; border-radius: var(--ob-r-xs); color: var(--ob-text) !important; font-size: .86rem !important; text-decoration: none !important; }
body #order-standard_cart .host-nav .dropdown-menu li a:hover { background: var(--ob-surface-2) !important; color: var(--ob-accent-link) !important; }

/* section heading + "slider / all products" switch */
body #order-standard_cart .choose-pack { display: block; width: 100%; padding: 0; }
body #order-standard_cart .pack-hed { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; }
body #order-standard_cart .pack-hed h2 { margin: 0 !important; text-align: left !important; font-size: 1.15rem; font-weight: 700; color: var(--ob-text); text-transform: none; }
body #order-standard_cart .switcher-for-product { display: inline-flex; gap: 3px; margin: 0; padding: 3px; border-radius: var(--ob-r-sm); background: var(--ob-surface-3); }
body #order-standard_cart .switch-slider { padding: 6px 12px; border-radius: var(--ob-r-xs); color: var(--ob-muted); font-size: .8rem; font-weight: 600; cursor: pointer; background: transparent; }
body #order-standard_cart .switch-slider.active { background: var(--ob-surface); color: var(--ob-text); box-shadow: var(--ob-shadow-sm); }

/* package grid (the slider variant keeps cartx's carousel; only the cards are restyled) */
body #order-standard_cart .tab_container .tab_content > .row { margin: 0; }
body #order-standard_cart .domains-post.product-page-products-center { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--ob-gap); width: 100%; margin: 0; }
body #order-standard_cart .domains-post.product-page-products-center > .slide { flex: none; width: auto; max-width: none; margin: 0; padding: 0; }
body #order-standard_cart .domains-post .slide .generic_content { height: 100%; }

/* package card */
body #order-standard_cart .generic_content.clearfix {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r-lg); box-shadow: var(--ob-shadow);
  transition: border-color var(--ob-tr);
}
body #order-standard_cart .generic_content.clearfix:hover { border-color: var(--ob-accent-ring); }
body #order-standard_cart .generic_head_price { margin: 0; padding: 22px 22px 18px; background: linear-gradient(180deg, var(--ob-accent-soft), transparent); border-bottom: 1px solid var(--ob-border); border-radius: 0; }
body #order-standard_cart .generic_head_content .head { padding: 0; text-align: center; }
body #order-standard_cart .generic_head_content span.cart-product-name { display: block; min-height: 0; padding: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ob-text); text-transform: none; text-align: center; }
body #order-standard_cart .generic_head_content .quantity-product { display: inline-block; margin-top: 6px; padding: 2px 8px; min-height: 0; border-radius: 999px; background: var(--ob-warning-bg); color: var(--ob-warning); font-size: .72rem; font-weight: 600; }
body #order-standard_cart .generic_price_tag span.price { display: block; min-height: 0; padding: 0; margin-top: 14px; font-size: 1.7rem; font-weight: 700; line-height: 1.15; color: var(--ob-text); text-align: left; font-variant-numeric: tabular-nums; }
body #order-standard_cart .generic_price_tag .start-from { margin: 0 0 4px; font-size: .76rem; font-weight: 600; color: var(--ob-muted); }
body #order-standard_cart .generic_price_tag .product-billing-cycle { font-size: .85rem; font-weight: 500; color: var(--ob-muted); }
body #order-standard_cart .generic_feature_list { flex: 1; padding: 16px 22px 6px; }
body #order-standard_cart .generic_feature_list br { display: none; }
body #order-standard_cart .generic_feature_list ul { margin: 0; padding: 0; }
body #order-standard_cart .generic_feature_list li { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 7px 0; border: 0; border-top: 1px solid var(--ob-border); color: var(--ob-text-2); font-size: .86rem; text-align: left; }
body #order-standard_cart .generic_feature_list li:first-child { border-top: 0; }
body #order-standard_cart .generic_feature_list li::before { content: "\f00c"; flex: none; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: .78rem; color: var(--ob-accent-link); }
body #order-standard_cart .generic_feature_list li .feature-value { color: var(--ob-muted); }
body #order-standard_cart .generic_feature_list li strong { color: var(--ob-text); font-weight: 700; }
body #order-standard_cart .generic_price_btn { padding: 14px 22px 22px; text-align: center; }
body #order-standard_cart .generic_content .wgs_custom-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; padding: 0 18px; margin: 0;
  border: 0; border-radius: 12px; background: var(--ob-accent); color: var(--ob-on-accent); font-size: .92rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 22px -12px var(--ob-accent-ring); transition: background-color var(--ob-tr);
}
body #order-standard_cart .generic_content .wgs_custom-btn:hover, body #order-standard_cart .generic_content .wgs_custom-btn:focus { background: var(--ob-accent-hover); color: var(--ob-on-accent); }

/* email verification banner (includes/verifyemail.tpl) */
body .verification-banner.ob-verify { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--ob-gap); padding: 12px 14px 12px 16px; background: var(--ob-warning-bg); border: 1px solid color-mix(in srgb, var(--ob-warning) 22%, transparent); border-radius: var(--ob-r); color: var(--ob-text); box-shadow: none; }
body .ob-verify .ob-verify-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .7); color: var(--ob-warning); font-size: 1.05rem; }
body .ob-verify .ob-verify-text { flex: 1; min-width: 0; font-size: .88rem; font-weight: 500; color: var(--ob-text); }
body .verification-banner.ob-verify .btn.ob-verify-btn { flex: none; width: auto; min-height: 36px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--ob-warning) 35%, transparent); background: var(--ob-surface); color: var(--ob-warning); font-size: .8rem; font-weight: 700; }
body .verification-banner.ob-verify .btn.ob-verify-btn:hover { background: var(--ob-warning); border-color: var(--ob-warning); color: #fff; }
body .verification-banner.ob-verify .btn.close.ob-verify-close { flex: none; float: none; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ob-muted); font-size: 1.3rem; line-height: 1; opacity: 1; }
body .verification-banner.ob-verify .btn.close.ob-verify-close:hover { background: rgba(0, 0, 0, .05); color: var(--ob-text); }

@media (max-width: 575.98px) {
  body #order-standard_cart .host-nav.product-listing-page .drop-nav { padding: 8px 11px; font-size: .82rem; }
  body #order-standard_cart .domains-post.product-page-products-center { grid-template-columns: 1fr; }
  body .verification-banner.ob-verify { flex-wrap: wrap; }
  body .ob-verify .ob-verify-text { flex-basis: calc(100% - 100px); }
  body .verification-banner.ob-verify .btn.ob-verify-btn { order: 4; flex: 1 1 100%; }
}

/* ---------- 11. AUTH & MISC PAGES ---------- */
body.ob-guest .card.mw-540 { margin-left: auto; margin-right: auto; }
.ob-page-clientregister .ob-primary { max-width: 980px; margin: 0 auto; }
.providerLinkingFeedback:empty { display: none; }
body .social-signin-btns .btn { border-radius: var(--ob-r-sm); }
.ob-page-homepage .ob-primary .card { height: auto; }

/* sign-in layout (login, password reset, two-factor): full-screen animated background + centred card.
   HostDime brand colours, independent of the accent setting. */
body.ob-body .ob-auth {
  --ob-brand: #d9620c; --ob-brand-hover: #c4560b; --ob-brand-link: #b9520a; --ob-brand-ring: rgba(243, 122, 31, .28);
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% 105%, #3a2414 0%, rgba(58, 36, 20, 0) 55%), linear-gradient(180deg, #1c232b 0%, #151a20 55%, #101318 100%);
  color: #1f242a;
}
body.ob-page-login, body.ob-page-password-reset-container, body.ob-page-two-factor-challenge { background-color: #151a20; }
body.ob-page-login .ob-totop, body.ob-page-password-reset-container .ob-totop, body.ob-page-two-factor-challenge .ob-totop { display: none !important; }

.ob-auth-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ob-auth-net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ob-auth-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; min-height: 180px; max-height: 340px; display: block; }
.ob-sk-back .ob-sk-rack { fill: #1b2128; stroke: rgba(255, 255, 255, .05); }
.ob-sk-front .ob-sk-rack { fill: #232b33; stroke: rgba(255, 255, 255, .08); }
.ob-sk-unit { fill: rgba(255, 255, 255, .035); }
.ob-sk-led { fill: #52d69a; animation-name: ob-led; animation-iteration-count: infinite; animation-timing-function: steps(1, end); }
.ob-sk-led-o { fill: #ff9a45; }
@keyframes ob-led { 0% { opacity: 1; } 55% { opacity: .2; } 70% { opacity: 1; } 85% { opacity: .45; } }

.ob-auth-main { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; padding: 22px 20px 18px; }
.ob-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1200px; font-size: .84rem; }
body .ob-auth .ob-auth-home { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .78); font-weight: 600; text-decoration: none; }
body .ob-auth .ob-auth-home:hover { color: #fff; }
.ob-auth-locale { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); font: 600 .8rem var(--ob-font); cursor: pointer; }
.ob-auth-locale:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ob-auth-body {
  width: 100%; max-width: 440px; margin: auto 0; padding: 38px 38px 32px;
  background: rgba(255, 255, 255, .97); border: 1px solid rgba(255, 255, 255, .6); border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .04);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: ob-card-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ob-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body .ob-auth .ob-auth-logo { display: block; width: 240px; max-width: 100%; margin: 0 auto 28px; }
body .ob-auth .ob-auth-logo img { display: block; width: 100% !important; height: auto; }
.ob-auth-body > .alert { margin-bottom: 18px !important; border-radius: 12px; }
.ob-auth-body > .alert .container { padding: 0; }

body .ob-auth .ob-auth-head { margin-bottom: 24px; text-align: center; }
body .ob-auth .ob-auth-title { margin: 0 0 6px; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; color: #1f242a; }
body .ob-auth .ob-auth-sub { margin: 0; font-size: .88rem; color: #5b636c; }
body .ob-auth .form-group { margin-bottom: 18px; }
body .ob-auth label { display: block; margin-bottom: 7px; font-size: .84rem; font-weight: 600; color: #333a42; }
body .ob-auth .ob-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body .ob-auth .ob-label-row label { margin-bottom: 7px; }
body .ob-auth .ob-auth-link { color: var(--ob-brand-link); font-weight: 600; font-size: .84rem; text-decoration: none; }
body .ob-auth .ob-auth-link:hover { color: var(--ob-brand-hover); text-decoration: underline; }
body .ob-auth .ob-field { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }
body .ob-auth .ob-field-ico { position: absolute; z-index: 4; left: 15px; top: 50%; transform: translateY(-50%); color: #7b838c; pointer-events: none; font-size: .95rem; }
body .ob-auth .ob-field .form-control { flex: 1 1 auto; width: 1%; min-width: 0; height: 48px; padding-left: 44px; border-radius: 12px; border: 1px solid #dfe2e6; background: #f6f7f9; color: #1f242a; font-size: .95rem; }
body .ob-auth .ob-field .form-control:focus { border-color: var(--ob-brand); background: #fff; box-shadow: 0 0 0 4px var(--ob-brand-ring); }
body .ob-auth .ob-field.input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body .ob-auth .ob-field .input-group-append { display: flex; margin-left: -1px; }
body .ob-auth .ob-field .btn-reveal-pw { height: 48px; min-height: 48px; width: 48px; padding: 0; border: 1px solid #dfe2e6; border-left: 0; border-radius: 0 12px 12px 0; background: #f6f7f9; color: #5b636c; box-shadow: none; }
body .ob-auth .ob-field .btn-reveal-pw:hover { color: var(--ob-brand-link); background: #eef0f3; }
body .ob-auth .ob-check { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font-weight: 500; color: #333a42; cursor: pointer; }
body .ob-auth .ob-check input { position: static; width: 18px; height: 18px; margin: 0; accent-color: var(--ob-brand); }
body .ob-auth .ob-auth-captcha { margin: 0 0 18px; }
body .ob-auth .ob-auth-captcha > div { margin: 0; justify-content: center; }
body .ob-auth .ob-auth-captcha .recaptcha-container { margin-bottom: 0; display: flex; justify-content: center; }
body .ob-auth .btn-primary, body .ob-auth .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--ob-brand); border-color: var(--ob-brand); color: #fff; box-shadow: 0 12px 24px -14px rgba(217, 98, 12, .9);
}
body .ob-auth .btn-primary:hover, body .ob-auth .btn-primary:focus { background: var(--ob-brand-hover); border-color: var(--ob-brand-hover); color: #fff; }
body .ob-auth .btn:focus, body .ob-auth .form-control:focus { box-shadow: 0 0 0 4px var(--ob-brand-ring); }
.ob-auth a:focus-visible, .ob-auth button:focus-visible { outline-color: var(--ob-brand); }
body .ob-auth .ob-auth-submit { display: block; width: 100%; height: 50px; border-radius: 12px; font-size: 1rem; font-weight: 700; }
body .ob-auth .ob-auth-alt { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #eef0f2; text-align: center; font-size: .88rem; color: #5b636c; }
body .ob-auth .ob-auth-alt .ob-auth-link { font-size: inherit; margin-left: 4px; }
.ob-auth .social-signin-btns { margin-top: 18px; }
/* password reset / two-factor reuse their stock card; flatten it into ours */
.ob-auth-content > .row { margin: 0; }
body .ob-auth-content .card { max-width: none; margin: 0 !important; border: 0; background: transparent; box-shadow: none; }
body .ob-auth-content .card-body { padding: 0 !important; }
body .ob-auth-content .card-title, body .ob-auth-content h3, body .ob-auth-content h6.h3 { font-size: 1.4rem; font-weight: 700; color: #1f242a; text-align: center; }
body .ob-auth-content .form-control { height: 48px; border-radius: 12px; border-color: #dfe2e6; background: #f6f7f9; }
body .ob-auth-content .btn { border-radius: 12px; }

body .ob-auth .ob-auth-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 24px; text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .62); }
body .ob-auth .ob-auth-foot .ob-footer-links { justify-content: center; }
body .ob-auth .ob-auth-foot .ob-footer-links a { color: rgba(255, 255, 255, .72); }
body .ob-auth .ob-auth-foot .ob-footer-links a:hover { color: #fff; }
body .ob-auth .ob-auth-foot .copyright { margin: 0; color: rgba(255, 255, 255, .62); }

@media (max-width: 575.98px) {
  .ob-auth-main { padding: 14px 12px 14px; }
  .ob-auth-body { padding: 28px 20px 24px; border-radius: 18px; margin-top: 20px; margin-bottom: 0; }
  body .ob-auth .ob-auth-logo { width: 200px; margin-bottom: 22px; }
  body .ob-auth .ob-auth-title { font-size: 1.3rem; }
  .ob-auth-skyline { height: 24vh; min-height: 140px; }
}
@media (max-width: 340px) { body .ob-auth .ob-auth-captcha .recaptcha-container { transform: scale(.88); transform-origin: center; } }
@media (prefers-reduced-motion: reduce) { .ob-sk-led { animation: none; } .ob-auth-body { animation: none; } }

/* ---------- 12. RESPONSIVE ---------- */
@media (max-width: 1599.98px) {
  .ob-search .form-control { width: 220px; }
  .ob-search .form-control:focus { width: 260px; }
}
@media (max-width: 1399.98px) {
  .ob-stat .ob-art { width: 96px; height: 84px; right: 6px; opacity: .95; }
}
@media (max-width: 1199.98px) {
  .ob-rail { width: min(300px, 86vw); transform: translateX(-105%); box-shadow: none; }
  .ob-main { margin-left: 0; }
  .ob-icon-btn.ob-rail-close { display: inline-grid; }
  .ob-icon-btn.ob-burger { display: inline-grid; }
  body.ob-nav-open { overflow: hidden; }
  body.ob-nav-open .ob-rail { transform: none; box-shadow: var(--ob-shadow-lg); }
  body.ob-nav-open .ob-overlay { opacity: 1; pointer-events: auto; }
  .ob-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-stat .ob-art { width: 112px; height: 98px; }
  .ob-duo { grid-template-columns: 1fr; }
  .ob-grid-aside { grid-template-columns: minmax(0, 1fr) 270px; }
  html[data-panel="left"] .ob-grid-aside { grid-template-columns: 270px minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  :root { --ob-pad-x: 20px; --ob-gap: 16px; }
  .ob-grid-aside, html[data-panel="left"] .ob-grid-aside { display: flex; flex-direction: column; gap: 0; }
  .ob-grid-aside > .ob-aside, html[data-panel="left"] .ob-grid-aside > .ob-aside { order: 0; position: static; max-height: none; overflow: visible; width: 100%; }
  .ob-search .form-control { width: 200px; }
  .ob-panels { column-count: 1; }
  .ob-lg-only { display: none; }
}
@media (max-width: 767.98px) {
  body header.header.ob-topbar { gap: 10px; min-height: 68px; padding-top: 12px; padding-bottom: 12px; }
  .ob-title-h { font-size: 1.15rem; }
  .ob-title-sub { font-size: .78rem; }
  .ob-actions { gap: 6px; }
  .ob-icon-btn { width: 40px; height: 40px; border-radius: 11px; font-size: 1rem; }
  .ob-search { display: none; }
  .ob-icon-btn.ob-search-open { display: inline-grid; }
  body.ob-search-on .ob-search { display: flex; position: absolute; left: var(--ob-pad-x); right: var(--ob-pad-x); top: 50%; transform: translateY(-50%); z-index: 5; margin: 0; }
  body.ob-search-on .ob-search .form-control, body.ob-search-on .ob-search .form-control:focus { width: 100%; box-shadow: var(--ob-shadow-lg); }
  .ob-kbd { display: none; }
  .ob-panel.ob-appearance { position: fixed; top: 76px; left: 12px; right: 12px; min-width: 0; }

  /* service table becomes stacked rows */
  .ob-table thead { display: none; }
  .ob-table, .ob-table tbody, .ob-table tr, .ob-table td { display: block; width: 100%; }
  .ob-table tr { position: relative; padding: 14px 18px; border-top: 1px solid var(--ob-border); }
  .ob-table td { padding: 3px 0; border: 0; }
  .ob-table tbody tr:hover td { background: transparent; }
  .ob-table td[data-label]:not(:first-child) { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; }
  .ob-table td[data-label]:not(:first-child)::before { content: attr(data-label); color: var(--ob-muted); font-weight: 600; }
  .ob-table td:first-child { padding: 0 44px 8px 0; }
  .ob-table .ob-cell-actions { position: absolute; top: 14px; right: 18px; width: auto; padding: 0; }
  .ob-table .ob-cell-sub { display: inline; margin-left: 6px; }
  .ob-block-head { padding: 16px 18px 12px; }
  .ob-block-foot { padding: 12px 18px; }
  .ob-list { padding: 0 12px 12px; }
  .ob-list-row { padding: 10px 12px; gap: 12px; }
  .ob-list-ico { width: 36px; height: 36px; }


}
@media (max-width: 575.98px) {
  :root { --ob-pad-x: 14px; --ob-gap: 12px; }
  .ob-hide-xs { display: none !important; }
  /* title drops to its own row under the burger + actions */
  body header.header.ob-topbar { flex-wrap: wrap; row-gap: 8px; position: relative; }
  body.ob-search-on .ob-search { top: 32px; }
  .ob-actions { margin-left: auto; }
  .ob-title { order: 3; flex: 1 1 100%; }
  .ob-title-h { white-space: normal; font-size: 1.2rem; }
  .ob-panel.ob-appearance { top: 64px; }
  .ob-stats { gap: 10px; }
  .ob-stat { min-height: 128px; padding: 14px; border-radius: var(--ob-r); }
  .ob-stat-head { font-size: .8rem; gap: 8px; }
  .ob-stat-ico { width: 32px; height: 32px; border-radius: 10px; font-size: .9rem; }
  .ob-stat-num { font-size: 1.8rem; }
  .ob-stat-sub { font-size: .72rem; }
  .ob-stat .ob-art { width: 64px; height: 56px; right: 4px; bottom: 4px; opacity: .9; }
  .ob-banner { flex-wrap: wrap; }
  .ob-banner-go { margin-left: 30px; }
  .ob-guest-actions .btn-default { display: none; }
  .ob-list-inline .ob-list-go { display: none; }
  body .card-body { padding: 16px; }
  body .card-header { padding: 13px 16px; }
}
@media (max-height: 959.98px) { .ob-help .ob-art { display: none; } }
@media (max-height: 719.98px) { .ob-help { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 13. PRINT ---------- */
@media print {
  .ob-rail, .ob-overlay, body header.header.ob-topbar, .ob-footer, .ob-totop, .ob-aside { display: none !important; }
  .ob-main { margin: 0 !important; }
  .ob-grid-aside { display: block; }
  body.ob-body { background: #fff; color: #000; }
}