/**
 * Мобильная версия TRAFFYUP (до 768px).
 * Без обрезаний, без наложений, полный функционал на телефоне.
 */

/* Fallback: keep menu labels visible on all pages/sizes. */
.menu-dropdown .menu-label {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.menu-dropdown .menu-label:empty::before {
  content: attr(data-fallback);
}

/* ——— Базовые правила: никакого выхода за экран ——— */
@media (max-width: 768px) {
  html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    width: 100%;
  }
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Контейнеры не вылезают за экран */
  .container,
  header .container,
  nav .container,
  main .container,
  section.container,
  .container.mx-auto {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Картинки и медиа */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  /* Текст не выходит за границы */
  p, span, h1, h2, h3, a, td, th, label {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ——— Шапка и нав ——— */
  nav, header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    max-width: 100%;
  }
  nav .flex.items-center.gap-4,
  header .flex {
    flex: 1 1 auto;
    min-width: 0;
  }
  nav .relative.flex.items-center.gap-3,
  header .relative.flex {
    flex-shrink: 0;
    gap: 0.5rem;
  }
  .btn-burger {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }

  /* Выпадающее меню: на весь экран по ширине, не обрезается */
  .menu-dropdown {
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: auto !important;
    max-width: 100vw !important;
    width: calc(100vw - 2rem) !important;
    margin-top: 8px !important;
  }
  .menu-dropdown a,
  .menu-dropdown .menu-item-balance,
  .menu-dropdown span.flex.items-center,
  .menu-dropdown .menu-item {
    min-height: 48px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ——— Заголовки: меньше, чтобы не обрезались ——— */
  .font-display.text-4xl,
  .font-display.text-5xl,
  .font-display.text-6xl,
  .font-display.text-7xl {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }
  section.relative.container.mx-auto.px-6 section,
  header section {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }

  /* ——— Карточки статистики ——— */
  .stat-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  [class*="flex-wrap"].justify-center {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  .stat-card .stat-number,
  .stat-card [class*="text-3xl"],
  .stat-card [class*="text-4xl"] {
    font-size: 1.5rem !important;
  }

  /* ——— Секции ——— */
  section.relative.container {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    max-width: 100% !important;
  }
  .grid.gap-6 {
    gap: 1rem;
  }
  [class*="grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }
  .glass.rounded-2xl.p-6,
  .glass-border.rounded-2xl.p-6 {
    padding: 1rem !important;
    max-width: 100%;
  }

  /* ——— Карточки услуг ——— */
  .card-hover .w-14 {
    width: 3rem;
    height: 3rem;
  }
  .card-hover .w-8 {
    width: 1.5rem;
    height: 1.5rem;
  }
  .card-hover a.block.w-full {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ——— Отзывы ——— */
  .reviews-card,
  .grid .reviews-card {
    min-width: 0;
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* ——— FAQ ——— */
  details summary {
    padding: 1rem !important;
    min-height: 48px;
    align-items: center;
  }
  details p {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ——— Footer ——— */
  footer .flex.flex-wrap {
    flex-direction: column;
    gap: 1rem;
  }
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ——— Модальное окно: не обрезается, прокрутка внутри ——— */
  .modal-backdrop {
    padding: 0.5rem;
    align-items: flex-start;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  .modal-content {
    width: 100% !important;
    max-width: calc(100vw - 1rem) !important;
    margin: auto;
    max-height: calc(100vh - 2rem - env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-content .btn-primary,
  .modal-content button[type="submit"] {
    min-height: 48px;
    width: 100%;
  }

  /* ——— Кнопки и ссылки (удобно нажимать) ——— */
  a.inline-block.px-8.py-4,
  a.inline-block.px-6.py-3,
  .btn-primary {
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ——— Страница заказов: таблица с горизонтальным скроллом ——— */
  .cabinet-card {
    margin-left: 0;
    margin-right: 0;
    border-radius: 1rem;
    max-width: 100%;
    overflow: hidden;
  }
  .cabinet-card .px-4,
  .cabinet-card .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #orders-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #orders-wrap table {
    min-width: 100%;
  }

  /* ——— Страница цен ——— */
  .view .space-y-4 button,
  .view .space-y-4 a {
    min-height: 56px;
    padding: 1rem !important;
  }
  .calc-input-wrap input {
    font-size: 16px !important; /* убирает зум на iOS */
  }
  #btn-pay {
    min-height: 52px !important;
    width: 100%;
  }

  /* ——— Партнёрка ——— */
  .glass-card {
    padding: 1rem !important;
    max-width: 100%;
  }
  .glass-card input,
  .glass-card button {
    min-height: 48px;
  }
  #ref-link {
    font-size: 0.875rem;
    min-height: 48px;
    word-break: break-all;
  }

  /* Фикс: фиксированные/абсолютные блоки не вылезают */
  .fixed {
    left: env(safe-area-inset-left, 0);
    right: env(safe-area-inset-right, 0);
    max-width: 100vw;
  }
}

/* Очень узкие экраны (< 380px) */
@media (max-width: 380px) {
  nav .font-display,
  .font-display {
    font-size: 1rem !important;
  }
  .container.mx-auto.px-6,
  .container.mx-auto.px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}