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

.toplist-ocr__wrapper {
    margin: 32px 0 40px;
}

.toplist-ocr__offers {
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0px 0px 4px #0000000A) drop-shadow(0px 2px 4px #0000000A);
}

.toplist-ocr__offer {
    display: grid;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #E8E8E8;
    background: #FFFFFF;
    grid-template-columns: 219px auto 292.5px 240px;
    grid-template-rows: auto;
    grid-template-areas:
    "logo main title extra";
    gap: 24px;
}

.toplist-ocr__offer:last-of-type {
    border-bottom: unset;
}

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

.toplist-ocr__offer-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: logo;
}

.toplist-ocr__offer-logo {
    flex-shrink: 0;
}

.toplist-ocr__offer-logo img {
    width: 195px;
    height: 69px;
    object-fit: contain;
}

.toplist-ocr__offer-main {
    display: flex;
    align-items: center;
    grid-area: main;
}

.toplist-ocr__offer-rating-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    width: 62px;
    height: 62px;
}

.toplist-ocr__offer-rating-circle {
    position: absolute;
    transform: rotate(-90deg);
}

.toplist-ocr__offer-rating-circle .bg {
    fill: none;
    stroke: #ACE9FF;
    stroke-width: 3.44;
}

.toplist-ocr__offer-rating-circle .progress {
    transition: stroke-dashoffset 0.5s ease-out;
    fill: none;
    stroke: #27BEF4;
    stroke-width: 3.44;
    stroke-dasharray: 175.93;
    stroke-dashoffset: calc(175.93 - (175.93 * var(--percent)) / 100);
}

.toplist-ocr__offer-rating-score {
    font-family: 'Rubik', serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    z-index: 1;
    text-align: center;
    color: #2839A2;
}

.toplist-ocr__offer-rating-rated {
    font-family: 'Open Sans', serif;
    font-size: 9px;
    font-weight: 600;
    font-style: normal;
    line-height: 18px;
    z-index: 1;
    text-align: center;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #2839A199;
}

.toplist-ocr__offer-key-feature {
    font-family: 'Open Sans', serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    color: #2839A1D8;
}

.toplist-ocr__offer-title {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: title;
}

.toplist-ocr__offer-title,
.toplist-ocr__offer-title p {
    font-family: 'Rubik', serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 26px;
    text-align: center;
    color: #2839A2;
}

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

.toplist-ocr__offer-title span {
    font-weight: 700;
}

.toplist-ocr__offer-extra {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    grid-area: extra;
}

.toplist-ocr__offer-cta-btn {
    font-family: 'Rubik', serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    padding: 0 8px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
    border-radius: 80px;
    background: #D23360;
    box-shadow: 0 1px 2px #FC15793D, 0 4px 16px #FC15795B;
    gap: 8px;
}

.toplist-ocr__offer-cta-btn:after {
    width: 16px;
    height: 16px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.542 14.5425H2.45703C2.32442 14.5425 2.19725 14.4898 2.10348 14.3961C2.00971 14.3023 1.95703 14.1751 1.95703 14.0425V1.95752C1.95703 1.82491 2.00971 1.69773 2.10348 1.60397C2.19725 1.5102 2.32442 1.45752 2.45703 1.45752H8.49953C8.63214 1.45752 8.75932 1.5102 8.85309 1.60397C8.94685 1.69773 8.99953 1.82491 8.99953 1.95752C8.99953 2.09013 8.94685 2.2173 8.85309 2.31107C8.75932 2.40484 8.63214 2.45752 8.49953 2.45752H2.95703V13.5425H14.042V8.00002C14.042 7.86741 14.0947 7.74023 14.1885 7.64647C14.2822 7.5527 14.4094 7.50002 14.542 7.50002C14.6746 7.50002 14.8018 7.5527 14.8956 7.64647C14.9894 7.74023 15.042 7.86741 15.042 8.00002V14.0425C15.042 14.1751 14.9894 14.3023 14.8956 14.3961C14.8018 14.4898 14.6746 14.5425 14.542 14.5425Z' fill='white'/%3E%3Cpath d='M15.0315 1.86003C15.0315 1.84503 15.0315 1.83003 15.019 1.81753C15.0149 1.80062 15.0099 1.78393 15.004 1.76753C14.9966 1.75041 14.9883 1.73372 14.979 1.71753C14.979 1.71753 14.979 1.69253 14.959 1.68003C14.9226 1.62564 14.8759 1.57893 14.8215 1.54253L14.784 1.52253L14.734 1.49753L14.684 1.48253L14.639 1.47003C14.6074 1.46702 14.5756 1.46702 14.544 1.47003H10.834C10.7014 1.47003 10.5742 1.52271 10.4805 1.61648C10.3867 1.71025 10.334 1.83743 10.334 1.97003C10.334 2.10264 10.3867 2.22982 10.4805 2.32359C10.5742 2.41736 10.7014 2.47003 10.834 2.47003H13.334L8.14653 7.64753C8.05271 7.74135 8 7.8686 8 8.00129C8 8.13397 8.05271 8.26121 8.14653 8.35503C8.24035 8.44885 8.3676 8.50156 8.50028 8.50156C8.63296 8.50156 8.76021 8.44885 8.85403 8.35503L14.0415 3.16503V5.66503C14.0415 5.79764 14.0942 5.92482 14.188 6.01859C14.2817 6.11236 14.4089 6.16503 14.5415 6.16503C14.6741 6.16503 14.8013 6.11236 14.8951 6.01859C14.9888 5.92482 15.0415 5.79764 15.0415 5.66503V1.95753C15.0414 1.92479 15.038 1.89213 15.0315 1.86003Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.toplist-ocr__offer-cta-btn:hover {
    text-decoration: none;
    color: #FFFFFF;
    background: #AF0D3A;
}

.toplist-ocr__offer-accepted-players {
    font-family: 'Open Sans', serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #2839A1D8;
    gap: 8px;
}

@media screen and (min-width: 992px) {
    .toplist-ocr__offers {
        overflow: hidden;
        border-radius: 8px;
    }

    .toplist-ocr__offer-logo-wrapper {
        padding-right: 24px;
        border-right: 0.5px solid #D3D3D3;
    }

    .toplist-ocr__offer-title {
        height: calc(100% + 32px);
        margin: -16px 0;
        padding: 16px;
        background: #E3EBFE63;
    }

    .toplist-ocr__offer-main {
        gap: 24px;
    }
}

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

    .toplist-ocr__offers {
        gap: 1px;
    }

    .toplist-ocr__offer {
        position: relative;
        overflow: hidden;
        padding: 16px;
        border-radius: 8px;
        background: #F5F8FF;
        grid-template-columns: auto;
        grid-template-areas:
        "logo"
        "title"
        "main"
        "extra";
        gap: 0;
    }

    .toplist-ocr__offer-logo-wrapper {
        margin: -16px -16px 0;
        padding: 18px 0;
        background: #FFFFFF;
    }

    .toplist-ocr__offer-logo img {
        width: 155.17px;
        height: 64.8px;
    }

    .toplist-ocr__offer-rating-wrapper {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 54px;
        height: 54px;
    }

    .toplist-ocr__offer-rating-circle {
        width: 54px;
        height: 54px;
    }

    .toplist-ocr__offer-rating-score {
        font-size: 16px;
        font-weight: 600;
        line-height: 15px;
    }

    .toplist-ocr__offer-rating-rated {
        line-height: 16px;
    }

    .toplist-ocr__offer-title {
        margin-top: 12px;
    }

    .toplist-ocr__offer-title,
    .toplist-ocr__offer-title p {
        font-size: 20px;
        line-height: 28px;
    }

    .toplist-ocr__offer-main {
        justify-content: center;
    }

    .toplist-ocr__offer-key-feature {
        font-size: 12px;
        line-height: 18px;
        text-align: center;
    }

    .toplist-ocr__offer-extra {
        margin-top: 12px;
    }

    .toplist-ocr__offer-cta-btn {
        font-size: 16px;
        line-height: 28px;
    }

    .toplist-ocr__offer-accepted-players {
        line-height: 18px;
    }
}