/* =====================================================================
   mobile.css — быстрые исправления мобильной версии rrs.by
   Подключается ПОСЛЕДНИМ в base.html, после style.css и stylecatalog.css.
   Все правила внутри медиазапросов: на компьютере ничего не меняется.
   Чтобы откатить — удалить строку подключения этого файла.
   ===================================================================== */


/* ---------- 1. Планшеты и телефоны: до 991px ---------- */
@media (max-width: 991.98px) {

  /* Страховка от горизонтальной прокрутки всей страницы */
  .main-body { overflow-x: hidden; overflow-x: clip; }
  img, iframe, video, table { max-width: 100%; }

  /* .row, стоящий не внутри .container или колонки, вылезает на 12px
     за экран (отрицательные поля Bootstrap) — обнуляем поля */
  :not(.container):not([class*="col"]) > .row {
    margin-left: 0;
    margin-right: 0;
  }

  /* Хлебные крошки не прилипают к краю экрана */
  .page-title-right { padding: 0 12px; }

  /* Мобильная строка поиска: убрать сдвиг вправо */
  .search-phone { padding: 8px 12px; }
  .search-element input { margin-left: 0; }

  /* Сервис: круглые карточки категорий не шире колонки */
  .card-category-service {
    width: 220px;
    height: 220px;
    margin: 12px auto;
    padding: 20px 10px;
  }
  .card-category-service img { height: 60px; }
  .name-category-service { font-size: 16px; }

  /* Верхняя полоса с телефонами: компактно, в 2 строки
     1-я строка — запчасти (2 номера), 2-я — сервис.
     Факс и email на телефоне скрыты: они есть в подвале и на «Контактах». */
  .header-top { max-height: none; min-height: 0; }
  .header-top .fixed-top {
    position: static;
    margin: 0;
    padding: 4px 0;
    background: #fff;
  }
  .header-top .fixed-top > .col-auto { width: 100%; padding: 0 8px; }
  ul.cont {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
  }
  ul.cont li {
    font-size: 0;            /* прячет пробелы   между ссылками */
    line-height: 1.35;
    white-space: nowrap;
  }
  ul.cont br, ul.cont .vr { display: none; }
  ul.cont a, ul.cont a.zp-tel2 {
    display: inline;
    padding: 0;
    font-size: 12px;
  }
  ul.cont a.zp-tel2::before { content: " · "; color: #4ac8ed; }
  ul.cont li:nth-child(3),
  ul.cont li:last-child { display: none; }

  /* ---- Шапка с логотипом и кнопкой меню ---- */
  .navbar { height: auto; min-height: 64px; padding: 8px 0; }
  .navbar > .container { flex-wrap: wrap; padding: 0 12px; }

  /* Логотип крупнее */
  .navbar-brand { max-width: calc(100% - 136px); padding: 0; margin: 0; }
  .navbar-brand .log1 { width: 210px; max-width: 100%; height: auto; display: block; }
  .my-footer .log1 { width: 200px; max-width: 70%; height: auto; }

  /* Кнопка меню: иконка «три полоски» + подпись, контрастная и крупная */
  .navbar-toggler {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 124px;
    height: 44px;
    justify-content: center;
    padding: 0 10px;
    border: 2px solid #4ac8ed !important;
    border-radius: 10px;
    background: #4ac8ed !important;
    color: #0a233b !important;
    box-shadow: none !important;
  }
  .navbar-toggler-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    padding-left: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a233b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") left center / 22px 22px no-repeat !important;
    color: #0a233b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
  }
  /* Меню открыто: крестик и «Закрыть» */
  .navbar-toggler[aria-expanded="true"] { background: transparent !important; color: #ffffff !important; }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") !important;
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    content: "Закрыть";
    font-size: 15px;
    color: #ffffff;
  }

  /* ---- Открытое меню целиком помещается на экране ----
     Пункты компактнее; если экран совсем низкий — меню прокручивается
     внутри себя, а не уезжает за край */
  .navbar-collapse {
    flex-basis: 100%;
    background: #0a233b;
    margin-top: 8px;
    border-top: 1px solid #1d3d5c;
    max-height: calc(100vh - 116px);
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navbar-nav { padding: 4px 0 8px; }
  .menu.nav-item { border-bottom: 1px solid #16334f; }
  .menu.nav-item:last-child { border-bottom: none; }
  .menu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 4px;
    font-size: 14px;
  }
  .menu a.nav-active { padding: 0 10px; }

  /* «Техническая документация»: на телефоне наведения нет,
     поэтому список категорий показываем сразу внутри меню, компактно */
  .navbar-collapse .dropdown-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
    position: static;
    width: 100%;
    border: none;
    padding: 0 0 6px 12px;
    margin: 0;
    background: transparent;
    box-shadow: none;
  }
  .navbar-collapse .dropdown-menu li { padding: 0; }
  .navbar-collapse .dropdown-menu li:empty { display: none; }
  .navbar-collapse .dropdown-menu a {
    min-height: 32px;
    padding: 2px 4px;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 500;
    text-transform: none;
    color: #c9d6e2;
    white-space: normal;
  }
  .navbar-collapse .dropdown-toggle::after { display: none; }

  /* Пока меню открыто, плавающие кнопки звонка/Viber и «наверх» не мешают */
  body:has(.navbar-collapse.show) .pulsee,
  body:has(.navbar-collapse.show) .pulsee2,
  body:has(.navbar-collapse.show) .scrollup,
  body:has(.navbar-collapse.collapsing) .pulsee,
  body:has(.navbar-collapse.collapsing) .pulsee2 { display: none !important; }

  /* Каталог: огромные боковые отступы 100px убираем */
  .catalog-catalogs { margin: 20px 12px; }

  /* Сервис / Новости: заголовок не шире экрана */
  .catalog-service h1 {
    min-width: 0;
    max-width: 100%;
    padding: 24px 12px;
    font-size: 24px !important;
  }
  .catalog-service2 { padding: 16px 12px; }
  .my-quality { margin: 0; }

  /* Видео YouTube: резиновые 16:9 */
  .video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* Поле сообщения в формах */
  .msg-input { width: 100%; min-width: 0; }

  /* Фон формы: background-attachment: fixed не работает в iOS */
  .my-form { background-attachment: scroll; }

  /* ---- Главная: блок «Доставка по РБ / Формы оплаты / Документация» ----
     Было: отступы по 70px, текст в узкий столбик, блок ~1000px высотой.
     Стало: компактные карточки — иконка слева, заголовок и список справа. */
  .home-feature { padding: 24px 0 12px; }
  .home-feature > .container { padding: 0 12px; }
  .home-feature .row { row-gap: 12px; }
  .home-feature .col-lg-4 { padding: 0; }
  .home-feature .bg-gradient { background-image: none !important; }
  .home-feature .card-2 {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    margin: 0;
    padding: 16px;
    border-radius: 12px;
    background: #12324f;
  }
  .home-feature .icon {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
    background: rgba(74, 200, 237, 0.15);
    font-size: 24px;
    line-height: 1;
  }
  .home-feature h4 {
    grid-column: 2;
    margin: 0 0 6px;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
  }
  .home-feature .my-li {
    grid-column: 2;
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 14px;
    line-height: 1.45;
    opacity: 0.9;
  }
  .home-feature p.my-li { padding-left: 0; }
  .home-feature .my-li li { margin-bottom: 4px; }
  .home-feature .my-li li:last-child { margin-bottom: 0; }
  .home-feature .my-li li::marker { color: #4ac8ed; }
}


/* ---------- 2. Телефоны и маленькие планшеты: до 767px ---------- */
@media (max-width: 767.98px) {

  /* Блок «Не получается найти запчасть?» — показываем и на телефонах */
  .my-form.d-none { display: block !important; }
  .zapros-form { margin: 30px 0; padding: 20px 15px; }
  .title-underblock { font-size: 20px; }
  .help-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 10px;
  }
  .help-buttons .btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    color: #0a233b;
  }

  /* Главная: баннеры */
  .banner { padding: 25px 10px; }
  .banner-1 h1, .banner-2 h2 { font-size: 20px; }

  /* Каталог: логотипы брендов 4 в ряд, заголовок над ними */
  .catalog-catalogs > .row.text-center > .col-md-2 {
    flex: 0 0 25%;
    max-width: 25%;
    width: 25%;
  }
  .catalog-catalogs > .row.text-center img { height: 40px; max-width: 100%; object-fit: contain; }
  .catalog-catalogs > .row.text-center > .col-md-4 { order: -1; margin-bottom: 10px; }
  .title_catalog { font-size: 24px !important; }

  /* Каталог: категории — горизонтальной лентой над товарами */
  .card-category-catalogs1 {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .card-category-catalogs1 > a { flex: 0 0 auto; }
  .card-category-catalogs { margin: 0; padding: 6px 12px; white-space: nowrap; }
  .card-category-catalogs .name-category { margin: 0; font-size: 14px; }
  .card-category-catalogs .name-category img { display: none; }

  /* Карточка товара */
  .text-detail { margin: 20px 0; }
  .text-detail h1 { font-size: 22px; }
  .img-detail img { max-width: 100%; height: auto; }
  .catalog-detail { padding: 30px 10px 10px; }
  .more { display: inline-block; margin: 0 0 10px; font-size: 17px; }

  /* Блок «Доставка и оплата» в карточке товара и двигателя */
  .delivery-info-section { padding: 20px 12px; }
  .info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .info-card { min-width: 0; }

  /* Контакты: колонки с телефонами и адресами — друг под другом */
  .box { padding: 15px; }
  .box-text .row > .col-4,
  .box-text .row > .col-6 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .box-text > div[style] { padding-left: 35px !important; font-size: 1.25rem !important; }
  .form-about { padding: 15px; }
  .form-about label { display: block; min-width: 0; }
  .form-about .form-input,
  .form-about input[type="text"],
  .form-about input[type="email"],
  .form-about textarea { width: 100%; }

  /* Техническая документация */
  .docs { background-image: none; padding: 20px 0; }
  .docs h1 { font-size: 24px !important; }
  .card-category-doc, .card-category-doc-active-doc { width: 100%; margin: 8px 0; }

  /* Сервис */
  .brigade img { height: 140px; width: auto; }
  .stages table { width: 100%; }
  .stages td { font-size: 15px; }
  .stages i { font-size: 26px; }
  .my-card-service-tnvd img { width: 100%; float: none !important; }

  /* Двигатели и КПП */
  .kpp { text-align: center; font-size: 26px; }
  .kpp-index img { height: 100px; }
  .kpp-title { padding: 15px; margin: 15px 0; }

  /* Галерея «Наши работы»: по 2 фото в ряд, без сильного увеличения */
  .carousel-item .col-auto { flex: 0 0 50%; max-width: 50%; width: 50%; }
  .photo-image { width: 100%; height: auto; margin: 8px 0; }
  .photo-image:focus { transform: none; }

  /* Сертификаты: меньше и без огромных отступов (открываются в окне — certificates.html) */
  .cert-img { height: auto; width: 140px; margin: 10px 5px 20px; }

  /* Плавающие кнопки звонка и Viber: меньше, не перекрывают контент */
  .pulsee, .pulsee2 {
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 26px;
    z-index: 1000;
  }
  .pulsee { bottom: 72px; }
  .pulsee2 { bottom: 10px; }
  .pulsee, .pulsee2 { transform: translateX(-30%); }
  .scrollup { bottom: 10px; left: 10px; font-size: 22px; }
  footer { padding-bottom: 70px; }

  /* Подвал */
  .my-footer2 .table td { font-size: 14px; padding: 6px 4px; }
}


/* ---------- 3. Узкие телефоны: до 575px ---------- */
@media (max-width: 575.98px) {
  ul.cont a { font-size: 12px; }
  .info-cards { grid-template-columns: 1fr; }
  .list-pages ul li { margin: 0 6px 0 0; }
  .list-pages .page-num, .page-num-selected { width: 38px; }
  .card-category-service { width: 200px; height: 200px; }
}