/* ============================================
   СТИЛИ ДЛЯ КНОПОК ПЕРЕКЛЮЧЕНИЯ ТЕМ
   Презентабельные, активные, с эффектом свечения
   ============================================ */

/* Базовые стили для всех тем */
.theme-switcher {
  display: flex;
  gap: 8px;
  align-items: center;
}

.theme-switcher .theme-btn {
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--text-main, #fff);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-switcher .theme-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.theme-switcher .theme-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-switcher .theme-btn:hover::before {
  width: 300px;
  height: 300px;
}

/* НЕОНОВАЯ ТЕМА */
html[data-theme="neon"] .theme-switcher .theme-btn {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: rgba(0, 212, 255, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="neon"] .theme-switcher .theme-btn:hover {
  background: rgba(0, 212, 255, 0.2) !important;
  border-color: rgba(0, 212, 255, 0.5) !important;
  color: var(--color-white) !important;
}

html[data-theme="neon"] .theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  animation: neon-pulse 2s ease-in-out infinite !important;
}

@keyframes neon-pulse {
  0%, 100% {
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 212, 255, 1), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* ТЕМНАЯ ТЕМА */
html[data-theme="hard_japan"] .theme-switcher .theme-btn {
  background: rgba(200, 144, 58, 0.1) !important;
  border-color: rgba(200, 144, 58, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="hard_japan"] .theme-switcher .theme-btn:hover {
  background: rgba(200, 144, 58, 0.2) !important;
  border-color: rgba(200, 144, 58, 0.5) !important;
  color: var(--color-white) !important;
}

html[data-theme="hard_japan"] .theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(200, 144, 58, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  animation: dark-pulse 2s ease-in-out infinite !important;
}

@keyframes dark-pulse {
  0%, 100% {
    box-shadow: 0 0 25px rgba(200, 144, 58, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(200, 144, 58, 1), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* СВЕТЛАЯ ТЕМА */
html[data-theme="light_japan"] .theme-switcher .theme-btn {
  background: rgba(198, 59, 50, 0.1) !important;
  border-color: rgba(198, 59, 50, 0.3) !important;
  color: var(--color-text-dark) !important;
}

html[data-theme="light_japan"] .theme-switcher .theme-btn:hover {
  background: rgba(198, 59, 50, 0.2) !important;
  border-color: rgba(198, 59, 50, 0.5) !important;
  color: var(--color-text-dark) !important;
}

html[data-theme="light_japan"] .theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(198, 59, 50, 0.8), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  animation: light-pulse 2s ease-in-out infinite !important;
}

@keyframes light-pulse {
  0%, 100% {
    box-shadow: 0 0 25px rgba(198, 59, 50, 0.8), 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 35px rgba(198, 59, 50, 1), 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

/* Стили для мобильной версии (.mobile-theme-switcher) */
.mobile-theme-switcher {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mobile-theme-switcher .theme-btn {
  padding: 6px 10px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--text-main, #fff);
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-theme-switcher .theme-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* НЕОНОВАЯ ТЕМА для мобильных */
html[data-theme="neon"] .mobile-theme-switcher .theme-btn {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: rgba(0, 212, 255, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="neon"] .mobile-theme-switcher .theme-btn:hover {
  background: rgba(0, 212, 255, 0.2) !important;
  border-color: rgba(0, 212, 255, 0.5) !important;
  color: var(--color-white) !important;
}

html[data-theme="neon"] .mobile-theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  animation: neon-pulse 2s ease-in-out infinite !important;
}

/* ТЕМНАЯ ТЕМА для мобильных */
html[data-theme="hard_japan"] .mobile-theme-switcher .theme-btn {
  background: rgba(200, 144, 58, 0.1) !important;
  border-color: rgba(200, 144, 58, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="hard_japan"] .mobile-theme-switcher .theme-btn:hover {
  background: rgba(200, 144, 58, 0.2) !important;
  border-color: rgba(200, 144, 58, 0.5) !important;
  color: var(--color-white) !important;
}

html[data-theme="hard_japan"] .mobile-theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(200, 144, 58, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  animation: dark-pulse 2s ease-in-out infinite !important;
}

/* СВЕТЛАЯ ТЕМА для мобильных */
html[data-theme="light_japan"] .mobile-theme-switcher .theme-btn {
  background: rgba(198, 59, 50, 0.1) !important;
  border-color: rgba(198, 59, 50, 0.3) !important;
  color: var(--color-text-dark) !important;
}

html[data-theme="light_japan"] .mobile-theme-switcher .theme-btn:hover {
  background: rgba(198, 59, 50, 0.2) !important;
  border-color: rgba(198, 59, 50, 0.5) !important;
  color: var(--color-text-dark) !important;
}

html[data-theme="light_japan"] .mobile-theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(198, 59, 50, 0.8), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  animation: light-pulse 2s ease-in-out infinite !important;
}

/* КИБЕРПАНК ТЕМА */
html[data-theme="cyberpunk"] .theme-switcher .theme-btn {
  background: rgba(255, 20, 147, 0.1) !important;
  border-color: rgba(255, 20, 147, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="cyberpunk"] .theme-switcher .theme-btn:hover {
  background: rgba(255, 20, 147, 0.2) !important;
  border-color: rgba(255, 20, 147, 0.5) !important;
  color: var(--color-white) !important;
}

html[data-theme="cyberpunk"] .theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(255, 20, 147, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  animation: cyberpunk-pulse 2s ease-in-out infinite !important;
}

@keyframes cyberpunk-pulse {
  0%, 100% {
    box-shadow: 0 0 25px rgba(255, 20, 147, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 20, 147, 1), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* МИНИМАЛИСТИЧНАЯ ТЕМА */
html[data-theme="minimal"] .theme-switcher .theme-btn {
  background: rgba(128, 128, 128, 0.1) !important;
  border-color: rgba(128, 128, 128, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="minimal"] .theme-switcher .theme-btn:hover {
  background: rgba(128, 128, 128, 0.2) !important;
  border-color: rgba(128, 128, 128, 0.5) !important;
  color: var(--color-white) !important;
}

html[data-theme="minimal"] .theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(128, 128, 128, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  animation: minimal-pulse 2s ease-in-out infinite !important;
}

@keyframes minimal-pulse {
  0%, 100% {
    box-shadow: 0 0 25px rgba(128, 128, 128, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(128, 128, 128, 1), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* КИБЕРПАНК ТЕМА для мобильных */
html[data-theme="cyberpunk"] .mobile-theme-switcher .theme-btn {
  background: rgba(255, 20, 147, 0.1) !important;
  border-color: rgba(255, 20, 147, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="cyberpunk"] .mobile-theme-switcher .theme-btn:hover {
  background: rgba(255, 20, 147, 0.2) !important;
  border-color: rgba(255, 20, 147, 0.5) !important;
  color: var(--color-white) !important;
}

html[data-theme="cyberpunk"] .mobile-theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(255, 20, 147, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  animation: cyberpunk-pulse 2s ease-in-out infinite !important;
}

/* МИНИМАЛИСТИЧНАЯ ТЕМА для мобильных */
html[data-theme="minimal"] .mobile-theme-switcher .theme-btn {
  background: rgba(128, 128, 128, 0.1) !important;
  border-color: rgba(128, 128, 128, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="minimal"] .mobile-theme-switcher .theme-btn:hover {
  background: rgba(128, 128, 128, 0.2) !important;
  border-color: rgba(128, 128, 128, 0.5) !important;
  color: var(--color-white) !important;
}

html[data-theme="minimal"] .mobile-theme-switcher .theme-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(128, 128, 128, 0.8), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  animation: minimal-pulse 2s ease-in-out infinite !important;
}

/* Адаптивность для мобильных */
@media only screen and (max-width: 991px) {
  .theme-switcher {
    gap: 4px;
  }
  
  .theme-switcher .theme-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
}

@media only screen and (max-width: 575px) {
  .theme-switcher .theme-btn {
    padding: 5px 8px;
    font-size: 10px;
  }
  
  .mobile-theme-switcher .theme-btn {
    padding: 5px 8px;
    font-size: 10px;
  }
}