/* ============================================================
   HOSTDANGO WHMCS THEME — custom.css
   Overrides for WHMCS 9.x Six base theme
   HostDango 2026
   ============================================================ */

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

:root {
  --hd-green:        #5cb85c;
  --hd-green-dark:   #4cae4c;
  --hd-green-light:  #f4fdf4;
  --hd-dark:         #050810;
  --hd-dark-surface: #0d1117;
  --hd-dark-border:  rgba(255,255,255,0.08);
  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

/* Global typography */
body, button, input, select, textarea {
  font-family: var(--font-body) !important;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
}

/* ── HEADER ── */
section#header {
  background-color: var(--hd-dark) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--hd-dark-border) !important;
}
section#header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 66px !important;
  padding: 0 32px !important;
}
section#header .logo {
  order: 0 !important;
  float: none !important;
  margin: 0 !important;
}
section#header .logo img {
  max-height: 38px !important;
  vertical-align: middle !important;
}
section#header .logo-text {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
}
ul.top-nav {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  order: 1 !important;
  margin: 0 !important;
}
ul.top-nav > li > a {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
}
ul.top-nav > li > a:hover,
ul.top-nav > li:active > a,
ul.top-nav > li:focus > a {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
  text-decoration: none !important;
}
ul.top-nav > li.primary-action {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-left: none !important;
}
ul.top-nav > li.primary-action > a.btn {
  background-color: var(--hd-green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
ul.top-nav > li.primary-action > a.btn:hover {
  background-color: var(--hd-green-dark) !important;
}
ul.top-nav > li > a.btn-logged-in-admin {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.7) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

/* ── MAIN NAV ── */
section#main-menu {
  background-color: var(--hd-dark) !important;
  border-bottom: 1px solid var(--hd-dark-border) !important;
}
.navbar-main {
  background-color: transparent !important;
  border: none !important;
  margin-bottom: 0 !important;
  min-height: 44px !important;
  font-family: var(--font-body) !important;
}
.navbar-main .navbar-nav > li > a {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  border-radius: 6px !important;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.06) !important;
}
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus {
  color: var(--hd-green) !important;
  background-color: transparent !important;
  font-weight: 600 !important;
}
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:focus,
.navbar-main .navbar-nav > .open > a:hover {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.06) !important;
}
.navbar-main .dropdown-menu {
  background-color: var(--hd-dark-surface) !important;
  border: 1px solid var(--hd-dark-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
  padding: 8px !important;
  margin-top: 4px !important;
  border-top: 1px solid var(--hd-dark-border) !important;
}
.navbar-main .navbar-nav .dropdown-menu > li > a,
.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  padding: 9px 14px !important;
  background-color: transparent !important;
}
.navbar-main .navbar-nav .dropdown-menu > li > a:hover {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.06) !important;
}
.navbar-main .navbar-nav li.account {
  background-color: transparent !important;
}
.navbar-toggle .icon-bar {
  background-color: rgba(255,255,255,0.7) !important;
}

/* ── HOME BANNER ── */
section#home-banner {
  background-color: var(--hd-dark) !important;
  background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(92,184,92,0.15) 0%, transparent 70%) !important;
  border-top: 3px solid var(--hd-green) !important;
  padding: 80px 0 72px !important;
}
section#home-banner h2 {
  color: #ffffff !important;
  font-family: var(--font-head) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 800 !important;
  margin-bottom: 32px !important;
  letter-spacing: -0.5px !important;
  padding: 0 !important;
}
section#home-banner .form-control {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 52px !important;
}
section#home-banner .form-control:focus {
  border-color: var(--hd-green) !important;
  background: rgba(255,255,255,0.1) !important;
}
section#home-banner .btn.search {
  background-color: var(--hd-green) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  height: 52px !important;
  padding: 0 28px !important;
}
section#home-banner .btn.search:hover {
  background-color: var(--hd-green-dark) !important;
}
section#home-banner .btn.transfer {
  background-color: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.8) !important;
  border-radius: 0 !important;
  height: 52px !important;
  padding: 0 24px !important;
}
section#home-banner .btn.transfer:hover {
  background-color: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

/* ── HOME SHORTCUTS ── */
.home-shortcuts {
  background: var(--hd-green) !important;
}
.home-shortcuts li {
  border-right: 1px solid rgba(255,255,255,0.2) !important;
  width: 25% !important;
  padding: 5px 3px !important;
}
.home-shortcuts li:first-child {
  border-left: 1px solid rgba(255,255,255,0.2) !important;
}
.home-shortcuts li a {
  color: #ffffff !important;
}
.home-shortcuts li:hover {
  background-color: rgba(0,0,0,0.12) !important;
}
.home-shortcuts .lead {
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--font-body) !important;
}

/* ── MAIN BODY ── */
section#main-body {
  background-color: #f9fafb !important;
  padding: 32px 0 48px !important;
}

/* ── BUTTONS ── */
.btn-primary, .btn-success {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green-dark) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
.btn-primary:active, .btn-success:active,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-success {
  background-color: var(--hd-green-dark) !important;
  border-color: var(--hd-green-dark) !important;
}
.btn { border-radius: 8px !important; font-family: var(--font-body) !important; }

/* ── FORMS ── */
.form-control:focus {
  border-color: var(--hd-green) !important;
  box-shadow: 0 0 0 3px rgba(92,184,92,0.15) !important;
}

/* ── PANELS ── */
.panel-primary { border-color: var(--hd-green) !important; }
.panel-primary > .panel-heading {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
}

/* ── SIDEBAR ── */
a.list-group-item.active,
a.list-group-item.active:focus,
a.list-group-item.active:hover {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: var(--hd-green) !important;
  border-color: var(--hd-green) !important;
}
.pagination > li > a,
.pagination > li > span {
  color: var(--hd-green) !important;
}

/* ── LABELS / BADGES ── */
.label-success, .label-primary { background-color: var(--hd-green) !important; }

/* ── FOOTER ── */
section#footer {
  background-color: var(--hd-dark) !important;
  border-top: 1px solid var(--hd-dark-border) !important;
  color: rgba(255,255,255,0.3) !important;
}
section#footer p { color: rgba(255,255,255,0.3) !important; }
section#footer a { color: var(--hd-green) !important; }
section#footer .back-to-top { color: rgba(255,255,255,0.3) !important; }
section#footer .back-to-top:hover { color: var(--hd-green) !important; }
section#footer .back-to-top i {
  background-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.4) !important;
}

/* ── BREADCRUMBS ── */
.breadcrumb { background: transparent !important; }
div.header-lined .breadcrumb > .active { color: var(--hd-green) !important; }

/* ── MOBILE ── */
@media (max-width: 991px) {
  section#header .container { padding: 0 16px !important; height: 60px !important; }
  .navbar-main .navbar-collapse {
    background-color: var(--hd-dark-surface) !important;
    border-top: 1px solid var(--hd-dark-border) !important;
  }
  .navbar-main .navbar-nav > li > a { padding: 10px 16px !important; border-radius: 0 !important; }
  .navbar-main .dropdown-menu { border: none !important; box-shadow: none !important; border-radius: 0 !important; }
  ul.top-nav { gap: 4px !important; }
}

section#header .logo {
  margin-right: auto !important;
}

section#home-banner #frmDomainHomepage .g-recaptcha,
section#home-banner .captcha-wrap {
  margin-top: 16px !important;
}