/* ==========================================================================
   HostDime Modern Theme — Brand Variables
   Child theme of WHMCS Six
   ========================================================================== */

:root {
  /* Brand */
  --hd-orange: #f7941d;
  --hd-orange-dark: #e07f0a;
  --hd-orange-light: #ffb157;
  --hd-charcoal: #2b2b2b;
  --hd-sidebar-bg: #2b2f33;
  --hd-sidebar-bg-active: #f7941d;
  --hd-sidebar-text: #c9ccce;
  --hd-sidebar-text-active: #ffffff;

  /* Status tiles (matches dashboard card colors) */
  --hd-tile-green: #4caf50;
  --hd-tile-amber: #f0ad4e;
  --hd-tile-blue: #29abe2;
  --hd-tile-dark: #393939;

  /* Surfaces */
  --hd-bg: #f4f5f7;
  --hd-card-bg: #ffffff;
  --hd-border: #e7e9ec;
  --hd-radius: 10px;
  --hd-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);

  /* Type */
  --hd-text: #2b2b2b;
  --hd-text-muted: #6b7280;
  --hd-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background-color: var(--hd-bg);
  color: var(--hd-text);
  font-family: var(--hd-font);
}

a {
  color: var(--hd-orange);
}
a:hover,
a:focus {
  color: var(--hd-orange-dark);
}

.btn-primary,
.btn-main {
  background-color: var(--hd-orange);
  border-color: var(--hd-orange);
}
.btn-primary:hover,
.btn-main:hover {
  background-color: var(--hd-orange-dark);
  border-color: var(--hd-orange-dark);
}
/* ==========================================================================
   Left Navigation Sidebar
   Click-to-collapse rail (matches ClientX-Child behavior: a persistent
   toggle button, not CSS :hover) — expanded by default, collapses to an
   icon-only rail and remembers the choice across pages via a cookie.
   This is the SINGLE source of truth for sidebar/topbar layout; do not
   add further ad-hoc "fix" blocks below — edit here instead.
   ========================================================================== */

:root {
  --hd-sidebar-width: 220px;
  --hd-sidebar-collapsed-width: 72px;
}

.hd-app-shell {
  display: flex;
  min-height: 100vh;
}

.hd-sidebar {
  width: var(--hd-sidebar-width);
  background-color: var(--hd-sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 18px 0 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  overflow-y: auto;
  transition: width 0.2s ease;
}

/* ---- Logo: full logo when expanded, small square mark when collapsed ---- */
.hd-sidebar .hd-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 40px;
  margin-bottom: 20px;
  padding: 0 20px;
  overflow: hidden;
}
.hd-sidebar .hd-logo img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex: 0 0 auto;
}
.hd-logo-text {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.hd-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.hd-nav-item {
  width: 100%;
}

.hd-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  color: var(--hd-sidebar-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-left-color 0.18s ease, padding-left 0.18s ease;
}
.hd-nav-icon {
  flex: 0 0 20px;
  font-size: 17px;
  text-align: center;
  transition: transform 0.18s ease;
}
.hd-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.18s ease;
}
.hd-nav-caret {
  margin-left: auto;
  font-size: 11px;
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.hd-nav-badge {
  margin-left: auto;
  flex: 0 0 auto;
}

.hd-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--hd-sidebar-text-active);
  padding-left: 26px;
}
.hd-nav-link:hover .hd-nav-icon {
  transform: scale(1.12);
  color: var(--hd-orange);
}
.hd-submenu-link {
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.hd-submenu-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
  padding-left: 58px;
}
.hd-nav-item.current > .hd-nav-link,
.hd-nav-item.active > .hd-nav-link {
  background-color: var(--hd-sidebar-bg-active);
  color: var(--hd-sidebar-text-active);
  border-left-color: #ffffff;
}

/* Submenu: click-toggle accordion (JS adds .open + aria-expanded="true") */
.hd-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.15);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.hd-nav-item.open > .hd-submenu {
  max-height: 600px; /* generous cap; content is short so this just acts as "auto" */
}
.hd-nav-item.open > .hd-nav-toggle .hd-nav-caret {
  transform: rotate(90deg);
}
.hd-submenu-link {
  display: block;
  padding: 10px 22px 10px 54px;
  color: var(--hd-sidebar-text);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.hd-submenu-link:hover {
  color: var(--hd-sidebar-text-active);
}
.hd-submenu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 20px;
}

.hd-sidebar-footer {
  margin-top: auto;
  width: 100%;
  padding-bottom: 8px;
}

/* ---- Collapse toggle button, pinned at the bottom of the rail ---- */
.hd-sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--hd-sidebar-text);
  cursor: pointer;
}
.hd-sidebar-collapse-btn:hover {
  color: var(--hd-sidebar-text-active);
}
.hd-sidebar-collapse-btn i {
  transition: transform 0.2s ease;
}

/* ==================== COLLAPSED STATE ==================== */
.hd-sidebar.hd-collapsed {
  width: var(--hd-sidebar-collapsed-width);
}
.hd-sidebar.hd-collapsed .hd-logo {
  justify-content: center;
  padding: 0;
}
.hd-sidebar.hd-collapsed .hd-logo img {
  max-width: 34px;
  height: 28px;
}
.hd-sidebar.hd-collapsed .hd-logo-text,
.hd-sidebar.hd-collapsed .hd-nav-label,
.hd-sidebar.hd-collapsed .hd-nav-caret,
.hd-sidebar.hd-collapsed .hd-nav-badge {
  display: none;
}
.hd-sidebar.hd-collapsed .hd-nav-link {
  justify-content: center;
  padding: 13px 0;
}
.hd-sidebar.hd-collapsed .hd-submenu {
  display: none !important; /* no flyout submenus while collapsed, avoids clipping */
}
.hd-sidebar.hd-collapsed .hd-sidebar-collapse-btn i {
  transform: rotate(180deg);
}
.hd-sidebar.hd-collapsed ~ .hd-main-content,
.hd-sidebar.hd-collapsed ~ #footer {
  margin-left: var(--hd-sidebar-collapsed-width);
}

/* Main content offset to make room for the rail */
.hd-main-content {
  margin-left: var(--hd-sidebar-width);
  flex: 1;
  padding: 24px 32px;
  width: 100%;
  transition: margin-left 0.2s ease;
}
#footer {
  margin-left: var(--hd-sidebar-width);
  transition: margin-left 0.2s ease;
}

/* ---- Top utility bar (search, cart, notifications, profile) ---- */
.hd-topbar-wrap {
  background: var(--hd-card-bg);
  border-bottom: 1px solid var(--hd-border);
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.hd-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 32px;
}
.hd-topbar-search {
  flex: 0 1 320px;
}
.hd-topbar .hd-topbar-icon {
  position: relative;
  color: var(--hd-text-muted);
  background: transparent;
  border: none;
  font-size: 16px;
  padding: 6px 8px;
}
.hd-topbar .hd-topbar-icon:hover {
  color: var(--hd-orange);
}
.hd-topbar .badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--hd-orange);
  color: #fff;
  font-size: 10px;
  vertical-align: top;
  border-radius: 50%;
  padding: 2px 5px;
}
.hd-account-switch {
  display: flex;
  align-items: center;
}
.hd-account-name {
  font-weight: 600;
  color: var(--hd-text) !important;
}

/* ---- Mobile: rail slides in from off-screen; no separate collapsed mode ---- */
.hd-sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1040;
  background: var(--hd-orange);
  color: #fff;
  border: none;
  border-radius: 6px;
  width: 38px;
  height: 38px;
}
@media (max-width: 768px) {
  .hd-sidebar-toggle {
    display: block;
  }
  .hd-sidebar,
  .hd-sidebar.hd-collapsed {
    width: var(--hd-sidebar-width);
    transform: translateX(-100%);
  }
  .hd-sidebar.hd-mobile-open {
    transform: translateX(0);
  }
  .hd-sidebar.hd-mobile-open .hd-logo-text,
  .hd-sidebar.hd-mobile-open .hd-nav-label,
  .hd-sidebar.hd-mobile-open .hd-nav-caret,
  .hd-sidebar.hd-mobile-open .hd-nav-badge {
    display: inline;
  }
  .hd-main-content,
  #footer,
  .hd-sidebar.hd-collapsed ~ .hd-main-content,
  .hd-sidebar.hd-collapsed ~ #footer {
    margin-left: 0;
  }
}
/* ==========================================================================
   Dashboard — Status Tiles, Active Products Panel, Sidebar Info Cards
   ========================================================================== */

.hd-tile-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

@media (max-width: 992px) {
  .hd-tile-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .hd-tile-row {
    grid-template-columns: 1fr;
  }
}

.hd-tile {
  border-radius: var(--hd-radius);
  padding: 26px 20px;
  color: #fff;
  text-align: center;
  position: relative;
  box-shadow: var(--hd-shadow);
  transition: transform 0.15s ease;
}
.hd-tile:hover {
  transform: translateY(-2px);
}

.hd-tile .hd-tile-count {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255, 255, 255, 0.2);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.hd-tile .hd-tile-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.hd-tile h3 {
  color: #fff;
  font-weight: 600;
  margin-bottom: 8px;
}

.hd-tile p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  margin: 0;
}

.hd-tile-hosting { background-color: var(--hd-tile-green); }
.hd-tile-tickets { background-color: var(--hd-tile-amber); }
.hd-tile-invoices { background-color: var(--hd-tile-blue); }
.hd-tile-quotes { background-color: var(--hd-tile-dark); }

/* Active Products / Services panel */
.hd-panel {
  background: var(--hd-card-bg);
  border-radius: var(--hd-radius);
  border: 1px solid var(--hd-border);
  box-shadow: var(--hd-shadow);
  padding: 22px 24px;
  margin-bottom: 24px;
}

.hd-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--hd-orange);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.hd-panel-header h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 600;
}

.hd-panel-header .btn {
  background: var(--hd-orange);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  padding: 6px 14px;
}

.hd-empty-cart {
  border: 2px dashed var(--hd-border);
  border-radius: var(--hd-radius);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 460px;
}

.hd-empty-cart h5 {
  font-style: italic;
  margin-bottom: 14px;
}

/* Right-side info widgets (Your Info / Contacts / Shortcuts) */
.hd-info-card {
  background: var(--hd-card-bg);
  border-radius: var(--hd-radius);
  border: 1px solid var(--hd-border);
  box-shadow: var(--hd-shadow);
  margin-bottom: 18px;
  overflow: hidden;
}

.hd-info-card-header {
  background: var(--hd-bg);
  padding: 14px 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--hd-border);
}

.hd-info-card-body {
  padding: 16px 18px;
}

.hd-info-card .btn-block {
  background: var(--hd-orange);
  color: #fff;
  border: none;
}
/* ==========================================================================
   Order Forms / Cart / Checkout
   ========================================================================== */

/* Product group listing (store pages) */
.hd-product-card {
  background: var(--hd-card-bg);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius);
  box-shadow: var(--hd-shadow);
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hd-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.hd-product-card .hd-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--hd-orange);
  margin: 10px 0;
}
.hd-product-card .btn-order {
  background: var(--hd-orange);
  color: #fff;
  border-radius: 6px;
  padding: 10px 24px;
  border: none;
  font-weight: 600;
}
.hd-product-card .btn-order:hover {
  background: var(--hd-orange-dark);
}

/* Plan/cycle selection on configure-product page */
.hd-config-step {
  background: var(--hd-card-bg);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius);
  padding: 22px;
  margin-bottom: 20px;
}
.hd-config-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hd-orange);
  color: #fff;
  font-weight: 700;
  margin-right: 10px;
}

/* Checkout / cart summary sidebar */
.hd-cart-summary {
  background: var(--hd-card-bg);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius);
  box-shadow: var(--hd-shadow);
  padding: 22px;
  position: sticky;
  top: 20px;
}
.hd-cart-summary .total-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 18px;
  border-top: 1px solid var(--hd-border);
  padding-top: 12px;
  margin-top: 12px;
  color: var(--hd-orange);
}
.hd-cart-summary .btn-checkout {
  width: 100%;
  background: var(--hd-orange);
  border: none;
  color: #fff;
  padding: 12px;
  border-radius: 6px;
  font-weight: 600;
  margin-top: 16px;
}

/* Domain search bar */
.hd-domain-search input[type="text"] {
  border-radius: 6px 0 0 6px;
  border: 1px solid var(--hd-border);
  height: 48px;
}
.hd-domain-search .btn-search {
  border-radius: 0 6px 6px 0;
  background: var(--hd-orange);
  color: #fff;
  height: 48px;
  border: none;
  padding: 0 26px;
}

/* Payment method tabs on checkout */
.hd-payment-tabs .nav-link.active {
  border-bottom: 3px solid var(--hd-orange);
  color: var(--hd-orange);
  font-weight: 600;
}

/* ==========================================================================
   Dashboard — real Nexus markup overrides (clientareahome.tpl)
   .tile / .highlight.bg-color-* / .card-accent-* / .card-sidebar
   ========================================================================== */

.tiles .tile {
  display: block;
  background: var(--hd-card-bg);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius);
  box-shadow: var(--hd-shadow);
  padding: 26px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--hd-text);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease;
  margin: 6px;
}
.tiles .tile:hover {
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--hd-text);
}
.tiles .tile > i {
  display: block;
  font-size: 32px;
  margin-bottom: 10px;
  color: var(--hd-orange);
}
.tiles .tile .stat {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
}
.tiles .tile .title {
  font-size: 13px;
  color: var(--hd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tiles .tile .highlight {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
}

/* Color accents stay true to each tile's semantic color (services/domains/
   tickets/invoices) rather than overriding with one brand color everywhere,
   matching the intent of your original tile colors */
.bg-color-blue { background-color: var(--hd-tile-blue); }
.bg-color-green { background-color: var(--hd-tile-green); }
.bg-color-red { background-color: #e05252; }
.bg-color-gold { background-color: var(--hd-tile-amber); }

/* Progressive enhancement: full solid-color tiles like the reference design,
   on browsers supporting :has(). Falls back to the bordered card + bottom
   accent bar above on older browsers. */
.tiles .tile:has(.highlight.bg-color-blue) { background: var(--hd-tile-blue); color: #fff; }
.tiles .tile:has(.highlight.bg-color-green) { background: var(--hd-tile-green); color: #fff; }
.tiles .tile:has(.highlight.bg-color-red) { background: #e05252; color: #fff; }
.tiles .tile:has(.highlight.bg-color-gold) { background: var(--hd-tile-amber); color: #fff; }
.tiles .tile:has(.highlight) > i,
.tiles .tile:has(.highlight) .stat,
.tiles .tile:has(.highlight) .title,
.tiles .tile:has(.highlight):hover {
  color: #fff;
}
.tiles .tile:has(.highlight) .highlight { display: none; }

/* Active Products / Services + other home cards (card-accent-*) */
.client-home-cards .card {
  border-radius: var(--hd-radius);
  border: 1px solid var(--hd-border);
  box-shadow: var(--hd-shadow);
}
.client-home-cards .card-header {
  background: var(--hd-card-bg);
  border-bottom: 2px solid var(--hd-orange);
  font-weight: 600;
}
.client-home-cards .card-header .btn {
  background: var(--hd-orange);
  border-color: var(--hd-orange);
  color: #fff;
}

/* Right-hand content sidebar (includes/sidebar.tpl) — Your Info / Contacts /
   Shortcuts cards from your screenshot */
.sidebar .card-sidebar {
  border-radius: var(--hd-radius);
  border: 1px solid var(--hd-border);
  box-shadow: var(--hd-shadow);
  overflow: hidden;
}
.sidebar .card-sidebar .card-header {
  background: var(--hd-bg);
  border-bottom: 1px solid var(--hd-border);
}
.sidebar .card-sidebar .card-header .card-title {
  font-weight: 600;
}
.sidebar .card-sidebar .list-group-item.active {
  background: var(--hd-orange);
  border-color: var(--hd-orange);
}
.sidebar .card-sidebar .sidebar-menu-item-icon {
  color: var(--hd-orange);
}
.sidebar .card-sidebar .card-footer .btn-block {
  background: var(--hd-orange);
  border-color: var(--hd-orange);
  color: #fff;
}

/* ==========================================================================
   Order / Configure Product page — real markup (store/order.tpl)
   ========================================================================== */

.store-order-container h2 {
  font-weight: 700;
  color: var(--hd-text);
}

.store-order-container .payment-term {
  background: var(--hd-card-bg);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius);
  box-shadow: var(--hd-shadow);
  padding: 18px 20px;
}
.store-order-container .payment-term h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.store-order-container .payment-term select.custom-select {
  border-color: var(--hd-border);
  border-radius: 6px;
  height: 46px;
}
.store-order-container .payment-term select.custom-select:focus {
  border-color: var(--hd-orange);
  box-shadow: 0 0 0 0.15rem rgba(247, 148, 29, 0.25);
}

/* Domain choice tabs */
.store-domain-tabs.nav-tabs {
  border-bottom: 2px solid var(--hd-border);
}
.store-domain-tabs.nav-tabs .nav-link {
  border: none;
  color: var(--hd-text-muted);
  font-weight: 600;
  border-radius: 0;
}
.store-domain-tabs.nav-tabs .nav-item.active .nav-link,
.store-domain-tabs.nav-tabs .nav-link.active {
  color: var(--hd-orange);
  border-bottom: 3px solid var(--hd-orange);
  background: transparent;
}
.responsive-tabs-sm-connector.store {
  display: none; /* decorative connector from default theme; not needed with simplified tab underline above */
}
.store-domain-tab-content {
  border: 1px solid var(--hd-border);
  border-top: none;
  border-radius: 0 0 var(--hd-radius) var(--hd-radius);
  padding: 20px;
}
.store-order-container .domain-input,
.store-order-container .subdomain-input,
.store-order-container select[name="existing_domain"] {
  border-color: var(--hd-border);
  border-radius: 6px;
  height: 46px;
}
.domain-validation.ok {
  color: var(--hd-tile-green);
  font-weight: 600;
}
.domain-validation:not(.ok):not(:empty) {
  color: #e05252;
  font-weight: 600;
}

/* Config fields card */
.store-order-container .card {
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius);
  box-shadow: var(--hd-shadow);
  margin-top: 20px;
}
.store-order-container .form-label {
  font-weight: 600;
  font-size: 13px;
}

/* Action buttons */
.store-order-container .btn-primary {
  background: var(--hd-orange);
  border-color: var(--hd-orange);
  font-weight: 600;
  padding: 11px 26px;
  border-radius: 6px;
}
.store-order-container .btn-primary:hover {
  background: var(--hd-orange-dark);
  border-color: var(--hd-orange-dark);
}
.store-order-container .btn-default {
  border-color: var(--hd-border);
  color: var(--hd-text);
  border-radius: 6px;
  padding: 11px 22px;
}

/* Upsell promo card */
.store-promoted-product {
  border-radius: var(--hd-radius);
}
.store-promoted-product .features li {
  list-style: none;
  margin-bottom: 6px;
}
.store-promoted-product .features li i {
  color: var(--hd-tile-green);
  margin-right: 8px;
}
.store-promoted-product .btn-success {
  background: var(--hd-orange);
  border-color: var(--hd-orange);
  font-weight: 600;
}

/* ==========================================================================
   Cart / Checkout pages (#order-standard_cart) — core WHMCS markup, not
   theme .tpl files. These pages are styled entirely through Nexus's own
   CSS custom properties (see sass/_cart.scss), so we override those tokens
   once rather than fighting dozens of individual selectors. This cascades
   automatically to the checkout button, success badges, card corners,
   sidebar accents, and any cart-related page we haven't directly seen.
   ========================================================================== */

body #order-standard_cart {
  /* Accent / inverted-background token: drives .btn-checkout, badge-success,
     panel label color, and any other "primary action" surface in core cart
     markup. This is the single biggest lever for brand color here. */
  --bg-inverted: var(--hd-orange);
  --grayscale-lifted: var(--hd-orange-dark); /* hover/focus state */

  /* Corner rounding: match the rest of the theme's card radius */
  --rounding-md: var(--hd-radius);
  --rounding-sm: 6px;
}

/* Sidebar cards within cart flow (order summary, billing cycle, etc.) */
body #order-standard_cart .cart-sidebar .card-sidebar,
body #order-standard_cart .order-summary {
  box-shadow: var(--hd-shadow);
}

body #order-standard_cart .order-summary h2 {
  font-size: 16px;
  font-weight: 600;
  padding: 14px 16px;
  margin: 0;
}

/* View-cart items list header accent */
body #order-standard_cart .view-cart-items-header {
  font-weight: 600;
}

/* Checkout button: confirm full brand color even where --bg-inverted isn't
   the only thing driving it */
body #order-standard_cart .text-right .btn-checkout {
  font-weight: 600;
}

/* Domain pricing table "Add to Cart" success state badges */
body #order-standard_cart .tld-filters .badge.badge-success {
  font-weight: 600;
}

/* Configure-product modal/page reachable from within the cart flow */
body #frmConfigureProduct label {
  color: var(--hd-text);
}

/* ==========================================================================
   Layout fixes — post first-render review
   ========================================================================== */

/* FIX 1: Nexus renders its content sidebar as the FIRST (left) Bootstrap
   column, which gets covered by the expanding nav rail. Move it to the
   RIGHT visually using flexbox order without touching any .tpl markup. */
.hd-main-content .row.no-gutters {
  display: flex;
  flex-wrap: wrap;
}
.hd-main-content .row.no-gutters > .primary-content {
  order: 1;
}
.hd-main-content .row.no-gutters > .col-lg-4,
.hd-main-content .row.no-gutters > .col-xl-3 {
  order: 2;
}

/* FIX 2 & FIX 3 (footer offset + sticky topbar) now live in the single
   consolidated sidebar block above — removed here to avoid conflicting
   margin-left values fighting the collapse toggle. */

/* FIX 4: Compensate main-body top padding now that topbar is sticky —
   without this, the first card/tile row appears immediately under the
   sticky bar with no breathing room. */
#main-body {
  padding-top: 20px;
}

/* FIX 5: The sidebar-secondary (mobile) also needs right-side order */
.d-lg-none.sidebar-secondary {
  order: 3;
}

/* ==========================================================================
   Fix: Card header action button hover contrast
   Buttons like "→ My Services", "+ Open New Ticket", "→ View All" in card
   headers were losing text visibility on hover. Force white text in all
   interactive states.
   ========================================================================== */

.client-home-cards .card-header .btn,
.client-home-cards .card-header a {
  color: #fff !important;
}
.client-home-cards .card-header .btn:hover,
.client-home-cards .card-header .btn:focus,
.client-home-cards .card-header .btn:active,
.client-home-cards .card-header a:hover,
.client-home-cards .card-header a:focus {
  color: #fff !important;
  background-color: var(--hd-orange-dark) !important;
  border-color: var(--hd-orange-dark) !important;
  text-decoration: none !important;
}

/* Plain text action links in card headers (not .btn) that should stay
   orange on light background rather than turning white */
.client-home-cards .card-header a:not(.btn) {
  color: var(--hd-orange) !important;
  background: transparent !important;
  border: none !important;
}
.client-home-cards .card-header a:not(.btn):hover {
  color: var(--hd-orange-dark) !important;
  background: transparent !important;
}

/* ==========================================================================
   Fix: Links invisible until hover, inside dashboard/panel body content
   ("Place an order to get started", "open a ticket", etc.) — these sit
   directly inside a card/list body without a .btn class, and nothing set
   an explicit resting color for them, so they only appeared on hover.
   ========================================================================== */

.card a:not(.btn),
.card-body a:not(.btn),
.list-group a:not(.btn),
.list-group-item a:not(.btn),
.hd-panel a:not(.btn),
.client-home-cards a:not(.btn) {
  color: var(--hd-orange) !important;
}
.card a:not(.btn):hover,
.card-body a:not(.btn):hover,
.list-group a:not(.btn):hover,
.list-group-item a:not(.btn):hover,
.hd-panel a:not(.btn):hover,
.client-home-cards a:not(.btn):hover {
  color: var(--hd-orange-dark) !important;
  text-decoration: underline;
}
/* Card header buttons already forced to white text above — don't let the
   broader rule just above fight with that */
.client-home-cards .card-header .btn {
  color: #fff !important;
}

/* ==========================================================================
   Fix: Order Summary sidebar (cart.php — product selection / configure /
   review & checkout steps) rendering white-on-white. The core cart summary
   panel relies on --bg/--text tokens that aren't resolving reliably on this
   step, so we force an explicit readable surface instead of chasing the
   token mismatch.
   ========================================================================== */

.order-summary,
body #order-standard_cart .order-summary {
  background-color: var(--hd-sidebar-bg) !important;
  border-radius: var(--hd-radius);
  overflow: hidden;
}
.order-summary h2,
body #order-standard_cart .order-summary h2 {
  color: #fff !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  padding: 14px 16px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.order-summary .summary-container,
body #order-standard_cart .order-summary .summary-container {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.order-summary .summary-container *,
body #order-standard_cart .order-summary .summary-container * {
  color: rgba(255, 255, 255, 0.92) !important;
}
.order-summary .summary-container .total,
.order-summary .summary-container strong,
.order-summary .summary-container b {
  color: #ffffff !important;
}
.order-summary .btn-continue-shopping {
  color: var(--hd-orange) !important;
}

/* ==========================================================================
   Fix: Floating labels (Configure Server / custom fields) — WHMCS's own
   markup for these fields uses the Bootstrap "form-label-group" floating
   label pattern, but the theme never shipped the CSS that makes it float.
   Without it, the <label> just sits statically on top of the placeholder
   text instead of animating above the field.
   ========================================================================== */

/* ==========================================================================
   Fix: Configure Server fields (Hostname / Root Password / NS1 Prefix /
   NS2 Prefix) — matches ClientX-Child's layout: a small label sits above
   the field, and the field itself is a plain underline rather than a
   boxed input.
   ========================================================================== */
.form-label-group {
  display: block;
  margin-bottom: 26px;
}
.form-label-group label {
  display: block;
  margin-bottom: 4px;
  padding: 0;
  font-size: 13px;
  color: var(--hd-text-muted);
  border: none;
}
.form-label-group input,
.form-label-group textarea,
.form-label-group select {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hd-border-strong, var(--hd-text));
  border-radius: 0;
  padding: 4px 2px 8px;
  font-weight: 600;
  color: var(--hd-text);
  box-shadow: none;
}
.form-label-group input:focus,
.form-label-group textarea:focus,
.form-label-group select:focus {
  border-bottom-color: var(--hd-orange);
  outline: none;
  box-shadow: none;
}
.form-label-group input::placeholder,
.form-label-group textarea::placeholder {
  color: var(--hd-text-muted);
  font-weight: 600;
  opacity: 0.65;
}

/* ==========================================================================
   Fix (final pass): links still invisible in dashboard panel bodies.
   The earlier fix excluded anything with a .btn class — but several of
   these ("Place an order to get started", "open a ticket") are rendered
   by WHMCS core as text-styled buttons (btn-link) rather than plain <a>
   tags, so :not(.btn) was skipping exactly the elements we needed to fix.
   This block is intentionally last in the file so it wins the cascade.
   ========================================================================== */
.card-body a,
.card-body a.btn-link,
.list-group a,
.list-group-item a,
.hd-panel a,
.hd-panel a.btn-link {
  color: var(--hd-orange) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  text-decoration: none;
}
.card-body a:hover,
.card-body a.btn-link:hover,
.list-group a:hover,
.list-group-item a:hover,
.hd-panel a:hover,
.hd-panel a.btn-link:hover {
  color: var(--hd-orange-dark) !important;
  text-decoration: underline;
}
/* Real colored action buttons in card headers/footers are untouched —
   this rule only reaches into card BODIES, not headers/footers. */

/* ==========================================================================
   Dark Mode
   Toggled via body.hd-dark (set by JS in footer.tpl, persisted in a cookie,
   applied server-side on <body> in header.tpl to avoid a flash of light
   mode on load). Overrides both our own --hd-* tokens and the core WHMCS
   design tokens (--bg/--text/--border/etc.) that most of theme.css already
   consumes, so most core-rendered components pick this up automatically.
   ========================================================================== */

body.hd-dark {
  --hd-bg: #121417;
  --hd-card-bg: #1c1f24;
  --hd-border: #2e3238;
  --hd-text: #e8e9eb;
  --hd-text-muted: #9aa0a6;

  /* Core WHMCS design tokens */
  --bg: #121417;
  --bg-lifted: #1c1f24;
  --bg-accented: #22262c;
  --bg-muted: #1a1d21;
  --border: #2e3238;
  --border-lifted: #363b42;
  --border-accented: #3a3f46;
  --border-muted: #26292e;
  --text: #e8e9eb;
  --text-lifted: #f5f6f7;
  --text-muted: #9aa0a6;
  --text-accented: #ffffff;
  --grayscale: #cfd2d6;
  --grayscale-accented: #e5e7ea;
  --grayscale-lifted: #b7bbc0;
  --neutral: #3a3f46;
  --neutral-accented: #454a52;
  --neutral-lifted: #2e3238;
}

body.hd-dark .card,
body.hd-dark .list-group-item,
body.hd-dark .hd-topbar-wrap,
body.hd-dark .modal-content,
body.hd-dark .dropdown-menu {
  background-color: var(--hd-card-bg);
  border-color: var(--hd-border);
  color: var(--hd-text);
}
body.hd-dark .form-control,
body.hd-dark input,
body.hd-dark textarea,
body.hd-dark select {
  background-color: var(--hd-card-bg);
  border-color: var(--hd-border);
  color: var(--hd-text);
}
body.hd-dark .form-label-group label {
  color: var(--hd-text-muted);
}
body.hd-dark .table {
  color: var(--hd-text);
}
body.hd-dark .hd-account-name {
  color: var(--hd-text) !important;
}

/* Dark mode toggle switch, sits in the topbar next to the other icons */
.hd-theme-toggle {
  background: transparent;
  border: none;
  color: var(--hd-text-muted);
  font-size: 16px;
  padding: 6px 8px;
  cursor: pointer;
}
.hd-theme-toggle:hover {
  color: var(--hd-orange);
}
.hd-theme-toggle .fa-sun { display: none; }
body.hd-dark .hd-theme-toggle .fa-moon { display: none; }
body.hd-dark .hd-theme-toggle .fa-sun { display: inline; }

/* ==========================================================================
   Account nav avatar ("Hello, {name}!" item) — shows the client's photo
   if WHMCS provides one (Gravatar-backed core variables), otherwise a
   colored initial badge. The initial badge clips a full name down to its
   first character via a fixed-width overflow-hidden box, so no risky
   string-function Smarty modifiers are needed in the template.
   ========================================================================== */
.hd-nav-avatar {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-orange);
}
.hd-nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hd-nav-avatar-initial {
  display: inline-block;
  width: 1ch;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.hd-sidebar.hd-collapsed .hd-nav-avatar {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Fix: Card-header action buttons ("My Services", "View All", etc.) render
   blank/white in some contexts. Rather than relying on an ancestor wrapper
   class that may not exist on every dashboard variant, target the exact
   classes WHMCS renders on these buttons directly, with enough specificity
   to always win — regardless of light/dark mode.
   ========================================================================== */
a.btn.btn-default.bg-color-blue,
a.btn.btn-default.bg-color-green,
a.btn.btn-default.bg-color-red,
a.btn.btn-default.bg-color-gold,
.card-header a.btn.btn-default,
.card-header a.btn {
  background-color: var(--hd-orange) !important;
  border-color: var(--hd-orange) !important;
  color: #fff !important;
}
a.btn.btn-default.bg-color-blue:hover,
a.btn.btn-default.bg-color-green:hover,
a.btn.btn-default.bg-color-red:hover,
a.btn.btn-default.bg-color-gold:hover,
.card-header a.btn.btn-default:hover,
.card-header a.btn:hover {
  background-color: var(--hd-orange-dark) !important;
  border-color: var(--hd-orange-dark) !important;
  color: #fff !important;
}

/* ==========================================================================
   Fix: Footer legibility. "Contact Us" / "Terms of Service" use Bootstrap's
   default .nav-link color (designed for a dark footer bar), and the
   language/currency switcher uses .btn-outline-light (a light-on-dark
   button) — both nearly invisible against our light footer background.
   Also hides WHMCS's own core-injected footer branding block per request
   (note: this only hides it visually via CSS; WHMCS still renders it in
   the page source, and depending on your license tier, contractually
   removing it may need a WHMCS branding/white-label setting instead).
   ========================================================================== */
#footer {
  background-color: var(--hd-card-bg);
}
#footer .nav-link {
  color: var(--hd-text) !important;
  font-weight: 500;
}
#footer .nav-link:hover {
  color: var(--hd-orange) !important;
}
#footer .btn-outline-light {
  color: var(--hd-text) !important;
  border-color: var(--hd-border) !important;
  background-color: transparent !important;
}
#footer .btn-outline-light:hover {
  border-color: var(--hd-orange) !important;
  color: var(--hd-orange) !important;
}
#footer .copyright {
  color: var(--hd-text-muted);
}
body.hd-dark #footer .btn-outline-light,
body.hd-dark #footer .nav-link,
body.hd-dark #footer .copyright {
  color: var(--hd-text) !important;
}

.hd-footer-output {
  display: none;
}

/* ==========================================================================
   Custom uploaded nav icons (Open Ticket / Contact Us / Network Status) —
   sized and aligned to match the FontAwesome icons used everywhere else
   in the rail, including collapsed and hover states.
   ========================================================================== */
.hd-nav-icon-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hd-nav-icon-img img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: transform 0.18s ease;
}
.hd-nav-link:hover .hd-nav-icon-img img {
  transform: scale(1.12);
}
.hd-sidebar.hd-collapsed .hd-nav-icon-img img {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Fix (broader pass): Configure Server fields still boxed. The previous
   fix targeted .form-label-group specifically, but this configure-product
   step apparently renders these fields with plain Bootstrap .form-control
   markup instead — so it never matched. Scoping to the whole order/cart
   flow (#order-standard_cart) catches it regardless of which wrapper
   markup a given product's config step uses.
   ========================================================================== */
#order-standard_cart .form-control,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="password"],
#order-standard_cart textarea {
  border: none !important;
  border-bottom: 1px solid var(--hd-text) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 4px 2px 8px !important;
  box-shadow: none !important;
  font-weight: 600;
  height: auto;
}
#order-standard_cart .form-control:focus,
#order-standard_cart input[type="text"]:focus,
#order-standard_cart input[type="password"]:focus {
  border-bottom-color: var(--hd-orange) !important;
  box-shadow: none !important;
  outline: none;
}
#order-standard_cart label {
  display: block;
  font-size: 13px;
  color: var(--hd-text-muted);
  margin-bottom: 4px;
}
#order-standard_cart .form-control::placeholder {
  color: var(--hd-text-muted);
  font-weight: 600;
  opacity: 0.65;
}