/* ============================================================
   HostMeerkat — Theme CSS
   Dark / light mode semantic variables and overrides.
   Loads after base.css, before components.css.
   ============================================================ */

/* ── DARK MODE (DEFAULT) ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-page:       #101213;
  --bg-primary:    #101213;
  --bg-nav:        rgba(16,18,19,.85);
  --bg-card:       #111827;
  --bg-card-hover: #1e2022;
  --bg-input:      #1a1c1e;
  --bg-secondary:  #2b2f32;
  --bg-tag:        rgba(255,255,255,.06);

  /* Text */
  --text-primary:   #ffffff;
  --text-secondary: #e6e8e9;
  --text-muted:     #686a6b;
  --text-link:      #1873d3;

  /* Borders */
  --border-color:      rgba(255,255,255,.08);
  --border-color-soft: rgba(255,255,255,.04);

  /* Navbar */
  --nav-link-color:  #686a6b;
  --nav-link-hover:  #ffffff;
  --nav-bg-blur:     rgba(16,18,19,.80);

  /* Hero */
  --hero-text:        #ffffff;
  --hero-subtext:     #e6e8e9;
  --hero-btn-bg:      #1873d3;
  --hero-btn-text:    #ffffff;
  --hero-switcher-bg: #2b2f32;

  /* Feature cards */
  --card-bg:     rgba(255,255,255,.03);
  --card-border: rgba(255,255,255,.07);
  --card-title:  #ffffff;
  --card-text:   #686a6b;

  /* Pricing */
  --price-bg:         rgba(10,16,30,.94);
  --price-border:     rgba(255,255,255,.08);
  --price-text:       #ffffff;
  --price-text-muted: rgba(255,255,255,.56);
  --pricing-card-bg:  rgba(10,16,30,.94);
  --border-card:      rgba(255,255,255,.08);

  /* Migration / steps */
  --step-bg:     rgba(255,255,255,.03);
  --step-border: rgba(255,255,255,.07);

  /* FAQ */
  --faq-bg:     rgba(255,255,255,.03);
  --faq-border: rgba(255,255,255,.07);
  --faq-text:   rgba(255,255,255,.55);

  /* Payment */
  --pay-bg:      linear-gradient(160deg,#111827 0%,#06090f 100%);
  --pay-border:  rgba(255,255,255,.07);
  --pay-text:    rgba(255,255,255,.5);

  /* Footer */
  --footer-bg:         #1a1c1e;
  --footer-bottom-bg:  #2b2f32;
  --footer-link-color: #e6e8e9;
  --footer-link-hover: #ffffff;

  /* Scrollbar */
  --scrollbar-thumb: #2b2f32;
  --scrollbar-track: #101213;
}

/* ── LIGHT MODE ──────────────────────────────────────────── */
body.light-mode {
  --bg-page:       #f0f4f8;
  --bg-primary:    #f0f4f8;
  --bg-nav:        rgba(255,255,255,.90);
  --bg-card:       #ffffff;
  --bg-card-hover: #f5f7fa;
  --bg-input:      #ffffff;
  --bg-secondary:  #e2e8f0;
  --bg-tag:        rgba(0,0,0,.04);

  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #64748b;
  --text-link:      #1873d3;

  --border-color:      rgba(0,0,0,.10);
  --border-color-soft: rgba(0,0,0,.04);

  --nav-link-color: #475569;
  --nav-link-hover: #0f172a;
  --nav-bg-blur:    rgba(255,255,255,.90);

  --hero-text:        #0f172a;
  --hero-subtext:     #334155;
  --hero-btn-bg:      #1873d3;
  --hero-btn-text:    #ffffff;
  --hero-switcher-bg: #e2e8f0;

  --card-bg:     rgba(0,0,0,.02);
  --card-border: rgba(0,0,0,.08);
  --card-title:  #0f172a;
  --card-text:   #64748b;

  --price-bg:         rgba(255,255,255,.95);
  --price-border:     rgba(0,0,0,.08);
  --price-text:       #0f172a;
  --price-text-muted: rgba(0,0,0,.55);
  --pricing-card-bg:  rgba(255,255,255,.95);
  --border-card:      rgba(0,0,0,.08);

  --step-bg:     rgba(0,0,0,.02);
  --step-border: rgba(0,0,0,.08);

  --faq-bg:     rgba(0,0,0,.02);
  --faq-border: rgba(0,0,0,.08);
  --faq-text:   rgba(0,0,0,.55);

  --pay-bg:     linear-gradient(160deg,#f8fafc 0%,#f1f5f9 100%);
  --pay-border: rgba(0,0,0,.08);
  --pay-text:   rgba(0,0,0,.5);

  --footer-bg:         #e2e8f0;
  --footer-bottom-bg:  #cbd5e1;
  --footer-link-color: #334155;
  --footer-link-hover: #0f172a;

  --scrollbar-thumb: #cbd5e1;
  --scrollbar-track: #f0f4f8;
}

/* ── APPLY VARIABLES TO ELEMENTS ─────────────────────────── */
body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* body.light-mode (0,1,1) beats any per-page CSS body (0,0,1) that sets dark bg/color */
body.light-mode {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

/* Navbar */
#fixedR {
  background: var(--nav-bg-blur);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.3s ease;
}
.navbar-dark .navbar-nav .nav-link { color: var(--nav-link-color); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: var(--nav-link-hover); }
.dropdown-menu { background: var(--bg-card); border: 1px solid var(--border-color); }
.dropdown-menu .dropdown-item { color: var(--text-secondary); }
.dropdown-menu .dropdown-item:hover { color: var(--text-primary); background: var(--bg-secondary); }

/* Logo text colour in light mode */
body.light-mode .navbar-dark .navbar-brand h2 { color: var(--text-primary); }
body.light-mode .navbar-dark .navbar-nav .nav-link { color: var(--nav-link-color); }
body.light-mode .offcanvas { background: var(--bg-card); }
body.light-mode .navbar-toggler { color: var(--text-primary) !important; }

/* Hero */
.header h2       { color: var(--hero-text); }
.header p        { color: var(--hero-subtext); }
.header .btn-swicher { background: var(--hero-switcher-bg); }
.header .btn-swicher .nav-link { color: var(--text-primary); }

/* Feature cards */
.feature-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}
.feature-title { color: var(--card-title); }
.feature-text  { color: var(--card-text); }

/* Products / reviews */
.products        { background: var(--bg-card); }
.products .card  { background: var(--bg-card); }
.reviews  .card  { background: var(--bg-card); }
.reviews  .card h3 { color: var(--text-primary); }
.reviews  .card p  { color: var(--text-muted); }

/* VPS plans */
.vps_plans .card { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
.vps_plans .card .value { color: var(--text-primary); }
.vps_plans .card .label { color: var(--text-muted); }
.vps_plans .slider { background: var(--bg-secondary); }

/* Web plans */
.web_plans .card { background: var(--bg-card); color: var(--text-secondary); }
.web_plans .card h2 { color: var(--text-primary); }

/* Footer */
.footer-wrap        { background: var(--footer-bg); }
.footer_bottom      { background: var(--footer-bottom-bg); color: var(--text-secondary); }
.footer_links h4    { color: var(--text-primary); }
.footer_links ul li a { color: var(--footer-link-color); }
.footer_links ul li a:hover { color: var(--footer-link-hover); }
.footer_about p     { color: var(--text-secondary); }

/* Light mode footer — specificity (0,2,x) beats per-page CSS (0,1,x) hardcoded dark values */
/* Pricing section — overrides hardcoded dark gradient in base.css */
body.light-mode .hmk-pricing-section { background: var(--bg-page); }
body.light-mode .pricing-section-bg { background: var(--bg-secondary); }

body.light-mode .footer-wrap { background: var(--footer-bg); }
body.light-mode .footer_bottom { background: var(--footer-bottom-bg); color: var(--text-secondary); }
body.light-mode .footer_links h4 { color: var(--text-primary); }
body.light-mode .footer_links ul li a { color: var(--footer-link-color); }
body.light-mode .footer_links ul li a:hover { color: var(--footer-link-hover); text-shadow: none; }
body.light-mode .footer_about p { color: var(--text-secondary); }
body.light-mode .footer_bottom p { color: var(--text-secondary); }
body.light-mode .footer-horizon { box-shadow: none; opacity: 0.35; }
body.light-mode .footer_about h2.text-white { color: #0f172a !important; }

/* Pricing */
.hmk-price-card {
  background: var(--price-bg);

}
.hmk-plan-name  { color: var(--price-text); }
.hmk-plan-text  { color: var(--price-text-muted); }
.hmk-price      { color: var(--price-text); }
.hmk-year-text  { color: var(--price-text-muted); }
.hmk-toggle-wrap { background: var(--bg-secondary); border-color: var(--border-color); }
.hmk-toggle-btn  { color: var(--text-muted); }
.hmk-feature-list li { color: var(--text-secondary); }

/* Steps */
.hmk-step-card { background: var(--step-bg); border-color: var(--step-border); }
.hmk-step-card h3 { color: var(--text-primary); }
.hmk-step-card p  { color: var(--text-muted); }

/* Migration */
.hmk-migration-card {
  background: var(--step-bg);
  border-color: var(--step-border);
}
.hmk-migration-card h3 { color: var(--text-primary); }
.hmk-migration-card p  { color: var(--text-muted); }

/* FAQ */
.hmk-faq-item {
  background: var(--faq-bg);
  border-color: var(--faq-border);
}
.hmk-faq-item summary { color: var(--text-primary); }
.hmk-faq-item p       { color: var(--faq-text); }
.hmk-faq-help-card {
  background: var(--faq-bg);
  border-color: var(--faq-border);
}
.hmk-faq-help-card h3 { color: var(--text-primary); }
.hmk-faq-help-card p  { color: var(--faq-text); }

/* Payment */
.hmk-payment-card {
  background: var(--pay-bg);
  border-color: var(--pay-border);
}
.hmk-payment-card span { color: var(--pay-text); }
body.light-mode .hmk-payment-card i { color: #475569; }

/* Testimonials */
.hmk-review-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}
.hmk-review-text  { color: var(--text-muted); }
.hmk-author-name  { color: var(--text-primary); }
.hmk-author-role  { color: var(--text-muted); }

/* Compare table */
.hmk-compare-table th { color: var(--text-muted); background: var(--bg-secondary); }
.hmk-compare-table td { color: var(--text-secondary); }
.hmk-compare-table { border-color: var(--border-color); }
.hmk-compare-table-wrapper { border-color: var(--border-color); }

/* Legal */
.legal p, .legal ul li { color: var(--text-secondary); }
.legal .legal_heading  { border-color: var(--border-color); }
.legal .legal_heading span { color: var(--text-primary); background-color: var(--bg-page); }

/* cPanel */
body.light-mode .cpanel-section  { background: var(--bg-page); }
body.light-mode .desc-card       { background: var(--bg-card); border-color: var(--border-color); }
body.light-mode .desc-card p     { color: var(--text-secondary); }
body.light-mode .feat-item       { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
body.light-mode .stat-box        { background: var(--bg-card); border-color: var(--border-color); }
body.light-mode .stat-box span   { color: var(--text-secondary); }
body.light-mode .screenshot-wrap { border-color: var(--border-color); }
body.light-mode .browser-bar     { background: var(--bg-secondary); }
body.light-mode .cpanel-pill     { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
body.light-mode .cta-inner       { background: var(--bg-card); border-color: var(--border-color); }
body.light-mode .cta-text h3     { color: var(--text-primary); }
body.light-mode .cta-text p      { color: var(--text-muted); }

/* FAQ accordion (old style) */
body.light-mode .faq .accordion-item { background: var(--bg-card); }
body.light-mode .faq .accordion-button:not(.collapsed) { background: #1873d3; color: #fff; }
body.light-mode .faq .accordion-button { background: var(--bg-secondary); color: var(--text-primary); }
body.light-mode .faq .accordion-body   { color: var(--text-secondary); }

/* Sale banner */
body.light-mode .sale_banner { background: #1873d3; }

/* Support widget */
body.light-mode .support-popup { background: var(--bg-card); }
body.light-mode .support-header { background: #1873d3; }