/*
 * Mobile catalog filter hotfix.
 * Load after /local/templates/main/css/filter-2024.css.
 *
 * --ankona-filter-viewport-height is maintained by filter-2024.fixed.js.
 * 100dvh remains the no-JavaScript fallback for modern mobile browsers.
 */

@media screen and (max-width: 960px) {
  .mobile-sidebar {
    height: 100vh;
    height: 100dvh;
    height: var(--ankona-filter-viewport-height, 100dvh);
    max-height: var(--ankona-filter-viewport-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .mobile-sidebar__body {
    height: 100vh;
    height: 100dvh;
    height: var(--ankona-filter-viewport-height, 100dvh);
    max-height: var(--ankona-filter-viewport-height, 100dvh);
    overscroll-behavior-y: contain;
  }

  .mobile-sidebar__body > .simplebar-wrapper,
  .mobile-sidebar__body > .simplebar-wrapper > .simplebar-mask,
  .mobile-sidebar__body > .simplebar-wrapper > .simplebar-mask > .simplebar-offset,
  .mobile-sidebar__body > .simplebar-wrapper > .simplebar-mask > .simplebar-offset > .simplebar-content-wrapper {
    height: 100% !important;
    max-height: 100% !important;
  }

  .mobile-sidebar__body .simplebar-content-wrapper,
  .custom-catalog-filter__group-wrapper .simplebar-content-wrapper {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .mobile-sidebar__body .simplebar-content-wrapper {
    scroll-padding-block: 72px calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .custom-catalog-list .mobile-sidebar__body > .simplebar-wrapper > .simplebar-mask > .simplebar-offset > .simplebar-content-wrapper > .simplebar-content {
    padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .custom-catalog-filter__group-wrapper[data-simplebar] {
    max-height: min(295px, calc(var(--ankona-filter-viewport-height, 100dvh) * 0.45));
  }

  .mobile-sidebar-is-active::after {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
  }

  .custom-catalog-filter__item {
    margin-bottom: 0;
  }

  .custom-catalog-filter__label {
    min-height: 44px;
    padding: 10px 12px 10px 40px;
    line-height: 24px;
    overflow-wrap: anywhere;
  }

  [type="radio"] + .custom-catalog-filter__label::before,
  [type="checkbox"] + .custom-catalog-filter__label::before {
    top: 11px;
    left: 4px;
    width: 22px;
    height: 22px;
  }

  [type="radio"] + .custom-catalog-filter__label::after {
    top: 18px;
    left: 11px;
  }

  [type="checkbox"]:checked + .custom-catalog-filter__label::after,
  .isBlocked [type="checkbox"] + .custom-catalog-filter__label::after {
    top: 17px;
    left: 10px;
  }

  .custom-catalog-filter__more-button {
    min-height: 44px;
    margin-top: 2px;
    padding-block: 10px;
    touch-action: manipulation;
  }

  .custom-catalog-filter__more-button::after {
    top: 18px;
  }

  .custom-catalog-filter__more-button:focus-visible,
  .mobile-sidebar__close-btn:focus-visible,
  .custom-catalog-filter input:focus-visible + .custom-catalog-filter__label {
    outline: 2px solid #1872c5;
    outline-offset: 2px;
  }
}

@media screen and (max-width: 480px) {
  .mobile-sidebar {
    max-width: none;
    width: 100vw;
    padding-inline: 15px;
  }

  .mobile-sidebar__close-btn {
    position: fixed;
    top: calc(4px + env(safe-area-inset-top, 0px));
    right: 15px;
    left: auto;
    z-index: 3;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.94);
  }

  .mobile-sidebar__title {
    padding-right: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sidebar,
  .custom-catalog-filter__more-button,
  .custom-catalog-filter__more-button::after {
    transition-duration: 0.01ms !important;
  }
}