/* ============================================================================
   Плавающие кнопки витрины INGRIAFARM — стопка в правом нижнем углу.

   Разметка: resources/views/themes/ingriafarm/partials/floating-actions.blade.php
   Снизу вверх: корзина, над ней Telegram. Обе кнопки — одна пластика: «лапка»
   со скруглениями разного радиуса, чёрная на светлой теме и белая на тёмной.

   Выделено из modals.css (там это жило рядом с модалками просто исторически;
   файл давно перерос один модуль). Подключается сразу после modals.css —
   порядок каскада тот же, что был.
   ========================================================================== */

/* --- Корзина --------------------------------------------------------------- */
span.counter_cartlequebutton:empty {
  display: none !important;
}

#body a.cartlequebutton {
  justify-content: center;
  padding: 0;
  border-radius: 40px;
  position: fixed;
  display: flex;
  align-items: center;
  width: 57px;
  height: 57px;
  border-top-left-radius: 35px;
  border-top-right-radius: 23px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 41px;
  right: 27px;
  bottom: 54px;
  z-index: 1000;
  background: #000;
  transition: all 0.3s ease;
}

@media (max-width: 492px) {
  /* 44px, а не 34: плавающая корзина — главный тап-таргет страницы */
  #body a.cartlequebutton {
    width: 44px;
    height: 44px;
    border-top-left-radius: 27px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 33px;
    right: 22px;
    bottom: 22px;
  }
}

.theme-dark #body a.cartlequebutton {
  background: #fff;
}
.theme-dark #body a.cartlequebutton::after {
  filter: invert(1);
}
#body a.cartlequebutton::after {
  width: 31px;
  height: 31px;
  content: ' ';
  display: block;
  background: no-repeat center center url(img/icon/btn-cart.svg);
  background-size: 100% 100%;
  filter: contrast(0) brightness(10);
}
@media (max-width: 492px) {
  #body a.cartlequebutton::after {
    width: 24px;
    height: 24px;
  }
}
#body a.cartlequebutton:hover {opacity: 0.8;}
#body a.cartlequebutton:active {opacity: 0.8;}
#body a.cartlequebutton span.counter_cartlequebutton {
  width: 20px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  left: auto !important;
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  color: #000;
  text-align: center;
  border-radius: 40px;
  top: -7px !important;
  right: -7px !important;
  padding: 0  !important;
  background-color: #E4BA85;
  border-top-left-radius: 35px;
  border-top-right-radius: 23px;
  border-bottom-right-radius: 41px;
  border-bottom-left-radius: 25px;
}

/* ВНИМАНИЕ на порядок: это правило перекрывает right/bottom из блока 492px
   выше (специфичность равная, а оно ниже по файлу), поэтому на телефоне
   корзина стоит 20/40, а не 22/22. Так было и в modals.css — поведение
   сохранено намеренно, чтобы перенос файла ничего не сдвинул; разбор
   несоответствия записан в docs/backlog.md. */
@media all and (max-width: 1500px){
  #body a.cartlequebutton {right: 20px; bottom: 40px;}
}

/* --- Telegram -------------------------------------------------------------- */
/* Короткий путь в поддержку с любой страницы (паритет с витриной Account
   Factory, где такая же кнопка стоит над корзиной).

   Отступ снизу считается от ФАКТИЧЕСКОГО положения корзины: её bottom + её
   рост + зазор. Поэтому мобильное значение отталкивается от 40, а не от 22
   (см. предупреждение о порядке правил выше). */
#body a.if-tgfab {
  justify-content: center;
  padding: 0;
  position: fixed;
  display: flex;
  align-items: center;
  width: 57px;
  height: 57px;
  border-top-left-radius: 35px;
  border-top-right-radius: 23px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 41px;
  right: 27px;
  bottom: 125px; /* 54 (низ корзины) + 57 (её рост) + 14 (зазор) */
  z-index: 1000;
  color: #fff;
  background: #000;
  transition: all 0.3s ease;
}

/* Страница корзины плавающую корзину не рендерит — Telegram занимает её слот,
   иначе кнопка висит над пустым местом. */
#body a.if-tgfab.is-solo { bottom: 54px; }

.theme-dark #body a.if-tgfab {
  color: #040000;
  background: #fff;
}

#body a.if-tgfab:hover,
#body a.if-tgfab:active { opacity: 0.8; }

@media all and (max-width: 1500px) {
  #body a.if-tgfab { right: 20px; bottom: 111px; } /* 40 + 57 + 14 */
  #body a.if-tgfab.is-solo { bottom: 40px; }
}

/* 44px — палец, как у плавающей корзины на этой же ширине */
@media (max-width: 492px) {
  #body a.if-tgfab {
    width: 44px;
    height: 44px;
    border-top-left-radius: 27px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 33px;
    bottom: 96px; /* 40 + 44 (рост корзины на телефоне) + 12 */
  }
  #body a.if-tgfab.is-solo { bottom: 40px; }
  #body a.if-tgfab svg { width: 21px; height: 21px; }
}

/* --- Уход с дороги при прокрутке вниз -------------------------------------- */
/* Класс на <html> ставит ingri-fabs.js. Кнопки прибиты к тому же правому
   нижнему углу, где у карточки товара стоит «Купить», и на прокрутке списка
   регулярно накрывают её (замерено: 85–90% на 768–1024). Двигать стопку
   некуда — карточки идут через каждые ~136px. Поэтому убираем их не в
   пространстве, а во времени: листаешь вниз — уехали за край, тянешь вверх —
   вернулись. Уезжают вбок, а не гаснут на месте: так видно, что кнопка не
   исчезла, а отошла.
   pointer-events снимаем — иначе невидимая кнопка продолжала бы ловить палец. */
#body a.if-tgfab,
#body a.cartlequebutton {
  transition: transform 0.28s ease, opacity 0.28s ease, background 0.3s ease;
}
.if-fabs-away #body a.if-tgfab,
.if-fabs-away #body a.cartlequebutton {
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
}
/* Кому движение мешает — просто гаснут без переезда */
@media (prefers-reduced-motion: reduce) {
  #body a.if-tgfab,
  #body a.cartlequebutton { transition: opacity 0.2s linear; }
  .if-fabs-away #body a.if-tgfab,
  .if-fabs-away #body a.cartlequebutton { transform: none; }
}