/* ================= DARK MODE VARIABLES ================= */
:root {
  --bg-light: #ffffff;
  --bg-dark: #0e1117;

  --card-light: #ffffff;
  --card-dark: #161b22;

  --text-light: #111827;
  --text-dark: #e5e7eb;

  --muted-light: #6b7280;
  --muted-dark: #9ca3af;

  --border-light: #e5e7eb;
  --border-dark: #2a2f3a;

  --accent: #2563eb;
}

/* ================= BASE DARK MODE ================= */
body.dark-mode {
  background: var(--bg-dark);
  color: var(--text-dark);
}

body.dark-mode a {
  color: #93c5fd;
}

/* ================= COMMON SECTIONS ================= */
body.dark-mode .top-bar,
body.dark-mode .category-bar,
body.dark-mode footer {
  background: var(--card-dark);
  border-color: var(--border-dark);
}

body.dark-mode .container,
body.dark-mode section {
  color: var(--text-dark);
}

/* ================= CARDS & BOXES ================= */
body.dark-mode .trust-box,
body.dark-mode .how-box,
body.dark-mode .deal-item,
body.dark-mode .moneyback-box,
body.dark-mode .shopping-box .container {
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
}

/* ================= TEXT ================= */
body.dark-mode p,
body.dark-mode span,
body.dark-mode small {
  color: var(--muted-dark);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--text-dark);
}

/* ================= BUTTONS ================= */
body.dark-mode .btn-dark {
  background: #1f2937;
  border-color: #374151;
}

body.dark-mode .hero-btn,
body.dark-mode .deal-left-btn {
  background: var(--accent);
  color: #fff;
}

/* ================= SLIDER ARROWS ================= */
body.dark-mode .deal-arrow {
  background: #1f2937;
  color: #fff;
}

/* ================= TOGGLE BUTTON ================= */
.theme-toggle {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
}