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

.toplist-escapist__wrapper {
    margin-bottom: 24px;
}

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

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

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

.toplist-escapist__filter-tag {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 48px;
    padding: 16px;
    cursor: pointer;
    user-select: none;
    color: #0c1434;
    border: 1px solid #0c1434;
    border-radius: 4px;
    background: #fff;
}

body.theme-dark .toplist-escapist__filter-tag {
    color: #fff;
    border-color: #94a0ff;
    background: #040629;
}

.toplist-escapist__filter-tag.filter-tag-active {
    color: #fff;
    border: 2px solid #0c1434;
    background: #0c1434;
}

body.theme-dark .toplist-escapist__filter-tag.filter-tag-active {
    color: #0c1434;
    border-color: #f3f2ff;
    background: #f3f2ff;
}

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

.toplist-escapist__offer-inner {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 238px;
    padding-right: 24px;
    counter-increment: toplist-escapist-counter 1;
    border: 1px solid #e0dfed;
    border-radius: 16px 4px 4px 16px;
    background: #fff;
    gap: 24px;
    grid-template-areas: 'logo main actions';
    grid-template-columns: 236px auto 214px;
    grid-template-rows: 1fr;
}

body.theme-dark .toplist-escapist__offer-inner {
    border: 1px solid #292b4b;
    background: #0c1434;
}

.toplist-escapist__offer-inner:before {
    font-family: Rubik, sans-serif;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    content: counter(toplist-escapist-counter);
    text-align: center;
    color: #fff;
    border-radius: 15px 0 4px;
    background: #4856a9;
}

body.theme-dark .toplist-escapist__offer-inner:before {
    color: #101019;
    background: #94a0ff;
}

.toplist-escapist__offer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    grid-area: logo;
}

.toplist-escapist__offer-logo img {
    width: 236px;
    height: 113px;
    object-fit: contain;
}

.toplist-escapist__offer-main {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    gap: 8px;
    grid-area: main;
}

.toplist-escapist__offer-rating-wrapper {
    display: flex;
    align-items: center;
    margin-top: 2px;
    gap: 12px;
}

.toplist-escapist__offer-rating-value {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    color: #1f843f;
}

body.theme-dark .toplist-escapist__offer-rating-value {
    color: #b2edc5;
}

.toplist-escapist__offer-rating-value span {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    position: relative;
    top: 1px;
}

.toplist-escapist__offer-rating-value:after {
    width: 16px;
    height: 16px;
    margin-left: 4px;
    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='M12.0002 14.0001H4.66683V5.33341L9.3335 0.666748L10.1668 1.50008C10.2446 1.57786 10.3085 1.68341 10.3585 1.81675C10.4085 1.95008 10.4335 2.07786 10.4335 2.20008V2.43341L9.70016 5.33341H14.0002C14.3557 5.33341 14.6668 5.46675 14.9335 5.73341C15.2002 6.00008 15.3335 6.31119 15.3335 6.66675V8.00008C15.3335 8.07786 15.3224 8.16119 15.3002 8.25008C15.2779 8.33897 15.2557 8.4223 15.2335 8.50008L13.2335 13.2001C13.1335 13.4223 12.9668 13.6112 12.7335 13.7667C12.5002 13.9223 12.2557 14.0001 12.0002 14.0001ZM6.00016 12.6667H12.0002L14.0002 8.00008V6.66675H8.00016L8.90016 3.00008L6.00016 5.90008V12.6667ZM4.66683 5.33341V6.66675H2.66683V12.6667H4.66683V14.0001H1.3335V5.33341H4.66683Z' fill='%231F843F'/%3E%3C/svg%3E");
}

body.theme-dark .toplist-escapist__offer-rating-value:after {
    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='M12.0002 14.0001H4.66683V5.33341L9.3335 0.666748L10.1668 1.50008C10.2446 1.57786 10.3085 1.68341 10.3585 1.81675C10.4085 1.95008 10.4335 2.07786 10.4335 2.20008V2.43341L9.70016 5.33341H14.0002C14.3557 5.33341 14.6668 5.46675 14.9335 5.73341C15.2002 6.00008 15.3335 6.31119 15.3335 6.66675V8.00008C15.3335 8.07786 15.3224 8.16119 15.3002 8.25008C15.2779 8.33897 15.2557 8.4223 15.2335 8.50008L13.2335 13.2001C13.1335 13.4223 12.9668 13.6112 12.7335 13.7667C12.5002 13.9223 12.2557 14.0001 12.0002 14.0001ZM6.00016 12.6667H12.0002L14.0002 8.00008V6.66675H8.00016L8.90016 3.00008L6.00016 5.90008V12.6667ZM4.66683 5.33341V6.66675H2.66683V12.6667H4.66683V14.0001H1.3335V5.33341H4.66683Z' fill='%23B2EDC5'/%3E%3C/svg%3E");
}

.toplist-escapist__offer-label-highlight {
    font-family: Rubik, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 22px;
    color: #1f843f;
}

body.theme-dark .toplist-escapist__offer-label-highlight {
    color: #9ce8b4;
}

.toplist-escapist__offer-title {
    font-family: Rubik, sans-serif;
    font-size: 23px;
    font-weight: 700;
    font-style: normal;
    line-height: 33px;
    color: #0c1434;
}

body.theme-dark .toplist-escapist__offer-title {
    color: #fff;
}

.toplist-escapist__offer-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0 24px 8px;
    gap: 16px;
    grid-area: actions;
}

.toplist-escapist__offer-coupon-code-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    cursor: pointer;
    border: 1px solid #f3f2ff;
    border-radius: 4px;
    background: #f3f2ff;
    gap: 12px;
}

.toplist-escapist__offer-coupon-code-wrapper:hover {
    border-color: #4856a9;
}

body.theme-dark .toplist-escapist__offer-coupon-code-wrapper {
    border-color: #292b4b;
    background: #292b4b;
}

.toplist-escapist__offer-coupon-code {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 24px;
    width: 100%;
    text-align: center;
    color: #4856a9;
}

body.theme-dark .toplist-escapist__offer-coupon-code {
    color: #e0dfed;
}

.toplist-escapist__offer-coupon-code-btn {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 22px;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 12px;
    text-align: center;
    text-transform: uppercase;
    color: #3a4483;
    border-left: 0.5px solid #94a0ff;
}

body.theme-dark .toplist-escapist__offer-coupon-code-btn {
    color: #94a0ff;
    border-left-color: #3a4483;
}

.toplist-escapist__offer-coupon-code-wrapper:hover .toplist-escapist__offer-coupon-code-btn {
    color: #0c1434;
}

body.theme-dark .toplist-escapist__offer-coupon-code-wrapper:hover .toplist-escapist__offer-coupon-code-btn {
    color: #f3f2ff;
}

.toplist-escapist__offer-cta-btn {
    font-family: Rubik, sans-serif;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    color: #fff;
    border-radius: 4px;
    background: #f17300;
}

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

.toplist-escapist__offer-terms,
.toplist-escapist__offer-terms p {
    font-family: Rubik, sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    margin: 4px 0 0;
    color: #5a5b76;
}

body.theme-dark .toplist-escapist__offer-terms,
body.theme-dark .toplist-escapist__offer-terms p {
    color: #8f8ea3;
}

.toplist-escapist__show-more-btn {
    font-family: Rubik, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 200px;
    height: 48px;
    margin: 16px auto 0;
    padding: 16px;
    text-align: center;
    color: #0c1434;
    border: 2px solid #94a0ff;
    border-radius: 4px;
    background: #fff;
}

.toplist-escapist__show-more-btn:hover {
    cursor: pointer;
    border-color: #e0dfed;
    background: #e0dfed;
}

body.theme-dark .toplist-escapist__show-more-btn {
    color: #e0dfed;
    border-color: #94a0ff;
    background: #040629;
}

body.theme-dark .toplist-escapist__show-more-btn:hover {
    border-color: #292b4b;
    background: #292b4b;
}

@media (max-width: 991px) {
    .toplist-escapist__filter-wrapper {
        overflow-x: scroll;
        flex-wrap: nowrap;
        width: 100vw;
        margin: 0 -16px 16px;
        padding: 0 16px;
    }

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

    .toplist-escapist__offer-inner {
        align-items: unset;
        min-height: unset;
        padding: 16px;
        border-radius: 4px;
        gap: 16px 12px;
        grid-template-areas:
            'logo main'
            'actions actions';
        grid-template-columns: 72px auto;
    }

    .toplist-escapist__offer-inner:before {
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
        width: 32px;
        height: 32px;
        border-radius: 3px 0 4px;
    }

    .toplist-escapist__offer-logo {
        height: 72px;
        border-radius: 10.667px;
    }

    .toplist-escapist__offer-logo img {
        width: 72px;
        height: 34.56px;
        object-fit: contain;
    }

    .toplist-escapist__offer-main {
        padding: 0;
    }

    .toplist-escapist__offer-title {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }

    .toplist-escapist__offer-actions {
        padding: 0;
    }

    .toplist-escapist__offer-terms,
    .toplist-escapist__offer-terms p {
        font-size: 10px;
        line-height: 12px;
    }
}