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

.toplist-punl__wrapper {
    margin-bottom: 20px;
}

.toplist-punl__offers {
    display: flex;
    flex-direction: column;
    counter-reset: toplist-punl-counter 0;
    gap: 32px;
}

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

.toplist-punl__filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
    gap: 4px;
}

.toplist-punl__filter-tag {
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 16px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 36px;
    padding: 10px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    text-transform: uppercase;
    color: #ff9a1f;
    border: 1px solid #ff9a1f;
    border-radius: 4px;
}

.toplist-punl__filter-tag.filter-tag-active {
    color: #000;
    background: #ff9a1f;
}

.toplist-punl__offer {
    counter-increment: toplist-punl-counter 1;
}

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

.toplist-punl__offer-inner {
    position: relative;
    display: grid;
    align-items: center;
    padding: 10px;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    background: #ebebeb;
    gap: 15px;
    grid-template-areas: 'logo title info cta-btn';
    grid-template-columns: 135px auto 98px 158px;
    grid-template-rows: 1fr;
}

.toplist-punl__offer-inner:before {
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 16px;
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    content: counter(toplist-punl-counter);
    text-align: center;
    color: #000;
    border-radius: 5px 0 5px 5px;
    background: #1fb8ff;
}

.toplist-punl__offer-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-right: 5px;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='1' height='92' viewBox='0 0 1 92' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.5' y1='2.18557e-08' x2='0.499996' y2='92' stroke='%23CDCDCD' stroke-dasharray='6 6'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right;
    grid-area: logo;
}

.toplist-punl__offer-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 100%;
    border-radius: 5px;
}

.toplist-punl__offer-logo:before {
    position: absolute;
    top: -11px;
    right: -34.5px;
    width: 30px;
    height: 15px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' viewBox='0 0 30 15' fill='red'%3E%3Cg clip-path='url(%23clip0_177_909)'%3E%3Cpath d='M15 15C23.2843 15 30 8.28432 30 0H0C0 8.28432 6.71569 15 15 15Z' fill='white'/%3E%3Cpath d='M30 0C30 8.28431 23.2843 15 15 15V14C22.3958 14 28.4511 8.26528 28.9639 1H1.03613C1.54891 8.26528 7.60423 14 15 14V15L14.6133 14.9951C6.5077 14.79 0 8.15502 0 0H30Z' fill='%23CDCDCD'/%3E%3Crect x='0.99' width='28' height='1.2' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_177_909'%3E%3Crect width='30' height='15' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.toplist-punl__offer-logo:after {
    position: absolute;
    right: -34.5px;
    bottom: -11px;
    width: 30px;
    height: 15px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' viewBox='0 0 30 15' fill='none'%3E%3Cg clip-path='url(%23clip0_147_913)'%3E%3Cpath d='M15 3.57667e-07C6.71569 -3.6657e-07 -1.18311e-06 6.71568 -1.90735e-06 15L30 15C30 6.71569 23.2843 1.08191e-06 15 3.57667e-07Z' fill='white'/%3E%3Cpath d='M0 15C7.24238e-07 6.71569 6.71569 5.87104e-07 15 1.31134e-06L15 1C7.60423 1 1.54891 6.73472 1.03613 14L28.9639 14C28.4511 6.73472 22.3958 1 15 1L15 1.31134e-06L15.3867 0.00488416C23.4923 0.210005 30 6.84498 30 15L0 15Z' fill='%23CDCDCD'/%3E%3Crect x='29' y='15' width='28' height='1.2' transform='rotate(-180 29 15)' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_147_913'%3E%3Crect width='30' height='15' fill='white' transform='translate(30 15) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.toplist-punl__offer-logo img {
    width: 110px;
    height: 60px;
    object-fit: contain;
    border-radius: 5px;
}

.toplist-punl__offer-title {
    font-family: 'Kumbh Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    line-height: 28px;
    margin: 10px 0;
    color: #000;
    grid-area: title;
}

.toplist-punl__offer-info {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    gap: 10px;
    grid-area: info;
}

.toplist-punl__offer-rating {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toplist-punl__offer-review-link {
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 14px;
    text-decoration: none;
    text-transform: uppercase;
    color: #ff9a1f;
}

.toplist-punl__offer-review-link:hover {
    text-decoration: none;
    color: #ff9a1f;
}

.toplist-punl__offer-rating-stars {
    position: relative;
    width: 60px;
    height: 8px;
}

.toplist-punl__offer-rating-stars-empty {
    width: 100%;
    height: 100%;
    background-image: url('../images/punl/stars-empty.svg');
}

.toplist-punl__offer-rating-stars-full {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url('../images/punl/stars-full.svg');
}

.toplist-punl__offer-coupon-code-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px;
    cursor: pointer;
    border: 1px dashed #000;
    border-radius: 4px;
}

.toplist-punl__offer-coupon-code {
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    display: flex;
    word-break: break-word;
    color: #000;
}

.toplist-punl__offer-coupon-code:before {
    position: relative;
    top: 2px;
    width: 10px;
    min-width: 10px;
    height: 10px;
    margin-right: 2px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cg clip-path='url(%23clip0_147_896)'%3E%3Cpath d='M9.0625 10H2.8125C2.29562 10 1.875 9.57937 1.875 9.0625V2.8125C1.875 2.29562 2.29562 1.875 2.8125 1.875H9.0625C9.57937 1.875 10 2.29562 10 2.8125V9.0625C10 9.57937 9.57937 10 9.0625 10ZM2.8125 2.5C2.64 2.5 2.5 2.64 2.5 2.8125V9.0625C2.5 9.235 2.64 9.375 2.8125 9.375H9.0625C9.235 9.375 9.375 9.235 9.375 9.0625V2.8125C9.375 2.64 9.235 2.5 9.0625 2.5H2.8125Z' fill='black'/%3E%3Cpath d='M1.25 8.125H0.9375C0.420625 8.125 0 7.70437 0 7.1875V0.9375C0 0.420625 0.420625 0 0.9375 0H7.1875C7.70437 0 8.125 0.420625 8.125 0.9375V1.25031H7.5V0.9375C7.5 0.765 7.36 0.625 7.1875 0.625H0.9375C0.765 0.625 0.625 0.765 0.625 0.9375V7.1875C0.625 7.36 0.765 7.5 0.9375 7.5H1.25V8.125Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_147_896'%3E%3Crect width='10' height='10' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.toplist-punl__offer-cta-btn {
    font-family: 'Kumbh Sans', 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: 52px;
    margin: 10px 0;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    color: #000;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffe500 0%, #ff9a1f 80.29%);
    grid-area: cta-btn;
}

.toplist-punl__offer-cta-btn:after {
    width: 21px;
    min-width: 21px;
    height: 21px;
    margin-left: 10px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 20.125C15.8157 20.125 20.125 15.8157 20.125 10.5C20.125 5.18426 15.8157 0.875 10.5 0.875C5.18426 0.875 0.875 5.18426 0.875 10.5C0.875 15.8157 5.18426 20.125 10.5 20.125ZM10.5 21C16.299 21 21 16.299 21 10.5C21 4.70101 16.299 0 10.5 0C4.70101 0 0 4.70101 0 10.5C0 16.299 4.70101 21 10.5 21Z' fill='black'/%3E%3Cpath d='M5.25 9.625H12.6875L10.5 7.4375L11.8125 6.125L16.1875 10.5L11.8125 14.875L10.5 13.5625L12.6875 11.375H5.25V9.625Z' fill='black'/%3E%3C/svg%3E");
}

.toplist-punl__offer-cta-btn:hover {
    text-decoration: none;
    color: #000;
    background: linear-gradient(0deg, #ffe500 0%, #ff9a1f 80.29%);
}

.toplist-punl__offer-terms,
.toplist-punl__offer-terms p {
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    margin-top: 4px;
    color: #858585;
}

.toplist-punl__offer-terms p {
    margin: 0;
}

.toplist-punl__show-more-btn {
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 108px;
    max-width: 100%;
    height: 36px;
    margin: 32px auto 0;
    padding: 10px;
    text-align: center;
    color: #ff9a1f;
    border: 1px solid #ff9a1f;
    border-radius: 4px;
}

.toplist-punl__show-more-btn: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%3Cg clip-path='url(%23clip0_147_1446)'%3E%3Cpath d='M8 0C3.58853 0 0 3.58853 0 8C0 12.4115 3.58853 16 8 16C12.4115 16 16 12.4108 16 8C16 3.58916 12.4115 0 8 0ZM8 14.7607C4.27266 14.7607 1.23934 11.728 1.23934 8C1.23934 4.27203 4.27266 1.23934 8 1.23934C11.7273 1.23934 14.7607 4.27203 14.7607 8C14.7607 11.728 11.728 14.7607 8 14.7607Z' fill='%23FF9A1F'/%3E%3Cpath d='M11.0982 7.32445H8.61949V4.84576C8.61949 4.5037 8.34249 4.22607 7.9998 4.22607C7.65711 4.22607 7.38011 4.5037 7.38011 4.84576V7.32445H4.90143C4.55874 7.32445 4.28174 7.60207 4.28174 7.94414C4.28174 8.2862 4.55874 8.56382 4.90143 8.56382H7.38011V11.0425C7.38011 11.3846 7.65711 11.6622 7.9998 11.6622C8.34249 11.6622 8.61949 11.3846 8.61949 11.0425V8.56382H11.0982C11.4409 8.56382 11.7179 8.2862 11.7179 7.94414C11.7179 7.60207 11.4409 7.32445 11.0982 7.32445Z' fill='%23FF9A1F'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_147_1446'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.toplist-punl__show-more-btn:hover {
    cursor: pointer;
    color: #000;
    border-color: #000;
}

.toplist-punl__show-more-btn:hover: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%3Cg clip-path='url(%23clip0_147_1446)'%3E%3Cpath d='M8 0C3.58853 0 0 3.58853 0 8C0 12.4115 3.58853 16 8 16C12.4115 16 16 12.4108 16 8C16 3.58916 12.4115 0 8 0ZM8 14.7607C4.27266 14.7607 1.23934 11.728 1.23934 8C1.23934 4.27203 4.27266 1.23934 8 1.23934C11.7273 1.23934 14.7607 4.27203 14.7607 8C14.7607 11.728 11.728 14.7607 8 14.7607Z' fill='%23000'/%3E%3Cpath d='M11.0982 7.32445H8.61949V4.84576C8.61949 4.5037 8.34249 4.22607 7.9998 4.22607C7.65711 4.22607 7.38011 4.5037 7.38011 4.84576V7.32445H4.90143C4.55874 7.32445 4.28174 7.60207 4.28174 7.94414C4.28174 8.2862 4.55874 8.56382 4.90143 8.56382H7.38011V11.0425C7.38011 11.3846 7.65711 11.6622 7.9998 11.6622C8.34249 11.6622 8.61949 11.3846 8.61949 11.0425V8.56382H11.0982C11.4409 8.56382 11.7179 8.2862 11.7179 7.94414C11.7179 7.60207 11.4409 7.32445 11.0982 7.32445Z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_147_1446'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

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

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

    .toplist-punl__offer-inner {
        padding: 0 0 10px;
        background: #fff;
        gap: 10px 0;
        grid-template-areas:
            'logo info'
            'title title'
            'cta-btn cta-btn';
        grid-template-columns: 135px auto;
    }

    .toplist-punl__offer-logo-wrapper {
        margin-right: 0;
        padding: 10px 20px 10px 10px;
        border-bottom: 1px solid #cdcdcd;
        border-top-left-radius: 4px;
        background-color: #ebebeb;
    }

    .toplist-punl__offer-logo {
        width: 105px;
    }

    .toplist-punl__offer-logo img {
        width: 105px;
        height: 50px;
    }

    .toplist-punl__offer-title {
        margin: 0;
        padding: 0 10px;
    }

    .toplist-punl__offer-info {
        justify-content: center;
        height: 100%;
        margin: 0;
        padding: 15px 10px 15px 20px;
        border-bottom: 1px solid #cdcdcd;
        border-top-right-radius: 4px;
        background-color: #ebebeb;
    }

    .toplist-punl__offer-cta-btn {
        width: calc(100% - 20px);
        margin: 0 auto;
        padding: 0 10px;
    }
}