.toplist-icobench__wrapper {
    margin: 24px 0;
}

.toplist-icobench__offers {
    display: flex;
    flex-direction: column;
    counter-reset: bm-toplist-icobench-counter;
    gap: 8px;
}

.toplist-icobench__filter-tags-json {
    box-sizing: border-box;
}

.toplist-icobench__filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0;
    gap: 8px;
}

.toplist-icobench__filter-tag {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 135%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 39px;
    padding: 14px 24px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: #404040;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
}

.toplist-icobench__filter-tag.filter-tag-active {
    color: #fff;
    border-radius: 5px;
    background: #627fec;
}

.toplist-icobench__offer {
    position: relative;
    display: grid;
    padding: 24px;
    counter-increment: bm-toplist-icobench-counter 1;
    border: 1px solid #757575;
    border-radius: 5px;
    background: #fff;
    column-gap: 24px;
    grid-template-areas: 'logo main rating cta-btn';
    grid-template-columns: 173px auto 160px 245px;
    grid-template-rows: auto;
}

.toplist-icobench__offer.poker {
    grid-template-columns: 173px auto 211px 245px;
}

.toplist-icobench__offer.hidden {
    display: none;
}

.toplist-icobench__offer:before {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    content: counter(bm-toplist-icobench-counter);
    text-align: center;
    letter-spacing: 0.12px;
    color: #fff;
    border-radius: 5px;
    background: #757575;
}

.toplist-icobench__offer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 5px;
    background: #f3f5f9;
    grid-area: logo;
}

.toplist-icobench__offer-main {
    grid-area: main;
}

.toplist-icobench__offer-title {
    margin-bottom: 10px;
}

.toplist-icobench__offer-title p {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    line-height: 125%;
    margin-bottom: 0;
    padding: 6px 0;
    color: #000;
}

.toplist-icobench__offer-key-features {
    margin-bottom: 0 !important;
    list-style-type: none !important;
}

.toplist-icobench__offer-key-features li {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    position: relative;
    padding-left: 20px;
    color: #404040;
}

.toplist-icobench__offer-key-features li:before {
    position: absolute;
    right: auto;
    left: 0;
    display: inline-block;
    width: 12px;
    height: 17px;
    margin-right: 8px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='17' viewBox='0 0 12 17' fill='none'%3E%3Cg clip-path='url(%23clip0_242_15685)'%3E%3Cpath d='M-0.0040884 14.9294C-0.00334835 15.1117 0.0437517 15.2909 0.13278 15.45C0.221809 15.6091 0.349841 15.7429 0.504837 15.8389C0.659834 15.9349 0.8367 15.9899 1.0188 15.9987C1.20091 16.0076 1.38226 15.9699 1.54582 15.8894C3.18572 15.0894 5.49557 13.7495 7.56044 12.5696C8.63038 11.9496 9.64531 11.3696 10.4153 10.9447C10.591 10.8565 10.7388 10.7212 10.842 10.5539C10.9453 10.3866 11 10.1939 11 9.99723C11 9.80062 10.9453 9.60787 10.842 9.44056C10.7388 9.27324 10.591 9.13794 10.4153 9.04979C9.64531 8.62982 8.63038 8.04985 7.55544 7.42489C5.50557 6.24496 3.18072 4.92505 1.55582 4.1101C1.40964 4.03795 1.24886 4.00032 1.08584 4.0001C0.943845 3.99812 0.802861 4.02429 0.671035 4.07711C0.539209 4.12993 0.419156 4.20835 0.317812 4.30783C0.216468 4.40732 0.135842 4.5259 0.0805912 4.65672C0.0253401 4.78755 -0.00344181 4.92803 -0.0040884 5.07004L-0.0040884 14.9294Z' fill='%23757575'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_242_15685'%3E%3Crect width='12' height='17' fill='white' transform='matrix(-1 0 0 -1 12 17)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.toplist-icobench__offer-rakeback-rating-container {
    display: flex;
    flex-direction: row;
    grid-area: rating;
}

.toplist-icobench__offer-rakeback {
    display: flex;
    flex-direction: column;
    margin-right: 48px;
}

.toplist-icobench__offer-rating {
    display: flex;
    flex-direction: column;
    padding: 0 24px;
}

.toplist-icobench__offer.poker .toplist-icobench__offer-rating {
    padding: 0;
}

.toplist-icobench__offer-rating-number,
.toplist-icobench__offer-rakeback-number {
    font-family: Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    display: flex;
    align-items: center;
    letter-spacing: 0.32px;
    color: #404040;
}

.toplist-icobench__offer-rating-number:after {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.75 9.41414 20.7228 6.93419 18.8943 5.10571C17.0658 3.27723 14.5859 2.25 12 2.25ZM16.17 18.21L12 16.0875L7.83 18.21L8.625 13.71L5.25 10.5262L9.915 9.87L12 5.79L14.085 9.8775L18.75 10.5338L15.375 13.7175L16.17 18.21Z' fill='%23627FEC'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.toplist-icobench__offer-rating-text,
.toplist-icobench__offer-rakeback-text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    color: #757575;
}

.toplist-icobench__offer-actions {
    grid-area: cta-btn;
}

.toplist-icobench__offer-cta-btn {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 135%;
    display: block;
    width: 100%;
    padding: 12px 48px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    background: #627fec;
}

.toplist-icobench__offer-cta-btn:hover {
    color: #fff;
    background-color: #525ddc;
}

.toplist-icobench__show-more-btn {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 135%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 245px;
    margin: 8px auto 0;
    padding: 12px 48px;
    text-align: center;
    color: #000;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
}

.toplist-icobench__show-more-btn:hover {
    cursor: pointer;
    border: 1px solid #000;
}

@media (max-width: 991px) {
    .toplist-icobench__filter-wrapper {
        overflow-x: scroll;
        flex-wrap: nowrap;
        width: 100vw;
        margin: 0 -16px 8px;
        padding: 0 16px;
    }

    .toplist-icobench__filter-wrapper::-webkit-scrollbar {
        display: none;
    }

    .toplist-icobench__offer,
    .toplist-icobench__offer.poker {
        padding: 16px 8px 8px;
        gap: 16px;
        grid-template-areas:
            'logo'
            'main'
            'rating'
            'cta-btn';
        grid-template-columns: auto;
    }

    .toplist-icobench__offer-logo {
        padding: 10px;
    }

    .toplist-icobench__offer-logo img {
        height: 100px;
        object-fit: contain;
    }

    .toplist-icobench__offer-main {
        padding: 0 16px;
    }

    .toplist-icobench__offer-title {
        margin-bottom: 16px;
    }

    .toplist-icobench__offer-title p {
        font-size: 20px;
        padding: 0;
        text-align: center;
    }

    .toplist-icobench__offer-rakeback {
        align-items: end;
        margin-right: 48px;
        padding-left: 16px;
    }

    .toplist-icobench__offer.poker .toplist-icobench__offer-rakeback-rating-container {
        justify-content: center;
        padding: 0 16px;
    }

    .toplist-icobench__offer-rating {
        align-items: center;
        flex-direction: row;
        padding: 0 16px;
    }

    .toplist-icobench__offer.poker .toplist-icobench__offer-rating {
        flex-direction: column;
    }

    .toplist-icobench__offer-rating-text {
        margin-left: 12px;
    }

    .toplist-icobench__offer.poker .toplist-icobench__offer-rating-text {
        margin-left: 0;
    }
}
