/* Мобильный фильтр с переключением для кнопки .filterbutton и секции .filters */

.filters {
  display: block;
  transition: all 0.3s ease;
}

.filterbutton {
  display: none;
}

@media (max-width: 767px) {
  .filterbutton {
    display: block !important;
    margin-bottom: 15px;
  }

  .filters,
  .elementor-element.filters,
  .elementor-element-7c68d8d.filters,
  .e-con-full.filters,
  .e-con.filters,
  .e-child.filters,
  div.filters,
  section.filters,
  .elementor-element.elementor-element-7c68d8d.e-con-full.filters.e-flex.e-con.e-child {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    visibility: hidden !important;
    transform: translateY(-20px) !important;
  }

  .filters.show,
  .elementor-element.filters.show,
  .elementor-element-7c68d8d.filters.show,
  .e-con-full.filters.show,
  .e-con.filters.show,
  .e-child.filters.show,
  div.filters.show,
  section.filters.show,
  .elementor-element.elementor-element-7c68d8d.e-con-full.filters.show.e-flex.e-con.e-child {
    display: block !important;
    opacity: 1 !important;
    max-height: 5000px !important;
    height: auto !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    animation: slideDown 0.5s ease-out !important;
    background: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    position: relative !important;
    z-index: 999 !important;
  }

  @keyframes slideDown {
    0% {
      opacity: 0 !important;
      max-height: 0 !important;
      transform: translateY(-30px) !important;
      visibility: hidden !important;
    }
    50% {
      opacity: 0.5 !important;
      max-height: 1000px !important;
      transform: translateY(-10px) !important;
      visibility: visible !important;
    }
    100% {
      opacity: 1 !important;
      max-height: 5000px !important;
      transform: translateY(0) !important;
      visibility: visible !important;
    }
  }

  .filters.show {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
  }

  .filters.show > * {
    margin-bottom: 10px;
  }

  .filters.show > *:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .filters.show {
    padding: 12px;
  }
}