/* =========================================================================
   HeroHoster — WHMCS client area theme (matches herohoster.com)
   Dark navy + electric-blue + Poppins. Loaded after theme.min.css.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Open+Sans:wght@400;600;700;800&display=swap');

:root {
    --hh-bg:        #0F1329;   /* page background (site body bg) */
    --hh-surface:   #151B33;   /* cards / panels */
    --hh-surface-2: #1F274B;   /* inputs / headers / hovers */
    --hh-border:    rgba(255,255,255,.08);
    --hh-primary:   #3b6bff;   /* brand blue (buttons) */
    --hh-primary-2: #4d79ff;   /* brighter blue (hover) */
    --hh-link:      #8DA4E8;   /* readable link blue on dark */
    --hh-text:      #eef1ff;
    --hh-muted:     #AEB6D4;
    --hh-success:   #2ed573;
    --hh-cyan:      #0dbbe6;
}

/* ---------- base ---------- */
html, body,
body.primary-bg-color {
    background-color: var(--hh-bg) !important;
    background-image: none !important;
    color: var(--hh-text);
    font-family: 'Poppins', sans-serif;
}
h1,h2,h3,h4,h5,h6 { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; }
p, span, li, label, td, div, .text-default { color: var(--hh-text); }
a { color: var(--hh-link); transition: color .15s ease; }
a:hover, a:focus { color: #fff; text-decoration: none; }
.text-muted, small, .text-secondary, .help-block { color: var(--hh-muted) !important; }
hr { border-color: var(--hh-border); }
code, pre { background: #0b0e1f; color: #d5e0ff; border-color: var(--hh-border); }

/* ---------- header / topbar / navbar ---------- */
#header.header, .header { background-color: #0b0e1f !important; border-bottom: 1px solid var(--hh-border); }
.topbar { background-color: #0b0e1f !important; border-bottom: 1px solid var(--hh-border); }
.topbar, .topbar .btn, .topbar .input-group-text { color: var(--hh-muted); }
.navbar, .navbar-light, .navbar-expand-lg { background-color: transparent !important; }
.navbar .nav-link, .navbar-nav .nav-link, .navbar-nav > li > a, .navbar-brand { color: var(--hh-text) !important; font-weight: 500; }
.navbar .nav-link:hover, .navbar-nav > li > a:hover { color: var(--hh-primary-2) !important; }
.navbar-toggler { border-color: var(--hh-border); }
.dropdown-menu { background-color: var(--hh-surface) !important; border: 1px solid var(--hh-border); }
.dropdown-item, .dropdown-menu a { color: var(--hh-text) !important; }
.dropdown-item:hover, .dropdown-menu a:hover { background-color: var(--hh-surface-2) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--hh-border); }

/* ---------- cards / panels / surfaces ---------- */
.card, .panel, .well, .modal-content, .list-group-item,
.account-overview-panels .panel, .home-panels .panel,
.sidebar, .sidebar-menu, .promobox, .tab-content, .jumbotron {
    background-color: var(--hh-surface) !important;
    border-color: var(--hh-border) !important;
    color: var(--hh-text);
}
.card-header, .panel-heading, .modal-header, .modal-footer, .card-footer,
.list-group-item.heading, .sidebar .panel-heading {
    background-color: var(--hh-surface-2) !important;
    border-color: var(--hh-border) !important;
    color: #fff;
}
.card-body, .panel-body { color: var(--hh-text); }
.list-group-item + .list-group-item { border-top-color: var(--hh-border); }
.list-group-item.active, .list-group-item.active:hover { background-color: var(--hh-primary) !important; border-color: var(--hh-primary) !important; }

/* ---------- buttons ---------- */
.btn-primary, .btn-info { background-color: var(--hh-primary); border-color: var(--hh-primary); color:#fff; }
.btn-primary:hover, .btn-primary:focus, .btn-info:hover { background-color: var(--hh-primary-2); border-color: var(--hh-primary-2); }
.btn-success { background-color: var(--hh-success); border-color: var(--hh-success); }
.btn-secondary, .btn-default, .btn-light { background-color: var(--hh-surface-2); border-color: var(--hh-border); color:#fff; }
.btn-secondary:hover, .btn-default:hover { background-color: #2a3060; color:#fff; }
.btn-outline-primary { color: var(--hh-link); border-color: var(--hh-primary); }
.btn-outline-primary:hover { background-color: var(--hh-primary); color:#fff; }

/* ---------- forms ---------- */
.form-control, .custom-select, select, textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="number"],
.input-group-text, .StripeElement {
    background-color: var(--hh-surface-2) !important;
    border-color: var(--hh-border) !important;
    color: #fff !important;
}
.form-control::placeholder { color: var(--hh-muted); }
.form-control:focus, .custom-select:focus {
    background-color: var(--hh-surface-2) !important;
    border-color: var(--hh-primary-2) !important;
    box-shadow: 0 0 0 .2rem rgba(55,66,250,.25) !important;
    color:#fff !important;
}

/* ---------- tables ---------- */
.table, .table td, .table th { color: var(--hh-text); border-color: var(--hh-border) !important; }
.table thead th { color:#fff; border-bottom: 2px solid var(--hh-border); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.02); }
.table-hover tbody tr:hover { background-color: rgba(55,66,250,.08); }

/* ---------- misc components ---------- */
.breadcrumb { background-color: var(--hh-surface) !important; }
.breadcrumb-item, .breadcrumb-item a { color: var(--hh-muted); }
.nav-tabs { border-bottom-color: var(--hh-border); }
.nav-tabs .nav-link.active { background-color: var(--hh-surface) !important; border-color: var(--hh-border) var(--hh-border) var(--hh-surface) !important; color:#fff !important; }
.pagination .page-link { background-color: var(--hh-surface-2); border-color: var(--hh-border); color: var(--hh-link); }
.pagination .page-item.active .page-link { background-color: var(--hh-primary); border-color: var(--hh-primary); }
.badge-primary { background-color: var(--hh-primary); }
.progress { background-color: var(--hh-surface-2); }
.alert-info { background-color: rgba(13,187,230,.12); border-color: rgba(13,187,230,.35); color:#cdeffb; }
.alert-success { background-color: rgba(46,213,115,.12); border-color: rgba(46,213,115,.35); color:#d6ffe6; }
.alert-warning { background-color: rgba(255,193,7,.12); border-color: rgba(255,193,7,.35); color:#ffeebf; }
.alert-danger { background-color: rgba(255,71,87,.12); border-color: rgba(255,71,87,.35); color:#ffd9dd; }

/* ---------- login / register cards ---------- */
.card.text-center, .verifyemailbanner { background-color: var(--hh-surface) !important; }
.select2-container--default .select2-selection { background-color: var(--hh-surface-2) !important; border-color: var(--hh-border) !important; }

/* ---------- footer ---------- */
#footer.footer, .footer, footer { background-color: #0b0e1f !important; color: var(--hh-muted); border-top: 1px solid var(--hh-border); }
#footer .nav-link, footer .nav-link, #footer a, footer a { color: var(--hh-link) !important; }
#footer .nav-link:hover { color:#fff !important; }
.copyright { color: var(--hh-muted); }


/* ===================== site-matching header ===================== */
#header.header { position: static !important; background: #0F1325 !important; border-bottom: 1px solid rgba(255,255,255,.06); }
#header.header .header-btm { background-color: #0F1325; padding: 12px 0; }
#header.header .logo img.hh-logo { width: 220px; max-width: 55vw; height: auto; }
#header.header .logo { transition: transform .3s ease; }
#header.header .logo:hover { transform: scale(1.04); }
#header.header .mainmenu { padding: 8px 0; margin-bottom: 0; }
#header.header .hh-menu { list-style:none; margin:0; padding:0; display:flex; align-items:center; flex-wrap:wrap; }
#header.header .hh-menu > li { position: relative; }
#header.header .hh-menu > li > a, #header.header .hh-menu .nav-link { color:#fff !important; font-weight:600; font-size:17px; padding:6px 14px !important; }
#header.header .hh-menu > li > a:hover, #header.header .hh-menu .nav-link:hover { color:#3742fa !important; }
#header.header .hh-clientarea-btn > a { border:1px solid rgba(255,255,255,.85); border-radius:5px; margin-left:8px; }
#header.header .hh-clientarea-btn > a:hover { background:#092eed; border-color:#092eed; color:#fff !important; }
#header.header .hh-cart .badge { background:#092eed; color:#fff; }
#header.header .dropdown-menu { background:#171b33 !important; border:1px solid rgba(255,255,255,.09); }
.hh-navtoggle { background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; padding:6px 11px; border-radius:5px; }
@media (min-width:1200px){ #header.header .mainmenu.collapse{ display:block !important; } }
@media (max-width:1199px){ #header.header .mainmenu{ flex-basis:100%; } #header.header .hh-menu{ flex-direction:column; align-items:flex-start; } }

/* ===================== site-matching footer ===================== */
#footer.footer { position:static; background:#0b0e1f !important; background-image:none !important; padding:56px 0 0 !important; border-top:1px solid rgba(255,255,255,.06); }
#footer.footer .footer-widget h4 { color:#fff; font-weight:600; margin-bottom:14px; }
#footer.footer .footer-widget ul { list-style:none; padding:0; margin:0; }
#footer.footer .footer-widget li a { color:#cfd3ee !important; padding:6px 0; display:inline-block; }
#footer.footer .footer-widget li a:hover { color:#fff !important; }
#footer.footer .copyright-text { border-top:1px solid rgba(255,255,255,.15); margin-top:36px; padding:16px 0; }
#footer.footer .copyright-text p { color:#a7abcb !important; margin:0; }

/* ===================== fixes round 1 ===================== */
/* header nav: horizontal + right-aligned on desktop */
#header.header .mainmenu.navbar-collapse { flex-basis: auto !important; flex-grow: 0 !important; }
#header.header .hh-menu.navbar-nav { flex-direction: row !important; align-items: center; }
@media (min-width:1200px){ #header.header .mainmenu.collapse { display: flex !important; } }
@media (max-width:1199.98px){
    #header.header .mainmenu.navbar-collapse { flex-basis: 100% !important; }
    #header.header .hh-menu.navbar-nav { flex-direction: column !important; align-items: flex-start; }
}

/* breadcrumb strip -> transparent/dark */
.master-breadcrumb { background: transparent !important; border: none !important; box-shadow: none !important; }
.master-breadcrumb .breadcrumb, .breadcrumb { background: transparent !important; border: none !important; padding-left: 0; }
.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active { color: var(--hh-muted) !important; }

/* "How can we help" / "Your account" icon shortcut cards */
.action-icon-btns a { background: var(--hh-surface) !important; color: var(--hh-text) !important; border-radius: 8px; }
.action-icon-btns a:hover { background: var(--hh-surface-2) !important; color: #fff !important; }
.action-icon-btns a .ico-container i, .action-icon-btns a i, .action-icon-btns a figure i { color: var(--hh-link) !important; }

/* ===================== order form (standard_cart) ===================== */
#order-standard_cart, .cart, .cart-body, .cartcontainer, .products,
.product-recommendations, .order-summary, .summary-container { background: transparent !important; color: var(--hh-text) !important; }
.cart .panel, .cart .card, .product, .cart-item, .cart-sidebar .panel, .cart-sidebar .card,
.card-sidebar, .panel-sidebar, .summary-container .panel, .order-summary .panel, .panel-default {
    background: var(--hh-surface) !important; border-color: var(--hh-border) !important; color: var(--hh-text) !important;
}
.panel-title, .product .product-title, .package .name, .pricing .price,
.price, .breakdown-price, .total-due-today, .cart-total, .amount { color: #fff !important; }
.order-summary a, .cart a { color: var(--hh-link) !important; }
.qty input, .promo input, .cart input, .configure-product input, .configure-product select {
    background: var(--hh-surface-2) !important; color:#fff !important; border-color: var(--hh-border) !important; }
.summary-container hr, .order-summary hr { border-color: var(--hh-border); }
/* login / register card */
.logincontainer .card, .sslcertificate .card, .primary-content .card { background: var(--hh-surface) !important; }


/* ============================================================
   2026-08 redesign alignment
   One accent, flat surfaces, a single corner radius, and body
   copy a step larger than the WHMCS defaults. Matches the tokens
   used across herohoster.com.
   ============================================================ */
:root{
  --hh-radius: 14px;
  --hh-ink2:   #C6CEE9;
}

/* one radius everywhere, instead of Bootstrap's assorted values */
.hh-card, .card, .panel, .well, .alert,
.hh-footer .footer-widget, .list-group-item,
.sidebar .panel, .sidebar .list-group-item{
  border-radius: var(--hh-radius) !important;
}
.btn, .badge, .nav-pills .nav-link{ border-radius: 999px !important; }

/* flat surfaces: no gradients, one hairline border */
.card, .panel, .well, .sidebar .panel{
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-border) !important;
  box-shadow: none !important;
}

/* body copy: the site floor is 1.02rem, WHMCS defaults sit well under it */
body, .panel-body, .card-body, p, td, li, label, .form-control{
  font-size: 1.02rem;
}
p, .panel-body, .card-body{ color: var(--hh-ink2); }
small, .small, .text-muted{ font-size: .96rem !important; color: var(--hh-muted) !important; }

/* primary actions match the site button */
.btn-primary{
  background: var(--hh-primary) !important;
  border-color: var(--hh-primary) !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--hh-primary-2) !important;
  border-color: var(--hh-primary-2) !important;
}

/* nav: sentence case, pill hover, matching the site header */
.hh-menu .nav-link{
  font-weight: 600;
  border-radius: 999px;
  padding: .5em .95em !important;
  transition: background .15s, color .15s;
}
.hh-menu .nav-link:hover{ background: rgba(255,255,255,.07); color: #fff; }

.hh-made{ color: var(--hh-muted); font-size: .96rem; margin-top: .9rem; }

/* ---- header: the floating pill nav from herohoster.com ----
   WHMCS renders a full-width flat bar; the site uses a sticky rounded pill.
   Restyle the existing markup rather than rewriting the template. */
#header .header-btm{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 14px 4vw 0 !important;
  position: sticky; top: 14px; z-index: 50;
}
#header .header-btm > .container{
  max-width: min(1160px, 92vw) !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
#header .header-btm > .container > .d-flex{
  background: rgba(15,20,40,.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--hh-border);
  border-radius: 999px;
  padding: .62rem .7rem .62rem 1.4rem;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.6);
  gap: 1.5rem;              /* site: .nav{gap:1.5rem} */
}
/* the parent theme pads .mainmenu by 8px top and bottom, which makes the pill
   taller than the site's. The site pill is logo(30) + .62rem padding, nothing else. */
#header.header .mainmenu{ padding: 0 !important; margin-bottom: 0 !important; }
#header.header .logo img.hh-logo{
  width: auto !important; height: 30px !important; max-width: none !important;
}
#header.header .logo:hover{ transform: none; }

/* links sit beside the logo; the account actions get pushed right */
#header.header .mainmenu.navbar-collapse{
  margin-left: .6rem !important;      /* site: .nav-links{margin-left:.6rem} */
  margin-right: 0 !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
}
#header.header .hh-menu.navbar-nav{ width: 100%; gap: .35rem; }  /* site: .nav-links{gap:.35rem} */
#header.header .hh-menu .hh-clientarea-btn{ margin-left: auto; }
/* site: .nav-right{gap:.6rem} */
#header.header .hh-menu .hh-cart,
#header.header .hh-menu .hh-cta{ margin-left: .6rem; }
#header.header .hh-menu .nav-item{ display: flex; align-items: center; }

/* nav links: same size and colour as the site, pill hover instead of blue text */
#header.header .hh-menu > li > a,
#header.header .hh-menu .nav-link{
  color: #dfe4fb !important;
  font-weight: 600;
  font-size: 1rem !important;
  padding: .5em .95em !important;
  border-radius: 999px;
  transition: color .15s, background .15s;
}
#header.header .hh-menu > li > a:hover,
#header.header .hh-menu .nav-link:hover{
  color: #fff !important;
  background: rgba(255,255,255,.07);
}

/* Client area reads as a quiet ghost link, like the site */
#header.header .hh-clientarea-btn .nav-link{
  border: 0 !important;
  background: none !important;
  color: #dfe4fb !important;
  font-size: .95rem !important;
  display: inline-flex; align-items: center; gap: .4rem;
}
#header.header .hh-clientarea-btn .nav-link:hover{
  background: rgba(255,255,255,.07) !important; color:#fff !important;
}
.hh-ico{ width: 17px; height: 17px; flex: none; }

/* and the primary action is a filled pill */
#header.header .hh-cta .nav-link{
  background: var(--hh-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: .72em 1.3em !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
#header.header .hh-cta .nav-link:hover{ background: var(--hh-primary-2) !important; }
#header.header .hh-cta .nav-link span{ display:inline-block; transition: transform .18s ease; }
#header.header .hh-cta .nav-link:hover span{ transform: translateX(3px); }

#header.header .hh-cart .nav-link{ padding: .5em .7em !important; }
.hh-cart .badge{ background: var(--hh-primary) !important; color:#fff !important; }

@media (max-width: 1199px){
  #header .header-btm{ position: static; padding: 12px 3vw 0 !important; }
  #header .header-btm > .container > .d-flex{ border-radius: 20px; padding: .7rem 1rem; }
}

/* real errors read red; WHMCS uses alert-warning for friendly prompts like
   "Have questions? Contact our sales team", which should not look like a fault */
.alert-danger{
  background: rgba(255,85,102,.10) !important;
  border: 1px solid rgba(255,85,102,.35) !important;
  color: #ffc9cf !important;
}
.alert-warning, .alert-info{
  background: rgba(59,107,255,.10) !important;
  border: 1px solid rgba(59,107,255,.30) !important;
  color: var(--hh-ink2) !important;
}
.alert-warning a, .alert-info a{ color: #8DA4E8 !important; font-weight: 600; }

/* ---- checkout: drop the LEFT domain sidebar only ----
   The order form has TWO sidebars and they are easy to confuse:
     .cart-sidebar            = LEFT  (Categories / Register a Domain) -> remove
     .secondary-cart-sidebar  = RIGHT (Order Summary + Continue)       -> KEEP
   Hiding the second one removes the checkout button entirely. It is laid out
   with floats, so the body column needs width:100%;float:none rather than any
   flex override. */
#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar-collapsed{ display: none !important; }
#order-standard_cart .cart-body{ width: 100% !important; float: none !important; }

/* ---- order form: the standard_cart stylesheet is built for a LIGHT theme ----
   It hardcodes #fff item rows, #058 headers and a green success button, none of
   which survive on a dark background. Repaint them with the site tokens. */
#order-standard_cart .view-cart-items-header{
  background: var(--hh-surface-2) !important;
  color: #fff !important;
  border: 1px solid var(--hh-border) !important;
  border-bottom: 0 !important;
  border-radius: var(--hh-radius) var(--hh-radius) 0 0 !important;
}
#order-standard_cart .view-cart-items{
  border: 1px solid var(--hh-border) !important;
  border-radius: 0 0 var(--hh-radius) var(--hh-radius);
  overflow: hidden;
}
#order-standard_cart .view-cart-items .item{
  background: var(--hh-surface) !important;
  color: var(--hh-ink2) !important;
  border-bottom: 1px solid var(--hh-border) !important;
}
#order-standard_cart .view-cart-items .item:last-child{ border-bottom: 0 !important; }
#order-standard_cart .view-cart-items .item:nth-child(even){
  background: #12182f !important;
}
#order-standard_cart .view-cart-items .item strong,
#order-standard_cart .view-cart-items .item b,
#order-standard_cart .view-cart-items .item .item-title{ color: #fff !important; }

/* tabs and the promo panel */
#order-standard_cart .view-cart-tabs .tab-content{
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-border) !important;
  border-radius: 0 var(--hh-radius) var(--hh-radius) var(--hh-radius);
}
#order-standard_cart .view-cart-tabs .nav-tabs{ border-bottom: 0 !important; }
#order-standard_cart .view-cart-tabs .nav-tabs > li > a,
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link{
  background: var(--hh-surface-2) !important;
  color: var(--hh-ink2) !important;
  border: 1px solid var(--hh-border) !important;
  border-bottom: 0 !important;
  border-radius: var(--hh-radius) var(--hh-radius) 0 0 !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs .active > a,
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active{ color: #fff !important; }

/* order summary panel */
#order-standard_cart .order-summary{
  background: transparent !important;
  border-bottom: 0 !important;
}
#order-standard_cart .summary-container{
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-border) !important;
  border-radius: var(--hh-radius) !important;
  color: var(--hh-ink2) !important;
}
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals,
#order-standard_cart .order-summary .summary-totals{
  border-color: var(--hh-border) !important;
}

/* the checkout button ships green; make it the brand accent like every other CTA */
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-success{
  background: var(--hh-primary) !important;
  border-color: var(--hh-primary) !important;
  color: #fff !important;
}
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-success:hover{
  background: var(--hh-primary-2) !important;
  border-color: var(--hh-primary-2) !important;
}
#order-standard_cart .btn-checkout.disabled,
#order-standard_cart .btn-checkout:disabled{ opacity: .5; }

/* secondary buttons (Validate Code, Update Totals, Empty Cart) */
#order-standard_cart .btn-default{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--hh-border) !important;
  color: var(--hh-ink2) !important;
}
#order-standard_cart .btn-default:hover{
  background: rgba(255,255,255,.11) !important;
  color: #fff !important;
}
#order-standard_cart .empty-cart .btn{
  background: rgba(255,85,102,.14) !important;
  border: 1px solid rgba(255,85,102,.34) !important;
  color: #ffc9cf !important;
}
#order-standard_cart .btn-continue-shopping{ color: #8DA4E8 !important; }

/* the breadcrumb only ever says "Shopping Cart"; the site has no breadcrumbs */
.master-breadcrumb{ display: none !important; }
#main-body{ padding-top: 1.5rem; }