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

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

.toplist-gameshub__offers {
    display: grid;
    counter-reset: toplist-gameshub-counter 0;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
}

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

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

.toplist-gameshub__filter-tag {
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 26px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 40px;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    text-transform: capitalize;
    color: #606060;
    border: 1px solid #dce8f7;
    border-radius: 80px;
    background: #fff;
}

.toplist-gameshub__filter-tag.filter-tag-active {
    color: #181818;
    border-color: #e6e6f2;
    background: #e6e6f2;
}

.toplist-gameshub__offer {
    position: relative;
    display: grid;
    margin-bottom: 0;
    counter-increment: toplist-gameshub-counter 1;
    border: 1px solid #dce8f7;
    border-radius: 4px;
    background: #f6f6fa;
    box-shadow:
        0 0 4px 0 #edf3fb7f,
        0 4px 4px 0 #dce8f749;
}

.toplist-gameshub__offer-first-row {
    margin-bottom: 9px;
    grid-template-areas:
        'logo'
        'main';
    grid-template-columns: auto;
    grid-template-rows: auto 1fr;
}

.toplist-gameshub__offer:not(.toplist-gameshub__offer-first-row) {
    grid-column: 1 / -1;
    grid-template-areas: 'logo main';
    grid-template-columns: 250px auto;
    grid-template-rows: 1fr;
}

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

.toplist-gameshub__offer:before {
    font-family: Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 32px;
    padding: 0 12px;
    content: '#' counter(toplist-gameshub-counter) ' ';
    text-align: center;
    letter-spacing: 0.52px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 4px 0;
    background: #39399a;
}

.toplist-gameshub__offer-label-highlight {
    font-family: Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin-right: 40px;
    padding-right: 12px;
    letter-spacing: 0.52px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 0 0 4px;
    background: #39399a;
}

.toplist-gameshub__offer-label-highlight:before {
    position: relative;
    right: 4px;
    content: '- ';
    color: #fff;
}

.toplist-gameshub__flag-by-location {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.toplist-gameshub__offer-first-row .toplist-gameshub__flag-by-location {
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
}

.toplist-gameshub__flag-by-location:after {
    position: absolute;
    z-index: 2;
    top: -3px;
    right: -5px;
    width: 12px;
    height: 12px;
    content: '';
    border-radius: 50%;
    background-color: white;
    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='M6.03125 0C2.71775 0 0.03125 2.6865 0.03125 6C0.03125 9.3135 2.71775 12 6.03125 12C9.34475 12 12.0312 9.3135 12.0312 6C12.0312 2.6865 9.34475 0 6.03125 0ZM8.81075 4.34025L5.93675 8.733C5.936 8.73375 5.9345 8.7345 5.9345 8.73525C5.9195 8.75775 5.91125 8.78325 5.8925 8.80425C5.86625 8.83275 5.8325 8.84775 5.8025 8.8695C5.795 8.87475 5.7875 8.88075 5.77925 8.886C5.73275 8.91525 5.68475 8.93475 5.63225 8.9475C5.615 8.952 5.59925 8.9565 5.58125 8.9595C5.53948 8.96525 5.49715 8.96575 5.45525 8.961C5.42566 8.95913 5.39629 8.95461 5.3675 8.9475C5.3378 8.93854 5.30894 8.927 5.28125 8.913C5.25725 8.90175 5.23175 8.89875 5.20925 8.8845C5.19275 8.874 5.18375 8.8575 5.1695 8.84475C5.1635 8.8395 5.156 8.838 5.15 8.83275L3.47675 7.2855C3.37757 7.19027 3.31971 7.05992 3.3156 6.92248C3.3115 6.78504 3.36148 6.65148 3.4548 6.5505C3.54812 6.44951 3.67733 6.38917 3.81467 6.38244C3.95201 6.37571 4.0865 6.42313 4.18925 6.5145L5.4005 7.635L7.93175 3.76575C8.00793 3.64919 8.1273 3.56766 8.26359 3.53911C8.39989 3.51056 8.54194 3.53732 8.6585 3.6135C8.77506 3.68968 8.85659 3.80905 8.88514 3.94534C8.91369 4.08163 8.88693 4.22369 8.81075 4.34025Z' fill='%2339980C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.toplist-gameshub__flag-by-location img {
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: translateY(-1px);
    border-radius: 50%;
    object-fit: cover;
}

.toplist-gameshub__offer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 4px 0 0 4px;
    background: #fff;
    grid-area: logo;
}

.toplist-gameshub__offer-first-row .toplist-gameshub__offer-logo {
    padding: 48px 0 32px;
    border-radius: 4px 4px 0 0;
}

.toplist-gameshub__offer-logo img {
    width: 180px;
    height: 86px;
    object-fit: contain;
}

.toplist-gameshub__offer-first-row .toplist-gameshub__offer-logo img {
    width: 217px;
    height: 104px;
}

.toplist-gameshub__offer-main {
    display: grid;
    padding: 24px;
    border-radius: 0 4px 4px 0;
    gap: 32px 16px;
    grid-template-areas:
        'title cta-btn'
        'rating cta-btn';
    grid-template-columns: auto 215px;
    grid-template-rows: 1fr;
}

.toplist-gameshub__offer-first-row .toplist-gameshub__offer-main {
    padding: 16px 16px 24px;
    border-radius: 0 0 4px 4px;
    gap: 8px;
    grid-template-areas:
        'title'
        'cta-btn'
        'rating';
    grid-template-columns: auto;
}

.toplist-gameshub__offer-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #181818;
    gap: 2px;
    grid-area: title;
}

.toplist-gameshub__offer-first-row .toplist-gameshub__offer-title {
    font-size: 14px;
    text-align: center;
}

.toplist-gameshub__offer-title span {
    font-size: 24px;
    line-height: 35px;
}

.toplist-gameshub__offer-rating-wrappper {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-area: rating;
}

.toplist-gameshub__offer-first-row .toplist-gameshub__offer-rating-wrappper {
    justify-content: center;
    margin-top: 16px;
}

.toplist-gameshub__offer-rating {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 26px;
    text-transform: capitalize;
    color: #333;
}

.toplist-gameshub__offer-rating:after {
    position: relative;
    top: 1px;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    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='M9.3341 11.9969C9.23796 11.9973 9.14313 11.9735 9.05751 11.9275L5.99096 10.242L2.92441 11.9275C2.82484 11.9824 2.71256 12.007 2.60041 11.9983C2.48819 11.9896 2.38058 11.9481 2.28973 11.8783C2.19889 11.8086 2.12852 11.7136 2.0866 11.6039C2.04468 11.4944 2.03287 11.3746 2.05259 11.2583L2.65387 7.70423L0.176581 5.17909C0.0992734 5.09811 0.0444359 4.99657 0.0179794 4.88535C-0.00854583 4.77413 -0.00565895 4.65745 0.0262263 4.54781C0.0610664 4.43562 0.125179 4.33593 0.211283 4.26005C0.297387 4.18417 0.401978 4.13515 0.513302 4.11854L3.94062 3.59458L5.44981 0.356113C5.49908 0.249379 5.5759 0.159368 5.67163 0.096386C5.76735 0.0334045 5.87799 0 5.99096 0C6.10394 0 6.21457 0.0334045 6.3103 0.096386C6.40602 0.159368 6.48292 0.249379 6.53212 0.356113L8.05938 3.58827L11.4867 4.11223C11.598 4.12884 11.7026 4.17786 11.7887 4.25374C11.8748 4.32961 11.9389 4.4293 11.9738 4.5415C12.0057 4.65113 12.0085 4.76782 11.982 4.87904C11.9556 4.99026 11.9007 5.0918 11.8234 5.17278L9.34613 7.69788L9.94741 11.252C9.96892 11.3703 9.95765 11.4927 9.91505 11.6045C9.87244 11.7164 9.80022 11.8131 9.7069 11.8833C9.59805 11.9634 9.46693 12.0034 9.3341 11.9969Z' fill='%23FD6634'/%3E%3C/svg%3E");
}

.toplist-gameshub__offer-review-link {
    font-family: Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    text-align: center;
    text-transform: capitalize;
    color: #333;
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
    text-decoration-style: solid;
    text-decoration-thickness: 5%;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.toplist-gameshub__offer-review-link:hover {
    text-decoration: none;
    color: #333;
}

.toplist-gameshub__offer-cta-btn {
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    margin-top: 8px;
    padding: 0 12px;
    text-align: center;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 4px;
    background: #e65d2f;
    gap: 8px;
    grid-area: cta-btn;
}

.toplist-gameshub__offer-first-row .toplist-gameshub__offer-cta-btn {
    width: calc(100% - 16px);
    margin: 0 auto;
}

.toplist-gameshub__offer-cta-btn:after {
    width: 16px;
    height: 16px;
    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%3Cpath d='M3.33398 8H12.6673' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.3335L12.6667 8.00016L8 12.6668' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

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

.toplist-gameshub__show-more-btn {
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 40px;
    margin: 16px auto 0;
    padding: 16px;
    text-align: center;
    letter-spacing: 0.56px;
    text-transform: uppercase;
    color: #181818;
    border: 1px solid #e6e6f2;
    border-radius: 4px;
    background: #fff;
    gap: 8px;
}

.toplist-gameshub__show-more-btn:before {
    width: 16px;
    height: 16px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M3.83398 8H13.1673' stroke='%23181818' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 3.3335V12.6668' stroke='%23181818' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.toplist-gameshub__show-more-btn:hover {
    cursor: pointer;
    border-color: #b2b2d8;
    background: #f6f6fa;
}

@media (max-width: 991px) {
    .toplist-gameshub__offers {
        grid-template-columns: unset;
    }

    .toplist-gameshub__filter-wrapper {
        overflow-x: scroll;
        flex-wrap: nowrap;
        width: 100vw;
        margin: 0 -16px 16px;
        padding: 0 16px;
        gap: 4px;
    }

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

    .toplist-gameshub__filter-tag {
        font-size: 15px;
        line-height: 22px;
    }

    .toplist-gameshub__offer-first-row,
    .toplist-gameshub__offer:not(.toplist-gameshub__offer-first-row) {
        grid-column: unset;
        grid-template-areas:
            'logo'
            'main';
        grid-template-columns: auto;
    }

    .toplist-gameshub__offer:before,
    .toplist-gameshub__offer-label-highlight {
        font-size: 12px;
        letter-spacing: 0.48px;
    }

    .toplist-gameshub__flag-by-location {
        top: 12px;
        right: 12px;
        bottom: auto;
        left: auto;
    }

    .toplist-gameshub__offer-logo,
    .toplist-gameshub__offer-first-row .toplist-gameshub__offer-logo {
        padding: 8px 16px;
        border-radius: 4px 4px 0 0;
    }

    .toplist-gameshub__offer-logo img,
    .toplist-gameshub__offer-first-row .toplist-gameshub__offer-logo img {
        width: 196px;
        height: 94px;
        object-fit: contain;
    }

    .toplist-gameshub__offer-main,
    .toplist-gameshub__offer-first-row .toplist-gameshub__offer-main {
        padding: 16px 24px 24px;
        border-radius: 0 0 4px 4px;
        gap: 12px;
        grid-template-areas:
            'title'
            'cta-btn'
            'rating';
        grid-template-columns: auto;
    }

    .toplist-gameshub__offer-title,
    .toplist-gameshub__offer-first-row .toplist-gameshub__offer-title {
        font-size: 15px;
        line-height: 22px;
        text-align: center;
    }

    .toplist-gameshub__offer-title span {
        line-height: 32px;
        letter-spacing: -0.24px;
    }

    .toplist-gameshub__offer-rating-wrappper,
    .toplist-gameshub__offer-first-row .toplist-gameshub__offer-rating-wrappper {
        justify-content: center;
        margin-top: 4px;
    }

    .toplist-gameshub__offer-rating {
        line-height: 22px;
    }

    .toplist-gameshub__offer-cta-btn,
    .toplist-gameshub__offer-first-row .toplist-gameshub__offer-cta-btn {
        font-size: 15px;
        line-height: 22px;
        width: 100%;
        height: 48px;
        margin-top: 0;
        letter-spacing: 0.3px;
    }
}