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

.cbm-presale-toplist__offer {
    position: relative;
    counter-increment: counter;
}

.cbm-presale-toplist__offer:after {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    font-style: normal;
    line-height: 12px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    content: counter(counter);
    text-align: center;
    text-transform: capitalize;
    color: #fff;
    background: #142025;
}

.cbm-presale-toplist__offer:first-of-type:after {
    background: #670ff6;
}

.cbm-presale-toplist__offer-body {
    display: grid;
    padding: 16px;
    border: 1px solid #ebebeb;
    border-radius: unset;
    gap: 8px 16px;
    grid-template-areas:
        'logo title main'
        'logo pros main';
    grid-template-columns: 96px auto 356px;
    grid-template-rows: auto 1fr;
}

.cbm-presale-toplist__offer:nth-child(-n + 9):after {
    content: counter(counter, decimal-leading-zero);
}

.cbm-presale-toplist__offer-body:before {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 14.1px;
    font-weight: 700;
    line-height: 18px;
    position: absolute;
    z-index: 1;
    top: 51px;
    left: -0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 22px;
    padding: 1px 8px;
    color: #000;
    border-right: unset;
    border-bottom: unset;
    border-radius: unset;
    background: #eaeaea;
}

.cbm-presale-toplist__offer-label-highlight {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: 16px;
    position: absolute;
    top: 0;
    left: 20px;
    padding: 2px 8px;
    color: #670ff6;
    background: #f0e7fe;
}

.cbm-presale-toplist__offer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    grid-area: logo;
}

.cbm-presale-toplist__offer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 356px;
    margin: -17px -17px -17px auto;
    padding: 16px;
    background: #f7f7f7;
    gap: 30px;
    grid-area: main;
}

.cbm-presale-toplist__offer-pros {
    margin-right: 14px;
    grid-area: pros;
}

.cbm-presale-toplist__offer-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    font-style: normal;
    line-height: 24px;
    overflow: hidden;
    margin-right: 14px;
    text-transform: capitalize;
    text-overflow: ellipsis;
    color: #142025;
    grid-area: title;
}

.cbm-presale-toplist__offer-title:hover {
    text-decoration: none;
    color: #142025;
}

.cbm-presale-toplist__offer-pros ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cbm-presale-toplist__offer-pros ul li {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    display: flex;
    align-items: center;
    padding-bottom: unset !important;
    list-style: none;
    color: #8f9698;
    gap: 4px;
}

.cbm-presale-toplist__offer-payments-hidden-counter span {
    color: #142025;
}

.cbm-presale-toplist__offer-pros ul li span {
    display: none;
}

.cbm-presale-toplist__offer-pros ul li:before {
    display: flex;
    align-self: stretch;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 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 d='M3.67489 3.02676C3.56285 2.9136 3.5 2.76081 3.5 2.60157C3.5 2.44234 3.56285 2.28954 3.67489 2.17639C3.7299 2.12052 3.79548 2.07616 3.8678 2.04588C3.94013 2.01559 4.01775 2 4.09616 2C4.17456 2 4.25219 2.01559 4.32451 2.04588C4.39683 2.07616 4.46241 2.12052 4.51743 2.17639L7.8476 5.57438C7.95948 5.68779 8.02221 5.84069 8.02221 6C8.02221 6.15931 7.95948 6.31221 7.8476 6.42562L4.51743 9.82361C4.46241 9.87948 4.39683 9.92384 4.32451 9.95412C4.25219 9.98441 4.17456 10 4.09616 10C4.01775 10 3.94013 9.98441 3.8678 9.95412C3.79548 9.92384 3.7299 9.87948 3.67489 9.82361C3.56285 9.71046 3.5 9.55766 3.5 9.39843C3.5 9.23919 3.56285 9.0864 3.67489 8.97324L6.40597 5.9987L3.67489 3.02676Z' fill='%23670FF6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.cbm-presale-toplist__offer-cta-button {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 20px;
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    width: 154px;
    padding: 12px 16px;
    color: #fff;
    background: #f60f2b;
    gap: 4px;
}

.cbm-presale-toplist__offer-cta-button:hover {
    text-decoration: none;
    color: #fff;
    background: #bb081e;
}

.cbm-presale-toplist__offer-payments-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cbm-presale-toplist__offer-logo img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.cbm-presale-toplist__offer-payments-label {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 12.3px;
    font-weight: 400;
    line-height: 17px;
    margin: auto;
    color: #6b7b84;
}

.cbm-presale-toplist__offer-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cbm-presale-toplist__offer-payment {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    width: fit-content;
    height: 20px;
    margin-left: 0 !important;
    background: transparent;
}

.cbm-presale-toplist__offer-payments-hidden-counter {
    font-family: 'Open Sans', sans-serif;
    font-size: 12.3px;
    font-weight: 400;
    font-style: normal;
    line-height: 25px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    cursor: pointer;
    text-decoration: underline;
    color: #000;
}

.cbm-presale-toplist__offer-payment:not(:first-child) {
    margin-left: -4px;
}

.cbm-presale-toplist__offer-payment:hover {
    z-index: 7 !important;
}

.cbm-presale-toplist__offer-payment-image {
    width: 24px;
    height: 24px;
    transition-duration: 0.3s;
    transition-property: transform;
    transform: perspective(1px) translateZ(0);
    object-fit: contain;
}

.cbm-presale-toplist__offer-payment-image:hover {
    transform: scale(1.1);
}

.cbm-presale-toplist__offer-payment-tooltip {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 150%;
    position: absolute;
    z-index: 10;
    top: 26px;
    left: 50%;
    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 rgb(0 0 0 / 14%)) drop-shadow(0 8px 32px rgb(0 0 0 / 10%));
    gap: 14px;
}

.cbm-presale-toplist__offer-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;
}

.cbm-presale-toplist__offer-payment:hover .cbm-presale-toplist__offer-payment-tooltip {
    display: flex !important;
}

.cbm-presale-toplist__offer-payments-tooltip {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 150%;
    position: absolute;
    z-index: 4;
    top: 26px;
    left: -6px;
    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 rgb(0 0 0 / 14%)) drop-shadow(0 8px 32px rgb(0 0 0 / 10%));
}

.cbm-presale-toplist__offer-payments-hidden-counter:hover .cbm-presale-toplist__offer-payments-tooltip {
    display: flex !important;
}

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

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

.cbm-presale-toplist__offer-payment-in-tooltip .cbm-presale-toplist__offer-payment-image {
    width: auto;
    max-height: 24px;
}

.cbm-presale-toplist__offer-payment-in-tooltip-image-wrapper {
    flex-shrink: 0;
    width: 24px;
}

.cbm-presale-toplist__offer-payment-in-tooltip-title {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    color: #060606;
}

.cbm-presale-toplist__offer-launched,
.cbm-presale-toplist__offer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cbm-presale-toplist__date-head,
.cbm-presale-toplist__meta-head {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    color: #8f9698;
}

.cbm-presale-toplist__offer-separator-svg {
    padding: 0 10px;
}

.cbm-presale-toplist__date-body,
.cbm-presale-toplist__meta-body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 24px;
    color: #142025;
}

.cbm-presale-toplist__offer-link {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cbm-presale-toplist__offer-launched-w-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cbm-presale-toplist__offers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (width <= 991px) {
    .cbm-presale-toplist__offer-body {
        padding: unset;
        gap: 16px 12px;
        grid-template-areas:
            'logo title'
            'pros pros'
            'main main';
        grid-template-columns: 88px auto;
        grid-template-rows: auto;
    }

    .cbm-presale-toplist__offer-logo {
        margin-top: 16px;
        margin-left: 16px;
    }

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

    .cbm-presale-toplist__offer-title {
        display: flex;
        align-items: center;
        margin-top: 16px;
        margin-right: 16px;
    }

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

    .cbm-presale-toplist__offer-main {
        flex-direction: column;
        width: unset;
        margin: unset;
        gap: 12px;
    }

    .cbm-presale-toplist__offer-launched-w-meta {
        display: flex;
        width: 100%;
        gap: 12px;
    }

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

    .cbm-presale-toplist__offer-cta-button {
        order: 2;
        width: 100%;
        margin-top: 4px;
    }

    .cbm-presale-toplist__offer-payments-wrapper {
        flex-direction: row;
    }

    .cbm-presale-toplist__offer-payments-label {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        line-height: 18px;
        margin: unset;
        color: #8f9698;
    }

    .cbm-presale-toplist__offer-payments {
        margin-left: auto;
    }

    .cbm-presale-toplist__offer-launched,
    .cbm-presale-toplist__offer-meta {
        display: flex;
        flex-direction: row;
    }

    .cbm-presale-toplist__date-body,
    .cbm-presale-toplist__meta-body {
        font-size: 14px;
        margin-left: auto;
    }

    .cbm-presale-toplist__offer-payments-tooltip {
        left: -80px;
    }

    .cbm-presale-toplist__offer-payments-tooltip:before {
        margin-left: 60px;
    }
}