/* ============================================================
   HostDango WHMCS Six Theme — custom.css
   Built from actual six template selectors (header.tpl, footer.tpl)
   Brand: #5cb85c green, Plus Jakarta Sans, DM Sans, #0f1611 ink
   Place at: /home/myhostdango/public_html/templates/six/css/custom.css
   ============================================================ */

/* ── GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Plus+Jakarta+Sans:wght@700;800;900&display=swap');

/* ── CSS VARIABLES ────────────────────────────────────────── */
:root {
  --hd-green:       #5cb85c;
  --hd-green-dark:  #449d44;
  --hd-green-deep:  #2d6a2d;
  --hd-green-tint:  #f0faf0;
  --hd-green-light: #e8f5e8;
  --hd-ink:         #0f1611;
  --hd-ink2:        #1a2820;
  --hd-muted:       #6b7280;
  --hd-faint:       #9ca3af;
  --hd-border:      #e5e7eb;
  --hd-surface:     #f9fafb;
  --hd-white:       #ffffff;
  --hd-font-disp:   'Plus Jakarta Sans', sans-serif;
  --hd-font-body:   'DM Sans', sans-serif;
  --hd-radius:      10px;
  --hd-radius-lg:   16px;
}

/* ── BASE ─────────────────────────────────────────────────── */
body {
  font-family: var(--hd-font-body) !important;
  font-size: 15px !important;
  color: var(--hd-ink) !important;
  background-color: var(--hd-surface) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hd-font-disp) !important;
  font-weight: 800 !important;
  color: var(--hd-ink) !important;
  letter-spacing: -0.3px;
}

p, span, label, td, th, li, input, select, textarea {
  font-family: var(--hd-font-body) !important;
}

a {
  color: var(--hd-green) !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
a:hover {
  color: var(--hd-green-dark) !important;
  text-decoration: underline !important;
}

/* ── TOP BAR: section#header ──────────────────────────────── */
/* The dark strip with logo, language switcher, login, cart   */
section#header {
  background-color: var(--hd-ink) !important;
  border-bottom: none !important;
  padding: 0 !important;
}

section#header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 66px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Prevent Bootstrap clearfix pseudo-elements from becoming flex items */
section#header .container::before,
section#header .container::after {
  display: none !important;
}

/* Logo on the left */
section#header a.logo,
section#header a.logo-text {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

/* Top-nav pushes to the right naturally with space-between */
section#header a.logo img {
  height: 42px !important;
  width: auto !important;
}
section#header a.logo-text {
  font-family: var(--hd-font-disp) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--hd-white) !important;
}

/* Top nav links (language, login, register) */
section#header ul.top-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
section#header ul.top-nav > li > a {
  font-family: var(--hd-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.55) !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  text-decoration: none !important;
  transition: color .15s, background .15s !important;
  display: block !important;
}
section#header ul.top-nav > li > a:hover {
  color: var(--hd-white) !important;
  background: rgba(255,255,255,.08) !important;
  text-decoration: none !important;
}

/* View Cart / Logout button */
section#header ul.top-nav > li.primary-action > a.btn {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
  font-family: var(--hd-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
section#header ul.top-nav > li.primary-action > a.btn:hover {
  background-color: var(--hd-green-dark) !important;
  border-color: var(--hd-green-dark) !important;
  color: var(--hd-white) !important;
  text-decoration: none !important;
}

/* Admin masquerade button */
section#header ul.top-nav a.btn-logged-in-admin {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.7) !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
}

/* ── MAIN NAV: section#main-menu ──────────────────────────── */
section#main-menu {
  background-color: var(--hd-white) !important;
  border-bottom: 1px solid var(--hd-border) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
}

nav#nav.navbar {
  background-color: var(--hd-white) !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  min-height: 52px !important;
}

nav#nav .navbar-nav > li > a {
  font-family: var(--hd-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--hd-muted) !important;
  padding: 8px 14px !important;
  border-radius: 7px !important;
  transition: color .15s, background .15s !important;
  line-height: 1.5 !important;
}
nav#nav .navbar-nav > li > a:hover,
nav#nav .navbar-nav > li > a:focus {
  color: var(--hd-ink) !important;
  background-color: var(--hd-surface) !important;
}
nav#nav .navbar-nav > li.active > a,
nav#nav .navbar-nav > li.active > a:hover {
  color: var(--hd-green) !important;
  background-color: var(--hd-green-tint) !important;
  font-weight: 700 !important;
}

/* Account dropdown button — li#Secondary_Navbar-Account.dropdown.account */
.navbar-main li.account,
nav#nav li.account {
  background-color: var(--hd-green) !important;
  border-radius: 9px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.navbar-main li.account > a.dropdown-toggle,
nav#nav li.account > a {
  background-color: transparent !important;
  color: var(--hd-white) !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  font-family: var(--hd-font-body) !important;
  font-size: 14px !important;
  border-radius: 9px !important;
}
.navbar-main li.account.open,
nav#nav li.account.open {
  background-color: var(--hd-green-dark) !important;
}
.navbar-main li.account > a:hover,
nav#nav li.account > a:hover {
  background-color: var(--hd-green-dark) !important;
  color: var(--hd-white) !important;
}

/* Dropdown menus */
nav#nav .dropdown-menu {
  border: 1px solid var(--hd-border) !important;
  border-radius: var(--hd-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  padding: 6px !important;
  margin-top: 4px !important;
}
nav#nav .dropdown-menu > li > a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--hd-ink2) !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
}
nav#nav .dropdown-menu > li > a:hover {
  background-color: var(--hd-green-tint) !important;
  color: var(--hd-green-deep) !important;
}

/* Mobile hamburger */
nav#nav .navbar-toggle {
  border-color: var(--hd-border) !important;
  border-radius: 7px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
nav#nav .navbar-toggle .icon-bar {
  background-color: var(--hd-ink) !important;
}

/* ── HOME BANNER: section#home-banner ─────────────────────── */
section#home-banner {
  background-color: var(--hd-ink) !important;
  padding: 64px 0 56px !important;
  position: relative !important;
  overflow: hidden !important;
}
section#home-banner::before {
  content: '' !important;
  position: absolute !important;
  top: -100px; right: -100px !important;
  width: 500px; height: 500px !important;
  border-radius: 50% !important;
  background: rgba(92,184,92,.07) !important;
  pointer-events: none !important;
}
section#home-banner h2 {
  color: var(--hd-white) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  margin-bottom: 28px !important;
  letter-spacing: -0.5px !important;
}
section#home-banner .form-control {
  height: 52px !important;
  font-size: 16px !important;
  border-radius: 10px 0 0 10px !important;
  border: none !important;
  padding: 0 20px !important;
  box-shadow: none !important;
  color: var(--hd-ink) !important;
}
section#home-banner .input-group-btn .btn {
  height: 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 0 28px !important;
  border-radius: 0 10px 10px 0 !important;
  border: none !important;
}
section#home-banner .input-group-btn .btn.search {
  background-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}
section#home-banner .input-group-btn .btn.search:hover {
  background-color: var(--hd-green-dark) !important;
}
section#home-banner .input-group-btn .btn.transfer {
  background-color: var(--hd-ink2) !important;
  color: var(--hd-white) !important;
  border-left: 1px solid rgba(255,255,255,.1) !important;
}

/* ── HOME SHORTCUTS: .home-shortcuts ──────────────────────── */
.home-shortcuts {
  background-color: var(--hd-green) !important;
  padding: 0 !important;
  border-top: 1px solid var(--hd-green-dark) !important;
}
.home-shortcuts .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.home-shortcuts p.lead {
  color: rgba(255,255,255,.8) !important;
  font-family: var(--hd-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.home-shortcuts ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
}
.home-shortcuts ul li {
  flex: 1 !important;
  border-left: 1px solid rgba(255,255,255,.15) !important;
}
.home-shortcuts ul li:first-child {
  border-left: none !important;
}
.home-shortcuts ul li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 20px 16px !important;
  color: var(--hd-white) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  transition: background .15s !important;
}
.home-shortcuts ul li a:hover {
  background: rgba(0,0,0,.1) !important;
  text-decoration: none !important;
  color: var(--hd-white) !important;
}
.home-shortcuts ul li a i {
  font-size: 20px !important;
}
.home-shortcuts ul li a p {
  margin: 0 !important;
  color: var(--hd-white) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
.home-shortcuts ul li a p span {
  display: none !important;
}

/* ── MAIN BODY ────────────────────────────────────────────── */
section#main-body {
  padding: 32px 0 48px !important;
  min-height: 400px !important;
}

/* Sidebar */
section#main-body .sidebar {
  background-color: var(--hd-white) !important;
  border: 1px solid var(--hd-border) !important;
  border-radius: var(--hd-radius-lg) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
section#main-body .sidebar .panel {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
section#main-body .sidebar .panel-heading {
  background-color: var(--hd-surface) !important;
  border-bottom: 1px solid var(--hd-border) !important;
  padding: 14px 18px !important;
  font-family: var(--hd-font-disp) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--hd-muted) !important;
}
section#main-body .sidebar .list-group {
  margin: 0 !important;
}
section#main-body .sidebar .list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--hd-border) !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--hd-ink2) !important;
  background: transparent !important;
  border-radius: 0 !important;
}
section#main-body .sidebar .list-group-item:last-child {
  border-bottom: none !important;
}
section#main-body .sidebar .list-group-item:hover {
  background-color: var(--hd-green-tint) !important;
  color: var(--hd-green-deep) !important;
}
section#main-body .sidebar .list-group-item.active {
  background-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
  font-weight: 700 !important;
}
section#main-body .sidebar .list-group-item a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ── PANELS / CARDS ───────────────────────────────────────── */
.panel {
  border: 1.5px solid var(--hd-border) !important;
  border-radius: var(--hd-radius-lg) !important;
  box-shadow: none !important;
  background-color: var(--hd-white) !important;
  margin-bottom: 20px !important;
}
.panel-heading {
  background-color: var(--hd-white) !important;
  border-bottom: 1px solid var(--hd-border) !important;
  border-radius: var(--hd-radius-lg) var(--hd-radius-lg) 0 0 !important;
  padding: 16px 20px !important;
  font-family: var(--hd-font-disp) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: var(--hd-ink) !important;
}
.panel-primary > .panel-heading {
  background-color: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
  color: var(--hd-white) !important;
}
.panel-success > .panel-heading {
  background-color: var(--hd-green-tint) !important;
  border-color: var(--hd-green-light) !important;
  color: var(--hd-green-deep) !important;
}
.panel-body {
  padding: 20px !important;
}
.panel-footer {
  background-color: var(--hd-surface) !important;
  border-top: 1px solid var(--hd-border) !important;
  border-radius: 0 0 var(--hd-radius-lg) var(--hd-radius-lg) !important;
  padding: 14px 20px !important;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  font-family: var(--hd-font-body) !important;
  font-weight: 700 !important;
  border-radius: var(--hd-radius) !important;
  font-size: 14px !important;
  transition: background .15s, border-color .15s, color .15s !important;
  text-decoration: none !important;
}
.btn-primary {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--hd-green-dark) !important;
  border-color: var(--hd-green-dark) !important;
  color: var(--hd-white) !important;
}
.btn-success {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}
.btn-success:hover {
  background-color: var(--hd-green-dark) !important;
  border-color: var(--hd-green-dark) !important;
}
.btn-default {
  background-color: var(--hd-white) !important;
  border-color: var(--hd-border) !important;
  color: var(--hd-ink) !important;
}
.btn-default:hover {
  background-color: var(--hd-surface) !important;
  border-color: #c0c7d0 !important;
  color: var(--hd-ink) !important;
}
.btn-danger {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: var(--hd-white) !important;
}
.btn-danger:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}
.btn-link {
  color: var(--hd-green) !important;
  font-weight: 600 !important;
}
.btn-link:hover {
  color: var(--hd-green-dark) !important;
  text-decoration: underline !important;
}

/* ── FORMS ────────────────────────────────────────────────── */
.form-control {
  font-family: var(--hd-font-body) !important;
  font-size: 14px !important;
  border: 1.5px solid var(--hd-border) !important;
  border-radius: var(--hd-radius) !important;
  color: var(--hd-ink) !important;
  background-color: var(--hd-white) !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  height: auto !important;
  transition: border-color .15s !important;
}
.form-control:focus {
  border-color: var(--hd-green) !important;
  box-shadow: 0 0 0 3px rgba(92,184,92,.15) !important;
  outline: none !important;
}
.form-group label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hd-ink) !important;
  margin-bottom: 6px !important;
}
.has-error .form-control {
  border-color: #dc2626 !important;
}
.has-error .help-block,
.has-error .control-label {
  color: #dc2626 !important;
}
.has-success .form-control {
  border-color: var(--hd-green) !important;
}
select.form-control {
  appearance: auto !important;
}

/* ── ALERTS ───────────────────────────────────────────────── */
.alert {
  border-radius: var(--hd-radius) !important;
  border: none !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.alert-success {
  background-color: var(--hd-green-tint) !important;
  color: var(--hd-green-deep) !important;
  border-left: 4px solid var(--hd-green) !important;
}
.alert-danger, .alert-error {
  background-color: #fef2f2 !important;
  color: #991b1b !important;
  border-left: 4px solid #dc2626 !important;
}
.alert-warning {
  background-color: #fffbeb !important;
  color: #92400e !important;
  border-left: 4px solid #f59e0b !important;
}
.alert-info {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-left: 4px solid #3b82f6 !important;
}

/* ── TABLES ───────────────────────────────────────────────── */
.table {
  font-size: 14px !important;
}
.table > thead > tr > th {
  font-family: var(--hd-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--hd-muted) !important;
  border-bottom: 1.5px solid var(--hd-border) !important;
  padding: 10px 14px !important;
  background-color: var(--hd-surface) !important;
}
.table > tbody > tr > td {
  color: var(--hd-ink) !important;
  border-top: 1px solid var(--hd-border) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--hd-surface) !important;
}
.table-hover > tbody > tr:hover {
  background-color: var(--hd-green-tint) !important;
}
.table-bordered {
  border-color: var(--hd-border) !important;
  border-radius: var(--hd-radius) !important;
  overflow: hidden !important;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--hd-border) !important;
}

/* ── LABELS / BADGES ──────────────────────────────────────── */
.label {
  font-family: var(--hd-font-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 20px !important;
  padding: 3px 9px !important;
}
.label-default  { background-color: var(--hd-surface) !important; color: var(--hd-muted) !important; border: 1px solid var(--hd-border) !important; }
.label-primary,
.label-success  { background-color: var(--hd-green-tint) !important; color: var(--hd-green-deep) !important; border: 1px solid var(--hd-green-light) !important; }
.label-warning  { background-color: #fffbeb !important; color: #92400e !important; }
.label-danger   { background-color: #fef2f2 !important; color: #991b1b !important; }
.label-info     { background-color: #eff6ff !important; color: #1e40af !important; }

/* ── BREADCRUMBS ──────────────────────────────────────────── */
.breadcrumb {
  background-color: transparent !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
  margin-bottom: 0 !important;
}
.breadcrumb > li + li::before { color: var(--hd-faint) !important; }
.breadcrumb > .active { color: var(--hd-muted) !important; }

/* ── PAGINATION ───────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hd-ink) !important;
  border-color: var(--hd-border) !important;
  border-radius: 7px !important;
  margin: 0 2px !important;
  padding: 7px 13px !important;
}
.pagination > li > a:hover {
  background-color: var(--hd-green-tint) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-green-deep) !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}

/* ── TABS ─────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--hd-border) !important;
  margin-bottom: 20px !important;
}
.nav-tabs > li > a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--hd-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 16px !important;
  margin-bottom: -2px !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.nav-tabs > li > a:hover {
  color: var(--hd-ink) !important;
  border-bottom-color: var(--hd-border) !important;
  background: transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  color: var(--hd-green) !important;
  border-bottom: 2px solid var(--hd-green) !important;
  font-weight: 700 !important;
  background: transparent !important;
}

/* ── PROGRESS BARS ────────────────────────────────────────── */
.progress {
  border-radius: 20px !important;
  background-color: var(--hd-green-light) !important;
  height: 8px !important;
  box-shadow: none !important;
}
.progress-bar { background-color: var(--hd-green) !important; border-radius: 20px !important; box-shadow: none !important; }
.progress-bar-success { background-color: var(--hd-green) !important; }
.progress-bar-info    { background-color: #3b82f6 !important; }
.progress-bar-warning { background-color: #f59e0b !important; }
.progress-bar-danger  { background-color: #ef4444 !important; }

/* ── MODALS ───────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--hd-radius-lg) !important;
  border: 1px solid var(--hd-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  overflow: hidden !important;
}
.modal-header {
  background-color: var(--hd-white) !important;
  border-bottom: 1px solid var(--hd-border) !important;
  padding: 18px 24px !important;
}
.modal-title {
  font-family: var(--hd-font-disp) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--hd-ink) !important;
}
.modal-body { padding: 24px !important; font-size: 14px !important; }
.modal-footer {
  background-color: var(--hd-surface) !important;
  border-top: 1px solid var(--hd-border) !important;
  padding: 16px 24px !important;
}

/* ── FOOTER: section#footer ───────────────────────────────── */
section#footer {
  background-color: var(--hd-ink) !important;
  border-top: none !important;
  padding: 24px 0 !important;
  color: rgba(255,255,255,.35) !important;
  font-size: 13px !important;
}
section#footer p {
  color: rgba(255,255,255,.35) !important;
  margin: 0 !important;
  font-size: 13px !important;
}
section#footer a {
  color: rgba(255,255,255,.35) !important;
}
section#footer a:hover {
  color: var(--hd-green) !important;
  text-decoration: none !important;
}
section#footer .back-to-top {
  float: right !important;
  color: rgba(255,255,255,.25) !important;
  font-size: 14px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
  margin-top: -2px !important;
}
section#footer .back-to-top:hover {
  color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
  text-decoration: none !important;
}

/* ── STORE / ORDER FORM OVERRIDES ─────────────────────────── */
/* The orange comes from .domain-checker-bg in standard_cart CSS */
.domain-checker-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.domain-checker-bg {
  background-color: var(--hd-ink) !important;
  background-image: none !important;
  border-radius: var(--hd-radius-lg) !important;
  padding: 40px 32px !important;
}
.domain-checker-bg .form-control {
  background-color: var(--hd-white) !important;
  color: var(--hd-ink) !important;
  border: none !important;
  height: 52px !important;
  font-size: 16px !important;
  padding: 0 20px !important;
  border-radius: 10px 0 0 10px !important;
}
.domain-checker-bg .btn-primary,
.domain-checker-bg #btnCheckAvailability {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
  height: 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 0 28px !important;
}
.domain-checker-bg .btn-primary:hover,
.domain-checker-bg #btnCheckAvailability:hover {
  background-color: var(--hd-green-dark) !important;
  border-color: var(--hd-green-dark) !important;
}

/* Domain promo boxes at bottom */
.domain-promo-box {
  background-color: var(--hd-surface) !important;
  border: 1.5px solid var(--hd-border) !important;
  border-radius: var(--hd-radius-lg) !important;
  padding: 24px !important;
  margin-top: 24px !important;
}
.domain-promo-box .btn-warning {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}
.domain-promo-box .btn-warning:hover {
  background-color: var(--hd-green-dark) !important;
}
.domain-promo-box .text-warning {
  color: var(--hd-green-deep) !important;
}

/* TLD filter badges */
.tld-filters .badge-secondary {
  background-color: var(--hd-surface) !important;
  color: var(--hd-ink) !important;
  border: 1px solid var(--hd-border) !important;
  font-weight: 600 !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
}
.tld-filters .badge-secondary:hover,
.tld-filters .badge-secondary.active {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}

/* ── CLIENT AREA DASHBOARD ────────────────────────────────── */
/* Stat bars under Services/Domains/Tickets/Invoices */
.client-service-status,
.stat-bar,
[class*="stat-"] .progress,
.clientarea-stats .progress-bar {
  background-color: var(--hd-green) !important;
}
/* The colored bottom borders on the stat boxes */
.clientarea-stats .col-sm-3 {
  border-bottom-color: var(--hd-green) !important;
}


/* Blue table header bar */
#order-standard_cart .view-cart-items-header,
#order-standard_cart .cart-header,
.view-cart-items-header {
  background-color: var(--hd-ink) !important;
  color: var(--hd-white) !important;
  border-radius: var(--hd-radius) var(--hd-radius) 0 0 !important;
}

/* Blue order summary header */
#order-standard_cart .order-summary,
.order-summary {
  background-color: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
  border-radius: var(--hd-radius-lg) !important;
}
#order-standard_cart .order-summary h2,
.order-summary h2 {
  color: var(--hd-white) !important;
  font-family: var(--hd-font-disp) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* Cart table product/price header row */
#order-standard_cart .cart-body table thead tr,
#order-standard_cart .cart-body table thead th,
.cart-body table thead tr,
.cart-body table thead th {
  background-color: var(--hd-ink) !important;
  color: var(--hd-white) !important;
  border-color: var(--hd-ink) !important;
}

/* Blue bottom border on view-cart-items */
#order-standard_cart .view-cart-items,
.view-cart-items {
  border-bottom-color: var(--hd-green) !important;
}

/* Blue sub-heading spans */
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
  color: var(--hd-green) !important;
}

/* Blue "Apply Promo Code" tab underline — already green from our tab CSS */
/* Blue checkout button */
#order-standard_cart .btn-checkout,
.btn-checkout {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}

/* Blue empty-cart button */
#order-standard_cart .empty-cart .btn {
  background-color: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
}

/* Blue item domain color */
#order-standard_cart .view-cart-items .item-domain {
  color: var(--hd-green) !important;
}

/* Summary container background */
#order-standard_cart .summary-container {
  background-color: var(--hd-surface) !important;
  border-radius: 0 0 var(--hd-radius-lg) var(--hd-radius-lg) !important;
}

/* Sidebar list items */
#order-standard_cart .cart-sidebar .list-group-item.active,
#order-standard_cart .cart-sidebar h3 {
  color: var(--hd-ink) !important;
}
#order-standard_cart .cart-sidebar .list-group-item {
  border-color: var(--hd-border) !important;
}


.ticket-reply, .ticket-post {
  border: 1px solid var(--hd-border) !important;
  border-radius: var(--hd-radius) !important;
  padding: 18px !important;
  margin-bottom: 16px !important;
  background-color: var(--hd-white) !important;
}
.ticket-reply.staff, .ticket-post.staff {
  background-color: var(--hd-green-tint) !important;
  border-color: var(--hd-green-light) !important;
}

/* ── WELL ─────────────────────────────────────────────────── */
.well {
  background-color: var(--hd-surface) !important;
  border-color: var(--hd-border) !important;
  border-radius: var(--hd-radius) !important;
  box-shadow: none !important;
  padding: 18px !important;
}

/* ── UTILITIES ────────────────────────────────────────────── */
.text-success { color: var(--hd-green-deep) !important; }
.text-primary { color: var(--hd-green) !important; }
.text-muted   { color: var(--hd-muted) !important; }
.text-danger  { color: #dc2626 !important; }
.text-warning { color: #92400e !important; }
.text-info    { color: #1e40af !important; }
.bg-success   { background-color: var(--hd-green-tint) !important; }
.bg-primary   { background-color: var(--hd-green) !important; }
hr            { border-color: var(--hd-border) !important; margin: 20px 0 !important; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--hd-surface); }
::-webkit-scrollbar-thumb { background: var(--hd-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--hd-muted); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 767px) {
  section#header .container {
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    min-height: auto !important;
  }
  section#header ul.top-nav {
    order: -1 !important;
    width: 100% !important;
    justify-content: flex-end !important;
    margin-bottom: 8px !important;
  }
  section#home-banner {
    padding: 40px 0 36px !important;
  }
  section#home-banner h2 {
    font-size: 26px !important;
  }
  .home-shortcuts ul {
    flex-wrap: wrap !important;
  }
  .home-shortcuts ul li {
    flex: 0 0 50% !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
  }
  .panel-body { padding: 14px !important; }
  .modal-body { padding: 16px !important; }
}