/* ==========================================================================
   kb-mobile.css — мобільна версія kodeks-bezpeky.com
   Підключається mu-плагіном kodeks-mobile.php. Десктоп (≥768px) не змінюється,
   окрім блоків, позначених «усі пристрої».
   ========================================================================== */

/* ---------- усі пристрої ---------- */
.pointing-hand { display: none !important; }              /* анімована рука в меню */

/* Слоган під логотипом — текстом (раніше був вшитий у картинку логотипа) */
#logo { display: flex !important; flex-direction: column; align-items: center; width: 100%; text-decoration: none !important; }
#logo > img { order: 1; }
#logo::before { content: "№1"; order: 2; color: #f84038; font: 400 17px/1.1 "Exo", "Open Sans", Arial, sans-serif; margin-top: 6px; }
#logo::after  { content: "THE  MOST  SECURITY  COMPANY"; order: 3; white-space: pre; color: #000;
                font: 700 13px/1.25 "Exo", "Open Sans", Arial, sans-serif; letter-spacing: .4px;
                padding: 0 3px 1px; border-bottom: 2px solid #f84038; }

/* ---------- телефони ---------- */
@media (max-width: 767px) {

  /* 1. Компактна шапка ------------------------------------------------------ */
  header#this-is-top .container-fluid { padding-top: 0 !important; }
  header#this-is-top .topmenu { margin: 0 !important; min-height: 0 !important; }
  header#this-is-top .topmenu > nav { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; }
  header#this-is-top .topmenu > nav.text-right { display: none !important; }
  #top-menu { display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between;
              margin: 0 !important; padding: 0 6px !important; width: 100% !important; }
  #top-menu > li { float: none !important; margin: 0 !important; padding: 0 !important; }
  #top-menu > li.menu-item-home:not(.lang-item) { display: none !important; }   /* «Головна» — на головну веде логотип */
  #top-menu > li > a { display: flex !important; align-items: center; min-height: 44px; padding: 0 7px !important; margin: 0 !important;
                       font-size: 13px !important; line-height: 1.2 !important; white-space: nowrap; text-shadow: none !important; }
  #top-menu > li > a:before, #top-menu > li > a:after, #top-menu > li:before, #top-menu > li:after { display: none !important; }
  #top-menu > li.lang-item { margin-left: auto !important; }
  #top-menu > li.lang-item ~ li.lang-item { margin-left: 0 !important; }
  #top-menu > li.lang-item > a { min-width: 32px; justify-content: center; padding: 0 3px !important; }
  #top-menu > li.lang-item img { width: 20px !important; height: auto !important; }

  /* логотип ліворуч, email і телефони праворуч */
  header#this-is-top .row.header { margin: 0 !important; display: flex !important; flex-wrap: nowrap; align-items: center;
                                   justify-content: space-between; padding: 8px 12px 8px 8px !important; }
  header#this-is-top .row.header > div:first-child { width: auto !important; flex: 0 0 auto; padding: 0 !important; float: none !important; text-align: left; }
  #logo { display: inline-flex !important; width: auto; padding: 0 !important; }
  #logo > img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 60px !important; }
  #logo::before { font-size: 11px; margin-top: 2px; }
  #logo::after  { font-size: 8.5px; letter-spacing: .2px; border-bottom-width: 1.5px; padding: 0 2px 1px; }

  header#this-is-top .row.header > div.col-sm-9 { display: block !important; flex: 1 1 auto; min-width: 0; width: auto !important;
                                                  padding: 0 0 0 10px !important; float: none !important; }
  header#this-is-top .header-padding { padding: 0 !important; margin: 0 !important; text-align: right !important; }
  header#this-is-top .mob-grid-header { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
  header#this-is-top .mob-grid-header + .mob-grid-header { display: none !important; }         /* години роботи — у футері */
  header#this-is-top .h-block { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important;
                                border: 0 !important; text-align: right !important; }
  header#this-is-top .h-block > span { display: none !important; }                             /* підписи «Email:», «Телефони:» */
  header#this-is-top .h-block a { display: block !important; padding: 6px 0 !important; font-size: 14px !important; line-height: 1.2 !important;
                                  color: #c2410c !important; white-space: nowrap; }
  header#this-is-top .h-block a[href^="mailto:"] { font-size: 11.5px !important; }

  #menu-open { min-height: 0 !important; height: 48px !important; padding: 0 15px !important; display: flex !important; align-items: center; }
  #menu-open i.fa-bars { font-size: 24px !important; margin-left: 4px; }

  /* 2. Кнопка дзвінка: тільки зелений кружок, без підпису, що перекривав кнопки */
  #callnowbutton > span { display: none !important; }

  /* 3. Цілі під палець і шрифти ------------------------------------------- */
  .kb-footer .vc_icon_content p,
  .kb-footer .vc_icon_content a { font-size: 15px !important; line-height: 1.9 !important; }
  .kb-footer .vc_icon_content a { display: inline-block; padding: 4px 0; }
  .kb-footer .focontent li a { display: inline-block; padding: 8px 0; font-size: 15px !important; }
  .kb-footer p, .kb-footer .kb-footer-tm { font-size: 14px !important; }
  .btn, a.btn, .vc_btn3 { font-size: 13px !important; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; }

  /* 4. Форма: 16px, щоб iPhone не збільшував сторінку; однаковий вигляд полів */
  .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea {
      font-size: 16px !important; min-height: 48px; width: 100% !important; box-sizing: border-box; }
  .wpcf7-form input[type="tel"] { border: 1px solid #e8e8e8 !important; padding: 0 12px !important; background: #fff !important; }
  .wpcf7-form textarea { height: 120px !important; min-height: 120px; }
  .wpcf7-form input[type="submit"] { min-height: 52px; width: 100%; font-size: 16px !important; }
}

/* ==========================================================================
   Блоки kb: мобільний банер (головні), CTA і форма (сторінки послуг)
   ========================================================================== */
.kb-mhero { display: none; }
.kb-btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px;
          border-radius: 4px; font: 700 15px/1.2 "Exo", Arial, sans-serif !important; text-decoration: none !important;
          text-transform: uppercase; letter-spacing: .3px; text-align: center; box-sizing: border-box; }
.kb-btn-call { background: #1f9d3a; color: #fff !important; }
.kb-btn-call:hover { background: #17842f; }
.kb-btn-primary { background: #f26520; color: #fff !important; }
.kb-btn-primary:hover { background: #d9541a; }
.kb-btn-ghost { border: 2px solid #fff; color: #fff !important; background: transparent; }

.kb-cta { background: #f6f6f6; border-left: 4px solid #f26520; padding: 20px 22px; margin: 22px 0 28px; }
.kb-cta-title { font: 700 21px/1.3 "Exo", Arial, sans-serif !important; margin: 0 0 10px !important; color: #333; }
.kb-cta-list { list-style: none !important; margin: 0 0 16px !important; padding: 0 !important; }
.kb-cta-list li { position: relative; padding: 4px 0 4px 28px !important; margin: 0 !important; font-size: 16px; line-height: 1.45; color: #333; list-style: none !important; }
.kb-cta-list li::before { content: "✓"; position: absolute; left: 2px; top: 3px; color: #1f9d3a; font-weight: 700; font-size: 18px; }
.kb-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.kb-cta-btns .kb-btn { flex: 1 1 240px; }

.kb-form-box { background: #f6f6f6; border-top: 4px solid #f26520; padding: 24px 22px 10px; margin: 34px 0 20px; }
.kb-form-box h2 { font: 700 24px/1.3 "Exo", Arial, sans-serif !important; margin: 0 0 6px !important; text-align: left !important; text-transform: none !important; }
.kb-form-box > p { margin: 0 0 14px; }

.vc_toggle_title h4 { text-transform: none !important; }            /* довгі абзаци в «тоглах» — не КАПСОМ */
.kb-h1-look { font-size: 36px !important; line-height: 1.2 !important; font-weight: 700 !important; }

@media (max-width: 767px) {
  .kb-mhero { display: block; margin: 0 -15px 18px; padding: 24px 20px 22px; color: #fff;
              background: linear-gradient(160deg, #262626 0%, #363636 55%, #4a2617 100%); }
  .kb-mhero-kicker { color: #ff7a33; font: 700 12px/1.3 "Exo", Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 8px; }
  .kb-mhero-title { color: #fff !important; font: 700 25px/1.2 "Exo", Arial, sans-serif !important; margin: 0 0 10px !important;
                    text-transform: none !important; text-align: left !important; }
  .kb-mhero-text { color: #e2e2e2; font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
  .kb-mhero-btns { display: flex; flex-direction: column; gap: 10px; }
  .kb-hide-mobile { display: none !important; }                     /* слайдер home1, що ламається на телефоні */

  .kb-cta { padding: 18px 16px; margin: 18px -5px 24px; }
  .kb-cta-btns .kb-btn { flex: 1 1 100%; }
  .kb-form-box { padding: 20px 16px 6px; margin: 28px -5px 16px; }
  .kb-h1-look { font-size: 28px !important; }

  /* банер із назвою сторінки: нижчий */
  .page-title.paralax { min-height: 0 !important; height: auto !important; padding: 26px 0 !important; }
  .page-title.paralax h1, .page-title.paralax h2 { font-size: 24px !important; margin: 0 !important; }

  /* фото навчань: горизонтальна стрічка замість 6 фото одне під одним */
  .kb-mscroll { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 10px; padding: 0 15px 10px !important;
                scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .kb-mscroll > .wpb_column, .kb-mscroll > .wpb_column > .vc_column-inner,
  .kb-mscroll > .wpb_column > .vc_column-inner > .wpb_wrapper { display: contents !important; }
  .kb-mscroll .vc_empty_space { display: none !important; }
  .kb-mscroll .wpb_single_image { flex: 0 0 84%; margin: 0 !important; scroll-snap-align: center; }
  .kb-mscroll .wpb_single_image img { width: 100% !important; height: 230px !important; object-fit: cover; }
}

@media (max-width: 767px) {
  /* декоративний блок «Т М / логотип / EST. 2014»: менший логотип */
  .vc_row:has(.kb-h1-look) .wpb_single_image img { max-width: 170px !important; height: auto !important; }
  .vc_row:has(.kb-h1-look) .wpb_single_image { text-align: center; }
}

/* Стрічка фото замість мобільного слайдера «guard-car» (який чекає на скрипти) */
.kb-mgallery { display: none; }
@media (max-width: 767px) {
  #mobile-only { display: none !important; }
  .kb-mgallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
                 margin: 0 -15px 22px; padding: 0 15px 8px; }
  .kb-mgallery img { flex: 0 0 84%; width: 84%; height: 230px; object-fit: cover; scroll-snap-align: center; border-radius: 3px; }

  /* банер із назвою сторінки: без важкої фонової картинки */
  .page-title.paralax { background-image: none !important; background-color: #2b2b2b !important; }
}

/* вузькі телефони (iPhone SE та ін.) */
@media (max-width: 359px) {
  #logo > img { max-height: 50px !important; }
  #logo::after { font-size: 7.5px; }
  header#this-is-top .h-block a { font-size: 12.5px !important; }
  header#this-is-top .h-block a[href^="mailto:"] { font-size: 10px !important; }
}

/* Перемикач мов: замість російського прапора — текст «RU» (усі пристрої) */
#top-menu li.lang-item-ru > a img,
#top-menu li.lang-item-ru > a .pll-switcher-flag { display: none !important; }      /* обгортка прапора має фіксовану ширину */
#top-menu > li.lang-item-ru > a::after { content: "RU"; display: inline-block !important; color: #fff;
                                         font: 700 13px/1 "Exo", Arial, sans-serif; letter-spacing: .5px; }

/* Фон шапки на телефоні: світлий крапковий візерунок (як у футері) */
@media (max-width: 767px) {
  header#this-is-top .row.header {
    background-color: #f4f4f4 !important;
    background-image: radial-gradient(rgba(0, 0, 0, .10) 1px, transparent 1.3px), linear-gradient(180deg, #fafafa 0%, #ededed 100%) !important;
    background-size: 10px 10px, 100% 100% !important;
    border-bottom: 3px solid #f26520;
  }
}

/* ==========================================================================
   Бокове меню (kb-drawer.js) — лише телефони
   ========================================================================== */
#top-menu > li.kb-burger-li, .kb-drawer { display: none !important; }      /* на десктопі — меню теми */
@media (max-width: 767px) {
  html.kb-drawer-ready #menu-open, html.kb-drawer-ready #menu-close, html.kb-drawer-ready nav.main-menu { display: none !important; }
  html.kb-drawer-ready #top-menu > li:not(.lang-item):not(.kb-burger-li) { display: none !important; }   /* «Про компанію», «Контакти» — у меню */
  #top-menu > li.kb-burger-li { display: block !important; margin-right: auto !important; }
  .kb-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 44px; padding: 0 12px;
               background: none; border: 0; cursor: pointer; }
  .kb-burger span { display: block; height: 2px; width: 22px; background: #fff; border-radius: 2px; }

  .kb-drawer { display: block !important; position: fixed; inset: 0; z-index: 2147483647; visibility: hidden; pointer-events: none;
               transition: visibility 0s linear .22s; }
  .kb-drawer-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .22s; }
  .kb-drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 84%; max-width: 330px; background: #2b2b2b; color: #fff;
                     transform: translateX(-102%); transition: transform .22s ease-out; overflow-y: auto; display: flex; flex-direction: column;
                     box-shadow: 4px 0 24px rgba(0, 0, 0, .35); -webkit-overflow-scrolling: touch; }
  html.kb-drawer-open .kb-drawer { visibility: visible; pointer-events: auto; transition-delay: 0s; }
  html.kb-drawer-open .kb-drawer-overlay { opacity: 1; }
  html.kb-drawer-open .kb-drawer-panel { transform: none; }
  html.kb-drawer-open, html.kb-drawer-open body { overflow: hidden !important; }
  html.kb-drawer-open #callnowbutton { display: none !important; }

  .kb-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 6px 18px; border-bottom: 3px solid #f26520; }
  .kb-drawer-title { font: 700 14px/1 "Exo", Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #ff7a33; }
  .kb-drawer-close { width: 48px; height: 48px; font-size: 32px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }
  .kb-drawer-nav a { display: block; padding: 15px 18px; color: #fff !important; text-decoration: none !important;
                     font: 600 15px/1.3 "Exo", Arial, sans-serif; text-transform: uppercase; letter-spacing: .3px;
                     border-bottom: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid transparent; }
  .kb-drawer-nav a:active { background: rgba(255, 255, 255, .06); }
  .kb-drawer-nav a.active { color: #ff7a33 !important; border-left-color: #f26520; }
  .kb-drawer-nav .kb-sep { height: 10px; background: rgba(0, 0, 0, .25); }
  .kb-drawer-contacts { margin-top: auto; padding: 18px 18px 26px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .kb-drawer-contacts a { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: #fff !important; text-decoration: none !important; font-size: 16px; }
  .kb-drawer-contacts a::before { font-family: FontAwesome; font-size: 17px; color: #ff7a33; width: 20px; text-align: center; }
  .kb-drawer-contacts a.kb-dc-tel::before { content: "\f095"; }
  .kb-drawer-contacts a.kb-dc-mail { font-size: 14px; }
  .kb-drawer-contacts a.kb-dc-mail::before { content: "\f0e0"; }
}

/* «Контакти» (UA/RU/EN): у першого рядка (карта) в редакторі стоїть margin-top:-125px — на телефоні,
   після зменшення банера, карта наїжджала на заголовок */
@media (max-width: 767px) {
  .page-id-1712 #content .wpb-content-wrapper > .vc_row:first-child,
  .page-id-2868 #content .wpb-content-wrapper > .vc_row:first-child,
  .page-id-2870 #content .wpb-content-wrapper > .vc_row:first-child { margin-top: 0 !important; }
}