/* ============================================================
   МОБИЛЬНАЯ ШАПКА: логотип и строка поиска — независимые блоки.
   Логотип живёт в обычном потоке страницы и уходит при скролле.

   Строка поиска (+ кнопка фильтров через блок header_search_extra)
   закреплена вверху экрана (sticky). У самой панели НЕТ фона —
   при скролле контент не прячется за прямоугольной плашкой,
   видна только "плавающая" капсула поиска и круглая кнопка
   фильтров — в стиле liquid glass (сильное размытие, блик сверху,
   мягкая многослойная тень), как в iOS/WB/Ozon.

   Работает только на экранах ≤768px — на десктопе шапка и поиск
   стилизуются в style.css (.header / .search-form).
   ============================================================ */

@media (max-width: 768px) {
  .header {
    /* На десктопе шапка зафиксирована (.header в style.css); на мобильных
       её нужно вернуть в обычный поток, чтобы логотип уходил при скролле */
    position: static;
    top: auto;
    left: auto;
    width: auto;
    z-index: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    padding: 10px 12px;
  }

  /* Карточка логотипа — скроллится вместе со страницей */
  .header__inner {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-sm);
    padding: 4px 16px;
  }

  /* Обёртка строки поиска — без собственного фона/тени/границы:
     это просто раскладка, не плашка. Видимость дают только
     дочерние элементы (капсула поиска и кнопка фильтров). */
  .header-search-mobile {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
  }

  /* ===== Капсула поиска — liquid glass ===== */
  .mobile-search-form {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 46px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(22px) saturate(200%);
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
      0 10px 28px rgba(26, 42, 58, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      inset 0 -1px 0 rgba(255, 255, 255, 0.12);
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    /* Подсказки — точка отсчёта; переполнение не скрываем, иначе список обрежется */
    overflow: visible;
  }
  /* Тонкий блик сверху капсулы — та самая "жидкость" стекла */
  .mobile-search-form::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
  }
  .mobile-search-form:focus-within {
    border-color: rgba(241, 90, 36, 0.35);
    box-shadow:
      0 10px 28px rgba(26, 42, 58, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 0 0 3px rgba(241, 90, 36, 0.14);
  }

  /* Поле — то же решение, что на десктопе: без собственного фона/рамки,
     справа место под крестик и лупу зарезервировано паддингом.
     appearance:none убирает нативный (белый скруглённый) вид поля на iOS/Android,
     который иначе проступает поверх нашей капсулы отдельным "овалом". */
  .mobile-search-form .form-control {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0 78px 0 18px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--text-dark);
    -webkit-appearance: none;
    appearance: none;
  }
  .mobile-search-form .form-control::placeholder {
    color: var(--text-muted);
    font-weight: 400;
  }
  .mobile-search-form .form-control:focus {
    outline: none !important;
  }

  /* Крестик и лупа — плавающие круглые кнопки поверх поля (без вложенных
     прямоугольников с обрезкой углов, которые давали "белый овал") */
  .mobile-search-form .clear-btn {
    position: absolute;
    right: 46px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 50%;
    transition: var(--transition);
    z-index: 2;
  }
  .mobile-search-form .clear-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-dark);
  }
  .mobile-search-form .search-submit-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: linear-gradient(155deg, var(--primary-light), var(--primary-dark));
    color: var(--white);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow:
      0 6px 16px rgba(241, 90, 36, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
    z-index: 2;
  }
  .mobile-search-form .search-submit-btn:active {
    transform: translateY(-50%) scale(0.94);
  }

  /* ===== Кнопка фильтров — тот же liquid glass, с акцентным оттенком ===== */
  .filter-toggle-mobile {
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(241, 90, 36, 0.22);
    backdrop-filter: blur(22px) saturate(200%);
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    color: var(--primary-dark);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.25s, transform 0.1s;
    box-shadow:
      0 10px 24px rgba(241, 90, 36, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 0;
  }
  .filter-toggle-mobile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
  }
  .filter-toggle-mobile i {
    position: relative;
    z-index: 1;
  }
  .filter-toggle-mobile:hover {
    background: rgba(241, 90, 36, 0.32);
  }
  .filter-toggle-mobile:active {
    transform: scale(0.92);
    background: rgba(241, 90, 36, 0.4);
  }

  /* Логотип больше не зафиксирован — резервировать место под шапку не нужно */
  body {
    padding-top: 0;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 8px 8px;
  }
  .header__inner {
    padding: 3px 12px;
  }
  .header-search-mobile {
    padding: 8px 8px;
    gap: 8px;
  }
  .mobile-search-form {
    height: 44px;
  }
  .mobile-search-form .form-control {
    font-size: 0.85rem;
    padding-right: 74px;
  }
  .filter-toggle-mobile {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }
}

@media (max-width: 360px) {
  .header-search-mobile {
    padding: 6px 6px;
  }
  .mobile-search-form {
    height: 42px;
  }
  .mobile-search-form .form-control {
    font-size: 0.8rem;
    padding: 0 68px 0 14px;
  }
  .mobile-search-form .clear-btn {
    right: 42px;
  }
  .filter-toggle-mobile {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }
}