/* ==========================================================================
   КАЙФУЙ ТЕАМ - ЕДИНЫЙ CSS-ФАЙЛ v3.1
   ========================================================================== */

/* === 1. БАЗА И ГЛОБАЛЬНЫЕ ИСПРАВЛЕНИЯ === */
html, body { font-family: 'Inter', sans-serif; background: #0A0A0A; color: #F5F5F5; max-width: 100vw !important; overflow-x: hidden !important; }
* { box-sizing: border-box !important; -webkit-font-smoothing: antialiased; }
body.body-no-scroll { position: fixed !important; width: 100%; overflow-y: scroll; }

/* === 2. ТИПОГРАФИКА И УТИЛИТЫ === */
h1, h2, h3, h4 { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; color: white; }
.text-gradient { background: linear-gradient(to right, #FE2B32, #F11119); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* === 3. ХЕДЕР (ШАПКА САЙТА) === */
#main-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; }
#main-header.scrolled { background: rgba(10, 10, 10, 0.9); backdrop-filter: blur(10px); }
#main-header .container { max-width: 1280px; margin: 0 auto; padding: 0.75rem 1rem; }
@media (min-width: 1024px) { #main-header .container { padding: 1.5rem 2rem; } }
#main-header nav { display: flex; align-items: center; justify-content: space-between; }
.logo-link { display: flex !important; align-items: center !important; text-decoration: none; gap: 1rem; }
.logo-ring { width: 64px; height: 64px; border-radius: 1rem; overflow: hidden; box-shadow: 0 0 0 2px rgba(254, 43, 50, 0.3), 0 0 0 4px #0A0A0A; transition: transform 0.6s; }
@media (max-width: 980px) { .logo-ring { width: 48px; height: 48px; } }
.logo-ring:hover { transform: rotate(360deg); }
.logo-text span { font-family: 'Oswald', sans-serif; font-weight: 700; color: white; line-height: 1; font-size: 1.5rem; }
.logo-text .team-subtitle { font-size: 0.75rem; font-weight: 400; color: #FE2B32; letter-spacing: 0.2em; }

/* === 4. НАВИГАЦИЯ (ДЕКСТОП И МОБИЛЬНАЯ) === */
.desktop-nav { display: none; }
@media (min-width: 1024px) { .desktop-nav { display: block; } }
.desktop-nav ul { display: flex; align-items: center; gap: 3rem; list-style: none; margin: 0; padding: 0; }
.desktop-nav a { color: white !important; text-decoration: none; font-size: 0.875rem; text-transform: uppercase; position: relative; padding-bottom: 8px; }
.desktop-nav a:hover { color: #FE2B32 !important; }
.desktop-nav a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: #FE2B32; transition: width 0.3s ease; }
.desktop-nav a:hover::after { width: 100%; }
.desktop-nav .btn-primary::after { display: none !important; }

.mobile-menu-btn { display: block; background: transparent; border: none; padding: 0; cursor: pointer; z-index: 1001; position: relative; width: 32px; height: 32px; }
@media (min-width: 1024px) { .mobile-menu-btn { display: none; } }
.mobile-menu-btn svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: white; stroke: currentColor; stroke-width: 2; transition: opacity 0.3s ease, transform 0.3s ease; }
.mobile-menu-btn .close-icon { opacity: 0; transform: rotate(-90deg); }
.mobile-menu-btn.open .menu-icon { opacity: 0; transform: rotate(90deg); }
.mobile-menu-btn.open .close-icon { opacity: 1; transform: rotate(0deg); }

.mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0A0A0A !important; z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.mobile-menu.open { opacity: 1; visibility: visible; }

/* Исправление вертикального выравнивания для кнопки в навигации */
.desktop-nav .btn-primary {
  padding-bottom: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
}

/* Для мобильной версии тоже */
.mobile-menu .btn-primary {
  padding-bottom: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
}

/* === ИСПРАВЛЕНИЕ ВЕРТИКАЛЬНОГО ЦЕНТРИРОВАНИЯ КНОПКИ "СВЯЗАТЬСЯ" === */

/* Для десктопной версии */
.desktop-nav .btn-primary {
  padding: 0.75rem 1.5rem !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 44px;
  vertical-align: middle !important;
}

/* Для мобильной версии */
.mobile-menu .btn-primary {
  padding: 1rem 2rem !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 54px;
  vertical-align: middle !important;
  margin-top: 1rem;
}

/* Дополнительное исправление - убираем наследуемые стили для кнопки */
.desktop-nav .btn-primary,
.mobile-menu .btn-primary {
  text-decoration: none !important;
  position: static !important;
}

.desktop-nav .btn-primary::after,
.mobile-menu .btn-primary::after {
  display: none !important;
}

/* === 5. КАРТОЧКИ ТРЕНЕРОВ === */
.coach-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; justify-content: center; }
.coach-card-final { cursor: pointer; border-radius: 1.5rem; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid rgba(254,43,50,0.2); animation: wobbleIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; }
@keyframes wobbleIn { 0% { opacity: 0; transform: translateY(80px) scale(0.9) rotate(-3deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } }

/* === 6. МОДАЛЬНЫЕ ОКНА ТРЕНЕРОВ === */
.modal-final { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); }
.modal-final.open { display: flex !important; }

/* === 7. КНОПКА "НАВЕРХ" === */
.scroll-to-top-btn.visible { display: flex !important; }

/* === 8. СТИЛИ КНОПОК (ИСПРАВЛЕНО) === */
.btn-primary, .btn-secondary {
  border-radius: 9999px;
  padding: 1rem 2rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(254, 43, 50, 0.4);
  background: rgba(254, 43, 50, 0.15);
  backdrop-filter: blur(10px);
  color: white !important;
  text-decoration: none;
  transition: all 0.3s ease;
  /* ИСПРАВЛЕНО: Центрирование текста внутри кнопок */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(254, 43, 50, 0.3);
  border-color: rgba(254, 43, 50, 0.6);
}
.btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* === 9. АНИМАЦИИ === */
@keyframes pulse-border {
  0%, 100% {
    box-shadow: 0 0 20px rgba(254, 43, 50, 0.2);
    border-color: rgba(254, 43, 50, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(254, 43, 50, 0.4);
    border-color: rgba(254, 43, 50, 0.6);
  }
}
.pulsating-border {
  animation: pulse-border 3s ease-in-out infinite;
}