/* === CATEGORY COUNT BADGES === */
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(108, 99, 255, 0.12);
  color: var(--accent, #6C63FF);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  margin-inline-start: 4px;
  line-height: 1;
}
.filter-btn.active .filter-count,
.price-btn.active .filter-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Remove any duplicate badges */
.cat-count { display: none !important; }

/* === DARK MODE PERFORMANCE === */
.theme-transitioning * {
  transition-duration: 0.15s !important;
}
.theme-transitioning nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Smooth base transitions */
html {
  transition: background-color 0.3s ease;
}
body, .card, nav, .hero, .newsletter-section, footer, .filter-btn, .price-btn, #search {
  transition: background-color 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}

/* === MOBILE RESPONSIVE FIXES === */
@media (max-width: 640px) {
  /* Single column grid */
  #grid, .tools-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }
  /* Hero */
  .hero h1, .hero-title { font-size: 1.4rem !important; line-height: 1.3 !important; }
  .hero-subtitle { font-size: 0.85rem !important; }
  .hero-stats { gap: 12px !important; }
  .hero-stat-num { font-size: 1.3rem !important; }
  /* Nav */
  nav { padding: 8px 12px !important; gap: 6px !important; }
  .nav-brand { font-size: 1rem !important; }
  .nav-cta { gap: 4px !important; }
  .nav-cta a, .nav-cta button { padding: 6px 10px !important; font-size: 0.75rem !important; }
  .auth-btn { padding: 6px 10px !important; font-size: 0.75rem !important; }
  .theme-toggle { padding: 4px 8px !important; font-size: 0.9rem !important; }
  /* Search */
  #search, .search-bar input { font-size: 0.85rem !important; padding: 10px 14px !important; padding-inline-start: 44px !important; }
  /* Filter pills - horizontal scroll */
  #catFilters, .filter-section {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 4px 12px !important;
  }
  #catFilters::-webkit-scrollbar, .filter-section::-webkit-scrollbar { display: none; }
  .filter-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }
  #priceFilters, .price-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 4px 12px !important;
  }
  #priceFilters::-webkit-scrollbar, .price-filters::-webkit-scrollbar { display: none; }
  .price-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
  }
  /* Cards */
  .card { padding: 14px !important; border-radius: 12px !important; }
  .card h3 { font-size: 0.95rem !important; }
  .card p { font-size: 0.8rem !important; line-height: 1.4 !important; }
  .card .tag { font-size: 0.65rem !important; padding: 2px 6px !important; }
  .card-actions a, .card-actions button { font-size: 0.75rem !important; padding: 6px 10px !important; }
  /* Sort controls */
  .sort-controls { padding: 4px 12px !important; gap: 6px !important; }
  .sort-select, .fav-filter { font-size: 0.75rem !important; padding: 5px 8px !important; }
  /* Results */
  .results-info { font-size: 0.8rem !important; padding: 4px 12px !important; }
  /* Promo / Newsletter */
  .promo-banner, .newsletter-section { padding: 20px 12px !important; margin: 16px 12px !important; border-radius: 12px !important; }
  /* News */
  .news-grid { grid-template-columns: 1fr !important; }
  .news-section h2 { font-size: 1.3rem !important; }
  /* Footer */
  footer { padding: 16px 12px !important; font-size: 0.8rem !important; }
}

/* Tablet: 2 columns */
@media (min-width: 641px) and (max-width: 1024px) {
  #grid, .tools-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}

/* === DARK MODE COLORS === */
[data-theme="dark"] .filter-count {
  background: rgba(108, 99, 255, 0.3) !important;
  color: #a0a0ff !important;
}
[data-theme="dark"] .card { background: var(--card-bg, #1a1a2e) !important; border-color: var(--border, #2a2a3e) !important; }
[data-theme="dark"] .card h3 { color: var(--text-primary, #e8e8f0) !important; }
[data-theme="dark"] .card p { color: var(--text-secondary, #a0a0b8) !important; }
[data-theme="dark"] .filter-btn, [data-theme="dark"] .price-btn {
  background: var(--card-bg, #1a1a2e) !important;
  color: var(--text-secondary, #a0a0b8) !important;
  border-color: var(--border, #2a2a3e) !important;
}
[data-theme="dark"] .filter-btn.active, [data-theme="dark"] .price-btn.active {
  background: var(--accent, #6C63FF) !important; color: #fff !important;
}
[data-theme="dark"] #search, [data-theme="dark"] .search-bar input {
  background: var(--card-bg, #1a1a2e) !important; border-color: var(--border, #2a2a3e) !important; color: var(--text-primary, #e8e8f0) !important;
}
[data-theme="dark"] .sort-select {
  background: var(--card-bg, #1a1a2e) !important; color: var(--text-primary, #e8e8f0) !important; border-color: var(--border, #2a2a3e) !important;
}