/* Мобильная адаптивность */

/* Мобильное меню */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow-y: auto;
}

.mobile-menu-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 85%;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  animation: slideIn 0.3s ease-out forwards;
  overflow-y: auto;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.mobile-menu-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e5e5e5;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.mobile-menu-link {
  display: block;
  padding: 20px 24px;
  text-decoration: none;
  color: #2D2926;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus {
  background-color: #f8f8f8;
}

.mobile-menu-link span {
  display: block;
}

/* Показываем кнопку меню только на мобильных */
@media screen and (min-width: 769px) {
  #mobile-menu-toggle {
    display: none !important;
  }
}

/* Скрываем навигационные ссылки на мобильных, показываем кнопку меню */
@media screen and (max-width: 768px) {
  #mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }
  
  /* Улучшаем анимацию меню */
  .mobile-menu-content {
    animation: slideIn 0.3s ease-out forwards;
  }
  
  .mobile-menu-overlay[style*="display: block"] .mobile-menu-content {
    transform: translateX(0);
  }
}

/* Планшеты и мобильные устройства (до 1024px) */
@media screen and (max-width: 1024px) {
  /* Убираем фиксированную минимальную ширину для контейнеров */
  [style*="min-width: 1440px"] {
    min-width: 100% !important;
    width: 100% !important;
  }

  /* Адаптируем основной контейнер */
  [style*="max-width: 1440px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Адаптируем размеры шрифтов в заголовках */
  [style*="font-size: 46px"] {
    font-size: 32px !important;
    line-height: 36px !important;
  }

  [style*="font-size: 40px"] {
    font-size: 28px !important;
    line-height: 32px !important;
  }

  [style*="font-size: 34px"] {
    font-size: 24px !important;
    line-height: 28px !important;
  }

  /* Адаптируем gap в flex контейнерах */
  [style*="gap: 48px"] {
    gap: 24px !important;
  }

  [style*="gap: 40px"] {
    gap: 16px !important;
  }

  /* Адаптируем flex-direction для мобильных - только для контейнеров с justify-content: space-between */
  .css-175oi2r[style*="flex-direction: row"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Оптимизация хедера - навигация */
  .r-f8sm7e {
    padding-bottom: 0px !important;
  }

  /* Адаптируем gap в хедере */
  .r-f8sm7e [style*="gap: 26px"] {
    gap: 8px !important;
  }

  .r-f8sm7e [style*="gap: 16px"] {
    gap: 12px !important;
  }

  /* Адаптируем SVG иконки в хедере */
  .r-f8sm7e svg[width="72"][height="72"] {
    width: 44px !important;
    height: 44px !important;
  }

  .r-f8sm7e svg[width="22"][height="22"] {
    width: 18px !important;
    height: 18px !important;
  }

  .r-f8sm7e svg[width="30"][height="30"] {
    width: 24px !important;
    height: 24px !important;
  }

  /* Добавляем кнопку меню (гамбургер) если её нет */
  .r-f8sm7e [style*="gap: 8px"] svg[width="24"][height="24"] {
    width: 24px !important;
    height: 24px !important;
  }

  /* Оптимизация секции Rewards */
  [style*="margin-top: -48px"] {
    margin-top: -24px !important;
  }

  [style*="margin-bottom: 48px"] {
    margin-bottom: 24px !important;
  }

  [style*="right: 5%; left: 5%"] {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }
}

/* Мобильные устройства (до 768px) */
@media screen and (max-width: 768px) {
  /* Убираем фиксированную минимальную ширину */
  [style*="min-width: 1440px"] {
    min-width: 100% !important;
  }

  /* Адаптируем padding */
  [style*="padding-top: 64px"] {
    padding-top: 32px !important;
  }

  [style*="padding-bottom: 72px"] {
    padding-bottom: 36px !important;
  }

  /* Адаптируем размеры шрифтов */
  [style*="font-size: 46px"] {
    font-size: 24px !important;
    line-height: 28px !important;
  }

  [style*="font-size: 40px"] {
    font-size: 22px !important;
    line-height: 26px !important;
  }

  [style*="font-size: 34px"] {
    font-size: 20px !important;
    line-height: 24px !important;
  }

  [style*="font-size: 32px"] {
    font-size: 18px !important;
    line-height: 22px !important;
  }

  [style*="font-size: 30px"] {
    font-size: 18px !important;
    line-height: 22px !important;
  }

  [style*="font-size: 26px"] {
    font-size: 18px !important;
    line-height: 22px !important;
  }

  [style*="font-size: 20px"] {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  [style*="font-size: 18px"] {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  [style*="font-size: 16px"] {
    font-size: 14px !important;
    line-height: 18px !important;
  }

  /* Адаптируем gap */
  [style*="gap: 48px"] {
    gap: 16px !important;
  }

  [style*="gap: 40px"] {
    gap: 12px !important;
  }

  [style*="gap: 24px"] {
    gap: 16px !important;
  }

  [style*="gap: 16px"] {
    gap: 12px !important;
  }

  [style*="gap: 12px"] {
    gap: 8px !important;
  }

  /* Адаптируем flex-direction */
  .css-175oi2r[style*="flex-direction: row"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .css-175oi2r[style*="flex-direction: row"][style*="align-items: center"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Адаптируем все flex-direction: row на мобильных */
  .css-175oi2r[style*="flex-direction: row"] {
    flex-direction: column !important;
  }

  /* Исключения для элементов, которые должны оставаться в строке */
  .css-175oi2r[style*="flex-direction: row"][style*="gap: 3px"],
  .css-175oi2r[style*="flex-direction: row"][style*="gap: 4px"],
  .css-175oi2r[style*="flex-direction: row"][style*="align-items: center"][style*="gap: 4px"] {
    flex-direction: row !important;
  }

  /* Секция Rewards - адаптируем flex-direction для мобильных */
  .r-nj0m1c[style*="flex-direction: row"][style*="gap: 12px"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Оптимизация хедера - навигация на мобильных */
  .r-f8sm7e {
    padding-bottom: 0px !important;
  }

  /* Скрываем навигационные ссылки Menu, Deals, Rewards на мобильных */
  .r-f8sm7e [style*="gap: 40px"] {
    display: none !important;
  }

  /* Адаптируем gap в хедере на мобильных */
  .r-f8sm7e [style*="gap: 26px"] {
    gap: 8px !important;
  }

  .r-f8sm7e [style*="gap: 16px"] {
    gap: 12px !important;
  }

  /* Уменьшаем SVG иконки в хедере на мобильных */
  .r-f8sm7e svg[width="72"][height="72"] {
    width: 44px !important;
    height: 44px !important;
  }

  .r-f8sm7e svg[width="22"][height="22"] {
    width: 18px !important;
    height: 18px !important;
  }

  .r-f8sm7e svg[width="24"][height="24"] {
    width: 24px !important;
    height: 24px !important;
  }

  .r-f8sm7e svg[width="30"][height="30"] {
    width: 24px !important;
    height: 24px !important;
  }

  /* Адаптируем контейнер с ragged-header */
  .r-184en5c[style*="min-width: 1440px"],
  .r-184en5c {
    overflow: hidden !important;
  }

  /* Убираем "Or" между Sign In и Join на мобильных */
  .r-f8sm7e .r-1armvtb.r-o9xkwf {
    display: none !important;
  }
  
  /* Скрываем "Join" на мобильных - span после "Or" с color: rgb(154, 51, 36) */
  .r-f8sm7e [style*="gap: 16px"] [style*="gap: 4px"] span.r-1armvtb.r-o9xkwf + span[style*="color: rgb(154, 51, 36)"] {
    display: none !important;
  }
  
  /* Альтернативный селектор для "Join" - последний span в контейнере с gap: 4px */
  .r-f8sm7e [style*="gap: 16px"] [style*="gap: 4px"] > span:last-child[style*="color: rgb(154, 51, 36)"] {
    display: none !important;
  }
  
  /* Дополнительный селектор для гарантии скрытия "Join" - третий span */
  .r-f8sm7e [style*="gap: 16px"] [style*="gap: 4px"] > span:nth-child(3) {
    display: none !important;
  }

  /* Оптимизация секции Rewards на мобильных */
  [style*="margin-top: -48px"] {
    margin-top: -16px !important;
  }

  [style*="margin-bottom: 48px"] {
    margin-bottom: 16px !important;
  }

  [style*="right: 5%; left: 5%"] {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Адаптируем размеры изображений в Rewards */
  img[style*="width: 197px"][style*="height: 32.5px"] {
    width: 150px !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Адаптируем текст в секции Rewards */
  [style*="font-size: 16px"][style*="text-transform: uppercase"][style*="color: rgb(255, 255, 255)"] {
    font-size: 14px !important;
    line-height: 16px !important;
  }

  /* Адаптируем навигационные ссылки в хедере */
  .r-f8sm7e a[style*="font-size: 16px"] {
    font-size: 14px !important;
  }

  /* Адаптируем контейнеры с max-width */
  [style*="max-width: 990.5px"],
  [style*="max-width: 1440px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Адаптируем изображения */
  img[style*="max-width: 990.5px"],
  img[style*="max-width: 1240px"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Адаптируем кнопки */
  [style*="font-size: 16px"][style*="text-transform: uppercase"] {
    font-size: 14px !important;
    padding: 12px 24px !important;
  }
}

/* Маленькие мобильные устройства (до 480px) */
@media screen and (max-width: 480px) {
  /* Еще больше уменьшаем размеры шрифтов */
  [style*="font-size: 46px"],
  [style*="font-size: 40px"],
  [style*="font-size: 34px"] {
    font-size: 20px !important;
    line-height: 24px !important;
  }

  [style*="font-size: 32px"],
  [style*="font-size: 30px"],
  [style*="font-size: 26px"] {
    font-size: 16px !important;
    line-height: 20px !important;
  }

  [style*="font-size: 20px"] {
    font-size: 14px !important;
    line-height: 18px !important;
  }

  /* Уменьшаем padding */
  [style*="padding-top: 64px"],
  [style*="padding-top: 32px"] {
    padding-top: 24px !important;
  }

  [style*="padding-bottom: 72px"],
  [style*="padding-bottom: 36px"] {
    padding-bottom: 24px !important;
  }

  /* Уменьшаем gap */
  [style*="gap: 48px"],
  [style*="gap: 40px"],
  [style*="gap: 24px"],
  [style*="gap: 16px"],
  [style*="gap: 12px"] {
    gap: 8px !important;
  }

  /* Оптимизация хедера на маленьких экранах */
  .r-f8sm7e {
    padding-bottom: 0px !important;
  }

  /* Скрываем навигационные ссылки на маленьких экранах */
  .r-f8sm7e [style*="gap: 40px"] {
    display: none !important;
  }

  /* Адаптируем gap */
  .r-f8sm7e [style*="gap: 26px"] {
    gap: 8px !important;
  }

  .r-f8sm7e [style*="gap: 16px"],
  .r-f8sm7e [style*="gap: 12px"] {
    gap: 8px !important;
  }

  /* Уменьшаем SVG иконки на маленьких экранах */
  .r-f8sm7e svg[width="72"][height="72"] {
    width: 40px !important;
    height: 40px !important;
  }

  .r-f8sm7e svg[width="24"][height="24"] {
    width: 20px !important;
    height: 20px !important;
  }

  .r-f8sm7e svg[width="22"][height="22"] {
    width: 16px !important;
    height: 16px !important;
  }

  .r-f8sm7e svg[width="30"][height="30"] {
    width: 20px !important;
    height: 20px !important;
  }

  /* Оптимизация секции Rewards на маленьких экранах */
  [style*="margin-top: -48px"],
  [style*="margin-top: -24px"],
  [style*="margin-top: -16px"] {
    margin-top: -8px !important;
  }

  [style*="margin-bottom: 48px"],
  [style*="margin-bottom: 24px"],
  [style*="margin-bottom: 16px"] {
    margin-bottom: 12px !important;
  }

  /* Адаптируем размеры изображений в Rewards на маленьких экранах */
  img[style*="width: 197px"][style*="height: 32.5px"] {
    width: 120px !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Адаптируем текст в секции Rewards на маленьких экранах */
  [style*="font-size: 16px"][style*="text-transform: uppercase"][style*="color: rgb(255, 255, 255)"] {
    font-size: 12px !important;
    line-height: 14px !important;
  }

  /* Адаптируем навигационные ссылки в хедере на маленьких экранах */
  .r-f8sm7e a[style*="font-size: 16px"] {
    font-size: 12px !important;
  }

  /* Уменьшаем padding в хедере на маленьких экранах */
  .r-f8sm7e {
    padding-bottom: 4px !important;
  }

  /* Адаптируем padding контейнеров */
  [style*="padding-left: 16px"],
  [style*="padding-right: 16px"],
  [style*="padding-left: 12px"],
  [style*="padding-right: 12px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Предотвращаем горизонтальную прокрутку */
@media screen and (max-width: 1024px) {
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Ограничиваем ширину основных контейнеров */
  .css-175oi2r,
  div[class*="css-"] {
    max-width: 100% !important;
  }

  /* Убираем min-width для всех элементов с инлайн стилями */
  [style*="min-width: 1440px"],
  [style*="min-width: 1440"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}