/* 
 * Premium-Mods Override CSS
 * Премиум стилизация для сайта Premium-Mods.com
 * Подключается поверх основных стилей темы
 */

/* ========================================
   ПЕРЕМЕННЫЕ И БАЗОВЫЕ НАСТРОЙКИ
   ======================================== */
:root {
  /* Переопределяем основные цвета на премиум палитру */
  --primary: #6366F1 !important;        /* Индиго вместо синего */
  --primary-light: #E0E7FF !important;  
  --primary-dark: #4F46E5 !important;   
  --secondary: #10B981 !important;      /* Оставляем зеленый для скачивания */
  --secondary-dark: #059669 !important; 
  
  /* Премиум акценты */
  --premium-purple: #8B5CF6;
  --premium-pink: #EC4899;
  --premium-gold: #F59E0B;
  --premium-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --premium-gradient-gold: linear-gradient(135deg, #F59E0B 0%, #EAB308 100%);
  
  /* Усиливаем тени для премиум эффекта */
  --shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06) !important;
  --shadow-md: 0 10px 15px -3px rgba(99, 102, 241, 0.1), 0 4px 6px -2px rgba(99, 102, 241, 0.05) !important;
  --shadow-lg: 0 20px 25px -5px rgba(99, 102, 241, 0.15), 0 10px 10px -5px rgba(99, 102, 241, 0.04) !important;
  
  /* Скругления более современные */
  --radius: 1rem !important;
  --radius-lg: 1.25rem !important;
}

/* ========================================
   ХЕДЕР И НАВИГАЦИЯ
   ======================================== */
.site-header {
  background: linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(255,255,255,0.95)) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 40px rgba(99, 102, 241, 0.08) !important;
}

/* Логотип */
.site-title a {
  background: var(--premium-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  position: relative;
}

/* Навигация - премиум стиль */
.main-menu > li > a {
  color: #4B5563 !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  padding: 0.75rem 1.25rem !important;
}

.main-menu > li > a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: var(--premium-gradient);
  transition: transform 0.3s ease;
}

.main-menu > li > a:hover {
  color: var(--primary) !important;
}

.main-menu > li > a:hover::before {
  transform: translateX(-50%) scaleX(1);
}

.main-menu .current-menu-item > a,
.main-menu .current_page_item > a {
  background: var(--premium-gradient) !important;
  color: white !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
}

/* Поисковая форма в хедере */
.header-search .search-field {
  background: #F9FAFB !important;
  border: 2px solid transparent !important;
  padding: 0.625rem 1rem !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.header-search .search-field:focus {
  background: white !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
}

.header-search .search-submit {
  background: var(--premium-gradient) !important;
  border: none !important;
  color: white !important;
  padding: 0.625rem 1.5rem !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2) !important;
}

.header-search .search-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3) !important;
}

/* ========================================
   HERO СЕКЦИЯ
   ======================================== */
.hero-section {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%) !important;
  padding: 3rem 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: heroPattern 30s linear infinite;
}

@keyframes heroPattern {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  font-weight: 900 !important;
  text-transform: none !important;
  background: linear-gradient(to bottom, #FFFFFF, rgba(255,255,255,0.9)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 2px 40px rgba(0,0,0,0.1) !important;
}

.hero-subtitle {
  color: rgba(255,255,255,0.95) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  max-width: 600px !important;
  margin: 1rem auto !important;
}

/* ========================================
   КАРТОЧКИ МОДОВ
   ======================================== */
.mod-card {
  background: white !important;
  border: 1px solid rgba(99, 102, 241, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.mod-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--premium-gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.mod-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15) !important;
  border-color: transparent !important;
}

.mod-card:hover::before {
  transform: scaleX(1);
}

/* Премиум карточка */
.mod-card.premium-mod {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
  border: 2px solid #F59E0B !important;
  position: relative !important;
}

.mod-card.premium-mod::after {
  content: 'PREMIUM';
  position: absolute;
  top: 15px;
  right: -30px;
  background: var(--premium-gradient-gold);
  color: white;
  padding: 5px 40px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  transform: rotate(45deg);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}

/* VIP карточка */
.mod-card.vip-mod {
  background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%) !important;
  border: 2px solid #8B5CF6 !important;
}

.mod-card.vip-mod::after {
  content: 'VIP';
  position: absolute;
  top: 15px;
  right: -25px;
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  color: white;
  padding: 5px 35px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  transform: rotate(45deg);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

/* Изображения в карточках */
.mod-thumbnail img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mod-card:hover .mod-thumbnail img {
  transform: scale(1.1) !important;
}

/* Рейтинг */
.mod-rating {
  color: #F59E0B !important;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

/* ========================================
   КНОПКИ
   ======================================== */
/* Основная кнопка */
.button, .btn, button[type="submit"] {
  background: var(--premium-gradient) !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 2rem !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}

.button:hover::before {
  left: 100%;
}

.button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35) !important;
}

/* Кнопка скачивания */
.download-button, 
.mod-download-button,
.sidebar-download-btn,
.mod-hero-download-btn {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: white !important;
  padding: 1rem 2.5rem !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3) !important;
  animation: downloadPulse 2s ease-in-out infinite !important;
}

@keyframes downloadPulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
  }
  50% {
    box-shadow: 0 6px 30px rgba(16, 185, 129, 0.5);
  }
}

.download-button:hover {
  transform: scale(1.05) translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4) !important;
}

/* VIP кнопка */
.vip-button {
  background: var(--premium-gradient-gold) !important;
  animation: vipGlow 3s ease-in-out infinite !important;
}

@keyframes vipGlow {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 6px 35px rgba(245, 158, 11, 0.5);
  }
}

/* ========================================
   БЕЙДЖИ И ТЕГИ
   ======================================== */
.mod-badge,
.tag,
.category-tag {
  padding: 0.375rem 1rem !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  transition: all 0.3s ease !important;
}

.mod-badge.mod-type {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%) !important;
  color: white !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3) !important;
}

.mod-badge.mod-category {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%) !important;
  color: white !important;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3) !important;
}

.mod-badge.mod-version {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: white !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3) !important;
}

/* Новинка индикатор */
.new-mod-indicator {
  position: absolute;
  top: 15px;
  left: 15px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: newPulse 2s ease-in-out infinite;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
}

@keyframes newPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* ========================================
   СТРАНИЦА МОДА - HERO БЛОК
   ======================================== */
.mod-hero-block {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%) !important;
  padding: 2rem !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.2) !important;
}

.mod-hero-block::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
  background-size: 40px 40px;
  animation: heroPattern 25s linear infinite reverse;
}

.mod-hero-icon {
  border: 3px solid rgba(255,255,255,0.3) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

.mod-hero-title {
  text-shadow: 0 2px 20px rgba(0,0,0,0.2) !important;
}

/* ========================================
   САЙДБАР
   ======================================== */
.sidebar-card {
  background: white !important;
  border: 1px solid rgba(99, 102, 241, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.05) !important;
  transition: all 0.3s ease !important;
}

.sidebar-card:hover {
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1) !important;
}

.sidebar-title {
  background: var(--premium-gradient) !important;
  color: white !important;
  padding: 1rem 1.25rem !important;
  font-weight: 700 !important;
  border-bottom: none !important;
  margin: 0 !important;
}

.sidebar-mod-item {
  border-bottom: 1px solid rgba(99, 102, 241, 0.05) !important;
  transition: all 0.3s ease !important;
}

.sidebar-mod-item:hover {
  background: linear-gradient(to right, rgba(99, 102, 241, 0.03), transparent) !important;
  transform: translateX(8px) !important;
  padding-left: 1.5rem !important;
}

/* ========================================
   ФУТЕР
   ======================================== */
.site-footer {
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%) !important;
  border-top: 3px solid var(--primary) !important;
  position: relative !important;
}

.footer-waves svg {
  fill: url(#waveGradient) !important;
}

/* Добавляем градиент для волн */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--premium-gradient);
}

.footer-logo-text {
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.8) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.social-link:hover {
  background: var(--premium-gradient) !important;
  transform: translateY(-5px) scale(1.1) !important;
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4) !important;
}

/* ========================================
   АНИМАЦИИ И ЭФФЕКТЫ
   ======================================== */
/* Премиум шиммер эффект для загрузки */
.loading-shimmer {
  background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Премиум фокус для форм */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
}

/* Премиум селекшн */
::selection {
  background: var(--primary) !important;
  color: white !important;
}

::-moz-selection {
  background: var(--primary) !important;
  color: white !important;
}

/* ========================================
   ТАБЛИЦЫ
   ======================================== */
table {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08) !important;
}

thead {
  background: var(--premium-gradient) !important;
}

th {
  color: white !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  padding: 1rem !important;
}

tbody tr {
  transition: all 0.2s ease !important;
}

tbody tr:hover {
  background: rgba(99, 102, 241, 0.03) !important;
}

/* ========================================
   ПАГИНАЦИЯ
   ======================================== */
.pagination a,
.page-numbers {
  background: white !important;
  border: 2px solid rgba(99, 102, 241, 0.1) !important;
  color: var(--primary) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
}

.pagination a:hover {
  background: var(--premium-gradient) !important;
  border-color: transparent !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.pagination .current,
.page-numbers.current {
  background: var(--premium-gradient) !important;
  border-color: transparent !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

/* ========================================
   АДАПТИВНОСТЬ
   ======================================== */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem !important;
  }
  
  .mod-card {
    border-radius: 12px !important;
  }
  
  .button, .btn {
    padding: 0.625rem 1.5rem !important;
    font-size: 0.875rem !important;
  }
  
  .mod-hero-block {
    padding: 1.5rem !important;
  }
}

/* ========================================
   ДОПОЛНИТЕЛЬНЫЕ ПРЕМИУМ ЭЛЕМЕНТЫ
   ======================================== */
/* Премиум разделитель */
hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--primary), transparent) !important;
  margin: 2rem 0 !important;
}

/* Премиум счетчик */
.download-count,
.view-count {
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
}

/* Иконка "Проверено" */
.verified-mod {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  color: #10B981 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.verified-mod::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #10B981;
  color: white;
  border-radius: 50%;
  font-size: 0.625rem;
}

/* Премиум тултип */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--premium-gradient);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  z-index: 1000;
  margin-bottom: 0.5rem;
  animation: tooltipIn 0.3s ease;
}

@keyframes tooltipIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}