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

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

.toplist-esi__offers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toplist-esi__offer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.toplist-esi__offer-inner {
    display: grid;
    align-items: center;
    border: 0.5px solid #d9d9d9;
    background: #f2f2f2;
    gap: 24px;
    grid-template-areas: 'logo main extra';
    grid-template-columns: 230px auto 230px;
    grid-template-rows: 1fr;
}

.toplist-esi__offer-logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    padding: 24px 30px;
    background: #fff;
    gap: 6px;
    grid-area: logo;
}

.toplist-esi__offer-logo img {
    width: 170px;
    height: 60px;
    object-fit: contain;
}

.toplist-esi__offer-ribbon {
    font-family: proxima-nova, sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 120%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 20px;
    padding: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #61a229;
    background: #eaffe8;
    gap: 8px;
}

.toplist-esi__offer-ribbon:before {
    position: absolute;
    top: 0;
    left: -6px;
    width: 7px;
    height: 20px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='20' viewBox='0 0 6 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 20L-1.90735e-06 20L6 0L6 20Z' fill='%23EAFFE8'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.toplist-esi__offer-ribbon:after {
    position: absolute;
    top: 0;
    right: -6px;
    width: 7px;
    height: 20px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='20' viewBox='0 0 7 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H7L0 20V0Z' fill='%23EAFFE8'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.toplist-esi__offer-rating-wrapper {
    display: flex;
    align-items: center;
}

.toplist-esi__offer-rating-score {
    font-family: proxima-nova, sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 120%;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='22' viewBox='0 0 33 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.22414 0.5H32.5L24.7759 22H0.5L8.22414 0.5Z' fill='%239B3D7F'/%3E%3C/svg%3E%0A");
}

.toplist-esi__offer-rating-score:after {
    position: absolute;
    top: 0;
    right: -1px;
    width: 3px;
    height: 3.5px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='3' height='4' viewBox='0 0 3 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4L1.5 0.5L3 4H0Z' fill='%236F2759'/%3E%3C/svg%3E%0A");
}

.toplist-esi__offer-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 16px;
    margin-left: -8px;
    background-image: url("data:image/svg+xml,%3Csvg width='65' height='16' viewBox='0 0 65 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 0H64.5L59.25 16H0.25L5.5 0Z' fill='%23FFE8F7'/%3E%3C/svg%3E%0A");
}

.toplist-esi__offer-rating img {
    height: 8px !important;
}

.toplist-esi__offer-main {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: main;
}

.toplist-esi__offer-title,
.toplist-esi__offer-title p {
    font-family: proxima-nova, sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 22px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: #464646;
}

.toplist-esi__offer-title p {
    margin: 0;
    padding: 0;
}

.toplist-esi__offer-title span {
    font-size: 33px;
    font-weight: 700;
    line-height: 40px;
    color: #9b3d7f !important;
}

.toplist-esi__offer-extra {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 24px 30px;
    background: #fff;
    gap: 5px;
    grid-area: extra;
}

.toplist-esi__offer-coupon-code {
    font-family: proxima-nova, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    padding: 0 16px 0 40px;
    cursor: pointer;
    text-transform: uppercase;
    color: #464646;
    border: 1px solid rgb(0 0 0 / 3%);
    border-radius: 2px;
    background: #faf8f8;
    gap: 8px;
}

.toplist-esi__offer-coupon-code:before {
    position: absolute;
    top: 8px;
    left: 16px;
    width: 16px;
    height: 16px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3528_1182)'%3E%3Cpath d='M16 3.35235C15.2607 2.29651 13.7908 2.01826 12.7347 2.75757L7.30479 6.5596L5.33032 5.17692C6.06551 3.9076 5.71969 2.26507 4.49563 1.40807C3.20301 0.50326 1.42204 0.81726 0.516849 2.10963C-0.387932 3.40207 -0.0741819 5.18342 1.21847 6.0886C2.10547 6.70967 3.22276 6.75623 4.12876 6.30679L6.54713 8.00007L4.12897 9.69317C3.22297 9.24395 2.10576 9.29051 1.21869 9.91135C-0.0739006 10.8165 -0.387682 12.5977 0.517068 13.8901C1.42226 15.1827 3.20341 15.4967 4.49582 14.5919C5.71972 13.7349 6.06547 12.0924 5.33051 10.823L7.30497 9.44035L12.7347 13.2422C13.7907 13.9817 15.2607 13.7033 16 12.6474L9.36216 8.00004L16 3.35235ZM2.86335 5.2356C2.04544 5.2356 1.38235 4.57251 1.38235 3.7546C1.38235 2.9367 2.04547 2.2736 2.86335 2.2736C3.68144 2.2736 4.34435 2.9367 4.34435 3.7546C4.34435 4.57251 3.68144 5.2356 2.86335 5.2356ZM2.86335 13.7267C2.04544 13.7267 1.38235 13.0636 1.38235 12.2457C1.38235 11.4278 2.04544 10.7647 2.86335 10.7647C3.68144 10.7647 4.34435 11.4278 4.34435 12.2457C4.34435 13.0635 3.68144 13.7267 2.86335 13.7267Z' fill='%23464646'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3528_1182'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.toplist-esi__offer-cta-btn {
    font-family: proxima-nova, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 48px 0 8px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    border-radius: 2px;
    background: #61a229;
    gap: 8px;
}

.toplist-esi__offer-cta-btn:after {
    position: absolute;
    top: 12px;
    right: 8px;
    width: 32px;
    height: 24px;
    padding-left: 8px;
    content: '';
    border-left: 0.5px solid #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18.5L15 12.5L9 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right center;
}

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

.toplist-esi__show-more-btn {
    font-family: proxima-nova, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 38px;
    margin: 16px auto 0;
    padding: 0 8px;
    text-align: center;
    text-transform: capitalize;
    color: #61a229;
    border: 2px solid #61a229;
    border-radius: 2px;
    background: #fff;
}

.toplist-esi__show-more-btn:hover {
    cursor: pointer;
    color: #fff;
    background: #61a229;
}

.toplist-esi__offer-terms,
.toplist-esi__offer-terms * {
    font-family: proxima-nova, sans-serif;
    font-size: 11px !important;
    font-weight: 400;
    font-style: normal;
    line-height: 13px !important;
    vertical-align: baseline;
    color: #5a6068;
}

.toplist-esi__show-only-on-mobile {
    display: none;
}

@media screen and (width <= 991px) {
    .toplist-esi__show-only-on-mobile {
        display: block;
    }

    .toplist-esi__show-only-on-desktop {
        display: none;
    }

    .toplist-esi__offer-inner {
        align-items: flex-start;
        gap: 16px;
        grid-template-areas:
            'logo'
            'main'
            'extra';
        grid-template-columns: auto;
    }

    .toplist-esi__offer-logo-wrapper {
        padding: 45px 0 16px;
    }

    .toplist-esi__offer-ribbon {
        position: absolute;
        top: 16px;
        left: 16px;
    }

    .toplist-esi__offer-rating-wrapper {
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .toplist-esi__offer-main {
        padding: 0 16px;
    }

    .toplist-esi__offer-title span {
        font-size: 31px;
        line-height: 38px;
    }

    .toplist-esi__offer-extra {
        padding: 0 16px 16px;
        background: #f2f2f2;
        gap: 8px;
    }

    .toplist-esi__offer-cta-btn {
        padding: 0 8px;
    }
}

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

.toplist-esi__filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    gap: 8px;
}

.toplist-esi__filter-tag {
    font-family: proxima-nova, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    width: fit-content;
    height: 29px;
    padding: 7px 10px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: #9f367b;
    border: 1px solid #9f367b;
    border-radius: 2px;
}

.toplist-esi__filter-tag.filter-tag-active {
    color: #fff;
    border-color: #151515;
    background: #151515;
}

@media screen and (width <= 991px) {
    .toplist-esi__filter-wrapper {
        overflow-x: scroll;
        flex-wrap: nowrap;
        width: 100vw;
        margin: 0 -16px 8px;
        padding: 0 16px;
    }

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