@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

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

.toplist-coinspeaker__offers {
    display: flex;
    flex-direction: column;
    counter-reset: toplist-coinspeaker-counter 0;
    gap: 8px;
}

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

.toplist-coinspeaker__filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 8px 0;
    border-bottom: 1px solid #ebebeb;
    gap: 24px;
}

.toplist-coinspeaker__filter-tag {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 20px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    margin-bottom: -1px;
    padding: 12px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: #142025;
}

.toplist-coinspeaker__filter-tag.filter-tag-active {
    padding-bottom: 8px;
    border-bottom: 4px solid #f60f2b;
}

.toplist-coinspeaker__offer {
    display: grid;
    align-items: center;
    counter-increment: toplist-coinspeaker-counter 1;
    grid-template-areas: 'main actions';
    grid-template-columns: auto 200px;
    grid-template-rows: auto;
}

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

.toplist-coinspeaker__offer-main {
    position: relative;
    display: grid;
    height: 100%;
    padding: 16px 16px 12px;
    border: 1px solid #ebebeb;
    border-right: none;
    gap: 8px;
    grid-area: main;
    grid-template-areas:
        'logo title'
        'logo key-features';
    grid-template-columns: 125px auto;
    grid-template-rows: auto 1fr;
}

.toplist-coinspeaker__offer-main:before {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    font-style: normal;
    line-height: 12px;
    position: absolute;
    top: -1px;
    left: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    content: counter(toplist-coinspeaker-counter, decimal-leading-zero);
    color: #fff;
    background: #142025;
}

.toplist-coinspeaker__offer:first-child .toplist-coinspeaker__offer-main:before {
    background: #670ff6;
}

.toplist-coinspeaker__offer-ribbon {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: 16px;
    position: absolute;
    top: -1px;
    left: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    color: #670ff6;
    background: #670ff619;
}

.toplist-coinspeaker__offer-logo {
    display: flex;
    justify-content: center;
    grid-area: logo;
}

.toplist-coinspeaker__offer-logo img {
    width: 125px;
    height: 60px;
    object-fit: contain;
}

.toplist-coinspeaker__offer-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    font-style: normal;
    line-height: 24px;
    text-transform: capitalize;
    color: #142025;
    grid-area: title;
}

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

.toplist-coinspeaker__offer-key-features li {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    position: relative;
    display: flex;
    padding-bottom: 0 !important;
    padding-left: 16px;
    color: #8f9698;
}

.toplist-coinspeaker__offer-key-features li:not(:last-child) {
    margin-bottom: 4px;
}

.toplist-coinspeaker__offer-key-features li:before {
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-flex;
    width: 12px;
    height: 12px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.67489 3.02676C3.56285 2.9136 3.5 2.76081 3.5 2.60157C3.5 2.44234 3.56285 2.28954 3.67489 2.17639C3.7299 2.12052 3.79548 2.07616 3.8678 2.04588C3.94013 2.01559 4.01775 2 4.09616 2C4.17456 2 4.25219 2.01559 4.32451 2.04588C4.39683 2.07616 4.46241 2.12052 4.51743 2.17639L7.8476 5.57438C7.95948 5.68779 8.02221 5.84069 8.02221 6C8.02221 6.15931 7.95948 6.31221 7.8476 6.42562L4.51743 9.82361C4.46241 9.87948 4.39683 9.92384 4.32451 9.95412C4.25219 9.98441 4.17456 10 4.09616 10C4.01775 10 3.94013 9.98441 3.8678 9.95412C3.79548 9.92384 3.7299 9.87948 3.67489 9.82361C3.56285 9.71046 3.5 9.55766 3.5 9.39843C3.5 9.23919 3.56285 9.0864 3.67489 8.97324L6.40597 5.9987L3.67489 3.02676Z' fill='%23670FF6'/%3E%3C/svg%3E");
}

.toplist-coinspeaker__offer-actions {
    height: 100%;
    padding: 16px;
    background: #f7f7f7;
    grid-area: actions;
}

.toplist-coinspeaker__offer-cta-btn {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    color: #fff;
    background: #f60f2b;
}

.toplist-coinspeaker__offer-cta-btn:hover {
    text-decoration: none;
    color: #fff;
    background: #bb081e;
}

.toplist-coinspeaker__offer-rating {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin-top: 8px;
    color: #142025;
}

.toplist-coinspeaker__offer-rating:before {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_3171_993)'%3E%3Cpath d='M13.7281 4.87196H8.48015C8.90415 3.71996 9.37615 2.05596 9.00815 1.19996C8.88015 0.903964 8.66415 0.695964 8.44015 0.615964C7.92815 0.359964 7.35215 0.327964 6.81615 0.511964C6.28015 0.695964 5.84815 1.07996 5.62415 1.57596L4.19215 4.87196H3.72015C3.66415 4.39996 3.28015 4.02396 2.79215 4.02396H1.35215C0.824147 4.02396 0.400146 4.44796 0.400146 4.97596V14.648C0.400146 15.176 0.824147 15.6 1.35215 15.6H2.79215C3.32015 15.6 3.74415 15.176 3.74415 14.648V14.488H9.48015C10.4001 14.488 11.1601 13.8 11.2481 12.872L11.5441 8.61596H13.7281C14.7601 8.61596 15.6001 7.77596 15.6001 6.74396C15.6001 5.71196 14.7601 4.87196 13.7281 4.87196ZM13.7281 7.44796H11.0001C10.6961 7.44796 10.4401 7.68796 10.4161 7.99196L10.0801 12.776C10.0481 13.088 9.79215 13.32 9.48015 13.32H3.74415V6.03996H4.57615C4.80815 6.03996 5.01615 5.90396 5.11215 5.68796L6.68815 2.04796C6.77615 1.86396 6.96815 1.69596 7.20015 1.61596C7.36815 1.55996 7.62415 1.51996 7.92815 1.65596C8.12015 1.94396 7.83215 3.45596 7.08815 5.23196C7.00815 5.41596 7.02415 5.61596 7.13615 5.78396C7.24815 5.94396 7.42415 6.04796 7.62415 6.04796H13.7281C14.1201 6.04796 14.4321 6.35996 14.4321 6.75196C14.4321 7.13596 14.1121 7.44796 13.7281 7.44796Z' fill='%23670FF6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3171_993'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.toplist-coinspeaker__show-more-btn {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 48px;
    margin: 8px auto 0;
    padding: 8px 24px;
    color: #fff;
    background: #8f9698;
}

.toplist-coinspeaker__show-more-btn:hover {
    cursor: pointer;
}

@media screen and (width <= 991px) {
    .toplist-coinspeaker__filter-wrapper {
        overflow-x: scroll;
        flex-wrap: nowrap;
        justify-content: unset;
        width: 100vw;
        margin: 0 -16px 8px;
        padding: 0 16px;
    }

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

    .toplist-coinspeaker__offer {
        grid-template-areas:
            'main'
            'actions';
        grid-template-columns: auto;
    }

    .toplist-coinspeaker__offer-main {
        border-right: 1px solid #ebebeb;
        border-bottom: none;
        grid-template-areas:
            'logo'
            'title'
            'key-features';
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .toplist-coinspeaker__offer-logo {
        justify-content: unset;
    }

    .toplist-coinspeaker__offer-key-features {
        margin-top: 4px;
    }

    .toplist-coinspeaker__offer-actions {
        display: flex;
        gap: 2.6%;
    }

    .toplist-coinspeaker__offer-cta-btn,
    .toplist-coinspeaker__offer-rating {
        width: 48.7%;
    }

    .toplist-coinspeaker__offer-rating {
        margin-top: 0;
    }
}