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

:root {
    --cpbm-font-family-body: inter;
    --cpbm-font-family-title: barlow;
    --cpbm-font-size-xs: 12px;
    --cpbm-font-size-s: 14px;
    --cpbm-font-size-md: 18px;
    --cpbm-font-size-xl: 24px;
    --cpbm-font-line-height-2xs: 18px;
    --cpbm-font-line-height-2sm: 32px;
    --cpbm-text-text-secondary: #190037;
    --cpbm-text-text-contrast: #fff;
    --cpbm-colors-neutral-500: #596773;
    --cpbm-colors-secondary-50: #ebe6f3;
    --cpbm-colors-secondary-100: #c2b0d9;
    --cpbm-colors-primary-100: #fcdbbd;
    --cpbm-colors-primary-800: #874d17;
    --cpbm-surface-surface-surface-1: #fff;
    --cpbm-text-text-primary: #3b0083;
    --cpbm-spacing-0x: 0px;
    --cpbm-spacing-04x: 4px;
    --cpbm-spacing-06x: 6px;
    --cpbm-spacing-1x: 8px;
    --cpbm-spacing-2x: 16px;
    --cpbm-spacing-3x: 24px;
    --cpbm-spacing-4x: 32px;
    --cpbm-spacing-12x: 12px;
    --cpbm-box-padding: 24px;
    --cpbm-button-padding: 16px;
    --cpbm-radius-0x: 0px;
    --cpbm-radius-5x: 40px;
    --cpbm-action-action-primary-hover: #df7f25;
    --cpbm-action-action-primary: #f58c29;
}

.cbm-presale-toplist__wrapper {
    margin: 16px 0;
}

.cbm-presale-toplist__offers-list {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    color: var(--cpbm-text-text-primary, #3b0083);
    gap: var(--cpbm-spacing-1x, 8px);
}

.cbm-presale-toplist__offer {
    position: relative;
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    counter-increment: offer-counter;
    gap: var(--cpbm-spacing-04x, 4px);
}

.cbm-presale-toplist__offer:before {
    font-family: Sora, serif;
    font-size: var(--cpbm-font-size-xs, 12px);
    font-weight: 600;
    font-style: normal;
    line-height: var(--cpbm-font-line-height-2xs, 18px);
    position: absolute;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    padding: 4px 8px 4px 12px;
    content: counter(offer-counter);
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--cpbm-colors-primary-800, #874d17);
    background: var(--cpbm-colors-primary-100, #fcdbbd);
    gap: 10px;
}

.cbm-presale-toplist__offer:after {
    position: absolute;
    top: 0;
    left: 26px;
    width: 0;
    height: 0;
    margin-left: 0;
    content: '';
    border-top: 26px solid var(--cpbm-colors-primary-100, #fcdbbd);
    border-right: 15px solid transparent;
}

.cbm-presale-toplist__offer-description {
    font-family: Arial, serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
    color: var(--cpbm-colors-neutral-500, #596773);
}

.cbm-presale-toplist__offer-body {
    position: relative;
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--cpbm-spacing-0x, 0);
    border: 1px solid var(--cpbm-colors-secondary-100, #c2b0d9);
    border-radius: var(--cpbm-radius-0x, 0);
    background: var(--cpbm-surface-surface-surface-1, #fff);
    gap: var(--cpbm-spacing-0x, 0);
}

.cbm-presale-toplist__offer:first-child .cbm-presale-toplist__offer-body {
    margin-bottom: var(--cpbm-spacing-04x, 4px);
    box-shadow: 4px 4px 0 0 #d7cee2;
}

.cbm-presale-toplist__offer-logo {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 var(--cpbm-spacing-3x, 24px);
    gap: 10px;
    grid-area: logo;
}

.cbm-presale-toplist__offer-logo img {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.cbm-presale-toplist__offer-main {
    display: grid;
    align-items: flex-start;
    width: 100%;
    padding: var(--cpbm-spacing-3x, 24px) var(--cpbm-spacing-3x, 24px) var(--cpbm-spacing-3x, 24px) var(--cpbm-spacing-0x, 0);
    gap: 12px;
    grid-area: main;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
}

.cbm-presale-toplist__offer-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: var(--cpbm-spacing-2x, 16px);
    grid-column-end: 8;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-row-start: 1;
}

.cbm-presale-toplist__offer-pros-wrapper {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    gap: 16px;
}

.cbm-presale-toplist__offer-link {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    gap: var(--cpbm-spacing-2x, 16px);
    grid-column-end: 13;
    grid-column-start: 8;
    grid-row-end: 2;
    grid-row-start: 1;
}

.cbm-presale-toplist__pros {
    grid-column-end: 7;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-row-start: 2;
}

.cbm-presale-toplist__offer-extra {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0;
    gap: 12px;
    grid-column-end: 13;
    grid-column-start: 7;
    grid-row-end: 3;
    grid-row-start: 2;
}

.cbm-presale-toplist__offer-cta-button {
    font-family: var(--cpbm-font-family-body, Inter), serif;
    font-size: var(--cpbm-font-size-md, 18px);
    font-weight: 600;
    font-style: normal;
    line-height: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 267px;
    padding: var(--cpbm-spacing-1x, 8px) var(--cpbm-spacing-1x, 8px) calc(var(--cpbm-spacing-1x, 8px) - 3px) var(--cpbm-spacing-3x, 24px);
    text-transform: capitalize;
    color: var(--cpbm-text-text-contrast, #fff);
    border-bottom: 3px solid var(--cpbm-action-action-primary-hover, #df7f25);
    border-radius: var(--cpbm-radius-5x, 40px);
    background: var(--cpbm-action-action-primary, #f58c29);
    gap: var(--cpbm-spacing-12x, 12px);
}

.cbm-presale-toplist__offer-cta-button:hover {
    text-decoration: none;
    color: var(--cpbm-text-text-contrast, #fff);
    background: var(--cpbm-action-action-primary-hover, #df7f25);
}

.cbm-presale-toplist__offer-cta-button:after {
    margin-right: 0;
    content: url('../../images/arrow.svg');
}

.cbm-presale-toplist__offer-launched,
.cbm-presale-toplist__offer-meta,
.cbm-presale-toplist__purchase {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: var(--cpbm-spacing-1x, 8px);
    border: 1px solid var(--cpbm-colors-secondary-50, #ebe6f3);
    border-radius: 2px;
    gap: var(--cpbm-spacing-0x, 0);
}

.cbm-presale-toplist__date-head,
.cbm-presale-toplist__meta-head,
.cbm-presale-toplist__purchase-head,
.cbm-presale-toplist__offer-purchase-methods-title {
    font-family: var(--cpbm-font-family-body, Inter), serif;
    font-size: var(--cpbm-font-size-xs, 12px);
    font-weight: 400;
    font-style: normal;
    line-height: var(--cpbm-font-line-height-2xs, 18px);
    text-transform: capitalize;
    color: var(--cpbm-colors-neutral-500, #596773);
}

.cbm-presale-toplist__offer-purchase-methods-title {
    display: block;
    width: 100%;
}

.cbm-presale-toplist__date-body,
.cbm-presale-toplist__meta-body,
.cbm-presale-toplist__purchase-body,
.cbm-presale-toplist__offer-purchase-methods-item,
.cbm-presale-toplist__offer-purchase-methods-more {
    font-family: var(--cpbm-font-family-body, Inter), serif;
    font-size: var(--cpbm-font-size-xs, 12px);
    font-weight: 600;
    font-style: normal;
    line-height: var(--cpbm-font-line-height-2xs, 18px);
    height: inherit;
    padding: 0;
    text-align: left;
    color: var(--cpbm-text-text-primary, #3b0083);
    background: none;
}

.cbm-presale-toplist__offer-purchase-methods-more {
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.cbm-presale-toplist__offer-purchase-methods-more:hover {
    cursor: pointer;
}

.cbm-presale-toplist__offer-body:before {
    display: none;
}

.cbm-presale-toplist__offer-title {
    font-family: var(--cpbm-font-family-title, Barlow), serif;
    font-size: 22px;
    font-weight: 600;
    font-style: normal;
    line-height: var(--cpbm-font-line-height-2sm, 32px);
    text-transform: capitalize;
    color: var(--cpbm-text-text-primary, #3b0083);
}

.cbm-presale-toplist__pros ul li {
    font-family: var(--cpbm-font-family-body, Inter), serif;
    font-size: var(--cpbm-font-size-s, 14px);
    font-weight: 400;
    font-style: normal;
    line-height: var(--cpbm-font-line-height-2xs, 18px);
    display: flex;
    align-items: flex-start;
    padding-bottom: 0 !important;
    color: var(--cpbm-text-text-secondary, #190037);
}

.cbm-presale-toplist__pros ul li:not(:last-child) {
    margin-bottom: var(--cpbm-spacing-1x, 8px);
}

.cbm-presale-toplist__pros ul {
    margin-bottom: 0 !important;
    gap: 8px;
}

.cbm-presale-toplist__pros li:before {
    align-self: flex-start;
    padding-right: 8px;
    content: url('../../images/check.svg');
}

.cbm-presale-toplist__offer-purchase-methods-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.cbm-presale-toplist__offer-purchase-methods-item {
    display: none;
    margin-right: 3px;
}

.cbm-presale-toplist__offer-purchase-expanded .cbm-presale-toplist__offer-purchase-methods-item {
    display: block;
}

.cbm-presale-toplist__offer-purchase-methods-more .cbm-presale-toplist__desktop {
    display: block;
}

.cbm-presale-toplist__offer-purchase-methods-more .cbm-presale-toplist__mobile {
    display: none;
}

.cbm-presale-toplist__offer-launched,
.cbm-presale-toplist__offer-meta {
    width: 100px;
}

.cbm-presale-toplist__purchase {
    width: 150px;
}

.cbm-presale-toplist__offer-terms {
    font-family: Arial, serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
    color: var(--cpbm-colors-neutral-500, #596773);
}

@media screen and (min-width: 992px) {
    .cbm-presale-toplist__offer-purchase-methods-list:not(.cbm-presale-toplist__offer-purchase-expanded) .cbm-presale-toplist__offer-purchase-methods-item:nth-child(-n + 4) {
        display: block;
    }
}

@media screen and (max-width: 991px) {
    .cbm-presale-toplist__offer-purchase-methods-list:not(.cbm-presale-toplist__offer-purchase-expanded) .cbm-presale-toplist__offer-purchase-methods-item:nth-child(-n + 8) {
        display: inline-block;
    }

    .cbm-presale-toplist__offer-main {
        display: grid;
        padding: var(--cpbm-spacing-4x, 32px) var(--cpbm-box-padding, 24px) var(--cpbm-box-padding, 24px) var(--cpbm-box-padding, 24px);
        gap: 16px;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .cbm-presale-toplist__offer-title-wrapper {
        min-height: 48px;
        padding-right: 100px;
        grid-column-end: 2;
        grid-column-start: 1;
        grid-row-end: 2;
        grid-row-start: 1;
    }

    .cbm-presale-toplist__offer-link {
        align-items: center;
        grid-column-end: 2;
        grid-column-start: 1;
        grid-row-end: 4;
        grid-row-start: 3;
    }

    .cbm-presale-toplist__pros {
        grid-column-end: 2;
        grid-column-start: 1;
        grid-row-end: 3;
        grid-row-start: 2;
    }

    .cbm-presale-toplist__offer-extra {
        flex-direction: column;
        gap: 4px;
        grid-column-end: 2;
        grid-column-start: 1;
        grid-row-end: 5;
        grid-row-start: 4;
    }

    .cbm-presale-toplist__offer-launched,
    .cbm-presale-toplist__offer-meta,
    .cbm-presale-toplist__purchase {
        flex-direction: row;
        width: 100%;
        gap: var(--cpbm-spacing-1x, 8px);
    }

    .cbm-presale-toplist__offer-logo {
        position: absolute;
        top: var(--cpbm-spacing-4x, 32px);
        right: var(--cpbm-box-padding, 24px);
        padding: 0;
    }

    .cbm-presale-toplist__offer-logo img {
        width: 60px;
        height: 60px;
    }

    .cbm-presale-toplist__offer-purchase-methods-more .cbm-presale-toplist__desktop {
        display: none;
    }

    .cbm-presale-toplist__offer-purchase-methods-more .cbm-presale-toplist__mobile {
        display: block;
    }

    .cbm-presale-toplist__offer-cta-button {
        width: 100%;
    }

    .cbm-presale-toplist__offer-purchase-methods-title {
        width: inherit;
        margin-right: 8px;
    }

    .cbm-presale-toplist__pros ul li:not(:last-child) {
        margin-bottom: var(--cpbm-spacing-06x, 6px);
    }
}