/* *****************************************************
   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:'Nunito Sans','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;
}

/* Domain-search "spotlight" TLD result cards (the .com/.net/.org/etc.
   grid shown after checking a domain) — white cards with gray text
   from the stock theme. */
body.ob-cart-page .spotlight-tld{
  background-color:var(--ob-surface) !important;
  border-color:var(--ob-line) !important;
  color:#ffffff !important;
}
body.ob-cart-page .spotlight-tld .tld-pricing,
body.ob-cart-page .spotlight-tld .price,
body.ob-cart-page .spotlight-tld span:not(.domain-lookup-loader){
  color:#ffffff !important;
}

/* ---------- Shared topbar ---------- */
.ob-topbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:20px 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-nav-right .ob-login-link a{color:var(--ob-green);}

/* ---------- Mobile hamburger menu (shared topbar) ---------- */
.ob-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:28px;height:28px;background:none;border:none;cursor:pointer;padding:0;}
.ob-hamburger span{display:block;width:100%;height:2px;background:var(--ob-text);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
@media (max-width:900px){.ob-hamburger{display:flex;}}
.ob-mobile-menu{display:none;flex-direction:column;width:100%;flex-basis:100%;background:var(--ob-surface);border-top:1px solid var(--ob-line);margin-top:14px;padding:12px 0;}
.ob-menu-check:checked ~ .ob-mobile-menu{display:flex;}
.ob-mobile-menu a{padding:10px 24px;color:var(--ob-text);border-bottom:1px solid var(--ob-line);font-size:14px;text-decoration:none;}
.ob-mobile-menu a:last-child{border-bottom:none;}
.ob-mobile-menu-cta{display:flex;gap:10px;padding:14px 24px 0;}
.ob-menu-check:checked ~ .ob-nav-right .ob-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ob-menu-check:checked ~ .ob-nav-right .ob-hamburger span:nth-child(2){opacity:0;}
.ob-menu-check:checked ~ .ob-nav-right .ob-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.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;}}

/* ── Client area dark mode ── */
body.ob-themed-page{color:var(--ob-text);}
body.ob-themed-page #main-body > .container{padding-left:15px;padding-right:15px;}
body.ob-themed-page #main-body > .container > .row > .main-content{padding:0 15px;}
body.ob-themed-page h1,body.ob-themed-page h2,body.ob-themed-page h3,
body.ob-themed-page h4,body.ob-themed-page h5,body.ob-themed-page h6{color:var(--ob-text);}
body.ob-themed-page p,body.ob-themed-page label,body.ob-themed-page small{color:var(--ob-text);}
body.ob-themed-page .text-muted{color:var(--ob-muted) !important;}
body.ob-themed-page a{color:var(--ob-green);}
body.ob-themed-page a:hover{color:#1ff5b3;}
body.ob-themed-page hr{border-color:var(--ob-line);}
body.ob-themed-page .panel,body.ob-themed-page .panel-default{
  background:var(--ob-surface);border-color:var(--ob-line);color:var(--ob-text);}
body.ob-themed-page .panel-heading,body.ob-themed-page .panel-default>.panel-heading{
  background:#151e30;border-color:var(--ob-line);color:var(--ob-text);}
body.ob-themed-page .panel-body{color:var(--ob-text);}
body.ob-themed-page .panel-footer{background:#151e30;border-color:var(--ob-line);color:var(--ob-muted);}
body.ob-themed-page .well{background:var(--ob-surface);border-color:var(--ob-line);color:var(--ob-text);}
body.ob-themed-page .table{color:var(--ob-text);}
body.ob-themed-page .table>tbody>tr{background:var(--ob-surface);}
body.ob-themed-page .table>thead>tr>th,body.ob-themed-page .table>tbody>tr>td,
body.ob-themed-page .table>tfoot>tr>td{border-color:var(--ob-line);color:var(--ob-text);background:inherit;}
body.ob-themed-page .table-striped>tbody>tr:nth-of-type(odd){background:rgba(255,255,255,0.03);}
body.ob-themed-page .table-hover>tbody>tr:hover{background:rgba(255,255,255,0.05);}
body.ob-themed-page .table>thead>tr>th{background:#151e30;color:var(--ob-muted);}
/* DataTables overrides */
body.ob-themed-page table.dataTable tbody tr,
body.ob-themed-page table.dataTable tbody tr.odd,
body.ob-themed-page table.dataTable tbody tr.even{background:var(--ob-surface) !important;}
body.ob-themed-page table.dataTable tbody tr:hover,
body.ob-themed-page table.dataTable tbody tr.odd:hover,
body.ob-themed-page table.dataTable tbody tr.even:hover{background:#151e30 !important;}
body.ob-themed-page table.dataTable tbody td{background:transparent !important;color:var(--ob-text);border-color:var(--ob-line);}
body.ob-themed-page .dataTables_wrapper .dataTables_info{color:var(--ob-muted);}
body.ob-themed-page .dataTables_wrapper .dataTables_filter label{color:var(--ob-muted);}
body.ob-themed-page .dataTables_wrapper .dataTables_filter input{background:var(--ob-surface) !important;border-color:var(--ob-line) !important;color:var(--ob-text) !important;}
body.ob-themed-page .dataTables_wrapper .dataTables_length{background:transparent;color:var(--ob-muted);}
body.ob-themed-page .dataTables_wrapper .dataTables_length label{color:var(--ob-muted);background:transparent;}
body.ob-themed-page .dataTables_wrapper .dataTables_length select,
body.ob-themed-page .dataTables_wrapper .dataTables_length select.form-control{background:var(--ob-surface) !important;border-color:var(--ob-line) !important;color:var(--ob-text) !important;}
body.ob-themed-page .dataTables_wrapper .sorting,
body.ob-themed-page .dataTables_wrapper .sorting_asc,
body.ob-themed-page .dataTables_wrapper .sorting_desc{background-color:#151e30;color:var(--ob-muted);}
body.ob-themed-page th.sorting,
body.ob-themed-page th.sorting_asc,
body.ob-themed-page th.sorting_desc,
body.ob-themed-page th.sorting_disabled{background-color:#151e30 !important;color:var(--ob-muted) !important;border-color:var(--ob-line) !important;}
body.ob-themed-page .listtable{background:var(--ob-surface) !important;border-color:var(--ob-line);}
body.ob-themed-page .table-container{background:transparent;}
/* Product details page */
body.ob-themed-page .product-icon{background:#151e30 !important;color:var(--ob-text);}
body.ob-themed-page .product-icon h3,body.ob-themed-page .product-icon h4{color:var(--ob-text);}
body.ob-themed-page .product-details .panel,body.ob-themed-page .product-details .panel-body{background:var(--ob-surface);color:var(--ob-text);}
body.ob-themed-page .service-info-block{background:var(--ob-surface);color:var(--ob-text);}
body.ob-themed-page .service-info-block dt,body.ob-themed-page .service-info-block dd{color:var(--ob-text);}
/* Portal home stat tiles */
body.ob-themed-page .tile{background:var(--ob-surface) !important;}
body.ob-themed-page .tile a{color:#fff;}
body.ob-themed-page .tile .stat{color:#fff !important;font-weight:700;}
body.ob-themed-page .tile .title{color:#fff !important;}
body.ob-themed-page .tile .icon{color:rgba(255,255,255,0.5);}
/* Profile/details page */
body.ob-themed-page .marketing-email-optin{background:var(--ob-surface) !important;color:var(--ob-text);padding:12px;border-radius:4px;border:1px solid var(--ob-line);}
body.ob-themed-page .marketing-email-optin h4{color:var(--ob-text);}
body.ob-themed-page .marketing-email-optin p{color:var(--ob-muted);}
body.ob-themed-page .bootstrap-switch .bootstrap-switch-label{background:var(--ob-surface);border-color:var(--ob-line);}
body.ob-themed-page .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default{background:var(--ob-surface);color:var(--ob-muted);}
/* iCheck / toggle elements */
body.ob-themed-page .icheckbox_square-blue,body.ob-themed-page .iradio_square-blue{background-color:var(--ob-surface) !important;border-color:var(--ob-line) !important;}
body.ob-themed-page .dataTables_wrapper{background:transparent;color:var(--ob-text);}
body.ob-themed-page div.dataTables_length,
body.ob-themed-page div.dataTables_filter,
body.ob-themed-page div.dataTables_info,
body.ob-themed-page div.dataTables_paginate{background:transparent !important;}
body.ob-themed-page .form-control{
  background:var(--ob-surface);border-color:var(--ob-line);color:var(--ob-text);}
body.ob-themed-page .form-control:focus{border-color:var(--ob-green);box-shadow:none;}
body.ob-themed-page .form-control::placeholder{color:#4b5468;}
body.ob-themed-page .input-group-addon{
  background:#151e30;border-color:var(--ob-line);color:var(--ob-muted);}
body.ob-themed-page .btn-default{
  background:var(--ob-surface);border-color:var(--ob-line);color:var(--ob-text);}
body.ob-themed-page .btn-default:hover{background:#151e30;border-color:var(--ob-muted);color:var(--ob-text);}
body.ob-themed-page .btn-primary{
  background:var(--ob-green);border-color:var(--ob-green);color:#00150e;}
body.ob-themed-page .btn-primary:hover{background:#1ff5b3;border-color:#1ff5b3;color:#00150e;}
body.ob-themed-page .breadcrumb{background:transparent;color:var(--ob-muted);}
body.ob-themed-page .breadcrumb>li+li::before{color:var(--ob-muted);}
body.ob-themed-page .breadcrumb>.active{color:var(--ob-muted);}
body.ob-themed-page .breadcrumb>li>a{color:var(--ob-green);}
body.ob-themed-page .list-group-item{
  background:var(--ob-surface);border-color:var(--ob-line);color:var(--ob-text);}
body.ob-themed-page .list-group-item.active,body.ob-themed-page .list-group-item:hover{
  background:#151e30;color:var(--ob-text);border-color:var(--ob-line);}
body.ob-themed-page .text-domain{color:#fff !important;}
body.ob-themed-page .div-service-name{color:#fff;}
body.ob-themed-page .div-service-name span{color:#fff !important;}
body.ob-themed-page .nav-tabs{border-color:var(--ob-line);}
body.ob-themed-page .nav-tabs>li>a{color:var(--ob-muted);}
body.ob-themed-page .nav-tabs>li.active>a,body.ob-themed-page .nav-tabs>li.active>a:hover{
  background:var(--ob-surface);border-color:var(--ob-line) var(--ob-line) transparent;color:var(--ob-text);}
body.ob-themed-page .tab-content{background:var(--ob-surface);border:1px solid var(--ob-line);
  border-top:none;padding:16px;color:var(--ob-text);}
body.ob-themed-page .alert{border:1px solid;}
body.ob-themed-page .alert-info{background:rgba(58,159,213,0.1);border-color:rgba(58,159,213,0.3);color:#7ec8f0;}
body.ob-themed-page .alert-success{background:rgba(0,229,160,0.08);border-color:rgba(0,229,160,0.3);color:var(--ob-green);}
body.ob-themed-page .alert-warning{background:rgba(254,188,46,0.08);border-color:rgba(254,188,46,0.3);color:#febc2e;}
body.ob-themed-page .alert-danger{background:rgba(255,92,108,0.08);border-color:rgba(255,92,108,0.3);color:#ff5c6c;}
body.ob-themed-page .label-success{background:var(--ob-green);color:#00150e;}
body.ob-themed-page .label-danger{background:#ff5c6c;}
body.ob-themed-page .label-warning{background:#febc2e;color:#1a1000;}
body.ob-themed-page .label-info{background:#3a9fd5;}
body.ob-themed-page .label-default{background:var(--ob-surface);color:var(--ob-muted);border:1px solid var(--ob-line);}
body.ob-themed-page .dropdown-menu{
  background:var(--ob-surface);border-color:var(--ob-line);box-shadow:0 8px 30px rgba(0,0,0,0.4);}
body.ob-themed-page .dropdown-menu>li>a{color:var(--ob-text);}
body.ob-themed-page .dropdown-menu>li>a:hover{background:#151e30;color:var(--ob-green);}
body.ob-themed-page .pagination>li>a,body.ob-themed-page .pagination>li>span{
  background:var(--ob-surface);border-color:var(--ob-line);color:var(--ob-text);}
body.ob-themed-page .pagination>li>a:hover{background:#151e30;color:var(--ob-green);}
body.ob-themed-page .pagination>.active>a,body.ob-themed-page .pagination>.active>span{
  background:var(--ob-green);border-color:var(--ob-green);color:#00150e;}
body.ob-themed-page select.form-control option{background:var(--ob-surface);color:var(--ob-text);}

/* Highlight bar colours for new tiles */
.bg-color-teal{background:#00b5c8 !important;}
.bg-color-purple{background:#9b59b6 !important;}

/* ── Virtual Account banner ──────────────────────────────────────────────── */
body.ob-themed-page .dt-va-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  background:var(--ob-surface);border:1px solid var(--ob-line);
  border-radius:10px;padding:12px 16px;margin:10px 0 10px;
  font-size:13px;}
body.ob-themed-page .dt-va-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.25);
  color:var(--ob-green);font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:20px;white-space:nowrap;}
body.ob-themed-page .dt-va-bank{
  color:var(--ob-muted);font-size:12px;font-weight:600;}
body.ob-themed-page .dt-va-num{
  font-family:var(--ob-mono);font-size:15px;font-weight:700;
  color:var(--ob-text);letter-spacing:.08em;}
body.ob-themed-page .dt-va-name{
  color:var(--ob-muted);font-size:12px;}
body.ob-themed-page .dt-va-copy{
  margin-left:auto;background:transparent;border:1px solid var(--ob-line);
  border-radius:6px;padding:4px 10px;color:var(--ob-muted);
  cursor:pointer;font-size:13px;transition:all .15s;}
body.ob-themed-page .dt-va-copy:hover{border-color:var(--ob-green);color:var(--ob-green);}
body.ob-themed-page .dt-va-pending .dt-va-none{
  color:var(--ob-muted);font-size:12px;font-style:italic;}

/* ── DTWallet tile row — all in normal flow, same as original WHMCS tiles */
body.ob-themed-page .dt-wallet-row{margin-top:10px;}
body.ob-themed-page .dt-main-wallet{cursor:pointer;}

/* Currency pills — in normal flow after .title */
body.ob-themed-page .dt-pills{
  display:flex;gap:5px;justify-content:center;
  margin:10px 0 6px;
}
body.ob-themed-page .dt-pill{
  padding:2px 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:20px;
  background:transparent;
  color:rgba(255,255,255,.5);
  font-size:10px;font-weight:700;
  cursor:pointer;
  transition:all .15s;
  line-height:1.7;
}
body.ob-themed-page .dt-pill:hover{
  border-color:var(--ob-green);color:var(--ob-green);}
body.ob-themed-page .dt-pill.dt-pill-active{
  background:var(--ob-green);border-color:var(--ob-green);color:#00150e;}

/* Add Funds label — between pills and highlight */
body.ob-themed-page .dt-add-wrap{text-align:center;margin-bottom:6px;}
body.ob-themed-page .dt-add-txt{
  font-size:11px;font-weight:700;color:var(--ob-green);opacity:.85;}

/* USD "SOON" pill variant */
body.ob-themed-page .dt-pill-soon{
  border-color:rgba(255,176,32,.35) !important;
  color:rgba(255,176,32,.7) !important;}
body.ob-themed-page .dt-pill-soon.dt-pill-active{
  background:rgba(255,176,32,.15) !important;
  border-color:#febc2e !important;
  color:#febc2e !important;}
body.ob-themed-page .dt-soon-tag{
  font-size:8px;font-weight:900;letter-spacing:.04em;
  background:rgba(255,176,32,.2);border-radius:3px;
  padding:1px 4px;margin-left:2px;vertical-align:middle;}

/* Referral wallet "COMING SOON" overlay */
body.ob-themed-page .dt-coming-soon-tile{position:relative;overflow:hidden;}
body.ob-themed-page .dt-coming-soon-overlay{
  position:absolute;inset:0;
  background:rgba(10,14,23,.72);
  backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  z-index:4;}
body.ob-themed-page .dt-coming-soon-overlay span{
  background:rgba(155,89,182,.2);
  border:1px solid rgba(155,89,182,.5);
  color:#c39bd3;
  font-size:13px;font-weight:800;letter-spacing:.08em;
  padding:6px 18px;border-radius:20px;
  text-transform:uppercase;}

/* ── Add Funds page (clientareaaddfunds) ─────────────────────────────────── */
body.ob-themed-page .dt-af-wrap{max-width:700px;margin:0 auto;}
body.ob-themed-page .dt-af-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ob-muted);margin:0 0 14px;}

/* Balance cards row */
body.ob-themed-page .dt-af-balances{margin-bottom:28px;}
body.ob-themed-page .dt-bal-card{
  background:var(--ob-surface);border:1px solid var(--ob-line);border-radius:12px;
  padding:20px 16px;text-align:center;margin-bottom:12px;}
body.ob-themed-page .dt-bal-icon{font-size:22px;margin-bottom:8px;}
body.ob-themed-page .dt-bal-icon.dt-bal-usdt{color:#f0b90b;}
body.ob-themed-page .dt-bal-icon.dt-bal-ngn{color:var(--ob-green);}
body.ob-themed-page .dt-bal-icon.dt-bal-usd{color:#3a9fd5;}
body.ob-themed-page .dt-bal-amount{
  font-size:24px;font-weight:700;color:var(--ob-text);font-family:var(--ob-display);}
body.ob-themed-page .dt-bal-ccy{font-size:11px;color:var(--ob-muted);margin-top:4px;letter-spacing:.06em;}

/* Main form card */
body.ob-themed-page .dt-af-card{
  background:var(--ob-surface);border:1px solid var(--ob-line);
  border-radius:14px;padding:28px 24px;}
body.ob-themed-page .dt-af-step{margin-bottom:28px;}

/* Currency selector */
body.ob-themed-page .dt-ccy-grid{display:flex;gap:12px;}
body.ob-themed-page .dt-ccy-opt{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--ob-bg);border:2px solid var(--ob-line);border-radius:12px;
  padding:18px 10px;cursor:pointer;transition:all .18s;position:relative;}
body.ob-themed-page .dt-ccy-opt input{display:none;}
body.ob-themed-page .dt-ccy-ico{
  font-size:22px;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;}
body.ob-themed-page .dt-ccy-ico--usdt{background:rgba(240,185,11,.12);color:#f0b90b;}
body.ob-themed-page .dt-ccy-ico--ngn{background:rgba(0,229,160,.1);color:var(--ob-green);}
body.ob-themed-page .dt-ccy-ico--usd{background:rgba(58,159,213,.12);color:#3a9fd5;}
body.ob-themed-page .dt-ccy-name{font-size:13px;font-weight:700;color:var(--ob-muted);}
body.ob-themed-page .dt-ccy-tick{
  position:absolute;top:8px;right:8px;font-size:14px;
  color:transparent;transition:color .15s;}
body.ob-themed-page .dt-ccy-opt:hover{border-color:var(--ob-green);}
body.ob-themed-page .dt-ccy-opt.dt-ccy-active{
  border-color:var(--ob-green);background:rgba(0,229,160,.05);}
body.ob-themed-page .dt-ccy-opt.dt-ccy-active .dt-ccy-name{color:var(--ob-text);}
body.ob-themed-page .dt-ccy-opt.dt-ccy-active .dt-ccy-tick{color:var(--ob-green);}

/* Quick amount buttons */
body.ob-themed-page .dt-qa-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
body.ob-themed-page .dt-qa{
  padding:7px 18px;background:var(--ob-bg);border:1px solid var(--ob-line);
  border-radius:8px;color:var(--ob-muted);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s;}
body.ob-themed-page .dt-qa:hover,
body.ob-themed-page .dt-qa.dt-qa--on{
  border-color:var(--ob-green);color:var(--ob-green);background:rgba(0,229,160,.05);}

/* Amount input */
body.ob-themed-page .dt-amt-wrap{position:relative;}
body.ob-themed-page .dt-amt-sym{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:700;color:var(--ob-muted);pointer-events:none;z-index:1;}
body.ob-themed-page .dt-amt-input{
  padding-left:40px !important;font-size:22px !important;
  font-weight:700 !important;height:58px !important;
  background:var(--ob-bg) !important;border-color:var(--ob-line) !important;
  color:var(--ob-text) !important;border-radius:10px !important;}
body.ob-themed-page .dt-amt-input:focus{
  border-color:var(--ob-green) !important;
  box-shadow:0 0 0 3px rgba(0,229,160,.12) !important;}
body.ob-themed-page .dt-af-limits{
  font-size:12px;color:var(--ob-muted);margin-top:8px;}

/* Gateway cards */
body.ob-themed-page .dt-gw-grid{display:flex;flex-direction:column;gap:12px;}
body.ob-themed-page .dt-gw-opt{
  display:flex;align-items:center;gap:16px;
  background:var(--ob-bg);border:2px solid var(--ob-line);border-radius:12px;
  padding:16px 18px;cursor:pointer;transition:all .18s;}
body.ob-themed-page .dt-gw-opt input{display:none;}
body.ob-themed-page .dt-gw-ico{flex-shrink:0;}
body.ob-themed-page .dt-gw-info{flex:1;display:flex;flex-direction:column;gap:3px;}
body.ob-themed-page .dt-gw-name{font-size:15px;font-weight:700;color:var(--ob-text);}
body.ob-themed-page .dt-gw-sub{font-size:12px;color:var(--ob-muted);}
body.ob-themed-page .dt-gw-tick{font-size:20px;color:transparent;transition:color .15s;flex-shrink:0;}
body.ob-themed-page .dt-gw-opt:hover{border-color:var(--ob-green);}
body.ob-themed-page .dt-gw-opt.dt-gw-active{
  border-color:var(--ob-green);background:rgba(0,229,160,.04);}
body.ob-themed-page .dt-gw-opt.dt-gw-active .dt-gw-tick{color:var(--ob-green);}

/* Notice + Submit */
body.ob-themed-page .dt-af-notice{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.25);
  border-radius:10px;padding:14px 16px;font-size:13px;color:#febc2e;
  margin-bottom:22px;}
body.ob-themed-page .dt-af-submit{
  height:54px;font-size:16px;font-weight:700;border-radius:10px;
  background:var(--ob-green) !important;border-color:var(--ob-green) !important;
  color:#001a0f !important;letter-spacing:.02em;}
body.ob-themed-page .dt-af-submit:hover{
  background:var(--ob-green-dim) !important;border-color:var(--ob-green-dim) !important;}

/* Inline text links in panel bodies — muted, not green */
body.ob-themed-page .panel-body p a:not(.btn),
body.ob-themed-page .panel-body li a:not(.btn){color:var(--ob-muted) !important;}
body.ob-themed-page .panel-body p a:not(.btn):hover,
body.ob-themed-page .panel-body li a:not(.btn):hover{color:var(--ob-text) !important;}