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

.toplist-coincierge__wrapper {
    margin: 24px 0;
}

.toplist-coincierge__offers {
    display: flex;
    flex-direction: column;
    counter-reset: bm-toplist-coincierge-counter;
    gap: 8px;
}

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

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

.toplist-coincierge__filter-tag {
    font-family: GilroyBold, serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    padding: 8px 24px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: #151515;
    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background: #fff;
}

.toplist-coincierge__filter-tag.filter-tag-active {
    border: unset;
    background: linear-gradient(180deg, #f9d453 49.88%, #f9cb53 53.35%);
}

.toplist-coincierge__filter-tag img {
    width: 16px !important;
    height: 16px !important;
    margin-right: 4px;
}

.toplist-coincierge__offer {
    position: relative;
    padding: 20px 24px;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
}

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

.toplist-coincierge__offer-content {
    display: grid;
    align-items: center;
    gap: 24px;
    grid-template-areas: 'logo title rating cta-btn';
    grid-template-columns: 200px auto 100px 180px;
    grid-template-rows: auto;
}

.toplist-coincierge__offer-logo-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0;
    border-radius: 0 4px 4px;
    grid-area: logo;
}

.toplist-coincierge__offer-logo img {
    width: 100%;
    height: 60px;
    object-fit: contain;
}

.toplist-coincierge__offer-terms {
    font-family: Arial, serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    position: relative;
    align-self: center;
    min-width: 120px;
    text-align: left;
    grid-area: terms;
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
    text-decoration-style: dotted;
    text-underline-position: from-font;
}

.toplist-coincierge__offer-terms * {
    font-family: Arial, serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin: 0;
    padding: 0;
    color: #fff;
}

.toplist-coincierge__offer-main {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px 24px;
    grid-area: title;
    grid-template-areas:
        'description terms'
        'key-feature terms';
    grid-template-columns: 1fr auto;
}

.toplist-coincierge__offer-description,
.toplist-coincierge__offer-description p {
    font-family: GilroyBold, serif !important;
    font-size: 20px !important;
    font-weight: 400;
    line-height: 26px !important;
    margin: 0;
    text-align: left;
    color: #151515;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

.toplist-coincierge__offer-key-feature {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-area: key-feature;
}

.toplist-coincierge__offer-description {
    font-family: GilroyBold, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    grid-area: description;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

.toplist-coincierge__offer-terms:empty {
    display: none;
}

.toplist-coincierge__offer-terms .toplist-coincierge__offer-terms-tip {
    font-size: 12px;
    line-height: 18px;
    position: absolute;
    top: 38px;
    left: 50%;
    display: none;
    width: max-content;
    max-width: 300px;
    padding: 12px 16px;
    transform: translateX(-50%);
    color: #fff;
    border-radius: 4px;
    background: #060606;
}

.toplist-coincierge__offer-terms .toplist-coincierge__offer-terms-tip:before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    content: '';
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #060606;
    border-top-width: 0;
}

.toplist-coincierge__offer-terms:hover .toplist-coincierge__offer-terms-tip {
    z-index: 1;
    display: block;
}

.toplist-coincierge__offer-key-feature ul {
    margin: 0 !important;
    list-style-type: none !important;
    gap: 1px;
}

.toplist-coincierge__offer-key-feature ul li {
    font-family: Arial, serif !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.5 !important;
    margin: 0;
    padding: 0 0 0 20px !important;
    color: #151515;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.87015 9.274L6.6479 6.49625L3.87015 3.7185C3.80387 3.65222 3.75129 3.57353 3.71542 3.48693C3.67955 3.40033 3.66108 3.30752 3.66108 3.21378C3.66108 3.12005 3.67955 3.02723 3.71542 2.94063C3.75129 2.85403 3.80387 2.77534 3.87015 2.70906C3.93643 2.64278 4.01511 2.5902 4.10171 2.55433C4.18831 2.51846 4.28113 2.5 4.37487 2.5C4.4686 2.5 4.56142 2.51846 4.64802 2.55433C4.73462 2.5902 4.81331 2.64278 4.87959 2.70906L8.16564 5.99511C8.232 6.06134 8.28466 6.14001 8.32058 6.22662C8.35651 6.31323 8.375 6.40607 8.375 6.49983C8.375 6.59359 8.35651 6.68643 8.32058 6.77304C8.28466 6.85965 8.232 6.93832 8.16564 7.00455L4.87959 10.2906C4.60038 10.5698 4.14935 10.5698 3.87015 10.2906C3.5981 10.0114 3.59094 9.5532 3.87015 9.274Z' fill='%23F59A30'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: left 5px;
}

.toplist-coincierge__offer-gallery {
    display: flex;
    margin-top: 8px;
    gap: 16px;
}

.toplist-coincierge__offer-gallery-image,
.toplist-coincierge__offer-gallery-image img {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    object-fit: cover;
}

.toplist-coincierge__offer-btn-area {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    grid-area: cta-btn;
}

.toplist-coincierge__offer-btn {
    font-family: GilroyBold, serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 8px;
    cursor: pointer;
    letter-spacing: -0.01em;
    color: #151515;
    border-radius: 6px;
    gap: 8px;
}

.toplist-coincierge__offer-btn:hover {
    cursor: pointer;
    text-decoration: none;
    color: #151515;
    background: #edb549;
}

.toplist-coincierge__offer-btn.toplist-coincierge__offer-cta-btn {
    background: linear-gradient(180deg, #f9d453 49.88%, #f9cb53 53.35%);
}

.toplist-coincierge__offer-btn.toplist-coincierge__offer-cta-btn:hover {
    background: #edb549;
}

.toplist-coincierge__offer-btn.toplist-coincierge__offer-more-info-btn,
.toplist-coincierge__show-more-btn {
    border: 1px solid #cdcdcd;
    background: #fff;
}

.toplist-coincierge__offer-rating-area {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100px;
    height: 100px;
    padding: 0 8px;
    border: 1px solid #f8f8fc;
    border-radius: 4px;
    grid-area: rating;
}

.toplist-coincierge__offer-rating-value {
    font-family: GilroyBold, serif;
    font-size: 32px;
    font-weight: 400;
    font-style: normal;
    line-height: 130%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    letter-spacing: 0.1em;
    color: #151515;
    gap: 2px;
}

.toplist-coincierge__offer-rating-value:after {
    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%3Cpath d='M7.99998 1.33331L10.06 5.50665L14.6666 6.17998L11.3333 9.42665L12.12 14.0133L7.99998 11.8466L3.87998 14.0133L4.66665 9.42665L1.33331 6.17998L5.93998 5.50665L7.99998 1.33331Z' fill='%23F59A30'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.toplist-coincierge__offer-rating-text {
    font-family: Roboto, serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    text-align: center;
    color: #808080;
}

.toplist-coincierge__offer-review-link {
    font-family: GilroyBold, serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 130%;
    text-align: center;
    color: #151515;
    text-decoration-line: underline;
}

.toplist-coincierge__offer:before {
    font-family: GilroyBold, serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    content: counter(bm-toplist-coincierge-counter);
    counter-increment: bm-toplist-coincierge-counter;
    color: #fff;
    border-radius: 4px;
    background: #414242;
}

.toplist-coincierge__campaign-metadata-section.hidden {
    display: none;
}

.toplist-coincierge__offer-metadata-content {
    display: grid;
    align-items: center;
    width: 100%;
    margin-top: 16px;
    gap: 8px;
    grid-template-columns: 35fr 65fr;
    grid-template-rows: auto;
}

.toplist-coincierge__offer-metadata-content span {
    font-family: Roboto, serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    color: #808080;
}

.toplist-coincierge__offer-metadata-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 16px 24px;
    border-radius: 4px;
    background: #f8f8fc;
    gap: 4px;
}

.toplist-coincierge__offer-metadata-box.metadata-box-small {
    padding: 16px 24px;
}

.toplist-coincierge__offer-metadata-box.metadata-box-center div {
    line-height: initial;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toplist-coincierge__offer-metadata-content-2 {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
}

.toplist-coincierge__offer-metadata-box.metadata-box-center {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
}

.toplist-coincierge__offer-metadata-content-1 {
    display: grid;
    align-items: center;
    height: 100%;
    gap: 8px;
}

.toplist-coincierge__offer-metadata-content-1-1 {
    font-family: GilroyBold, serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 21px;
    display: flex;
    align-items: center;
    flex-direction: row;
    height: 100%;
    padding: 0;
    gap: 8px;
}

.toplist-coincierge__offer-metadata-content-1-2 {
    font-family: GilroyBold, serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 42px;
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: none;
    flex-direction: row;
    flex-grow: 0;
    order: 1;
    height: 100%;
    padding: 0;
    text-align: left;
    gap: 8px;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

.toplist-coincierge__offer-metadata-content-1-2 .toplist-coincierge__offer-metadata-box {
    padding: 16px;
}

.toplist-coincierge__offer-metadata-content-2-1,
.toplist-coincierge__offer-metadata-content-2-2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toplist-coincierge__offer-metadata-section.hidden {
    display: none;
}

.toplist-coincierge__offer-gallery ul {
    margin: 0;
    list-style-type: none;
}

.toplist-coincierge__offers .metadata-deposit-method ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.toplist-coincierge__offers .metadata-deposit-method li {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 20px;
    padding-bottom: 0 !important;
}

.game-developers-icons img {
    display: block;
    width: auto;
    height: 32px;
}

.toplist-coincierge__offers .metadata-deposit-method img {
    width: auto;
    height: 32px;
    object-fit: contain;
}

.toplist-coincierge__offers .metadata-deposit-method .toplist-coincierge__offer-terms-tip {
    font-size: 12px;
    line-height: 18px;
    position: absolute;
    top: 38px;
    left: 50%;
    display: none;
    width: max-content;
    padding: 12px 16px;
    transform: translateX(-50%);
    color: #fff;
    border-radius: 4px;
    background: #060606;
}

.toplist-coincierge__offers .metadata-deposit-method li:hover .toplist-coincierge__offer-terms-tip {
    display: block;
}

.components__payments {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: 100%;
    gap: 8px;
}

.components__payment {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    width: fit-content;
    border-radius: 8px;
    outline: none;
    background: transparent;
}

.components__payment-tooltip {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 150%;
    position: absolute;
    z-index: 10;
    top: 34px;
    left: 50%;
    display: none;
    flex-direction: column;
    width: max-content;
    padding: 12px 16px;
    transform: translateX(-50%);
    color: #060606;
    border-radius: 4px;
    background: #fff;
    filter: drop-shadow(0 1px 4px #00000023) drop-shadow(0 8px 32px #00000019);
    gap: 14px;
}

.components__payment-tooltip:before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    content: '';
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #fff;
    border-top-width: 0;
}

.components__payment:hover .components__payment-tooltip {
    display: block;
}

.components__payments-hidden-counter {
    font-family: Arial, serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-transform: lowercase;
    color: #151515;
    text-decoration-line: underline;
}

.game-developers-icons .components__payments-hidden-counter {
    cursor: auto;
    text-decoration: none;
}

.components__payments-tooltip {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 150%;
    position: absolute;
    z-index: 1;
    top: 26px;
    left: -6px;
    display: none;
    flex-direction: column;
    width: max-content;
    min-width: 144px;
    padding: 12px 16px;
    color: #060606;
    border-radius: 4px;
    background: #fff;
    filter: drop-shadow(0 1px 4px #00000023) drop-shadow(0 8px 32px #00000019);
}

.components__payments-tooltip:before {
    position: absolute;
    bottom: 100%;
    left: 20px;
    margin-left: -8px;
    content: '';
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #fff;
}

.components__payments-hidden-counter:hover .components__payments-tooltip {
    display: block;
}

.components__payment-in-tooltip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 6px;
    gap: 8px;
}

.components__payments-wrapper {
    display: contents;
}

.toplist-coincierge__offer-gallery-inner {
    font-family: Roboto, serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    width: 100%;
    color: #808080;
}

.toplist-coincierge__offer-metadata-section {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    gap: 16px;
}

.toplist-coincierge__offer-gallery-wrapper {
    display: block;
    align-items: start;
    flex-direction: column;
    width: 100%;
}

.toplist-coincierge__offer-gallery-wrapper .slick-slider {
    width: auto;
}

.toplist-coincierge__offer-gallery-wrapper .slick-slide {
    border-radius: 4px;
}

.toplist-coincierge__offer-gallery-wrapper .slick-slide img {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    object-fit: cover;
}

.toplist-coincierge__show-more-btn {
    font-family: GilroyBold, serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 48px;
    margin: 16px auto 0;
    padding: 8px 16px;
    color: #151515;
    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background: #fff;
}

.toplist-coincierge__show-more-btn:hover {
    cursor: pointer;
}

.toplist-coincierge__offer-btn.toplist-coincierge__offer-more-info-btn:hover,
.toplist-coincierge__show-more-btn:hover {
    color: #151515;
    border-color: #151515;
}

.toplist-coincierge__offer-metadata-box.toplist-coincierge__offer-metadata-content-2 {
    padding: 16px;
}

.payment-method-icons .components__payments div.components__payment:nth-child(n + 8),
.payment-method-icons .components__payments-tooltip div.components__payment-in-tooltip:nth-child(-n + 7),
.game-developers-icons .components__payments div.components__payment:nth-child(n + 8),
.game-developers-icons .components__payments-tooltip div.components__payment-in-tooltip:nth-child(-n + 7),
.components__payments-hidden-counter-mobile {
    display: none;
}

.payment-method-icons .components__payments-tooltip div.components__payment-in-tooltip:nth-child(n + 8),
.game-developers-icons .components__payments-tooltip div.components__payment-in-tooltip:nth-child(n + 8) {
    display: flex;
}

.components__payments-hidden-counter-desktop {
    display: block;
}

.payment-method-icons .components__payments.components__payments-show-all div.components__payment,
.game-developers-icons .components__payments.components__payments-show-all div.components__payment {
    display: flex;
}

@media (min-width: 992px) {
    .bm-tiny .toplist-coincierge__offer {
        padding: 20px;
    }

    .bm-tiny .toplist-coincierge__offer-content {
        gap: 18px;
        grid-template-columns: 140px auto 100px 160px;
    }

    .components__payments-hidden-counter.desktop__hidden {
        display: none;
    }
}

@media (max-width: 991px) {
    .toplist-coincierge__offers {
        gap: 8px;
    }

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

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

    .toplist-coincierge__offer {
        padding: 20px;
    }

    .toplist-coincierge__offer-content {
        align-items: flex-start;
        gap: 16px;
        grid-template-areas:
            'logo rating'
            'title title'
            'cta-btn cta-btn';
        grid-template-columns: 1fr auto;
    }

    .toplist-coincierge__offer-logo-wrapper {
        align-items: start;
        grid-area: logo;
    }

    .toplist-coincierge__offer-btn-area {
        flex-direction: row;
        width: 100%;
        height: auto;
        grid-area: cta-btn;
    }

    .toplist-coincierge__offer-terms {
        width: fit-content;
        min-width: unset;
        grid-area: terms;
    }

    .toplist-coincierge__offer-terms .toplist-coincierge__offer-terms-tip {
        top: 25px;
        left: 0;
        transform: translateX(0);
    }

    .toplist-coincierge__offer-terms .toplist-coincierge__offer-terms-tip:before {
        left: 20px;
    }

    .toplist-coincierge__offer-rating-area {
        grid-area: rating;
    }

    .toplist-coincierge__offer-metadata-content {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .toplist-coincierge__offer-metadata-content-1-1 {
        display: grid;
        grid-template-areas:
            'first first'
            'second third';
        grid-template-columns: 1fr 1fr;
    }

    .toplist-coincierge__offer-metadata-content-1-1:has(> div:nth-child(1)) {
        display: grid;
        grid-template-areas: 'first ';
        grid-template-columns: 1fr;
    }

    .toplist-coincierge__offer-metadata-content-1-1:has(> div:nth-child(2)) {
        display: grid;
        grid-template-areas:
            'first '
            'second ';
        grid-template-columns: 1fr;
    }

    .toplist-coincierge__offer-metadata-content-1-1:has(> div:nth-child(3)) {
        display: grid;
        grid-template-areas:
            'first first'
            'second third';
        grid-template-columns: 1fr 1fr;
    }

    .toplist-coincierge__offer-metadata-content-1-1 > div:nth-child(1) {
        grid-area: first;
    }

    .toplist-coincierge__offer-metadata-content-1-1 > div:nth-child(2) {
        grid-area: second;
    }

    .toplist-coincierge__offer-metadata-content-1-1 > div:nth-child(3) {
        grid-area: third;
    }

    .toplist-coincierge__offer-main {
        display: grid;
        grid-template-areas:
            'description'
            'terms'
            'key-feature';
        grid-template-columns: 1fr;
    }

    .toplist-coincierge__offer-metadata-content-1-2 .toplist-coincierge__offer-metadata-box {
        padding: 8px 16px;
    }

    .toplist-coincierge__offer-metadata-box.metadata-box-small {
        padding: 8px 24px;
    }

    .toplist-coincierge__offer-logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
    }

    .toplist-coincierge__offer-review-link {
        margin-top: 4px;
    }

    .toplist-coincierge__offer-metadata-content-2 {
        gap: 16px;
    }

    .payment-method-icons .components__payments div.components__payment:nth-child(n + 6),
    .payment-method-icons .components__payments-tooltip div.components__payment-in-tooltip:nth-child(-n + 5),
    .game-developers-icons .components__payments div.components__payment:nth-child(n + 3),
    .game-developers-icons .components__payments-tooltip div.components__payment-in-tooltip:nth-child(-n + 2),
    .components__payments-hidden-counter-desktop,
    .components__payments-hidden-counter.mobile__hidden {
        display: none;
    }

    .payment-method-icons .components__payments-tooltip div.components__payment-in-tooltip:nth-child(n + 6),
    .game-developers-icons .components__payments-tooltip div.components__payment-in-tooltip:nth-child(n + 3) {
        display: flex;
    }

    .components__payments-hidden-counter-mobile {
        display: block;
    }

    .payment-method-icons .components__payments.components__payments-show-all div.components__payment,
    .game-developers-icons .components__payments.components__payments-show-all div.components__payment {
        display: flex;
    }

    .toplist-coincierge__offer-gallery {
        flex-wrap: wrap;
        gap: 8px;
    }

    .toplist-coincierge__offer-gallery a {
        width: calc(50% - 4px);
    }

    .toplist-coincierge__offer-gallery-image,
    .toplist-coincierge__offer-gallery-image img {
        width: 100%;
    }
}