/* ===== DARK THEME VARIABLES ===== */
:root.dark-theme {
  /* Main colors */
  --dark-bg: #0f172a;
  --dark-card: #1e293b;
  --dark-navbar: rgba(15, 23, 42, 0.95);
  --dark-text: #f1f5f9;
  --dark-text-secondary: #cbd5e1;
  --dark-primary: #f59e0b;
  --dark-accent: #fbbf24;
  --dark-gradient: linear-gradient(135deg, #f59e0b, #fbbf24);
  --dark-hover: rgba(245, 158, 11, 0.15);
  --dark-border: rgba(245, 158, 11, 0.3);
  --dark-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);

  /* Override existing variables */
  --warm-cream: #0f172a;
  --burnt-orange: #f59e0b;
  --golden-yellow: #fbbf24;
  --dark-brown: #f1f5f9;
  --peach-bg: #1e293b;
  --card-white: #1e293b;
  --warm-gray: #1e293b;
  --footer-bg: #0f172a;
  --orange-gradient: linear-gradient(135deg, #f59e0b, #fbbf24);
}

/* ===== BASE DARK THEME STYLES ===== */
.dark-theme {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* ===== NAVBAR DARK THEME ===== */
.dark-theme .navbar {
  background-color: var(--dark-navbar) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dark-border) !important;
}

.dark-theme .navbar-left .logo-text {
  color: var(--dark-primary) !important;
}

.dark-theme .navbar-center a {
  color: var(--dark-text) !important;
}

.dark-theme .navbar-center a:hover {
  color: var(--dark-accent) !important;
}

.dark-theme .search-bar input {
  background-color: #334155 !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.dark-theme .search-bar input::placeholder {
  color: #94a3b8 !important;
}

.dark-theme .search-bar i {
  color: var(--dark-text-secondary) !important;
}

.dark-theme #theme-toggle {
  background: #334155 !important;
  border: 1px solid var(--dark-primary) !important;
  color: var(--dark-primary) !important;
}

.dark-theme .login-btn {
  border: 2px solid var(--dark-primary) !important;
  color: var(--dark-primary) !important;
  background: transparent !important;
}

.dark-theme .login-btn:hover {
  background: var(--dark-primary) !important;
  color: #0f172a !important;
}

.dark-theme .signup-btn {
  background: var(--dark-primary) !important;
  color: #0f172a !important;
}

.dark-theme .signup-btn:hover {
  background: var(--dark-accent) !important;
}

/* ===== HERO SECTION DARK THEME ===== */
.dark-theme .hero-section {
  background-color: var(--dark-bg) !important;
}

.dark-theme .hero-white-container {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: var(--dark-shadow) !important;
}

.dark-theme .hero-main-title {
  color: var(--dark-text) !important;
}

.dark-theme .hero-main-description {
  color: var(--dark-text-secondary) !important;
}

.dark-theme .hero-primary-btn {
  background: var(--dark-gradient) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border: none !important;
}

.dark-theme .hero-primary-btn:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  transform: translateY(-2px) !important;
}

.dark-theme .hero-secondary-btn {
  background: transparent !important;
  color: var(--dark-primary) !important;
  border: 2px solid var(--dark-primary) !important;
}

.dark-theme .hero-secondary-btn:hover {
  background: rgba(245, 158, 11, 0.1) !important;
}

/* Add this to ensure hero-tool-section has proper positioning */
.dark-theme .hero-tool-section {
  position: relative;
}

/* ===== SIDEBAR DARK THEME ===== */
.dark-theme .sidebar-card {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: var(--dark-shadow) !important;
}

.dark-theme .sidebar-title {
  color: var(--dark-primary) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

.dark-theme .category-item {
  color: var(--dark-text-secondary) !important;
}

.dark-theme .category-item.active {
  background: linear-gradient(
    to right,
    rgba(245, 158, 11, 0.15),
    rgba(251, 191, 36, 0.1)
  ) !important;
  border: 1px solid var(--dark-border) !important;
}

.dark-theme .category-item:not(.active):hover {
  background: var(--dark-hover) !important;
  border-color: var(--dark-border) !important;
}

.dark-theme .category-icon:not(.active-icon) {
  background: rgba(245, 158, 11, 0.1) !important;
}

.dark-theme .category-icon:not(.active-icon) i {
  color: var(--dark-text-secondary) !important;
}

.dark-theme .category-item.active .category-name {
  color: var(--dark-primary) !important;
}

.dark-theme .category-count {
  background: var(--dark-primary) !important;
  color: #0f172a !important;
}

.dark-theme .category-count.inactive {
  background: transparent !important;
  color: rgba(203, 213, 225, 0.4) !important;
}

/* ===== MAIN CONTENT DARK THEME ===== */
.dark-theme .section-title {
  color: var(--dark-text) !important;
}

.dark-theme .section-subtitle {
  color: var(--dark-text-secondary) !important;
}

.dark-theme .tool-card {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: var(--dark-shadow) !important;
}

.dark-theme .tool-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15) !important;
  border-color: var(--dark-accent) !important;
}

.dark-theme .tool-title {
  color: var(--dark-text) !important;
}

.dark-theme .tool-description {
  color: var(--dark-text-secondary) !important;
}

.dark-theme .tool-button {
  background: var(--dark-gradient) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

.dark-theme .tool-button:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
}

/* ===== POPULAR SECTION DARK THEME ===== */
.dark-theme .popular-container {
  background: linear-gradient(
    to right,
    rgba(245, 158, 11, 0.1),
    rgba(251, 191, 36, 0.05)
  ) !important;
  border: 1px solid var(--dark-border) !important;
  backdrop-filter: blur(8px) !important;
}

.dark-theme .popular-title {
  color: var(--dark-text) !important;
}

.dark-theme .trending-badge {
  background: var(--dark-gradient) !important;
  color: #0f172a !important;
}

.dark-theme .popular-card {
  background: rgba(30, 41, 59, 0.7) !important;
  border: 1px solid var(--dark-border) !important;
}

.dark-theme .popular-card:hover {
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: var(--dark-accent) !important;
}

.dark-theme .popular-tool-title {
  color: var(--dark-text) !important;
}

.dark-theme .popular-button {
  background: var(--dark-primary) !important;
  color: #0f172a !important;
}

.dark-theme .popular-button:hover {
  background: var(--dark-accent) !important;
}

/* ===== FOOTER DARK THEME ===== */
.dark-theme .footer {
  background: var(--dark-bg) !important;
  border: 1px solid var(--dark-border) !important;
}

.dark-theme .footer-company h3 {
  color: var(--dark-primary) !important;
}

.dark-theme .footer-grid h4 {
  color: var(--dark-primary) !important;
}

.dark-theme .footer-grid ul li a {
  color: var(--dark-text) !important;
}

.dark-theme .footer-grid ul li a:hover {
  color: var(--dark-accent) !important;
}

.dark-theme .footer-social a {
  background: rgba(245, 158, 11, 0.2) !important;
  color: var(--dark-primary) !important;
}

.dark-theme .footer-social a:hover {
  background: var(--dark-primary) !important;
  color: #0f172a !important;
}

.dark-theme .newsletter-form input {
  background: #334155 !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-border) !important;
}

.dark-theme .newsletter-btn {
  background: var(--dark-primary) !important;
  color: #0f172a !important;
}

.dark-theme .newsletter-btn:hover {
  background: var(--dark-accent) !important;
}

.dark-theme .footer-bottom {
  border-top: 1px solid var(--dark-border) !important;
}

/* ===== SCROLLBAR DARK THEME ===== */
.dark-theme ::-webkit-scrollbar-track {
  background: #1e293b !important;
}

.dark-theme ::-webkit-scrollbar-thumb {
  background: var(--dark-primary) !important;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-accent) !important;
}

/* ===== FIXES FOR SPECIFIC ELEMENTS ===== */
.dark-theme .tool-icon-wrapper.orange-icon {
  background: var(--dark-gradient) !important;
}

.dark-theme .popular-tool-icon.orange-icon {
  background: var(--dark-gradient) !important;
}

.dark-theme .popular-icon {
  background: var(--dark-gradient) !important;
}

/* Ensure all text in dark mode is readable */
.dark-theme * {
  color: inherit;
}

/* Specific fix for icons */
.dark-theme .tool-icon-wrapper i,
.dark-theme .popular-tool-icon i,
.dark-theme .popular-icon i,
.dark-theme .category-icon.active-icon i {
  color: #0f172a !important;
}

/* Fix for decorative shapes */
.dark-theme .decorative-square {
  border-color: rgba(245, 158, 11, 0.4) !important;
}

.dark-theme .decorative-circle {
  border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Gradient background for hero tool icon */
.dark-theme .tool-icon-gradient-bg {
  background: radial-gradient(
    circle at center,
    rgba(245, 158, 11, 0.2) 0%,
    rgba(251, 191, 36, 0.1) 30%,
    transparent 70%
  ) !important;
}

/* DARK THEME FOR NAVBAR */
.dark-theme .navbar {
  background-color: #0f172a !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.dark-theme .navbar .logo-text {
  color: #f59e0b !important;
}

.dark-theme .navbar .navbar-center a {
  color: #f1f5f9 !important;
}

.dark-theme .navbar .navbar-center a:hover {
  color: #fbbf24 !important;
}

.dark-theme .navbar .search-bar input {
  background-color: #334155 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #f1f5f9 !important;
}

.dark-theme .navbar .search-bar i {
  color: #cbd5e1 !important;
}

.dark-theme .navbar #theme-toggle {
  background: #334155 !important;
  border: 1px solid #f59e0b !important;
  color: #f59e0b !important;
}

.dark-theme .navbar .login-btn {
  border: 2px solid #f59e0b !important;
  color: #f59e0b !important;
  background: transparent !important;
}

.dark-theme .navbar .login-btn:hover {
  background: #f59e0b !important;
  color: #0f172a !important;
}

.dark-theme .navbar .signup-btn {
  background: #f59e0b !important;
  color: #0f172a !important;
}

.dark-theme .navbar .signup-btn:hover {
  background: #fbbf24 !important;
}