/* mob/components.css
   Формы, кнопки, типографика (можно расширять по мере правок)
*/
@media (max-width: 1024px){
  h1{ font-size: 28px; line-height: 1.15; }
  h2{ font-size: 22px; line-height: 1.25; }
  h3{ font-size: 18px; line-height: 1.3; }

  p{ font-size: 16px; color: var(--mob-muted); }

  /* Формы */
  input, select, textarea{
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
  }

  button, .pi-btn, .btn{
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 16px;
  }
}

/* === Fix: "Остались вопросы" background ends early on mobile ===
   Desktop block uses a non-repeating background image; when the block grows taller (form becomes 1-column)
   the image doesn't cover the full height. On mobile force solid dark background.
*/
@media (max-width: 767px){
  .pi-section-w.zk-feedback-question{
    background-image: none !important;
    background-color: #222 !important;
  }
  .pi-section-w.zk-feedback-question .pi-section{
    background: transparent !important;
  }
}

@media (max-width: 1024px){
  .zk-best-offer li .pi-slide{
    width: auto !important;
    max-width: 100% !important;
    padding: 72px 16px 0 16px !important;
  }

  .zk-best-offer li .pi-slide h2{
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) and (orientation: portrait){
  .zk-feedback-subscribe .pi-section{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .zk-feedback-subscribe h2{
    margin: 0 0 10px 0 !important;
  }

  .zk-feedback-subscribe p{
    margin: 0 0 14px 0 !important;
  }
}

@media (max-width: 767px) and (orientation: portrait){
  .zk-feedback-question .zk-btn,
  .zk-feedback-question .zk-form{
    width: 100% !important;
  }

  .zk-feedback-question .zk-form input{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 0 12px 0 !important;
  }

  /* кнопка "Отправить заявку" у вас span — делаем её нормальной */
  .zk-feedback-question .zk-form > span{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 767px) and (orientation: portrait){
  .zk-feedback-question h2 a{
    white-space: nowrap;
    display: inline-block;
  }
}

@media (max-width: 767px) and (orientation: portrait){
  /* Лучшие предложения (Revolution Slider) */
  .tp-banner-container.zk-best-offer,
  .zk-best-offer{
    height: 260px !important;
    overflow: hidden !important;
  }
  .zk-best-offer li .pi-slide{
    width: auto !important;
    max-width: 100% !important;
    padding: 60px 16px 0 16px !important;
  }
  .zk-best-offer li .pi-slide h2{
    width: auto !important;
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin: 0 0 10px 0 !important;
  }
  .zk-best-offer li .pi-slide .btn{
    display: inline-block;
    padding: 10px 14px !important;
    font-size: 15px !important;
  }

  /* Почему именно мы — не даём тексту выталкивать вправо */
  .zk-main-advantages, .zk-main-advantages *{
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Остались вопросы — текст и форма в один столбец */
  .zk-feedback-question .zk-text,
  .zk-feedback-question .zk-btn{
    width: 100% !important;
    float: none !important;
  }
  .zk-feedback-question .zk-form{
    width: 100% !important;
  }
  .zk-feedback-question .zk-form input{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 0 12px 0 !important;
  }
  .zk-feedback-question .zk-form > span{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
  .zk-feedback-question h2 a{
    white-space: nowrap;
    display: inline-block;
  }

  /* Подписка — ровные отступы */
  .zk-feedback-subscribe .pi-section{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}


/* === Mobile fixes vA-1 (2026-03-03) === */
@media (max-width: 767px) and (orientation: portrait){
  /* 1) Остались вопросы — контейнер не должен резать форму */
  .zk-feedback-question,
  .pi-section-w.zk-feedback-question,
  .pi-section-w.zk-feedback-block.zk-feedback-question{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .pi-section-w.zk-feedback-block.zk-feedback-question .pi-section{
    overflow: visible !important;
    padding-bottom: 26px !important;
  }
  .zk-feedback-question .zk-btn{ margin-top: 14px !important; }

  /* 3) Подписка — меньше нижний отступ */
  .pi-section-w.zk-feedback-subscribe.zk-feedback-block .zk-text{
    padding: 18px 0 0 0 !important;
    text-align: center !important;
  }
  .pi-section-w.zk-feedback-subscribe.zk-feedback-block .pi-section{
    padding-bottom: 14px !important;
  }

  /* 4) Новости — отступы/переносы карточек */
  .pi-section-w.zk-main-news .pi-section{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .pi-section-w.zk-main-news .zk-news-block{
    margin-bottom: 18px !important;
  }
  .pi-section-w.zk-main-news h3{
    margin: 0 0 14px 0 !important;
  }

  /* 5) Лучшие предложения — заголовок не должен уезжать вправо */
  .tp-banner-container.zk-best-offer .tp-caption,
  .tp-banner-container.zk-best-offer .tp-caption *,
  .zk-best-offer .tp-caption,
  .zk-best-offer .tp-caption *{
    max-width: 100% !important;
  }
  .tp-banner-container.zk-best-offer .tp-caption{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  .zk-best-offer li .pi-slide h2,
  .zk-best-offer li .pi-slide h2 span{
    display:block !important;
    max-width: 100% !important;
    width: auto !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}


/* vA1+ popup subscribe: fit screen + one column */
@media (max-width: 767px){
  .subscribe-popup-block{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    padding: 16px !important;
    border-radius: 16px;
  }
  .subscribe-popup-block form,
  .subscribe-popup-block input,
  .subscribe-popup-block textarea{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  .subscribe-popup-block input{
    margin: 0 0 12px 0 !important;
  }
  .subscribe-popup-block p,
  .subscribe-popup-block p a{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  .subscribe-popup-block .submit-btn{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}


/* vA1+ about advantages: match main page one-column layout */
@media (max-width: 767px){
  .zk-about-advantages ul{
    margin: 0 !important;
    padding: 0 !important;
  }
  .zk-about-advantages li{
    list-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 18px 0 !important;
  }
  .zk-about-advantages h3{
    margin: 0 0 6px 0 !important;
  }
  .zk-about-advantages p{
    margin: 0 !important;
  }
}


/* vA1+ titlebar: keep H1 inside screen */
@media (max-width: 767px){
  .pi-titlebar h1{
    font-size: 24px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}


/* vA1+ feedback question: prevent form overlapping following text */
@media (max-width: 767px){
  .zk-feedback-question .zk-btn{
    float: none !important;
    width: 100% !important;
  }
  #zk-feedback-question{
    overflow: visible !important;
  }
  .zk-feedback-question .zk-btn > p{
    clear: both !important;
    margin-top: 12px !important;
  }
  #zk-feedback-question .zk-clear{
    clear: both !important;
    display: block !important;
  }
}
@media (max-width: 767px){
  .zk-best-offer,
  .zk-best-offer .tp-banner-container,
  .zk-best-offer .tp-banner{
    height: 220px !important;     /* уменьшили */
    max-height: 220px !important;
    overflow: hidden !important;
  }

  /* убираем лишний тёмный слой снизу */
  .zk-best-offer .fon{
    height: 100% !important;
    bottom: 0 !important;
  }

  /* caption/slide не должны иметь “десктопную” высоту */
  .zk-best-offer .tp-caption{
    height: 100% !important;
  }
  .zk-best-offer .pi-slide{
    width: 100% !important;
    max-width: 100% !important;
    padding: 48px 16px 0 16px !important;
    background: transparent !important;
  }

  /* заголовок не уезжает вправо */
  .zk-best-offer .pi-slide h2,
  .zk-best-offer .pi-slide h2 span{
    display:block !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 767px){

  .zk-feedback-question .pi-section{
    padding: 18px 16px 22px 16px !important;
  }

  .zk-feedback-question .zk-text,
  .zk-feedback-question .zk-btn{
    float: none !important;
    width: 100% !important;
  }

  #zk-feedback-question{
    width: 100% !important;
    overflow: visible !important;
  }

  #zk-feedback-question input{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 0 12px 0 !important;
  }

  #zk-feedback-question > span{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }

  /* текст под формой не должен наезжать */
  .zk-feedback-question .zk-btn > p{
    clear: both !important;
    margin-top: 12px !important;
  }
}
@media (max-width: 767px){
  .zk-feedback-request h2{
    text-align: center !important;
    font-size: 80% !important;   /* -20% */
    line-height: 1.2 !important;
    margin: 0 0 10px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
@media (max-width: 767px){

  .subscribe-popup-block,
  .feedback-popup-block{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    padding: 16px !important;
    border-radius: 16px;
  }

  .subscribe-popup-block form,
  .feedback-popup-block form,
  .subscribe-popup-block input,
  .feedback-popup-block input,
  .subscribe-popup-block textarea,
  .feedback-popup-block textarea{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .subscribe-popup-block p,
  .feedback-popup-block p{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .subscribe-popup-block .submit-btn,
  .feedback-popup-block .submit-btn{
    display:block !important;
    width:100% !important;
    text-align:center !important;
  }
}

/* === Mobile fixes vA3 (2026-03-03) === */
@media (max-width: 1024px){
  /* Global: prevent accidental horizontal overflow */
  html, body, #pi-all, #page{ max-width:100% !important; overflow-x:hidden !important; }
  img, iframe{ max-width:100% !important; height:auto !important; }
}

/* “Остались вопросы” form: 1 column, nothing overflows */
@media (max-width: 767px){
  .zk-feedback-question .zk-btn{ padding: 0 16px 18px 16px !important; }
  #zk-feedback-question.zk-form{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    width:100% !important;
    max-width: 520px;
    margin: 0 auto !important;
  }
  #zk-feedback-question.zk-form input{
    width:100% !important;
    float:none !important;
    box-sizing:border-box !important;
  }
  #zk-feedback-question.zk-form .zk-clear{ display:none !important; }
  #zk-feedback-question.zk-form span{
    display:block !important;
    width:100% !important;
    text-align:center;
  }
  /* paragraph under the form should not be overlapped */
  .zk-feedback-question .zk-btn > p{
    margin-top: 12px !important;
    padding: 0 4px !important;
  }
}

/* Popups: fit into viewport, inputs in one column */
@media (max-width: 767px){
  .popup-block{
    width: calc(100vw - 24px) !important;
    max-width: 520px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 12px !important;
    margin: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
    padding: 16px !important;
  }
  .popup-block form{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }
  .popup-block input, .popup-block textarea{
    width:100% !important;
    float:none !important;
    box-sizing:border-box !important;
  }
  .popup-block p{ word-break: break-word; }
}

/* Slider “Лучшие предложения”: reduce height and keep text inside */
@media (max-width: 767px){
  .tp-banner-container.zk-best-offer,
  .tp-banner-container.zk-best-offer .tp-banner,
  .tp-banner-container.zk-best-offer .tp-revslider-mainul,
  .tp-banner-container.zk-best-offer .tp-revslider-slidesli{
    height: 240px !important;
    max-height: 240px !important;
    overflow: hidden !important;
  }
  .tp-banner-container.zk-best-offer img{ object-fit: cover; }

  .tp-banner-container.zk-best-offer .pi-slide{
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }
  .tp-banner-container.zk-best-offer .pi-slide h2{
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px 0 !important;
    max-width: 100% !important;
    word-break: break-word;
  }
}

/* Subscribe block: reduce bottom padding */
@media (max-width: 767px){
  .pi-section-w.zk-feedback-subscribe.zk-feedback-block .zk-text{
    padding: 18px 0 6px 0 !important;
  }
}

/* Footer text visibility */
@media (max-width: 1024px){
  .pi-section-w.footer, .pi-section-w.footer a, .pi-section-w.footer p, .pi-section-w.footer span{
    color: #fff !important;
  }
}
@media (max-width: 767px){

  /* блок целиком должен жить в нормальном потоке */
  .zk-feedback-question,
  .zk-feedback-question .pi-section{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* снимаем десктопные float-колонки */
  .zk-feedback-question .zk-text,
  .zk-feedback-question .zk-btn{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* на всякий: очищаем float'ы на уровне контейнера */
  .zk-feedback-question .pi-section::after{
    content: "" !important;
    display: block !important;
    clear: both !important;
  }

  /* форма и поля строго 100% */
  #zk-feedback-question{
    width: 100% !important;
    max-width: 100% !important;
  }

  #zk-feedback-question input{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 0 12px 0 !important;
  }

  /* "кнопка" span: делаем как кнопку и не даём вылезать */
  #zk-feedback-question > span{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 8px 0 0 0 !important;
  }

  /* вот ключевое: текст "согласие" после формы обязан идти ниже */
  .zk-feedback-question .zk-btn > p{
    clear: both !important;
    display: block !important;
    margin: 12px 0 0 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
@media (max-width: 767px){

  /* убираем десктопную фиксированную ширину */
  .zk-feedback-question .zk-btn{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* форма всегда строго по контейнеру */
  #zk-feedback-question{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* инпуты не могут быть шире родителя */
  #zk-feedback-question input{
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* текст после формы всегда ниже */
  .zk-feedback-question .zk-btn > p{
    clear: both !important;
    margin-top: 14px !important;
  }

}
@media (max-width: 767px){
  #zk-feedback-question.zk-form{
    max-width: 100% !important;  /* вместо 520px */
    margin: 0 !important;
  }
}
@media (max-width: 1024px) {

  /* 1) Убираем фиксированную высоту у секций обратной связи */
  .pi-section-w.zk-feedback-block,
  .pi-section-w.zk-feedback-question {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 2) Гарантируем, что контейнер “подхватит” float’ы */
  .pi-section-w.zk-feedback-question .pi-section::after {
    content: "";
    display: block;
    clear: both;
  }

  /* 3) На мобиле убираем float и делаем всё в колонку */
  .pi-section-w.zk-feedback-question .zk-text,
  .pi-section-w.zk-feedback-question .zk-btn {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4) Форма и контролы — строго 100% */
  #zk-feedback-question {
    width: 100% !important;
    max-width: 100% !important;
  }

  #zk-feedback-question input,
  #zk-feedback-question span {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5) Кнопка “Отправить заявку” (span) — как кнопка, без странных позиций */
  #zk-feedback-question > span {
    position: static !important;
    margin-top: 12px !important;
  }

  /* 6) Чтобы текст согласия не “прилипал” к форме */
  .pi-section-w.zk-feedback-question .zk-btn > p {
    margin-top: 12px !important;
  }
}
@media (max-width: 767px) {
  /* ВАЖНО: делаем контейнер нормальным потоком, чтобы он обнимал .zk-text и .zk-btn */
  .pi-section-w.zk-feedback-block.zk-feedback-question .pi-section{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* гарантированно убираем float, чтобы ничего не выпадало из потока */
  .pi-section-w.zk-feedback-block.zk-feedback-question .zk-text,
  .pi-section-w.zk-feedback-block.zk-feedback-question .zk-btn{
    float: none !important;
    width: 100% !important;
  }

  /* чтобы форма не “упиралась” в края */
  .pi-section-w.zk-feedback-block.zk-feedback-question .zk-btn{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}