:host { --filter-panel-z-index: 6; --filter-chips-max-height: 265px; }
:host { z-index: var(--filter-panel-z-index); position: absolute; width: 100%; background: var(--fds-surface-variant, var(--surface-variant)); }
.groups-container { display: flex; flex-direction: column; gap: var(--fds-spacing-400); padding: var(--fds-spacing-150) var(--fds-spacing-200) 0; }
.group { display: flex; flex-direction: column; gap: var(--fds-spacing-200); }
.group-loader { width: 100%; min-height: var(--filter-chips-max-height); display: flex; justify-content: center; align-items: center; }
.group-header { display: flex; justify-content: space-between; align-items: center; }
.group-header .title-wrapper { display: flex; align-items: center; padding-top: var(--fds-spacing-050); padding-bottom: var(--fds-spacing-050); gap: var(--fds-spacing-050); }
.group-header .title-wrapper .title { padding-top: var(--fds-spacing-050); padding-bottom: var(--fds-spacing-050); font: var(--fds-headline-tiny); color: var(--fds-on-surface-hi); }
.group-header .title-wrapper .counter { padding-top: var(--fds-spacing-100); padding-bottom: var(--fds-spacing-100); font: var(--fds-paragraphs-small-bold); color: var(--fds-on-surface-low); }
.group-header .sort-chip { border: none; font: var(--fds-paragraphs-small-bold); }
.group-header .sort-chip:active { color: var(--fds-on-surface-color); }
.group-header .sort-chip:hover, .group-header .sort-chip:focus { color: var(--fds-on-surface-color); }
.group-body { display: flex; flex-direction: column; gap: var(--fds-spacing-200); }
.group-body .provider-search-wrapper { display: flex; align-items: center; background: var(--fds-surface); border-radius: var(--fds-border-radius-container-default); padding: 14px var(--fds-spacing-200); position: relative; gap: var(--fds-spacing-100); border: 2px solid var(--fds-on-surface-ulow); }
.group-body .provider-search-wrapper input { border: none; color: var(--fds-on-surface-hi); font: var(--fds-paragraphs-regular, var(--paragraphs-regular)); outline: none; padding: 0px; text-align: left; width: 100%; background: var(--fds-surface); }
.group-body .provider-search-wrapper input ::placeholder { color: var(--fds-on-surface-m); font: var(--fds-paragraphs-lead); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-body .chips-wrapper { max-height: var(--filter-chips-max-height); height: var(--filter-chips-max-height); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow-y: auto; }
.group-body .no-results-wrapper { display: flex; justify-content: center; align-items: center; gap: var(--fds-spacing-100); color: var(--fds-on-surface-hi); font: var(--fds-paragraphs-small); }
.live-casino .chips-wrapper { height: auto; }
.actions { display: flex; justify-content: flex-end; padding-bottom: var(--fds-spacing-300); gap: var(--fds-spacing-100); border-bottom: 1px solid var(--fds-on-surface-ulow); }
.actions .reset-btn { border: 2px solid var(--fds-btn-on-surface-default); }
.actions .reset-btn, .actions .apply-btn { min-width: 0px; }
.actions .collapse-btn { padding: var(--fds-spacing-100); color: var(--fds-on-surface-color, var(--primary)); background: var(--fds-surface-accent); border-radius: var(--fds-border-radius-btn-default); rotate: 180deg; }
@media (min-width: 577px) and (max-width: 1199px) and (max-height: 500px) {
  :host { --filter-panel-z-index: 901; --filter-controls-height: 212px; --filter-chips-max-height: calc(100dvh - var(--header-height, 96px) - var(--filter-controls-height)); }
  .live-casino { --filter-controls-height: 88px; height: calc(100dvh - var(--header-height, 96px) - var(--filter-controls-height)); }
}