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

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

.toplist-gamingamerica__offers {
    display: flex;
    flex-direction: column;
    counter-reset: toplist-gamingamerica-counter 0;
    gap: 16px;
}

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

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

.toplist-gamingamerica__filter-tag {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 26px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 34px;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: #484c5d;
}

.toplist-gamingamerica__filter-tag.filter-tag-active {
    color: #051135;
    border: 2px solid #0d2c87;
    border-radius: 38px;
}

.toplist-gamingamerica__offer {
    position: relative;
    display: grid;
    padding: 0 24px;
    counter-increment: toplist-gamingamerica-counter 1;
    border-radius: 2px;
    background: #051135;
    gap: 16px;
    grid-template-areas: 'logo main actions';
    grid-template-columns: 167px auto 190px;
    grid-template-rows: 1fr;
}

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

.toplist-gamingamerica__offer-label-highlight {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 18px;
    position: absolute;
    z-index: 1;
    top: -10px;
    left: -7px;
    display: flex;
    align-items: center;
    padding: 5px 12px;
    color: #fff;
    border-radius: 0 0 16px;
    background: #ca0a37;
    box-shadow:
        0 1px 4px 0 #0000000a,
        0 8px 32px 0 #00000019;
}

.toplist-gamingamerica__offer-label-highlight:before {
    width: 33px;
    height: 13px;
    margin-right: 6px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='13' viewBox='0 0 33 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9222 4.56864L11.4627 4.68313L9.70027 2.02412C9.43173 1.84912 9.16483 1.70873 8.89815 1.60509C8.42015 1.41694 7.8929 1.32317 7.31685 1.32317C6.69186 1.32319 6.13126 1.41424 5.63493 1.59649C5.13855 1.77876 4.71555 2.06097 4.36624 2.44316C4.01698 2.82533 3.7503 3.31643 3.56647 3.91611C3.38267 4.51579 3.29083 5.23304 3.29083 6.06784C3.29083 7.36135 3.48367 8.45807 3.86972 9.35767C4.26191 10.2514 4.7892 10.9304 5.45102 11.3949C6.11897 11.8535 6.86353 12.0827 7.68468 12.0827C7.98496 12.0827 8.27327 12.0596 8.54904 12.0126C8.69851 11.9871 8.84232 11.9537 8.98098 11.9144V8.64314L7.47316 8.14039V7.78787H11.83L15.6268 0.564745H26.446L31.6031 11.9158L33 12.4181V12.771H26.6481V12.4181L28.1925 11.933L26.7665 8.72278H22.1775L20.8662 11.942L22.383 12.4271V12.771H10.1079C9.77604 12.8265 9.44336 12.8708 9.10968 12.9032C8.50299 12.9678 7.88993 13 7.27099 13C6.13731 13 5.12011 12.8618 4.2193 12.5855C3.31846 12.3091 2.55225 11.9037 1.92105 11.3687C1.29599 10.8277 0.818085 10.1691 0.487166 9.39296C0.162373 8.61095 1.00186e-06 7.71722 0 6.71178C0 5.45942 0.30956 4.35999 0.92847 3.41336C1.55354 2.46084 2.43922 1.71976 3.58519 1.19058C4.73112 0.661459 6.08235 0.39686 7.63882 0.39686C8.14132 0.396862 8.60724 0.423134 9.03621 0.476051C9.3349 0.512384 9.65363 0.566208 9.99275 0.635791L10.8838 0H11.1412L11.9222 4.56864ZM18.9522 2.29382C18.9009 2.17984 18.761 2.15139 18.6747 2.23907C18.2663 2.65573 17.2048 3.7077 16.0503 4.53832C15.8474 4.68296 15.6514 4.81908 15.4625 4.95057C14.4781 5.63006 13.6987 6.16722 13.4165 7.18647C13.251 7.78918 13.321 8.35701 13.6149 8.78658C13.9088 9.21612 14.3894 9.45288 14.9678 9.45948H14.9889C15.5976 9.45946 16.2111 9.19428 16.7429 8.73635C16.589 9.05631 16.4302 9.44201 16.281 9.68303C16.0011 10.141 15.7145 10.4701 15.4929 10.6849C15.3765 10.7989 15.4533 11.007 15.6118 11.0071H17.45C17.5829 11.0071 17.6667 10.856 17.6016 10.7311C17.4897 10.5185 17.3638 10.1762 17.3288 9.68303C17.3102 9.4398 17.3564 9.05628 17.3751 8.73635C17.6597 9.19437 18.1315 9.45945 18.7402 9.45948H18.7608C19.3439 9.4551 19.9506 9.2161 20.4731 8.78658C20.9956 8.35702 21.3711 7.78916 21.5275 7.18647C21.7934 6.16503 21.3037 5.62786 20.6833 4.95057H20.6856C20.5666 4.81906 20.4428 4.68518 20.3168 4.53832C19.6381 3.74274 19.1529 2.74328 18.9522 2.29382ZM22.5472 7.81457H26.3631L24.3723 3.33372L22.5472 7.81457Z' fill='white'/%3E%3C/svg%3E");
}

.toplist-gamingamerica__offer-logo-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    gap: 8px;
    grid-area: logo;
}

.toplist-gamingamerica__offer-logo-wrapper:before {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 16px;
    position: absolute;
    top: 22px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    content: counter(toplist-gamingamerica-counter);
    color: #051135;
    border-radius: 2px;
    background: #fff;
}

.toplist-gamingamerica__offer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 167px;
    height: 80px;
}

.toplist-gamingamerica__offer-logo img {
    width: 167px;
    height: 80px;
    object-fit: contain;
}

.toplist-gamingamerica__offer-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toplist-gamingamerica__offer-rating-value {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    text-align: center;
    color: #fff;
    border-radius: 40px;
    background: #0d2c87;
}

.toplist-gamingamerica__offer-rating-value:after {
    width: 10px;
    height: 10px;
    margin-left: 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%3Cpath d='M4.58575 0.264083C4.75045 -0.0880278 5.24955 -0.0880277 5.41425 0.264083L6.69693 3.00625L9.61101 3.45301C9.97921 3.50946 10.1296 3.9601 9.86944 4.22762L7.74569 6.41181L8.24214 9.46583C8.30364 9.84414 7.90342 10.1271 7.56911 9.94163L5 8.51656L2.43089 9.94163C2.09658 10.1271 1.69636 9.84414 1.75786 9.46583L2.25432 6.41181L0.130563 4.22762C-0.129551 3.9601 0.0207926 3.50946 0.388988 3.45301L3.30307 3.00625L4.58575 0.264083Z' fill='%237295FF'/%3E%3C/svg%3E");
}

.toplist-gamingamerica__offer-rating-tier {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 22px;
    color: #fff;
}

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

.toplist-gamingamerica__offer-brand-name {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 18px;
    color: #c4c7d2;
}

.toplist-gamingamerica__offer-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    line-height: 30px;
    letter-spacing: 0.24px;
    color: #fff;
}

.toplist-gamingamerica__offer-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 24px 0;
    gap: 24px;
    grid-area: actions;
}

.toplist-gamingamerica__offer-cta-btn {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 12px 24px;
    text-align: center;
    color: #fff;
    border: 2px solid #b4052e;
    border-radius: 4px;
    background: linear-gradient(90deg, #b4052e 0%, #6b041c 100%);
}

.toplist-gamingamerica__offer-cta-btn:after {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    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.944 8.92883L4.19529 13.8508C3.45283 14.2681 2.5 13.7628 2.5 12.9216V3.07765C2.5 2.23776 3.45145 1.73117 4.19529 2.14978L12.944 7.07175C13.1129 7.16524 13.2533 7.30037 13.3509 7.46344C13.4486 7.62651 13.5 7.81172 13.5 8.00029C13.5 8.18885 13.4486 8.37407 13.3509 8.53714C13.2533 8.70021 13.1129 8.83534 12.944 8.92883Z' fill='white'/%3E%3C/svg%3E");
}

.toplist-gamingamerica__offer-cta-btn:hover {
    text-decoration: unset;
    color: #fff;
    background: #6b041c;
}

.toplist-gamingamerica__offer-coupon-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    height: 30px;
    padding: 4px 8px;
    cursor: pointer;
    border: 1px dashed #1943be;
    border-radius: 4px;
    background: #081e5c;
    gap: 4px;
}

.toplist-gamingamerica__offer-coupon-code-text,
.toplist-gamingamerica__offer-coupon-code {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 22px;
    color: #a3baff;
}

.toplist-gamingamerica__show-more-btn {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 42px;
    margin: 16px auto 0;
    padding: 8px 24px;
    text-align: center;
    color: #051135;
    border: 2px solid #0d2c87;
    border-radius: 4px;
}

.toplist-gamingamerica__show-more-btn:hover {
    cursor: pointer;
    background: #d4dfff;
}

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

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

    .toplist-gamingamerica__offer {
        padding: 16px 20px;
        gap: 8px;
        grid-template-areas:
            'logo'
            'main'
            'actions';
        grid-template-columns: auto;
    }

    .toplist-gamingamerica__offer-label-highlight {
        font-size: 11px;
        line-height: 17px;
        position: absolute;
        top: -8px;
        left: -4px;
    }

    .toplist-gamingamerica__offer-logo-wrapper {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        padding: 0;
        gap: unset;
    }

    .toplist-gamingamerica__offer-logo-wrapper:before {
        font-size: 11px;
        line-height: 14px;
        top: 30px;
        left: -10px;
    }

    .toplist-gamingamerica__offer-logo,
    .toplist-gamingamerica__offer-logo img {
        width: 166px;
        height: 80px;
    }

    .toplist-gamingamerica__offer-rating {
        position: absolute;
        top: 0;
        right: 0;
    }

    .toplist-gamingamerica__offer-rating-value {
        font-size: 13px;
        line-height: 24px;
        width: 40px;
        height: 40px;
    }

    .toplist-gamingamerica__offer-rating-tier {
        display: none;
    }

    .toplist-gamingamerica__offer-main {
        padding: 0;
        gap: 12px;
    }

    .toplist-gamingamerica__offer-brand-name {
        font-size: 11px;
        line-height: 17px;
    }

    .toplist-gamingamerica__offer-title {
        font-size: 22px;
        letter-spacing: 0.22px;
    }

    .toplist-gamingamerica__offer-actions {
        padding: 4px 0 0;
        gap: 16px;
    }

    .toplist-gamingamerica__offer-cta-btn {
        font-size: 17px;
        line-height: 24px;
        height: 48px;
        padding: 12px 32px;
    }

    .toplist-gamingamerica__offer-coupon-code-wrapper {
        width: 100%;
    }

    .toplist-gamingamerica__offer-coupon-code-text,
    .toplist-gamingamerica__offer-coupon-code {
        font-size: 13px;
    }

    .toplist-gamingamerica__show-more-btn {
        font-size: 15px;
        line-height: 24px;
        height: 40px;
    }
}
