/**
 * Mobile-first стили — genportal.ru
 * Нижняя навигация, touch 44px+, безопасные отступы, пошаговая форма, skeleton.
 */

/* Safe area для вырезов и жестов */
:root {
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);
  --touch-min: 44px;
  --bottom-nav-h: 56px;
  --header-h: 52px;
}

/* Нижняя навигация — только на мобильных, строго в пределах экрана */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  background: #fff;
  border-top: 1px solid #e5e7eb;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
  .mobile-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}

.mobile-bottom-nav a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 6px 2px;
  color: #6b7280;
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 500;
  transition: color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-bottom-nav a:hover,
.mobile-bottom-nav a:focus {
  color: #2563eb;
  background: #eff6ff;
}

.mobile-bottom-nav a.active {
  color: #2563eb;
}

.mobile-bottom-nav svg {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

/* Отступ снизу для контента, чтобы не перекрывался нижней навигацией */
@media (max-width: 768px) {
  body.has-bottom-nav {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px);
  }
}

/* Минимальный размер зоны нажатия для интерактивных элементов */
@media (max-width: 768px) {
  .mobile-touch-target button,
  .mobile-touch-target a:not(.mobile-bottom-nav a),
  .mobile-touch-target select,
  .mobile-touch-target [role="button"] {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }

  /* Чекбоксы и радио — нормальный размер; зона нажатия за счёт label */
  .mobile-touch-target input[type="checkbox"],
  .mobile-touch-target input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
  }

  .mobile-touch-target label.flex.items-center {
    min-height: var(--touch-min);
    padding: 10px 12px;
  }

  .mobile-touch-target input[type="text"],
  .mobile-touch-target input[type="email"],
  .mobile-touch-target input[type="url"],
  .mobile-touch-target input[type="tel"],
  .mobile-touch-target input[type="number"],
  .mobile-touch-target input[type="date"],
  .mobile-touch-target select,
  .mobile-touch-target textarea {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px; /* предотвращает зум iOS при фокусе */
  }
}

/* На мобильных шаги отключены — форма одним скроллом */
.mobile-form-step {
  display: block;
}

@media (max-width: 768px) {
  /* Все шаги всегда видны, листаем вниз */
  .mobile-step-indicator,
  .mobile-step-actions {
    display: none !important;
  }
}

/* Индикатор шага */
.mobile-step-indicator {
  display: none;
}

@media (max-width: 768px) {
  .mobile-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
    margin-bottom: 8px;
  }
  .mobile-step-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    transition: background .2s, transform .2s;
  }
  .mobile-step-indicator span.active {
    background: #2563eb;
    transform: scale(1.2);
  }
  .mobile-step-indicator span.done {
    background: #10b981;
  }
}

/* Кнопки «Далее» / «Назад» для мобильной пошаговой формы */
.mobile-step-actions {
  display: none;
}

@media (max-width: 768px) {
  .mobile-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 0;
    position: sticky;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 8px);
    background: #fff;
    border-top: 1px solid #e5e7eb;
  }
  .mobile-step-actions button {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--touch-min);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 12px;
    padding: 0 8px;
  }
  .mobile-step-actions button[data-short] {
    font-size: 0.85rem;
  }
}

/* Skeleton загрузки вместо спиннера */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.2s ease-in-out infinite;
  border-radius: 8px;
}

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

.skeleton-text {
  height: 1em;
  margin-bottom: 8px;
}

.skeleton-block {
  min-height: 120px;
}

#previewSection .skeleton-preview {
  min-height: 400px;
}

/* Плавные микроанимации появления */
.mobile-fade-in {
  animation: mobileFadeIn 0.25s ease-out;
}

@keyframes mobileFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Мобильные: убираем «блок в блоке» — один уровень отступов от краёв */
@media (max-width: 768px) {
  header .max-w-7xl,
  .bg-gradient-to-r.from-blue-600 .max-w-7xl,
  main.max-w-7xl,
  footer .max-w-7xl,
  .max-w-7xl.mx-auto {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
  section.max-w-4xl {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
  /* Контейнер main обрезает всё, что выходит за счёт отрицательных отступов — убираем горизонтальный скролл */
  main#generator {
    overflow-x: hidden;
    max-width: 100%;
  }
  /* Карточка формы — без двойного отступа, один внутренний отступ */
  main#generator .mobile-touch-target.bg-white {
    margin-left: calc(-1 * max(12px, var(--safe-left)));
    margin-right: calc(-1 * max(12px, var(--safe-right)));
    border-radius: 0;
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }
  /* Секции ниже формы (предпросмотр, заявка, FAQ) — тоже без двойного отступа */
  main#generator .bg-white.rounded-lg.shadow-lg {
    margin-left: calc(-1 * max(12px, var(--safe-left)));
    margin-right: calc(-1 * max(12px, var(--safe-right)));
    border-radius: 0;
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }
}

/* Читаемость: базовая типографика на мобильных */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  .prose p, .prose li {
    font-size: 1rem;
    line-height: 1.6;
  }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.125rem; }
}

/* Уведомление на мобильных — полоса сверху, всегда видна при любой прокрутке */
@media (max-width: 768px) {
  .notification-toast {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: none !important;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Контрастность и фокус для доступности */
@media (max-width: 768px) {
  input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }
  a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }
}

/* Скрытие десктопного меню в хедере на мобильных — оставляем только лого и бургер */
/* Нижняя панель дублирует ключевые разделы, бургер — полное меню */

/* Фикс для Quill на мобильных: не ломать layout */
@media (max-width: 768px) {
  #preview .ql-editor {
    min-height: 300px;
    padding: 12px;
    font-size: 16px;
  }
  .ql-toolbar.ql-snow {
    padding: 8px;
  }
  .ql-toolbar .ql-formats button {
    min-width: var(--touch-min);
    min-height: 36px;
  }
}