/**
 * ============================================================================
 * HOST ME IRELAND 2026 — WHMCS THEME
 * ============================================================================
 *
 * Definitive dark theme for clients.hostme.ie
 * Target: WHMCS Twenty-One template (Bootstrap 4.5.3)
 * Brand:  Dark theme, purple primary (#7c5bb5), Inter typography
 *
 * Architecture: Global dark reset first, then layered specifics.
 *
 * HOW TO APPLY:
 *   Upload to /templates/twenty-one/css/custom.css
 *   (Twenty-One auto-loads custom.css if present)
 */


/* ==========================================================================
   0. GOOGLE FONTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Surfaces */
  --hmi-bg:             #0f0e17;
  --hmi-bg-raised:      #141320;
  --hmi-card:           #1a1828;
  --hmi-secondary:      #252336;

  /* Brand */
  --hmi-primary:        #7c5bb5;
  --hmi-primary-hover:  #8e6bc7;
  --hmi-primary-muted:  rgba(124, 91, 181, 0.15);
  --hmi-primary-ring:   rgba(124, 91, 181, 0.35);
  --hmi-accent:         #25da6a;

  /* Text */
  --hmi-text:           #fffffe;
  --hmi-text-muted:     #94a1b2;
  --hmi-text-faint:     #6b7280;

  /* Borders */
  --hmi-border:         #3a3650;
  --hmi-border-subtle:  #2e2b42;

  /* Status */
  --hmi-success:        #25da6a;
  --hmi-warning:        #f5a623;
  --hmi-danger:         #ff6b6b;
  --hmi-info:           #3498db;

  /* Radii */
  --hmi-radius:         12px;
  --hmi-radius-sm:      8px;
  --hmi-radius-xs:      6px;

  /* Shadows */
  --hmi-shadow:         0 2px 8px rgba(0, 0, 0, 0.25);
  --hmi-shadow-lg:      0 4px 16px rgba(0, 0, 0, 0.35);

  /* Bootstrap overrides */
  --primary:            #252336 !important;
  --white:              #1a1828 !important;
  --light:              #252336 !important;
}


/* ==========================================================================
   2. GLOBAL DARK RESET
   ========================================================================== */

/* --- 2a. Body base --- */

body {
  background-color: var(--hmi-bg) !important;
  color: var(--hmi-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

/* --- 2b. Global nuclear background reset --- */

#main-body *,
.secondary-cart-body *,
.primary-content *,
.cart-body *,
.domain-renewals *,
article *,
.md-editor * {
  background-color: transparent;
  color: inherit;
}

/* --- 2c. Force dark on all Bootstrap white/light utilities --- */

.bg-white,
.bg-light,
body .bg-white,
body .bg-light,
#main-body .bg-white,
#main-body .bg-light,
.primary-content .bg-white,
.primary-content .bg-light,
.secondary-cart-body .bg-white,
.secondary-cart-body .bg-light,
.cart-body .bg-white,
.cart-body .bg-light {
  background-color: var(--hmi-card) !important;
  background: var(--hmi-card) !important;
  color: var(--hmi-text) !important;
}

/* --- 2d. Links --- */

a {
  color: var(--hmi-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--hmi-primary-hover) !important;
  text-decoration: none !important;
}

/* --- 2e. Headings --- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--hmi-text) !important;
}

/* --- 2f. Text utilities --- */

.text-muted,
.text-black-50 {
  color: var(--hmi-text-muted) !important;
}

.text-dark {
  color: var(--hmi-text) !important;
}

.text-primary {
  color: var(--hmi-primary) !important;
}

p {
  color: var(--hmi-text);
}

/* --- 2g. Horizontal rules --- */

hr {
  border-top-color: var(--hmi-border-subtle) !important;
}

/* --- 2h. Code blocks --- */

code,
pre {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-primary) !important;
  border-radius: var(--hmi-radius-xs);
}

pre {
  padding: 1rem !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius-sm) !important;
}

code {
  padding: 0.15em 0.4em !important;
}

/* --- 2i. Global text color catch-all --- */

td, th {
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   3. LAYOUT WRAPPERS
   ========================================================================== */

.outer-wrapper,
.inner-wrapper,
.main-content,
.primary-content,
#main-body {
  background-color: var(--hmi-bg) !important;
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   4. HEADER — TOPBAR (.hmi-topbar)
   ========================================================================== */

.hmi-topbar {
  background-color: var(--hmi-bg-raised) !important;
  height: 32px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hmi-border-subtle);
  padding: 0 1rem;
}

.hmi-topbar a {
  color: var(--hmi-text-muted) !important;
  font-size: 0.8rem;
}

.hmi-topbar a:hover {
  color: var(--hmi-text) !important;
}

.hmi-topbar .active-client {
  color: var(--hmi-text-muted) !important;
}

.hmi-topbar .input-group-text,
.hmi-topbar .btn {
  background-color: transparent !important;
  border: none !important;
  color: var(--hmi-text-muted) !important;
  padding: 2px 6px;
  font-size: 0.8rem;
}

.hmi-topbar .notifications {
  color: var(--hmi-text-muted) !important;
}


/* ==========================================================================
   5. HEADER — NAVBAR (.hmi-navbar)
   ========================================================================== */

.hmi-navbar {
  height: 56px;
  background-color: var(--hmi-card) !important;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  border-bottom: 1px solid var(--hmi-border-subtle);
  position: relative;
  z-index: 1000;
}

/* --- Logo --- */

.hmi-logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  flex-shrink: 0;
}

.hmi-logo-area:hover {
  text-decoration: none !important;
}

.hmi-logo-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.hmi-logo-text {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--hmi-text) !important;
  white-space: nowrap;
}

/* --- Nav Links --- */

.hmi-nav-links {
  display: flex;
  flex-direction: row;
  gap: 2px;
  flex: 1;
  flex-wrap: nowrap;
  margin-left: 1rem;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  align-items: center;
}

.hmi-nav-item {
  list-style: none;
  flex-shrink: 0;
}

.hmi-nav-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--hmi-text-muted) !important;
  padding: 6px 12px;
  border-radius: var(--hmi-radius-xs);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.hmi-nav-link:hover {
  color: var(--hmi-text) !important;
  background-color: var(--hmi-primary-muted) !important;
}

.hmi-nav-link i {
  font-size: 14px;
}

.hmi-nav-link.dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}

/* --- Dropdowns --- */

.hmi-dropdown {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  box-shadow: var(--hmi-shadow-lg);
  border-radius: var(--hmi-radius-sm);
  padding: 4px 0;
}

.hmi-dropdown .dropdown-item {
  color: var(--hmi-text-muted) !important;
  padding: 8px 16px;
  font-size: 0.85rem;
}

.hmi-dropdown .dropdown-item:hover {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text) !important;
}

/* --- Icon-only buttons --- */

.hmi-nav-icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text-muted) !important;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.hmi-nav-icon-btn:hover {
  color: var(--hmi-text) !important;
}

.hmi-open-ticket {
  background-color: var(--hmi-primary-muted) !important;
  color: var(--hmi-primary) !important;
}

.hmi-open-ticket:hover {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

/* --- Expandable Search --- */

.hmi-search-expandable {
  display: flex;
  align-items: center;
  position: relative;
}

.hmi-search-trigger {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text-muted) !important;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.hmi-search-expand-input {
  width: 0;
  opacity: 0;
  padding: 0;
  border: none;
  background-color: var(--hmi-secondary);
  color: var(--hmi-text);
  border-radius: var(--hmi-radius-xs);
  font-size: 0.85rem;
  transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.hmi-search-expandable:hover .hmi-search-expand-input,
.hmi-search-expandable:focus-within .hmi-search-expand-input {
  width: 200px;
  opacity: 1;
  padding: 6px 12px;
  margin-left: 6px;
  border: 1px solid var(--hmi-border);
}

.hmi-search-expandable:focus-within .hmi-search-expand-input {
  border-color: var(--hmi-primary);
  box-shadow: 0 0 0 2px var(--hmi-primary-ring);
}

/* --- Cart Button --- */

.hmi-cart-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text-muted) !important;
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.hmi-cart-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
  font-size: 0.65rem;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Account Button --- */

.hmi-account-btn {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.hmi-account-btn:hover {
  background-color: var(--hmi-primary-hover) !important;
  color: #fff !important;
}

/* --- Hamburger --- */

.hmi-hamburger {
  color: var(--hmi-text) !important;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  display: none;
}

/* --- Nav Right container --- */

.hmi-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}


/* ==========================================================================
   6. MOBILE NAV (.hmi-mobile-nav)
   ========================================================================== */

.hmi-mobile-nav {
  background-color: var(--hmi-card) !important;
  padding: 1rem;
  border-bottom: 1px solid var(--hmi-border-subtle);
  display: none;
}

.hmi-mobile-nav a {
  display: block;
  padding: 10px 16px;
  color: var(--hmi-text-muted) !important;
  font-size: 0.9rem;
  border-radius: var(--hmi-radius-xs);
}

.hmi-mobile-nav a:hover {
  color: var(--hmi-text) !important;
  background-color: var(--hmi-primary-muted) !important;
}


/* ==========================================================================
   7. BREADCRUMB
   ========================================================================== */

.hmi-breadcrumb,
.master-breadcrumb,
.breadcrumb {
  background-color: var(--hmi-bg-raised) !important;
  border: 1px solid var(--hmi-border-subtle) !important;
  border-radius: var(--hmi-radius-xs) !important;
  font-size: 0.8rem;
  padding: 8px 16px !important;
  margin-bottom: 1rem;
}

.breadcrumb-item,
.breadcrumb-item a {
  color: var(--hmi-text-muted) !important;
  font-size: 0.8rem;
}

.breadcrumb-item.active {
  color: var(--hmi-text-faint) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--hmi-text-faint) !important;
}


/* ==========================================================================
   8. DOMAIN SEARCH HERO (.hmi-domain-hero)
   ========================================================================== */

.hmi-domain-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, #1a1828 0%, rgba(124, 91, 181, 0.12) 50%, #1a1828 100%) !important;
}

/* --- Background grid --- */

.hmi-hero-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(var(--hmi-primary) 1px, transparent 1px),
    linear-gradient(90deg, var(--hmi-primary) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* --- Gradient orbs --- */

.hmi-hero-orb-tr {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 91, 181, 0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hmi-hero-orb-bl {
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 91, 181, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* --- Hero content --- */

.hmi-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

/* --- Search bar --- */

.hmi-search-bar {
  display: flex;
  max-width: 600px;
  margin: 1.5rem auto;
  border-radius: var(--hmi-radius);
  border: 2px solid var(--hmi-border);
  overflow: hidden;
  background-color: var(--hmi-secondary) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hmi-search-bar:focus-within {
  border-color: var(--hmi-primary);
  box-shadow: 0 0 0 3px var(--hmi-primary-ring);
}

.hmi-search-bar-input {
  flex: 1;
  background-color: transparent !important;
  border: none !important;
  padding: 14px 20px;
  color: var(--hmi-text) !important;
  font-size: 0.95rem;
  outline: none;
}

.hmi-search-bar-input::placeholder {
  color: var(--hmi-text-faint);
}

.hmi-search-btn {
  padding: 14px 24px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.hmi-btn-search {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.hmi-btn-search:hover {
  background-color: var(--hmi-primary-hover) !important;
}

.hmi-btn-transfer {
  background-color: transparent !important;
  color: var(--hmi-primary-hover) !important;
}

.hmi-btn-transfer:hover {
  background-color: var(--hmi-primary-muted) !important;
}

/* --- TLD prices --- */

.hmi-tld-prices {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--hmi-text-muted);
}

.hmi-tld-prices strong {
  color: var(--hmi-text) !important;
}

.hmi-pricing-link {
  color: var(--hmi-primary) !important;
}

/* --- Floating hero icons --- */

.hmi-hero-icon {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.hmi-hero-icon-cloud {
  width: 48px;
  height: 48px;
  top: 15%;
  right: 8%;
  animation: hmi-float-slow 8s ease-in-out infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5bb5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/%3E%3C/svg%3E");
}

.hmi-hero-icon-shield {
  width: 40px;
  height: 40px;
  top: 20%;
  left: 5%;
  animation: hmi-float-medium 6s ease-in-out infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5bb5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.hmi-hero-icon-server {
  width: 36px;
  height: 36px;
  bottom: 15%;
  left: 12%;
  animation: hmi-float-fast 4s ease-in-out infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5bb5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2' ry='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2' ry='2'/%3E%3Cline x1='6' y1='6' x2='6.01' y2='6'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3C/svg%3E");
}

.hmi-hero-icon-code {
  width: 32px;
  height: 32px;
  top: 50%;
  right: 4%;
  animation: hmi-float-slow 7s ease-in-out infinite;
  animation-delay: -3s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5bb5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

.hmi-hero-icon-globe {
  width: 38px;
  height: 38px;
  bottom: 30%;
  left: 3%;
  animation: hmi-float-medium 9s ease-in-out infinite;
  animation-delay: -2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5bb5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.hmi-hero-icon-wifi {
  width: 30px;
  height: 30px;
  bottom: 10%;
  right: 15%;
  animation: hmi-float-fast 5s ease-in-out infinite;
  animation-delay: -1s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5bb5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'/%3E%3C/svg%3E");
}

/* --- Float keyframes --- */

@keyframes hmi-float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(3deg); }
}

@keyframes hmi-float-medium {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-2deg); }
}

@keyframes hmi-float-fast {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}


/* ==========================================================================
   9. CARDS & PANELS
   ========================================================================== */

.card,
.panel,
.panel-default {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  box-shadow: var(--hmi-shadow);
  color: var(--hmi-text) !important;
  overflow: hidden;
}

.card-header,
.panel-heading {
  background-color: var(--hmi-secondary) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
  font-weight: 600;
}

.card-body,
.panel-body {
  background-color: transparent !important;
  color: var(--hmi-text) !important;
}

.card-footer,
.panel-footer {
  background-color: var(--hmi-secondary) !important;
  border-top: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

/* Card hover effect */
.card:hover {
  border-color: var(--hmi-primary) !important;
  transform: translateY(-4px);
  box-shadow: var(--hmi-shadow-lg), 0 0 20px var(--hmi-primary-muted) !important;
  transition: all 0.3s ease;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hmi-primary), var(--hmi-accent));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before {
  opacity: 1;
}

/* Dashboard accent cards */
.card-accent-blue  { border-left: 3px solid var(--hmi-info) !important; }
.card-accent-green { border-left: 3px solid var(--hmi-success) !important; }
.card-accent-red   { border-left: 3px solid var(--hmi-danger) !important; }
.card-accent-gold  { border-left: 3px solid var(--hmi-warning) !important; }


/* ==========================================================================
   10. HOMEPAGE PRODUCT CARDS
   ========================================================================== */

.card-columns.home .card {
  padding: 1.5rem !important;
  text-align: center;
}

.card-columns.home .card .btn-outline-primary {
  border: 2px solid var(--hmi-primary) !important;
  color: var(--hmi-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 20px;
  border-radius: var(--hmi-radius-sm);
  background-color: transparent !important;
  transition: all 0.2s ease;
}

.card-columns.home .card .btn-outline-primary:hover {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

/* How Can We Help icons */
.action-icon-btns a {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  color: var(--hmi-text) !important;
  transition: all 0.2s ease;
}

.action-icon-btns a:hover {
  border-color: var(--hmi-primary) !important;
  transform: translateY(-2px);
}

.ico-container {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--hmi-primary-muted) !important;
  color: var(--hmi-primary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}


/* ==========================================================================
   11. WHMCS ORDER FORM PRODUCT CARDS
   ========================================================================== */

.product.clearfix,
.product {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hmi-primary), var(--hmi-accent));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.product:hover::before {
  opacity: 1;
}

.product:hover {
  border-color: var(--hmi-primary) !important;
  box-shadow: var(--hmi-shadow-lg), 0 0 20px var(--hmi-primary-muted) !important;
  transform: translateY(-2px);
}

/* Product header */
.product > header {
  background-color: var(--hmi-secondary) !important;
  background-image: none !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--hmi-border) !important;
}

.product > header span,
.product > header * {
  color: var(--hmi-text) !important;
}

/* Product header icon */
.product > header::before {
  content: '\f466';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background-color: var(--hmi-primary-muted);
  color: var(--hmi-primary) !important;
  font-size: 16px;
  flex-shrink: 0;
}

/* Per-product icon overrides */
#product6 > header::before  { content: '\f233'; }
#product7 > header::before  { content: '\f2a0'; }
#product8 > header::before  { content: '\f7d9'; }
#product11 > header::before { content: '\f1c0'; }
#product12 > header::before { content: '\f0c2'; }

/* Product description */
.product-desc {
  padding: 1.25rem !important;
  flex: 1;
  width: 100%;
}

.product-desc p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--hmi-text-muted) !important;
}

.product-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-desc ul li {
  padding: 8px 0 8px 1.5rem;
  border-bottom: 1px solid var(--hmi-border-subtle);
  position: relative;
  color: var(--hmi-text) !important;
  font-size: 0.88rem;
}

.product-desc ul li::before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--hmi-accent);
  font-size: 0.75rem;
}

/* Product footer */
.product > footer {
  padding: 1rem 1.25rem !important;
  text-align: center;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--hmi-border-subtle);
}

/* Pricing */
.product-pricing,
div[id$="-price"] {
  text-align: center;
  width: 100%;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius-sm) !important;
  padding: 1rem !important;
  background-color: var(--hmi-primary-muted) !important;
  margin-bottom: 0.75rem;
}

.product-pricing .price,
div[id$="-price"] .price,
.price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--hmi-text) !important;
}

/* Order button */
.btn-order-now,
a[id$="-order-button"] {
  display: block !important;
  width: 100% !important;
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: var(--hmi-radius-sm) !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  transition: all 0.2s ease;
}

.btn-order-now:hover,
a[id$="-order-button"]:hover {
  background-color: var(--hmi-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--hmi-primary-ring);
}


/* ==========================================================================
   12. DASHBOARD — STAT TILES & PANELS
   ========================================================================== */

.tiles .tile {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s ease;
}

.tiles .tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--hmi-shadow-lg);
}

.tiles .tile .stat {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--hmi-primary) !important;
}

.tiles .tile .title {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hmi-text-muted) !important;
}

.tiles .tile .highlight {
  height: 3px;
  border-radius: 2px;
}

.tiles .tile .highlight.highlight-blue   { background-color: var(--hmi-info) !important; }
.tiles .tile .highlight.highlight-green  { background-color: var(--hmi-success) !important; }
.tiles .tile .highlight.highlight-red    { background-color: var(--hmi-danger) !important; }
.tiles .tile .highlight.highlight-gold,
.tiles .tile .highlight.highlight-orange { background-color: var(--hmi-warning) !important; }

/* Client home cards */
.client-home-cards .card {
  background-color: var(--hmi-card) !important;
}

.client-home-cards .card-header {
  background-color: var(--hmi-secondary) !important;
}

.client-home-cards .list-group-item {
  background-color: transparent !important;
  border-color: var(--hmi-border-subtle) !important;
  color: var(--hmi-text) !important;
}

.client-home-cards .badge {
  font-size: 0.75rem;
}


/* ==========================================================================
   13. BUTTONS
   ========================================================================== */

.btn {
  border-radius: var(--hmi-radius-sm) !important;
  font-weight: 500;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.btn-primary,
.btn-success {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover {
  background-color: var(--hmi-primary-hover) !important;
  border-color: var(--hmi-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--hmi-primary-ring);
}

.btn-default,
.btn-secondary,
.btn-light {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
  background-color: var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

.btn-danger {
  background-color: var(--hmi-danger) !important;
  border-color: var(--hmi-danger) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background-color: #ff4d4d !important;
  border-color: #ff4d4d !important;
  color: #fff !important;
}

.btn-info {
  background-color: var(--hmi-accent) !important;
  border-color: var(--hmi-accent) !important;
  color: #1a1828 !important;
}

.btn-info:hover {
  background-color: #1ec25c !important;
  border-color: #1ec25c !important;
  color: #1a1828 !important;
}

.btn-warning {
  background-color: var(--hmi-warning) !important;
  border-color: var(--hmi-warning) !important;
  color: #1a1828 !important;
}

.btn-warning:hover {
  background-color: #e69520 !important;
  border-color: #e69520 !important;
  color: #1a1828 !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  border: 2px solid var(--hmi-primary) !important;
  color: var(--hmi-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.btn-link {
  color: var(--hmi-primary) !important;
  text-decoration: none !important;
}

.btn-link:hover {
  color: var(--hmi-primary-hover) !important;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
}


/* ==========================================================================
   14. FORMS
   ========================================================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select,
.custom-select {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
  border-radius: var(--hmi-radius-sm) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus,
.custom-select:focus {
  border-color: var(--hmi-primary) !important;
  box-shadow: 0 0 0 3px var(--hmi-primary-ring) !important;
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text) !important;
  outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--hmi-text-faint) !important;
}

/* Input group addons */
.input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text-muted) !important;
}

/* Custom file input */
.custom-file-input ~ .custom-file-label {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

.custom-file-input ~ .custom-file-label::after {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
  border: none !important;
}

/* Checkboxes and radios */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
}

.custom-control-label::before {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
}

/* Switch */
.custom-switch .custom-control-label::before {
  background-color: var(--hmi-secondary) !important;
  border-color: var(--hmi-border) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
}

.custom-switch .custom-control-label::after {
  background-color: #fff !important;
}

/* Validation */
.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--hmi-danger) !important;
}

.is-valid,
.was-validated .form-control:valid {
  border-color: var(--hmi-success) !important;
}

.invalid-feedback {
  color: var(--hmi-danger) !important;
}

.valid-feedback {
  color: var(--hmi-success) !important;
}

label {
  color: var(--hmi-text) !important;
  font-weight: 500;
}


/* ==========================================================================
   15. TABLES & DATATABLES
   ========================================================================== */

.table {
  color: var(--hmi-text) !important;
}

.table thead th {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--hmi-border) !important;
  border-top: none !important;
}

/* Force ALL table body rows dark */
.table tbody tr,
.table tbody td,
.dataTable tbody tr,
.dataTable tbody td,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
table.dataTable tbody tr.odd td,
table.dataTable tbody tr.even td {
  background-color: var(--hmi-card) !important;
  color: var(--hmi-text) !important;
}

.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd) td {
  background-color: var(--hmi-secondary) !important;
}

.table tbody tr:hover,
.table tbody tr:hover td,
.table-hover tbody tr:hover,
.table-hover tbody tr:hover td {
  background-color: var(--hmi-primary-muted) !important;
  color: var(--hmi-text) !important;
}

.table td,
.table th {
  border-color: var(--hmi-border-subtle) !important;
  vertical-align: middle;
}

/* DataTables controls */
.dataTables_wrapper {
  color: var(--hmi-text) !important;
}

.dataTables_length select {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
  width: 60px !important;
  border-radius: var(--hmi-radius-xs) !important;
  padding: 4px 8px;
}

.dataTables_filter input {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
  border-radius: var(--hmi-radius-xs) !important;
  background-image: none !important;
  padding: 6px 12px;
}

.dataTables_filter input:focus {
  border-color: var(--hmi-primary) !important;
  box-shadow: 0 0 0 3px var(--hmi-primary-ring) !important;
}

.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
  color: var(--hmi-text-muted) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

/* Pagination for DataTables */
.dataTables_paginate .paginate_button {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text-muted) !important;
  border-radius: var(--hmi-radius-xs) !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button:hover {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.dataTables_paginate .paginate_button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed;
}

/* Sorting icons */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  color: var(--hmi-text-muted) !important;
  opacity: 0.6;
}


/* ==========================================================================
   16. SIDEBAR
   ========================================================================== */

.sidebar .card {
  background-color: var(--hmi-card) !important;
}

.sidebar .list-group-item {
  background-color: transparent !important;
  border-color: var(--hmi-border-subtle) !important;
  color: var(--hmi-text) !important;
  transition: all 0.15s ease;
}

.sidebar .list-group-item:hover {
  background-color: var(--hmi-secondary) !important;
}

.sidebar .list-group-item.active {
  background-color: var(--hmi-primary-muted) !important;
  border-left: 3px solid var(--hmi-primary) !important;
  color: var(--hmi-text) !important;
}

.sidebar h4,
.sidebar h5,
.sidebar h6,
.sidebar .card-header {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

/* Sidebar menu items */
.sidebar-menu-item-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  gap: 10px;
}

.sidebar-menu-item-icon {
  color: var(--hmi-primary) !important;
  width: 20px;
  text-align: center;
}

.sidebar-menu-item-label {
  color: var(--hmi-text) !important;
  flex: 1;
}

.sidebar-menu-item-badge {
  color: var(--hmi-text-muted) !important;
  font-size: 0.75rem;
}

/* Sidebar buttons */
.sidebar .btn-primary {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.sidebar .btn-default {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   17. ALERTS
   ========================================================================== */

.alert {
  border: none !important;
  border-radius: var(--hmi-radius-sm) !important;
  border-left: 3px solid !important;
  color: var(--hmi-text) !important;
}

.alert-success {
  background-color: rgba(37, 218, 106, 0.1) !important;
  border-left-color: var(--hmi-success) !important;
}

.alert-danger {
  background-color: rgba(255, 107, 107, 0.1) !important;
  border-left-color: var(--hmi-danger) !important;
}

.alert-warning {
  background-color: rgba(245, 166, 35, 0.1) !important;
  border-left-color: var(--hmi-warning) !important;
}

.alert-info {
  background-color: rgba(124, 91, 181, 0.1) !important;
  border-left-color: var(--hmi-primary) !important;
}


/* ==========================================================================
   18. BADGES & LABELS
   ========================================================================== */

.badge,
.label {
  border-radius: 20px !important;
  font-weight: 500;
  padding: 4px 10px !important;
  font-size: 0.75rem;
}

.badge-primary,
.label-primary {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.badge-success,
.label-success {
  background-color: var(--hmi-success) !important;
  color: #1a1828 !important;
}

.badge-danger,
.label-danger {
  background-color: var(--hmi-danger) !important;
  color: #fff !important;
}

.badge-warning,
.label-warning {
  background-color: var(--hmi-warning) !important;
  color: #1a1828 !important;
}

.badge-info,
.label-info {
  background-color: var(--hmi-info) !important;
  color: #fff !important;
}

.badge-secondary,
.badge-default,
.label-grey,
.label-default {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text-muted) !important;
}


/* ==========================================================================
   19. MODALS
   ========================================================================== */

.modal-content {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  color: var(--hmi-text) !important;
}

.modal-header {
  border-bottom: 1px solid var(--hmi-border) !important;
}

.modal-footer {
  border-top: 1px solid var(--hmi-border) !important;
}

.modal-title {
  color: var(--hmi-text) !important;
}

.modal-header .close,
.modal-header .btn-close {
  color: var(--hmi-text-muted) !important;
  text-shadow: none !important;
  opacity: 0.7;
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
  color: var(--hmi-text) !important;
  opacity: 1;
}

.modal-backdrop.show {
  opacity: 0.7;
}


/* ==========================================================================
   20. PAGINATION
   ========================================================================== */

.pagination .page-item .page-link,
.page-link {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text-muted) !important;
  border-radius: var(--hmi-radius-xs) !important;
  margin: 0 2px;
  transition: all 0.2s ease;
}

.pagination .page-item.active .page-link,
.page-item.active .page-link {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.pagination .page-item .page-link:hover,
.page-link:hover {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.pagination .page-item.disabled .page-link {
  background-color: var(--hmi-secondary) !important;
  opacity: 0.4;
}


/* ==========================================================================
   21. TABS & PILLS
   ========================================================================== */

.nav-tabs {
  border-bottom-color: var(--hmi-border) !important;
}

.nav-tabs .nav-link {
  color: var(--hmi-text-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--hmi-radius-sm) var(--hmi-radius-sm) 0 0 !important;
  padding: 8px 16px;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
  border-color: var(--hmi-border-subtle) !important;
  color: var(--hmi-text) !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--hmi-card) !important;
  border-color: var(--hmi-border) var(--hmi-border) var(--hmi-card) !important;
  color: var(--hmi-text) !important;
}

.nav-pills .nav-link {
  color: var(--hmi-text-muted) !important;
  border-radius: var(--hmi-radius-sm) !important;
  padding: 8px 16px;
  transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text) !important;
}

.nav-pills .nav-link.active {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.tab-content {
  background-color: transparent !important;
  color: var(--hmi-text) !important;
}

.tab-pane {
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   22. FOOTER (.hmi-footer)
   ========================================================================== */

.hmi-footer {
  background-color: var(--hmi-card) !important;
  border-top: 1px solid var(--hmi-border-subtle) !important;
  padding: 2rem 1rem;
}

.hmi-footer-nav a {
  color: var(--hmi-text-muted) !important;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.hmi-footer-nav a:hover {
  color: var(--hmi-text) !important;
}

.hmi-copyright {
  color: var(--hmi-text-faint) !important;
  font-size: 0.8rem;
  text-align: center;
}

.hmi-lang-btn {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text-muted) !important;
  border-radius: var(--hmi-radius-xs);
  padding: 4px 12px;
  font-size: 0.8rem;
}

/* WHMCS branding text */
footer a[href*="whmcs"],
.footer-powered,
[class*="powered-by"],
footer small {
  opacity: 0.4 !important;
  color: var(--hmi-text-faint) !important;
  font-size: 0.75rem !important;
}


/* ==========================================================================
   23. SCROLLBARS
   ========================================================================== */

/* Webkit */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--hmi-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--hmi-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hmi-text-faint);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--hmi-border) var(--hmi-bg);
}


/* ==========================================================================
   24. BOOTSTRAP UTILITY OVERRIDES
   ========================================================================== */

.bg-white {
  background-color: var(--hmi-card) !important;
}

.bg-light {
  background-color: var(--hmi-secondary) !important;
}

.bg-primary {
  background-color: var(--hmi-secondary) !important;
}

.text-dark,
.text-body {
  color: var(--hmi-text) !important;
}

.text-primary {
  color: var(--hmi-primary) !important;
}

.text-muted {
  color: var(--hmi-text-muted) !important;
}

.border {
  border-color: var(--hmi-border) !important;
}

.border-top {
  border-top-color: var(--hmi-border) !important;
}

.border-bottom {
  border-bottom-color: var(--hmi-border) !important;
}

.border-left {
  border-left-color: var(--hmi-border) !important;
}

.border-right {
  border-right-color: var(--hmi-border) !important;
}

.shadow,
.shadow-sm,
.shadow-lg {
  box-shadow: var(--hmi-shadow) !important;
}


/* ==========================================================================
   25. DOMAIN PRICING GRID
   ========================================================================== */

/* Header row */
.tld-pricing-header,
.tld-pricing-header .row,
.tld-pricing-header .col-md-4,
.tld-pricing-header .col-md-8,
.tld-pricing-header div {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text) !important;
  font-weight: 600;
}

.tld-pricing-header *,
.tld-pricing-header a,
.tld-pricing-header span {
  background-color: transparent !important;
  color: var(--hmi-text) !important;
}

/* Data rows */
.tld-row {
  border-bottom: 1px solid var(--hmi-border-subtle) !important;
}

.tld-row:not(.highlighted) {
  background-color: var(--hmi-card) !important;
}

.tld-row.highlighted {
  background-color: var(--hmi-secondary) !important;
}

.tld-row *,
.tld-row div,
.tld-row span,
.tld-row a {
  background-color: transparent !important;
  color: var(--hmi-text) !important;
}

.tld-row strong {
  color: var(--hmi-text) !important;
}

.tld-row small {
  color: var(--hmi-text-muted) !important;
}

.tld-row.no-tlds {
  color: var(--hmi-text-muted) !important;
}

.tld-column {
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   26. DOMAIN REGISTRATION / CHECKER PAGES
   ========================================================================== */

.domain-checker,
.domain-checker-container,
.domain-checker-bg,
[class*="domain-checker"],
[class*="domain-search"],
[class*="domain-lookup"],
.domainregister,
.domaintransfer,
#domainSearchForm,
#cartDomainLookup,
.tab-content .tab-pane,
.order-standard_cart .well,
.order-standard_cart .jumbotron,
.order-standard_cart [style*="background"] {
  background-color: var(--hmi-card) !important;
  color: var(--hmi-text) !important;
}

.domain-checker input,
.domain-checker-container input,
#domainSearchForm input,
#cartDomainLookup input {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

.domain-checker input:focus,
.domain-checker-container input:focus,
#domainSearchForm input:focus,
#cartDomainLookup input:focus {
  border-color: var(--hmi-primary) !important;
  box-shadow: 0 0 0 3px var(--hmi-primary-ring) !important;
}

.domain-checker .btn-primary,
.domain-checker-container .btn-primary,
#domainSearchForm .btn-primary {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
  color: #fff !important;
}

/* Category tabs in order pages */
.order-standard_cart .nav-pills .nav-link {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text-muted) !important;
  border-radius: var(--hmi-radius-sm) !important;
}

.order-standard_cart .nav-pills .nav-link.active {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

/* Well overrides */
.well {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
  border-radius: var(--hmi-radius-sm) !important;
}

.jumbotron {
  background-color: var(--hmi-card) !important;
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   27. DOMAIN RENEWALS PAGE
   ========================================================================== */

.secondary-cart-body,
.domain-renewals,
#domainRenewals {
  background-color: var(--hmi-bg) !important;
  color: var(--hmi-text) !important;
}

.domain-renewal {
  background-color: var(--hmi-card) !important;
  border-bottom: 1px solid var(--hmi-border-subtle) !important;
  padding: 1.25rem !important;
}

.domain-renewal h3,
.domain-renewal .font-size-24 {
  color: var(--hmi-text) !important;
}

.domain-renewal p {
  color: var(--hmi-text-muted) !important;
}

.domain-renewal .label-danger {
  background-color: var(--hmi-danger) !important;
  color: #fff !important;
}

.domain-renewal .label-grey,
.domain-renewal .label-default {
  background-color: var(--hmi-warning) !important;
  color: #1a1828 !important;
}

.btn-add-renewal-to-cart {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
  transition: all 0.2s ease;
}

.btn-add-renewal-to-cart:hover {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
  color: #fff !important;
}


/* ==========================================================================
   28. DOMAIN PROMO CARDS
   ========================================================================== */

.domain-promo,
[class*="domain-promo"] {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  color: var(--hmi-text) !important;
}

.domain-promo *,
[class*="domain-promo"] * {
  color: var(--hmi-text) !important;
}

.domain-promo i,
.domain-promo .fa,
[class*="domain-promo"] i {
  color: var(--hmi-primary) !important;
}

.domain-promo .btn,
[class*="domain-promo"] .btn {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}


/* ==========================================================================
   29. ANNOUNCEMENTS
   ========================================================================== */

article,
.primary-content article {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  color: var(--hmi-text) !important;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

article *,
.primary-content article * {
  color: var(--hmi-text) !important;
}

article .text-muted,
article small,
article time {
  color: var(--hmi-text-muted) !important;
}

blockquote {
  background-color: var(--hmi-secondary) !important;
  border-left: 4px solid var(--hmi-primary) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0 var(--hmi-radius-xs) var(--hmi-radius-xs) 0 !important;
  margin: 1rem 0;
}

blockquote p {
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   30. TICKET SYSTEM
   ========================================================================== */

/* Bootstrap Markdown Editor */
.md-editor {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius-sm) !important;
  overflow: hidden;
}

.md-header {
  background-color: var(--hmi-secondary) !important;
  border-bottom: 1px solid var(--hmi-border) !important;
  padding: 4px;
}

.md-header .btn {
  background-color: transparent !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text-muted) !important;
  padding: 4px 8px;
}

.md-header .btn:hover {
  background-color: var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

.md-header .btn-primary {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
  color: #fff !important;
}

textarea.md-input,
textarea#inputMessage,
textarea.form-control.markdown-editor {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text) !important;
  -webkit-text-fill-color: var(--hmi-text) !important;
  border: none !important;
}

.md-footer,
.markdown-editor-status {
  background-color: var(--hmi-secondary) !important;
  border-top: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text-faint) !important;
  padding: 4px 8px;
  font-size: 0.8rem;
}

.markdown-save {
  color: var(--hmi-success) !important;
}

/* Ticket replies */
.ticket-reply,
.client-reply,
.operator-reply {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  margin-bottom: 1rem;
  overflow: hidden;
}

.operator-reply,
.staff-reply {
  border-left: 3px solid var(--hmi-primary) !important;
}

.posted-by {
  color: var(--hmi-text-muted) !important;
  font-size: 0.85rem;
}

.posted-by-name,
.posted-by strong {
  color: var(--hmi-text) !important;
  font-weight: 600;
}


/* ==========================================================================
   31. PRODUCT DETAILS PAGE
   ========================================================================== */

.product-status {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  padding: 1.5rem;
}

.product-status .product-icon {
  background-color: var(--hmi-secondary) !important;
  border-radius: var(--hmi-radius) !important;
}

.product-status h3 {
  color: var(--hmi-text) !important;
}

.product-status h4 {
  color: var(--hmi-text-muted) !important;
}

/* Font Awesome stacked icons */
.fa-stack .fa-circle {
  color: var(--hmi-primary) !important;
}

.fa-stack .fa-inverse {
  color: #fff !important;
}

/* Status text badges */
.product-status-text {
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
}

.product-status-text.active,
.product-status-text[class*="active"] {
  background-color: var(--hmi-success) !important;
  color: #1a1828 !important;
}

.product-status-text.pending,
.product-status-text[class*="pending"] {
  background-color: var(--hmi-warning) !important;
  color: #1a1828 !important;
}

.product-status-text.suspended,
.product-status-text.cancelled,
.product-status-text.terminated,
.product-status-text[class*="suspended"],
.product-status-text[class*="cancelled"],
.product-status-text[class*="terminated"] {
  background-color: var(--hmi-danger) !important;
  color: #fff !important;
}


/* ==========================================================================
   32. INVOICE PAGE
   ========================================================================== */

.invoice-container {
  background-color: var(--hmi-card) !important;
  color: var(--hmi-text) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
}

.invoice-container * {
  color: var(--hmi-text) !important;
}

.invoice-container .text-muted,
.invoice-container small {
  color: var(--hmi-text-muted) !important;
}

.invoice-container table thead th {
  background-color: var(--hmi-secondary) !important;
}


/* ==========================================================================
   33. SERVICE & DOMAIN LISTS
   ========================================================================== */

.domain-list-item,
.service-list-item {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius-sm) !important;
  padding: 1rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.domain-list-item:hover,
.service-list-item:hover {
  border-color: var(--hmi-primary) !important;
}

/* Status badges in lists */
.status-active,
.badge-active {
  background-color: var(--hmi-success) !important;
  color: #1a1828 !important;
}

.status-pending,
.badge-pending {
  background-color: var(--hmi-warning) !important;
  color: #1a1828 !important;
}

.status-suspended,
.status-cancelled,
.status-terminated,
.badge-suspended,
.badge-cancelled,
.badge-terminated {
  background-color: var(--hmi-danger) !important;
  color: #fff !important;
}


/* ==========================================================================
   34. SHOPPING CART
   ========================================================================== */

.cart-body,
.cart-sidebar,
.secondary-cart-body,
.secondary-cart-sidebar {
  background-color: transparent !important;
  color: var(--hmi-text) !important;
}

/* Order Summary sidebar — exact structure:
   .secondary-cart-sidebar > #scrollingPanelContainer > .order-summary > .summary-container */
.order-summary,
#orderSummary,
.summary-container,
#scrollingPanelContainer {
  background-color: var(--hmi-card) !important;
  background: var(--hmi-card) !important;
  color: var(--hmi-text) !important;
}

.order-summary *,
#orderSummary *,
.summary-container * {
  background-color: transparent !important;
  color: inherit !important;
}

.order-summary {
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  padding: 1.25rem !important;
}

.order-summary h2 {
  color: var(--hmi-text) !important;
  font-size: 1.25rem !important;
  margin-bottom: 1rem !important;
}

.subtotal,
.recurring-totals,
.bordered-totals {
  border-bottom: 1px solid var(--hmi-border-subtle) !important;
  padding: 0.5rem 0 !important;
  color: var(--hmi-text) !important;
}

.total-due-today {
  padding: 1rem 0 !important;
  text-align: center !important;
}

.total-due-today .amt {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--hmi-text) !important;
  display: block !important;
}

.btn-continue-shopping {
  color: var(--hmi-primary) !important;
}

.view-cart-items-header {
  background-color: var(--hmi-secondary) !important;
  border-bottom: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.view-cart-items .item,
.cart-item {
  border-bottom: 1px solid var(--hmi-border-subtle) !important;
  padding: 0.75rem 1rem;
  color: var(--hmi-text) !important;
}

.header-lined {
  border-bottom: 2px solid var(--hmi-primary) !important;
  color: var(--hmi-text) !important;
  font-weight: 600;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.btn-checkout {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
}

.btn-checkout:hover {
  background-color: var(--hmi-primary-hover) !important;
  color: #fff !important;
}


/* ==========================================================================
   35. KNOWLEDGE BASE
   ========================================================================== */

.kb-search {
  background-color: transparent !important;
}

.kb-search input {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

.kb-category .card {
  background-color: var(--hmi-card) !important;
}

.kb-article-item {
  border-bottom: 1px solid var(--hmi-border-subtle) !important;
  padding: 0.75rem 0;
}

.kb-article-item a {
  color: var(--hmi-primary) !important;
}

.article-content {
  color: var(--hmi-text) !important;
  line-height: 1.7;
}

.article-content * {
  color: var(--hmi-text) !important;
}

.article-content a {
  color: var(--hmi-primary) !important;
}


/* ==========================================================================
   36. LOGIN PAGE
   ========================================================================== */

.login-container .card,
.login-form .card {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius) !important;
  box-shadow: var(--hmi-shadow-lg) !important;
}

.btn-reveal-pw {
  background-color: var(--hmi-secondary) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text-muted) !important;
}

.btn-reveal-pw:hover {
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   37. CONTACT FORM & ACCOUNT PAGES
   ========================================================================== */

label {
  color: var(--hmi-text) !important;
  font-weight: 500;
  display: block;
}

/* intl-tel-input */
.iti {
  width: 100% !important;
}

.iti__flag-container {
  background-color: var(--hmi-secondary) !important;
}

.iti__country-list {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

.iti__country:hover {
  background-color: var(--hmi-secondary) !important;
}

.iti__country.iti__highlight {
  background-color: var(--hmi-primary-muted) !important;
}

.iti__selected-flag {
  background-color: var(--hmi-secondary) !important;
}

.iti__dial-code {
  color: var(--hmi-text-muted) !important;
}

.iti__country-name {
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   38. COOKIE BANNER
   ========================================================================== */

.cc-window {
  background-color: var(--hmi-card) !important;
  border-top: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

.cc-btn {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
  border-radius: var(--hmi-radius-sm) !important;
  border: none !important;
}

.cc-btn:hover {
  background-color: var(--hmi-primary-hover) !important;
}

.cc-link {
  color: var(--hmi-primary) !important;
}


/* ==========================================================================
   39. TOOLTIPS & POPOVERS
   ========================================================================== */

.tooltip-inner {
  background-color: var(--hmi-card) !important;
  color: var(--hmi-text) !important;
  border: 1px solid var(--hmi-border);
  border-radius: var(--hmi-radius-xs);
  box-shadow: var(--hmi-shadow);
}

.tooltip .arrow::before,
.bs-tooltip-top .arrow::before {
  border-top-color: var(--hmi-card) !important;
}

.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--hmi-card) !important;
}

.popover {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  border-radius: var(--hmi-radius-sm) !important;
  color: var(--hmi-text) !important;
}

.popover-header {
  background-color: var(--hmi-secondary) !important;
  border-bottom: 1px solid var(--hmi-border) !important;
  color: var(--hmi-text) !important;
}

.popover-body {
  color: var(--hmi-text) !important;
}


/* ==========================================================================
   40. PROGRESS BARS
   ========================================================================== */

.progress {
  background-color: var(--hmi-secondary) !important;
  border-radius: var(--hmi-radius-xs) !important;
  overflow: hidden;
}

.progress-bar {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.progress-bar-success {
  background-color: var(--hmi-success) !important;
}

.progress-bar-danger {
  background-color: var(--hmi-danger) !important;
}

.progress-bar-warning {
  background-color: var(--hmi-warning) !important;
}

.progress-bar-info {
  background-color: var(--hmi-info) !important;
}


/* ==========================================================================
   41. MISCELLANEOUS
   ========================================================================== */

/* Close button */
.close {
  color: var(--hmi-text-muted) !important;
  text-shadow: none !important;
  opacity: 0.7;
}

.close:hover {
  color: var(--hmi-text) !important;
  opacity: 1;
}

/* Loader / spinner */
.loader,
.fa-spinner {
  color: var(--hmi-primary) !important;
}

/* Empty states */
.no-results,
.empty-state {
  color: var(--hmi-text-muted) !important;
  text-align: center;
  padding: 2rem;
}

.no-results i,
.empty-state i {
  font-size: 3rem;
  color: var(--hmi-text-faint) !important;
  margin-bottom: 1rem;
}

/* DataTables empty */
.dataTables_empty {
  color: var(--hmi-text-muted) !important;
  text-align: center;
  padding: 2rem !important;
}

/* Custom switch in misc contexts */
.custom-switch .custom-control-label::before {
  background-color: var(--hmi-secondary) !important;
  border-color: var(--hmi-border) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
}

.custom-switch .custom-control-label::after {
  background-color: #fff !important;
}

/* List group items (global) */
.list-group-item {
  background-color: var(--hmi-card) !important;
  border-color: var(--hmi-border-subtle) !important;
  color: var(--hmi-text) !important;
}

.list-group-item:hover {
  background-color: var(--hmi-secondary) !important;
}

.list-group-item.active {
  background-color: var(--hmi-primary) !important;
  border-color: var(--hmi-primary) !important;
  color: #fff !important;
}

/* Dropdown menus (global) */
.dropdown-menu {
  background-color: var(--hmi-card) !important;
  border: 1px solid var(--hmi-border) !important;
  box-shadow: var(--hmi-shadow-lg);
  border-radius: var(--hmi-radius-sm) !important;
}

.dropdown-item {
  color: var(--hmi-text-muted) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--hmi-secondary) !important;
  color: var(--hmi-text) !important;
}

.dropdown-item.active {
  background-color: var(--hmi-primary) !important;
  color: #fff !important;
}

.dropdown-divider {
  border-top-color: var(--hmi-border) !important;
}

/* Accordion */
.accordion .card {
  border-radius: 0 !important;
  margin-bottom: -1px;
}

.accordion .card-header {
  cursor: pointer;
}

.accordion .card-header:hover {
  background-color: var(--hmi-primary-muted) !important;
}

/* Carousel */
.carousel-indicators li {
  background-color: var(--hmi-border) !important;
}

.carousel-indicators .active {
  background-color: var(--hmi-primary) !important;
}

/* Media objects */
.media {
  color: var(--hmi-text) !important;
}

/* Collapse borders */
.collapse.show,
.collapsing {
  border-color: var(--hmi-border) !important;
}


/* ==========================================================================
   42. RESPONSIVE
   ========================================================================== */

@media (max-width: 1500px) {
  .hmi-search-expandable:hover .hmi-search-expand-input,
  .hmi-search-expandable:focus-within .hmi-search-expand-input {
    width: 100px;
  }
}

@media (max-width: 1350px) {
  .hmi-nav-link {
    padding: 6px 8px;
    font-size: 0.82rem;
  }
}

@media (max-width: 1199px) {
  .hmi-nav-links,
  .hmi-nav-right {
    display: none !important;
  }

  .hmi-hamburger {
    display: block !important;
    margin-left: auto;
  }

  .hmi-mobile-nav.active {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  .hmi-nav-links,
  .hmi-nav-right {
    display: flex !important;
  }

  .hmi-hamburger {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hmi-domain-hero {
    padding: 2.5rem 1rem;
  }

  .hmi-domain-hero h1,
  .hmi-hero-content h1 {
    font-size: 1.5rem !important;
  }

  .hmi-domain-hero h2,
  .hmi-hero-content h2 {
    font-size: 1.2rem !important;
  }

  .hmi-tld-prices {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .hmi-search-bar {
    flex-direction: column;
  }

  .hmi-search-btn {
    border-radius: 0 !important;
  }

  h1, .h1 { font-size: 1.5rem !important; }
  h2, .h2 { font-size: 1.25rem !important; }
  h3, .h3 { font-size: 1.1rem !important; }

  .tiles .tile .stat {
    font-size: 1.75rem;
  }

  .hmi-hero-icon {
    display: none;
  }

  .product {
    margin-bottom: 1rem;
  }
}

@media (max-width: 576px) {
  .hmi-navbar {
    height: auto;
    padding: 8px 12px;
  }

  .hmi-logo-text {
    font-size: 0.85rem;
  }

  .hmi-domain-hero {
    padding: 2rem 0.75rem;
  }

  .card,
  .panel {
    border-radius: var(--hmi-radius-sm) !important;
  }

  .table-responsive {
    border: none !important;
  }

  .tiles .tile {
    padding: 1rem;
  }

  .tiles .tile .stat {
    font-size: 1.5rem;
  }
}


/* ==========================================================================
   43. PRINT STYLES
   ========================================================================== */

@media print {
  body {
    background-color: #fff !important;
    color: #000 !important;
  }

  * {
    background-color: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  .hmi-topbar,
  .hmi-navbar,
  .hmi-mobile-nav,
  .hmi-breadcrumb,
  .hmi-footer,
  .hmi-domain-hero,
  .hmi-hero-icon,
  .hmi-hero-bg-grid,
  .hmi-hero-orb-tr,
  .hmi-hero-orb-bl,
  .sidebar,
  .breadcrumb,
  .cc-window,
  .btn,
  nav,
  footer {
    display: none !important;
  }

  .card,
  .panel {
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }

  .table thead th {
    background-color: #eee !important;
  }

  .table tbody tr,
  .table tbody td {
    background-color: #fff !important;
    color: #000 !important;
  }
}


/* ==========================================================================
   44. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hmi-hero-icon {
    animation: none !important;
    opacity: 0.12;
  }

  .card:hover,
  .product:hover,
  .tiles .tile:hover,
  .btn:hover {
    transform: none !important;
  }
}