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

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

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

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

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

.toplist-insidersports__filter-tag {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 26px;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    color: #060606;
    border: 1px solid #000;
    border-radius: 100px;
}

.toplist-insidersports__filter-tag.filter-tag-active {
    color: #fff;
    background: #000;
}

.toplist-insidersports__offer {
    display: grid;
    padding: 24px;
    counter-increment: toplist-insidersports-counter 1;
    border-radius: 4px;
    background: #fff;
    box-shadow:
        0 1px 2px 0 #0000000a,
        0 4px 16px 0 #0000000f;
    gap: 0 32px;
    grid-template-areas:
        'logo description actions'
        'logo key-features actions';
    grid-template-columns: 150px auto 282px;
    grid-template-rows: auto 1fr;
}

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

.toplist-insidersports__offer-logo-wrapper {
    grid-area: logo;
}

.toplist-insidersports__offer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.toplist-insidersports__offer-logo img {
    width: 150px;
    height: 72px;
    border-radius: 4px;
    object-fit: contain;
}

.toplist-insidersports__offer-facts {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    gap: 3px;
}

.toplist-insidersports__offer-fact {
    display: flex;
}

.toplist-insidersports__offer-fact-body {
    font-family: Barlow, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 100%;
    text-align: center;
    color: #060606;
}

.toplist-insidersports__offer-fact-body:before {
    position: relative;
    top: 3px;
    display: inline-flex;
    width: 14px;
    height: 15px;
    margin-right: 4px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M9.84963 12.3498C9.74869 12.3502 9.64913 12.3264 9.55924 12.2804L6.33972 10.5949L3.12019 12.2804C3.01565 12.3353 2.89778 12.3599 2.77998 12.3512C2.66218 12.3425 2.54919 12.301 2.45383 12.2312C2.35848 12.1615 2.28459 12.0665 2.24058 11.9569C2.19656 11.8473 2.18418 11.7275 2.20483 11.6112L2.83611 8.05713L0.235241 5.532C0.154098 5.45102 0.0965336 5.34947 0.0687298 5.23825C0.0409254 5.12704 0.043931 5.01035 0.0774234 4.90072C0.114012 4.78852 0.181318 4.68883 0.271703 4.61295C0.362081 4.53707 0.471924 4.48805 0.588757 4.47145L4.18705 3.94748L5.77157 0.709018C5.82326 0.602285 5.90397 0.512274 6.00445 0.449291C6.10494 0.38631 6.22113 0.352905 6.33972 0.352905C6.45831 0.352905 6.5745 0.38631 6.67499 0.449291C6.77547 0.512274 6.85621 0.602285 6.90786 0.709018L8.51131 3.94117L12.1096 4.46513C12.2265 4.48174 12.3363 4.53077 12.4267 4.60664C12.5171 4.68252 12.5843 4.78221 12.621 4.8944C12.6545 5.00404 12.6575 5.12073 12.6296 5.23194C12.6019 5.34316 12.5443 5.44471 12.4631 5.52568L9.86225 8.05078L10.4935 11.6049C10.5161 11.7232 10.5043 11.8456 10.4596 11.9574C10.4148 12.0693 10.339 12.166 10.241 12.2362C10.1267 12.3163 9.98909 12.3563 9.84963 12.3498Z' fill='%23F13240'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.toplist-insidersports__offer-fact-body.payout:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'%3E%3Cg clip-path='url(%23clip0_8920_49)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.7563 1.2427C7.21736 0.538599 8.31183 0.865038 8.31183 1.70664V5.83814H11.0816C11.7957 5.83814 12.2244 6.63109 11.8332 7.2285L7.10419 14.4509C6.63604 15.1659 5.46741 14.8797 5.46741 13.964V9.97966H2.65945C1.96174 9.97966 1.54298 9.20488 1.92517 8.62117L6.7563 1.2427Z' fill='%23F13240'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8920_49'%3E%3Crect width='14' height='14' fill='white' transform='translate(0 0.852905)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.toplist-insidersports__offer-fact-body span {
    font-size: 16px;
    font-weight: 800;
    line-height: 135%;
}

.toplist-insidersports__offer-description-wrapper {
    margin-bottom: 12px;
    grid-area: description;
}

.toplist-insidersports__offer-description {
    font-family: Barlow, sans-serif;
    font-size: 22px;
    font-weight: 800;
    font-style: normal;
    line-height: 135%;
    color: #010000;
}

.toplist-insidersports__offer-description:before {
    content: counters(toplist-insidersports-counter, '. ') '. ';
}

.toplist-insidersports__offer-description-wrapper .toplist-insidersports__offer-facts {
    display: none;
}

.toplist-insidersports__offer-key-features {
    list-style-type: none !important;
    grid-area: key-features;
}

.toplist-insidersports__offer-key-features li {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    position: relative;
    display: flex;
    padding-bottom: 0 !important;
    padding-left: 20px;
    color: #2f3030;
}

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

.toplist-insidersports__offer-key-features li:before {
    position: absolute;
    top: 5px;
    left: 0;
    display: inline-flex;
    width: 13px;
    height: 12px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M4.59163 10.9993L4.66234 11.07L4.73305 10.9993L13.0707 2.66162L13.1414 2.59091L13.0707 2.5202L11.9798 1.42929L11.9091 1.35858L11.8384 1.42929L4.66234 8.60533L2.16162 6.10461L2.09091 6.0339L2.0202 6.10461L0.929289 7.19552L0.858579 7.26623L0.929289 7.33694L4.59163 10.9993Z' fill='%230058C5' stroke='%230058C5' stroke-width='0.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px;
}

.toplist-insidersports__offer-actions {
    display: flex;
    flex-direction: column;
    padding-left: 32px;
    border-left: 2px dashed #e0e0e0;
    gap: 16px;
    grid-area: actions;
}

.toplist-insidersports__offer-title {
    font-family: Barlow, sans-serif;
    font-size: 20px;
    font-weight: 800;
    font-style: normal;
    line-height: 135%;
    text-align: center;
    color: #0058c5;
}

.toplist-insidersports__offer-cta-btn {
    font-family: Barlow, sans-serif;
    font-size: 18px;
    font-weight: 800;
    font-style: normal;
    line-height: 135%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 52px;
    padding: 12px 8px;
    letter-spacing: 0.18px;
    color: #fff;
    border-radius: 52px;
    background: #0058c5;
}

.toplist-insidersports__offer-cta-btn:hover {
    text-decoration: unset;
    color: #fff;
    background: #0b4790;
}

.toplist-insidersports__offer-coupon-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 16px;
    border: 1px solid #e0e0e0;
    border-radius: 52px;
    background: #f7f7f7;
    gap: 12px;
}

.toplist-insidersports__offer-coupon-code {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    width: 100%;
    text-align: center;
    color: #2f3030;
}

.toplist-insidersports__offer-coupon-copy-btn {
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    margin-left: auto;
    padding-left: 12px;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.28px;
    text-transform: uppercase;
    color: #0058c5;
    border-left: 0.5px solid #e0e0e0;
}

.toplist-insidersports__show-more-btn {
    font-family: Barlow, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 135%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 46px;
    margin: 16px auto 0;
    letter-spacing: 0.16px;
    color: #000;
    border: 2px solid #000;
    border-radius: 24px;
}

.toplist-insidersports__show-more-btn:hover {
    cursor: pointer;
    color: #fff;
    background: #000;
}

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

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

    .toplist-insidersports__filter-tag {
        height: 34px;
    }

    .toplist-insidersports__offer {
        padding: 16px;
        gap: 8px;
        grid-template-areas:
            'logo'
            'description'
            'actions'
            'key-features';
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .toplist-insidersports__offer-logo {
        width: 100%;
        height: 96px;
        margin-bottom: 8px;
    }

    .toplist-insidersports__offer-facts {
        flex-direction: row;
        margin-top: 4px;
        gap: 16px;
    }

    .toplist-insidersports__offer-logo-wrapper .toplist-insidersports__offer-facts {
        display: none;
    }

    .toplist-insidersports__offer-description-wrapper {
        margin-bottom: 0;
    }

    .toplist-insidersports__offer-description {
        font-size: 20px;
    }

    .toplist-insidersports__offer-description-wrapper .toplist-insidersports__offer-facts {
        display: flex;
    }

    .toplist-insidersports__offer-key-features li {
        font-size: 14px;
    }

    .toplist-insidersports__offer-actions {
        padding: 8px 0;
        border-top: 2px dashed #e0e0e0;
        border-bottom: 2px dashed #e0e0e0;
        border-left: none;
        gap: 8px;
    }

    .toplist-insidersports__offer-title {
        order: 1;
        text-align: left;
    }

    .toplist-insidersports__offer-cta-btn {
        order: 3;
        width: 100%;
        margin-bottom: 12px;
    }

    .toplist-insidersports__offer-coupon-code-wrapper {
        order: 2;
        margin-bottom: 8px;
    }
}