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

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

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

.toplist-casinoitalia__filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 38px 0;
    gap: 17px;
}

.toplist-casinoitalia__filter-tag {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    line-height: 25px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 45px;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
    text-transform: capitalize;
    color: #fff;
    border: 2px solid #4e4e4e;
    border-radius: 70px;
    background: linear-gradient(90deg, #9dff5128 0%, #2220 54.54%, #9dff5133 94.7%);
}

.toplist-casinoitalia__filter-tag.filter-tag-active {
    margin-right: 4px;
    padding: 10px 16px;
    color: #0a0a0a;
    border: 2px solid #4e4e4e;
    background: #fff;
}

.toplist-casinoitalia__filter-tag img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    object-fit: contain;
}

.toplist-casinoitalia__offers {
    display: flex;
    flex-direction: column;
    counter-reset: bm-toplist-casinoitalia-counter;
    gap: 23px;
}

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

.toplist-casinoitalia__offer-inner {
    display: grid;
    align-items: center;
    padding: 19px;
    border-bottom: 8px solid #9dff51;
    border-radius: 30px;
    background: #fff;
    gap: 0 73px;
    grid-template-areas:
        'logo main extra'
        'terms terms extra';
    grid-template-columns: 233px 400px auto;
    grid-template-rows: auto;
}

.toplist-casinoitalia__offer-logo-wrapper {
    position: relative;
    display: flex;
    width: 233px;
    height: 93px;
    border-radius: 20px;
    background: #e0e0e0;
    grid-area: logo;
}

.toplist-casinoitalia__offer-logo-wrapper:before {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    position: absolute;
    top: 5px;
    left: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    content: counter(bm-toplist-casinoitalia-counter);
    counter-increment: bm-toplist-casinoitalia-counter;
    text-align: center;
    letter-spacing: -0.28px;
    text-transform: capitalize;
    color: #333;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Ccircle cx='11.5' cy='11.5' r='11.5' fill='%239DFF51'/%3E%3C/svg%3E");
}

.toplist-casinoitalia__offer-logo {
    margin: auto;
}

.toplist-casinoitalia__offer-logo img {
    width: 120px;
    height: 93px;
    object-fit: contain;
}

.toplist-casinoitalia__offer-main {
    display: flex;
    gap: 35px;
    grid-area: main;
}

.toplist-casinoitalia__offer-main-info {
    display: flex;
    flex-direction: column;
}

.toplist-casinoitalia__offer-facts {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    gap: 13px;
}

.toplist-casinoitalia__offer-fact {
    display: flex;
    gap: 8px;
}

.toplist-casinoitalia__offer-fact-head {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    color: #a4a2a2;
    gap: 6px;
}

.toplist-casinoitalia__offer-fact-head img {
    width: 20px;
    height: 20px;
}

.toplist-casinoitalia__filter-tag.filter-tag-active img {
    margin-right: 6px;
}

.toplist-casinoitalia__offer-fact-body {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    text-transform: capitalize;
    color: #463c3c;
}

.toplist-casinoitalia__offer-welcome-text {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    text-transform: capitalize;
    color: #626262;
}

.toplist-casinoitalia__offer-description {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    width: 200px;
    margin-top: 7px;
    text-transform: capitalize;
    color: #333;
}

.toplist-casinoitalia__offer-free-spins {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    margin-top: 6px;
    text-transform: capitalize;
    color: #626262;
}

.toplist-casinoitalia__offer-cta-btn {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 221px;
    height: 60px;
    margin: auto;
    text-align: center;
    text-transform: uppercase;
    color: #333;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='221' height='60' viewBox='0 0 221 60' fill='none'%3E%3Crect width='221' height='60' rx='30' fill='%239DFF51'/%3E%3C/svg%3E");
}

.toplist-casinoitalia__offer-cta-btn:hover {
    text-decoration: none;
    color: #333;
    background-image: url("data:image/svg+xml,%3Csvg width='221' height='60' viewBox='0 0 221 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='221' height='60' rx='30' fill='white'/%3E%3C/svg%3E%0A");
}

.toplist-casinoitalia__offer-extra {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    width: 301px;
    min-height: 168px;
    margin-top: -15px;
    margin-bottom: -14px;
    margin-left: 19px;
    border-radius: 30px;
    background: #333;
    grid-area: extra;
}

.toplist-casinoitalia__offer-star-rating:before {
    width: 16px;
    height: 17px;
    margin-right: 7px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='18' viewBox='0 0 17 18' fill='none'%3E%3Cpath d='M16.6683 6.40477C16.5327 5.95861 16.173 5.63426 15.7395 5.56655L11.3489 4.88229L9.38703 0.630505C8.99856 -0.210168 7.71466 -0.210168 7.32619 0.630505L5.36427 4.88229L0.984077 5.56655C0.551877 5.63426 0.192151 5.95975 0.056548 6.40609C-0.0790546 6.85111 0.0336246 7.34057 0.347327 7.66833L3.5242 10.9894L2.77477 15.6751C2.70124 16.1373 2.87828 16.6071 3.23219 16.8819C3.58627 17.1567 4.05744 17.1926 4.44362 16.9744L8.35617 14.7616L12.2802 16.9744C12.448 17.0693 12.632 17.1162 12.8147 17.1162C13.0525 17.1162 13.2904 17.036 13.4916 16.8821C13.8457 16.6046 14.0226 16.1375 13.949 15.6752L13.2008 10.9896L16.3777 7.66852C16.6914 7.34171 16.8039 6.85111 16.6683 6.40477Z' fill='url(%23paint0_linear_6028_33446)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6028_33446' x1='8.36244' y1='0' x2='8.36244' y2='17.1162' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFDE3E'/%3E%3Cstop offset='1' stop-color='%23F6A524'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

.toplist-casinoitalia__offer-star-rating {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -34px auto auto 73px;
    text-transform: capitalize;
    color: #fff;
}

.toplist-casinoitalia__offer-star-rating-slash {
    font-family: Inter, sans-serif;
    font-size: 28px;
    font-weight: 700;
    font-style: normal;
    line-height: 39px;
    text-transform: capitalize;
    color: #fff;
}

.toplist-casinoitalia__offer-star-rating-max {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 39px;
    text-transform: capitalize;
    color: #fff;
}

.toplist-casinoitalia__offer-star-rating-excellent {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    margin-left: 7px;
    text-transform: capitalize;
    color: #aaa6a6;
}

.toplist-casinoitalia__offer-terms {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 17px;
    width: 110%;
    margin-top: 14px;
    margin-left: 4px;
    text-transform: capitalize;
    color: #868383;
    grid-area: terms;
}

.toplist-casinoitalia__show-more-btn {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 20px;
    margin-top: 52px;
    text-align: center;
    text-transform: capitalize;
    color: #fff;
    text-decoration-line: underline;
    text-decoration-skip-ink: auto;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.toplist-casinoitalia__show-more-btn:hover {
    cursor: pointer;
    color: #fff;
}

@media (max-width: 991px) {
    .toplist-casinoitalia__filter-wrapper {
        overflow-x: scroll;
        flex-wrap: nowrap;
        justify-content: unset;
        width: 100vw;
        margin: 0 -16px 28px;
        padding: 0 22px;
        gap: 10px;
    }

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

    .toplist-casinoitalia__filter-tag {
        font-size: 10.666px;
        line-height: 14.814px;
        height: 26.665px;
        padding: 6px 12px;
        border: 1.185px solid #4e4e4e;
        border-radius: 41.478px;
    }

    .toplist-casinoitalia__filter-tag.filter-tag-active {
        margin-right: 2px;
        padding: 6px 9px;
        border: 1.185px solid #4e4e4e;
    }

    .toplist-casinoitalia__filter-tag img {
        width: 12px !important;
        height: 12px !important;
        margin-right: 6px;
    }

    .toplist-casinoitalia__filter-tag.filter-tag-active img {
        margin-right: 4px;
    }

    .toplist-casinoitalia__offer-inner {
        display: grid;
        align-items: center;
        padding: 17px 15px;
        border-bottom: 8px solid #9dff51;
        border-radius: 30px;
        background: #fff;
        gap: 22px;
        grid-template-areas:
            'logo'
            'main'
            'extra'
            'terms';
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .toplist-casinoitalia__offer-logo-wrapper {
        width: auto;
        margin-bottom: 3px;
    }

    .toplist-casinoitalia__offer-logo-wrapper:before {
        top: 6px;
        left: 6px;
    }

    .toplist-casinoitalia__offer-main {
        gap: 30px;
    }

    .toplist-casinoitalia__offer-welcome-text {
        font-size: 12px;
    }

    .toplist-casinoitalia__offer-description {
        font-size: 15px;
        width: 147px;
    }

    .toplist-casinoitalia__offer-free-spins {
        font-size: 14px;
    }

    .toplist-casinoitalia__offer-fact-head,
    .toplist-casinoitalia__offer-fact-body {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .toplist-casinoitalia__offer-facts {
        gap: 7px;
    }

    .toplist-casinoitalia__offer-extra {
        width: auto;
        min-height: 145px;
        margin: auto -7px;
    }

    .toplist-casinoitalia__offer-terms {
        width: auto;
        margin-top: -9px;
        margin-left: unset;
    }

    .toplist-casinoitalia__offer-cta-btn {
        margin: 25px auto;
    }

    .toplist-casinoitalia__offer-star-rating {
        margin: -20px auto 20px;
    }
}