.search-module{ position: relative; width: 100%} .search-module .alert{ margin-top: 1rem} .search-module> header{ display: grid; padding: 0.5rem; grid-gap: 0.5rem; align-content: center; align-items: center; background-color: #030a12; grid-template-columns: minmax(7.5rem, 1fr) auto auto; height: auto; z-index: 10} .search-module__title{ grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; color: #fff; font-size: 0.875rem; font-weight: 700; line-height: 1.35; text-align: start} .search-module> header .input__container, .search-module> header .select-dropdown{ margin-bottom: 0} .search-module> header .input{ background-color: #081950} .search-module> header> button, .search-module .search__filters> button{ align-items: center; border: 2px solid #081950; border-radius: 5px; color: #fff; display: flex; font-size: 1rem; height: 100%; justify-content: center; padding: 0 0.5rem; position: relative} .search-module> header> button.active, .search-module .search__filters> button.active{ background-color: #081950; color: #0e34d5} .search-module__filter-badge{ position: absolute; top: -0.25rem; right: -0.25rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; font-weight: 700; font-size: 0.625rem; line-height: 1rem; text-align: center; color: #fff; border-radius: 50%; background-color: #0e34d5} .search-module__filter-badge[hidden]{ display: none} .search-module--sticky{ position: sticky; top: 58px} .search-module__guest{ background-color: #030a12; padding: 1rem 0.5rem} .search-module__guest h4{ text-align: center} .search-module__recent{ padding: 0.5rem 0.5rem 0; background-color: #030a12} .search-module__recent[hidden]{ display: none} .search-module__recent> header{ display: flex; align-items: center; gap: 0.5rem; height: auto; padding: 0.25rem 0.5rem 0.5rem; background: transparent} .search-module__recent> header h3{ margin: 0; color: #fff; font-size: 1rem; font-weight: 700; text-align: start} .search-module__recent .btn{ gap: 0.5rem} .search-module__providers-title{ margin: 0; padding: 0.75rem 0.75rem 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background-color: #081950; position: sticky; top: 0; z-index: 1} .search-module--sheet{ z-index: 1000} .search-module--sheet> header{ position: relative; z-index: 1002} .search-module--sheet .search-module__providers.open .backdrop::before, .search-module--sheet .search-module__providers.open nav{ top: var(--nas-search-sheet-top, 110px); bottom: 0; height: auto} .search-module--sheet .search-module__providers.open nav{ width: min(86vw, 320px); border-radius: 16px 0 0 16px} .search-module__content{ min-height: 0; padding: 0 0.5rem; position: relative; transition: min-height 0.2s ease} .search-module--active .search-module__content{ min-height: calc(100dvh - 58px)} .search-module .games-grid, .search-module .search-loading{ display: grid; padding: 0.5rem 0; grid-gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr)} @media(min-width: 768px){ .search-module .games-grid, .search-module .search-loading{ grid-gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr))}} .search-module .search-loading{ position: absolute; top: 0; width: 100%} .search-module .games-grid .search-load-more, .search-module .games-grid .loading-observer--sentinel{ grid-column: 1 / -1; min-height: 2.5rem} .search-module__active-provider{ background-color: #081950; padding: 0.5rem 0 0} .search-module__active-provider.is-loading{ opacity: 0.5; pointer-events: none} .search-module__active-provider li{ align-items: center; display: grid; grid-template-columns: 1fr auto; height: 36px; padding-right: 0; position: relative; scroll-snap-align: center} .search-module__providers{ bottom: 0; left: 0; display: none; overflow: hidden; pointer-events: none; position: fixed; right: 0; top: 0; z-index: -1} .search-module__providers.open{ display: block; pointer-events: all; z-index: 999} .search-module__providers:not(.open) .backdrop, .search-module__providers:not(.open) .backdrop::before, .search-module__providers:not(.open) nav{ display: none !important} .search-module__providers .backdrop{ bottom: 0; left: 0; position: fixed; right: 0; top: 0; touch-action: none} .search-module__providers.open .backdrop::before{ background-color: rgba(0, 0, 0, 0.5); content: ""; display: block; height: calc(100dvh - 170px - env(safe-area-inset-bottom)); position: absolute; top: 110px; width: 100%; -webkit-tap-highlight-color: transparent} .search-module__providers nav{ -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background-color: rgba(3, 10, 18, 0.8); height: calc(100dvh - 170px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; position: absolute; right: 0; scrollbar-width: none; top: 110px; transform: translateX(100%); transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1); width: 220px; -ms-overflow-style: none} .search-module__providers nav::-webkit-scrollbar{ display: none} .search-module__providers nav.is-loading ul{ opacity: 0.5; pointer-events: none} .search-module__providers.open nav{ transform: translateX(0)} .search-module__providers ul{ display: grid; grid-gap: 1px; background-color: #081950; list-style: none; margin: 0; padding: 0} .search-module__providers label{ background-color: #030a12; color: #fff; cursor: pointer; display: grid; grid-template-columns: 2rem 1fr; position: relative; width: 100%} .search-module__providers label div{ align-items: center; display: flex; font-size: 0.875rem; height: 100%; justify-content: center} .search-module__providers label span{ align-items: center; display: flex; flex-direction: row; font-size: 0.75rem; font-weight: 700; justify-content: space-between; padding: 0.625rem 0.5rem; white-space: nowrap} .search-module__providers label span em{ background-color: #081950; border-radius: 8px; font-style: normal; padding: 0.125rem 0.5rem} .search-module__providers label input{ position: absolute; visibility: hidden} .search-module__providers label.app-link--active{ color: #0e34d5} .search-page{ min-height: calc(100vh - 180px - 2rem); position: relative} @supports(height: 100dvh){ .search-page{ min-height: calc(100dvh - 180px - 2rem)}} .search-page .search-module--page{ position: relative; width: 100%} .search-page .search-module--page> header{ background-color: #030a12; display: block; height: auto; padding: 0; position: sticky; top: 58px; width: 100%; z-index: 9} .search-page .search-module--page .search__header h1{ background: transparent; color: #fff; height: auto; margin: 0; padding: 0} .search-page .search-module--page .search__guest{ background-color: #030a12; padding: 1rem 0.5rem} .search-page .search-module--page .search__preview{ display: grid; width: 100%} .search-page .search-module--page .search__results{ background-color: #030a12; min-height: 0; padding: 0.5rem; position: relative} .search-page .search-module--page.search-module--active .search__results:not([hidden]){ min-height: 0} .search-page .search-module--page .search-module__recent[hidden]{ display: none !important} .search-page .search-module--page .search-module__guest[hidden]{ display: none} .search-page__below[hidden]{ display: none !important} @media(min-width: 1024px){ .search-page{ min-height: calc(100vh - 80px - 1.5rem)} @supports(height: 100dvh){ .search-page{ min-height: calc(100dvh - 80px - 1.5rem)}} .search-page .search-module--page> header{ display: grid; grid-template-columns: 1fr auto} .search-page .search-module--page .search__results{ padding: 0.75rem} .search-page .search-module--page .games-grid, .search-page .search-module--page .search-loading{ grid-template-columns: repeat(6, minmax(0, 1fr))}} @media(max-width: 1023px){ .search-page .search-module--page .search-module__providers label:has(input:checked){ color: #0e34d5} .search-page .search-module--page .search-module__providers label:has(input:checked) div i{ color: #0e34d5} .search-page .search-module--page .search__results .games-grid{ list-style: none; margin: 0; padding: 0} .search-page .search-module--page .search__results .alert{ background-color: #030a12; border-radius: 5px; color: #fff; font-size: 0.875rem; margin: 0.5rem; padding: 0.75rem; text-align: center} .lgg-home-mobile .search-module{ margin-bottom: 0.5rem} .search-module--active .search-module__content[hidden]{ min-height: 0 !important; padding: 0} .search-module--active .search-module__content:not([hidden]){ min-height: calc(100dvh - 58px)} .search-module--active .search-module__guest[hidden]{ display: none} .search-module__providers label:has(input:checked){ color: #0e34d5} .search-module__providers label:has(input:checked) div i{ color: #0e34d5} .search-module__content .games-grid{ list-style: none; margin: 0; padding: 0} .search-module__content .alert{ background-color: #030a12; border-radius: 5px; color: #fff; font-size: 0.875rem; margin: 0.5rem; padding: 0.75rem; text-align: center}}