@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:wght@400;700&family=Source+Serif+4:wght@400;600&display=swap');

.toplist-outlook-india__wrapper {
    margin: 20px 0;
}

.toplist-outlook-india__offers {
    display: flex;
    flex-direction: column;
    counter-reset: bm-toplist-outlook-india-counter;
    gap: 12px;
}

.toplist-outlook-india__show-more-btn {
    font-family: var(--bm-alt-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 24px auto 0;
    padding: 13px 16px;
    color: #101214;
    border: 2px solid #101214;
    border-radius: 7px;
    gap: 8px;
}

.toplist-outlook-india__show-more-btn:hover {
    cursor: pointer;
    color: #FFFFFF;
    background: #101214;
}

.toplist-outlook-india__show-more-btn:hover svg path {
    stroke: #FFFFFF;
}

.toplist-outlook-india__offer {
    position: relative;
    display: grid;
    align-items: center;
    margin-left: 30px;
    padding: 20px;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    background: #FFFFFF;
    grid-template-columns: 135px auto 90px 161px;
    grid-template-rows: auto;
    gap: 0 20px;
    grid-auto-flow: row;
    grid-template-areas:
    "logo main extra cta-btn";
}

.toplist-outlook-india__offer:first-child {
    border-color: #ED1C24;
}

.toplist-outlook-india__offer.hidden {
    display: none;
}

.toplist-outlook-india__offer-logo {
    grid-area: logo;
}

.toplist-outlook-india__offer-logo img {
    width: 100%;
    height: 65px;
    border-radius: 4px;
    object-fit: cover;
}

.toplist-outlook-india__offer-main {
    display: flex;
    flex-direction: column;
    grid-area: main;
    gap: 2px;
}

.toplist-outlook-india__offer-key-feature {
    font-family: "Source Serif 4", serif;
    font-size: 17.25px;
    font-weight: 400;
    font-style: normal;
    line-height: 28.8px;
    padding: 0 0 0 22px;
    color: #000;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M3.75333 8.08997H13.0867' stroke='%23ED1C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.41998 3.42334L13.0866 8.09001L8.41998 12.7567' stroke='%23ED1C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 5px no-repeat;
}

.toplist-outlook-india__offer-title,
.toplist-outlook-india__offer-title p {
    font-family: "Source Serif 4", serif;
    font-size: 22px;
    font-weight: 600;
    font-style: normal;
    line-height: 26px;
    margin: 0;
    color: #000;
}

.toplist-outlook-india__offer-extra {
    display: flex;
    flex-direction: column;
    grid-area: extra;
    gap: 6px;
}

.toplist-outlook-india__offer-rating {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    width: 62px;
    padding: 0 8px;
    border: 1px solid #000;
    border-radius: 8px;
    gap: 5px;
}

.toplist-outlook-india__offer-rating-score {
    font-family: "Source Serif 4", serif;
    font-size: 17px;
    font-weight: 600;
    font-style: normal;
    line-height: 32px;
    position: relative;
    padding-left: 19px;
    color: #000;
}

.toplist-outlook-india__offer-rating-score:before {
    position: absolute;
    top: calc(50% - 7px);
    left: 0;
    width: 14px;
    height: 14px;
    content: '';
    background: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Vector' d='M11.6998 14.254C11.5876 14.2544 11.477 14.2279 11.3771 14.1768L7.79946 12.3038L4.22182 14.1768C4.10565 14.2379 3.97467 14.2651 3.84377 14.2555C3.71287 14.2459 3.58731 14.1997 3.48134 14.1222C3.37538 14.0447 3.29328 13.9391 3.24437 13.8173C3.19545 13.6955 3.1817 13.5624 3.20465 13.4332L3.90615 9.48378L1.01597 6.67778C0.925806 6.58779 0.861839 6.47495 0.830943 6.35136C0.800046 6.22777 0.803386 6.09811 0.840604 5.97628C0.881262 5.8516 0.956054 5.74082 1.05649 5.65651C1.15692 5.57218 1.27898 5.51771 1.40881 5.49926L5.40735 4.91702L7.16811 1.31833C7.22556 1.19973 7.31524 1.0997 7.42691 1.02971C7.53857 0.959728 7.66768 0.922607 7.79946 0.922607C7.93125 0.922607 8.06036 0.959728 8.17202 1.02971C8.28369 1.0997 8.3734 1.19973 8.4308 1.31833L10.2126 4.91L14.2111 5.49224C14.341 5.5107 14.463 5.56518 14.5635 5.64949C14.664 5.73381 14.7387 5.84459 14.7794 5.96926C14.8166 6.09109 14.82 6.22076 14.789 6.34434C14.7582 6.46794 14.6942 6.58078 14.604 6.67076L11.7138 9.47673L12.4153 13.4262C12.4404 13.5577 12.4273 13.6937 12.3776 13.8179C12.3278 13.9423 12.2436 14.0497 12.1347 14.1277C12.0077 14.2167 11.8548 14.2611 11.6998 14.254Z' fill='%23ED1C24'/%3E%3C/svg%3E%0A") center no-repeat;
    background-size: contain;
}

.toplist-outlook-india__offer-brand-name {
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    text-align: center;
    color: #6B7B84;
}

.toplist-outlook-india__offer-cta-btn {
    font-family: "Source Sans 3", sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    padding: 16px 22px 14px 24px;
    text-transform: uppercase;
    color: #FFF;
    border-bottom: 2px solid #B52525;
    border-radius: 4px;
    background: #ED1C24;
    justify-self: flex-end;
    grid-area: cta-btn;
    gap: 8px;
}

.toplist-outlook-india__offer-cta-btn:hover {
    text-decoration: none;
    color: #FFFFFF;
    background: #B52525;
}

.toplist-outlook-india__offer-cta-btn-arrow {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M3.64333 8.08997H12.9767' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.64333 8.08997H12.9767' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.31 3.42334L12.9767 8.09001L8.31 12.7567' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.31 3.42334L12.9767 8.09001L8.31 12.7567' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media screen and (min-width: 992px) {
    .toplist-outlook-india__offer:first-child {
        padding: 16px 20px;
    }

    .toplist-outlook-india__offer:before {
        font-family: "Marcellus", serif;
        font-size: 43.828px;
        font-weight: 400;
        font-style: normal;
        line-height: 52.8px;
        position: absolute;
        top: calc(50% - 27px);
        left: -30px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 54px;
        content: counter(bm-toplist-outlook-india-counter);
        counter-increment: bm-toplist-outlook-india-counter;
        color: #E9E4E4;
    }

    .toplist-outlook-india__offer:nth-child(n+10):before {
        justify-content: flex-end;
    }

    .toplist-outlook-india__offer-logo {
        background: none !important;
    }

    .toplist-outlook-india__offer-extra {
        margin-right: 2px;
    }

    .toplist-outlook-india__offer-main {
        margin-right: -20px;
    }
}

@media screen and (max-width: 991px) {
    .toplist-outlook-india__wrapper {
        margin: 16px 0;
    }

    .toplist-outlook-india__offer {
        align-items: start;
        margin-left: 0;
        padding: 10px 14px 14px;
        grid-template-columns: 95px auto;
        row-gap: 6px;
        column-gap: 14px;
        grid-template-areas:
        "logo extra"
        "logo main"
        "logo cta-btn";
    }

    .toplist-outlook-india__offer-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100% + 26px);
        margin: -11px 0 0 -15px;
        border-radius: 8px 0 0 8px;
        background: #000;
    }

    .toplist-outlook-india__offer-logo img {
        width: 100px;
        height: auto;
        object-fit: contain;
    }

    .toplist-outlook-india__offer-main {
        gap: 8px;
    }

    .toplist-outlook-india__offer-title,
    .toplist-outlook-india__offer-title p {
        font-size: 20px;
        line-height: 22px;
    }

    .toplist-outlook-india__offer-key-feature {
        font-size: 16px;
        line-height: 18.8px;
    }

    .toplist-outlook-india__offer-extra {
        flex-direction: row;
        justify-content: space-between;
    }

    .toplist-outlook-india__offer-rating {
        order: 2;
        width: 54px;
    }

    .toplist-outlook-india__offer-rating-score {
        font-size: 14px;
        line-height: 26px;
    }

    .toplist-outlook-india__offer-brand-name {
        display: flex;
        order: 1;
        gap: 3px;
    }

    .toplist-outlook-india__offer-brand-name:before {
        content: counter(bm-toplist-outlook-india-counter);
        counter-increment: bm-toplist-outlook-india-counter;
    }

    .toplist-outlook-india__offer-brand-name span {
        display: block !important;
    }

    .toplist-outlook-india__offer-cta-btn {
        font-size: 16px;
        margin-top: 6px;
        padding: 14px 22px 12px 24px;
    }
}