@import url('../buttons/component.css');
@import url('../pill-button/component.css');
@import url('../search-field/component.css');
@import url('../select-field/component.css');
@import url('../forms/component.css');
@import url('../cards/component.css');
@import url('../empty-state/component.css');
@import url('../header/component.css');
@import url('../navigation/component.css');
@import url('../sidebar/component.css');
@import url('../tables/component.css');
@import url('../hero/component.css');
@import url('../page-shell/component.css');
@import url('../shell-runtime/component.css');
@import url('../footer/component.css');
@import url('../modal/component.css');
@import url('../alerts/component.css');
@import url('../badges/component.css');
@import url('../tabs/component.css');
@import url('../utilities/component.css');

.surface-raised {
    background: var(--surface-raised);
    border: 1px solid var(--surface-raised-border);
    border-radius: var(--border-radius);
}

.surface-raised-soft {
    background: var(--surface-raised-hover);
    border: 1px solid var(--surface-raised-border);
    border-radius: var(--border-radius);
}

.surface-pill {
    background: var(--surface-raised);
    border: none;
    border-radius: 999px;
}

.surface-pill-active {
    background: var(--pill-bg-active);
    color: var(--pill-text-active);
}

:is(
    .toolbar-row,
    .catalog-page .catalog-toolbar-inner,
    .catalog-page .catalog-inline-filters,
    .game-filters-row,
    .game-products-toolbar,
    .profile-page .profile-reviews-toolbar
) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

:is(
    .toolbar-actions,
    .catalog-page .catalog-toolbar-selects,
    .catalog-page .catalog-inline-actions,
    .profile-page .profile-seller-actions
) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

:is(
    .toolbar-spacer,
    .catalog-page .catalog-inline-actions,
    .profile-page .profile-reviews-sort,
    .game-search-field
) {
    margin-left: auto;
}

:is(
    .toolbar-search,
    .catalog-page .catalog-toolbar-search,
    .catalog-page .catalog-inline-search
) {
    flex: 1 1 340px;
    max-width: 420px;
}

:is(
    .filter-trigger-btn,
    .catalog-page .catalog-sort-button,
    .catalog-page .catalog-filter-trigger,
    .catalog-page .catalog-inline-sort-button,
    .profile-page .profile-reviews-filter,
    .profile-page .profile-reviews-quick-pill
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

:is(
    .filter-trigger-btn.is-active,
    .catalog-page .catalog-sort-button.is-active,
    .catalog-page .catalog-filter-trigger.is-active,
    .catalog-page .catalog-inline-sort-button.is-active,
    .profile-page .profile-reviews-filter.is-active,
    .profile-page .profile-reviews-quick-pill.is-active
) {
    background: var(--surface-raised-hover);
    color: #d7e3ff;
}

:is(
    .filter-trigger-btn.is-icon,
    .profile-page .profile-reviews-filter.is-icon,
    .profile-page .profile-reviews-quick-pill.is-icon
) {
    width: 42px;
    min-width: 42px;
    padding: 0;
}

:is(
    .filter-switch-row,
    .catalog-page .catalog-filter-switch-row
) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

:is(
    .filter-switch,
    .catalog-page .catalog-filter-switch
) {
    position: relative;
    width: 54px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:is(
    .filter-switch,
    .catalog-page .catalog-filter-switch
) input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

:is(
    .filter-switch-track,
    .catalog-page .catalog-filter-switch-track,
    .profile-page .profile-toggle-switch
) {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

:is(
    .filter-switch-track,
    .catalog-page .catalog-filter-switch-track,
    .profile-page .profile-toggle-switch
)::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 16, 28, 0.32);
    transition: transform 0.2s ease;
}

:is(
    .filter-switch,
    .catalog-page .catalog-filter-switch
) input:checked + :is(.filter-switch-track, .catalog-page .catalog-filter-switch-track) {
    background: rgba(129, 140, 248, 0.42);
    border-color: rgba(129, 140, 248, 0.72);
}

:is(
    .filter-switch,
    .catalog-page .catalog-filter-switch
) input:checked + :is(.filter-switch-track, .catalog-page .catalog-filter-switch-track)::after {
    transform: translateX(22px);
}