/* ============================================================
   shared.css — общие адаптивные правила include-блоков
   (banner.php, contact_form.php, footer.php) и холста .div

   Загружается на адаптивных страницах (сейчас index.html и
   about.html) ПОСЛЕ globals.css и собственного style.css
   страницы, но ДО адаптивного файла страницы
   (responsive.css / About/responsive.css).

   Все правила scoped на .screen — общую обёртку всех
   страниц сайта — поэтому файл влияет только на те
   страницы, где он подключён. Сами include-файлы не
   изменяются: их пиксельные стили (globals.css и
   style.css страницы) переопределяются здесь.
   ============================================================ */


/* ----------------------------------------------------------
   1. Общий холст: фиксированные 1600xH -> потоковый блок
   ---------------------------------------------------------- */
.screen .div {
  width: 100%;
  max-width: 1600px;
  height: auto;
  margin: 0 auto;
}


/* ----------------------------------------------------------
   2. БАННЕР (banner.php): логотип слева, пункты меню в одну
   линию справа от него. Активный пункт подчёркивается
   CSS-стилем (.active::after из <style> в самом banner.php),
   а не картинкой. Старая svg-линия (banner_line) скрыта
   тем же <style>: в оригинале она находилась за границей
   .banner_navbar (top:30px при высоте ~24px) и обрезалась
   overflow:hidden, т.е. не отображалась никогда.
   ---------------------------------------------------------- */
.screen .banner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* логотип и меню — одной группой по центру: на широких
     экранах справа от меню остаётся место, прижимать
     логотип к левому краю не нужно */
  justify-content: center;
  height: auto !important; /* у обёртки inline height: 137px */
  min-height: 137px;
  box-sizing: border-box;
  padding: 28px 40px 12px;
}

.screen .banner_logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.screen .banner_image {
  position: static;
  display: block;
  width: 149px;
  height: auto;
}

.screen .banner_navbar {
  position: static;
  display: flex !important; /* перекрывает inline-grid для мобильных UA из banner.php */
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 78px;
  margin-left: 110px;
  white-space: nowrap;
  overflow: visible;
}

.screen .banner_navbar > a {
  display: block;
}

.screen .banner_navbar > a > div,
.screen .banner_navbar > div {
  font-size: 20px !important; /* перекрывает и inline 30px для мобильных UA */
  white-space: nowrap;
}


/* --- баннер: ноутбуки 1024-1399 — пункты меню ближе --- */
@media (max-width: 1399px) {
  .screen .banner {
    padding: 24px 24px 10px;
  }

  .screen .banner_image {
    width: 120px;
  }

  .screen .banner_navbar {
    margin-left: 56px;
    gap: 44px;
  }

  .screen .banner_navbar > a > div,
  .screen .banner_navbar > div {
    font-size: 18px !important;
  }
}

/* --- баннер: узкие экраны — меню под логотипом, влево ---
   Порог 926px: однострочная вёрстка (18px/44px, логотип 120px)
   занимает 48(padding) + 120(лого) + 56(отступ) + 703(меню) =
   927px — измерено. Выше — меню в одну строку, ниже — перенос. */
@media (max-width: 926px) {
  .screen .banner {
    align-items: flex-start;
    /* меню перенеслось на вторую строку — логотип
       остаётся у левого края, без центрирования */
    justify-content: flex-start;
  }

  .screen .banner_logo {
    margin-top: 6px;
  }

  .screen .banner_navbar {
    flex-basis: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 12px 36px;
    padding-bottom: 8px;
  }
}

/* --- баннер: телефоны --- */
@media (max-width: 767px) {
  .screen .banner {
    padding: 16px 16px 10px;
    min-height: 0;
  }

  .screen .banner_image {
    width: 104px;
  }

  .screen .banner_navbar {
    gap: 10px 24px;
  }

  .screen .banner_navbar > a > div,
  .screen .banner_navbar > div {
    font-size: 16px !important;
  }
}


/* ----------------------------------------------------------
   3. БЛОК КОНТАКТОВ (contact_form.php)
      Десктоп: исходная двухколоночная композиция, пересчитанная
      в проценты (левая бирюзовая панель 39% + форма 61%).
      Мобайл: одна колонка, поля по очереди.
   ---------------------------------------------------------- */

/* --- десктоп (база) --- */
.screen .overlap-contact {
  position: relative !important;
  top: 0 !important;
  width: 100% !important;
  height: 944px !important;
  overflow: hidden;
  background-color: #4d455d;
}

/* фото и тёмный оверлей — правые 61% */
.screen .overlap-contact > .IMG-contact {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 39.06%;
  right: 0;
  width: auto;
  height: auto;
  object-fit: cover;
}

.screen .overlap-contact > .frame-6-contact {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 39.06%;
  right: 0;
  width: auto;
  height: auto;
}

.screen .text-wrapper-21-contact {
  position: absolute;
  top: 13.4%;
  left: 19.8%;
}

.screen .text-wrapper-20-contact {
  position: absolute;
  top: 69.9%;
  left: 26.2%;
}

/* сообщения об ошибке/успехе (inline-стили внутри contact_form.php) */
.screen .frame-6-contact > div[style*="ff2222"] {
  position: absolute !important;
  top: 17.5% !important;
  left: 19.5% !important;
}

/* сообщение об успехе — там же, где и об ошибке (одновременно
   они не показываются); прежнее место у кнопки наезжало на капчу */
.screen .frame-6-contact > div[style*="22ff22"] {
  position: absolute !important;
  top: 17.5% !important;
  left: 19.5% !important;
  font-size: 14px !important;
  max-width: 46% !important;
}

/* поля формы: 2 колонки x815 и x1101 исходной сетки 1600 */
.screen .frame-7-contact {
  position: absolute;
  top: 21.08%;
  left: 50.94%;
  width: 15.94%;
  height: 76px;
}

.screen .frame-12-contact {
  position: absolute;
  top: 21.08%;
  left: 68.81%;
  width: 15.94%;
  height: 76px;
}

.screen .frame-8-contact {
  position: absolute;
  top: 31.67%;
  left: 50.94%;
  width: 15.94%;
  height: 76px;
}

.screen .frame-11-contact {
  position: absolute;
  top: 31.67%;
  left: 68.81%;
  width: 15.94%;
  height: 76px;
}

.screen .frame-10-contact {
  position: absolute;
  top: 42.16%;
  left: 50.94%;
  width: 33.81%;
  height: 249px;
}

/* внутренние обёртки полей тянутся на всю ширину рамки */
.screen .frame-7-contact .text-wrapper-23-contact,
.screen .frame-8-contact .text-wrapper-24-contact,
.screen .frame-11-contact .text-wrapper-25-contact,
.screen .frame-12-contact .text-wrapper-26-contact {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 38px;
  width: auto;
}

.screen .frame-7-contact .input-contact,
.screen .frame-8-contact .input-contact,
.screen .frame-11-contact .input-contact,
.screen .frame-12-contact .input-contact {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 2px;
}

.screen .frame-10-contact .text-wrapper-24-contact {
  position: absolute;
  top: 26px;
  left: 30px;
  right: 30px;
  bottom: 26px;
  width: auto;
  height: auto;
}

.screen .frame-10-contact .input-contact {
  display: block;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
  resize: none;
}

/* чекбокс согласия */
.screen .frame-9-contact {
  position: absolute;
  top: 72.25%;
  left: 50.94%;
  width: 32px;
  height: 32px;
}

/* капча (у блока inline position:absolute left:1100px top:750px) */
.screen .overlap-contact > .text-wrapper-24-contact {
  position: absolute !important;
  top: 79.45% !important;
  left: 68.81% !important;
  width: 15.94%;
  min-width: 190px;
}

.screen .overlap-contact > .text-wrapper-24-contact img {
  display: block;
  margin-bottom: 6px;
}

.screen .overlap-contact input[name="moy_kott"] {
  display: block;
  width: 140px;
  margin: 6px 0;
}

/* кнопка "Отправить" */
.screen .button-contact {
  position: absolute;
  top: 80.5%;
  left: 51%;
}

/* левая бирюзовая панель и информационная плашка */
.screen .frame-14-contact {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 39.06%;
  height: auto;
}

.screen .frame-15-contact {
  position: absolute;
  top: 18.01%;
  left: 12.75%;
  width: 30.25%;
  min-width: 300px;
  max-width: 484px;
  height: 382px;
}

.screen .text-wrapper-29-contact {
  position: absolute;
  top: 45.03%;
  left: 10.12%;
  width: 79.55%;
}

.screen .text-wrapper-30-contact {
  position: absolute;
  top: 25.74%;
  left: 6.94%;
  font-size: clamp(28px, 2.9vw, 45px);
}

/* --- мобильные: одна колонка --- */
@media (max-width: 1023px) {
  .screen .overlap-contact {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px 10px;
    padding: 48px 16px 56px;
    width: 100% !important;
    height: auto !important;
    background:
      linear-gradient(rgba(77, 69, 93, 0.85), rgba(77, 69, 93, 0.85)),
      url("img/img-7079-1.png") center / cover no-repeat;
  }

  .screen .overlap-contact > .IMG-contact,
  .screen .overlap-contact > .frame-14-contact {
    display: none;
  }

  /* "Введите данные:" и ссылка на политику живут внутри
     frame-6-contact — отдаём их прямо в сетку формы */
  .screen .overlap-contact > .frame-6-contact {
    display: contents;
  }

  .screen .text-wrapper-30-contact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1 / -1;
    order: -4;
    font-size: 32px;
    text-align: center;
    line-height: 1.25;
  }

  .screen .text-wrapper-21-contact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1 / -1;
    order: -3;
    font-size: 22px;
    text-align: center;
  }

  .screen .frame-6-contact > div[style*="ff2222"],
  .screen .frame-6-contact > div[style*="22ff22"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1 / -1;
    order: -2;
    text-align: center;
  }

  .screen .frame-7-contact,
  .screen .frame-8-contact,
  .screen .frame-10-contact,
  .screen .frame-11-contact,
  .screen .frame-12-contact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    max-width: 480px;
    margin: 0 auto;
    padding: 8px 16px 12px;
    background-color: #4d455dcc;
    border: 1.5px solid #aef8f6;
    border-radius: 15px;
    overflow: visible;
  }

  .screen .frame-7-contact { order: -1; }
  .screen .frame-8-contact { order: 0; }
  .screen .frame-12-contact { order: 1; }
  .screen .frame-11-contact { order: 2; }
  .screen .frame-10-contact { order: 3; }

  .screen .frame-7-contact .text-wrapper-22-contact,
  .screen .frame-8-contact .text-wrapper-24-contact,
  .screen .frame-11-contact .text-wrapper-25-contact,
  .screen .frame-12-contact .text-wrapper-26-contact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block;
    margin-bottom: 2px;
  }

  .screen .frame-10-contact .text-wrapper-24-contact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    display: block;
  }

  .screen .input-contact {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 8px 2px;
  }

  .screen .frame-10-contact .input-contact {
    height: 130px !important;
  }

  /* чекбокс + текст согласия — одна строка */
  .screen .frame-9-contact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1;
    order: 4;
    width: 32px;
    height: 32px;
    margin-top: 4px;
  }

  .screen .text-wrapper-20-contact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-column: 2;
    order: 4;
    font-size: 14px;
    line-height: 1.4;
    align-self: center;
  }

  .screen .overlap-contact > .text-wrapper-24-contact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1 / -1;
    order: 5;
    width: 100%;
    max-width: 480px;
    margin: 6px auto 0;
    text-align: center;
  }

  .screen .overlap-contact > .text-wrapper-24-contact img {
    display: inline-block;
  }

  .screen .button-contact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1 / -1;
    order: 6;
    width: 100%;
    max-width: 480px;
    height: 57px;
    margin: 10px auto 0;
    display: block;
  }
}


/* ----------------------------------------------------------
   4. ФУТЕР (footer.php)
      Десктоп: верхняя строка из трёх зон (телефон слева,
      столбик "Главная/Контакты/О нас" с пилюлями по центру,
      e-mail и ИП справа); ниже столбика — черта, ссылки,
      логотип и кнопка "Скачать". Всё в потоке, без
      абсолютных координат.
      Мобайл: одна колонка по центру.
   ---------------------------------------------------------- */
.screen .view-5-foot {
  position: relative;
  top: 0 !important;
  width: 100%;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  padding: 64px 40px 72px;
}

/* верхняя строка: три зоны */
.screen .view-5-foot .foot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.screen .view-5-foot .foot-col-left {
  flex: 0 0 auto;
}

.screen .view-5-foot .foot-col-center {
  flex: 0 1 auto;
}

.screen .view-5-foot .foot-col-right {
  flex: 0 0 auto;
  text-align: right;
}

/* телефон + мессенджеры (слева) */
.screen .view-5-foot .text-wrapper-32-foot {
  position: static;
  top: auto;
  left: auto;
  display: block;
}

.screen .view-5-foot .foot-messengers {
  margin-top: 16px;
}

.screen .view-5-foot .foot-messengers a {
  display: inline-block;
  line-height: 0;
}

.screen .view-5-foot .foot-messengers img {
  margin-right: 10px;
}

/* центр: пилюли + столбик навигации */
.screen .view-5-foot .foot-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.screen .view-5-foot .drugs-foot,
.screen .view-5-foot .drugs-2-foot {
  position: static;
  top: auto;
  left: auto;
  display: block;
}

.screen .view-5-foot .flexcontainer-foot {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
}

.screen .view-5-foot .text-foot a {
  text-decoration: none;
}

/* черта — после конца центрального столбика */
.screen .view-5-foot .element-4-foot {
  position: static;
  top: auto;
  left: auto;
  display: block;
  width: 100%;
  height: 1px;
  margin: 48px 0 0;
}

/* ссылки под чертой */
.screen .view-5-foot .foot-links {
  margin-top: 30px;
  text-align: center;
}

.screen .view-5-foot .frame-16-foot {
  position: static;
  top: auto;
  left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 61px;
}

.screen .view-5-foot .text-wrapper-34-foot {
  position: static;
  top: auto;
  left: auto;
  display: block;
  margin-top: 22px;
}

/* логотип */
.screen .view-5-foot .foot-logo {
  display: block;
  margin: 44px auto 0;
  line-height: 0;
}

.screen .view-5-foot .element-3-foot {
  position: static;
  top: auto;
  left: auto;
  display: block;
  width: 335px;
  max-width: 100%;
  height: auto;
  /* якорь .foot-logo — блок на всю ширину колонки,
     поэтому центрируем саму картинку — как кнопку
     "Скачать" ниже */
  margin: 0 auto;
}

/* кнопка "Скачать" */
.screen .view-5-foot .foot-download {
  display: block;
  width: 179px;
  margin: 48px auto 0;
  line-height: 0;
}

.screen .view-5-foot .view-6-foot {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
}

/* e-mail и ИП/ОГРН (справа) */
.screen .view-5-foot .foot-mail {
  display: block;
  line-height: 1.4;
}

.screen .view-5-foot .text-wrapper-36-foot {
  position: static;
  top: auto;
  left: auto;
  display: block;
}

.screen .view-5-foot .flexcontainer-2-foot {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  margin-top: 28px;
}

/* --- мобильные: одна колонка по центру --- */
@media (max-width: 767px) {
  .screen .view-5-foot {
    padding: 48px 20px 56px;
  }

  .screen .view-5-foot .foot-top {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .screen .view-5-foot .foot-col-right {
    text-align: center;
  }

  .screen .view-5-foot .foot-messengers {
    margin-top: 12px;
    text-align: center;
  }

  .screen .view-5-foot .foot-nav-row {
    gap: 24px;
  }

  .screen .view-5-foot .drugs-foot,
  .screen .view-5-foot .drugs-2-foot {
    display: none;
  }

  .screen .view-5-foot .flexcontainer-foot {
    align-items: center;
    gap: 14px;
  }

  .screen .view-5-foot .element-4-foot {
    max-width: 520px;
    margin: 40px auto 0;
  }

  .screen .view-5-foot .foot-links {
    margin-top: 26px;
  }

  .screen .view-5-foot .frame-16-foot {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .screen .view-5-foot .text-wrapper-34-foot {
    margin-top: 14px;
  }

  .screen .view-5-foot .foot-logo {
    margin-top: 36px;
  }

  .screen .view-5-foot .foot-download {
    margin-top: 36px;
  }

  .screen .view-5-foot .flexcontainer-2-foot {
    align-items: center;
    margin-top: 24px;
  }

  .screen .view-5-foot .span-wrapper-foot {
    text-align: center;
  }
}