/* =========================================================
   Advantage Hosting (Neve) consistency overrides for WHMCS HostX
   Scope: /client (HostX child template)
   Goals:
   - Match WordPress Neve header/nav look & feel
   - Keep HostX logged-in/out menu logic intact
   - Reliable desktop + mobile navigation (hamburger + accordions)
   ========================================================= */

/* ------------------------------
   1) Brand tokens (single source)
   ------------------------------ */
:root {
  --ah-nav-bg: #8da5d7;
  --ah-accent: #fb4400;
  --ah-font: "Open Sans", Arial, Helvetica, sans-serif;
  --ah-container: 1200px;
}

/* ------------------------------
   2) Global typography
   ------------------------------ */
html, body, button, input, select, textarea{
  font-family: var(--ah-font) !important;
}

/* ------------------------------
   3) Header / footer base colors
   ------------------------------ */
.nav_bar,
.header,
.header.wgs-new-header-top,
.footer,
.copyright{
  background-color: var(--ah-nav-bg) !important;
  color: #fff !important;
}

.copyright{
  background-color: var(--ah-nav-bg) !important;
}

/* Make links in header/nav white by default */
.nav_bar a,
.header a,
.nav_bar .navbar-nav > li a{
  color:#fff !important;
}

/* Top-level hover: red text only (no white background flashes) */
.nav_bar .navbar-nav > li > a:hover,
.nav_bar .navbar-nav > li > a:focus,
.nav_bar .navbar-nav > li > a.active{
  color: var(--ah-accent) !important;
  background: transparent !important;
  border-top-color: var(--ah-accent) !important;
}

/* ------------------------------
   4) Neve-like menu typography
   ------------------------------ */
.nav_bar .navbar-nav > li > a,
#mainNavbarCollapse .navbar-nav > li > a,
.nav_bar ul ul li > a,
#mainNavbarCollapse ul ul li > a{
  font-family: var(--ah-font) !important;
  font-size: 1em !important;
  line-height: 1.6em !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* ------------------------------
   5) Dropdown styling (blue panel, hover = red text only)
   ------------------------------ */

/* All dropdown panels */
.nav_bar .dropdown-menu,
.nav_bar ul ul,
#mainNavbarCollapse .dropdown-menu,
#mainNavbarCollapse ul ul{
  background-color: var(--ah-nav-bg) !important;
  border-color: rgba(255,255,255,.25) !important;
}

/* Ensure rows don't paint white */
.nav_bar ul ul li,
#mainNavbarCollapse ul ul li{
  background: transparent !important;
}

/* Links fill full row but remain transparent so blue shows through */
.nav_bar ul ul li > a,
#mainNavbarCollapse ul ul li > a,
.nav_bar .dropdown-menu a,
#mainNavbarCollapse .dropdown-menu a{
  display:block !important;
  width:100% !important;
  padding: 10px 18px !important;
  color:#fff !important;
  background: transparent !important;
}

/* Hover: red text only */
.nav_bar ul ul li:hover > a,
.nav_bar ul ul li:focus-within > a,
#mainNavbarCollapse ul ul li:hover > a,
#mainNavbarCollapse ul ul li:focus-within > a,
.nav_bar .dropdown-menu a:hover,
.nav_bar .dropdown-menu a:focus,
#mainNavbarCollapse .dropdown-menu a:hover,
#mainNavbarCollapse .dropdown-menu a:focus{
  color: var(--ah-accent) !important;
  background: transparent !important;
}

/* ------------------------------
   6) Remove icons inside menu items (WP doesn't show them)
   ------------------------------ */
#hostx-drop-down-menus i,
#hostx-drop-down-menus svg,
#hostx-drop-down-menus img.sub-menu-img-icon-drop-menu,
#hostx-drop-down-menus img.child-menu-img-icon-drop-menu{
  display:none !important;
}

/* ------------------------------
   7) Hide HostX "Domain Search" megamenu item
   ------------------------------ */
.nav_bar li.menu-last-btn,
.nav_bar .navbar-nav > li.menu-last-btn,
#mainNavbarCollapse li.menu-last-btn,
#mainNavbarCollapse .navbar-nav > li.menu-last-btn{
  display:none !important;
}
/* Also hide the form button if it appears elsewhere */
#mainNavbarCollapse .btn.btn-default.domain-search-bn{
  display:none !important;
}

/* ------------------------------
   8) Desktop layout: logo left, menu right, contained width
   ------------------------------ */
@media (min-width: 992px){
  .nav_bar > .container,
  .nav_bar .container.ah-nav-container,
  .nav_bar .container{
    max-width: var(--ah-container) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:15px !important;
    padding-right:15px !important;
  }

  .ah-nav-container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:14px;
  }

  .ah-nav-logo{
    flex: 0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
  }

  /* Keep collapse inline on desktop */
  #mainNavbarCollapse,
  .nav_bar .navbar-collapse{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:auto !important;
    padding:0 !important;
    margin:0 !important;
    background: transparent !important;
    position: static !important;
    box-shadow:none !important;
  }

  /* UL must NOT be 100% width */
  #hostx-drop-down-menus,
  #hostx-drop-down-menus.w100p,
  ul#hostx-drop-down-menus.ddnavbar.navbar-nav.w100p{
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    margin:0 0 0 auto !important;
    padding:0 !important;
  }

  /* Hide hamburger on desktop */
  .ah-nav-toggle,
  .navbar-toggler,
  .mobile-menu-toggle-drop{
    display:none !important;
  }
}

/* ------------------------------
   9) Dropdown alignment: under the parent (not centered)
   ------------------------------ */
#hostx-drop-down-menus > li{
  position: relative !important;
  text-align:left !important;
}

/* HostX uses ul.submenu for dropdowns */
#hostx-drop-down-menus > li.dropdown-menu-default-open-on-hover > ul.submenu{
  position: absolute !important;
  top:100% !important;
  left:0 !important;
  right:auto !important;
  transform:none !important;
  margin:0 !important;
  text-align:left !important;
}

/* Kill inline centering styles if injected */
#hostx-drop-down-menus > li.dropdown-menu-default-open-on-hover > ul.submenu[style]{
  left:0 !important;
  right:auto !important;
  transform:none !important;
}

/* Last item can open from right edge to avoid off-screen */
@media (min-width: 992px){
  #hostx-drop-down-menus > li.dropdown-menu-default-open-on-hover:last-child > ul.submenu{
    left:auto !important;
    right:0 !important;
  }
}

/* ------------------------------
   10) Mobile: hamburger, collapse panel drops below bar
   ------------------------------ */
@media (max-width: 991.98px){
  .nav_bar{ position: relative !important; }

  /* Container row: logo left, hamburger right */
  .ah-nav-container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:12px;
  }
  .ah-nav-logo{ flex: 0 0 auto !important; }
  .ah-nav-toggle{ flex: 0 0 auto !important; margin-left:auto !important; }

  /* Show hamburger */
  .ah-nav-toggle,
  .nav_bar .navbar-toggler{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure the toggler icon is visible (bootstrap-like) */
  .nav_bar .navbar-toggler{
    border: 1px solid rgba(255,255,255,.35) !important;
    padding: 8px 10px !important;
    background: transparent !important;
  }
  .nav_bar .navbar-toggler-icon{
    display:block;
    width: 24px;
    height: 18px;
    background: linear-gradient(#fff,#fff) center/100% 2px no-repeat;
    position: relative;
  }
  .nav_bar .navbar-toggler-icon:before,
  .nav_bar .navbar-toggler-icon:after{
    content:"";
    position:absolute;
    left:0; right:0;
    height:2px;
    background:#fff;
  }
  .nav_bar .navbar-toggler-icon:before{ top:0; }
  .nav_bar .navbar-toggler-icon:after{ bottom:0; }

  /* Collapse panel: overlay BELOW the bar (prevents logo being pushed down) */
  #mainNavbarCollapse{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    width:100% !important;
    background: var(--ah-nav-bg) !important;
    z-index: 9999 !important;
    padding: 10px 15px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
  }

  /* Bootstrap collapse show/hide */
  #mainNavbarCollapse.collapse{ display:none !important; }
  #mainNavbarCollapse.collapse.show,
  #mainNavbarCollapse.collapse.in{ display:block !important; }

  /* Mobile UL becomes vertical */
  #hostx-drop-down-menus{
    display:block !important;
    width:100% !important;
    white-space: normal !important;
    margin:0 !important;
    padding:0 !important;
  }
  #hostx-drop-down-menus > li{ width:100% !important; }
  #hostx-drop-down-menus > li > a{
    display:flex !important;
    width:100% !important;
    padding: 12px 8px !important;
  }

  /* Hide any legacy 3-bar div toggle to avoid duplicates */
  .mobile-menu-toggle-drop{ display:none !important; }
}

/* ------------------------------
   11) Mobile submenu behavior
   - expects JS to toggle .ah-open on the <li>
   - prevents hover rules from fighting touch
   ------------------------------ */
@media (max-width: 991.98px){
  /* Close by default */
  #hostx-drop-down-menus ul.submenu,
  #hostx-drop-down-menus ul.childsubmenu{
    display:none !important;
    position: static !important;
    transform:none !important;
    width:100% !important;
    margin:0 !important;
    padding: 6px 0 10px 0 !important;
    background: var(--ah-nav-bg) !important;
  }

  /* Open when JS adds .ah-open */
  #hostx-drop-down-menus li.ah-open > ul.submenu,
  #hostx-drop-down-menus li.ah-open > ul.childsubmenu{
    display:block !important;
  }

  /* Neutralize hover-open on touch widths */
  #hostx-drop-down-menus > li:hover > ul.submenu{
    display:none !important;
  }
  #hostx-drop-down-menus > li.ah-open:hover > ul.submenu{
    display:block !important;
  }

  /* Toggle button styling */
  #hostx-drop-down-menus > li{ position: relative !important; }
  #hostx-drop-down-menus ul.submenu > li.drop-down-have-child{ position: relative !important; }

  .ah-subtoggle{
    position:absolute;
    right:6px;
    top:6px;
    width:42px;
    height:42px;
    border:0;
    background:transparent;
    color:#fff;
    z-index: 99999 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .ah-subtoggle:before{
    content:"▾";
    display:block;
    text-align:center;
    line-height:42px;
    font-size:18px;
  }

  /* Give links room so caret doesn't overlap */
  #hostx-drop-down-menus li > a{ padding-right: 52px !important; }
}

/* ------------------------------
   12) Mobile utilities inside the opened panel
   (social + phone/cart/account)
   ------------------------------ */
/* Never show on desktop */
.ah-mobile-utilities{ display:none !important; }

@media (max-width: 991.98px){
  #mainNavbarCollapse .ah-mobile-utilities{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 8px 0 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.25);
    margin-bottom: 10px;
  }

  .ah-mobile-utils{
    display:flex;
    align-items:center;
    gap:14px;
  }

  .ah-mobile-utils .ah-mu{
    color:#fff !important;
    font-size:18px;
    text-decoration:none !important;
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:6px;
    background: rgba(255,255,255,.10);
  }
}

/* Social squares (Font Awesome) */
.ah-social-icons{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:10px;
}
.ah-social-icons .ah-soc{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:5px;
  color:#fff !important;
  text-decoration:none !important;
  line-height:1;
}
.ah-social-icons .ah-soc i{ font-size:14px; }

.ah-social-icons .ah-fb{ background:#3b5998; }
.ah-social-icons .ah-x{ background:#000; }     /* use fab fa-twitter if FA6 isn't present */
.ah-social-icons .ah-bsky{ background:#1185fe; }
.ah-social-icons .ah-ig{ background:#e1306c; }
.ah-social-icons .ah-li{ background:#0072b1; }

/* If you are using Neve's SVG list anywhere, make the SVG visible */
.nv-social-icons-list{ list-style:none; margin:0; padding:0; display:flex; gap:10px; }
.nv-social-icons-list a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--iconpadding,5px);
  line-height:1;
  border-radius: var(--borderradius,5px);
  text-decoration:none !important;
  color:#fff !important;
}
.nv-social-icons-list svg{
  width:16px !important;
  height:16px !important;
  display:block !important;
  fill: currentColor !important;
}

/* ------------------------------
   13) Buttons: match Neve accent
   ------------------------------ */
.btn-primary,
.btn-danger,
#order-standard_cart .domain-input-group .btn-primary,
#btnDomainContinue,
.domain .search_box .submit,
.c-support-btn .button03,
.register-domain-section .right .search_domain .search_domain_in .btn,
.price_list .price_grid .button03,
.footer .footer_col .button03{
  background-color: var(--ah-accent) !important;
  border-color: var(--ah-accent) !important;
  color:#fff !important;
}

.btn-primary:hover,
.btn-danger:hover,
.price_list .price_grid .button03:hover,
.footer .footer_col .button03:hover{
  filter: brightness(0.92);
}

/* Accent text/icons (common HostX selectors) */
.unpaid,
.sale_price,
#tableInvoicesList td.sorting_1 span.textblack,
.domainResultsWithProducts .spotlight-tld .btn-add-to-cart span,
.hx-getstart-btn,
.hx_buybtn a,
.hx_plans-find a{
  color: var(--ah-accent) !important;
}

/* ------------------------------
   14) Hide WHMCS order-form mobile helper dropdowns
   (Categories / Actions on domain step)
   ------------------------------ */
@media (max-width: 991.98px){
  #order-standard_cart .products-filter,
  #order-standard_cart .product-filter,
  #order-standard_cart .sidebar-categories,
  #order-standard_cart .categories,
  #order-standard_cart .actions,
  #order-standard_cart .dataTables_length,
  #order-standard_cart .dataTables_filter{
    display:none !important;
  }
}

/* ------------------------------
   15) Small legacy cleanup
   ------------------------------ */
#mainfooterhostx{ display:none; }


/* ==========================================
   Submenu toggle buttons: invisible control
   - hidden on desktop
   - tappable on mobile (no border/background)
   ========================================== */

/* Nuke any theme button styling */
.ah-subtoggle{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

/* Desktop: don’t show them at all */
@media (min-width: 992px){
  .ah-subtoggle{ display:none !important; }
}

/* Mobile: keep tappable area but invisible */
@media (max-width: 991.98px){
  .ah-subtoggle{
    display:block !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Hide the caret glyph too (still clickable) */
  .ah-subtoggle:before{
    content:"" !important;
    display:none !important;
  }
}
@media (max-width: 991.98px){
  .ah-subtoggle:before{
    content:"▾" !important;
    display:block !important;
    color:#fff !important;
    opacity:.6 !important;
    font-size:16px !important;
    line-height:42px !important;
    text-align:center !important;
  }
}
/* ==========================================
   Hide top utility bar on mobile
   (utilities live inside hamburger menu)
   ========================================== */
@media (max-width: 991.98px){
  .ah-topbar,
  .header-top,
  .header-top-area,
  .wgs-new-header-top{
    display:none !important;
}
  body{
    padding-top: 0 !important;
  }
  .ah-subtoggle{
    pointer-events: auto !important;
    z-index: 99999 !important;
  }

  /* Make sure nothing in the menu row blocks taps */
  #mainNavbarCollapse,
  #hostx-drop-down-menus{
    pointer-events: auto !important;
  }
    #hostx-drop-down-menus ul.submenu,
  #hostx-drop-down-menus ul.childsubmenu{
    display:none !important;
  }
  #hostx-drop-down-menus li.ah-open > ul.submenu,
  #hostx-drop-down-menus li.ah-open > ul.childsubmenu{
    display:block !important;
  }
}
/* Never let menu icons intercept touch/clicks */
#hostx-drop-down-menus i,
#hostx-drop-down-menus img.sub-menu-img-icon-drop-menu,
#hostx-drop-down-menus img.child-menu-img-icon-drop-menu{
  pointer-events: none !important;
}
/* --- Mobile submenu toggles must remain tappable --- */
@media (max-width: 991.98px){
  .ah-subtoggle{
    display:block !important;          /* <- critical */
    background: transparent !important;
    border: 0 !important;
    box-shadow:none !important;
    outline:none !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
  }
}
@media (min-width: 992px){
  .ah-subtoggle{ display:none !important; }
}

/* --- Remove injected dropdown caret on menu items --- */
#mainNavbarCollapse #hostx-drop-down-menus > li > a.dropdown-toggle::after,
#mainNavbarCollapse #hostx-drop-down-menus > li > a.dropdown-toggle:after{
  content: none !important;
  display: none !important;
}

/* --- Hide ALL menu icons inside HostX nav (mobile + desktop) --- */
#mainNavbarCollapse #hostx-drop-down-menus i,
#mainNavbarCollapse #hostx-drop-down-menus img,
#mainNavbarCollapse #hostx-drop-down-menus svg{
  display:none !important;
}

/* Don’t let icons ever steal taps if something forces them visible */
#mainNavbarCollapse #hostx-drop-down-menus i,
#mainNavbarCollapse #hostx-drop-down-menus img,
#mainNavbarCollapse #hostx-drop-down-menus svg{
  pointer-events:none !important;
}

@media (max-width: 991.98px){
  .ah-subtoggle:before{
    content:"▾" !important;
    display:block !important;
    color:#fff !important;
    opacity:.75 !important;
    font-size:16px !important;
    line-height:42px !important;
    text-align:center !important;
  }
}
/* ==========================================
   MOBILE FALLBACK: open submenu on focus
   Works even if JS doesn't run on phones
   ========================================== */
@media (max-width: 991.98px){

  /* Default closed */
  #hostx-drop-down-menus > li > ul.submenu{
    display:none !important;
    position: static !important;
    transform:none !important;
    width:100% !important;
  }

  /* Open when focused (tap on parent link/button triggers focus on mobile) */
  #hostx-drop-down-menus > li:focus-within > ul.submenu{
    display:block !important;
  }

  /* If you have child submenus too */
  #hostx-drop-down-menus ul.submenu > li > ul.childsubmenu{
    display:none !important;
  }
  #hostx-drop-down-menus ul.submenu > li:focus-within > ul.childsubmenu{
    display:block !important;
  }

  /* Ensure tapping parent link actually creates focus */
  #hostx-drop-down-menus > li > a[data-has-submenu="1"]{
    -webkit-tap-highlight-color: transparent;
  }

  /* Make toggle button focusable too */
  .ah-subtoggle{
    display:block !important;
    background:transparent !important;
    border:0 !important;
    pointer-events:auto !important;
  }
  /* Hard kill menu icons (HostX sprites + FA) */
#mainNavbarCollapse #hostx-drop-down-menus i,
#mainNavbarCollapse #hostx-drop-down-menus img{
  display:none !important;
}
#order-standard_cart .sidebar-collapsed {
    display:none;
}
}

.shoping-cart-background {
 display: none;
}

/* Hard-hide menu item icons everywhere */
#hostx-drop-down-menus i,
#hostx-drop-down-menus img.sub-menu-img-icon-drop-menu,
#hostx-drop-down-menus img.child-menu-img-icon-drop-menu{
  display:none !important;
}
/* Remove injected caret */
#hostx-drop-down-menus > li > a.dropdown-toggle::after,
#hostx-drop-down-menus > li > a.dropdown-toggle:after{
  content:none !important;
  display:none !important;
}
/* Remove injected caret */
#hostx-drop-down-menus > li > a.dropdown-toggle::after,
#hostx-drop-down-menus > li > a.dropdown-toggle:after{
  content:none !important;
  display:none !important;
}

/*#mainNavbarCollapse.collapse { display:none !important; }
#mainNavbarCollapse.collapse.show { display:block !important; } */

/* Allow bootstrap collapse to work on mobile */
@media (max-width: 991.98px){
  #mainNavbarCollapse{ display:block; }          /* base */
  #mainNavbarCollapse.collapse:not(.show):not(.in){ display:none !important; }
  #mainNavbarCollapse.collapse.show,
  #mainNavbarCollapse.collapse.in{ display:block !important; }
}
@media (max-width: 991.98px){
  #hostx-drop-down-menus > li.dropdown-menu-default-open-on-hover:hover > ul.submenu{
    display:none !important;
  }
}
/* Ensure our iOS dropdown toggle shows the menu */
#hostx-drop-down-menus > li.dropdown.show > ul.dropdown-menu{
  display:block !important;
}
/* Ensure right utilities in topbar don't inherit blue styles */
.ah-header-two-row .ah-topbar .right_navi a{
  color:#111 !important;
}

 /* Two-row header structure to match Neve layout */
.ah-header-two-row .ah-topbar{
  background:#fff !important;
}

.ah-header-two-row .ah-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 0;
}

.ah-header-two-row .ah-social{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:12px;
}

.ah-header-two-row .ah-social a{
  color:#111 !important;
  font-size:14px;
}

.ah-header-two-row .ah-social a:hover{
  color:var(--ah-accent) !important;
}

/* Main blue row */
.ah-header-two-row .ah-mainbar{
  background:var(--ah-nav-bg) !important;
}

.ah-header-two-row .inner-area-drop-down-menu{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Ensure right utilities in topbar don't inherit blue styles */
.ah-header-two-row .ah-topbar .right_navi a{
  color:#111 !important;
}

.ah-header-two-row .ah-topbar .right_navi a:hover{
  color:var(--ah-accent) !important;
}

/* Keep mainbar links white, hover red */
.ah-header-two-row .ah-mainbar a{
  color:#fff !important;
}
.ah-header-two-row .ah-mainbar a:hover{
  color:var(--ah-accent) !important;
}

/* ==========================================
   TOP BAR utility nav spacing + cart badge
   ========================================== */

.ah-topbar-right .right_navi{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap: 12px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  float:none !important;
}

.ah-topbar-right .right_navi > li{
  float:none !important;
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}

/* Phone link: icon + text aligned */
.ah-topbar-right .right_navi a.telephoneanchor{
  display:flex !important;
  align-items:center !important;
  gap: 8px !important;
  white-space:nowrap !important;
}

/* Client/cart icon links: give them a consistent click target */
.ah-topbar-right .right_navi > li.hover > a,
.ah-topbar-right .right_navi > li.cart-view-list > a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  padding: 6px 8px !important;
}

/* Pin the cart bubble to the cart icon */
.ah-topbar-right .right_navi > li.cart-view-list > a{
  position:relative !important;
  gap: 0 !important;
}

.ah-topbar-right #cartItemCount{
  position:absolute !important;
  top: -6px !important;
  right: -8px !important;
  margin:0 !important;
  float:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

/* Optional: keep the top bar from wrapping too early */
.ah-topbar .ah-topbar-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 12px !important;
  flex-wrap:wrap !important;
}

.ah-mobile-utilities .ah-topbar-left{
  margin:0 !important;
  padding:0 !important;
}
.inner-area-user-details {
    margin-top:40px;
}
.whmcs-client-area-header .navbar.navbar-light {
  background: #8da5d7;
}
.right-list-client-detail > li.account > a {
    color: #fff;
}
.domain {
  background-color: #fff;
}
#order-standard_cart .cart-sidebar {
  top: 30px;
}

#order-standard_cart .cart-body {
  top: 30px;
}
#order-standard_cart .products .product header span {
font-weight: 700;
font-size: 24px;
}
#order-standard_cart .products .product header {
  background: #8da5d7!important;
  color: #fff!important;
}
#order-standard_cart .products .product {
    padding: 0 0 10px 0!important;
  border: 1px solid #000!important;
}
span.price {
  font-weight: 700;
}
.discount_center-standard_cart_product_price {
  color: #f92323;
	font-weight: 600;
}
.btn-success:hover {
  color: #fff;
  background-color: #8da5d7;
  border-color: #8da5d7;
}
.btn-success {
  color: #8da5d7;
  background-color: #fff;
  border-color: #8da5d7;
}
/* Regular (pre-sale) price */
.product-pricing .price-old {
    text-decoration: line-through!important;
    color: #888;               /* muted gray */
    font-weight: 400;
    margin-right: 6px;
    opacity: 0.8;
}

/* Sale price */
.product-pricing .price-sale {
    color: #d32f2f;             /* strong red */
    font-weight: 700;
    font-size: 1.1em;           /* slight emphasis */
}

/* Optional: tighten spacing */
.product-pricing .price-old,
.product-pricing .price-sale {
    display: inline-block;
    vertical-align: middle;
}
/* Allow dropdown to size to content */
#hostx-drop-down-menus .submenu.dropdown-menu {
    min-width: 220px;           /* wider base */
    width: auto;
    max-width: 420px;           /* optional safety cap */
    height: auto;
    overflow: visible;          /* stop clipping */
}

/* Allow text to wrap instead of cut off */
#hostx-drop-down-menus .submenu .dropdown-item {
    white-space: normal;
    line-height: 1.4;
    padding: 8px 15px;
}
#hostx-drop-down-menus .submenu.dropdown-menu {
    word-wrap: break-word;
}
#hostx-drop-down-menus .submenu.dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}