/* Advanced filter section. Kept separate to make this UI easier to maintain. */

.advanced-filters {
  border: 0;
  padding: 0;
  background: transparent;
}

.advanced-filters summary {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  background: #263d68;
  color: #fff;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .04em;
  box-shadow: 0 4px 10px #263c6430;
}

.advanced-filters summary::before {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  width: 1rem;
  text-align: center;
}

.advanced-filter-controls {
  position: relative;
  gap: 22px;
  max-height: 12rem;
  overflow: hidden;
  padding: 23px 14px 14px;
  background: #fff;
  border: 1px solid #263d68;
  border-top: 0;
  border-radius: 0 0 9px 9px;
  opacity: 1;
  transition: max-height 1s cubic-bezier(.22, 1, .36, 1), padding 1s cubic-bezier(.22, 1, .36, 1), border-color .65s ease, opacity .65s ease, transform 1s cubic-bezier(.22, 1, .36, 1);
}

.advanced-filters[open] > .advanced-filter-controls {
  transform: translateY(-9px);
}

.advanced-filters.is-closing summary::before {
  content: '+';
}

/* Keep the contents rendered at zero height so native details can animate when closing. */

.advanced-filters:not([open]) > .advanced-filter-controls {
  display: flex;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.advanced-filters.is-closing > .advanced-filter-controls {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.platform-filter, .language-filter, .stream-status-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.platform-filter legend, .language-filter legend, .stream-status-filter legend {
  padding: 0;
  color: #4f607c;
  font-size: .82rem;
  font-weight: 800;
}

.platform-filter .checkbox, .language-filter .checkbox, .stream-status-filter .checkbox {
  padding: 0;
}

.platform-filter input, .language-filter input, .stream-status-filter input {
  flex: 0 0 auto;
}

@media (min-width: 721px) {
  .filters > label > .filter-label {
    display: none;
  }

}

@media (max-width: 720px) {
  .advanced-filter-controls {
    gap: 14px;
    padding: 23px 14px 14px;
  }

  .platform-filter, .language-filter, .stream-status-filter {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  .platform-filter legend, .language-filter legend, .stream-status-filter legend {
    width: 100%;
  }

}