/*
 * Twenty-One Dark Mode
 * Loaded automatically via {assetExists file="custom.css"} in includes/head.tpl
 */

/* -------------------------
   CSS Variables
   ------------------------- */
:root {
  --dark-bg:          #0f1117;
  --dark-surface:     #1a1d23;
  --dark-surface-alt: #22262d;
  --dark-surface-up:  #2a2f38;
  --dark-border:      #2e3340;
  --dark-border-soft: #3a4050;
  --dark-text:        #e8eaed;
  --dark-text-muted:  #9aa0ac;
  --dark-text-faint:  #6b7280;
  --dark-primary:     #4a90d9;
  --dark-primary-hover: #5ba0e8;
  --dark-header:      #12151a;
  --dark-topbar:      #0a0c10;
}

/* -------------------------
   Base
   ------------------------- */
body,
html {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

.primary-bg-color {
  background-color: var(--dark-bg) !important;
}

a {
  color: var(--dark-primary);
}
a:hover {
  color: var(--dark-primary-hover);
}

hr {
  border-color: var(--dark-border);
}

/* -------------------------
   Header & Nav
   ------------------------- */
header.header {
  background-color: var(--dark-header) !important;
  border-bottom: 1px solid var(--dark-border);
}

header.header .topbar {
  background-color: var(--dark-topbar) !important;
}

header.header .navbar a,
header.header .navbar-nav a {
  color: var(--dark-text) !important;
}

header.header .navbar-nav a:hover {
  color: var(--dark-primary) !important;
}

header.header .search {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

header.header .search .form-control {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

header.header .toolbar .nav-link {
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text-muted) !important;
}

header.header .toolbar .nav-link:hover {
  color: var(--dark-text) !important;
  background-color: var(--dark-surface-alt);
}

header.header .user-icon {
  color: var(--dark-text-muted) !important;
}

header.header .dropdown-item.active,
header.header .dropdown-item:active {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Breadcrumb
   ------------------------- */
.master-breadcrumb {
  background-color: var(--dark-surface) !important;
  border-bottom: 1px solid var(--dark-border);
}

.breadcrumb {
  background-color: transparent !important;
  color: var(--dark-text-muted);
}

.breadcrumb-item a {
  color: var(--dark-primary);
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--dark-text-muted);
}

/* -------------------------
   Cards & Panels
   ------------------------- */
.card,
.mc-promo-manage,
.mc-promo-login {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.card-header {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.card-footer {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Forms & Inputs
   ------------------------- */
.form-control {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

.form-control:focus {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-primary) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 144, 217, 0.25) !important;
}

.form-control::placeholder {
  color: var(--dark-text-faint) !important;
}

.input-group-text {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text-muted) !important;
}

select.form-control option {
  background-color: var(--dark-surface-alt);
  color: var(--dark-text);
}

label,
.col-form-label {
  color: var(--dark-text);
}

.form-text,
small {
  color: var(--dark-text-faint) !important;
}

/* -------------------------
   Tables
   ------------------------- */
.table {
  color: var(--dark-text) !important;
}

.table th,
.table td {
  border-color: var(--dark-border) !important;
}

.table thead th {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

.table-bordered {
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Dropdowns
   ------------------------- */
.dropdown-menu {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-item {
  color: var(--dark-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--dark-primary) !important;
  color: #fff !important;
}

.dropdown-divider {
  border-color: var(--dark-border) !important;
}

.dropdown-header {
  color: var(--dark-text-faint) !important;
}

/* -------------------------
   List Groups
   ------------------------- */
.list-group-item {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.list-group-item:hover,
.list-group-item:focus {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

.list-group-item.active {
  background-color: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
  color: #fff !important;
}

.list-group-item-action {
  color: var(--dark-text) !important;
}

/* -------------------------
   Modals
   ------------------------- */
.modal-content {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.modal-header {
  border-color: var(--dark-border) !important;
}

.modal-footer {
  border-color: var(--dark-border) !important;
}

.modal-title {
  color: var(--dark-text) !important;
}

.close {
  color: var(--dark-text) !important;
  text-shadow: none !important;
  opacity: 0.6;
}

.close:hover {
  color: var(--dark-text) !important;
  opacity: 1;
}

/* -------------------------
   Alerts
   ------------------------- */
.alert-info {
  background-color: rgba(74, 144, 217, 0.15) !important;
  border-color: rgba(74, 144, 217, 0.4) !important;
  color: #90c3f5 !important;
}

.alert-success {
  background-color: rgba(40, 167, 69, 0.15) !important;
  border-color: rgba(40, 167, 69, 0.4) !important;
  color: #75d98f !important;
}

.alert-warning {
  background-color: rgba(255, 193, 7, 0.12) !important;
  border-color: rgba(255, 193, 7, 0.35) !important;
  color: #ffd55e !important;
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.15) !important;
  border-color: rgba(220, 53, 69, 0.4) !important;
  color: #f08090 !important;
}

/* -------------------------
   Buttons
   ------------------------- */
.btn-light {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

.btn-light:hover {
  background-color: #38404e !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

.btn-outline-secondary {
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text-muted) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Navigation tabs & pills
   ------------------------- */
.nav-tabs {
  border-color: var(--dark-border) !important;
}

.nav-tabs .nav-link {
  color: var(--dark-text-muted);
}

.nav-tabs .nav-link:hover {
  border-color: var(--dark-border) var(--dark-border) transparent !important;
  color: var(--dark-text);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) var(--dark-border) var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

.nav-pills .nav-link {
  color: var(--dark-text-muted);
}

.nav-pills .nav-link.active {
  background-color: var(--dark-primary) !important;
  color: #fff !important;
}

/* -------------------------
   Badges
   ------------------------- */
.badge-secondary {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text-muted) !important;
}

.badge-light {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Pagination
   ------------------------- */
.page-item .page-link {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-primary) !important;
}

.page-item .page-link:hover {
  background-color: var(--dark-surface-up) !important;
}

.page-item.active .page-link {
  background-color: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
  color: #fff !important;
}

.page-item.disabled .page-link {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-faint) !important;
}

/* -------------------------
   Footer
   ------------------------- */
footer.footer {
  background-color: var(--dark-topbar) !important;
  color: var(--dark-text-muted) !important;
  border-top: 1px solid var(--dark-border);
}

footer.footer .nav-link,
footer.footer a {
  color: var(--dark-text-muted) !important;
}

footer.footer .nav-link:hover,
footer.footer a:hover {
  color: var(--dark-text) !important;
}

/* -------------------------
   Misc utilities
   ------------------------- */
.text-muted {
  color: var(--dark-text-muted) !important;
}

.text-dark {
  color: var(--dark-text) !important;
}

.bg-white,
.bg-light {
  background-color: var(--dark-surface) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
  border-color: var(--dark-border) !important;
}

.bg-dark {
  background-color: var(--dark-topbar) !important;
}

code,
pre {
  background-color: var(--dark-surface-alt) !important;
  color: #e06c75 !important;
  border-color: var(--dark-border) !important;
}

.continue-container,
.invite-box {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

.select-account {
  border-color: var(--dark-border) !important;
}

.select-account a {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

.select-account a:hover {
  background-color: var(--dark-surface-up) !important;
}

.popover {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

.popover-header {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.popover-body {
  color: var(--dark-text) !important;
}

.tooltip-inner {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

.well {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--dark-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--dark-border-soft);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4a5568;
}

/* -------------------------
   Buttons – default / secondary
   ------------------------- */
.btn-default {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

.btn-default:hover,
.btn-default:focus {
  background-color: #38404e !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

.btn-white {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Select / custom-select
   ------------------------- */
select,
.custom-select {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%239aa0ac' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
}

select:focus,
.custom-select:focus {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-primary) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 144, 217, 0.25) !important;
}

/* -------------------------
   Images & thumbnails
   ------------------------- */
.img-thumbnail {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Login page
   ------------------------- */
.page-login .main-body,
.login-panel,
.login-container,
.two-factor-container {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.page-login .panel,
.page-login .panel-body,
.page-login .panel-heading,
.page-login .panel-footer {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.page-login .text-muted,
.login-panel .text-muted {
  color: var(--dark-text-muted) !important;
}

.login-page-logo-wrapper,
.login-page-bg {
  background-color: var(--dark-bg) !important;
}

/* Social login / OAuth buttons on login page */
.btn-social {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

.btn-social:hover {
  background-color: #38404e !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Responsive tabs (mobile accordion)
   ------------------------- */
.responsive-tabs-sm {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

.responsive-tabs-sm > li > a {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.responsive-tabs-sm > li > a:hover {
  background-color: var(--dark-surface-up) !important;
}

.responsive-tabs-sm > li.active > a,
.responsive-tabs-sm > li.open > a {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-primary) !important;
}

.responsive-tabs-sm-connector {
  background-color: var(--dark-border) !important;
}

/* -------------------------
   Client home cards
   ------------------------- */
.client-home-cards .card-header,
.client-home-panels .card-header {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Markdown editor
   ------------------------- */
.md-editor {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

.md-editor > .btn-toolbar {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border) !important;
}

.md-editor > .btn-toolbar .btn {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text-muted) !important;
}

.md-editor > .btn-toolbar .btn:hover {
  background-color: #38404e !important;
  color: var(--dark-text) !important;
}

.md-editor .editor-preview,
.md-editor .wmd-input {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Store / Order Form
   ------------------------- */
.tab-content.bg-white,
.store-domain-tab-content,
.store-order-container {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.store-domain-tabs,
.store-domain-tabs li a,
.store-order-container .store-domain-tabs li a {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-muted) !important;
}

.store-order-container .store-domain-tabs li.active a,
.store-domain-tabs li.active a,
.store-domain-tabs li a:hover {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

.store-basket,
.store-basket-header,
.store-order-summary {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.store-basket .price,
.store-order-summary .price {
  color: var(--dark-primary) !important;
}

.order-form-steps,
.order-step {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

.order-step.active {
  background-color: var(--dark-primary) !important;
  color: #fff !important;
}

/* Configure product options panel */
.panel-product-options,
.product-config-options {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

/* Order form checkout / cart */
.cart-items,
.cart-item,
.cart-total-row {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.cart-total-row {
  border-top-color: var(--dark-border-soft) !important;
}

/* -------------------------
   Landing / Store product pages
   (from store.css)
   ------------------------- */
.landing-page {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

.landing-page .product-features,
.landing-page .product-details,
.landing-page .product-options .item,
.landing-page .product-options .item:hover,
.landing-page .tab-content,
.landing-page .tab-pane {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.landing-page .product-options .item.active,
.landing-page .product-options .item.selected {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-primary) !important;
}

.landing-page .package-name,
.landing-page .package-price,
.landing-page .section-heading {
  color: var(--dark-text) !important;
}

.landing-page .price-table,
.landing-page .pricing-period,
.landing-page .price-panel {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.landing-page.ssl .ssl-features,
.landing-page.ssl .ssl-product,
.landing-page.sitelock .sitelock-features,
.landing-page.sitelock .sitelock-product,
.landing-page.sitelockvpn .sitelockvpn-product,
.landing-page.sitebuilder .sitebuilder-product,
.landing-page .feature-table {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.landing-page .feature-table thead th,
.landing-page .feature-table td {
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.landing-page .feature-table thead th {
  background-color: var(--dark-surface-alt) !important;
}

.wp-toolkit,
.wp-toolkit .wp-feature,
.wp-toolkit .wp-tool-section {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Panel (Bootstrap 3 compat)
   ------------------------- */
.panel {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

.panel-heading {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.panel-body {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

.panel-footer {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.panel-default {
  border-color: var(--dark-border) !important;
}

.panel-default > .panel-heading {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Form validation states
   ------------------------- */
.has-error .form-control {
  background-color: var(--dark-surface-alt) !important;
  border-color: #e05c6a !important;
  color: var(--dark-text) !important;
}

.has-error .control-label,
.has-error .help-block {
  color: #f08090 !important;
}

.has-success .form-control {
  border-color: #48bb78 !important;
}

/* -------------------------
   Reveal password button
   ------------------------- */
.btn-reveal-pw,
.input-group .btn-reveal-pw {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text-muted) !important;
}

.input-group .btn-reveal-pw:hover {
  background-color: #38404e !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Domain search / checker
   ------------------------- */
.domain-search-results,
.domain-checker-results {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

.domain-result-available {
  background-color: rgba(40, 167, 69, 0.12) !important;
  border-color: rgba(40, 167, 69, 0.3) !important;
}

.domain-result-unavailable {
  background-color: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
}

/* -------------------------
   Spinner / loader
   ------------------------- */
.spinner-overlay,
.loading-overlay {
  background-color: rgba(15, 17, 23, 0.7) !important;
}

/* -------------------------
   iCheck custom checkboxes (order form)
   ------------------------- */
.icheckbox_square-blue,
.iradio_square-blue {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border-soft) !important;
}

.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
  background-color: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
}

/* -------------------------
   Stepper / quantity input
   ------------------------- */
.input-qty,
.qty-control {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Progress bars
   ------------------------- */
.progress {
  background-color: var(--dark-surface-up) !important;
}

/* -------------------------
   Jumbotron / hero
   ------------------------- */
.jumbotron {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Table – DataTables extras
   ------------------------- */
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

.dataTables_wrapper .dataTables_length select {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--dark-text-muted) !important;
}

/* -------------------------
   Toasts / Notifications
   ------------------------- */
.toast,
.toast-container .toast {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.toast-header {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Sidebar (support/tickets)
   ------------------------- */
.sidebar,
.sidebar-nav,
.sticky-sidebar-inner {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

.sidebar .nav-link {
  color: var(--dark-text-muted) !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: var(--dark-text) !important;
  background-color: var(--dark-surface-up) !important;
}

/* -------------------------
   Ticket / support reply
   ------------------------- */
.ticket-reply,
.ticket-post,
.reply-container {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.ticket-reply .reply-header,
.ticket-post .post-header {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* ==============================================
   EXTENDED DARK MODE — REMAINING WHITE AREAS
   Targeting specific selectors from theme.css
   ============================================== */

/* -------------------------
   Primary-bg / page body
   ------------------------- */
.primary-bg-color {
  background-color: var(--dark-bg) !important;
}

/* -------------------------
   Homepage stat tiles
   ------------------------- */
.tiles .tile {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.tiles .tile .title {
  color: var(--dark-text-muted) !important;
}

.tiles .tile i {
  color: var(--dark-border-soft) !important;
}

.tiles .tile:hover {
  background-color: var(--dark-surface-up) !important;
}

.tiles .tile:hover i {
  color: var(--dark-text-muted) !important;
}

.tiles .row > div .tile {
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Client home cards — specific overrides
   (theme.css sets these to #fff)
   ------------------------- */
.client-home-cards .card-header {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.client-home-cards .list-group {
  border-color: var(--dark-border) !important;
}

.client-home-cards .list-group .list-group-item {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.client-home-cards small {
  color: var(--dark-text-muted) !important;
}

/* -------------------------
   Table-list (Services / Domains / Invoices / Tickets)
   theme.css: table.table-list thead th + .table-list tbody td = #fff
   ------------------------- */
table.table-list thead th {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.table-list > tbody > tr > td {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

.table-list > tbody > tr:hover > td {
  background-color: var(--dark-surface-up) !important;
}

/* -------------------------
   Product details tab container
   (Service/domain detail page inner tab content)
   ------------------------- */
div.product-details-tab-container {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Modal header (theme.css sets .modal .modal-header to #eee)
   ------------------------- */
.modal .modal-header {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Sidebar list-group-item badge
   ------------------------- */
.sidebar .list-group-item {
  border-color: var(--dark-border) !important;
}

.sidebar .list-group-item .badge {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text-muted) !important;
}

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
  background-color: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
  color: #fff !important;
}

/* -------------------------
   Promo containers / banners
   ------------------------- */
.promo-container {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.promo-banner {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Upgrade / Recommended products
   ("Recommended for you" section)
   ------------------------- */
.upgrade .products .product {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

.upgrade .products .product ul {
  border-color: var(--dark-border) !important;
}

.upgrade .products .product .footer {
  border-color: var(--dark-border) !important;
  background-color: var(--dark-surface-alt) !important;
}

.upgrade .products .product ul li {
  border-color: var(--dark-border) !important;
  color: var(--dark-text-muted) !important;
}

.upgrade .product-to-be-upgraded {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Featured TLDs (domain search results)
   ------------------------- */
.featured-tld {
  background-color: var(--dark-surface) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

.featured-tld .price {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text-muted) !important;
}

/* -------------------------
   Markdown editor — specific overrides
   (theme.css uses !important on these)
   ------------------------- */
.md-editor > .btn-toolbar {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border) !important;
}

.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

.md-preview table,
.markdown-content table {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

.md-preview table > thead > tr > th,
.markdown-content table > thead > tr > th {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.md-preview table > tbody > tr > td,
.markdown-content table > tbody > tr > td {
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Registration sub-heading span (#registration)
   ------------------------- */
#registration .sub-heading span {
  background-color: var(--dark-bg) !important;
  color: var(--dark-primary) !important;
}

#registration .field,
#registration .form-control {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

#registration .field[disabled],
#registration .field[readonly],
#registration .form-control[disabled],
#registration .form-control[readonly] {
  background-color: var(--dark-surface) !important;
}

/* -------------------------
   Credit card widget
   ------------------------- */
div.credit-card {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   JSON Form error states
   ------------------------- */
form[data-role=json-form] .has-error input.form-control,
form[data-role=json-form] .has-error textarea.form-control,
form[data-role=json-form] .has-error select.form-control {
  background-color: rgba(220, 53, 69, 0.1) !important;
  border-color: #e05c6a !important;
}

/* -------------------------
   OAuth page
   ------------------------- */
body.oauth,
.oauth body {
  background-color: var(--dark-bg) !important;
}

.content-container {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.action-buttons {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Invoice view (viewinvoice page)
   ------------------------- */
.page-viewinvoice .main-body,
.invoice-container {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

.invoice-details,
.invoice-header,
.invoice-footer,
.invoice-items {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Responsive tabs — active state uses !important in theme.css
   ------------------------- */
@media (max-width: 767.98px) {
  .responsive-tabs-sm {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
  }

  .responsive-tabs-sm .nav-item {
    border-color: var(--dark-border) !important;
  }

  .responsive-tabs-sm .nav-item a.active {
    background-color: var(--dark-surface-up) !important;
    color: var(--dark-text) !important;
  }

  .responsive-tabs-sm-connector .channel {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
  }

  .responsive-tabs-sm-connector .bottom-border {
    border-color: var(--dark-border) !important;
  }
}

/* -------------------------
   Promotions carousel controls (dark arrows)
   ------------------------- */
.promotions-slider-control .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239aa0ac' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.promotions-slider-control .carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239aa0ac' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/* -------------------------
   Bootstrap utility overrides
   (Bootstrap inlines !important on bg- classes)
   ------------------------- */
.bg-white {
  background-color: var(--dark-surface) !important;
}

.bg-light,
.bg-secondary {
  background-color: var(--dark-surface-alt) !important;
}

/* -------------------------
   Text colour overrides
   (Bootstrap .text-dark, .text-body target dark text)
   ------------------------- */
.text-dark,
.text-body {
  color: var(--dark-text) !important;
}

.text-secondary {
  color: var(--dark-text-muted) !important;
}

/* -------------------------
   Borders — Bootstrap utility classes
   ------------------------- */
.border-bottom,
.border-top,
.border-left,
.border-right,
.border {
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Bootstrap input-group-text (repeated for specificity)
   ------------------------- */
.input-group-text {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text-muted) !important;
}

/* -------------------------
   Select2 / Selectize dropdowns
   ------------------------- */
.select2-container .select2-selection,
.select2-dropdown,
.select2-results__option,
.selectize-control .selectize-input,
.selectize-dropdown {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

.select2-results__option--highlighted,
.selectize-dropdown .active {
  background-color: var(--dark-primary) !important;
  color: #fff !important;
}

.select2-selection__rendered,
.selectize-input input {
  color: var(--dark-text) !important;
}

/* -------------------------
   Bootstrap switch toggles
   ------------------------- */
.bootstrap-switch {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border-soft) !important;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text-muted) !important;
}

/* -------------------------
   Accordion (collapse headers)
   ------------------------- */
.accordion .card-header {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Breadcrumb
   ------------------------- */
.master-breadcrumb {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

.breadcrumb {
  background-color: transparent !important;
}

/* -------------------------
   Print — prevent white flash
   (theme.css has @media print .table td/th = #fff !important)
   We scope to screen only so actual print stays readable
   ------------------------- */
@media screen {
  .table td,
  .table th {
    background-color: transparent !important;
  }
}

/* ==============================================
   ORDER FORM (LagomOrderForm) DARK MODE
   Override CSS variables on body so they beat
   the addon's :root declarations (body > :root
   for inheritance regardless of load order)
   ============================================== */
body {
  /* Core backgrounds */
  --body-bg:                    #0f1117;
  --ui-block-bg:                #1a1d23;
  --ui-block-bg-form:           #22262d;
  --input-bg:                   #22262d;
  --dropdown-bg:                #22262d;
  --panel-bg:                   #1a1d23;
  --panel-default-bg:           #1a1d23;
  --panel-active-bg:            #22262d;
  --panel-hover-bg:             #1a1d23;
  --card-bg:                    #1a1d23;
  --modal-content-bg:           #1a1d23;
  --modal-backdrop-bg:          rgba(0,0,0,0.7);
  --modal-header-background-color: #22262d;
  --thumbnail-bg:               #22262d;
  --table-container-bg:         #1a1d23;

  /* App nav backgrounds */
  --app-nav-top-bg:             #12151a;
  --app-nav-left-bg:            #12151a;
  --app-nav-navbar-bg:          #12151a;

  /* Text */
  --gray-darker:                #e8eaed;
  --gray-base:                  #9aa0ac;
  --gray-lighter:               #6b7280;
  --gray-lighter-2:             #4a5060;
  --gray-lighter-3:             #2e3340;
  --gray-lighter-4:             #222630;
  --gray-faded:                 #1e2229;
  --text-body-color:            #e8eaed;
  --text-heading-color:         #e8eaed;
  --text-lighter-color:         #9aa0ac;
  --text-secondary-heading-color: #e8eaed;
  --text-secondary-lighter-color: #9aa0ac;
  --text-secondary-faded-color: #6b7280;

  /* Borders / dividers */
  --ui-block-divider-color:     #2e3340;
  --ui-block-border-color:      #2e3340;
  --ui-block-border:            1px solid #2e3340;
  --ui-block-shadow:            0 2px 8px rgba(0,0,0,0.5);

  /* Inputs */
  --input-color:                #e8eaed;
  --input-border-color:         #3a4050;
  --input-bg-disabled:          #1a1d23;
  --input-label-color:          #e8eaed;
  --input-focus-border-color:   #4a90d9;
  --input-placeholder-color:    #6b7280;

  /* Buttons */
  --btn-default-bg:             #2a2f38;
  --btn-default-border:         #3a4050;
  --btn-default-color:          #e8eaed;
  --btn-default-hover-bg:       #38404e;
  --btn-default-hover-border:   #3a4050;
  --btn-default-hover-color:    #e8eaed;
  --btn-default-active-bg:      #3a4050;
  --btn-default-active-border:  transparent;

  /* Links */
  --link-color:                 #4a90d9;
  --link-hover-color:           #5ba0e8;

  /* Nav */
  --ui-nav-link-color:          #9aa0ac;
  --ui-nav-link-hover-color:    #e8eaed;
  --ui-nav-link-active-color:   #e8eaed;
  --ui-nav-link-active-bg:      #22262d;
  --ui-nav-link-hover-bg:       #1e2229;
  --ui-nav-link-icon-color:     #6b7280;
  --ui-nav-link-icon-hover-color: #9aa0ac;
  --ui-nav-link-icon-active-color: #4a90d9;

  /* Badges */
  --badge-default-bg:           #2a2f38;
  --badge-default-color:        #9aa0ac;
  --badge-active-bg:            #22262d;

  /* Primary block (product feature blocks) */
  --primary-block-input-bg:     #22262d;
  --secondary-block-input-bg:   #22262d;
}

/* -------------------------
   Order form structural overrides
   (fallback for properties not using variables)
   ------------------------- */
.checkout-page {
  background-color: var(--body-bg) !important;
  color: var(--text-body-color) !important;
}

.checkout-page .panel-cart,
.checkout-page .panel,
.panel-default,
[class*="panel-"] {
  background-color: var(--panel-bg) !important;
  border-color: var(--ui-block-divider-color) !important;
  color: var(--text-body-color) !important;
}

.checkout-page .panel-cart .panel-header,
.checkout-page .panel-cart .panel-footer,
.panel-heading,
[class*="panel-"] .panel-heading {
  background-color: var(--ui-block-bg-form) !important;
  border-color: var(--ui-block-divider-color) !important;
  color: var(--text-heading-color) !important;
}

/* Service renewals page */
.page-servicerenewal,
.service-renewals,
.renewal-items,
.renewal-item {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   service-renewals specific overrides
   ------------------------- */
.page-servicerenewal .card,
.page-servicerenewal .card-header,
.page-servicerenewal .card-body,
.page-servicerenewal .card-footer,
.page-servicerenewal .list-group-item,
.page-servicerenewal .table td,
.page-servicerenewal .table th,
.page-servicerenewal .table thead th {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   clientareaproductusagebilling + renewal pages
   ------------------------- */
.product-actions-wrapper,
div.product-details-tab-container,
.package-info,
.primary-content .package-info {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   DataTables search input background
   (uses `background:` shorthand with image)
   ------------------------- */
.dataTables_wrapper .dataTables_filter label .form-control {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border-soft) !important;
}

/* -------------------------
   Sorting column header highlight
   ------------------------- */
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc,
.dataTables_wrapper table.table-list thead th.sorting {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   DataTables table border
   ------------------------- */
.dataTables_wrapper table.table-list {
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Home domain search box
   ------------------------- */
.home-domain-search .input-group-wrapper {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Action icon buttons
   (e.g. shortcut grid on homepage)
   ------------------------- */
.action-icon-btns a {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text-muted) !important;
  border-color: var(--dark-border) !important;
}

.action-icon-btns a:hover {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

.action-icon-btns a .ico-container i {
  color: var(--dark-border-soft) !important;
}

/* -------------------------
   intl-tel-input country dropdown
   ------------------------- */
.intl-tel-input .country-list {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.intl-tel-input .country-list .country.highlight {
  background-color: var(--dark-surface-up) !important;
}

.intl-tel-input .country-list .divider {
  border-color: var(--dark-border) !important;
}

/* -------------------------
   Lightbox container
   ------------------------- */
.lb-outerContainer {
  background-color: var(--dark-surface-alt) !important;
}

/* -------------------------
   CAPTCHA overlay popup
   ------------------------- */
.captcha-overlay-popup {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   DataTables Responsive modal
   ------------------------- */
div.dtr-modal div.dtr-modal-display {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

div.dtr-modal div.dtr-modal-close {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-muted) !important;
}

/* ==============================================
   ORDER FORM LOADING INDICATOR
   .message--loading-order uses var(--main-header-title-color) → var(--gray-darker)
   which defaults to dark text; force light while on dark background
   ============================================== */
#lagom-one-step-order .message--loading-order,
#lagom-one-step-order .message-subtext,
#lagom-one-step-order .message-text {
  color: var(--dark-text) !important;
}

#one-page-order-init-loader {
  background-color: var(--dark-bg) !important;
}

/* ==============================================
   LAGOM ORDER FORM: Missing body-level overrides
   (variables.css has many white bg vars not yet in body{})
   ============================================== */
body {
  --main-top-bg:                  #1a1d23;
  --main-body-sidebar-content-bg: #1a1d23;
  --main-footer-bg:               #12151a;
  --mob-app-nav-header-bg:        #12151a;
  --breadcrumb-bg:                #1a1d23;
  --loader-light-bg:              #1a1d23;
  --icheck-bg:                    #22262d;
  --input-focus-bg:               #22262d;
  --input-hover-bg:               #22262d;
  --popover-bg:                   #22262d;
  --tooltip-bg:                   #22262d;
  --select-option-bg:             #22262d;
  --gray-icons:                   #6b7280;
  --thumbnail-bg:                 #22262d;
  --list-group-bg:                #1a1d23;
  --pagination-bg:                #1a1d23;
  --pagination-hover-bg:          #22262d;
  --pagination-active-bg:         #4a90d9;
  --pagination-disabled-bg:       #12151a;
  --nav-pills-link-bg:            #1a1d23;
  --nav-pills-link-hover-bg:      #22262d;
  --nav-pills-link-active-bg:     #4a90d9;
}

/* ==============================================
   LAGOM ORDER FORM: Hardcoded white overrides
   ============================================== */

/* Table headers inside order form (has !important in source) */
#lagom-one-step-order .table th {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

#lagom-one-step-order .table td {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Swiper overflow mask — white strip at edge of package slider */
#lagom-one-step-order .swiper-wrapper:before,
#lagom-one-step-order .section-packages .row:after,
#lagom-one-step-order .section-packages .swiper-wrapper:before {
  background-color: var(--dark-bg) !important;
}

/* Loading overlay */
#lagom-one-step-order .loader-panel {
  background: var(--dark-surface) !important;
}

/* Theme switcher panel */
#lagom-one-step-order .theme-switcher-content,
#lagom-one-step-order .theme-switcher-footer {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

/* Range slider current-value tooltip */
#lagom-one-step-order .range-slider-current-value,
#lagom-one-step-order .range-slider-current-value:before {
  background-color: var(--dark-primary) !important;
  color: #fff !important;
}

/* -------------------------
   Order form main areas
   ------------------------- */
#lagom-one-step-order .main-header,
#lagom-one-step-order .app-header,
#lagom-one-step-order .main-top {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

#lagom-one-step-order .main-header-content,
#lagom-one-step-order .main-header-title,
#lagom-one-step-order .header-lined h1 {
  color: var(--dark-text) !important;
}

#lagom-one-step-order .main-header-nav .nav-link {
  color: var(--dark-text-muted) !important;
}

#lagom-one-step-order .main-header-nav .nav-link.active,
#lagom-one-step-order .main-header-nav .nav-link:hover {
  color: var(--dark-text) !important;
}

/* Sidebar order summary area */
#lagom-one-step-order .main-sidebar .panel,
#lagom-one-step-order .main-sidebar .panel-heading,
#lagom-one-step-order .main-sidebar .panel-body,
#lagom-one-step-order .main-sidebar .panel-footer,
#lagom-one-step-order .main-sidebar .list-group-item,
#lagom-one-step-order .sidebar-sticky {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   Package cards (product selection)
   ------------------------- */
#lagom-one-step-order .package {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#lagom-one-step-order .package:hover,
#lagom-one-step-order .package.active {
  border-color: var(--dark-primary) !important;
}

#lagom-one-step-order .package .package-price,
#lagom-one-step-order .package .price,
#lagom-one-step-order .price,
#lagom-one-step-order .price-cycle {
  color: var(--dark-text) !important;
}

/* -------------------------
   Sections and form elements
   ------------------------- */
#lagom-one-step-order .section,
#lagom-one-step-order .section-body,
#lagom-one-step-order .section-header {
  background-color: transparent !important;
  color: var(--dark-text) !important;
}

#lagom-one-step-order .section-title,
#lagom-one-step-order .section-desc {
  color: var(--dark-text) !important;
}

#lagom-one-step-order .form-control,
#lagom-one-step-order .field {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#lagom-one-step-order .form-control:focus,
#lagom-one-step-order .field:focus {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-primary) !important;
  color: var(--dark-text) !important;
}

#lagom-one-step-order .input-group-prepend .input-group-text,
#lagom-one-step-order .input-group-append .input-group-text {
  background-color: var(--dark-surface-up) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-muted) !important;
}

/* Selectize (TLD/product dropdowns) */
#lagom-one-step-order .selectize-control .selectize-input {
  background: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#lagom-one-step-order .selectize-dropdown {
  background: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#lagom-one-step-order .selectize-dropdown .option {
  color: var(--dark-text) !important;
}

#lagom-one-step-order .selectize-dropdown .option:hover,
#lagom-one-step-order .selectize-dropdown .option.active,
#lagom-one-step-order .selectize-dropdown .option.selected {
  background: var(--dark-surface-up) !important;
}

/* -------------------------
   SERVICE RENEWALS: individual item rows
   (standard_cart/css/style.css hardcodes #f8f8f8 / #f4f4f4)
   ------------------------- */
.service-renewals .service-renewal,
.domain-renewals .domain-renewal {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.service-renewals .service-renewal:nth-child(even),
.domain-renewals .domain-renewal:nth-child(even),
.addon-renewals .service-renewal:nth-child(even) {
  background-color: var(--dark-surface-alt) !important;
}

.addon-renewals > div {
  border-color: var(--dark-border) !important;
}

.service-renewals .div-renewal-ineligible {
  color: var(--dark-text-muted) !important;
}

/* Renewal filter input */
.form-control.service-renewals-filter {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* -------------------------
   VIEW CART (standard_cart layout fallback)
   ------------------------- */
#order-standard_cart .view-cart-items .item {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
  background-color: var(--dark-surface-alt) !important;
}

#order-standard_cart .products .product {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

#order-standard_cart .products .product header {
  background: var(--dark-surface-alt) !important;
}

#order-standard_cart .products .product header span {
  color: var(--dark-text) !important;
}

#order-standard_cart .summary-container {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
}

#order-standard_cart .apply-credit-container {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
}

#order-standard_cart .cc-input-container {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

#order-standard_cart .form-control {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly],
#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly] {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text-muted) !important;
}

/* Cart sidebar list group */
#order-standard_cart .cart-sidebar .list-group-item {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#order-standard_cart .cart-sidebar .list-group-item.active {
  background-color: var(--dark-primary) !important;
}

/* -------------------------
   Popover / Tooltip
   ------------------------- */
#lagom-one-step-order .popover {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

#lagom-one-step-order .popover-body,
#lagom-one-step-order .popover .popover-content {
  color: var(--dark-text) !important;
}

#lagom-one-step-order .tooltip .tooltip-inner {
  background-color: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

/* =========================================================
   PRODUCT DETAILS PAGE (?action=productdetails&id=...)
   theme.css sets product-icon to #efefef
   ========================================================= */
div.product-details div.product-icon {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* fa-circle is the icon background — give it a vibrant color instead of inheriting muted text */
div.product-details div.product-icon .fa-stack .fa-circle {
  color: var(--dark-primary) !important;
}

div.product-details div.product-icon h3,
div.product-details div.product-icon h4 {
  color: var(--dark-text) !important;
}

/* Package info / service detail card */
div.product-details .package-info,
div.product-details .package-info table th,
div.product-details .package-info table td {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* =========================================================
   SOLUSVM2VPSCLOUD / MODULESGARDEN LAYERS2 MODULE
   Scoped to #layers2 to avoid bleeding into WHMCS core
   ========================================================= */

/* Base app background */
#layers2 .lu-app,
#layers2 .lu-app-main,
#layers2 .lu-app-main__body {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* mg-wrapper itself */
.mg-wrapper {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Widget cards — the primary "white box" */
#layers2 .lu-widget {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#layers2 .lu-widget__header,
#layers2 .lu-widget__top,
#layers2 .lu-widget__body,
#layers2 .lu-widget__actions,
#layers2 .lu-widget__footer {
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#layers2 .lu-widget__body {
  background: var(--dark-surface) !important;
}

#layers2 .lu-widget__header,
#layers2 .lu-widget__top {
  background: var(--dark-surface-alt) !important;
}

/* Headings inside layers2 */
#layers2 h1, #layers2 h2, #layers2 h3,
#layers2 h4, #layers2 h5, #layers2 h6,
#layers2 .lu-heading,
#layers2 .lu-top__title,
#layers2 .lu-top__title-text {
  color: var(--dark-text) !important;
}

/* Text and labels */
#layers2 p,
#layers2 .lu-text,
#layers2 .lu-text-default {
  color: var(--dark-text-muted);
}

#layers2 strong, #layers2 b {
  color: var(--dark-text) !important;
}

/* App navbar (module-internal top bar) */
#layers2 .lu-navbar {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

#layers2 .lu-navbar .lu-nav__link,
#layers2 .lu-navbar .lu-brand {
  color: var(--dark-text) !important;
}

/* Navigation subnav dropdown */
#layers2 .lu-nav--sub {
  background: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

#layers2 .lu-nav--sub .lu-nav__link {
  color: var(--dark-text-muted) !important;
}

#layers2 .lu-nav--sub:before {
  background: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* Actions bar at the bottom */
#layers2 .lu-app-main__actions {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

/* Modal dialogs */
#layers2 .lu-modal__content {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

#layers2 .lu-modal__top,
#layers2 .lu-modal__header {
  background: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#layers2 .lu-modal__body {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#layers2 .lu-modal__actions {
  background: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
}

/* Full-screen loading overlay */
#layers2 .lu-preloader-container--full-screen {
  background: rgba(18, 21, 26, 0.88) !important;
}

/* Tables inside layers2 */
#layers2 .lu-table thead th,
#layers2 .lu-table thead td {
  background: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

#layers2 .lu-table tbody th,
#layers2 .lu-table tbody td,
#layers2 .lu-table tfoot th,
#layers2 .lu-table tfoot td {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

#layers2 .lu-table-striped tbody tr:nth-of-type(odd) td,
#layers2 .lu-table-striped tbody tr:nth-of-type(odd) th {
  background: var(--dark-surface-alt) !important;
}

/* Form controls */
#layers2 .lu-form-control,
#layers2 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
#layers2 select,
#layers2 textarea {
  background-color: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#layers2 .lu-form-control::placeholder,
#layers2 input::placeholder,
#layers2 textarea::placeholder {
  color: var(--dark-text-muted) !important;
}

#layers2 .lu-form-group label,
#layers2 .lu-form-label {
  color: var(--dark-text) !important;
}

#layers2 .lu-form-help {
  color: var(--dark-text-muted) !important;
}

/* Validation state form controls — keep border color, fix bg */
#layers2 .lu-form-group.lu-is-success .lu-form-control,
#layers2 .lu-form-group.lu-is-warning .lu-form-control,
#layers2 .lu-form-group.lu-is-error .lu-form-control,
#layers2 .lu-form-group.lu-is-info .lu-form-control,
#layers2 .lu-form-group.lu-is-success .lu-form-indicator,
#layers2 .lu-form-group.lu-is-warning .lu-form-indicator,
#layers2 .lu-form-group.lu-is-error .lu-form-indicator,
#layers2 .lu-form-group.lu-is-info .lu-form-indicator {
  background-color: var(--dark-surface-alt) !important;
  color: var(--dark-text) !important;
}

/* Base button (background: #e9ebf0 in source) — catches all uncolored buttons */
#layers2 .lu-btn,
#layers2 .lu-btn--default,
#layers2 .lu-btn--secondary {
  background: var(--dark-surface-alt) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#layers2 .lu-btn:hover,
#layers2 .lu-btn--default:hover,
#layers2 .lu-btn--secondary:hover {
  background: var(--dark-surface-up) !important;
  color: var(--dark-text) !important;
}

#layers2 .lu-btn:active,
#layers2 .lu-btn:focus,
#layers2 .lu-btn.is-active,
#layers2 .lu-btn--default:active,
#layers2 .lu-btn--default:focus {
  background: #2a2e38 !important;
  color: var(--dark-text) !important;
}

/* Restore colored variants that must NOT be grayed out */
#layers2 .lu-btn--primary,
#layers2 .lu-btn--primary:hover,
#layers2 .lu-btn--primary:active,
#layers2 .lu-btn--primary:focus {
  background: #2368AD !important;
  color: #fff !important;
  border-color: transparent !important;
}

#layers2 .lu-btn--primary:hover {
  background: #2e82d5 !important;
}

#layers2 .lu-btn--success,
#layers2 .lu-btn--success:hover,
#layers2 .lu-btn--success:active {
  background: #62CA5F !important;
  color: #fff !important;
  border-color: transparent !important;
}

#layers2 .lu-btn--danger,
#layers2 .lu-btn--danger:hover,
#layers2 .lu-btn--danger:active {
  background: #F55656 !important;
  color: #fff !important;
  border-color: transparent !important;
}

#layers2 .lu-btn--warning,
#layers2 .lu-btn--warning:hover {
  background: #FF8F33 !important;
  color: #fff !important;
  border-color: transparent !important;
}

#layers2 .lu-btn--info,
#layers2 .lu-btn--info:hover {
  background: #50bfff !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Outline buttons — keep the border visible */
#layers2 .lu-btn--outline.lu-btn--default {
  background: transparent !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

#layers2 .lu-btn--outline.lu-btn--primary {
  background: transparent !important;
  border-color: #2368AD !important;
  color: #2e82d5 !important;
}

/* Link-style buttons */
#layers2 .lu-btn--link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--dark-primary) !important;
  box-shadow: none !important;
}

#layers2 .lu-btn--link:hover {
  color: #6aaee8 !important;
}

/* Background utility classes */
.lu-bg-default {
  background-color: var(--dark-bg) !important;
}

.lu-bg-default-lighter {
  background-color: var(--dark-surface) !important;
}

.lu-bg-default-darker {
  background-color: var(--dark-surface-alt) !important;
}

/* Generic link color inside layers2 */
#layers2 a:not(.lu-btn) {
  color: var(--dark-primary) !important;
}

#layers2 a:not(.lu-btn):hover {
  color: #6aaee8 !important;
}

/* Horizontal rule / separator */
#layers2 hr {
  border-color: var(--dark-border) !important;
}