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

/* Базовые стили для всех тем */
.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;
  }
}

/* ============================================
   ВЫПАДАЮЩЕЕ МЕНЮ ДОПОЛНИТЕЛЬНЫХ ТЕМ
   ============================================ */

.theme-dropdown {
  position: relative;
  display: inline-block;
}

.theme-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px !important;
}

.theme-dropdown-toggle .fa-palette {
  font-size: 14px;
}

.theme-dropdown-arrow {
  font-size: 10px;
  transition: transform 0.3s ease;
}

.theme-dropdown.open .theme-dropdown-arrow {
  transform: rotate(180deg);
}

.theme-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  backdrop-filter: blur(20px);
}

.theme-dropdown.open .theme-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-dropdown-header {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
}

.theme-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.theme-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.theme-dropdown-item.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.theme-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Стили dropdown для разных тем */
html[data-theme="light_japan"] .theme-dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light_japan"] .theme-dropdown-header {
  color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light_japan"] .theme-dropdown-item {
  color: rgba(0, 0, 0, 0.8);
}

html[data-theme="light_japan"] .theme-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
}

html[data-theme="neon"] .theme-dropdown-menu {
  border-color: rgba(0, 212, 255, 0.3);
}

html[data-theme="anime_classic"] .theme-dropdown-menu {
  border-color: rgba(99, 102, 241, 0.3);
}

html[data-theme="donghua"] .theme-dropdown-menu {
  border-color: rgba(220, 38, 38, 0.3);
}

html[data-theme="drama"] .theme-dropdown-menu {
  border-color: rgba(16, 185, 129, 0.3);
}

html[data-theme="movie"] .theme-dropdown-menu {
  border-color: rgba(190, 24, 93, 0.3);
}

/* Стили для новых тем */
html[data-theme="anime_classic"] .theme-switcher .theme-btn {
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="anime_classic"] .theme-switcher .theme-btn:hover {
  background: rgba(99, 102, 241, 0.2) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
}

html[data-theme="anime_classic"] .theme-switcher .theme-btn.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border-color: #8b5cf6 !important;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.6) !important;
}

html[data-theme="donghua"] .theme-switcher .theme-btn {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="donghua"] .theme-switcher .theme-btn:hover {
  background: rgba(220, 38, 38, 0.2) !important;
  border-color: rgba(220, 38, 38, 0.5) !important;
}

html[data-theme="donghua"] .theme-switcher .theme-btn.active {
  background: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%) !important;
  border-color: #f59e0b !important;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(220, 38, 38, 0.6) !important;
}

html[data-theme="drama"] .theme-switcher .theme-btn {
  background: rgba(94, 170, 141, 0.1) !important;
  border-color: rgba(94, 170, 141, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="drama"] .theme-switcher .theme-btn:hover {
  background: rgba(94, 170, 141, 0.2) !important;
  border-color: rgba(94, 170, 141, 0.5) !important;
}

html[data-theme="drama"] .theme-switcher .theme-btn.active {
  background: linear-gradient(135deg, #5eaa8d 0%, #7ec4a8 100%) !important;
  border-color: #7ec4a8 !important;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(94, 170, 141, 0.5) !important;
}

html[data-theme="movie"] .theme-switcher .theme-btn {
  background: rgba(190, 24, 93, 0.1) !important;
  border-color: rgba(190, 24, 93, 0.3) !important;
  color: var(--color-white) !important;
}

html[data-theme="movie"] .theme-switcher .theme-btn:hover {
  background: rgba(190, 24, 93, 0.2) !important;
  border-color: rgba(190, 24, 93, 0.5) !important;
}

html[data-theme="movie"] .theme-switcher .theme-btn.active {
  background: linear-gradient(135deg, #be185d 0%, #fbbf24 100%) !important;
  border-color: #fbbf24 !important;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(190, 24, 93, 0.6) !important;
}

@media only screen and (max-width: 991px) {
  .theme-dropdown-menu {
    right: auto;
    left: 0;
    min-width: 160px;
  }
}

/* Метки секций для мобильного выпадающего списка тем */
.mobile-theme-section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted, #888);
  padding: 6px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border-light, rgba(255, 255, 255, 0.1));
  font-weight: 600;
}

.mobile-theme-section-label:first-child {
  border-top: none;
  margin-top: 0;
}

/* Стили для мобильного меню - категории тем */
.mobile-menu-themes .mobile-theme-section-label {
  font-size: 0.7rem;
  color: var(--color-text-secondary, #999);
  padding: 8px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--color-border-light, rgba(255, 255, 255, 0.1));
}

.mobile-menu-theme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================
   КНОПКИ СКАЧИВАНИЯ ПРИЛОЖЕНИЙ (header)
   ============================================ */

.header-app-downloads {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.header-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text-main, #fff);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}

.header-app-btn:hover {
  background: var(--color-primary, #c9182b);
  border-color: var(--color-primary, #c9182b);
  color: #fff;
  box-shadow: 0 2px 12px rgba(var(--color-primary-rgb, 201, 24, 43), 0.35);
  transform: translateY(-1px);
  text-decoration: none;
}

.header-app-btn i {
  font-size: 14px;
}

.header-app-btn .fab.fa-android {
  color: #3DDC84;
}

.header-app-btn:hover .fab.fa-android {
  color: #fff;
}

.header-app-btn .fas.fa-tv {
  color: #60a5fa;
}

.header-app-btn:hover .fas.fa-tv {
  color: #fff;
}

.header-app-btn .fab.fa-apple {
  color: #a1a1aa;
}

.header-app-btn--disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* Светлая тема */
[data-theme="light_japan"] .header-app-downloads {
  border-left-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light_japan"] .header-app-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-main, #1a1a2e);
}

/* Скрываем на мобилках — в шапке они не нужны, только десктоп */
@media (max-width: 991px) {
  .header-app-downloads {
    display: none;
  }
}