/* ===================================
   🌙 THEME SYSTEM - Dark/Light Mode
   =================================== */

/* Theme Toggle Button */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-tooltip);
}

.theme-toggle-button {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-full);
  background-color: var(--primary-color);
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow);
  transition: all var(--transition);
}

.theme-toggle-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--box-shadow-lg);
}

.theme-toggle-button i {
  transition: transform var(--transition);
}

.theme-toggle-button:hover i {
  transform: rotate(30deg);
}

/* Icon Changes Based on Theme */
[data-theme="light"] .theme-toggle-button .fa-moon {
  display: block;
}

[data-theme="light"] .theme-toggle-button .fa-sun {
  display: none;
}

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

[data-theme="dark"] .theme-toggle-button .fa-sun {
  display: block;
}

/* ===================================
   🌐 LANGUAGE TOGGLE
   =================================== */

.language-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: var(--z-tooltip);
}

.language-toggle-button {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-full);
  background-color: var(--primary-color);
  border: none;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow);
  transition: all var(--transition);
}

.language-toggle-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--box-shadow-lg);
}

/* ===================================
   📱 RESPONSIVE
   =================================== */

@media screen and (max-width: 768px) {
  .theme-toggle,
  .language-toggle {
    bottom: 15px;
  }
  
  .theme-toggle {
    right: 15px;
  }
  
  .language-toggle {
    left: 15px;
  }
  
  .theme-toggle-button,
  .language-toggle-button {
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .theme-toggle,
  .language-toggle {
    bottom: 10px;
  }
  
  .theme-toggle-button,
  .language-toggle-button {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
}