/* =============================================
   QR CODE GENERATOR - Dark Mode
   ============================================= */

body.dark-mode {
  --bg: #111827;
  --bg-card: #1F2937;
  --bg-elevated: #374151;
  --text: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-light: #64748B;
  --border: #374151;
  --border-light: #1F2937;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.6);
  --glass-bg: rgba(31,41,55,0.8);
  --glass-border: rgba(55,65,81,0.5);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

body.dark-mode .navbar.scrolled {
  background: rgba(17,24,39,0.9);
}

body.dark-mode .hero-gradient {
  background: radial-gradient(ellipse, rgba(91,91,255,0.15), transparent 70%);
}

body.dark-mode .hero-badge {
  background: rgba(91,91,255,0.2);
}

body.dark-mode .hero-qr-showcase {
  background: var(--bg-card);
  border: 1px solid var(--border);
}

body.dark-mode .hero-float-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
}

body.dark-mode .feature-card {
  background: var(--bg-card);
}

body.dark-mode .qr-generator-section {
  background: var(--bg-card);
}

body.dark-mode .qr-preview-container {
  background: var(--bg);
}

body.dark-mode .qr-tab {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
body.dark-mode .qr-tab:hover {
  background: var(--border);
  color: var(--text);
}
body.dark-mode .qr-tab.active {
  background: var(--primary);
  color: #fff;
}

body.dark-mode .form-input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
body.dark-mode .form-input:focus {
  border-color: var(--primary);
}

body.dark-mode .template-card,
body.dark-mode .testimonial-card,
body.dark-mode .faq-item,
body.dark-mode .pricing-card,
body.dark-mode .toast,
body.dark-mode .cookie-banner,
body.dark-mode .pwa-install-banner,
body.dark-mode .bottom-nav,
body.dark-mode .scanner-result {
  background: var(--bg-card);
  border-color: var(--border);
}

body.dark-mode .faq-question {
  color: var(--text) !important;
}

body.dark-mode .glass-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

body.dark-mode .navbar-links.active {
  background: var(--bg-card);
  border-bottom-color: var(--border);
}

body.dark-mode select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Language Modal Dark Mode Fixes */
body.dark-mode .lang-modal-card {
  background: #1E293B !important;
  border-color: #334155 !important;
}
body.dark-mode .lang-modal-header h3,
body.dark-mode .lang-chip,
body.dark-mode .lang-item-btn,
body.dark-mode .lang-item-btn .lang-name,
body.dark-mode #langSearchInput {
  color: #F8FAFC !important;
}
body.dark-mode .lang-chip,
body.dark-mode .lang-item-btn {
  background: #0F172A !important;
  border-color: #334155 !important;
}
body.dark-mode .lang-chip:hover,
body.dark-mode .lang-item-btn:hover {
  border-color: #5B5BFF !important;
  color: #60A5FA !important;
  background: rgba(91,91,255,0.2) !important;
}
body.dark-mode #langSearchInput {
  background: #0F172A !important;
  border-color: #334155 !important;
}
body.dark-mode #langSearchInput::placeholder {
  color: #94A3B8 !important;
}