/* ============================================================
   Koode Theme for WHMCS 8.x
   Design System — koode.nexosrv.one
   ============================================================ */

/* --- Design Tokens --- */
:root {
  --bg:       #030712;
  --card:     #0f172a;
  --border:   #1e293b;
  --text:     #f8fafc;
  --muted:    #94a3b8;
  --cyan:     #06b6d4;
  --blue:     #2563eb;
  --green:    #10b981;
  --danger:   #ef4444;
  --warning:  #f59e0b;

  --gradient: linear-gradient(135deg, #06b6d4, #2563eb, #10b981);
  --radius:   0.75rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1rem;
  --transition: 0.15s cubic-bezier(.4,0,.2,1);

  --font-sans:    'Inter', system-ui, sans-serif;
  --font-display: 'Sora', system-ui, sans-serif;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

a {
  color: var(--cyan);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: #22d3ee; }

p { color: var(--muted); }

/* --- Navbar / Header --- */
.navbar,
#header,
nav.navbar {
  background: rgba(3, 7, 18, 0.95) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar-brand,
.navbar-brand img {
  max-height: 36px;
}

.navbar-nav > li > a,
.navbar .nav > li > a {
  color: var(--muted) !important;
  font-size: 0.875rem;
  transition: color var(--transition);
}
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
  color: var(--text) !important;
  background: transparent !important;
}

/* Dropdown */
.navbar .dropdown-menu {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  padding: 0.5rem;
}
.navbar .dropdown-menu > li > a {
  color: var(--muted) !important;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  transition: all var(--transition);
}
.navbar .dropdown-menu > li > a:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}

/* --- Buttons --- */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius);
  padding: 0.625rem 1.25rem;
  transition: all var(--transition);
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--gradient) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 6s ease infinite;
  color: #fff !important;
  border: none !important;
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(6,182,212,.3);
}

.btn-default,
.btn-secondary {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.btn-default:hover,
.btn-secondary:hover {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  background: rgba(6,182,212,.08) !important;
}

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

/* --- Cards & Panels --- */
.panel,
.well,
.portlet,
.portlet-body,
.service-box,
.product-box {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

.panel-heading,
.portlet > .portlet-title {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 1rem 1.25rem;
}

.panel-body { padding: 1.25rem; }

/* Card hover effect */
.panel:hover,
.portlet:hover {
  border-color: rgba(6,182,212,.3) !important;
  transform: translateY(-2px);
  transition: all var(--transition);
}

/* --- Forms & Inputs --- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(6,182,212,.5) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,.1) !important;
  outline: none;
}
.form-control::placeholder { color: var(--muted); opacity: 0.6; }

/* Fix sidebar select clipping */
.card-sidebar select.form-control,
.card-sidebar .form-control {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  height: auto !important;
  overflow: visible !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

label {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

/* --- Tables --- */
.table,
.table-list,
table.dataTable {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: var(--card) !important;
}
.table > thead > tr > th,
.table-list > thead > tr > th,
table.dataTable > thead > tr > th {
  background: rgba(6,182,212,.06) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.table > tbody > tr,
.table-list > tbody > tr,
table.dataTable > tbody > tr {
  background: var(--card) !important;
}
.table > tbody > tr:nth-child(even),
.table-list > tbody > tr:nth-child(even),
table.dataTable > tbody > tr:nth-child(even) {
  background: rgba(15,23,42,.6) !important;
}
.table > tbody > tr:hover,
.table-list > tbody > tr:hover,
table.dataTable > tbody > tr:hover {
  background: rgba(6,182,212,.05) !important;
}
.table > tbody > tr > td,
.table-list > tbody > tr > td,
table.dataTable > tbody > tr > td {
  border-top: 1px solid var(--border) !important;
  vertical-align: middle;
  color: var(--text) !important;
}
.table-striped > tbody > tr:nth-child(odd) > td {
  background: rgba(255,255,255,.02) !important;
}
.table-hover > tbody > tr:hover > td {
  background: rgba(6,182,212,.05) !important;
}

/* Table containers & wrappers */
.table-container,
.dataTables_wrapper,
.table-responsive {
  background: transparent !important;
  color: var(--muted) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
  color: var(--muted) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
}

/* Override theme.css exact selectors for table-list */
.dataTables_wrapper table.table-list {
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
}
.dataTables_wrapper table.table-list thead th {
  border-bottom: 2px solid var(--border) !important;
  background: rgba(6,182,212,.06) !important;
  color: var(--muted) !important;
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: rgba(6,182,212,.1) !important;
}
.dataTables_wrapper table.table-list tbody td {
  background: var(--card) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border) !important;
}
.dataTables_wrapper table.table-list tbody tr:nth-child(even) td {
  background: rgba(15,23,42,.6) !important;
}
.dataTables_wrapper table.table-list tbody tr:hover td {
  background: rgba(6,182,212,.08) !important;
}
.domain-pricing .tld-pricing-header div:nth-child(odd) {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
}
.domain-pricing .tld-pricing-header div {
  border-bottom-color: var(--border) !important;
}

/* --- Alerts --- */
.alert {
  border-radius: var(--radius) !important;
  border: 1px solid !important;
  font-size: 0.875rem;
}
.alert-success {
  background: rgba(16,185,129,.1) !important;
  border-color: rgba(16,185,129,.3) !important;
  color: #6ee7b7 !important;
}
.alert-danger,
.alert-error {
  background: rgba(239,68,68,.1) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #fca5a5 !important;
}
.alert-warning {
  background: rgba(245,158,11,.1) !important;
  border-color: rgba(245,158,11,.3) !important;
  color: #fcd34d !important;
}
.alert-info {
  background: rgba(6,182,212,.1) !important;
  border-color: rgba(6,182,212,.3) !important;
  color: #67e8f9 !important;
}

/* --- Badges & Labels --- */
.label, .badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
}
.label-success, .badge-success { background: rgba(16,185,129,.2); color: #6ee7b7; }
.label-danger,  .badge-danger  { background: rgba(239,68,68,.2);  color: #fca5a5; }
.label-warning, .badge-warning { background: rgba(245,158,11,.2); color: #fcd34d; }
.label-info,    .badge-info    { background: rgba(6,182,212,.2);  color: #67e8f9; }

/* --- Breadcrumbs --- */
.breadcrumb {
  background: transparent !important;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.breadcrumb > li + li::before { color: var(--border); }
.breadcrumb > .active { color: var(--text); }

/* --- Pagination --- */
.pagination > li > a,
.pagination > li > span {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  transition: all var(--transition);
}
.pagination > li > a:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
}

/* --- Tabs --- */
.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
}
.nav-tabs > li > a {
  color: var(--muted) !important;
  border: none !important;
  border-radius: 0;
  padding: 0.75rem 1rem;
  transition: color var(--transition);
}
.nav-tabs > li > a:hover { color: var(--text) !important; background: transparent !important; }
.nav-tabs > li.active > a {
  color: var(--cyan) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--cyan) !important;
}
.tab-content {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  padding: 1.25rem;
}

/* --- Sidebar --- */
#sidebar,
.sidebar-wrapper,
.sidebar {
  background: var(--card) !important;
  border-right: 1px solid var(--border) !important;
}
.sidebar .nav > li > a {
  color: var(--muted) !important;
  border-radius: var(--radius-sm);
  margin: 0.125rem 0.5rem;
  transition: all var(--transition);
  font-size: 0.875rem;
}
.sidebar .nav > li > a:hover,
.sidebar .nav > li.active > a {
  background: rgba(6,182,212,.1) !important;
  color: var(--cyan) !important;
}

/* --- Footer --- */
#footer,
footer {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.8rem;
  padding: 3.5rem 0 2.5rem;
}

/* --- Login page --- */
.login-logo { margin-bottom: 2rem; }
.login-wrapper,
.login-container {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
  padding: 2rem !important;
}

/* --- Dashboard / Client Area Home --- */
#client-area-home .panel { transition: all var(--transition); }

/* Stats boxes */
.stat-box,
.info-box {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --- Misc --- */
hr { border-color: var(--border); }
.text-muted { color: var(--muted) !important; }
.bg-primary { background: var(--cyan) !important; }
.bg-white { background: var(--card) !important; }
.bg-light { background: var(--card) !important; }
select option { background: var(--card); color: var(--text); }

/* TLD pricing rows (div-based grid table in cart) */
.tld-row {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.tld-row:nth-child(even) {
  background: rgba(15,23,42,.6) !important;
}
.tld-row:hover {
  background: rgba(6,182,212,.05) !important;
}
.tld-row small {
  color: var(--muted) !important;
}
.tld-sale-group {
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.tld-sale-group-hot {
  background: rgba(239,68,68,.2) !important;
  color: #fca5a5 !important;
}
.tld-sale-group-new {
  background: rgba(16,185,129,.2) !important;
  color: #6ee7b7 !important;
}
.tld-sale-group-sale {
  background: rgba(245,158,11,.2) !important;
  color: #fcd34d !important;
}

/* TLD pricing header row */
.tld-pricing-header {
  background: rgba(6,182,212,.06) !important;
  border-bottom: 2px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tld-pricing-header > div,
.tld-pricing-header .col-md-4,
.tld-pricing-header .col-md-8,
.tld-pricing-header .col-xs-4,
.tld-pricing-header .col-4,
.tld-pricing-header .tld-column {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* All rows inside bg-white pricing wrapper */
.bg-white .row,
.bg-white .col-md-4,
.bg-white .col-md-8,
.bg-white .col-xs-4,
.bg-white .col-4 {
  background: transparent !important;
  color: var(--text) !important;
}

/* Two-row-center (TLD name column) */
.two-row-center {
  color: var(--text) !important;
  text-align: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ============================================================
   Homepage Components
   ============================================================ */

/* --- Layout helpers --- */
.mb-section { margin-bottom: 4rem; }

/* Remove top padding on homepage only (where .home-welcome exists) */
section#main-body:has(.home-welcome) {
  padding-top: 0 !important;
}

.section-label-sm {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}

/* --- Hero welcome --- */
.home-welcome {
  position: relative;
  padding: 4rem 0 3rem;
  overflow: hidden;
}
.home-welcome::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6,182,212,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.home-welcome::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* --- Welcome badge --- */
.welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cyan);
  border-radius: 9999px;
  padding: 6px 16px;
  margin-bottom: 1.5rem;
  background: rgba(6,182,212,0.08);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.welcome-badge .dot {
  width: 8px;
  height: 8px;
  background: var(--cyan);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* --- Hero heading --- */
.home-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--text);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

/* --- Stats bar --- */
.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 3rem;
  border-top: 1px solid rgba(6,182,212,0.15);
}
.home-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.home-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--cyan);
  line-height: 1;
}
.home-stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* --- Feature cards --- */
.feature-card {
  background: rgba(6,182,212,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover {
  border-color: rgba(6,182,212,0.4);
  transform: translateY(-4px);
}
.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(6,182,212,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--cyan);
  flex-shrink: 0;
}
.feature-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}
.feature-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
  margin: 0;
}
.feature-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cyan);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.feature-cta:hover {
  color: #22d3ee;
  text-decoration: underline;
}

/* --- Action grid --- */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  .action-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .action-grid { grid-template-columns: 1fr; }
}

.action-cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.action-cell:hover {
  border-color: rgba(6,182,212,0.4);
  transform: translateY(-2px);
  text-decoration: none !important;
}
.action-icon {
  display: flex;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  color: var(--cyan);
  margin-bottom: 0.25rem;
}
.action-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.action-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

/* --- Animations --- */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* --- Gradient text utilities --- */
.gradient-text,
.text-gradient {
  background: linear-gradient(135deg, #06B6D4 0%, #2563EB 50%, #10B981 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

/* --- Ocultar barra de precio TLD destacado en homepage --- */
.tld-logos,
.featured-tlds-container,
.domain-pricing-promo-container {
  display: none !important;
}

/* ============================================================
   Domain Pricing Page — Dark Theme
   ============================================================ */

/* Spotlight TLD card */
.spotlight-tld,
.spotlight-tld-container,
.domain-pricing .spotlight-tld {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
}
.spotlight-tld .price,
.spotlight-tld-pricing {
  background: var(--cyan) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
}

/* Category filter badges */
.domain-pricing .badge,
.domain-categories .btn,
.domain-categories .category-btn,
.domain-pricing .label,
.category-filter .btn {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  transition: all var(--transition);
}
.domain-pricing .badge:hover,
.domain-pricing .badge.active,
.domain-categories .btn:hover,
.domain-categories .btn.active,
.category-filter .btn:hover,
.category-filter .btn.active {
  background: rgba(6,182,212,.15) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

/* Main pricing table */
.domain-pricing table,
.domain-pricing .table,
.domain-pricing .dataTables_wrapper table {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}
.domain-pricing table thead th,
.domain-pricing .table thead th {
  background: rgba(6,182,212,.06) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.domain-pricing table tbody tr,
.domain-pricing .table tbody tr {
  background: var(--card) !important;
  border-color: var(--border) !important;
  transition: background var(--transition);
}
.domain-pricing table tbody tr:nth-child(even) {
  background: rgba(15,23,42,.6) !important;
}
.domain-pricing table tbody tr:hover {
  background: rgba(6,182,212,.05) !important;
}
.domain-pricing table tbody td,
.domain-pricing .table tbody td {
  border-top: 1px solid var(--border) !important;
  color: var(--text) !important;
  vertical-align: middle;
}

/* TLD name badges inside table */
.domain-pricing table .badge,
.domain-pricing table .label {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}

/* DataTables controls */
.domain-pricing .dataTables_wrapper .dataTables_filter input,
.domain-pricing .dataTables_wrapper .dataTables_length select {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  padding: 0.4rem 0.75rem;
}
.domain-pricing .dataTables_wrapper .dataTables_filter label,
.domain-pricing .dataTables_wrapper .dataTables_length label,
.domain-pricing .dataTables_wrapper .dataTables_info {
  color: var(--muted) !important;
}
.domain-pricing .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition);
}
.domain-pricing .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}
.domain-pricing .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
}

/* Currency dropdown */
.domain-pricing select,
.domain-pricing .currency-selector select {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}

/* Page header / description text */
.domain-pricing h2,
.domain-pricing h3,
.domain-pricing .domain-pricing-header {
  color: var(--text) !important;
}
.domain-pricing p {
  color: var(--muted) !important;
}

/* "N/A" and empty cells */
.domain-pricing .not-available,
.domain-pricing .na {
  color: rgba(148,163,184,.4) !important;
}

/* TLD filter badges */
.domain-pricing .tld-filters .badge,
.tld-filters .badge {
  background: rgba(15,23,42,.8) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  padding: 0.35rem 0.75rem;
  margin: 0.2rem;
  font-size: 0.78rem;
  border-radius: 9999px;
  transition: all var(--transition);
  cursor: pointer;
}
.domain-pricing .tld-filters .badge:hover,
.tld-filters .badge:hover,
.tld-filters .badge.active {
  background: rgba(6,182,212,.15) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

/* Badge secondary override */
.badge-secondary {
  background: rgba(15,23,42,.8) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

/* Featured TLD cards on pricing page */
.featured-tld {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}
.featured-tld .img-container {
  background: transparent !important;
}

/* Tablelist wrapper */
.domain-pricing #tableLoading,
#tableDomainPricing_wrapper {
  color: var(--muted) !important;
}
#tableDomainPricing_wrapper .dataTables_filter input {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}
#tableDomainPricing_wrapper .dataTables_length select {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}
#tableDomainPricing_wrapper .dataTables_info {
  color: var(--muted) !important;
}
#tableDomainPricing_wrapper .paginate_button {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
#tableDomainPricing_wrapper .paginate_button.current,
#tableDomainPricing_wrapper .paginate_button:hover {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
}

/* Table itself */
#tableDomainPricing {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}
#tableDomainPricing thead th {
  background: rgba(6,182,212,.06) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#tableDomainPricing tbody tr {
  background: var(--card) !important;
}
#tableDomainPricing tbody tr:nth-child(even) {
  background: rgba(15,23,42,.6) !important;
}
#tableDomainPricing tbody tr:hover {
  background: rgba(6,182,212,.05) !important;
}
#tableDomainPricing tbody td {
  border-top: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* ============================================================
   Cart / Domain Registration — Dark Theme
   ============================================================ */

/* Yellow/gradient domain search box */
.domain-checker-bg {
  background: var(--card) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 2.5rem 2rem !important;
}
.domain-checker-container {
  background: transparent !important;
}

/* Input group wrapper */
.domain-checker-bg .input-group,
.domain-checker-bg .input-group-lg,
.domain-checker-bg .input-group-box {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: none !important;
}

/* Search input */
.domain-checker-bg .input-group .form-control,
.domain-checker-bg .input-group input[type="text"],
#inputDomain {
  background: transparent !important;
  border: none !important;
  color: var(--text) !important;
  font-size: 1rem !important;
  padding: 0.85rem 1.25rem !important;
  height: auto !important;
  box-shadow: none !important;
}
#inputDomain::placeholder {
  color: var(--muted) !important;
  opacity: 0.5;
}
#inputDomain:focus {
  outline: none !important;
  box-shadow: none !important;
}
.domain-checker-bg .input-group:focus-within {
  border-color: rgba(6,182,212,.5) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,.1) !important;
}

/* Search button */
.domain-checker-bg .input-group-btn,
.domain-checker-bg .input-group-append {
  border: none !important;
}
#btnCheckAvailability,
.domain-checker-bg .input-group .btn-primary {
  background: var(--gradient) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 6s ease infinite;
  border: none !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.85rem 2rem !important;
  height: auto !important;
  margin: 0 !important;
}
#btnCheckAvailability:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px rgba(6,182,212,.3);
}



/* Domain lookup results */
.domain-lookup-result,
.domain-lookup-result .list-group-item,
#DomainSearchResults .list-group-item {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.domain-lookup-result .list-group-item:hover,
#DomainSearchResults .list-group-item:hover {
  background: rgba(6,182,212,.05) !important;
}

/* Domain available/unavailable/error states */
.domain-checker-available,
.domain-checker-unavailable,
.domain-checker-invalid {
  color: var(--text) !important;
}
.domain-checker-result-headline {
  color: var(--text) !important;
}
.domain-price {
  color: var(--cyan) !important;
}
.domain-suggestion {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* Domain promo box */
.domain-promo-box {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}

/* TLD pricing header in cart */
.tld-pricing-header {
  background: var(--card) !important;
}
.tld-pricing-header .col-xs-2,
.tld-pricing-header .col-sm-2,
.tld-pricing-header .col-xs-4,
.tld-pricing-header .col-sm-4,
.tld-pricing-header > div {
  background-color: var(--card) !important;
  border-bottom-color: var(--border) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
.tld-pricing-header div:nth-child(odd) {
  background-color: rgba(6,182,212,.06) !important;
  border-color: var(--border) !important;
}

/* TLD columns / rows */
.tld-column {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.tld-column:nth-child(even) {
  background: rgba(15,23,42,.6) !important;
}

/* Category filter badges in cart */
.domain-pricing .badge-secondary,
.domain-pricing .badge {
  background: rgba(15,23,42,.8) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.domain-pricing .badge:hover,
.domain-pricing .badge.active {
  background: rgba(6,182,212,.15) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

/* Header lined */
.header-lined {
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
/* Hide duplicate heading on transfer page */
.header-lined + .sidebar-categories-collapsed + .text-center > h2.font-size-30 {
  display: none !important;
}
#order-standard_cart .cart-body > .text-center > h2.font-size-30 {
  display: none !important;
}

/* Order form general overrides */
.order-form .panel,
.order-form .card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
.order-form .panel-heading,
.order-form .card-header {
  background: transparent !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}

/* List group items (used in search results) */
.list-group-item {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.list-group-item:hover {
  background: rgba(6,182,212,.05) !important;
}

/* Domain searching loader */
.domain-searching,
.domain-lookup-loader {
  color: var(--muted) !important;
}

/* ============================================================
   Registration Form — Dark Theme
   ============================================================ */
#registration label {
  color: var(--muted) !important;
}
#registration .sub-heading {
  border-top-color: var(--border) !important;
}
#registration .sub-heading span {
  background: var(--card) !important;
  color: var(--muted) !important;
}
#registration .field,
#registration .form-control {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
#registration .field:focus,
#registration .form-control:focus {
  border-color: rgba(6,182,212,.5) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,.1) !important;
}
#registration .prepend-icon .field-icon {
  color: var(--muted) !important;
}
#registration .field-help-text {
  color: var(--muted) !important;
  font-size: 0.8rem;
}
#registration .field-error-msg {
  color: #f87171 !important;
}
/* Steps / progress bar */
.progress-tracker .step,
.registration-steps .step {
  color: var(--muted) !important;
}
.progress-tracker .step.active,
.registration-steps .step.active {
  color: var(--cyan) !important;
}
/* Social login buttons */
.btn-social {
  border-color: var(--border) !important;
}

/* ============================================================
   Cart View — Dark Theme
   ============================================================ */

/* Cart items header */
.view-cart-items-header {
  background: rgba(6,182,212,.06) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .06em;
}

/* Cart items and body */
.view-cart-items {
  border-color: var(--border) !important;
}
.cart-body,
.secondary-cart-body {
  color: var(--text) !important;
}

/* Empty cart */
.view-cart-empty {
  color: var(--muted) !important;
}

/* Promo code input */
.promo .field,
.promo .form-control,
#inputPromotionCode {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
#inputPromotionCode:focus {
  border-color: rgba(6,182,212,.5) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,.1) !important;
}
.promo .field-icon {
  color: var(--muted) !important;
}

/* Tabs (Promo / Tax) */
.view-cart-tabs .nav-tabs {
  border-bottom-color: var(--border) !important;
}
.view-cart-tabs .nav-link {
  color: var(--muted) !important;
}
.view-cart-tabs .nav-link.active {
  color: var(--cyan) !important;
  border-bottom: 2px solid var(--cyan) !important;
  background: transparent !important;
}

/* Order summary sidebar — override orderform style.css */
.order-summary,
#order-standard_cart .order-summary {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 3px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
}
#order-standard_cart .summary-container {
  background-color: var(--card) !important;
  color: var(--text) !important;
}
#order-standard_cart .order-summary h2 {
  color: #fff !important;
  background: rgba(6,182,212,.15) !important;
}
#order-standard_cart .order-summary .summary-totals {
  border-color: var(--border) !important;
}
#order-standard_cart .order-summary .total-due-today .amt {
  color: var(--cyan) !important;
}

/* Totals */
.bordered-totals,
.subtotal,
.total-due-today {
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.recurring-totals {
  color: var(--muted) !important;
}

/* Checkout button */
.btn-checkout,
#order-standard_cart .btn-checkout {
  background: var(--gradient) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 6s ease infinite;
  border: none !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.btn-checkout:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px rgba(6,182,212,.3);
}

/* ============================================================
   Global — Hide "Powered by"
   ============================================================ */
p:has(> a[href="https://www.whmcs.com/"]) {
  display: none !important;
}
/* Fallback for browsers without :has */
a[href="https://www.whmcs.com/"] {
  display: none !important;
}

/* ============================================================
   Login Page — Dark Theme
   ============================================================ */

/* Login card container */
.login-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
.login-form h1,
.login-form h2,
.login-form h3 {
  color: var(--text) !important;
}
.login-form p {
  color: var(--muted) !important;
}

/* Login inputs — input-group-merge structure */
.login-form .input-group,
.login-form .input-group-merge {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
}
.login-form .input-group-merge:focus-within {
  border-color: rgba(6,182,212,.5) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,.1) !important;
}
.login-form .input-group .form-control,
.login-form .input-group .field {
  background: transparent !important;
  border: none !important;
  color: var(--text) !important;
  font-size: 0.9rem !important;
  box-shadow: none !important;
}
.login-form .input-group-prepend,
.login-form .input-group-append {
  background: transparent !important;
  border: none !important;
}
.login-form .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
}
.login-form .btn-reveal-pw,
.login-form .btn-default {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.login-form label {
  color: var(--muted) !important;
  font-size: 0.85rem;
}

/* Login button — brand gradient */
.login-form .btn-primary,
.login-form input[type="submit"],
.login-form button[type="submit"] {
  background: var(--gradient) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 6s ease infinite;
  border: none !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 0.65rem 1.5rem !important;
  font-size: 0.9rem !important;
}
.login-form .btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px rgba(6,182,212,.3);
}

/* Remember me checkbox */
.login-form .custom-control-label,
.login-form .form-check-label {
  color: var(--muted) !important;
  font-size: 0.85rem;
}

/* Password toggle eye icon */
.login-form .toggle-password,
.login-form .input-group-append .btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-left: none !important;
  color: var(--muted) !important;
}

/* Links */
.login-form a {
  color: var(--cyan) !important;
}
.login-form a:hover {
  text-decoration: underline;
}

/* Social login buttons */
.social-signin-btns .btn-social {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  font-weight: 500;
}
.social-signin-btns .btn-facebook {
  background: #1877f2 !important;
  border-color: #1877f2 !important;
  color: #fff !important;
}
.social-signin-btns .btn-google,
.g_id_signin {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text) !important;
}

/* ============================================================
   Contact Page & Card Forms — Dark Theme
   ============================================================ */

/* Card with extra-padding (contact, etc) */
.card-body.extra-padding .form-control,
.card-body.extra-padding input[type="text"],
.card-body.extra-padding input[type="email"],
.card-body.extra-padding textarea {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}
.card-body.extra-padding .form-control:focus {
  border-color: rgba(6,182,212,.5) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,.1) !important;
}

/* Labels in card forms */
.card-body.extra-padding .col-form-label,
.card-body.extra-padding label {
  color: var(--text) !important;
}

/* Submit button in card forms — brand gradient */
.card-body.extra-padding .btn-primary {
  background: var(--gradient) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 6s ease infinite;
  border: none !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.card-body.extra-padding .btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px rgba(6,182,212,.3);
}

/* ============================================================
   Domain Search Results — Dark Theme
   ============================================================ */

/* Result headline area */
#order-standard_cart .domain-checker-result-headline,
.domain-checker-result-headline {
  color: var(--text) !important;
}
#order-standard_cart .domain-checker-available,
.domain-checker-available {
  color: var(--cyan) !important;
}

/* Spotlight TLDs row */
#order-standard_cart .spotlight-tlds,
.spotlight-tlds {
  background: var(--card) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
}
.spotlight-tld {
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
}
.spotlight-tld-container {
  border: none !important;
}
/* Remove any card/panel borders in search results area */
#order-standard_cart .domain-lookup-primary-results,
#order-standard_cart #searchDomainInfo,
#searchDomainInfo {
  border: none !important;
  background: transparent !important;
}

/* Suggested domains panel */
#order-standard_cart .domain-suggestions,
.domain-suggestions {
  background: var(--card) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
}
#order-standard_cart .domain-suggestions .panel-heading,
.domain-suggestions .panel-heading,
.domain-suggestions .card-header {
  background: rgba(6,182,212,.06) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Suggested domain rows */
.domain-suggestion.list-group-item {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.domain-suggestion.list-group-item:hover {
  background: rgba(6,182,212,.05) !important;
}
.domain-suggestion .price {
  color: var(--text) !important;
}
.domain-suggestion .btn {
  border-color: var(--border) !important;
  color: var(--text) !important;
  background: var(--card) !important;
}
.domain-suggestion .btn:hover {
  background: rgba(6,182,212,.1) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

/* More suggestions footer */
.more-suggestions,
.panel-footer.card-footer {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

/* "Añadir a Carro" button in results */
.domain-checker-available .btn-primary,
#order-standard_cart .available .btn-primary {
  background: var(--gradient) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 6s ease infinite;
  border: none !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
}