/*
 * HDC-Host24 – Modern Theme (Dark & Light Mode)
 * Overrides the base landing CSS for all front pages.
 * Dark mode is default; light mode via [data-theme="light"] on <html>.
 */

/* ============================================================
   CSS Variables
   ============================================================ */
:root {
  /* Accent */
  --accent:        #7c5cfc;
  --accent-dark:   #5333ed;
  --accent-glow:   rgba(124, 92, 252, 0.35);
  --accent-subtle: rgba(124, 92, 252, 0.12);
  --cyan:          #2cd4d9;
  --cyan-glow:     rgba(44, 212, 217, 0.25);

  /* Dark (default) */
  --bg:            #08061a;
  --bg-2:          #0e0b2e;
  --bg-card:       rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text-primary:  #f0eeff;
  --text-secondary:#a89fd6;
  --text-muted:    #6b629a;
  --nav-bg:        rgba(8,6,26,0.92);
  --nav-text:      #e0dbff;
  --topbar-bg:     #04031a;
  --topbar-text:   #9b94c9;
  --footer-bg:     #05041a;
  --modal-bg:      #110e30;
  --input-bg:      rgba(255,255,255,0.06);
  --input-border:  rgba(255,255,255,0.12);
  --input-text:    #e8e3ff;
  --btn-light-bg:  #1a1640;
  --badge-bg:      linear-gradient(135deg, #5333ed, #2cd4d9);
  --section-alt:   #0b0927;
  --shadow-card:   0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-glow:   0 0 40px rgba(124,92,252,0.15);
}

[data-theme="light"] {
  --bg:            #f4f3ff;
  --bg-2:          #eeeaff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8f7ff;
  --border:        rgba(83,51,237,0.1);
  --border-strong: rgba(83,51,237,0.2);
  --text-primary:  #0f0a2e;
  --text-secondary:#3d3270;
  --text-muted:    #7b71a8;
  --nav-bg:        rgba(255,255,255,0.96);
  --nav-text:      #1a1240;
  --topbar-bg:     #1a1240;
  --topbar-text:   #c8c0f0;
  --footer-bg:     #0e064a;
  --modal-bg:      #ffffff;
  --input-bg:      #ffffff;
  --input-border:  rgba(83,51,237,0.2);
  --input-text:    #0f0a2e;
  --btn-light-bg:  #ece8ff;
  --badge-bg:      linear-gradient(135deg, #5333ed, #7c5cfc);
  --section-alt:   #ede9ff;
  --shadow-card:   0 4px 24px rgba(83,51,237,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-glow:   0 0 30px rgba(83,51,237,0.08);
}

/* ============================================================
   Base Reset & Typography
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg) !important;
  color: var(--text-primary) !important;
  font-family: 'Rubik', 'Karla', system-ui, sans-serif !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; }
p { color: var(--text-secondary) !important; }
a { color: var(--accent); transition: color 0.2s; }
a:hover { color: var(--cyan); }

/* ============================================================
   Top Bar
   ============================================================ */
.xs-top-bar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 0 !important;
}
.xs-top-bar-info li p,
.xs-top-bar-info li a,
.top-menu a,
.xs-top-bar *  {
  color: var(--topbar-text) !important;
  font-size: 0.78rem !important;
}
.xs-top-bar-info li a:hover,
.top-menu a:hover { color: var(--cyan) !important; }
.xs-top-bar-info .icon { color: var(--accent) !important; }

/* ============================================================
   Main Navigation
   ============================================================ */
.header-transparent { background: transparent !important; }

.xs-header {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border) !important;
  transition: background 0.3s, border-color 0.3s !important;
}

.xs-header.sticky {
  background: var(--nav-bg) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

/* Nav links */
.nav-menu > li > a,
.nav-menu > .mega-menus > a {
  color: var(--nav-text) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  transition: color 0.2s, background 0.2s !important;
}
.nav-menu > li > a::before,
.nav-menu > li > a::after { display: none !important; }
.nav-menu > li > a:hover,
.nav-menu > li.active > a { color: var(--accent) !important; background: var(--accent-subtle) !important; }

/* Mega-Menu panel */
.megamenu-panel {
  background: var(--modal-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
  padding: 1.5rem !important;
  backdrop-filter: blur(20px) !important;
}
.megamenu-panel .media h4 { color: var(--text-primary) !important; font-size: 0.9rem !important; }
.megamenu-panel .media p { color: var(--text-muted) !important; font-size: 0.78rem !important; }
.megamenu-panel .media:hover h4 { color: var(--accent) !important; }

/* Menu tools */
.xs-menu-tools li a { color: var(--nav-text) !important; }
.xs-menu-tools li a:hover { color: var(--accent) !important; }

/* Nav toggle (mobile) */
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { background: var(--nav-text) !important; }

/* ============================================================
   Dark Mode Toggle Button
   ============================================================ */
.hdc-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--nav-text);
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  vertical-align: middle;
}
.hdc-theme-toggle:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   User Menu (top bar dropdown)
   ============================================================ */
.user-menu-dropdown {
  background: var(--modal-bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35) !important;
}
.user-menu-dropdown a { color: var(--text-secondary) !important; }
.user-menu-dropdown a:hover { background: var(--accent-subtle) !important; color: var(--text-primary) !important; }
.user-menu-divider { background: var(--border) !important; }
.user-menu-logout:hover { background: rgba(220,38,38,0.12) !important; color: #f87171 !important; }

/* ============================================================
   Dashboard Header Dropdowns (dark support)
   ============================================================ */
.db-drop-panel {
  background: var(--modal-bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}
.db-drop-panel::before { background: var(--modal-bg) !important; border-color: var(--border) !important; }
.db-drop-item { color: var(--text-secondary) !important; }
.db-drop-item:hover { background: var(--accent-subtle) !important; color: var(--text-primary) !important; }
.db-drop-item i { color: var(--text-muted) !important; }
.db-drop-item:hover i { color: var(--accent) !important; }
.db-drop-label { color: var(--text-muted) !important; }
.db-drop-section + .db-drop-section { border-top-color: var(--border) !important; }

/* ============================================================
   Hero / Inner Banner
   ============================================================ */
.xs-banner.banner-v7.inner-banner {
  background: linear-gradient(135deg, #05031a 0%, #130a40 60%, #0e0630 100%) !important;
  position: relative;
  overflow: hidden;
  padding: 100px 0 80px !important;
  min-height: 320px;
  display: flex;
  align-items: center;
}
.xs-banner.banner-v7.inner-banner::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-20%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(124,92,252,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.xs-banner.banner-v7.inner-banner::after {
  content: '';
  position: absolute;
  bottom: -40px; left: 10%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(44,212,217,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.banner-sub-title {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--cyan) !important;
  margin-bottom: 1rem !important;
}
.banner-title {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
}
.breadcrumbs li, .breadcrumbs li a { color: var(--text-muted) !important; font-size: 0.8rem !important; }
.breadcrumbs li a:hover { color: var(--accent) !important; }
.breadcrumbs li::before { color: var(--border-strong) !important; }

.welcome-bg { opacity: 0.08 !important; filter: grayscale(30%) !important; }
.background-anim { opacity: 0.08 !important; }

[data-theme="light"] .xs-banner.banner-v7.inner-banner {
  background: linear-gradient(135deg, #1a0a5e 0%, #2d1b9e 60%, #150770 100%) !important;
}

/* ============================================================
   Section Padding & Backgrounds
   ============================================================ */
.xs-section-padding {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.xs-bg-gray { background: var(--section-alt) !important; }

/* ============================================================
   Section Headings
   ============================================================ */
.xs-heading .heading-sub-title,
.heading-sub-title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 0.6rem !important;
  display: block;
}
.xs-heading .heading-title,
.heading-title {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text-primary) !important;
}
.xs-heading .heading-title span,
.heading-title span { color: var(--accent) !important; }
@media (min-width: 768px) {
  .xs-heading .heading-title,
  .heading-title { font-size: 2.25rem !important; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 0.7rem 1.6rem !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px var(--accent-glow) !important;
  color: #fff !important;
}
.btn-secondary {
  background: #fff !important;
  color: var(--accent-dark) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 0.7rem 1.6rem !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.btn-secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,255,255,0.15) !important;
}
.btn-outline-primary {
  border: 1.5px solid rgba(255,255,255,0.5) !important;
  color: #fff !important;
  background: transparent !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.7rem 1.6rem !important;
  transition: all 0.2s !important;
}
.btn-outline-primary:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ============================================================
   Pricing Cards (Home & generic)
   ============================================================ */
.xs-single-pricing {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  backdrop-filter: blur(12px) !important;
  visibility: visible !important;
  animation: none !important;
}
.xs-single-pricing:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-card), 0 0 40px var(--accent-glow) !important;
  border-color: var(--accent) !important;
}
.xs-single-pricing.active {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-card), 0 0 30px var(--accent-glow) !important;
}
.xs-single-pricing .pricing-header {
  padding: 2rem 1.75rem 1.25rem !important;
  text-align: center !important;
  position: relative !important;
  background: linear-gradient(180deg, rgba(124,92,252,0.06) 0%, transparent 100%) !important;
}
.xs-single-pricing .xs-title { color: var(--text-primary) !important; font-weight: 700 !important; font-size: 1.2rem !important; }
.xs-single-pricing .pricing-body { padding: 0 1.75rem 1.5rem !important; flex: 1 !important; }
.xs-single-pricing .pricing-body > p { color: var(--text-secondary) !important; font-size: 0.92rem !important; line-height: 1.65 !important; }
.xs-single-pricing .pricing-price h2 { color: var(--text-primary) !important; font-weight: 800 !important; font-size: 2.2rem !important; }
.xs-single-pricing .pricing-price > p { color: var(--text-muted) !important; font-size: 0.78rem !important; }
.xs-single-pricing .discount-price { color: var(--text-muted) !important; font-size: 0.8rem !important; }
.xs-single-pricing .pricing-badge {
  background: var(--badge-bg) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 0.3rem 0.7rem !important;
  position: absolute !important;
  top: 1rem !important; right: 1rem !important;
}
.xs-single-pricing .xs-list.bullet { list-style: none !important; padding-left: 0 !important; }
.xs-single-pricing .xs-list.bullet li {
  position: relative !important;
  padding-left: 1.3rem !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.88rem !important;
  color: var(--text-secondary) !important;
}
.xs-single-pricing .xs-list.bullet li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0.5em !important;
  width: 6px !important; height: 6px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
}
.xs-single-pricing .pricing-footer {
  padding: 1.25rem 1.75rem 1.75rem !important;
  border-top: 1px solid var(--border) !important;
}
.xs-single-pricing .pricing-footer .btn { width: 100% !important; }

/* ============================================================
   Service / Feature Blocks
   ============================================================ */
.xs-service-block {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 2rem 1.5rem !important;
  height: 100% !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
  visibility: visible !important;
  animation: none !important;
  backdrop-filter: blur(8px) !important;
}
.xs-service-block:hover {
  transform: translateY(-4px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 12px 36px var(--accent-glow) !important;
}
.xs-service-block .service-img {
  width: 52px !important; height: 52px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--accent-subtle) !important;
  border-radius: 14px !important;
  margin-bottom: 1.25rem !important;
  border: 1px solid rgba(124,92,252,0.2) !important;
}
.xs-service-block .service-img .icon { font-size: 1.4rem !important; color: var(--accent) !important; }
.xs-service-block .xs-title { font-size: 1.05rem !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; }
.xs-service-block .xs-title a { color: var(--text-primary) !important; }
.xs-service-block .xs-title a:hover { color: var(--accent) !important; }
.xs-service-block p { font-size: 0.88rem !important; color: var(--text-secondary) !important; line-height: 1.65 !important; margin: 0 !important; }
.home-infra .row > [class*="col-"] { margin-bottom: 1.5rem !important; }

/* ============================================================
   Why Choose Us Blocks
   ============================================================ */
.why-choose-us-block {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
  transition: transform 0.25s, border-color 0.25s !important;
  visibility: visible !important;
  animation: none !important;
}
.why-choose-us-block:hover { transform: translateY(-4px) !important; border-color: var(--accent) !important; }
.why-choose-us-block h4 { color: var(--text-primary) !important; font-weight: 700 !important; font-size: 1rem !important; margin: 1rem 0 0.5rem !important; }
.why-choose-us-block p { color: var(--text-secondary) !important; font-size: 0.88rem !important; }
.why-choose-us-block .choose-us-img img { filter: drop-shadow(0 4px 12px var(--accent-glow)) brightness(0.9) !important; }

/* ============================================================
   Call to Action
   ============================================================ */
.call-to-action-section {
  background: linear-gradient(135deg, #0e0630 0%, #2d1069 50%, #0a0926 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.call-to-action-section::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(124,92,252,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.call-to-action-section .call-to-action-content h2 { color: #fff !important; font-weight: 700 !important; font-size: 1.6rem !important; line-height: 1.5 !important; }
.call-to-action-section .xs-btn-wraper { display: flex !important; gap: 1rem !important; justify-content: center !important; flex-wrap: wrap !important; margin-top: 1.75rem !important; }
.call-to-action-section .icon-bg { opacity: 0.04 !important; }

[data-theme="light"] .call-to-action-section {
  background: linear-gradient(135deg, #1a0a5e 0%, #4822c4 50%, #150770 100%) !important;
}

/* ============================================================
   Team Section
   ============================================================ */
.xs-single-team {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 1.5rem !important;
  transition: transform 0.25s, border-color 0.25s !important;
}
.xs-single-team:hover { transform: translateY(-4px) !important; border-color: var(--accent) !important; }
.xs-single-team img { width: 100% !important; filter: grayscale(20%) !important; }
.team-bio h4 { color: var(--text-primary) !important; font-size: 0.95rem !important; font-weight: 600 !important; }
.team-bio p { color: var(--text-muted) !important; font-size: 0.8rem !important; }

/* ============================================================
   Forms (Login, Register, Contact, Forgot PW)
   ============================================================ */
.form-control {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: 10px !important;
  color: var(--input-text) !important;
  font-size: 0.9rem !important;
  padding: 0.7rem 1rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
label { color: var(--text-secondary) !important; font-size: 0.85rem !important; font-weight: 500 !important; margin-bottom: 0.4rem !important; display: block; }
.form-group { margin-bottom: 1.25rem !important; }

/* Login / Register wrapper card */
.xs-login-form,
.xs-register-form,
.account-login,
.signin-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 2.5rem !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(12px) !important;
}

/* ============================================================
   Contact Section
   ============================================================ */
.xs-contact-form,
.contact-form-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 2rem !important;
}

.contact-info-widget li a,
.contact-info-widget li p { color: var(--text-secondary) !important; }
.contact-info-widget li a:hover { color: var(--accent) !important; }

/* ============================================================
   Legal / Text Pages
   ============================================================ */
.legal-section h2,
.legal-section h3 { color: var(--text-primary) !important; }
.legal-section p,
.legal-section li { color: var(--text-secondary) !important; line-height: 1.8 !important; }

/* Generic text content in sections */
.xs-section-padding p { color: var(--text-secondary) !important; }
.xs-section-padding h2,
.xs-section-padding h3,
.xs-section-padding h4 { color: var(--text-primary) !important; }

/* ============================================================
   Root Server / VPS Page
   ============================================================ */
.vps-slider-section,
.dedicated-section {
  background: var(--bg-2) !important;
}

/* ============================================================
   Sidebar (offset info widget)
   ============================================================ */
.xs-sidebar-widget {
  background: var(--modal-bg) !important;
  border-left: 1px solid var(--border) !important;
}
.xs-overlay.xs-bg-black { background: rgba(0,0,0,0.7) !important; }
.close-side-widget { color: var(--text-secondary) !important; }
.close-side-widget:hover { color: var(--accent) !important; }
.widget-title { color: var(--text-primary) !important; font-weight: 700 !important; }
.sidebar-textwidget p { color: var(--text-secondary) !important; }
.xs-empty-content .xs-title { color: var(--text-secondary) !important; }

/* ============================================================
   Modal Popups (Search, Language)
   ============================================================ */
.modal-content {
  background: var(--modal-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  color: var(--text-primary) !important;
}
.xs-search-group .form-control { background: var(--input-bg) !important; color: var(--input-text) !important; }
.search-button { color: var(--text-secondary) !important; }
.search-button:hover { color: var(--accent) !important; }
.language-content p { color: var(--text-secondary) !important; }
.flag-lists li a { color: var(--text-primary) !important; }
.mfp-bg { background: rgba(0,0,0,0.85) !important; }

/* ============================================================
   Client / Partner Logos (Carousel)
   ============================================================ */
.single-client img {
  filter: grayscale(100%) brightness(0.6) invert(1) !important;
  opacity: 0.5 !important;
  transition: filter 0.2s, opacity 0.2s !important;
}
[data-theme="light"] .single-client img {
  filter: grayscale(100%) !important;
  opacity: 0.45 !important;
}
.single-client:hover img { filter: grayscale(0%) brightness(1) !important; opacity: 1 !important; }

/* ============================================================
   Changelog
   ============================================================ */
.changelog-item,
.xs-changelog-block {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* ============================================================
   Tables (generic)
   ============================================================ */
table { color: var(--text-primary) !important; }
thead { border-bottom: 2px solid var(--border) !important; }
th { color: var(--text-secondary) !important; font-weight: 600 !important; font-size: 0.8rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
td { color: var(--text-secondary) !important; border-bottom: 1px solid var(--border) !important; }
tr:hover td { background: var(--accent-subtle) !important; }

/* ============================================================
   Footer
   ============================================================ */
.xs-footer-section { background: var(--footer-bg) !important; }
.xs-footer-section .footer-group { background-image: none !important; background: var(--footer-bg) !important; }
.xs-footer-section p,
.xs-footer-section li { color: rgba(200,190,240,0.75) !important; font-size: 0.88rem !important; }
.xs-footer-section .widget-title { color: #fff !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-bottom: 1.25rem !important; }
.xs-footer-section .xs-list li a { color: rgba(180,170,220,0.8) !important; font-size: 0.85rem !important; transition: color 0.2s !important; }
.xs-footer-section .xs-list li a:hover { color: var(--cyan) !important; padding-left: 4px !important; }
.xs-footer-section .footer-bottom-bar { border-top: 1px solid rgba(255,255,255,0.08) !important; }
.xs-footer-section .copyright-text p { color: rgba(180,170,220,0.7) !important; font-size: 0.82rem !important; }
.xs-footer-section .copyright-text a { color: var(--cyan) !important; }
.xs-footer-section .copyright-text a:hover { color: #fff !important; }
.xs-footer-section::after { background: var(--footer-bg) !important; }

/* Social list in footer */
.social-list.version-3 li a {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(200,190,240,0.7) !important;
  border-radius: 10px !important;
  transition: all 0.25s !important;
}
.social-list.version-3 li a:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
  transform: translateY(-3px) !important;
}

/* ============================================================
   Preloader
   ============================================================ */
#preloader { background: var(--bg) !important; }
.spinner-border { border-color: var(--accent) !important; border-right-color: transparent !important; }

/* ============================================================
   VPS Slider / Rootserver Page
   ============================================================ */
.xs-vps-slider-item,
.xs-vps-block {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}
.xs-vps-slider-item h4,
.xs-vps-block h4 { color: var(--text-primary) !important; }
.xs-vps-slider-item p,
.xs-vps-block p { color: var(--text-secondary) !important; }

/* ============================================================
   Accordion / FAQ
   ============================================================ */
.panel { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; margin-bottom: 0.75rem !important; overflow: hidden !important; }
.panel-heading { background: var(--bg-card) !important; }
.panel-title a { color: var(--text-primary) !important; font-weight: 600 !important; font-size: 0.95rem !important; }
.panel-title a:hover { color: var(--accent) !important; }
.panel-body { color: var(--text-secondary) !important; background: var(--bg-card) !important; border-top: 1px solid var(--border) !important; }

/* ============================================================
   Intro Video block
   ============================================================ */
.intro-video { border-radius: 16px !important; overflow: hidden !important; border: 1px solid var(--border) !important; }

/* ============================================================
   Responsive Adjustments
   ============================================================ */
@media (max-width: 991px) {
  .nav-menus-wrapper { background: var(--modal-bg) !important; border: 1px solid var(--border) !important; }
  .nav-menu > li > a { border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
  .megamenu-panel { box-shadow: none !important; border-radius: 0 !important; border: none !important; border-top: 1px solid var(--border) !important; }
  .banner-title { font-size: 1.6rem !important; }
}
@media (max-width: 767px) {
  .xs-section-padding { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .banner-title { font-size: 1.4rem !important; }
  .xs-heading .heading-title { font-size: 1.5rem !important; }
}

/* ============================================================
   Utilities: glow text, gradient badge
   ============================================================ */
.hdc-glow-text {
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Smooth transitions for theme switch */
body,
.xs-header,
.xs-top-bar,
.xs-single-pricing,
.xs-service-block,
.why-choose-us-block,
.form-control,
.modal-content,
.xs-sidebar-widget {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* ============================================================
   CRITICAL: Kill the white skew/wedge separator from style.css
   .xs-banner.skew-bg::after uses border-bottom: 200px solid #FFFFFF
   ============================================================ */
.xs-banner.skew-bg::after {
  border-bottom-color: var(--bg) !important;
}
.xs-banner.banner-v7 + .pricing-section {
  margin-top: 0 !important;
}

/* ============================================================
   Global Fixes: Whitespace & Section Background Overrides
   from base style.css hardcoded whites
   ============================================================ */

/* style.css line 87: body */
/* Already covered by body rule above */

/* style.css line 462: mega-menu dropdown */
.xs-menus .megamenu-panel,
.xs-menus .nav-menus-wrapper .megamenu-panel,
.nav-menus-wrapper { background-color: var(--modal-bg) !important; }

/* style.css line 1372: offset sidebar */
.xs-sidebar-widget { background-color: var(--modal-bg) !important; }

/* style.css line 1577: domain search */
.domain-search-form-group { background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; }

/* style.css line 1982: pricing cards */
.xs-single-pricing { background-color: var(--bg-card) !important; }
.xs-single-pricing.active .btn:not([class*=btn-outline]) { background-color: var(--accent) !important; color: #fff !important; }

/* style.css line 2191: service blocks */
.xs-service-block { background-color: var(--bg-card) !important; }

/* style.css line 2405: feature group */
.feature-v2 .xs-feature-group { background-color: var(--bg-card) !important; }

/* style.css line 2628/2684: testimonial sections */
.xs-testimonial-section { background-color: var(--bg-2) !important; background-image: none !important; }
.xs-testimonial-section.testimonial-v3,
.xs-testimonial-section.testimonial-v5,
.xs-testimonial-section.testimonial-v7 { background-color: var(--bg-2) !important; background-image: none !important; }

/* All testimonial items */
.testimonial-slider .owl-item .xs-testimonial-item,
.testimonial-slider .owl-item .xs-testimonial-item::before,
.testimonial-slider .owl-item .xs-testimonial-item::after {
  background-color: var(--bg-card) !important;
}
.testimonial-slider .owl-item .xs-testimonial-item { border: 1px solid var(--border) !important; border-radius: 14px !important; }
.testimonial-slider .owl-item .xs-testimonial-item p { color: var(--text-secondary) !important; }
.testimonial-slider .owl-item .xs-testimonial-item .commentor-title { color: var(--text-primary) !important; }
.testimonial-slider .owl-item .xs-testimonial-item .commentor-info { color: var(--text-muted) !important; }

/* style.css line 2952: non-center testimonial items */
.testimonial-v7 .testimonial-slider .owl-item:not(.center) .xs-testimonial-item { background-color: var(--bg-card) !important; opacity: 0.6 !important; }
.testimonial-v7 .testimonial-slider .owl-item:not(.center) .xs-testimonial-item .round-avatar::before { background-color: var(--bg-2) !important; }

/* Gradient background behind testimonials in style.css */
.xs-testimonial-section.testimonial-v7 { background: var(--bg-2) !important; background-image: none !important; }

/* Testimonial background gradient (style.css uses #e9e7f0 gradient) */
.testimonial-v7,
.xs-testimonial-section.testimonial-v7 {
  background: var(--bg-2) !important;
  background-image: none !important;
}
/* ALL testimonial section variants */
.xs-testimonial-section,
.xs-testimonial-section.testimonial-v2,
.xs-testimonial-section.testimonial-v3,
.xs-testimonial-section.testimonial-v5,
.xs-testimonial-section.testimonial-v7 {
  background: var(--bg-2) !important;
  background-image: none !important;
}

/* style.css line 3293: pricing feature group */
.pricing-feature-group { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }

/* style.css line 3601: other cards */
/* Covered by general card rules */

/* style.css line 4031: table */
.xs-table { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }

/* style.css line 4730: woo wrapper */
.woo__wraper { background-color: var(--bg-card) !important; }

/* Kill all hardcoded white/light backgrounds from old theme */
section,
.xs-section-padding,
.xs-bg-gray,
.xs-client-section,
.xs-testimonial-section,
.why-choose-section,
.pricing-section,
.home-infra,
.landing-partners,
.landing-infra {
  background-color: transparent;
}

/* Each section gets proper themed background */
.xs-section-padding:not([class*="banner"]):not(.landing-cta):not(.call-to-action-section) {
  background: var(--bg) !important;
}
.xs-bg-gray,
.landing-infra,
.home-infra,
.why-choose-section {
  background: var(--section-alt) !important;
}
.landing-partners,
.xs-client-section {
  background: var(--bg) !important;
}

/* Testimonial section */
.xs-testimonial-section {
  background: var(--bg-2) !important;
}
.xs-testimonial-section .xs-testimonial-item .testimonial-content,
.xs-testimonial-item .testimonial-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 1.75rem !important;
  box-shadow: var(--shadow-card) !important;
}
.xs-testimonial-section p,
.testimonial-content p { color: var(--text-secondary) !important; }
.xs-testimonial-section .commentor-title,
.commentor-title { color: var(--text-primary) !important; font-weight: 700 !important; }
.xs-testimonial-section .commentor-info,
.commentor-info { color: var(--text-muted) !important; font-size: 0.8rem !important; }
.xs-testimonial-section .icon-quote { color: var(--accent) !important; opacity: 0.4 !important; }

/* Pricing section on landing page */
.pricing-section {
  background: var(--bg) !important;
}

/* Intro / About section on home */
.home-intro {
  background: var(--bg) !important;
}

/* Kill any leftover white backgrounds from Bootstrap or theme */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.card-header { background: rgba(255,255,255,0.04) !important; border-bottom: 1px solid var(--border) !important; color: var(--text-primary) !important; }
.card-body { color: var(--text-secondary) !important; }

/* Owl Carousel dots */
.owl-dots .owl-dot span { background: var(--border-strong) !important; }
.owl-dots .owl-dot.active span { background: var(--accent) !important; }

/* Root server / VPS page */
.rootserver-section,
.vps-plans-section { background: var(--bg) !important; }

/* 404 page */
.error-page-section,
.xs-error-page { background: var(--bg) !important; }
.error-page-section h1,
.error-page-section h2 { color: var(--text-primary) !important; }
.error-page-section p { color: var(--text-secondary) !important; }

/* Security / Legal / Static pages */
.legal-page-section,
.static-content-section { background: var(--bg) !important; }
.legal-page-section h1, .legal-page-section h2, .legal-page-section h3 { color: var(--text-primary) !important; }
.legal-page-section p, .legal-page-section li { color: var(--text-secondary) !important; }
.legal-page-section strong { color: var(--text-primary) !important; }
.legal-page-section a { color: var(--accent) !important; }

/* Scrollbar theming */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: rgba(124,92,252,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   Skew/Wave separators between sections: hide white gaps
   ============================================================ */
.skew-bg,
.xs-banner.skew-bg { overflow: hidden !important; }
.skew-bg::after,
.xs-section-padding::after { display: none !important; }

/* Remove white backgrounds from all section-level divs */
.xs-section-padding > .container,
.xs-section-padding > .row { background: transparent !important; }

/* Ensure body bg covers everything */
html, body {
  background-color: var(--bg) !important;
  min-height: 100%;
}

/* Fix any white gaps from style.css predefine */
.xs-testimonial-section.testimonial-v7 { background: var(--bg-2) !important; }
.xs-client-section { padding: 3rem 0 !important; }
.xs-client-section .container { background: transparent !important; }

/* ============================================================
   Contact Page
   ============================================================ */
.contact-info-group {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  transition: all 0.3s ease !important;
}
.contact-info-group:hover,
.contact-info-group.active {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px var(--accent-glow) !important;
}
.contact-info-group > span,
.contact-info-group > a { color: var(--text-secondary) !important; }
.contact-info-group h4 { color: var(--text-primary) !important; }
.contact-info-group a:hover { color: var(--accent) !important; }

.contact-info-box,
.xs-contact-block {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 1.75rem !important;
}
.contact-info-box h4,
.xs-contact-block h4 { color: var(--text-primary) !important; font-weight: 700 !important; }
.contact-info-box p,
.xs-contact-block p { color: var(--text-secondary) !important; }
.contact-info-box .icon,
.xs-contact-block .icon { color: var(--accent) !important; font-size: 1.5rem !important; }

/* Contact / xs form */
.xs-form .form-control,
.xs-form .select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  border-radius: 8px !important;
}
.xs-form .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
}
.xs-form label { color: var(--text-secondary) !important; }

/* Contact form */
textarea.form-control { min-height: 140px; resize: vertical; }

/* ============================================================
   Register / Login page
   ============================================================ */
.xs-login-form-section,
.auth-section {
  background: var(--bg) !important;
  padding: 4rem 0 !important;
}

/* xs-form-group wrapper card (login/register/contact) */
.xs-form-group {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 2.5rem !important;
  box-shadow: var(--shadow-card) !important;
}

/* Alert boxes */
.alert { border-radius: 10px !important; border: 1px solid var(--border) !important; }
.alert-warning { background: rgba(251,191,36,0.1) !important; border-color: rgba(251,191,36,0.25) !important; color: #fde68a !important; }
.alert-danger { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.25) !important; color: #fca5a5 !important; }
.alert-success { background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.25) !important; color: #86efac !important; }
.alert h4 { color: inherit !important; font-weight: 700 !important; }

/* Custom checkbox */
.custom-control-label { color: var(--text-secondary) !important; }
.custom-control-label::before { background: var(--input-bg) !important; border-color: var(--input-border) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--accent) !important; border-color: var(--accent) !important; }

/* Checkbox & radio theming */
.form-check-input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
}
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.form-check-label { color: var(--text-secondary) !important; }

/* Input group addon */
.input-group-text {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-muted) !important;
}

/* Select */
select.form-control {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}
select.form-control option { background: var(--modal-bg) !important; color: var(--text-primary) !important; }

/* ============================================================
   Rootserver / VPS Page specifics
   ============================================================ */
.xs-vps-slider-section { background: var(--bg) !important; }
.vps-plan-card,
.xs-vps-plan {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
}
.vps-plan-card h4 { color: var(--text-primary) !important; }
.vps-plan-card p { color: var(--text-secondary) !important; }

/* ============================================================
   Bootstrap Overrides (prevent Bootstrap 5 white defaults)
   ============================================================ */
.bg-light { background: var(--section-alt) !important; }
.bg-white { background: var(--bg-card) !important; }
.text-dark { color: var(--text-primary) !important; }
.text-muted { color: var(--text-muted) !important; }
.border { border-color: var(--border) !important; }
hr { border-color: var(--border) !important; opacity: 1 !important; }

/* ============================================================
   Nav menus wrapper (mobile open state)
   ============================================================ */
@media (max-width: 991px) {
  .nav-menus-wrapper { background: var(--modal-bg) !important; }
  .nav-menu > li > a { color: var(--nav-text) !important; }
  .megamenu-panel { background: var(--modal-bg) !important; }
  .xs-menus .nav-menus-wrapper { background: var(--modal-bg) !important; }
}