/* mobile-sticky-panel.css (flower3.ru), версия 2. Закреплённая панель на телефоне, воронка фильтра, футер. */

/* ===== РАЗМЕРЫ (меняются только здесь) ===== */
:root {
  --msp-size: 36px;          /* логотип и иконки связи в закреплённой панели (было 30px) */
  --msp-funnel-size: 30px;   /* воронка в розовой строке панели */
  --msp-pill-funnel: 38px;   /* воронка рядом с пилюлями и на главной (38px = высота пилюли) */
}
/* ===== КОНЕЦ РАЗМЕРОВ ===== */

#mobile-sticky-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  background: #fff;
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .35);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
  will-change: transform;
  --msp-dot-ring: var(--color-primary, #d4145a);
}

#mobile-sticky-panel.msp-on {
  transform: translateY(0);
  visibility: visible;
  transition: transform .22s ease, visibility 0s linear 0s;
}

#mobile-sticky-panel .msp-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(4px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 4px max(12px, env(safe-area-inset-left, 0px));
}

#mobile-sticky-panel .msp-logo {
  display: flex;
  align-items: center;
  flex: none;
}

#mobile-sticky-panel .msp-logo img {
  display: block;
  height: var(--msp-size);
  width: auto;
}

#mobile-sticky-panel .msp-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

#mobile-sticky-panel .msp-ic {
  width: var(--msp-size);
  height: var(--msp-size);
  border-radius: 8px;
}

#mobile-sticky-panel .msp-ic svg {
  width: calc(var(--msp-size) * .53);
  height: calc(var(--msp-size) * .53);
}

#mobile-sticky-panel .msp-row2 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px max(8px, env(safe-area-inset-right, 0px)) 5px max(8px, env(safe-area-inset-left, 0px));
  background: var(--color-primary, #d4145a);
}

#mobile-sticky-panel .msp-funnel {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--msp-funnel-size);
  height: var(--msp-funnel-size);
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#mobile-sticky-panel .msp-funnel svg {
  width: 16px;
  height: 16px;
}

/* Жёлтая точка «фильтр выставлен»: одна для всех воронок */
.msp-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd84d;
  border: 2px solid var(--msp-dot-ring, #fff);
  box-sizing: border-box;
}

.msp-dot[hidden] {
  display: none;
}

#mobile-sticky-panel .msp-tabs {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

#mobile-sticky-panel .msp-tabs::-webkit-scrollbar {
  display: none;
}

#mobile-sticky-panel .msp-tabs > a {
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  #mobile-sticky-panel,
  #mobile-sticky-panel.msp-on {
    transition: none;
  }
}

@media (min-width: 768px) {
  #mobile-sticky-panel {
    display: none !important;
  }
  .msp-pillfunnel {
    display: none !important;
  }
}

/* ===== ВОРОНКА ФИЛЬТРА НА СТРАНИЦЕ (экран уже 768 px) =====
   Строка «Фильтр / По умолчанию» убирается. Кнопка #filter-toggle остаётся в странице
   (её нажимает и воронка, и панель), окно фильтров работает как раньше.
   Все правила отключаются классом msp-keep-row на <html>: его ставит скрипт при ошибке
   или при INLINE_FUNNEL = false, тогда строка выглядит как раньше. */
@media (max-width: 767.98px) {
  /* Страница с рядом пилюль: строку убираем целиком, воронку вставляет скрипт в начало ряда пилюль */
  html:not(.msp-keep-row) .scrollbar-none ~ #filter-form > .md\:hidden.flex.items-center.justify-between {
    display: none;
  }

  /* Страница без ряда пилюль (главная и т.п.): строка «Фильтр / По умолчанию» остаётся как была (решение 20.10),
     к кнопке «Фильтр» только добавляется точка. */
  #filter-form #filter-toggle {
    position: relative;
  }

  /* Окно «Фильтры»: кнопку «Сбросить» скрипт переносит в нижнюю панель под «Применить фильтры»
     (класс msp-reset-bottom). Показывает и прячет её штатный скрипт сайта (класс hidden). */
  #filters-panel .reset-filters.msp-reset-bottom {
    width: 100%;
    height: 44px;
    margin: 10px 0 0;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    box-shadow: none;
  }

  /* Панель выросла на кнопку: список получает запас снизу, чтобы последние пункты не прятались */
  #filters-panel:has(.msp-reset-bottom:not(.hidden)) > div.overflow-y-auto {
    padding-bottom: 170px;
  }

  /* Воронка внутри ряда пилюль: прижата слева, пилюли уезжают под неё при прокрутке.
     Белая подложка: слева прямые углы (там край ряда, дальше пилюли не видны),
     справа скругление ровно по розовой рамке, без белого хвоста. Рамка — в ::before. */
  html:not(.msp-keep-row) .msp-pillfunnel {
    position: sticky;
    left: 0;
    z-index: 2;
    align-self: flex-start;
    display: grid;
    place-items: center;
    flex: none;
    width: var(--msp-pill-funnel);
    height: var(--msp-pill-funnel);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: #fff;
    color: var(--color-primary, #d4145a);
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  html:not(.msp-keep-row) .msp-pillfunnel::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--color-primary, #d4145a);
    border-radius: 10px;
    box-sizing: border-box;
    pointer-events: none;
  }

  html:not(.msp-keep-row) .msp-pillfunnel svg {
    position: relative;
    width: 18px;
    height: 18px;
  }

  html:not(.msp-keep-row) .msp-pillfunnel .msp-dot {
    top: 2px;
    right: 2px;
  }
}

/* ===== ФУТЕР НА ТЕЛЕФОНЕ: «О компании» и «Каталог» рядом, «Контакты» ниже на всю ширину =====
   Выбираем блок из трёх колонок по его классу md:gap-16 (в футере он один). Если разметку футера
   когда-нибудь изменят, правило перестанет находить блок и футер вернётся к прежнему виду.
   Компьютер (от 768 px) не затронут. */
@media (max-width: 767.98px) {
  footer div[class~="md:gap-16"][class~="md:flex-row"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 20px;
  }

  footer div[class~="md:gap-16"][class~="md:flex-row"] > :nth-child(3) {
    grid-column: 1 / -1;
  }
}