/* Мобильная оптимизация для всех страниц */

/* На десктопе - обычное отображение */
.mobile-scroll-wrapper {
  /* На десктопе не влияет на отображение */
}

.mobile-scroll-container {
  /* На десктопе остается grid */
}

.mobile-scroll-item {
  /* На десктопе остается обычным элементом grid */
}

/* Базовые мобильные стили */
@media (max-width: 768px) {
  /* Уменьшаем отступы контейнеров */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Оптимизация типографики */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  /* Оптимизация карточек */
  .card {
    padding: 1.25rem;
    border-radius: 12px;
  }

  /* Увеличиваем размеры кнопок для touch */
  button,
  .btn-accent,
  a[class*="btn"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    font-size: 16px; /* Предотвращает zoom на iOS */
  }

  /* Оптимизация форм */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px; /* Предотвращает zoom на iOS */
    padding: 14px 16px;
    min-height: 44px;
  }

  /* Оптимизация отступов */
  section {
    margin-top: 2rem;
    padding: 1rem 0;
  }

  /* Уменьшаем gap в grid */
  .grid {
    gap: 1rem;
  }
}

/* Мобильное меню */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 50;
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: #e9e8ef;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 15, 0.98);
  backdrop-filter: blur(10px);
  z-index: 45;
  padding: 80px 24px 24px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mobile-menu a {
  font-size: 1.25rem;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e9e8ef;
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-menu a:hover {
  color: var(--accent1);
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .mobile-menu {
    display: block;
  }

  /* Скрываем десктопную навигацию */
  nav.hidden.md\\:flex {
    display: none !important;
  }
}

/* Оптимизация для очень маленьких экранов */
@media (max-width: 480px) {
  h1 {
    font-size: 1.75rem !important;
  }

  h2 {
    font-size: 1.35rem !important;
  }

  .card {
    padding: 1rem;
  }

  /* Уменьшаем отступы */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  section {
    padding: 0.75rem 0;
  }
}

/* Оптимизация главной страницы */
@media (max-width: 768px) {
  /* Hero секция */
  .hero-grid {
    gap: 2rem;
  }

  .hero-grid h1 {
    font-size: 2rem !important;
    line-height: 1.3;
  }

  .hero-grid p {
    font-size: 0.95rem;
  }

  /* Преимущества - одна колонка */
  section .grid.grid-cols-3:not(.mobile-scroll-container) {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* Горизонтальный скролл для секций на мобильных */
  .mobile-scroll-container {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 70, 255, 0.3) transparent;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Для features и reviews - центрирование первого элемента */
  #features .mobile-scroll-container,
  #reviews .mobile-scroll-container {
    scroll-padding-left: 1.5rem;
    scroll-padding-right: 1.5rem;
  }

  .mobile-scroll-container::-webkit-scrollbar {
    height: 6px;
  }

  .mobile-scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  }

  .mobile-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(91, 70, 255, 0.3);
    border-radius: 10px;
  }

  .mobile-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(91, 70, 255, 0.5);
  }

  .mobile-scroll-item {
    flex: 0 0 85%;
    min-width: 85%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Обертка для скрытия соседних элементов */
  .mobile-scroll-wrapper {
    position: relative;
    overflow: hidden;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    /* Предотвращаем выход текста за границы */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Секция features - горизонтальный скролл (один блок по центру) */
  #features .mobile-scroll-container {
    display: flex !important;
    flex-direction: row;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
    gap: 1rem;
    /* Предотвращаем выход за границы */
    contain: layout style;
  }

  #features .mobile-scroll-item {
    flex: 0 0 calc(100% - 3rem);
    min-width: calc(100% - 3rem);
    max-width: calc(100% - 3rem);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    margin: 0 auto;
    /* Предотвращаем выход текста */
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }

  /* Убеждаемся, что текст внутри не выходит за границы */
  #features .mobile-scroll-item * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Добавляем отступы в начале и конце для центрирования */
  #features .mobile-scroll-container::before,
  #features .mobile-scroll-container::after {
    content: '';
    flex: 0 0 1.5rem;
    min-width: 1.5rem;
  }

  /* Секция pricing - горизонтальный скролл (один блок по центру) */
  #pricing .mobile-scroll-container {
    display: flex !important;
    flex-direction: row;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
    gap: 1rem;
    /* Предотвращаем выход за границы */
    contain: layout style;
  }

  #pricing .mobile-scroll-item {
    flex: 0 0 calc(100% - 3rem);
    min-width: calc(100% - 3rem);
    max-width: calc(100% - 3rem);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    margin: 0 auto;
    /* Предотвращаем выход текста */
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }

  /* Убеждаемся, что текст внутри не выходит за границы */
  #pricing .mobile-scroll-item * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Добавляем отступы в начале и конце для центрирования */
  #pricing .mobile-scroll-container::before,
  #pricing .mobile-scroll-container::after {
    content: '';
    flex: 0 0 1.5rem;
    min-width: 1.5rem;
  }

  /* Секция reviews (отзывы) - горизонтальный скролл (один блок по центру) */
  #reviews .mobile-scroll-container {
    display: flex !important;
    flex-direction: row;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
    gap: 1rem;
    /* Предотвращаем выход за границы */
    contain: layout style;
  }

  #reviews .mobile-scroll-item {
    flex: 0 0 calc(100% - 3rem);
    min-width: calc(100% - 3rem);
    max-width: calc(100% - 3rem);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    margin: 0 auto;
    /* Предотвращаем выход текста */
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }

  /* Убеждаемся, что текст внутри не выходит за границы */
  #reviews .mobile-scroll-item * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Добавляем отступы в начале и конце для центрирования */
  #reviews .mobile-scroll-container::before,
  #reviews .mobile-scroll-container::after {
    content: '';
    flex: 0 0 1.5rem;
    min-width: 1.5rem;
  }

  /* Локации уже имеют overflow-x-auto, улучшаем стиль */
  .countries .flex.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 70, 255, 0.3) transparent;
  }

  .countries .flex.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
  }

  .countries .flex.overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  }

  .countries .flex.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(91, 70, 255, 0.3);
    border-radius: 10px;
  }

  .countries .glass {
    scroll-snap-align: start;
  }

  /* Footer - одна колонка */
  footer .grid.lg\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* Оптимизация страниц авторизации */
@media (max-width: 768px) {
  .auth-root {
    padding: 24px 12px;
    min-height: calc(100vh - 60px);
  }

  .auth-card {
    gap: 20px;
    /* Оставляем две колонки даже на мобильных */
    grid-template-columns: 1fr 1fr !important;
  }

  .left-panel {
    padding: 16px;
  }

  .right-panel {
    padding: 16px;
  }

  /* Уменьшаем кристалл на мобильных */
  .left-panel .hero-right {
    height: 180px !important;
  }

  .left-panel .hero-right svg {
    max-width: 100%;
  }

  /* Уменьшаем текст в левой панели */
  .left-panel h2 {
    font-size: 1.25rem !important;
  }

  .left-panel p {
    font-size: 0.85rem !important;
  }

  .left-panel .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* Формы - полная ширина */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Кнопки соцсетей - вертикально */
  .flex.gap-3 {
    flex-direction: column;
  }

  /* Уменьшаем размеры формы */
  .right-panel h1 {
    font-size: 1.5rem !important;
  }

  .right-panel .card {
    padding: 16px;
  }
}

/* Для очень маленьких экранов - все же одна колонка */
@media (max-width: 480px) {
  .auth-card {
    grid-template-columns: 1fr !important;
  }
  
  .left-panel {
    order: -1;
  }
}

/* Оптимизация панели управления */
@media (max-width: 768px) {
  /* Статистика - 2 колонки */
  .grid.md\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Основной контент - одна колонка */
  .grid.lg\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Ключи - вертикально */
  .flex.items-center.justify-between {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .flex.items-center.justify-between button {
    width: 100%;
  }
}

/* Оптимизация header */
@media (max-width: 768px) {
  header {
    top: 8px;
    padding: 8px 12px;
  }

  header.scrolled {
    padding: 8px 12px;
  }

  /* Уменьшаем логотип */
  header svg,
  header img {
    width: 28px !important;
    height: 28px !important;
  }

  header .font-semibold.text-lg {
    font-size: 1rem;
  }

  /* Скрываем языковой переключатель на мобильных */
  .hidden.md\\:flex {
    display: none !important;
  }
}

/* Оптимизация для landscape на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
  .auth-root {
    padding: 12px;
  }

  .left-panel {
    padding: 16px;
  }

  .right-panel {
    padding: 16px;
  }
}

/* Улучшение touch targets */
@media (max-width: 768px) {
  a,
  button,
  input[type="button"],
  input[type="submit"],
  .btn-accent {
    -webkit-tap-highlight-color: rgba(91, 70, 255, 0.2);
    touch-action: manipulation;
  }
}

/* Оптимизация анимаций для мобильных */
@media (max-width: 768px) {
  /* Упрощаем анимации для лучшей производительности */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }

  /* Отключаем сложные эффекты на слабых устройствах */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* Оптимизация изображений */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }

  svg {
    max-width: 100%;
    height: auto;
  }
}

/* Улучшение скролла на мобильных */
@media (max-width: 768px) {
  body {
    -webkit-overflow-scrolling: touch;
  }

  /* Убираем горизонтальный скролл */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Оптимизация таблиц (если есть) */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}