/**
 * mobile-fos-layout.css — ТОЛЬКО ≤767px
 * Простая схема: flex-row + gap 10px
 * Иконка static слева, текст static справа — без absolute.
 * Подключать ПОСЛЕ fos-btn-unify.css
 */

@media (max-width: 767px) {
  /*
   * Якоря (бургер / меню): точка привязки — ЗАГОЛОВОК секции.
   * JS скроллит мгновенно + доводка; scroll-margin — fallback для native #hash.
   */
  #prices,
  #how-to-get,
  #b2b,
  #fleet,
  #about,
  #eco,
  #info,
  #waste-types,
  #waste-types-desktop {
    scroll-margin-top: calc(var(--header-height, 56px) + 12px + env(safe-area-inset-top, 0px)) !important;
  }

  #prices .price-list__title,
  #prices .section-main-title,
  #prices .price-list__head,
  #how-to-get .address-stage__title,
  #how-to-get .section-main-title,
  #how-to-get .address-stage__head,
  #b2b .b2b-stage__title,
  #b2b .section-title,
  #b2b .b2b-stage__head,
  #fleet .fleet-stage__title,
  #fleet .section-main-title,
  #fleet .fleet-stage__titles,
  #about .section-main-title,
  #about .section-title,
  #about .about-stage__titles,
  #info .section-main-title,
  #info .section-title,
  #info .info-stage__head,
  #waste-types .section-main-title,
  #waste-types h2,
  #waste-types .section-head,
  #eco .section-main-title,
  .mobile-section h2.section-main-title,
  .mobile-section h2.section-title,
  .mobile-section .section-main-title,
  .mobile-section .section-head {
    scroll-margin-top: calc(var(--header-height, 56px) + 12px + env(safe-area-inset-top, 0px)) !important;
  }

  /* ========== КНОПКА ========== */
  .fos-btn,
  a.fos-btn,
  button.fos-btn,
  .desktop-waste-cta,
  .hero-cta__btn,
  .hero-cta__btn.fos-btn,
  .mobile-bottom-bar .fos-btn,
  .mobile-bottom-bar button.fos-btn,
  .mobile-bottom-bar .fos-btn.fos-btn--typed,
  .mobile-bottom-bar .fos-btn.fos-is-drive,
  .mobile-bottom-bar .fos-btn--sm,
  .site-leadgen__cta .fos-btn,
  .site-leadgen__cta .desktop-waste-cta,
  .site-leadgen__cta .fos-btn.fos-btn--typed,
  .site-leadgen__cta .fos-btn.fos-is-drive,
  .site-leadgen__cta .desktop-waste-cta.fos-btn--typed,
  .site-leadgen__cta .desktop-waste-cta.fos-is-drive,
  .site-leadgen-card .fos-btn,
  .site-leadgen-card .desktop-waste-cta,
  .waste-stage-multi__cta .fos-btn,
  .waste-stage-multi__cta .desktop-waste-cta,
  .eco-stage__cta .fos-btn,
  .about-stage__cta .fos-btn,
  .info-stage__cta .fos-btn,
  .address-stage__cta .fos-btn,
  .fleet-stage__cta .fos-btn,
  .b2b-stage__leadgen .fos-btn,
  .price-list__cta .fos-btn,
  #mobile-drawer .fos-btn,
  .mobile-drawer-panel .fos-btn,
  .modal-sheet .fos-btn,
  .bottom-sheet .fos-btn,
  #orderModal .fos-btn,
  #cooperationModal .fos-btn,
  #howto-modal .fos-btn,
  .fos-btn.fos-btn--typed,
  .fos-btn.fos-is-drive,
  .desktop-waste-cta.fos-btn--typed,
  .desktop-waste-cta.fos-is-drive {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    /* КЛЮЧ: зазор между иконкой и текстом */
    gap: 10px !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
  }

  /* ========== ИКОНКА: в потоке, не absolute ========== */
  .fos-btn > i,
  .fos-btn > .fos-btn__icon,
  a.fos-btn > i,
  a.fos-btn > .fos-btn__icon,
  button.fos-btn > i,
  button.fos-btn > .fos-btn__icon,
  .desktop-waste-cta > i,
  .desktop-waste-cta > .fos-btn__icon,
  .hero-cta__btn > i,
  .hero-cta__btn > .fos-btn__icon,
  .mobile-bottom-bar .fos-btn > i,
  .mobile-bottom-bar .fos-btn > .fos-btn__icon,
  .mobile-bottom-bar .fos-btn.fos-btn--typed > i,
  .mobile-bottom-bar .fos-btn.fos-is-drive > i,
  .site-leadgen__cta .fos-btn > i,
  .site-leadgen__cta .fos-btn > .fos-btn__icon,
  .site-leadgen__cta .desktop-waste-cta > i,
  .site-leadgen__cta .desktop-waste-cta > .fos-btn__icon,
  .site-leadgen__cta .fos-btn.fos-btn--typed > i,
  .site-leadgen__cta .fos-btn.fos-is-drive > i,
  .site-leadgen__cta .desktop-waste-cta.fos-btn--typed > i,
  .site-leadgen__cta .desktop-waste-cta.fos-is-drive > i,
  .site-leadgen-card .fos-btn > i,
  .site-leadgen-card .desktop-waste-cta > i,
  .waste-stage-multi__cta .fos-btn > i,
  .waste-stage-multi__cta .desktop-waste-cta > i,
  .eco-stage__cta .fos-btn > i,
  .about-stage__cta .fos-btn > i,
  .info-stage__cta .fos-btn > i,
  .address-stage__cta .fos-btn > i,
  .fleet-stage__cta .fos-btn > i,
  #mobile-drawer .fos-btn > i,
  #mobile-drawer .fos-btn > .fos-btn__icon,
  .modal-sheet .fos-btn > i,
  .fos-btn.fos-btn--typed > i,
  .fos-btn.fos-btn--typed > .fos-btn__icon,
  .fos-btn.fos-is-drive > i,
  .fos-btn.fos-is-drive > .fos-btn__icon,
  .desktop-waste-cta.fos-btn--typed > i,
  .desktop-waste-cta.fos-is-drive > i,
  .fos-btn .fos-icon-driving,
  .fos-btn > i.fos-icon-driving {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: 1.2em !important;
    min-width: 1.2em !important;
    max-width: 1.2em !important;
    height: 1.2em !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1 !important;
    font-size: 1.05em !important;
    opacity: 1 !important;
    z-index: auto !important;
    float: none !important;
    order: 0 !important;
    pointer-events: none !important;
    vertical-align: middle !important;
  }

  /* ========== ТЕКСТ: в потоке, padding 0 ========== */
  .fos-btn > span,
  .fos-btn > .fos-btn__label,
  .fos-btn > .fos-type-label,
  .fos-btn > .desktop-waste-cta__text,
  a.fos-btn > span,
  button.fos-btn > span,
  .desktop-waste-cta > span,
  .desktop-waste-cta > .desktop-waste-cta__text,
  .desktop-waste-cta > .fos-type-label,
  .hero-cta__btn > span,
  .mobile-bottom-bar .fos-btn > span,
  .mobile-bottom-bar .fos-btn > .fos-btn__label,
  .mobile-bottom-bar .fos-btn__label,
  .site-leadgen__cta .fos-btn > span,
  .site-leadgen__cta .desktop-waste-cta > span,
  .site-leadgen__cta .desktop-waste-cta__text,
  .site-leadgen__cta .fos-btn.fos-btn--typed > span,
  .site-leadgen__cta .fos-btn.fos-is-drive > span,
  .site-leadgen-card .fos-btn > span,
  .site-leadgen-card .desktop-waste-cta__text,
  .waste-stage-multi__cta .fos-btn > span,
  .waste-stage-multi__cta .desktop-waste-cta__text,
  .eco-stage__cta .fos-btn > span,
  .about-stage__cta .fos-btn > span,
  .info-stage__cta .fos-btn > span,
  #mobile-drawer .fos-btn > span,
  .modal-sheet .fos-btn > span,
  .fos-btn.fos-btn--typed > span,
  .fos-btn.fos-is-drive > span,
  .desktop-waste-cta.fos-btn--typed > span,
  .desktop-waste-cta.fos-is-drive > span,
  .desktop-waste-cta.fos-btn--typed > .desktop-waste-cta__text,
  .desktop-waste-cta.fos-is-drive > .desktop-waste-cta__text {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    line-height: 1.25 !important;
    text-align: left !important;
    z-index: auto !important;
    float: none !important;
    order: 0 !important;
    box-sizing: border-box !important;
    letter-spacing: 0.02em !important;
  }

  /* bottom bar: 2 строки через <br> */
  .mobile-bottom-bar .fos-btn {
    justify-content: center !important;
    min-height: 48px !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .mobile-bottom-bar .fos-btn > span,
  .mobile-bottom-bar .fos-btn > .fos-btn__label,
  .mobile-bottom-bar .fos-btn__label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  /* typewriter: не ломать поток */
  .fos-btn .fos-type-char,
  .desktop-waste-cta .fos-type-char,
  .mobile-bottom-bar .fos-type-char {
    display: inline !important;
    position: static !important;
    float: none !important;
    writing-mode: horizontal-tb !important;
    width: auto !important;
  }

  /* leadgen: кнопки столбиком */
  .site-leadgen__cta,
  .site-leadgen__cta--triple,
  .site-leadgen-card .fos-btn-pair,
  .site-leadgen-card .site-leadgen__cta,
  .eco-stage__cta,
  .about-stage__cta,
  .info-stage__cta,
  .address-stage__cta,
  .fleet-stage__cta {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-leadgen__cta .fos-btn,
  .site-leadgen__cta .desktop-waste-cta,
  .site-leadgen__cta--triple > .fos-btn,
  .site-leadgen__cta--triple > .desktop-waste-cta {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 48px !important;
    height: auto !important;
  }

  /*
   * FIX: иконка поверх текста
   * fos-btn-unify на mobile ставит gap:0 + absolute у typed/drive (и JS иногда).
   * Форсируем: row + gap, иконка static, текст static, без absolute.
   */
  .fos-btn,
  a.fos-btn,
  button.fos-btn,
  .desktop-waste-cta,
  .hero-cta__btn,
  .mobile-bottom-bar .fos-btn,
  .site-leadgen__cta .fos-btn,
  .site-leadgen__cta .desktop-waste-cta,
  .site-leadgen__cta--triple > .fos-btn,
  .site-leadgen__cta--triple > .desktop-waste-cta,
  .waste-stage-multi__cta .fos-btn,
  .waste-stage-multi__cta .desktop-waste-cta,
  .eco-stage__cta .fos-btn,
  .about-stage__cta .fos-btn,
  .info-stage__cta .fos-btn,
  .news-stage__cta .fos-btn,
  .address-stage__cta .fos-btn,
  .fleet-stage__cta .fos-btn,
  .b2b-stage__leadgen .fos-btn,
  .price-list__cta .fos-btn,
  #mobile-drawer .fos-btn,
  .mobile-drawer-panel .fos-btn,
  .fos-btn.fos-btn--typed,
  .fos-btn.fos-is-drive,
  .desktop-waste-cta.fos-btn--typed,
  .desktop-waste-cta.fos-is-drive {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    position: relative !important;
  }

  .fos-btn > i,
  .fos-btn > .fos-btn__icon,
  .fos-btn > i.fos-btn__icon,
  .fos-btn.fos-btn--typed > i,
  .fos-btn.fos-btn--typed > .fos-btn__icon,
  .fos-btn.fos-is-drive > i,
  .fos-btn.fos-is-drive > .fos-btn__icon,
  .fos-btn .fos-icon-driving,
  .desktop-waste-cta > i,
  .desktop-waste-cta > .fos-btn__icon,
  .desktop-waste-cta.fos-btn--typed > i,
  .desktop-waste-cta.fos-is-drive > i,
  .hero-cta__btn > i,
  .hero-cta__btn > .fos-btn__icon,
  .mobile-bottom-bar .fos-btn > i,
  .mobile-bottom-bar .fos-btn > .fos-btn__icon,
  .site-leadgen__cta .fos-btn > i,
  .site-leadgen__cta .fos-btn > .fos-btn__icon,
  .site-leadgen__cta .desktop-waste-cta > i,
  .site-leadgen__cta .desktop-waste-cta > .fos-btn__icon,
  .waste-stage-multi__cta .fos-btn > i,
  .waste-stage-multi__cta .desktop-waste-cta > i,
  .eco-stage__cta .fos-btn > i,
  .about-stage__cta .fos-btn > i,
  .info-stage__cta .fos-btn > i,
  .news-stage__cta .fos-btn > i,
  .address-stage__cta .fos-btn > i,
  .fleet-stage__cta .fos-btn > i,
  #mobile-drawer .fos-btn > i,
  #mobile-drawer .fos-btn > .fos-btn__icon {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 1.15em !important;
    min-width: 1.15em !important;
    max-width: 1.15em !important;
    height: 1.15em !important;
    line-height: 1 !important;
    font-size: 1.05em !important;
    z-index: auto !important;
    float: none !important;
    order: 0 !important;
  }

  .fos-btn > span,
  .fos-btn > .fos-btn__label,
  .fos-btn > .fos-type-label,
  .fos-btn > .desktop-waste-cta__text,
  .fos-btn.fos-btn--typed > span,
  .fos-btn.fos-is-drive > span,
  .desktop-waste-cta > span,
  .desktop-waste-cta > .desktop-waste-cta__text,
  .desktop-waste-cta.fos-btn--typed > span,
  .desktop-waste-cta.fos-is-drive > span,
  .mobile-bottom-bar .fos-btn > span,
  .mobile-bottom-bar .fos-btn__label,
  .site-leadgen__cta .fos-btn > span,
  .site-leadgen__cta .desktop-waste-cta > span,
  .site-leadgen__cta .desktop-waste-cta__text {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    z-index: auto !important;
    order: 0 !important;
    writing-mode: horizontal-tb !important;
  }
}