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

.dw-toplist-cr__wrapper {
    margin: 50px 0;
}

.dw-toplist-cr__offers {
    display: flex;
    flex-direction: column;
    counter-reset: bm-dw-toplist-cr-counter;
    gap: 8px;
}

.dw-toplist-cr__offer {
    position: relative;
    border-radius: 4px;
    background: #FFFFFF;
}

.dw-toplist-cr__offer.w-ribbon {
    padding: 2px;
    background: #62E55C;
}

.dw-toplist-cr__offer.hidden {
    display: none;
}

.dw-toplist-cr__offer-inner {
    position: relative;
    display: grid;
    overflow: hidden;
    align-items: flex-start;
    padding: 24px;
    border-radius: 4px;
    background: #FFFFFF;
    grid-template-columns: 189px auto 394px 210px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
    "logo main features cta-btn"
    "logo rating features cta-btn";
    gap: 6px 24px;
}

.dw-toplist-cr__offer.w-ribbon .dw-toplist-cr__offer-inner {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.dw-toplist-cr__offer-inner:before {
    font-family: 'Poppins', serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: 15px;
    position: absolute;
    z-index: 1;
    top: 45px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    content: counter(bm-dw-toplist-cr-counter);
    counter-increment: bm-dw-toplist-cr-counter;
    text-align: center;
    text-transform: capitalize;
    color: #000000;
    border-radius: 0 4px 4px 0;
    background: #EEEEEE;
}

.dw-toplist-cr__offer-ribbon {
    font-family: 'Poppins', serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: 29px;
    padding-left: 54px;
    text-transform: capitalize;
    color: #0B062B;
}

.dw-toplist-cr__offer-ribbon-icon {
    position: absolute;
    top: -8px;
    left: 10px;
    width: 40px;
    height: 40px;
}

.dw-toplist-cr__offer-logo-wrapper {
    display: flex;
    flex-direction: column;
    grid-area: logo;
    gap: 4px;
}

.dw-toplist-cr__offer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dw-toplist-cr__offer-logo img {
    width: 177px;
    height: 85px;
    border-radius: 12px;
    object-fit: contain;
}

.dw-toplist-cr__offer-brand-name-desktop,
.dw-toplist-cr__offer-brand-name-mobile {
    font-family: 'Poppins', serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #656E81;
}

.dw-toplist-cr__offer-main {
    grid-area: main;
}

.dw-toplist-cr__offer-title,
.dw-toplist-cr__offer-title p {
    font-family: 'Poppins', serif;
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    line-height: 135%;
    color: #000000;
}

.dw-toplist-cr__offer-title p {
    margin: 0;
    padding: 0;
}

.dw-toplist-cr__offer-key-features {
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
    list-style-type: none !important;
    gap: 6px;
}

.dw-toplist-cr__offer-key-features li {
    font-family: 'Poppins', serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 140%;
    padding: 0 0 0 28px !important;
    color: #434959;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5847 0.000284923C16.1076 0.000284923 20.5847 4.47744 20.5847 10.0003C20.5847 15.5231 16.1076 20.0002 10.5847 20.0002C5.06191 20.0002 0.584758 15.5231 0.584758 10.0003C0.569043 4.4931 5.0207 0.0159998 10.5278 0.000284923C10.5468 0.000230546 10.5658 0.000230546 10.5847 0.000284923Z' fill='%23EEEEEE'/%3E%3Cpath d='M15.7665 7L8.76653 14L5.58472 10.8182' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: left 1px;
}

.dw-toplist-cr__offer-rating-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-area: rating;
}

.dw-toplist-cr__offer-rating-score {
    font-family: 'Ubuntu', serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    color: #000000;
}

.dw-toplist-cr__offer-rating {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.dw-toplist-cr__offer-rating img {
    height: 20px;
}

.dw-toplist-cr__offer-features {
    grid-area: features;
}

.dw-toplist-cr__offer-cta-btn {
    font-family: 'Poppins', serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 135%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    padding: 0 8px;
    text-align: center;
    text-transform: capitalize;
    color: #0B062B;
    border-radius: 12px;
    background: #FFE71E;
    box-shadow: 0 4px 0 #DAC519;
    grid-area: cta-btn;
    gap: 8px;
}

.dw-toplist-cr__offer-cta-btn:after {
    width: 24px;
    height: 24px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.11567 9.69574C6.18246 9.6849 6.25006 9.6799 6.3177 9.68078H17.8343L17.5832 9.56398C17.3377 9.4478 17.1144 9.28968 16.9233 9.09677L13.6937 5.86722C13.2684 5.4612 13.1969 4.80802 13.5244 4.31961C13.9055 3.79915 14.6363 3.68615 15.1568 4.06725C15.1988 4.09805 15.2388 4.13163 15.2764 4.16777L21.1164 10.0078C21.5728 10.4637 21.5732 11.2032 21.1173 11.6596C21.117 11.6599 21.1167 11.6603 21.1164 11.6606L15.2764 17.5006C14.8196 17.9561 14.0801 17.9551 13.6245 17.4983C13.5887 17.4624 13.5552 17.4241 13.5244 17.3838C13.1969 16.8954 13.2684 16.2422 13.6937 15.8362L16.9174 12.6008C17.0888 12.4293 17.2858 12.2854 17.5014 12.1745L17.8518 12.0168H6.38197C5.7853 12.039 5.26181 11.6222 5.14972 11.0357C5.04646 10.3989 5.47892 9.79904 6.11567 9.69574Z' fill='%230B062B'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
}

.dw-toplist-cr__offer-cta-btn:hover {
    text-decoration: none;
    color: #0B062B;
    background: #DAC519;
    box-shadow: 0 4px 0 #DAC519;
}

.dw-toplist-cr__offer-footer {
    padding: 10px 32px;
    border-top: 1px solid #E8E8E8;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #FFFFFF;
}

.dw-toplist-cr__offer-footer-inner {
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "est-and-license facts payment";
    gap: 24px;
}

.dw-toplist-cr__offer-facts {
    display: flex;
    align-items: center;
    gap: 24px;
}

.dw-toplist-cr__offer-payments {
    justify-self: flex-end;
    grid-area: payment;
}

.dw-toplist-cr__offer-fact,
.dw-toplist-cr__offer-payments {
    font-family: 'Poppins', serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    display: flex;
    align-items: center;
    color: #434959;
    gap: 4px;
}

.dw-toplist-cr__offer-fact-head {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
}

.dw-toplist-cr__offer-fact-body {
    font-weight: 600;
    flex-shrink: 0;
}

.dw-toplist-cr__offer-payments-body {
    font-weight: 600;
    display: flex;
    gap: 4px;
}

.dw-toplist-cr__offer-payments-rest {
    position: relative;
    cursor: pointer;
}

.dw-toplist-cr__offer-payments-rest span {
    text-decoration: underline;
}

.dw-toplist-cr__offer-payments-rest:hover > .dw-toplist-cr__offer-payments-tooltip {
    display: block !important;
}

.dw-toplist-cr__offer-payments-tooltip {
    font-family: 'Poppins', serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 150%;
    position: absolute;
    z-index: 10;
    top: 28px;
    left: 50%;
    flex-direction: column;
    width: max-content;
    padding: 12px 16px;
    transform: translateX(-50%);
    color: #FFFFFF;
    border-radius: 4px;
    background: #0E081DE5;
    filter: drop-shadow(0px 1px 4px #0000000A) drop-shadow(0px 8px 32px #00000019);
}

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

.dw-toplist-cr__show-more-btn {
    font-family: 'Poppins', serif;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 130%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 220px;
    height: 48px;
    margin: 24px auto 0;
    padding: 0 16px;
    text-align: center;
    text-transform: capitalize;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 12px;
}

.dw-toplist-cr__show-more-btn:hover {
    cursor: pointer;
    opacity: 0.6;
}

@media screen and (min-width: 992px) {
    .dw-toplist-cr__offer.w-ribbon .dw-toplist-cr__offer-inner:before {
        top: 50px;
    }

    .dw-toplist-cr__offer-logo-wrapper {
        height: calc(100% + 48px);
        margin: -24px 0 -24px -24px;
        padding-bottom: 12px;
    }

    .dw-toplist-cr__offer.w-ribbon .dw-toplist-cr__offer-logo-wrapper {
        padding-bottom: 22px;
    }

    .dw-toplist-cr__offer-logo {
        margin: 12px 12px 0 24px;
    }

    .dw-toplist-cr__offer-brand-name-desktop {
        margin-left: 24px;
    }
}

@media screen and (max-width: 991px) {
    .dw-toplist-cr__offer-ribbon {
        padding-left: 46px;
    }

    .dw-toplist-cr__offer-ribbon-icon {
        top: -6px;
        left: 4px;
        width: 36px;
        height: 36px;
    }

    .dw-toplist-cr__offer-inner {
        padding: 12px 16px;
        grid-template-columns: 125px auto;
        grid-template-rows: auto;
        grid-template-areas:
        "logo main"
        "rating brand-name"
        "cta-btn cta-btn"
        "features features";
        gap: 0 12px;
    }

    .dw-toplist-cr__offer-inner:before {
        top: 9px;
        left: 7px;
        width: 18px;
        height: 18px;
        border-radius: 4px;
    }

    .dw-toplist-cr__offer-logo-wrapper {
        margin-top: -3px;
    }

    .dw-toplist-cr__offer-logo img {
        width: 125px;
        height: 60px;
    }

    .dw-toplist-cr__offer-brand-name-desktop {
        display: none;
    }

    .dw-toplist-cr__offer-brand-name-mobile {
        display: block !important;
        align-self: center;
        margin-top: 4px;
        grid-area: brand-name;
    }

    .dw-toplist-cr__offer-title,
    .dw-toplist-cr__offer-title p {
        font-size: 16px;
    }

    .dw-toplist-cr__offer-rating-wrapper {
        justify-content: center;
        margin-top: 4px;
        margin-left: -12px;
    }

    .dw-toplist-cr__offer-rating img {
        height: 16.55px;
    }

    .dw-toplist-cr__offer-cta-btn {
        font-size: 16px;
        font-weight: 600;
        line-height: 130%;
        height: 48px;
        margin-top: 12px;
        gap: 4px;
    }

    .dw-toplist-cr__offer-cta-btn:after {
        top: 10px;
        right: 8px;
    }

    .dw-toplist-cr__offer-features {
        margin-top: 16px;
    }

    .dw-toplist-cr__offer-features:empty {
        margin: 0;
    }

    .dw-toplist-cr__offer-key-features {
        gap: 4px;
    }

    .dw-toplist-cr__offer-key-features li {
        font-size: 14px;
        line-height: 150%;
        padding: 0 0 0 26px !important;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2086_10559)'%3E%3Cpath d='M9.00001 0.552039C13.9705 0.552039 18 4.58148 18 9.55202C18 14.5226 13.9705 18.552 9.00001 18.552C4.02948 18.552 3.73308e-05 14.5226 3.73308e-05 9.55202C-0.014106 4.59557 3.99238 0.566182 8.94877 0.552039C8.96585 0.55199 8.98293 0.55199 9.00001 0.552039Z' fill='%23EEEEEE'/%3E%3Cpath d='M13.6636 6.85181L7.36364 13.1518L4.5 10.2882' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2086_10559'%3E%3Crect y='0.551758' width='18' height='18' rx='9' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    }

    .dw-toplist-cr__offer-footer {
        display: flex;
        flex-direction: column;
        min-height: 40px;
        padding: 6px 16px 16px;
        border-top: 1px solid #FFFFFF;
        gap: 16px;
    }

    .dw-toplist-cr__offer-footer-inner {
        display: none;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
        gap: 8px;
    }

    .dw-toplist-cr__offer-footer.dw-toplist-cr__offer-footer-inner-visible {
        border-top: 1px solid #E8E8E8;
    }

    .dw-toplist-cr__offer-footer.dw-toplist-cr__offer-footer-inner-visible .dw-toplist-cr__offer-footer-inner {
        display: flex;
    }

    .dw-toplist-cr__offer-footer-more-btn {
        font-family: 'Poppins', serif;
        font-size: 14px;
        font-weight: 600;
        font-style: normal;
        line-height: 125%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-transform: capitalize;
        color: #147B45;
        text-decoration-line: underline;
    }

    .dw-toplist-cr__offer-footer-more-btn:after {
        width: 16px;
        height: 16px;
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7.21838L8 11.2184L12 7.21838' stroke='%23147B45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center;
    }

    .dw-toplist-cr__offer-footer.dw-toplist-cr__offer-footer-inner-visible .dw-toplist-cr__offer-footer-more-btn:after {
        transform: rotate(180deg);
    }

    .dw-toplist-cr__offer-facts {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .dw-toplist-cr__offer-payments-rest {
        display: none;
    }

    .dw-toplist-cr__offer-payments {
        display: block;
    }

    .dw-toplist-cr__offer-payments-head,
    .dw-toplist-cr__offer-payments-body {
        display: inline;
    }

    .dw-toplist-cr__offer-payments-rest-mobile {
        display: inline !important;
    }
}