/* =========================================================
   Mobile overrides for Visualizer
   Файл: style_vizualizer_mobile.css
   ========================================================= */

/* По умолчанию (десктоп) элементы мобильного меню скрыты */
.mobile-menu-btn,
.mobile-menu-close,
.menu-backdrop {
  display: none;
}

/* Небольшая страховка: если где-то появится, не ломаем верстку */
.viz-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================================================
   Mobile layout
   ========================================================= */
@media (max-width: 768px) {
  /* На мобильных нужно разрешить скролл (в desktop css он hidden) */
  html, body {
    overflow: auto !important;
    height: auto !important;
  }

  /* Шапка компактнее */
  .viz-header {
    padding: 12px 14px;
    gap: 10px;
  }

  .viz-header h1 {
    font-size: 1.2rem;
    line-height: 1.1;
  }

  .main-site-btn {
    padding: 6px 10px;
    font-size: 0.9rem;
  }

  /* Кнопка открытия меню */
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #111;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    line-height: 1;
  }

  /* Основная область: контент на всю ширину */
  .viz-main {
    height: auto;
    min-height: calc(100vh - 60px);
  }

  .viz-content {
    padding: 12px;
    align-items: stretch;
    justify-content: flex-start;
    overflow: auto;
  }

  /* =========================================================
     Off-canvas меню (сдвигается слева)
     ========================================================= */
  .viz-menu {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 78vw;
    max-width: 320px;

    padding: 70px 18px 18px;
    box-sizing: border-box;

    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: 200;

    /* перекрываем desktop-параметры */
    min-width: 0;
    gap: 14px;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Открытие меню по чекбоксу */
  #menuToggle:checked ~ .viz-menu {
    transform: translateX(0);
  }

  /* Кнопка закрытия внутри меню */
  .mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 14px;
    right: 14px;

    width: 38px;
    height: 38px;

    border: 1px solid #111;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;

    font-size: 1.4rem;
    line-height: 1;
  }

  /* Подложка */
  .menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 150;
  }

  #menuToggle:checked ~ .menu-backdrop {
    display: block;
  }

  /* =========================================================
     Общая адаптация элементов под мобильный экран
     ========================================================= */

  /* Шаг 1: загрузка */
  .upload-box {
    width: 92vw;
    max-width: 520px;
    height: auto;
    min-height: 260px;
    padding: 18px;
  }

  .upload-content h2 {
    font-size: 1.2rem;
  }

  .upload-content p {
    font-size: 0.95rem;
  }

  .image-preview {
    height: auto;
    max-height: 60vh;
  }

  .upload-controls {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Кнопки: чуть компактнее */
  .btn {
    padding: 8px 14px;
  }

  /* Шаг 2: узор */
  .step-2 {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .controls-panel {
    width: 100%;
    max-width: none;
    min-width: 0;

    height: auto;
    max-height: none;

    padding: 10px;
  }

  canvas#patternCanvas {
    max-width: 100%;
    max-height: 55vh;
  }

  /* Ползунки */
  input[type="range"] {
    height: 28px;
  }

  /* Шаг 3: фасад */
  .facade-section {
    flex-direction: column;
    width: 100%;
  }

  .facade-left {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    width: 100%;
    padding: 0;
  }

  .facade-left.wide {
    right: auto;
  }

  .facade-gallery {
    position: static;
    width: 100%;
    height: auto;

    border-left: none;
    border-top: 1px solid #ddd;

    padding: 12px;
    box-sizing: border-box;
    margin-top: 12px;
  }

  .gallery-list {
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .gallery-item {
    width: 160px;
    flex: 0 0 auto;
  }

  /* Шаг 4: наложение */
  .overlay-container {
    max-width: 100%;
    height: 60vh;
  }

  .overlay-controls {
    width: 100%;
    padding: 0 12px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  /* Ручки чуть меньше */
  .handle {
    width: 16px;
    height: 16px;
  }

  .handle-edge {
    width: 12px;
    height: 12px;
  }

  /* Шаг 5: результат */
  .result-container .overlay-container {
    max-width: 100%;
    height: 60vh;
  }

  .result-container h2 {
    font-size: 1.3rem;
  }
}

/* Очень маленькие экраны */
@media (max-width: 420px) {
  .viz-header h1 {
    font-size: 1.05rem;
  }

  .main-site-btn {
    font-size: 0.85rem;
  }

  .gallery-item {
    width: 140px;
  }

  .upload-box {
    min-height: 230px;
  }
}