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

.toplist-casinobrobeans__wrapper {
    margin: 16px 0;
}

.toplist-casinobrobeans__offers {
    display: flex;
    flex-direction: column;
    counter-reset: bm-toplist-casinobrobeans-counter;
    gap: 13px;
}

.toplist-casinobrobeans__offer {
    position: relative;
    display: grid;
    align-items: center;
    padding: 22px 86px 25px 43px;
    border: 1px solid #cacecc;
    background: #fff;
    box-shadow: 0 4px 24px 0 #00000026;
    gap: 86px;
    grid-template-areas: 'logo extra cta-btn-w-terms';
    grid-template-columns: auto 532px 145px;
    grid-template-rows: auto;
}

.toplist-casinobrobeans__offer:before {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 14px;
    position: absolute;
    top: 8px;
    left: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 14px;
    padding-top: 3px;
    content: '#' counter(bm-toplist-casinobrobeans-counter);
    counter-increment: bm-toplist-casinobrobeans-counter;
    text-align: center;
    letter-spacing: -0.28px;
    text-transform: capitalize;
    color: #989a99;
}

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

.toplist-casinobrobeans__offer-highlighted {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    position: absolute;
    top: 6px;
    left: 34px;
    padding: 4px 8px;
    letter-spacing: -.02em;
    text-transform: capitalize;
    color: #ffffff;
    background: #a0090e;
}

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

.toplist-casinobrobeans__offer-extra {
    position: relative;
    display: flex;
    gap: 107px;
    grid-area: extra;
}

.toplist-casinobrobeans__offer-extra:after {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    content: '';
    transform: translateX(-50%);
    opacity: 0.4;
    background: #adaaaa;
}

.toplist-casinobrobeans__offer-extra-info {
    width: 228px;
}

.toplist-casinobrobeans__offer-phrase {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    padding: 2.5px 12.36px 2.5px 11.64px;
    text-transform: capitalize;
    color: #d8363b;
    border-radius: 2.26px;
    background: #ffe7e7;
}

.toplist-casinobrobeans__offer-description {
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 32px;
    margin-top: 17px;
    letter-spacing: -0.2px;
    text-transform: capitalize;
    color: #140001;
}

.toplist-casinobrobeans__offer-free-spins {
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    margin-top: 8px;
    text-transform: capitalize;
    color: #8f8f8f;
}

.toplist-casinobrobeans__offer-cta-btn {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 22px;
    width: 145px;
    padding: 10px 28.43px 10px 30px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    border-radius: 8px;
    background-color: #a0090e;
}

.toplist-casinobrobeans__offer-cta-btn-w-terms {
    display: flex;
    flex-direction: column;
    gap: 13px;
    grid-area: cta-btn-w-terms;
}

.toplist-casinobrobeans__offer-cta-btn:hover {
    cursor: pointer;
    text-decoration: none;
    color: #140001;
    background-color: #f8b204;
}

.toplist-casinobrobeans__offer-terms {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    text-align: center;
    text-transform: capitalize;
    color: #8c8383;
}

.toplist-casinobrobeans__offer-facts {
    display: flex;
    flex-direction: column;
    margin: auto 0;
    gap: 7px;
}

.toplist-casinobrobeans__offer-fact {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.toplist-casinobrobeans__offer-fact-head {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    color: #3f3f3f;
    gap: 11.78px;
}

.toplist-casinobrobeans__offer-fact-head:before {
    top: 1px;
    left: 1px;
    display: flex;
    width: 30px;
    height: 31px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='31' viewBox='0 0 31 31' fill='none'%3E%3Cpath d='M23.1138 23.25C27.369 18.9698 27.369 12.0302 23.1138 7.74995C18.8587 3.46972 11.9597 3.46972 7.70461 7.74995C3.44947 12.0302 3.44947 18.9698 7.70461 23.25C11.9597 27.5303 18.8587 27.5303 23.1138 23.25Z' fill='%23F8B204'/%3E%3Cpath d='M23.1138 23.25C27.369 18.9698 27.369 12.0302 23.1138 7.74995C18.8587 3.46972 11.9597 3.46972 7.70461 7.74995C3.44947 12.0302 3.44947 18.9698 7.70461 23.25C11.9597 27.5303 18.8587 27.5303 23.1138 23.25Z' fill='%23F8B204'/%3E%3Cpath d='M28.0201 12.1662C27.4358 9.92409 26.2629 7.8695 24.6284 6.22498C22.1655 3.74751 18.8906 2.3832 15.4077 2.3832C11.9248 2.3832 8.64989 3.74751 6.18695 6.22498C4.5525 7.8695 3.37963 9.92366 2.79532 12.1658L2.35156 12.0487C2.95626 9.72717 4.17074 7.60082 5.86253 5.89863C8.41209 3.33446 11.802 1.92188 15.4077 1.92188C19.0133 1.92188 22.4033 3.33446 24.9529 5.89906C26.6451 7.60125 27.8595 9.72803 28.4642 12.0496L28.0205 12.1666L28.0201 12.1662Z' fill='%23F8B204'/%3E%3Cpath d='M29.0658 11.8672C29.1753 12.3333 28.8883 12.8006 28.425 12.9108C27.9617 13.021 27.4971 12.7322 27.3876 12.2662C27.278 11.8002 27.5651 11.3329 28.0284 11.2227C28.4916 11.1125 28.9562 11.4012 29.0658 11.8672Z' fill='%23F8B204'/%3E%3Cpath d='M1.74988 11.8672C1.64032 12.3333 1.92738 12.8006 2.39067 12.9108C2.85395 13.021 3.31851 12.7322 3.42807 12.2662C3.53763 11.8002 3.25057 11.3329 2.78728 11.2227C2.324 11.1125 1.85944 11.4012 1.74988 11.8672Z' fill='%23F8B204'/%3E%3Cpath d='M15.4082 29.0798C11.8026 29.0798 8.41264 27.6672 5.86307 25.1026C4.20951 23.4393 3.00904 21.3651 2.3916 19.1046L2.83366 18.9824C3.42986 21.166 4.58956 23.1693 6.18708 24.7763C8.65002 27.2537 11.9249 28.6181 15.4078 28.6181C18.8907 28.6181 22.1656 27.2537 24.6286 24.7763C26.2261 23.1693 27.3858 21.1656 27.982 18.9824L28.424 19.1046C27.807 21.3646 26.6065 23.4389 24.9526 25.1022C22.403 27.6668 19.013 29.0794 15.4074 29.0794L15.4082 29.0798Z' fill='%23F8B204'/%3E%3Cpath d='M1.79118 19.2929C1.67653 18.8281 1.95849 18.3578 2.4205 18.2425C2.88252 18.1272 3.35005 18.4108 3.4647 18.8755C3.57936 19.3403 3.29739 19.8106 2.83538 19.9259C2.37337 20.0412 1.90583 19.7576 1.79118 19.2929Z' fill='%23F8B204'/%3E%3Cpath d='M29.0252 19.2929C29.1399 18.8281 28.8579 18.3578 28.3959 18.2425C27.9339 18.1272 27.4664 18.4108 27.3517 18.8755C27.2371 19.3403 27.519 19.8106 27.981 19.9259C28.4431 20.0412 28.9106 19.7576 29.0252 19.2929Z' fill='%23F8B204'/%3E%3Cpath d='M19.9915 10.3809L13.4256 16.9854L10.8264 14.3704L9.01953 16.1884L13.4256 20.6209L21.7988 12.1984L19.9915 10.3809Z' fill='white'/%3E%3C/svg%3E");
}

.toplist-casinobrobeans__offer-fact-body {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    text-transform: capitalize;
    color: #3f3f3f;
}

.toplist-casinobrobeans__show-more-btn {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 223px;
    height: 56px;
    margin: 51px auto auto;
    text-transform: capitalize;
    color: #120a28;
    border: 1px solid #000;
    border-radius: 7px;
    background: #f8b204;
}

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

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

.toplist-casinobrobeans__filter-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 33px;
    gap: 17px;
}

.toplist-casinobrobeans__filter-tag {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: fit-content;
    height: 34px;
    padding: 4px 11px;
    cursor: pointer;
    user-select: none;
    color: #000;
    border: 1px solid #f8b204;
    border-radius: 8px;
    background: #f6f6f6;
    gap: 9px;
}

.toplist-casinobrobeans__filter-tag.filter-tag-active {
    color: #140001;
    background: #f8b204;
}

.toplist-casinobrobeans__filter-tag img {
    width: 23px !important;
    height: 23px !important;
    object-fit: contain;
}

@media (max-width: 991px) {
    .toplist-casinobrobeans__offer {
        position: relative;
        display: grid;
        align-items: center;
        padding: 25px 19px 21px;
        border: 1px solid #cacecc;
        background: #fff;
        box-shadow: 0 4px 24px 0 #00000026;
        gap: 40px 10px;
        grid-template-areas:
            'logo cta-btn-w-terms'
            'extra extra';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .toplist-casinobrobeans__offer-highlighted {
        font-size: 12px;
        top: 8px;
        padding: 2px 6px;
    }

    .toplist-casinobrobeans__offer-extra {
        gap: 20px;
    }

    .toplist-casinobrobeans__offer-extra-info {
        width: 50%;
        padding-right: 8px;
    }

    .toplist-casinobrobeans__offer-phrase,
    .toplist-casinobrobeans__offer-fact-head,
    .toplist-casinobrobeans__offer-fact-body {
        font-size: 12px;
    }

    .toplist-casinobrobeans__offer-fact-body {
        flex-shrink: 0;
    }

    .toplist-casinobrobeans__offer-description {
        font-size: 16px;
    }

    .toplist-casinobrobeans__offer-free-spins {
        font-size: 15px;
    }

    .toplist-casinobrobeans__offer-fact-head:before {
        width: 18px;
        height: 18px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18' fill='none'%3E%3Cpath d='M14.409 13.5C16.8797 11.0147 16.8797 6.9853 14.409 4.50004C11.9383 2.01477 7.93255 2.01477 5.46186 4.50004C2.99117 6.9853 2.99117 11.0147 5.46186 13.5C7.93255 15.9852 11.9383 15.9852 14.409 13.5Z' fill='%23F8B204'/%3E%3Cpath d='M14.409 13.5C16.8797 11.0147 16.8797 6.9853 14.409 4.50004C11.9383 2.01477 7.93255 2.01477 5.46186 4.50004C2.99117 6.9853 2.99117 11.0147 5.46186 13.5C7.93255 15.9852 11.9383 15.9852 14.409 13.5Z' fill='%23F8B204'/%3E%3Cpath d='M17.2586 7.06347C16.9193 5.76162 16.2383 4.56865 15.2893 3.61377C13.8592 2.17527 11.9577 1.38309 9.93536 1.38309C7.91304 1.38309 6.01154 2.17527 4.58146 3.61377C3.63244 4.56865 2.95142 5.76137 2.61215 7.06322L2.35449 6.99526C2.7056 5.64728 3.41077 4.41264 4.39309 3.42429C5.87346 1.93543 7.84179 1.11523 9.93536 1.11523C12.0289 1.11523 13.9973 1.93543 15.4776 3.42454C16.4602 4.41289 17.1654 5.64778 17.5165 6.99576L17.2588 7.06371L17.2586 7.06347Z' fill='%23F8B204'/%3E%3Cpath d='M17.8659 6.88983C17.9295 7.16042 17.7628 7.43175 17.4938 7.49574C17.2248 7.55973 16.9551 7.39207 16.8915 7.12148C16.8279 6.85089 16.9945 6.57956 17.2635 6.51557C17.5325 6.45158 17.8023 6.61924 17.8659 6.88983Z' fill='%23F8B204'/%3E%3Cpath d='M2.00475 6.88983C1.94113 7.16042 2.10781 7.43175 2.37681 7.49574C2.64582 7.55973 2.91556 7.39207 2.97917 7.12148C3.04278 6.85089 2.87611 6.57956 2.60711 6.51557C2.3381 6.45158 2.06836 6.61924 2.00475 6.88983Z' fill='%23F8B204'/%3E%3Cpath d='M9.93489 16.8824C7.84132 16.8824 5.87299 16.0622 4.39262 14.5731C3.4325 13.6074 2.73546 12.403 2.37695 11.0905L2.63363 11.0195C2.9798 12.2874 3.65317 13.4506 4.58075 14.3837C6.01082 15.8222 7.91233 16.6143 9.93465 16.6143C11.957 16.6143 13.8585 15.8222 15.2885 14.3837C16.2161 13.4506 16.8895 12.2872 17.2357 11.0195L17.4923 11.0905C17.1341 12.4027 16.437 13.6071 15.4767 14.5729C13.9963 16.062 12.028 16.8822 9.9344 16.8822L9.93489 16.8824Z' fill='%23F8B204'/%3E%3Cpath d='M2.02851 11.201C1.96194 10.9311 2.12566 10.6581 2.39392 10.5911C2.66218 10.5241 2.93365 10.6888 3.00022 10.9587C3.06679 11.2285 2.90307 11.5016 2.63481 11.5685C2.36655 11.6355 2.09508 11.4708 2.02851 11.201Z' fill='%23F8B204'/%3E%3Cpath d='M17.841 11.201C17.9076 10.9311 17.7439 10.6581 17.4756 10.5911C17.2074 10.5241 16.9359 10.6888 16.8693 10.9587C16.8028 11.2285 16.9665 11.5016 17.2347 11.5685C17.503 11.6355 17.7745 11.4708 17.841 11.201Z' fill='%23F8B204'/%3E%3Cpath d='M12.5963 6.02734L8.78394 9.86221L7.27472 8.34384L6.22559 9.39941L8.78394 11.9731L13.6457 7.08266L12.5963 6.02734Z' fill='white'/%3E%3C/svg%3E");
    }

    .toplist-casinobrobeans__offer-fact-head {
        gap: 7px;
    }

    .toplist-casinobrobeans__offer-cta-btn-w-terms {
        margin: auto;
        gap: 8px;
    }

    .toplist-casinobrobeans__filter-wrapper {
        overflow-x: scroll;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100vw;
        margin: 0 -16px 27px;
        padding: 0 16px;
        gap: 12px;
    }

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

    .toplist-casinobrobeans__filter-tag {
        font-size: 11px;
        height: 24px;
        padding: 3px 7px;
        gap: 6px;
    }

    .toplist-casinobrobeans__filter-tag img {
        width: 16px !important;
        height: 16px !important;
    }
}