.platform-switch__wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-family: "Nunito", sans-serif;
    font-weight: 400;
}

.platform-switch__item {
    display: flex;
    align-items: center;
    max-width: 130px;
    gap: 10px;
    height: 46px!important;
    border-radius: 21.85px;
    background: #262626;
    color: #858585;
    height: 43.7px;
    padding: 0 10px;
    flex: 1;
    cursor: pointer;
    border: 0.95px solid transparent;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.platform-switch__item.platform-switch__item--active {
    background: #373636;
    color: #fff;
    border-color: #858585;
}

body.platform-switch--leaving .drag-block,
body.platform-switch--leaving .search-page-platform-switch + .inner_wrapper {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.platform-switch__loader {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 18, 18, 0.88);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.platform-switch__loader--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.platform-switch__loader-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(133, 133, 133, 0.35);
    border-top-color: var(--theme-base-color);
    animation: platformSwitchSpin 0.75s linear infinite;
}

@keyframes platformSwitchSpin {
    to {
        transform: rotate(360deg);
    }
}

body.platform-switch--entering .drag-block,
body.platform-switch--entering .search-page-platform-switch + .inner_wrapper {
    animation: platformSwitchFadeIn 0.25s ease forwards;
}

@keyframes platformSwitchFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.ps-switch,
.xb-switch,
.st-switch,
.ap-switch,
.nt-switch,
.rb-switch,
.vl-switch {
    transition: opacity 0.25s ease;
}

.platform-switch__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Apple: путь вплотную к левому краю viewBox + скругление кнопки — без отступа левый бок обрезается */
.platform-switch__item[data-platform="ap"] .platform-switch__item-icon {
    padding-left: 3px;
    margin-left: 1px;
    overflow: visible;
}

.platform-switch__item[data-platform="ap"] .platform-switch__apple-svg {
    display: block;
    overflow: visible;
}

.platform-switch__item-icon--nintendo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    line-height: 0;
    flex-shrink: 0;
}

.platform-switch__nintendo-img {
    display: block;
    width: 26px;
    height: 26px;
    max-height: 26px;
    object-fit: contain;
    object-position: center;
    margin: 0;
}

.platform-switch__item-icon--roblox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    line-height: 0;
    flex-shrink: 0;
}

.platform-switch__roblox-img {
    display: block;
    width: 26px;
    height: 26px;
    max-height: 26px;
    object-fit: contain;
    object-position: center;
    margin: 0;
}

.platform-switch__item-icon--valorant {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    line-height: 0;
    flex-shrink: 0;
}

.platform-switch__valorant-img {
    display: block;
    width: 26px;
    height: 26px;
    max-height: 26px;
    object-fit: contain;
    object-position: center;
    margin: 0;
    opacity: 0.55;
    transition: opacity 0.25s ease;
}

.platform-switch__item--active .platform-switch__valorant-img {
    opacity: 1;
}

.platform-switch__item-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: inherit;
}


@media (max-width: 768px) {
    .maxwidth-theme:has(.platform-switch__wrapper) {
        padding-left: 0;
        padding-right: 0;
    }

    .platform-switch__wrapper {
        --platform-switch-gap: 6.65px;
        --platform-switch-visible: 3.35;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: var(--platform-switch-gap);
        padding-left: var(--theme-page-width-padding);
        padding-right: var(--theme-page-width-padding);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .platform-switch__wrapper::-webkit-scrollbar {
        display: none;
    }
    
    .platform-switch__item {
        flex: 0 0 calc((100% - 3 * var(--platform-switch-gap)) / var(--platform-switch-visible));
        flex-shrink: 0;
        max-width: none;
        /* min-width: calc((100% - 3 * var(--platform-switch-gap)) / var(--platform-switch-visible)); */
        gap: 8px;
    }

    .platform-switch__item-title {
        font-size: 11.4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}