/* ==========================================================================
   Progress Flow — адаптивные правки вёрстки (ПК / планшет / мобилка)
   Отдельный файл: вендорные стили не изменяются, только переопределяются.
   ========================================================================== */

/* 1) Убираем любую горизонтальную прокрутку на всех экранах */
html, body { overflow-x: hidden !important; max-width: 100%; }
img { max-width: 100%; height: auto; }
.rev_slider_wrapper, .rev_slider, .tp-simpleresponsive,
.forcefullwidth_wrapper_tp_banner, .tp-fullwidth-forcer { overflow: hidden !important; }

/* ============================ ПЛАНШЕТ (<= 1024px) ======================== */
@media (max-width: 1024px){
  /* Подписи слайдера: переносятся по словам, шрифт и ширина ужаты, чтобы
     ничего не вылезало (родное позиционирование движка сохраняем). */
  .rev_slider_wrapper .slide-content-box h1,
  .rev_slider_wrapper .slide-content-box p  { white-space: normal !important; word-wrap: break-word; }
  .rev_slider_wrapper .slide-content-box h1 { font-size: 28px !important; line-height: 34px !important; }
  .rev_slider_wrapper .slide-content-box p  { font-size: 14px !important; line-height: 21px !important; }
  .rev_slider_wrapper .tp-caption,
  .rev_slider_wrapper .slide-content-box    { width: 74vw !important; max-width: 74vw !important; }

  /* Шапка с контактами — центрируем и даём воздух */
  .header-area .header-contact-info ul { text-align: center; }
}

/* ======================= ПЛАНШЕТ-ПОРТРЕТ (<= 991px) ====================== */
@media (max-width: 991px){
  /* Меню, «Поддержка» и поиск в одну строку не помещаются — выстраиваем в столбик */
  .mainmenu-area .customer-care { float: none !important; display: inline-block; vertical-align: middle; }
  .mainmenu-area .top-search-box { float: none !important; display: inline-block; vertical-align: middle; }
  .header-area .header-contact-info ul li { display: inline-block; float: none; }
}

/* ============================ МОБИЛКИ (<= 767px) ======================== */
@media (max-width: 767px){
  /* на телефоне прячем длинный подзаголовок слайдера — остаётся заголовок + кнопка, без наложений */
  .rev_slider_wrapper .slide-content-box p { display: none !important; }
  .rev_slider_wrapper .slide-content-box h1 { font-size: 20px !important; line-height: 25px !important; margin-bottom: 6px !important; }
  .rev_slider_wrapper .slide-content-box p  { font-size: 12px !important; line-height: 17px !important; margin-bottom: 12px !important; }
  .rev_slider_wrapper .tp-caption,
  .rev_slider_wrapper .slide-content-box    { width: 72vw !important; max-width: 72vw !important; }
  .rev_slider_wrapper .slide-content-box .button a.thm-btn {
      padding: 8px 16px !important; font-size: 12px !important; margin-right: 8px !important;
  }

  /* Верхняя строка (welcome + селекты + соцсети) — по центру, без сжатия */
  .top-bar-area .welcome p { text-align: center; }
  .top-bar-area .topinfo, .top-bar-area .top-social-links ul { text-align: center; }
  .top-bar-area .top-social-links ul li { float: none; display: inline-block; }

  /* Контакты в шапке — по центру */
  .header-area .header-contact-info ul li { display: block; float: none; text-align: center; margin: 8px 0; }
  .header-area .logo { text-align: center; margin-bottom: 12px; }
  .header-area .logo img { display: inline-block; }

  /* Заголовки секций поменьше, чтобы не переносились некрасиво */
  .sec-title h1, .sec-title-two h1 { font-size: 26px !important; line-height: 1.25 !important; }

  /* Формы: поля на всю ширину, кнопки не прижаты */
  .appoinment-form .thm-btn, .contact-form .thm-btn,
  .login-register-area .thm-btn { width: 100%; text-align: center; }
  .login-register-area .social-icon { margin-top: 14px; }
  .login-register-area .forgot-password { display: inline-block; margin-top: 8px; }

  /* Хлебные крошки — перенос без вылезания */
  .breadcrumb-botton-area .breadcrumb-menu ul li { display: inline-block; float: none; }
  .breadcrumb-area h1 { font-size: 30px !important; }

  /* Футер — центрируем блоки на узком экране */
  .footer-area .single-footer-widget { margin-bottom: 26px; }
  .footer-bottom .copyright-text, .footer-bottom .payment-method { float: none !important; text-align: center; }
  .footer-bottom .payment-method ul { display: inline-block; margin-top: 8px; }
}

/* ======================= МЕЛКИЕ МОБИЛКИ (<= 480px) ====================== */
@media (max-width: 480px){
  .rev_slider_wrapper .slide-content-box h1 { font-size: 20px !important; line-height: 26px !important; }
  .rev_slider_wrapper .slide-content-box .button a.thm-btn { padding: 7px 14px !important; }
  .mainmenu-area .customer-care .title-holder h4 { font-size: 16px; }
}

/* ==========================================================================
   Блок «Your Recovery Journey» (categories-area, #how)
   Фикс float-сетки: 5 плиток разной высоты цеплялись друг за друга при
   переносе. Переводим ряд на flex — ровные ряды и чистый перенос.
   ========================================================================== */
#how .row{ display:flex; flex-wrap:wrap; }
#how .row > [class*="col-"]{ display:flex; margin-bottom:30px; }
#how .single-item{ width:100%; }               /* карточка тянется на всю высоту ряда */
#how .single-item .text-holder{ align-self:center; }  /* текст по центру по вертикали */

/* ==========================================================================
   Валидация форм — подсветка ошибок и сообщение об успехе
   ========================================================================== */
.rp-invalid{ border-color:#e05656 !important; box-shadow:0 0 0 2px rgba(224,86,86,.12) !important; }
.rp-err{ display:none; color:#e05656; font-size:12.5px; margin-top:5px; line-height:1.35; }
.rp-success{
  display:none; background:#e7f6ec; border:1px solid #a9dcbb; color:#1e7a44;
  border-radius:6px; padding:12px 15px; margin-bottom:18px; font-size:14px;
}

/* Ошибка уровня формы (вход/регистрация) */
.rp-formerr{ display:none; background:#fbe9e9; border:1px solid #f0b4b4; color:#c0392b; border-radius:6px; padding:11px 14px; margin-bottom:16px; font-size:13.5px; }