/* =========================================================
   Enjoy Learn — shared chrome additions
   Theme toggle + dark mode (loaded after landing.css)
   ========================================================= */

/* ================= THEME TOGGLE ================= */

.theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}

.theme-toggle:hover {
  border-color: var(--purple-500);
  color: var(--purple-600);
  transform: translateY(-1px);
}

.theme-toggle .ico-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .ico-sun {
  display: inline;
}

[data-theme="dark"] .theme-toggle .ico-moon {
  display: none;
}

/* Anchor offset for sticky header when jumping to sections */
section[id] {
  scroll-margin-top: 90px;
}

/* ================= DARK MODE ================= */

[data-theme="dark"] {
  --bg: #131020;
  --white: #14101f;
  --text: #ece9f7;
  --muted: #a49ec4;
  --border: #2e2750;
  --shadow: 0 14px 40px rgba(0, 0, 0, .45);
  --surface: #1b1631;
  --surface-2: #241e3f;
}

[data-theme="dark"] .header {
  background: rgba(19, 16, 32, .92);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .nav-links a {
  color: #b9b3d6;
}

[data-theme="dark"] .nav-links a:hover {
  color: var(--text);
}

[data-theme="dark"] .btn-outline-dark {
  background: transparent;
  border-color: #3d3468;
  color: #cdc6ee;
}

[data-theme="dark"] .dashboard-card {
  background: var(--surface);
}

[data-theme="dark"] .dash-row > div {
  background: var(--surface-2);
}

[data-theme="dark"] .floating-card {
  background: rgba(30, 25, 54, .98);
}

[data-theme="dark"] .badge.green {
  background: rgba(46, 182, 125, .18);
}

[data-theme="dark"] .quick-nav {
  background: var(--bg);
}

[data-theme="dark"] .quick-items {
  background: var(--surface);
}

[data-theme="dark"] .benefit-card,
[data-theme="dark"] .about-card,
[data-theme="dark"] .mini-stat,
[data-theme="dark"] .step,
[data-theme="dark"] .price-card,
[data-theme="dark"] .faq,
[data-theme="dark"] .apply-card {
  background: var(--surface);
}

[data-theme="dark"] .mini-stat {
  border-color: var(--border);
}

[data-theme="dark"] .purple-bg { background: rgba(102, 86, 199, .22); }
[data-theme="dark"] .yellow-bg { background: rgba(255, 198, 47, .16); }
[data-theme="dark"] .green-bg { background: rgba(46, 182, 125, .18); }

[data-theme="dark"] .check-list li::before {
  background: rgba(46, 182, 125, .2);
}

[data-theme="dark"] .feature-item {
  border-color: var(--border);
}

[data-theme="dark"] .feature-item:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .feature-icon { background: rgba(102, 86, 199, .22); }
[data-theme="dark"] .feature-icon.yellow { background: rgba(255, 198, 47, .16); }
[data-theme="dark"] .feature-icon.green { background: rgba(46, 182, 125, .18); }
[data-theme="dark"] .feature-icon.red { background: rgba(220, 90, 101, .18); }
[data-theme="dark"] .feature-icon.purple { background: rgba(102, 86, 199, .25); }

[data-theme="dark"] .feature-icon.dark {
  background: rgba(255, 255, 255, .08);
  color: #d5d0ea;
}

[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea {
  background: var(--surface-2);
}

[data-theme="dark"] .form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23a49ec4' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="dark"] .form-field input:focus,
[data-theme="dark"] .form-field select:focus,
[data-theme="dark"] .form-field textarea:focus {
  background: var(--surface);
}

[data-theme="dark"] .footer {
  background: #110e1c;
}

[data-theme="dark"] .socials a {
  background: rgba(102, 86, 199, .22);
}