/* *****************************************************
   Onebux dark theme — shared header/footer/topbar
   Used by: homepage, login, register, password-reset,
   announcements, knowledgebase, contact.
   Body must carry class "ob-themed-page" (plus a page-specific
   class such as ob-login-page) for these rules to apply.
***************************************************** */

:root{
  --ob-bg:#0a0e17;
  --ob-surface:#111826;
  --ob-surface-2:#161f30;
  --ob-line:#232d40;
  --ob-text:#eaeff5;
  --ob-muted:#8a93a6;
  --ob-green:#00e5a0;
  --ob-green-dim:#00a878;
  --ob-amber:#ffb020;
  --ob-red:#ff5c6c;
  --ob-display:'Space Grotesk','Helvetica Neue',sans-serif;
  --ob-body:'Inter','Helvetica Neue',sans-serif;
  --ob-mono:'JetBrains Mono',monospace;
}

body.ob-themed-page{margin:0;background:var(--ob-bg) !important;}
body.ob-themed-page #main-body{display:flex;flex-direction:column;background:var(--ob-bg);}
body.ob-themed-page #main-body > .container{flex:1;padding-left:0;padding-right:0;}
body.ob-themed-page #main-body > .container > .row::after{content:"";display:table;clear:both;}
body.ob-themed-page #main-body > .container > .row > .main-content{padding:0;}
body.ob-themed-page #main-body > .container > .row > .sidebar{padding-top:88px;}
@media (max-width:991px){
  body.ob-themed-page #main-body > .container > .row > .sidebar{padding-top:24px;}
}
body.ob-themed-page .header-lined{display:none;}

body.ob-themed-page section#footer{background:var(--ob-bg) !important;border-top:1px solid var(--ob-line);}
body.ob-themed-page section#footer p,
body.ob-themed-page section#footer .back-to-top{color:var(--ob-muted) !important;}
body.ob-themed-page section#footer .back-to-top:hover{color:var(--ob-text) !important;}

/* ---------- Cart pages (domain register/transfer, product store) ----------
   Header/footer swap only. Content (domain checker, pricing table,
   sidebar) intentionally keeps its original layout/styling — do not add
   layout-restructuring rules here without testing the live AJAX flows. */
body.ob-cart-page{background:var(--ob-bg) !important;margin:0;}
body.ob-cart-page #main-body{background:var(--ob-bg);}
body.ob-cart-page section#footer{background:var(--ob-bg) !important;border-top:1px solid var(--ob-line);}
body.ob-cart-page section#footer p,
body.ob-cart-page section#footer .back-to-top{color:var(--ob-muted) !important;}
body.ob-cart-page section#footer .back-to-top:hover{color:var(--ob-text) !important;}

/* Pricing table rows use a light "highlighted" stripe designed for a
   light page; darken it so the (already white) text stays readable. */
body.ob-cart-page .tld-row.highlighted{
  background:var(--ob-surface) !important;
}
body.ob-cart-page .tld-pricing-header div{
  background-color:var(--ob-surface) !important;
  border-color:var(--ob-green-dim) !important;
  color:var(--ob-text) !important;
}
body.ob-cart-page .bg-white{background-color:var(--ob-surface) !important;}

/* Brighten body copy to pure white — the theme's default off-white
   (--ob-text) reads dim on this content-dense page. Buttons/badges keep
   their own explicit colors since those rules are more specific. */
body.ob-cart-page,
body.ob-cart-page p,
body.ob-cart-page label,
body.ob-cart-page .cart-sidebar,
body.ob-cart-page .cart-body,
body.ob-cart-page .tld-row,
body.ob-cart-page .tld-row div,
body.ob-cart-page .header-lined h1,
body.ob-cart-page .header-lined small,
body.ob-cart-page h1,
body.ob-cart-page h2,
body.ob-cart-page h3,
body.ob-cart-page h4{
  color:#ffffff !important;
}

/* Sidebar action links (Register/Transfer/View Cart) default to a white
   Bootstrap background — give them the panel's dark background so the
   now-white text stays visible in every state. */
body.ob-cart-page .cart-sidebar .list-group-item{
  background-color:var(--ob-surface) !important;
  color:#ffffff !important;
  border-color:var(--ob-line) !important;
}
body.ob-cart-page .cart-sidebar .list-group-item:hover,
body.ob-cart-page .cart-sidebar .list-group-item.active{
  background-color:var(--ob-line) !important;
  color:#ffffff !important;
}

/* All panel/card boxes (Categories, Actions, Choose Currency, etc., in
   both their expanded list and collapsed <select> responsive variants)
   — fully blend into the dark theme rather than keeping the stock
   light-panel look. */
body.ob-cart-page .panel,
body.ob-cart-page .card{
  background-color:var(--ob-surface) !important;
  border-color:var(--ob-line) !important;
}
body.ob-cart-page .panel-heading,
body.ob-cart-page .card-header,
body.ob-cart-page .panel-body,
body.ob-cart-page .card-body{
  background-color:var(--ob-surface) !important;
  border-color:var(--ob-line) !important;
  color:#ffffff !important;
}
body.ob-cart-page .panel-title,
body.ob-cart-page .panel-title i,
body.ob-cart-page .panel-heading i,
body.ob-cart-page .card-header i{
  color:#ffffff !important;
}
body.ob-cart-page .list-group-item{
  background-color:var(--ob-surface) !important;
  color:#ffffff !important;
  border-color:var(--ob-line) !important;
}
body.ob-cart-page .list-group-item:hover,
body.ob-cart-page .list-group-item.active{
  background-color:var(--ob-line) !important;
  color:#ffffff !important;
}

/* Dropdown/select controls (category switcher, currency picker, the
   mobile "collapsed sidebar" selects) default to a white input. */
body.ob-cart-page select,
body.ob-cart-page .form-control,
body.ob-cart-page .custom-select{
  background-color:var(--ob-surface) !important;
  color:#ffffff !important;
  border-color:var(--ob-line) !important;
}
body.ob-cart-page select option{
  background-color:var(--ob-surface) !important;
  color:#ffffff !important;
}

/* "Add Web Hosting" / "Transfer your domain" promo boxes: white card
   background from the light theme, invisible against white text now. */
body.ob-cart-page .domain-promo-box{
  background-color:var(--ob-surface) !important;
  color:#ffffff !important;
}
body.ob-cart-page .domain-promo-box h3,
body.ob-cart-page .domain-promo-box p{
  color:#ffffff !important;
}

/* Product/store pages (e.g. /store/dedicated-hosting): the pricing-table
   cards ship with a white card background from the light theme — same
   invisible-white-on-white problem as the promo boxes above. */
body.ob-cart-page .product{
  background-color:var(--ob-surface) !important;
  border:1px solid var(--ob-line) !important;
  color:#ffffff !important;
}
body.ob-cart-page .product header,
body.ob-cart-page .product .product-desc,
body.ob-cart-page .product .product-desc p,
body.ob-cart-page .product .product-desc ul,
body.ob-cart-page .product .product-desc li,
body.ob-cart-page .product footer,
body.ob-cart-page .product .product-pricing,
body.ob-cart-page .product .product-pricing .price{
  background-color:transparent !important;
  color:#ffffff !important;
  border-color:var(--ob-line) !important;
}
/* The package-name <span> inside header has its own explicit gray color
   in the stock CSS (#333), which otherwise overrides the header rule
   above since an element's own color always beats an inherited one. */
body.ob-cart-page .product header span{
  color:#ffffff !important;
}

/* ---------- Shared topbar ---------- */
.ob-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:var(--ob-bg);border-bottom:1px solid var(--ob-line);
  font-family:var(--ob-body);flex-shrink:0;box-sizing:border-box;
  position:sticky;top:0;z-index:50;
}
.ob-topbar .ob-logo{
  font-family:var(--ob-display);font-weight:700;font-size:18px;letter-spacing:-0.02em;
  color:var(--ob-text);text-decoration:none;display:flex;align-items:center;gap:2px;
}
.ob-topbar .ob-logo img{height:26px;width:auto;display:block;background:#fff;border-radius:6px;padding:3px 8px;}
.ob-topbar .ob-logo .one{color:var(--ob-green);}

.ob-topbar-links{display:flex;align-items:center;gap:24px;}
.ob-topbar-links a{font-size:13px;font-weight:500;color:var(--ob-text);transition:color .15s ease;}
.ob-topbar-links a:hover{color:var(--ob-green);}
@media (max-width:900px){.ob-topbar-links{display:none;}}

.ob-nav-dropdown{position:relative;}
.ob-nav-dropdown-toggle{
  display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--ob-text);font-family:var(--ob-body);padding:0;
  transition:color .15s ease;
}
.ob-nav-dropdown-toggle svg{width:13px;height:13px;stroke:currentColor;transition:transform .15s ease;}
.ob-nav-dropdown:hover .ob-nav-dropdown-toggle{color:var(--ob-green);}
.ob-nav-dropdown:hover .ob-nav-dropdown-toggle svg{transform:rotate(180deg);}
.ob-nav-dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:0;
  min-width:220px;background:var(--ob-surface);border:1px solid var(--ob-line);border-radius:10px;
  padding:6px;box-shadow:0 16px 40px -12px rgba(0,0,0,0.6);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:60;
}
.ob-nav-dropdown:hover .ob-nav-dropdown-menu,
.ob-nav-dropdown-menu:hover{opacity:1;visibility:visible;transform:translateY(0);}
.ob-nav-dropdown-menu a{
  display:block;padding:9px 12px;border-radius:6px;font-size:13.5px;color:var(--ob-text) !important;
  white-space:nowrap;
}
.ob-nav-dropdown-menu a:hover{background:var(--ob-bg);color:var(--ob-green) !important;}

.ob-topbar .ob-nav-right{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ob-muted);}
.ob-topbar .ob-btn-ghost{
  display:inline-flex;align-items:center;padding:7px 14px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--ob-text);border:1px solid var(--ob-line);
  text-decoration:none;transition:border-color .15s ease;
}
.ob-topbar .ob-btn-ghost:hover{border-color:var(--ob-muted);color:var(--ob-text);}
.ob-topbar .ob-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid transparent;background:var(--ob-green);color:#00150e;
  text-decoration:none;transition:background .15s ease, transform .12s ease;
  white-space:nowrap;font-family:var(--ob-body);
}
.ob-topbar .ob-btn-primary:hover{background:#1ff5b3;color:#00150e;}
.ob-topbar .ob-btn-primary:active{transform:scale(0.97);}
.ob-topbar .ob-login-link{font-size:13.5px;color:var(--ob-muted);font-weight:500;display:none;}
@media (min-width:640px){.ob-topbar .ob-login-link{display:inline;}}