/* ============================================================
   HostDango WHMCS Child Theme — custom.css
   Built from live page source — all selectors verified
   Place at: /public_html/templates/hostdango/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');

/* ── 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:        #2a2a2a;
  --hd-muted:       #6b7280;
  --hd-faint:       #9ca3af;
  --hd-border:      #e5e7eb;
  --hd-surface:     #f9fafb;
  --hd-white:       #ffffff;
}

/* ── FONTS ────────────────────────────────────────────────── */
body,
p, span, div, li, td, th, label,
input, select, textarea, button, a {
  font-family: 'DM Sans', sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}

/* ══════════════════════════════════════════════════════════
   HEADER / TOP BAR  —  section#header
   ══════════════════════════════════════════════════════════ */
section#header {
  background-color: var(--hd-ink) !important;
  background-image: none !important;
}
section#header .top-nav li a {
  color: rgba(255,255,255,.5) !important;
}
section#header .top-nav li a:hover {
  color: var(--hd-white) !important;
  text-decoration: none !important;
}

/* Logout button — li.primary-action > a.btn */
section#header li.primary-action > a.btn {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
section#header li.primary-action > a.btn:hover {
  background-color: var(--hd-green-dark) !important;
  border-color: var(--hd-green-dark) !important;
}

/* Admin return button */
section#header .btn-logged-in-admin {
  background-color: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: var(--hd-white) !important;
  border-radius: 9px !important;
}

/* ══════════════════════════════════════════════════════════
   MAIN NAV  —  section#main-menu
   ══════════════════════════════════════════════════════════ */
section#main-menu {
  background-color: var(--hd-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hd-border) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
}
nav#nav,
nav#nav.navbar,
nav#nav.navbar-default {
  background-color: var(--hd-white) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* Nav links */
nav#nav .navbar-nav > li > a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--hd-muted) !important;
  padding: 22px 14px !important;
}
nav#nav .navbar-nav > li > a:hover,
nav#nav .navbar-nav > li > a:focus {
  color: var(--hd-ink) !important;
  background-color: transparent !important;
}
nav#nav .navbar-nav > li.active > a,
nav#nav .navbar-nav > li.active > a:hover {
  color: var(--hd-green) !important;
  background-color: transparent !important;
  font-weight: 700 !important;
}

/* "Hello, Duane!" account dropdown button */
nav#nav #Secondary_Navbar-Account > a.dropdown-toggle,
nav#nav .navbar-right li.account > a.dropdown-toggle {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  color: var(--hd-white) !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  margin-top: 12px !important;
  border: none !important;
}
nav#nav #Secondary_Navbar-Account > a.dropdown-toggle:hover,
nav#nav .navbar-right li.account > a.dropdown-toggle:hover {
  background-color: var(--hd-green-dark) !important;
}

/* Dropdown menus */
nav#nav .dropdown-menu {
  border: 1px solid var(--hd-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  padding: 6px !important;
  margin-top: 0 !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;
  background-image: none !important;
  color: var(--hd-green-deep) !important;
}
nav#nav .dropdown-menu .nav-divider {
  background-color: var(--hd-border) !important;
  height: 1px !important;
  margin: 4px 0 !important;
}
nav#nav .dropdown-menu .nav-divider a {
  display: none !important;
}

/* Mobile toggle */
nav#nav .navbar-toggle {
  border-color: var(--hd-border) !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;
  background-image: none !important;
  padding: 60px 0 !important;
}
section#home-banner h2 {
  color: var(--hd-white) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  margin-bottom: 28px !important;
}

/* Search & Transfer buttons inside banner */
section#home-banner .btn.search {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
  font-weight: 700 !important;
  border-radius: 0 9px 9px 0 !important;
}
section#home-banner .btn.search:hover {
  background-color: var(--hd-green-dark) !important;
  border-color: var(--hd-green-dark) !important;
}
section#home-banner .btn.transfer {
  background-color: rgba(255,255,255,.15) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.2) !important;
  color: var(--hd-white) !important;
  font-weight: 600 !important;
  border-radius: 0 9px 9px 0 !important;
}
section#home-banner .btn.transfer:hover {
  background-color: rgba(255,255,255,.25) !important;
}
section#home-banner .form-control {
  border-radius: 9px 0 0 9px !important;
  border-color: rgba(255,255,255,.2) !important;
  font-size: 16px !important;
  padding: 14px 18px !important;
}

/* ══════════════════════════════════════════════════════════
   HOME SHORTCUTS BAR  —  div.home-shortcuts
   ══════════════════════════════════════════════════════════ */
div.home-shortcuts {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  padding: 0 !important;
}
div.home-shortcuts .lead {
  color: var(--hd-white) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
div.home-shortcuts ul li a {
  color: var(--hd-white) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
div.home-shortcuts ul li a:hover {
  background-color: var(--hd-green-dark) !important;
  color: var(--hd-white) !important;
  text-decoration: none !important;
}
div.home-shortcuts ul li a i {
  color: var(--hd-white) !important;
}

/* ══════════════════════════════════════════════════════════
   FOOTER  —  section#footer
   ══════════════════════════════════════════════════════════ */
section#footer {
  background-color: var(--hd-ink) !important;
  background-image: none !important;
  color: rgba(255,255,255,.35) !important;
  padding: 24px 0 !important;
  border-top: none !important;
}
section#footer p {
  color: rgba(255,255,255,.35) !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 {
  color: rgba(255,255,255,.35) !important;
}
section#footer .back-to-top:hover {
  color: var(--hd-green) !important;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS (global)
   ══════════════════════════════════════════════════════════ */
.btn {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.btn:active { transform: scale(.98) !important; }

.btn-primary {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}
.btn-primary:hover, .btn-primary:focus {
  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;
  background-image: none !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--hd-green-dark) !important;
  border-color: var(--hd-green-dark) !important;
}
.btn-info {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}
.btn-info:hover, .btn-info:focus {
  background-color: var(--hd-green-dark) !important;
  border-color: var(--hd-green-dark) !important;
}
.btn-default {
  background-color: var(--hd-white) !important;
  background-image: none !important;
  border-color: var(--hd-border) !important;
  color: var(--hd-ink2) !important;
}
.btn-default:hover, .btn-default:focus {
  background-color: var(--hd-surface) !important;
  border-color: #aaa !important;
  color: var(--hd-ink) !important;
}
.btn-danger {
  background-color: #dc2626 !important;
  background-image: none !important;
  border-color: #dc2626 !important;
  color: var(--hd-white) !important;
}
.btn-danger:hover { background-color: #b91c1c !important; border-color: #b91c1c !important; }
.btn-lg { padding: 13px 28px !important; font-size: 15px !important; border-radius: 11px !important; }
.btn-sm { padding: 7px 14px !important; font-size: 12px !important; border-radius: 7px !important; }
.btn-xs { padding: 4px 10px !important; font-size: 11px !important; border-radius: 6px !important; }

/* ══════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════ */
.form-control {
  border: 1.5px solid var(--hd-border) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--hd-ink) !important;
  height: auto !important;
  padding: 10px 14px !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;
}
label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--hd-ink) !important;
}
.form-group { margin-bottom: 18px !important; }

/* ══════════════════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════════════════ */
.panel {
  border: 1px solid var(--hd-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  background-color: var(--hd-white) !important;
  overflow: hidden !important;
}
.panel-heading {
  background-color: var(--hd-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hd-border) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  color: var(--hd-ink) !important;
  padding: 16px 20px !important;
}
.panel-body { padding: 20px !important; }
.panel-footer {
  background-color: var(--hd-surface) !important;
  border-top: 1px solid var(--hd-border) !important;
  padding: 12px 20px !important;
}
.panel-primary { border-color: var(--hd-green) !important; }
.panel-primary > .panel-heading,
.panel-success > .panel-heading {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  border-color: var(--hd-green-dark) !important;
  color: var(--hd-white) !important;
}

/* ══════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════ */
.table { font-size: 14px !important; }
.table > thead > tr > th {
  background-color: var(--hd-surface) !important;
  color: var(--hd-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  border-bottom: 2px solid var(--hd-border) !important;
  padding: 12px 16px !important;
}
.table > tbody > tr > td {
  border-color: var(--hd-border) !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
}
.table-hover > tbody > tr:hover { background-color: var(--hd-green-tint) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--hd-surface) !important; }

/* ══════════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════════ */
.alert { border-radius: 9px !important; border-width: 1px !important; font-size: 14px !important; }
.alert-success { background-color: var(--hd-green-tint) !important; border-color: var(--hd-green-light) !important; color: var(--hd-green-deep) !important; }
.alert-info    { background-color: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af !important; }
.alert-warning { background-color: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.alert-danger  { background-color: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }

/* ══════════════════════════════════════════════════════════
   BADGES & LABELS
   ══════════════════════════════════════════════════════════ */
.label-primary, .badge-primary,
.label-info,    .badge-info    { background-color: var(--hd-green) !important; color: var(--hd-white) !important; }
.label-success, .badge-success { background-color: var(--hd-green-tint) !important; color: var(--hd-green-deep) !important; }
.label-warning                 { background-color: #fffbeb !important; color: #92400e !important; }
.label-danger                  { background-color: #fef2f2 !important; color: #991b1b !important; }

/* ══════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════ */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}
.pagination > li > a:hover {
  background-color: var(--hd-green-tint) !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-green-deep) !important;
}

/* ══════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════ */
.nav-tabs { border-bottom: 2px solid var(--hd-border) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--hd-green) !important;
  border-top: 2px solid var(--hd-green) !important;
  background-color: var(--hd-white) !important;
}

/* ══════════════════════════════════════════════════════════
   PROGRESS BARS
   ══════════════════════════════════════════════════════════ */
.progress { border-radius: 20px !important; background-color: var(--hd-green-light) !important; box-shadow: none !important; }
.progress-bar,
.progress-bar-success {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR LIST GROUP
   ══════════════════════════════════════════════════════════ */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--hd-green) !important;
  background-image: none !important;
  border-color: var(--hd-green) !important;
  color: var(--hd-white) !important;
}

/* ══════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════ */
.modal-content {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
}
.modal-header {
  background-color: var(--hd-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hd-border) !important;
}
.modal-footer {
  background-color: var(--hd-surface) !important;
  border-top: 1px solid var(--hd-border) !important;
}

/* ══════════════════════════════════════════════════════════
   LINKS
   ══════════════════════════════════════════════════════════ */
a { color: var(--hd-green) !important; }
a:hover { color: var(--hd-green-dark) !important; }

/* ══════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════ */
.text-primary { color: var(--hd-green) !important; }
.text-success { color: var(--hd-green-deep) !important; }
.text-muted   { color: var(--hd-muted) !important; }
.text-danger  { color: #dc2626 !important; }
.text-info    { color: #1e40af !important; }
.bg-primary   { background-color: var(--hd-green) !important; }
.bg-success   { background-color: var(--hd-green-tint) !important; }
.bg-info      { background-color: #eff6ff !important; }

.well {
  background-color: var(--hd-surface) !important;
  border-color: var(--hd-border) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.breadcrumb { background-color: transparent !important; }
hr { border-color: var(--hd-border) !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) {
  .navbar-collapse.in,
  .navbar-collapse {
    background-color: var(--hd-white) !important;
    border-top: 1px solid var(--hd-border) !important;
  }
  section#home-banner { padding: 40px 20px !important; }
  section#home-banner h2 { font-size: 22px !important; }
}

/* ── HELLO DUANE blue patch fix ──────────────────────────── */
nav#nav .navbar-right,
nav#nav .navbar-nav.navbar-right,
#primary-nav .navbar-right,
section#main-menu .navbar-right {
  background-color: transparent !important;
  background-image: none !important;
}

nav#nav .navbar-right > li,
nav#nav .navbar-right > li.account,
nav#nav .navbar-right > li.dropdown {
  background-color: transparent !important;
  background-image: none !important;
}

/* The open/active state of the dropdown also goes blue */
nav#nav .navbar-right > li.open > a,
nav#nav .navbar-right > li.account.open > a,
nav#nav .navbar-right > li.open > a:hover,
nav#nav .navbar-right > li.open > a:focus {
  background-color: var(--hd-green-dark) !important;
  background-image: none !important;
  color: var(--hd-white) !important;
}

/* Catch any inherited background on the navbar collapse container */
.navbar-collapse,
#primary-nav {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--hd-border) !important;
  box-shadow: none !important;
}