/* ==========================================================================
   SERANODES COMPREHENSIVE UI & SPACING MASTER (V10)
   Eliminates all squished, overlapping, and distorted elements across WHMCS.
   ========================================================================== */

/* --- 0. Universal Hidden Rules (CRITICAL: Never allow !important to force hidden buttons visible) --- */
.w-hidden,
.hidden,
.hide,
.d-none,
[hidden],
body .w-hidden,
body .hidden,
body .hide,
body .d-none,
body [hidden],
body .btn.w-hidden,
body .btn.hidden,
body .btn.hide,
body .btn.d-none,
body .btn[hidden],
body button.w-hidden,
body button.hidden,
body button.hide,
body button.d-none {
  display: none !important;
}

/* --- 1. Global Page Layout & Containers --- */
.container {
  max-width: 1240px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#main-body {
  padding: 40px 0 60px 0 !important;
  min-height: calc(100vh - 280px) !important;
}

/* --- 2. Universal Button Styling --- */
body .btn,
body button,
body .btn-default,
body .btn-primary,
body .btn-success,
body .btn-order-now,
body #order-standard_cart .btn,
body #order-standard_cart .btn-primary,
body #order-standard_cart .btn-success,
body #order-standard_cart #btnCompleteProductConfig,
body #order-standard_cart .btn-order-now,
body section#home-banner .btn,
body .domain-check-availability,
body input[type="submit"].btn {
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

/* Vibrant Electric Blue for Primary Actions */
body .btn-primary,
body .btn-success,
body .btn-order-now,
body #order-standard_cart .btn-primary,
body #order-standard_cart .btn-success,
body #order-standard_cart .btn-order-now,
body #order-standard_cart #btnCompleteProductConfig,
body .domain-check-availability,
body button[type="submit"].btn-primary,
body .lp-btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

body .btn-primary:hover,
body .btn-success:hover,
body .btn-order-now:hover,
body #order-standard_cart .btn-primary:hover,
body #order-standard_cart .btn-success:hover,
body #order-standard_cart .btn-order-now:hover,
body #order-standard_cart #btnCompleteProductConfig:hover,
body .domain-check-availability:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Secondary & Ghost Buttons (Dark Slate) */
body .btn-default,
body .btn-secondary,
body .lp-btn-secondary,
body .lp-btn-ghost,
body #order-standard_cart .btn-default {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}

body .btn-default:hover,
body .btn-secondary:hover,
body #order-standard_cart .btn-default:hover {
  background: #27354a !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* --- 2B. Header / Navbar Alignment (Eliminate vertical discrepancies) --- */
.site-header {
  height: 72px !important;
}

.site-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 72px !important;
}

.site-right-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

.site-lang-wrap {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.site-lang-wrap .choose-language {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  line-height: 38px !important;
  transition: all 0.15s ease !important;
}

.site-lang-wrap .choose-language:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.site-secondary-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.site-secondary-nav > li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.site-secondary-nav > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  line-height: 38px !important;
  transition: all 0.15s ease !important;
}

.site-secondary-nav > li > a:hover,
.site-secondary-nav > li.open > a {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.site-cart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 18px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3) !important;
  text-decoration: none !important;
  line-height: 38px !important;
  transition: all 0.15s ease !important;
}

.site-cart-btn:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* --- 3. Homepage Hero & Features --- */
.lp-hero {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 56px !important;
  align-items: center !important;
  padding: 48px 0 36px 0 !important;
}

.lp-hero-list li {
  position: relative !important;
  padding-left: 0 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14.5px !important;
  color: #cbd5e1 !important;
  line-height: 1.5 !important;
}

.lp-hero-list li::before {
  content: "✓" !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 50% !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #10b981 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  transform: none !important;
  margin-right: 14px !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

/* Quick Access Cards Grid */
.lp-shortcuts {
  margin: 56px 0 48px 0 !important;
}

.lp-shortcuts-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #64748b !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

.lp-shortcuts-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

.lp-shortcut-card {
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 28px 24px !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.lp-shortcut-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(37, 99, 235, 0.15) !important;
  background: #0f172a !important;
}

/* --- 4. Cart / Store Page Layout & Products Grid --- */
#order-standard_cart {
  padding: 0 !important;
}

#order-standard_cart > .row {
  display: flex !important;
  gap: 32px !important;
  margin: 0 !important;
}

#order-standard_cart .cart-sidebar {
  float: none !important;
  width: 280px !important;
  min-width: 280px !important;
  padding: 0 !important;
}

#order-standard_cart .cart-body {
  float: none !important;
  flex: 1 !important;
  width: auto !important;
  padding: 0 !important;
}

/* Header */
#order-standard_cart .header-lined {
  margin-bottom: 28px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#order-standard_cart .header-lined h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
}

#order-standard_cart .header-lined p {
  color: #94a3b8 !important;
  font-size: 15px !important;
  margin: 0 !important;
}

/* Category Sidebar Panels */
#order-standard_cart .cart-sidebar .panel {
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

#order-standard_cart .cart-sidebar .panel-heading {
  background: #111a2e !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

#order-standard_cart .cart-sidebar .list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: #94a3b8 !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.15s ease !important;
}

#order-standard_cart .cart-sidebar .list-group-item:hover {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #ffffff !important;
}

#order-standard_cart .cart-sidebar .list-group-item.active {
  background: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* --- 4B. Equal-Height Product Cards & Perfectly Aligned Order Buttons --- */
#order-standard_cart .products {
  margin: 0 !important;
}

#order-standard_cart .products .row,
#order-standard_cart .products .row-eq-height {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 28px !important;
  margin: 0 !important;
  align-items: stretch !important;
}

#order-standard_cart .products .col-md-6 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

#order-standard_cart .products .product {
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.25s ease, border-color 0.25s ease !important;
}

#order-standard_cart .products .product:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(37, 99, 235, 0.15) !important;
}

#order-standard_cart .products .product header {
  background: #111a2e !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 22px 24px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#order-standard_cart .products .product header span {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
}

#order-standard_cart .products .product div.product-desc {
  float: none !important;
  width: 100% !important;
  padding: 24px !important;
  font-size: 14px !important;
  color: #cbd5e1 !important;
  flex: 1 1 auto !important;
}

#order-standard_cart .products .product ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#order-standard_cart .products .product ul li {
  padding: 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

#order-standard_cart .products .product ul li::before {
  content: "✓" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 50% !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-right: 12px !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

/* Product Footer Locked to Baseline */
#order-standard_cart .products .product footer {
  float: none !important;
  width: 100% !important;
  position: static !important;
  background: #080c17 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 20px 24px !important;
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#order-standard_cart .products .product div.product-pricing {
  margin: 0 !important;
  text-align: left !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
}

#order-standard_cart .products .product div.product-pricing span.price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: block !important;
  line-height: 1.1 !important;
}

#order-standard_cart .products .product footer .btn-order-now {
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* --- 5. Domain Selection & Unified Domain Search Bar --- */
.domain-step-options {
  min-height: auto !important;
  margin-top: 24px !important;
}

.domain-step-options .option {
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  margin-bottom: 14px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.domain-step-options .option:hover {
  border-color: rgba(37, 99, 235, 0.4) !important;
  background: #0f172a !important;
}

.domain-step-options .option.selected,
.domain-step-options .option:has(input:checked) {
  border-color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

.domain-step-options .option label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #f8fafc !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Domain Search Input Bar */
#order-standard_cart .domain-input-group {
  background: #080c17 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-top: 14px !important;
}

#order-standard_cart .domain-input-group > .row {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  gap: 12px !important;
}

#order-standard_cart .domain-input-group .col-sm-8 {
  flex: 1 1 auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#order-standard_cart .domain-input-group .domains-row {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

#order-standard_cart .domain-input-group .domains-row .col-xs-9,
#order-standard_cart .domain-input-group .domains-row .col-9 {
  flex: 1 1 auto !important;
  max-width: none !important;
  padding: 0 !important;
}

#order-standard_cart .domain-input-group .domains-row .col-xs-3,
#order-standard_cart .domain-input-group .domains-row .col-3 {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  padding: 0 !important;
}

#order-standard_cart .domain-input-group .input-group {
  display: flex !important;
  align-items: stretch !important;
  height: 46px !important;
  margin: 0 !important;
  width: 100% !important;
}

#order-standard_cart .domain-input-group .input-group-addon,
#order-standard_cart .domain-input-group .input-group-prepend {
  display: flex !important;
  align-items: center !important;
  background: #111a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  padding: 0 14px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  height: 46px !important;
}

#order-standard_cart .domain-input-group input#registersld,
#order-standard_cart .domain-input-group input#transfersld,
#order-standard_cart .domain-input-group input#owndomainsld {
  height: 46px !important;
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

#order-standard_cart .domain-input-group select#registertld,
#order-standard_cart .domain-input-group select#transfertld {
  height: 46px !important;
  background: #111a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: #ffffff !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#order-standard_cart .domain-input-group .col-sm-2 {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

#order-standard_cart .domain-input-group #btnCheckAvailability,
#order-standard_cart .domain-input-group #btnTransferDomain,
#order-standard_cart .domain-input-group button[type="submit"] {
  height: 46px !important;
  padding: 0 24px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#order-standard_cart #btnDomainContinue:not(.w-hidden):not(.hidden) {
  min-width: 240px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  margin: 28px auto !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- 6. Sticky Order Summary & Configure Product Layout --- */
#order-standard_cart form#frmConfigureProduct > .row,
#order-standard_cart form#orderfrm > .row,
#order-standard_cart .cart-body > .row,
#order-standard_cart .cart-body form > .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 28px !important;
  margin: 0 !important;
}

#order-standard_cart .secondary-cart-body {
  float: none !important;
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

#order-standard_cart .secondary-cart-sidebar,
#order-standard_cart #scrollingPanelContainer {
  float: none !important;
  flex: 0 0 340px !important;
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;
  padding: 0 !important;
  position: relative !important;
}

#order-standard_cart #orderSummary,
#order-standard_cart .order-summary {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 24px !important;
  z-index: 20 !important;
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

#order-standard_cart #orderSummary h2,
#order-standard_cart .order-summary h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 18px 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#order-standard_cart #orderSummary .summary-container,
#order-standard_cart .order-summary .summary-container {
  font-size: 14px !important;
  color: #cbd5e1 !important;
}

#order-standard_cart #orderSummary .total-due-today,
#order-standard_cart .order-summary .total-due-today {
  margin: 20px 0 0 0 !important;
  padding: 16px 0 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-align: right !important;
}

#order-standard_cart #orderSummary .total-due-today .amt,
#order-standard_cart .order-summary .total-due-today .amt {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: block !important;
}

#order-standard_cart #btnCompleteProductConfig,
#order-standard_cart #checkout.btn-checkout {
  width: 100% !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 18px !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.4) !important;
}

#order-standard_cart #continueShopping {
  display: block !important;
  text-align: center !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
  margin-top: 10px !important;
  text-decoration: none !important;
}

#order-standard_cart #continueShopping:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Secondary Action Button at Bottom of Config Form */
.form-bottom-actions {
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.btn-continue-primary {
  min-width: 220px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.4) !important;
}

/* --- 7. Login, Contact, Ticket Submit Cards --- */
.logincontainer {
  max-width: 480px !important;
  margin: 30px auto !important;
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 36px 32px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

.logincontainer .header-lined {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 16px !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

.logincontainer .header-lined h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
}

.logincontainer form.login-form .form-group {
  margin-bottom: 18px !important;
}

.logincontainer form.login-form label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  margin-bottom: 6px !important;
}

.logincontainer form.login-form div[align="center"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.logincontainer #login {
  flex: 1 1 auto !important;
  padding: 12px 20px !important;
}

/* Contact Us Card */
form[action="contact.php"] {
  max-width: 720px !important;
  margin: 30px auto !important;
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 36px 32px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

form[action="contact.php"] .form-group {
  margin-bottom: 20px !important;
}

form[action="contact.php"] .control-label {
  text-align: left !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}

form[action="contact.php"] button[type="submit"] {
  min-width: 220px !important;
  padding: 14px 32px !important;
  font-size: 15px !important;
}

/* Ticket Department Cards */
.dept-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  height: 100% !important;
}

.dept-card:hover {
  border-color: rgba(37, 99, 235, 0.4) !important;
  background: #0f172a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* --- 8. Clean Footer Rhythm --- */
.lp-footer {
  margin-top: 72px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 56px 0 36px 0 !important;
  background: #04070e !important;
}

.lp-footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr repeat(4, 1fr) !important;
  gap: 40px !important;
  margin-bottom: 40px !important;
}

.lp-footer-col h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #94a3b8 !important;
  margin-bottom: 18px !important;
}

.lp-footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lp-footer-col ul li {
  margin-bottom: 10px !important;
}

.lp-footer-col ul li a {
  color: #64748b !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.lp-footer-col ul li a:hover {
  color: #ffffff !important;
}

.lp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: #475569 !important;
}

/* Hide mobile toggle on desktop */
@media (min-width: 992px) {
  .site-mobile-toggle,
  button.site-mobile-toggle {
    display: none !important;
  }
}

/* --- 9. Final High-Specificity Overrides --- */
#order-standard_cart .w-hidden,
#order-standard_cart .hidden,
#order-standard_cart .hide,
#order-standard_cart .d-none,
#order-standard_cart [hidden],
#order-standard_cart .btn.w-hidden,
#order-standard_cart .btn.hidden,
#order-standard_cart .btn.hide,
#order-standard_cart .btn.d-none,
#order-standard_cart button.w-hidden,
#order-standard_cart button.hidden,
#order-standard_cart #btnDomainContinue.w-hidden,
#order-standard_cart #btnDomainContinue.hidden,
body #order-standard_cart .btn.w-hidden,
body #order-standard_cart .btn.hidden,
body #order-standard_cart .btn.hide,
body #order-standard_cart .btn.d-none,
body #order-standard_cart #btnDomainContinue.w-hidden,
body #order-standard_cart #btnDomainContinue[disabled="disabled"].w-hidden {
  display: none !important;
}

/* Ensure www. input group addon never truncates */
#order-standard_cart .domain-input-group .input-group-addon,
#order-standard_cart .domain-input-group .input-group-prepend {
  min-width: 68px !important;
  width: 68px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: visible !important;
}

#order-standard_cart .domain-input-group .input-group-addon span,
#order-standard_cart .domain-input-group .input-group-text {
  display: inline-block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* --- 10. Client Dashboard Panels & Header Buttons Fix --- */
.client-home-panels .panel {
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.client-home-panels .panel-heading,
.panel-heading {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 14px 18px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
}

.panel-header-flex,
.panel-title-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
}

.client-home-panels .panel-title,
.panel-heading .panel-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
}

/* Panel Header Buttons (e.g. -> My Services, + Open Ticket, -> View All) */
.panel-header-flex .btn,
.panel-header-flex a.btn,
.panel-header-flex .panel-header-btn,
.client-home-panels .panel-heading .panel-header-btn,
.client-home-panels .panel-heading .btn-xs,
.client-home-panels .panel-heading .btn,
.panel-heading .btn-xs,
.panel-heading .btn,
body .client-home-panels .panel-heading a.btn,
body .panel-heading .pull-right a.btn {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  line-height: 30px !important;
  transform: none !important;
}

.client-home-panels .panel-heading .panel-header-btn:hover,
.client-home-panels .panel-heading .btn-xs:hover,
body .client-home-panels .panel-heading a.btn:hover,
body .panel-heading .pull-right a.btn:hover {
  background: #27354a !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Reset pull-right inside panel title so it doesn't break header */
.client-home-panels .panel-heading .pull-right,
.panel-heading .pull-right {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Panel Body */
.client-home-panels .panel-body,
.client-home-panels .panel > .panel-body {
  padding: 20px 22px !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  background: #0b1120 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.client-home-panels .panel-body a {
  color: #3b82f6 !important;
}

/* Panel Footer (View More...) */
.client-home-panels .panel-footer,
.panel-footer {
  background: #080c17 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border-radius: 0 0 14px 14px !important;
}

.client-home-panels .panel-footer a,
.panel-footer a {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.client-home-panels .panel-footer a:hover,
.panel-footer a:hover {
  color: #3b82f6 !important;
  text-decoration: underline !important;
}

/* Register a New Domain Dashboard Panel */
.client-home-panels #registerDomainPanel,
#registerDomainPanel {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.client-home-panels #registerDomainPanel .panel-body,
#registerDomainPanel .panel-body {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  padding: 18px 20px !important;
  box-sizing: border-box !important;
}

.client-home-panels #registerDomainPanel form,
#registerDomainPanel form {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  width: 100% !important;
}

.client-home-panels #registerDomainPanel .input-group,
#registerDomainPanel .input-group,
.client-home-panels #registerDomainPanel .panel-body .input-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 42px !important;
}

.client-home-panels #registerDomainPanel input[type="text"].form-control,
#registerDomainPanel input[type="text"].form-control,
.client-home-panels #registerDomainPanel .panel-body .input-group .form-control {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  line-height: 42px !important;
  background: #060913 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 0 14px !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
}

.client-home-panels #registerDomainPanel input[type="text"].form-control:focus,
#registerDomainPanel input[type="text"].form-control:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

.client-home-panels #registerDomainPanel .input-group-btn,
#registerDomainPanel .input-group-btn,
.client-home-panels #registerDomainPanel .panel-body .input-group-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.client-home-panels #registerDomainPanel .input-group-btn input,
.client-home-panels #registerDomainPanel .input-group-btn .btn,
#registerDomainPanel .input-group-btn input,
#registerDomainPanel .input-group-btn .btn {
  height: 42px !important;
  line-height: 40px !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/* --- 11. Table Actions Split Buttons (Side-by-side [ 🔧 | ▼ ]) --- */
.table td .btn-group,
.table th .btn-group,
.table .btn-group,
.btn-group.btn-group-sm,
.table-actions-btn-group {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  vertical-align: middle !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
  float: none !important;
}

.table .btn-group > .btn,
.table .btn-group > .btn-default,
.table .btn-group > a.btn,
.table .btn-group > button.btn,
.table-actions-btn-group > .btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 12px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  margin: 0 !important;
  line-height: 32px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* First button (Wrench) - rounded on left only */
.table .btn-group > .btn:first-child:not(:last-child),
.table .btn-group > a.btn:first-child:not(:last-child),
.table-actions-btn-group > .btn:first-child:not(:last-child) {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Last button (Dropdown caret toggle) - rounded on right only */
.table .btn-group > .btn:last-child:not(:first-child),
.table .btn-group > button.dropdown-toggle,
.table .btn-group > .dropdown-toggle,
.table-actions-btn-group > .dropdown-toggle {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  padding: 0 8px !important;
  width: 26px !important;
  min-width: 26px !important;
}

/* Small button utilities across app */
body .btn-xs,
body button.btn-xs {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 28px !important;
  border-radius: 6px !important;
}

body .btn-sm,
body button.btn-sm {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  line-height: 34px !important;
  border-radius: 6px !important;
}

/* --- 12. Footer Clean Up (Eliminate extra line and duplicate WHMCS footer) --- */
section#footer,
#footer,
body footer#footer,
footer#footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* --- 13. Sidebar Panels & List Groups (Sleek Dark Navigation) --- */
.panel-sidebar,
.sidebar .panel {
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.panel-sidebar > .panel-heading,
.sidebar .panel-heading {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 18px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.panel-sidebar .panel-title,
.sidebar .panel-title {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  line-height: 1 !important;
}

.panel-sidebar .panel-minimise,
.sidebar .panel-minimise {
  color: #64748b !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  float: none !important;
}

.panel-sidebar .panel-minimise:hover,
.sidebar .panel-minimise:hover {
  color: #ffffff !important;
}

.panel-sidebar .list-group,
.sidebar .list-group {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.panel-sidebar .list-group-item,
.panel-sidebar a.list-group-item,
.sidebar .list-group-item,
.sidebar a.list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: #cbd5e1 !important;
  padding: 12px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.15s ease !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.panel-sidebar .list-group-item:first-child,
.sidebar .list-group-item:first-child {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.panel-sidebar .list-group-item:last-child,
.sidebar .list-group-item:last-child {
  border-bottom: none !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

.panel-sidebar a.list-group-item:hover,
.sidebar a.list-group-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  padding-left: 22px !important;
}

.panel-sidebar a.list-group-item.active,
.panel-sidebar .list-group-item.active,
.sidebar a.list-group-item.active,
.sidebar .list-group-item.active {
  background: rgba(37, 99, 235, 0.16) !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
  border-left: 3px solid #3b82f6 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.panel-sidebar a.list-group-item.active:hover,
.sidebar a.list-group-item.active:hover {
  background: rgba(37, 99, 235, 0.22) !important;
  color: #93c5fd !important;
}

.panel-sidebar .list-group-item i,
.sidebar .list-group-item i {
  color: #64748b !important;
  font-size: 14px !important;
  width: 16px !important;
  text-align: center !important;
  transition: color 0.15s ease !important;
}

.panel-sidebar a.list-group-item:hover i,
.sidebar a.list-group-item:hover i,
.panel-sidebar a.list-group-item.active i,
.sidebar a.list-group-item.active i {
  color: #60a5fa !important;
}

.panel-sidebar .list-group-item .badge,
.sidebar .list-group-item .badge {
  margin-left: auto !important;
  background: #1e293b !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.panel-sidebar a.list-group-item.active .badge,
.sidebar a.list-group-item.active .badge {
  background: rgba(37, 99, 235, 0.3) !important;
  color: #93c5fd !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
}

/* --- 14. Empty Panel Footers (Never show stray lines on empty card footers) --- */
.client-home-panels .panel > .panel-footer:empty,
.client-home-panels .panel > .panel-footer:not(:has(*)),
.panel > .panel-footer:empty,
.panel > .panel-footer:not(:has(*)) {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  height: 0 !important;
}



/* =========================================================================
   15. COMPREHENSIVE PHONE & TABLET MOBILE RESPONSIVE ENGINE
   Targeted for viewports <= 991px (Tablets / Foldables) and <= 768px / <= 576px (Smartphones)
   ========================================================================= */

/* --- 15.1 Global Anti-Overflow & Box Sizing --- */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  -webkit-text-size-adjust: 100% !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* Hide desktop navbar clutter on smaller screens */
@media (min-width: 992px) {
  .site-mobile-toggle,
  button.site-mobile-toggle {
    display: none !important;
  }
}

/* --- 15.2 Mobile Header & Navigation (< 992px) --- */
@media (max-width: 991.98px) {
  .site-header {
    padding: 10px 0 !important;
    position: relative !important;
    width: 100% !important;
    background: #04070e !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 1000 !important;
  }

  .site-header-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-brand-wrap {
    flex: 0 1 auto !important;
    margin: 0 !important;
  }

  .site-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
  }

  .site-logo {
    height: 30px !important;
    width: auto !important;
    max-height: 30px !important;
  }

  .site-brand-title {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
  }

  .site-brand-sub {
    display: none !important;
  }

  .site-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .site-lang-wrap {
    display: none !important;
  }

  .site-secondary-nav {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 4px !important;
  }

  .site-secondary-nav > li > a {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-decoration: none !important;
  }

  .site-cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
  }

  .site-cart-btn span {
    display: none !important;
  }

  /* Hamburger Toggle Button */
  .site-mobile-toggle,
  button.site-mobile-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
  }

  .site-mobile-toggle:hover,
  .site-mobile-toggle:focus,
  .site-mobile-toggle:active {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    outline: none !important;
  }

  .site-mobile-toggle .icon-bar {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background-color: #cbd5e1 !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
  }

  /* Dropdown Mobile Nav Container */
  .site-nav,
  nav#siteNav {
    display: none !important;
    width: 100% !important;
    flex-basis: 100% !important;
    order: 10 !important;
    margin: 12px 0 4px 0 !important;
    padding: 12px 10px !important;
    background: #080d1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
  }

  .site-nav.in,
  .site-nav.collapse.in,
  .site-nav.show,
  .site-nav.open,
  nav#siteNav.in,
  nav#siteNav.collapse.in,
  nav#siteNav.show,
  nav#siteNav.open {
    display: block !important;
  }

  .site-nav-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .site-nav-list > li {
    width: 100% !important;
    margin: 0 !important;
  }

  .site-nav-list > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
  }

  .site-nav-list > li > a:hover,
  .site-nav-list > li.active > a,
  .site-nav-list > li.open > a {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #60a5fa !important;
  }

  .site-nav-list .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    margin: 4px 0 6px 0 !important;
    box-shadow: none !important;
    padding: 4px !important;
  }

  .site-nav-list .dropdown-menu > li > a {
    padding: 8px 14px !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    border-radius: 6px !important;
  }
}

/* --- 15.3 Homepage Hero, Cards & Layout (< 992px) --- */
@media (max-width: 991.98px) {
  .lp-home {
    padding: 20px 0 32px !important;
  }

  .lp-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
    padding: 16px 0 !important;
    margin-bottom: 24px !important;
  }

  .lp-hero-copy {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .lp-hero-copy h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  .lp-hero-copy p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 auto 18px auto !important;
    max-width: 100% !important;
    color: #94a3b8 !important;
  }

  .lp-hero-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 320px !important;
    margin: 0 auto 20px auto !important;
    text-align: left !important;
    padding: 0 !important;
  }

  .lp-hero-list li {
    font-size: 13.5px !important;
    margin-bottom: 6px !important;
  }

  .lp-hero-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .lp-hero-form .login-card,
  .lp-hero-form .lp-login {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 18px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    background: #0b1120 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  }

  .lp-status {
    flex-wrap: wrap !important;
    text-align: center !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    margin: 24px auto 0 auto !important;
    padding: 14px 0 !important;
  }

  .lp-shortcuts {
    margin: 32px 0 !important;
  }

  .lp-cards,
  .lp-shortcuts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .lp-card,
  .lp-shortcut-card {
    padding: 18px 14px !important;
    width: 100% !important;
  }

  .lp-plans-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .lp-plan-card {
    width: 100% !important;
    padding: 22px 18px !important;
  }

  .lp-footer {
    margin-top: 40px !important;
    padding: 36px 0 24px 0 !important;
  }

  .lp-footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
  }
}

@media (max-width: 575.98px) {
  .lp-cards,
  .lp-shortcuts-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .lp-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: center !important;
  }

  .lp-footer-brand {
    margin: 0 auto 12px auto !important;
    text-align: center !important;
  }

  .lp-footer-col ul {
    text-align: center !important;
  }

  .lp-footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
}

/* --- 15.4 Cart & Ordering Engine (< 992px) --- */
@media (max-width: 991.98px) {
  #order-standard_cart {
    width: 100% !important;
    padding: 0 !important;
  }

  #order-standard_cart > .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin: 0 !important;
  }

  #order-standard_cart .cart-sidebar,
  .cart-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #order-standard_cart .cart-body,
  .cart-body {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #order-standard_cart .cart-sidebar .panel-sidebar {
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  /* Product Cards Grid */
  #order-standard_cart .products .row,
  #order-standard_cart .products .row-eq-height {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  #order-standard_cart .products .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #order-standard_cart .products .product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
  }

  #order-standard_cart .product-pricing .price {
    font-size: 24px !important;
  }

  #order-standard_cart .product-footer .btn-order-now {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }

  /* Configure Product Form & Sidebar */
  #order-standard_cart .cart-body > .row,
  #order-standard_cart .cart-body form > .row,
  #order-standard_cart form#frmConfigureProduct > .row,
  #order-standard_cart form#orderfrm > .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin: 0 !important;
  }

  #order-standard_cart .secondary-cart-body {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    float: none !important;
  }

  #order-standard_cart .secondary-cart-sidebar,
  #order-standard_cart #scrollingPanelContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    position: static !important;
    margin-top: 16px !important;
    padding: 0 !important;
    float: none !important;
  }

  #order-standard_cart #orderSummary,
  #order-standard_cart .order-summary {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    margin: 0 !important;
  }

  #order-standard_cart #btnCompleteProductConfig {
    width: 100% !important;
    font-size: 16px !important;
    padding: 14px !important;
  }

  /* Domain Search & Transfer */
  #order-standard_cart .domain-input-group {
    padding: 16px 14px !important;
  }

  #order-standard_cart .domain-input-group > .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #order-standard_cart .domain-input-group .col-sm-8,
  #order-standard_cart .domain-input-group .col-sm-2,
  #order-standard_cart .domain-input-group .col-sm-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #order-standard_cart .domain-input-group .domains-row {
    width: 100% !important;
  }

  #order-standard_cart .domain-input-group #btnCheckAvailability,
  #order-standard_cart .domain-input-group #btnTransferDomain,
  #order-standard_cart .domain-input-group button[type="submit"] {
    width: 100% !important;
    height: 46px !important;
    font-size: 15px !important;
  }

  #order-standard_cart #btnDomainContinue:not(.w-hidden):not(.hidden) {
    width: 100% !important;
    min-width: 0 !important;
    margin: 20px 0 !important;
  }

  #frmDomainChecker .input-group,
  #frmDomainTransfer .input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #frmDomainChecker .input-group .form-control,
  #frmDomainTransfer .input-group .form-control {
    width: 100% !important;
    border-radius: 8px !important;
    height: 46px !important;
  }

  #frmDomainChecker .input-group-btn,
  #frmDomainTransfer .input-group-btn {
    width: 100% !important;
    display: block !important;
  }

  #frmDomainChecker .input-group-btn .btn,
  #frmDomainTransfer .input-group-btn .btn {
    width: 100% !important;
    border-radius: 8px !important;
    height: 46px !important;
  }

  .default-captcha {
    max-width: 100% !important;
    overflow-x: auto !important;
    text-align: center !important;
    margin: 12px auto !important;
  }

  .default-captcha img {
    max-width: 100% !important;
    height: auto !important;
  }

  .spotlight-tlds .row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* View Cart Page */
  #order-standard_cart .view-cart-items-header {
    display: none !important;
  }

  #order-standard_cart .view-cart-items .item {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  #order-standard_cart #btnCheckout {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .spotlight-tlds .row {
    grid-template-columns: 1fr !important;
  }
}

/* --- 15.5 Client Area & Forms (< 992px) --- */
@media (max-width: 991.98px) {
  #main-body {
    padding: 16px 0 !important;
  }

  #main-body > .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #main-body > .container > .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin: 0 !important;
  }

  #main-body .sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    float: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }

  #main-body .main-content {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-lined h1 {
    font-size: 22px !important;
  }

  /* Domain Register Panel in Client Area */
  #registerDomainPanel form .input-group,
  .client-home-panels #registerDomainPanel form .input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #registerDomainPanel input[type="text"].form-control,
  .client-home-panels #registerDomainPanel input[type="text"].form-control {
    width: 100% !important;
    border-radius: 8px !important;
  }

  #registerDomainPanel .input-group-btn,
  .client-home-panels #registerDomainPanel .input-group-btn {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #registerDomainPanel .input-group-btn input,
  #registerDomainPanel .input-group-btn .btn,
  .client-home-panels #registerDomainPanel .input-group-btn input,
  .client-home-panels #registerDomainPanel .input-group-btn .btn {
    width: 100% !important;
  }

  /* Login / Register / Contact */
  .logincontainer,
  .registercontainer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 16px !important;
    margin: 16px auto !important;
    box-sizing: border-box !important;
  }

  .logincontainer form.login-form div[align="center"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .logincontainer .btn,
  .registercontainer .btn,
  .logincontainer #login {
    width: 100% !important;
    height: 46px !important;
    font-size: 15px !important;
  }

  form[action="contact.php"] {
    max-width: 100% !important;
    padding: 24px 16px !important;
    margin: 16px auto !important;
  }

  form[action="contact.php"] .btn {
    width: 100% !important;
    height: 46px !important;
    font-size: 15px !important;
  }

  /* DataTables & Tables */
  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    margin-bottom: 20px !important;
  }

  table.table {
    min-width: 520px !important;
  }

  .server-status table,
  table#serverStatusTable {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: left !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .dataTables_filter input {
    width: 100% !important;
    margin: 6px 0 0 0 !important;
  }

  .dataTables_info,
  .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    margin-top: 10px !important;
    width: 100% !important;
  }

  .pagination {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}

/* --- 15.6 Mobile Touch & Prevent iOS Safari Auto-Zoom (< 768px) --- */
@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select.form-control,
  textarea.form-control {
    font-size: 16px !important;
  }

  .btn {
    min-height: 42px !important;
    touch-action: manipulation !important;
  }

  .modal-dialog {
    margin: 12px auto !important;
    width: 95% !important;
    max-width: 95% !important;
  }
}