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

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

.toplist-casinolizts {
    counter-reset: offer-counter;
}

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

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

.toplist-casinolizts__filter-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin: 50px 0;
    gap: 62px;
}

.toplist-casinolizts__filter-tag {
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    line-height: 25px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 23px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    text-transform: capitalize;
    color: #fff;
}

.toplist-casinolizts__filter-tag.filter-tag-active {
    text-decoration: underline;
    color: #16e116;
}

.toplist-casinolizts__filter-tag img {
    width: 20px !important;
    height: 20px !important;
    margin-right: 7px;
}

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

.toplist-casinolizts__offer:before {
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 800;
    font-style: normal;
    line-height: 15px;
    position: absolute;
    z-index: 2;
    top: 83px;
    left: 21px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    width: 32px;
    height: 33px;
    content: counter(bm-toplist-casinolizts-counter);
    counter-increment: bm-toplist-casinolizts-counter;
    text-transform: capitalize;
    color: #000;
    border-radius: 170px;
    background: #16e116;
}

.toplist-casinolizts__offer {
    position: relative;
}

.toplist-casinolizts__offer-top-rated {
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 800;
    font-style: normal;
    line-height: 21px;
    position: absolute;
    z-index: 1;
    top: 83px;
    left: 30px;
    display: block;
    padding: 6px 14px 6px 24px;
    text-align: center;
    text-decoration: none;
    color: #333;
    border-radius: 11px;
    background-color: #16e116;
}

.toplist-casinolizts__offer-inner {
    position: relative;
    display: grid;
    align-items: center;
    padding: 23px 38px 33px 21px;
    border: 2px solid #e9e9e9;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 4px 24px 0 #00000026;
    gap: 58px 16px;
    grid-template-areas:
        'facts facts facts'
        'main payments cta-btn-w-rating';
    grid-template-columns: 454px auto 204px;
    grid-template-rows: auto;
}

.toplist-casinolizts__offer-facts {
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% + 55px);
    margin: -21px -38px -35px -19px;
    padding: 19px;
    text-transform: capitalize;
    color: #fff;
    border-radius: 15px 14px 0 0;
    background: #030813;
    gap: 42px;
    grid-area: facts;
}

.toplist-casinolizts__offer-fact {
    position: relative;
    display: flex;
    gap: 3px;
}

.toplist-casinolizts__offer-fact:before {
    flex-shrink: 0;
    width: 18px;
    height: 19px;
    margin-top: -2px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'%3E%3Cpath d='M2.88209 9.2368C2.57813 9.23766 2.28063 9.32585 2.024 9.49117C1.76737 9.65648 1.5621 9.89216 1.43193 10.1709C1.30176 10.4497 1.25203 10.7602 1.28847 11.0665C1.32491 11.3728 1.44604 11.6623 1.63785 11.9016L5.72682 16.9855C5.87261 17.1693 6.05949 17.315 6.27194 17.4108C6.48439 17.5065 6.71627 17.5493 6.94832 17.5358C7.44464 17.5088 7.89272 17.2393 8.1784 16.7963L16.6722 2.91237C16.6736 2.91007 16.6751 2.90777 16.6766 2.9055C16.7562 2.7813 16.7304 2.53517 16.5659 2.38055C16.5207 2.33809 16.4674 2.30547 16.4094 2.2847C16.3513 2.26393 16.2896 2.25544 16.2282 2.25976C16.1668 2.26409 16.1068 2.28113 16.0521 2.30985C15.9974 2.33856 15.9491 2.37833 15.9101 2.42672C15.9071 2.43052 15.904 2.43427 15.9007 2.43796L7.3346 12.2612C7.302 12.2985 7.26241 12.329 7.21813 12.3507C7.17385 12.3724 7.12576 12.385 7.07665 12.3877C7.02753 12.3904 6.97839 12.3832 6.93205 12.3664C6.88572 12.3497 6.84313 12.3237 6.80675 12.2901L3.96382 9.66436C3.66855 9.38964 3.28264 9.23711 2.88209 9.2368Z' fill='%2316E116'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.toplist-casinolizts__offer-fact-head {
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    text-transform: capitalize;
    color: #fff;
}

.toplist-casinolizts__offer-fact-body {
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    text-transform: capitalize;
    color: #fff;
}

.toplist-casinolizts__offer-welcome-bonus {
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 46px;
    color: #232323b3;
}

.toplist-casinolizts__offer-main {
    display: flex;
    margin-left: 50px;
    gap: 57px;
    grid-area: main;
}

.toplist-casinolizts__offer-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.toplist-casinolizts__offer-logo img {
    width: 129px;
    height: 96px;
    object-fit: contain;
}

.toplist-casinolizts__offer-info {
    display: flex;
    align-self: center;
    flex-direction: column;
}

.toplist-casinolizts__offer-description {
    font-family: Roboto, sans-serif;
    font-size: 25px;
    font-weight: 700;
    font-style: normal;
    line-height: 28px;
    width: 218px;
    letter-spacing: -0.509px;
    text-transform: capitalize;
    color: #1e1d1d;
}

.toplist-casinolizts__offer-payments-wrapper {
    display: flex;
    flex-direction: column;
    width: 317px;
    padding: 0 25px 13px;
    border-radius: 15px;
    background: #dfe6e9;
}

.toplist-casinolizts__offer-payments-title {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: capitalize;
    color: #5f5f5f;
}

.toplist-casinolizts__offer-payments {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    gap: 10px;
}

.toplist-casinolizts__offer-payments-hidden-counter {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    text-align: center;
    text-transform: capitalize;
    color: #525050;
}

.toplist-casinolizts__offer-payment {
    position: relative;
    width: 44px;
    height: 29px;
    padding: 2px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
}

.toplist-casinolizts__offer-payment-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.toplist-casinolizts__offer-payment-methods {
    width: 317px;
    margin-top: 7px;
    padding: 11px 21px 13px;
    border-radius: 15px;
    background: #dfe6e9;
    grid-area: payments;
}

.toplist-casinolizts__offer-payment-methods span,
.toplist-casinolizts__offer-payments-hidden-counter {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    position: relative;
    text-transform: capitalize;
    color: #525050;
}

.toplist-casinolizts__offer-payment-tooltip,
.toplist-casinolizts__offer-payments-tooltip {
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    position: absolute;
    z-index: 10;
    top: 28px;
    left: 50%;
    flex-direction: column;
    width: max-content;
    padding: 8px;
    transform: translateX(-50%);
    color: #fff;
    background: #0e081de6;
    filter: drop-shadow(0 1px 4px #0000000a) drop-shadow(0 8px 32px #0000001a);
}

.toplist-casinolizts__offer-payments-tooltip {
    position: absolute;
    top: 29px;
    width: max-content;
}

.toplist-casinolizts__offer-payment-tooltip:before,
.toplist-casinolizts__offer-payments-tooltip:before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    content: '';
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #0e081de5;
    border-top-width: 0;
}

.toplist-casinolizts__offer-payment:hover .toplist-casinolizts__offer-payment-tooltip,
.toplist-casinolizts__offer-payments-hidden-counter:hover .toplist-casinolizts__offer-payments-tooltip {
    display: flex !important;
}

.toplist-casinolizts__offer-payments-hidden-counter:hover {
    cursor: pointer;
}

.toplist-casinolizts__offer-payment-in-tooltip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.toplist-casinolizts__offer-payment-in-tooltip-image-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
}

.toplist-casinolizts__offer-cta-btn-w-rating {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 6px;
    grid-area: cta-btn-w-rating;
}

.toplist-casinolizts__offer-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toplist-casinolizts__offer-rating:before {
    width: 21px;
    height: 21px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M20.6717 7.85815C20.5036 7.31079 20.0574 6.91286 19.5199 6.82979L14.0748 5.99031L11.6416 0.774021C11.1599 -0.257356 9.56758 -0.257356 9.0858 0.774021L6.65267 5.99031L1.22043 6.82979C0.684427 6.91286 0.238302 7.31218 0.0701298 7.85978C-0.098042 8.40575 0.0417003 9.00624 0.430748 9.40835L4.37065 13.4828L3.44122 19.2314C3.35003 19.7985 3.56959 20.3732 4.0085 20.712C4.44894 21.0491 5.03197 21.0932 5.51089 20.8254L10.3632 18.1107L15.2297 20.8254C15.4378 20.9419 15.6659 20.9995 15.8925 20.9995C16.1875 20.9995 16.4825 20.9011 16.732 20.7122C17.1712 20.3718 17.3905 19.7987 17.2993 19.2316L16.3714 13.483L20.3113 9.40858C20.7004 9.00763 20.8399 8.40575 20.6717 7.85815Z' fill='url(%23paint0_linear_6074_177912)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6074_177912' x1='10.3709' y1='0.000488281' x2='10.3709' y2='20.9995' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFDE3E'/%3E%3Cstop offset='1' stop-color='%23F6A524'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-position: center;
    background-size: contain;
}

.toplist-casinolizts__offer-rating-number {
    font-size: 18px;
}

.toplist-casinolizts__offer-rating-number,
.toplist-casinolizts__offer-rating-slash {
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 39px;
    text-transform: capitalize;
    color: #260b37;
}

.toplist-casinolizts__offer-rating-slash {
    font-size: 28px;
}

.toplist-casinolizts__offer-cta-btn {
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: 800;
    font-style: normal;
    line-height: 39px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    width: 204px;
    height: 69px;
    margin-top: 17px;
    text-transform: capitalize;
    color: #000;
    border-radius: 8px;
    background: #16e116;
}

.toplist-casinolizts__offer-cta-btn:hover {
    text-decoration: none;
    color: #000;
    background: #33d6f5;
}

.toplist-casinolizts__offer-rating-text {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    margin-left: 3px;
    text-transform: capitalize;
    color: #9a9999;
}

.toplist-casinolizts__show-more-btn {
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: 800;
    font-style: normal;
    line-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 204px;
    height: 69px;
    margin: 33px auto;
    text-transform: capitalize;
    color: #000;
    border-radius: 8px;
    background: #16e116;
}

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

@media (max-width: 991px) {
    .toplist-casinolizts__offers {
        gap: 14px;
    }

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

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

    .toplist-casinolizts__filter-tag {
        font-size: 13.043px;
        line-height: 16.304px;
    }

    .toplist-casinolizts__filter-tag img {
        width: 13px !important;
        height: 13px !important;
        margin-right: 4.5px;
    }

    .toplist-casinolizts__offer-inner {
        padding: 10px 11px;
        gap: 16px;
        grid-template-areas:
            'facts'
            'main'
            'payments'
            'cta-btn-w-rating';
        grid-template-columns: 1fr;
    }

    .toplist-casinolizts__offer:before {
        font-size: 11px;
        top: 55px;
        left: 12px;
        width: 21px;
        height: 22px;
    }

    .toplist-casinolizts__offer-top-rated {
        font-size: 12px;
        line-height: 14px;
        top: 55px;
        left: 14px;
        padding: 4px 14px 4px 24px;
    }

    .toplist-casinolizts__offer-logo img {
        width: 100px;
        height: 72.5px;
    }

    .toplist-casinolizts__offer-welcome-bonus {
        font-size: 14px;
    }

    .toplist-casinolizts__offer-description {
        font-size: 20px;
        width: 160px;
        margin-top: -12px;
    }

    .toplist-casinolizts__offer-main {
        margin-top: 57.5px;
        margin-left: 22px;
        gap: 11px;
    }

    .toplist-casinolizts__offer-payment-methods {
        width: unset;
    }

    .toplist-casinolizts__offer-facts {
        width: calc(100% + 22px);
        height: 43px;
        margin: -15px -11px -37px;
        padding: 0 18px;
        border-radius: 17px 17px 0 0;
        gap: 13px;
    }

    .toplist-casinolizts__offer-fact {
        gap: 4px;
    }

    .toplist-casinolizts__offer-fact:before {
        width: 12px;
        height: 13px;
        background-position: center;
        background-size: contain;
    }

    .toplist-casinolizts__offer-fact-head,
    .toplist-casinolizts__offer-fact-body {
        font-size: 11px;
    }

    .toplist-casinolizts__offer-cta-btn {
        width: 219px;
        height: 47px;
    }

    .toplist-casinolizts__offer-rating-number,
    .toplist-casinolizts__offer-rating-slash {
        font-size: 16px;
    }

    .toplist-casinolizts__offer-cta-btn-w-rating {
        gap: 8px;
    }

    .toplist-casinolizts__offer-rating:before {
        width: 16px;
        height: 16px;
    }

    .toplist-casinolizts__offer-rating-number {
        line-height: 27px;
    }

    .toplist-casinolizts__offer-rating-slash {
        line-height: 27px;
    }
}