@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;800;900&family=Noto+Sans:wght@600&&family=Roboto+Condensed:wght@700&display=swap');

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

.toplist-valuewalk__offers {
    display: flex;
    flex-direction: column;
    counter-reset: bm-toplist-valuewalk-counter;
    gap: 16px;
}

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

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

.toplist-valuewalk__filter-tag {
    font-family: Roboto, sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: #060606;
    border: 1px solid #cee8ea;
    border-radius: 4px;
    background: #f2fafb;
}

.toplist-valuewalk__filter-tag.filter-tag-active {
    background: #c0dde0;
}

.toplist-valuewalk__offer {
    position: relative;
    display: grid;
    counter-increment: bm-toplist-valuewalk-counter 1;
    border: 1px solid #cee8ea;
    border-radius: 4px;
    background: #fff;
    gap: 16px 25px;
    grid-template-areas:
        'logo main actions'
        'logo terms terms';
    grid-template-columns: 144px auto 258px;
    grid-template-rows: auto 1fr;
}

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

.toplist-valuewalk__offer:before {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: 150%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 23px;
    content: counter(bm-toplist-valuewalk-counter);
    color: #fff;
    border: 1px solid #00afaf;
    border-radius: 4px 0 0;
    background: #4cd1d1;
}

.toplist-valuewalk__offer-label-highlight {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    position: absolute;
    left: 28px;
    padding: 4px 24px 4px 7px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fff;
    background: #102039;
    clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 0);
}

.toplist-valuewalk__offer-logo-wrapper {
    padding: 0 16px;
    background: #f2fafb;
    grid-area: logo;
}

.toplist-valuewalk__offer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    padding-top: 23px;
}

.toplist-valuewalk__offer-logo img {
    width: 92px;
    height: 90px;
    object-fit: contain;
}

.toplist-valuewalk__offer-rating {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 112px;
    margin-bottom: 9px;
}

.toplist-valuewalk__offer-rating-number {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 900;
    font-style: normal;
    line-height: 135%;
    display: flex;
    align-items: center;
    color: #102039;
}

.toplist-valuewalk__offer-rating-number img {
    position: relative;
    top: -1px;
    width: fit-content;
    height: 14px;
    margin-left: 8px;
}

.toplist-valuewalk__offer-review-link {
    font-family: Roboto, sans-serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
    margin-top: 9px;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    color: #51607d;
}

.toplist-valuewalk__offer-review-link:hover {
    text-decoration: unset;
    color: #51607d;
}

.toplist-valuewalk__offer-main {
    padding-top: 20px;
    grid-area: main;
}

.toplist-valuewalk__offer-title {
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 900;
    font-style: normal;
    line-height: 135%;
    margin-bottom: 14px;
    color: #050810;
}

.toplist-valuewalk__offer-key-features {
    margin-bottom: 0 !important;
    list-style-type: none !important;
}

.toplist-valuewalk__offer-key-features li {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    display: flex;
    list-style-type: none;
    color: #304c5b;
}

.toplist-valuewalk__offer-key-features li:before {
    position: relative;
    top: 5px;
    display: inline-block;
    width: 11px;
    min-width: 11px;
    height: 11px;
    margin-right: 8px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5.5' cy='5.5' r='5.5' fill='%2300AFAF'/%3E%3Cg clip-path='url(%23clip0_6343_4467)'%3E%3Cpath d='M8.1765 4.66667H6.33333V2.8235C6.33333 2.37067 5.953 2 5.5 2C5.047 2 4.66667 2.37067 4.66667 2.8235V4.66667H2.8235C2.37067 4.66667 2 5.047 2 5.5C2 5.953 2.37067 6.33333 2.8235 6.33333H4.66667V8.1765C4.66667 8.62933 5.047 9 5.5 9C5.953 9 6.33333 8.62933 6.33333 8.1765V6.33333H8.1765C8.62933 6.33333 9 5.953 9 5.5C9 5.047 8.62933 4.66667 8.1765 4.66667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6343_4467'%3E%3Crect width='7' height='7' fill='white' transform='translate(2 2)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.toplist-valuewalk__offer-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 0 5px;
    grid-area: actions;
}

.toplist-valuewalk__offer-cta-btn {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 800;
    font-style: normal;
    line-height: 135%;
    position: relative;
    width: 204px;
    margin-bottom: 20px;
    padding: 12px 8px;
    text-align: center;
    color: #fff;
    border-radius: 6px;
    background: linear-gradient(180deg, #00afaf 0%, #07a0aa 100%);
}

.toplist-valuewalk__offer-cta-btn:hover {
    text-decoration: unset;
    color: #fff;
    background: #008a8b;
}

.toplist-valuewalk__offer-cta-btn:after {
    position: absolute;
    top: 15px;
    right: 8px;
    left: auto;
    display: inline-block;
    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.33337 8H12' stroke='white' stroke-width='1.33333' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M8 3.33334L12.6667 8.00001L8 12.6667' stroke='white' stroke-width='1.33333' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.toplist-valuewalk__offer-coupon-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 204px;
    height: 37px;
    padding: 0 10px;
    cursor: pointer;
    border-radius: 4px;
    background-image: url('../images/vw/coupon-pattern.svg');
}

.toplist-valuewalk__offer-coupon-code {
    font-family: Roboto, sans-serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 2px 2px 1px 3px;
    text-align: center;
    color: #068e8e;
    border-radius: inherit;
    background: #fff;
}

.toplist-valuewalk__offer-coupon-code:before {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    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 fill-rule='evenodd' clip-rule='evenodd' d='M9.14906 2.85488H9.55931C10.1033 2.85488 10.6252 3.07108 11.01 3.45549C11.3944 3.84032 11.6106 4.36216 11.6106 4.90616V9.00873C11.6106 9.55273 11.3944 10.0746 11.01 10.4594C10.6252 10.8438 10.1033 11.06 9.55931 11.06H5.45675C4.91275 11.06 4.3909 10.8438 4.00608 10.4594C3.62167 10.0746 3.40547 9.55273 3.40547 9.00873V8.59847H2.99521C2.45121 8.59847 1.92937 8.38226 1.54454 7.99785C1.16013 7.61303 0.943929 7.09119 0.943929 6.54719C0.943929 5.32585 0.943929 3.66596 0.943929 2.44462C0.943929 1.90062 1.16013 1.37878 1.54454 0.993957C1.92937 0.609546 2.45121 0.393341 2.99521 0.393341C4.21654 0.393341 5.87644 0.393341 7.09777 0.393341C7.64178 0.393341 8.16362 0.609546 8.54844 0.993957C8.93285 1.37878 9.14906 1.90062 9.14906 2.44462V2.85488ZM4.22598 4.90616V9.00873C4.22598 9.33529 4.35562 9.64832 4.5866 9.87888C4.81716 10.1099 5.13019 10.2395 5.45675 10.2395C6.67808 10.2395 8.33798 10.2395 9.55931 10.2395C9.88588 10.2395 10.1989 10.1099 10.4295 9.87888C10.6604 9.64832 10.7901 9.33529 10.7901 9.00873C10.7901 7.78739 10.7901 6.12749 10.7901 4.90616C10.7901 4.5796 10.6604 4.26657 10.4295 4.03601C10.1989 3.80503 9.88588 3.67539 9.55931 3.67539H5.45675C5.13019 3.67539 4.81716 3.80503 4.5866 4.03601C4.35562 4.26657 4.22598 4.5796 4.22598 4.90616ZM3.40547 7.77796H2.99521C2.66865 7.77796 2.35562 7.64832 2.12506 7.41734C1.89408 7.18678 1.76444 6.87375 1.76444 6.54719C1.76444 5.32585 1.76444 3.66596 1.76444 2.44462C1.76444 2.11806 1.89408 1.80503 2.12506 1.57447C2.35562 1.3435 2.66865 1.21385 2.99521 1.21385C4.21654 1.21385 5.87644 1.21385 7.09777 1.21385C7.42434 1.21385 7.73737 1.3435 7.96793 1.57447C8.1989 1.80503 8.32854 2.11806 8.32854 2.44462V2.85488H5.45675C4.91275 2.85488 4.3909 3.07108 4.00608 3.45549C3.62167 3.84032 3.40547 4.36216 3.40547 4.90616V7.77796Z' fill='%23068E8E' stroke='%23068E8E' stroke-width='0.333333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
}

.toplist-valuewalk__offer-terms,
.toplist-valuewalk__offer-terms p {
    font-family: Roboto, sans-serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
    margin-bottom: 16px;
    padding-right: 27px;
    color: #51607d;
    grid-area: terms;
}

.toplist-valuewalk__offer-terms p {
    margin-bottom: 0;
}

.toplist-valuewalk__show-more-btn {
    font-family: Roboto, sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    margin: 16px auto 0;
    padding: 12px 16px;
    color: #068e8e;
    border: 1px solid #068e8e;
    border-radius: 6px;
}

.toplist-valuewalk__show-more-btn:hover {
    cursor: pointer;
    background-color: #ebf5f5;
}

@media (max-width: 991px) {
    .toplist-valuewalk__wrapper {
        margin: 32px 0;
    }

    .toplist-valuewalk__offers {
        gap: 15px;
    }

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

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

    .toplist-valuewalk__offer {
        gap: 8px;
        grid-template-areas:
            'logo'
            'main'
            'actions'
            'terms';
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .toplist-valuewalk__offer-logo-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .toplist-valuewalk__offer-logo {
        margin-bottom: 0;
    }

    .toplist-valuewalk__offer-logo img {
        height: 87px;
    }

    .toplist-valuewalk__offer-rating {
        margin-top: 23px;
        margin-bottom: 0;
    }

    .toplist-valuewalk__offer-review-link {
        margin-top: 2px;
    }

    .toplist-valuewalk__offer-main {
        padding: 8px 16px 0;
        grid-area: main;
    }

    .toplist-valuewalk__offer-title {
        font-size: 18px;
        margin-bottom: 11px;
    }

    .toplist-valuewalk__offer-actions {
        margin-top: 2px;
        padding: 0 16px;
    }

    .toplist-valuewalk__offer-cta-btn {
        width: 100%;
        margin-bottom: 8px;
    }

    .toplist-valuewalk__offer-coupon-code-wrapper {
        width: 100%;
        background-image: url('../images/vw/coupon-pattern-mobile.svg');
    }

    .toplist-valuewalk__offer-terms,
    .toplist-valuewalk__offer-terms p {
        margin-bottom: 10px;
        padding: 0 16px;
    }
}