/*
 * responsive.css — общий адаптивный модуль для всех четырёх калькуляторов маркиз.
 * Mobile-first, breakpoints: xs<375 | sm 375-767 | md 768-1023 | lg 1024-1439 | xl 1440+
 */

/* ════════════════════════════════════════════════════════════════
   1. RESET + BASE
════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  overflow-x:hidden;
  min-width:320px;
}

/* ════════════════════════════════════════════════════════════════
   2. CSS-переменные
════════════════════════════════════════════════════════════════ */
:root{
  --ch-dark:#1a2744;
  --ch-dark2:#243057;
  --ch-orange:#e8622a;
  --ch-orange-h:#d4541f;
  --ch-accent:var(--ch-orange);
  --ch-light:#f4f6fb;
  --ch-border:#dde3f0;
  --ch-text:#1a2744;
  --ch-muted:#6b7a99;
  --ch-white:#fff;
  --ch-radius:12px;
  --ch-radius-sm:8px;
  --ch-trans:all 0.2s ease;

  /* Fluid spacing */
  --sp-xs:clamp(8px,2vw,12px);
  --sp-sm:clamp(12px,3vw,16px);
  --sp-md:clamp(16px,4vw,24px);
  --sp-lg:clamp(24px,5vw,40px);

  /* Safe-area */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

/* ════════════════════════════════════════════════════════════════
   3. FLUID TYPOGRAPHY (clamp — ни один текст не обрезается)
════════════════════════════════════════════════════════════════ */
/* Заголовки шагов */
.wz-step-title,.step-title-fluid{
  font-size:clamp(15px,4vw,20px);
  font-weight:700;
  line-height:1.25;
}
/* Описание шага */
.wz-step-sub,.step-sub-fluid{
  font-size:clamp(11px,2.8vw,14px);
  line-height:1.5;
}
/* Подписи карточек */
.choice-card-label,.card-title,.tc-name,.fabric-card-name,.sc-fc-name,.smc-title{
  font-size:clamp(12px,3.2vw,14px);
}
/* Мелкий текст (теги, категории) */
.tc-sub,.choice-card-desc,.card-desc,.fabric-card-cat,.smc-badge{
  font-size:clamp(9px,2.2vw,11px);
}
/* Цена в результатах */
.result-price{
  font-size:clamp(24px,7vw,44px) !important;
}
/* Цена итого Twin/ERA */
.result-total,.result-total-footer-price{
  font-size:clamp(22px,6vw,36px) !important;
}

/* ════════════════════════════════════════════════════════════════
   4. КОНТЕЙНЕР — mobile-first, расширяем на md/lg/xl
════════════════════════════════════════════════════════════════ */
.ch-calc{
  width:100%;
  max-width:580px;
  margin:0 auto;
  padding:
    max(8px,var(--safe-top))
    max(12px,var(--safe-right))
    max(80px,calc(16px + var(--safe-bottom)))
    max(12px,var(--safe-left));
  box-sizing:border-box;
}

@media(min-width:768px){
  .ch-calc{
    max-width:720px;
    padding-left:max(20px,var(--safe-left));
    padding-right:max(20px,var(--safe-right));
  }
}
@media(min-width:1024px){
  .ch-calc{
    max-width:960px;
    padding-left:max(28px,var(--safe-left));
    padding-right:max(28px,var(--safe-right));
  }
}
@media(min-width:1440px){
  .ch-calc{max-width:1140px}
}

/* ════════════════════════════════════════════════════════════════
   5. ПРОГРЕСС-БАР — sticky + backdrop
════════════════════════════════════════════════════════════════ */
.wz-progress,.steps-bar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(26,39,68,0.08);
  display:flex;
  align-items:flex-start;
  padding:12px 4px 8px;
  gap:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.wz-progress::-webkit-scrollbar,.steps-bar::-webkit-scrollbar{display:none}

/* Планшет: полные подписи */
@media(min-width:768px){
  .wz-progress,.steps-bar{
    padding:14px 8px 10px;
    overflow-x:visible;
  }
  .wz-step-label,.step-label{
    font-size:10px;
    white-space:normal;
    text-align:center;
  }
  .wz-step-dot,.step-circle{
    width:30px !important;
    height:30px !important;
    font-size:12px !important;
  }
}

/* Десктоп: иконки ещё крупнее */
@media(min-width:1024px){
  .wz-step-dot,.step-circle{
    width:34px !important;
    height:34px !important;
    font-size:13px !important;
  }
  .wz-step-label,.step-label{
    font-size:11px;
  }
}

/* ════════════════════════════════════════════════════════════════
   6. TYPE CARDS — исправление горизонтальной обрезки на 320px
════════════════════════════════════════════════════════════════ */
.tc-wrap{
  position:relative;
  margin:0 -12px;
  overflow:hidden; /* предотвращаем overflow страницы */
}
.tc-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:4px 12px 14px;
  cursor:grab;
  /* Snap-padding чтобы карточки не прятались за краем */
  scroll-padding-left:12px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.tc-scroll::-webkit-scrollbar{display:none}
.tc-scroll.is-dragging{cursor:grabbing;user-select:none}
/* Swipe hint — показываем только на мобильных */
.tc-hint{
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.45);
  padding:2px 0 8px;
  letter-spacing:.03em;
  user-select:none;
  pointer-events:none;
}
.tc-hint::before{
  content:"← Листайте →";
}

/* XS: одна карточка почти полноэкранная */
@media(max-width:374px){
  .tc-card{
    flex:0 0 calc(90vw - 24px) !important;
    min-width:0 !important;
    max-width:none !important;
  }
}
/* SM: мобильные 375-767 */
@media(min-width:375px) and (max-width:767px){
  .tc-card{
    flex:0 0 calc(80vw - 16px) !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* MD планшет: 2 колонки, без горизонтального скролла */
@media(min-width:768px){
  .tc-wrap{
    margin:0;
    overflow:visible;
  }
  .tc-scroll{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    overflow-x:visible;
    scroll-snap-type:none;
    padding:4px 0 14px;
    cursor:default;
  }
  .tc-card{
    flex:none !important;
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
  }
  .tc-hint{display:none}
}

/* LG+ десктоп: 3–4 колонки */
@media(min-width:1024px){
  .tc-scroll{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(min-width:1280px){
  .tc-scroll{
    grid-template-columns:repeat(4,1fr);
  }
}

/* ════════════════════════════════════════════════════════════════
   7. ПЛАНШЕТНЫЙ МАКЕТ — 2-колоночные сетки, каталог тканей 4-5 в ряд
════════════════════════════════════════════════════════════════ */
/* Карточки выбора (опции) — 2 колонки на планшете */
@media(min-width:768px){
  .choice-grid-1{grid-template-columns:1fr 1fr}
  .cards-grid,.fabric-cards{
    grid-template-columns:1fr 1fr;
  }
  /* Свотчи тканей: 4-5 в ряд */
  .color-swatches{
    gap:20px;
  }
  .veozip-grid,.sc-veozip-grid,.soltis-grid,.sc-soltis-grid,.sc-vz-swatch-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  /* Визуализация результата: изображение слева, текст справа */
  .decolife-result-inner{
    flex-direction:row;
    gap:20px;
    align-items:flex-start;
  }
  .decolife-result-media{
    flex:0 0 45%;
    width:45%;
  }
  .decolife-result-text{
    flex:1;
  }

  /* Форма контактов: 2 колонки */
  .lead-channels{
    grid-template-columns:1fr 1fr 1fr;
  }
  .lead-row{
    flex-direction:row;
  }
}

/* ════════════════════════════════════════════════════════════════
   8. ДЕСКТОПНЫЙ МАКЕТ (1024px+)
════════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
  /* Параметры слева, визуализация справа */
  .desktop-two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:start;
  }

  /* Навигационные кнопки: в потоке (не плавающие) */
  .wz-nav,.step-nav,.nav-btns{
    position:static;
    background:transparent;
    box-shadow:none;
    padding-bottom:0;
  }

  /* Карточки выбора: 3-4 колонки */
  .choice-grid-2{grid-template-columns:1fr 1fr 1fr}
  .choice-grid-3{grid-template-columns:1fr 1fr 1fr 1fr}

  /* Свотчи тканей: 6+ в ряд */
  .veozip-grid,.sc-veozip-grid,.soltis-grid,.sc-soltis-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  /* Форма контактов: 4 колонки */
  .lead-channels{
    grid-template-columns:repeat(4,1fr);
  }
}

/* ════════════════════════════════════════════════════════════════
   9. TOUCH-ЗОНЫ (мин. 44×44px)
════════════════════════════════════════════════════════════════ */
.wz-btn-prev,.wz-btn-next,.wz-btn-calc,
.btn-back,.btn-next,.btn-calculate,.calc-btn,
.toggle-btn,.preset-btn,
.step-item,.wz-step-node,
.choice-card,.option-card,.fabric-card,
.tc-card,
.add-row-btn,.sc-add-row-btn,
.pill,
.lead-channel-btn,
button{
  min-height:44px;
  touch-action:manipulation;
}
.color-swatch-dot{
  min-width:44px;
  min-height:44px;
}

/* ════════════════════════════════════════════════════════════════
   10. КНОПКИ НАВИГАЦИИ — safe-area-inset-bottom на iPhone
════════════════════════════════════════════════════════════════ */
.wz-nav,.step-nav,.nav-btns{
  padding-bottom:max(16px,var(--safe-bottom));
  gap:10px;
  display:flex;
  flex-wrap:nowrap;
}

/* На мобильных — sticky-навигация внизу */
@media(max-width:767px){
  .wz-nav,.step-nav,.nav-btns{
    position:sticky;
    bottom:0;
    z-index:90;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 -2px 8px rgba(26,39,68,0.08);
    padding:12px max(12px,var(--safe-right)) max(16px,var(--safe-bottom)) max(12px,var(--safe-left));
    margin:0 calc(-1 * max(12px,var(--safe-left)));
    width:calc(100% + max(12px,var(--safe-left)) + max(12px,var(--safe-right)));
  }
}

/* ════════════════════════════════════════════════════════════════
   11. РАЗМЕРНЫЕ ПОЛЯ — на мобильных 3 колонки не умещаются
════════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .size-row-fields{
    grid-template-columns:1fr 1fr !important;
  }
  .field-row-3col{
    grid-template-columns:1fr 1fr !important;
  }
  .cards-3col,.cards-grid.cards-3col,.screen-model-cards{
    grid-template-columns:1fr 1fr !important;
  }
}
@media(max-width:374px){
  .size-row-fields,.field-row-3col{
    grid-template-columns:1fr !important;
  }
  .cards-3col,.cards-grid.cards-3col,.screen-model-cards{
    grid-template-columns:1fr !important;
  }
  .lead-channels{
    grid-template-columns:1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   12. LAZY IMAGES — предотвращение CLS
════════════════════════════════════════════════════════════════ */
img[loading="lazy"]{
  content-visibility:auto;
}
/* Свотчи тканей: фиксированный aspect-ratio предотвращает скачки */
.sc-vz-swatch img,
.sc-soltis-swatch img,
.veozip-swatch img,
.soltis-swatch img,
.color-swatch-img,
.tc-card-photo{
  aspect-ratio:1;
  width:100%;
  object-fit:cover;
  display:block;
}
.tc-bg{
  aspect-ratio:16/9;
  min-height:unset;
  height:auto;
}
.tc-card-photo{
  aspect-ratio:16/9;
}

/* Плейсхолдер до загрузки изображения */
img[data-src]{
  background:var(--ch-light);
  min-height:40px;
}

/* ════════════════════════════════════════════════════════════════
   13. СКЕЛЕТОН-АНИМАЦИИ (для медленной сети)
════════════════════════════════════════════════════════════════ */
@keyframes skeleton-pulse{
  0%,100%{opacity:1}
  50%{opacity:0.5}
}
.skeleton{
  background:linear-gradient(90deg,var(--ch-light) 25%,#e8ecf4 50%,var(--ch-light) 75%);
  background-size:200% 100%;
  animation:skeleton-pulse 1.5s ease infinite;
  border-radius:var(--ch-radius-sm);
}

/* ════════════════════════════════════════════════════════════════
   14. БАННЕР МЕДЛЕННОГО СОЕДИНЕНИЯ
════════════════════════════════════════════════════════════════ */
.slow-net-banner{
  display:none;
  align-items:center;
  gap:10px;
  background:#fffbe6;
  border:1.5px solid #ffe066;
  border-radius:var(--ch-radius-sm);
  padding:10px 14px;
  font-size:12px;
  color:#7d5800;
  margin-bottom:12px;
  line-height:1.5;
}
.slow-net-banner.visible{display:flex}
.slow-net-banner-icon{flex-shrink:0;font-size:16px}

/* ════════════════════════════════════════════════════════════════
   15. МЕДЛЕННАЯ СЕТЬ — упрощённые анимации
════════════════════════════════════════════════════════════════ */
body.slow-connection *{
  transition-duration:0ms !important;
  animation-duration:0ms !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.slow-connection .tc-card-photo{
  display:none;
}
body.slow-connection .tc-bg-placeholder{
  display:flex !important;
}

/* ════════════════════════════════════════════════════════════════
   16. ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ — глобальная защита
════════════════════════════════════════════════════════════════ */
body{max-width:100vw;overflow-x:hidden}
.ch-calc *{max-width:100%;box-sizing:border-box}

/* Таблицы внутри калькулятора */
.elbow-arms-table,.sattler-promo-grid img,.sc-size-row{
  max-width:100%;
  overflow-x:auto;
}

/* ════════════════════════════════════════════════════════════════
   17. СВАЙП ПОДСКАЗКА (мобильные, шаг 1 — карточки типов)
════════════════════════════════════════════════════════════════ */
.tc-swipe-hint{
  text-align:center;
  font-size:11px;
  color:var(--ch-muted);
  margin-top:4px;
  display:none;
}
@media(max-width:767px){
  .tc-swipe-hint{display:block}
}
@media(min-width:768px){
  .tc-swipe-hint{display:none}
}

/* ════════════════════════════════════════════════════════════════
   18. ПЛАНШЕТНЫЙ MACЕТ — специфичные компоненты
════════════════════════════════════════════════════════════════ */
@media(min-width:768px) and (max-width:1023px){
  /* Убрать уменьшенный padding только для мобильных */
  .ch-calc{
    padding-top:max(12px,var(--safe-top));
  }

  /* Прогресс-бар: полные подписи */
  .step-label{display:block !important}

  /* Кнопки навигации: не sticky на планшете */
  .wz-nav,.step-nav,.nav-btns{
    position:static;
    background:transparent;
    box-shadow:none;
    margin:0;
    width:100%;
    padding:18px 0 4px;
  }
}

/* ════════════════════════════════════════════════════════════════
   19. INPUT FOCUS — скролл к полю (поддержка через JS scroll-into-view)
════════════════════════════════════════════════════════════════ */
.ch-input:focus,.ch-select:focus,
input:focus,select:focus,textarea:focus{
  scroll-margin-top:60px; /* отступ под sticky progress-bar */
}

/* ════════════════════════════════════════════════════════════════
   20. ЛАЙТБОКС — bottom sheet на мобильных
════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  #scFabLightbox,#evLbLightbox,#vzLightbox{
    align-items:flex-end !important;
  }
  #evLbCard,#vzLbCard{
    border-radius:var(--ch-radius) var(--ch-radius) 0 0 !important;
    max-height:90vh !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   21. CONTAINER QUERIES — адаптация компонентов к родительскому контейнеру
   Браузерная поддержка: Chrome 105+, Firefox 110+, Safari 16+
════════════════════════════════════════════════════════════════ */

/* Устанавливаем контекст containment на контейнерах */
.tc-wrap,
.cards-grid,
.choice-grid,
.fabric-cards,
.color-swatches,
.wz-nav,
.step-nav,
.lead-row,
.decolife-result-inner{
  container-type:inline-size;
}

/* tc-card: компактный вид когда контейнер уже 380px */
@container (max-width: 380px) {
  .tc-card .tc-feats{
    display:none;
  }
  .tc-body{
    padding:8px 10px 10px;
  }
  .tc-name{
    font-size:13px;
  }
}

/* choice-card: убираем описание в узких контейнерах */
@container (max-width: 300px) {
  .choice-card-desc,.card-desc{
    display:none;
  }
  .choice-card,.option-card{
    padding:8px;
  }
}

/* fabric-card: убираем категорию когда нет места */
@container (max-width: 160px) {
  .fabric-card-cat,.sc-fc-cat{
    display:none;
  }
  .fabric-card-name,.sc-fc-name{
    font-size:11px;
  }
}

/* nav кнопки: полные названия убираем в узком контейнере */
@container (max-width: 380px) {
  .wz-btn-prev .btn-label,
  .btn-back .btn-label{
    display:none;
  }
  .wz-btn-next .btn-secondary-text,
  .wz-btn-calc .btn-secondary-text{
    display:none;
  }
}

/* lead-row: двухколоночная раскладка в широком контейнере */
@container (min-width: 480px) {
  .lead-row{
    flex-direction:row;
    align-items:flex-start;
    gap:16px;
  }
}

/* decolife-result: картинка слева от текста при достаточной ширине */
@container (min-width: 480px) {
  .decolife-result-inner{
    flex-direction:row;
    gap:20px;
    align-items:flex-start;
  }
  .decolife-result-media{
    flex:0 0 40%;
  }
  .decolife-result-text{
    flex:1;
  }
}