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

.toplist-customtheme__wrapper {
    margin-bottom: 24px;
}

.toplist-customtheme__offers {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.toplist-customtheme__offer {
    position: relative;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    border: 1px solid #ffffff0c;
    border-radius: 12px;
    background-color: #1a2542ff;
}

.toplist-customtheme__offer:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px #0000004c;
}

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

.toplist-customtheme__offer-ribbon {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    display: flex;
    align-items: center;
    padding: 6px 16px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color);
    border-radius: 11px 11px 0 0;
    background: linear-gradient(to right, var(--background), transparent);
}

.toplist-customtheme__offer-ribbon:before {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    content: '';
    background-color: var(--color);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z'%3E%3C/path%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.toplist-customtheme__offer-inner {
    display: grid;
    align-items: center;
    padding: 24px;
    border-radius: 0 0 11px 11px;
    gap: 24px;
    grid-template-areas: 'logo main actions';
    grid-template-columns: 224px auto 192px;
    grid-template-rows: 1fr;
}

.toplist-customtheme__offer-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    grid-area: logo;
}

.toplist-customtheme__offer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    min-width: 64px;
    height: 64px;
    border-radius: 12px;
}

.toplist-customtheme__offer-logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.toplist-customtheme__offer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toplist-customtheme__offer-brand {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: #fff;
}

.toplist-customtheme__offer-rating {
    display: flex;
    align-items: center;
    height: 24px;
    gap: 6px;
}

.toplist-customtheme__offer-rating-stars {
    position: relative;
    width: 88px;
    height: 16px;
}

.toplist-customtheme__offer-rating-stars-empty {
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='88' height='16' viewBox='0 0 88 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.32391 1.76465C7.59272 1.18953 8.40728 1.18953 8.67609 1.76465L10.3079 5.25597L14.0318 5.82734C14.6327 5.91954 14.8781 6.65558 14.4536 7.09253L11.7343 9.89135L12.3683 13.7942C12.4686 14.4121 11.8154 14.8742 11.2698 14.5713L8 12.7562L4.73019 14.5713C4.18456 14.8742 3.53138 14.4121 3.63175 13.7942L4.26569 9.89135L1.54642 7.09253C1.1219 6.65558 1.36727 5.91954 1.96819 5.82734L5.69207 5.25597L7.32391 1.76465Z' fill='%23374151'/%3E%3Cpath d='M25.3239 1.76465C25.5927 1.18953 26.4073 1.18953 26.6761 1.76465L28.3079 5.25597L32.0318 5.82734C32.6327 5.91954 32.8781 6.65558 32.4536 7.09253L29.7343 9.89135L30.3683 13.7942C30.4686 14.4121 29.8154 14.8742 29.2698 14.5713L26 12.7562L22.7302 14.5713C22.1846 14.8742 21.5314 14.4121 21.6317 13.7942L22.2657 9.89135L19.5464 7.09253C19.1219 6.65558 19.3673 5.91954 19.9682 5.82734L23.6921 5.25597L25.3239 1.76465Z' fill='%23374151'/%3E%3Cpath d='M43.3239 1.76465C43.5927 1.18953 44.4073 1.18953 44.6761 1.76465L46.3079 5.25597L50.0318 5.82734C50.6327 5.91954 50.8781 6.65558 50.4536 7.09253L47.7343 9.89135L48.3682 13.7942C48.4686 14.4121 47.8154 14.8742 47.2698 14.5713L44 12.7562L40.7302 14.5713C40.1846 14.8742 39.5314 14.4121 39.6317 13.7942L40.2657 9.89135L37.5464 7.09253C37.1219 6.65558 37.3673 5.91954 37.9682 5.82734L41.6921 5.25597L43.3239 1.76465Z' fill='%23374151'/%3E%3Cpath d='M61.3239 1.76465C61.5927 1.18953 62.4073 1.18953 62.6761 1.76465L64.3079 5.25597L68.0318 5.82734C68.6327 5.91954 68.8781 6.65558 68.4536 7.09253L65.7343 9.89135L66.3682 13.7942C66.4686 14.4121 65.8154 14.8742 65.2698 14.5713L62 12.7562L58.7302 14.5713C58.1846 14.8742 57.5314 14.4121 57.6317 13.7942L58.2657 9.89135L55.5464 7.09253C55.1219 6.65558 55.3673 5.91954 55.9682 5.82734L59.6921 5.25597L61.3239 1.76465Z' fill='%23374151'/%3E%3Cpath d='M79.3239 1.76465C79.5927 1.18953 80.4073 1.18953 80.6761 1.76465L82.3079 5.25597L86.0318 5.82734C86.6327 5.91954 86.8781 6.65558 86.4536 7.09253L83.7343 9.89135L84.3682 13.7942C84.4686 14.4121 83.8154 14.8742 83.2698 14.5713L80 12.7562L76.7302 14.5713C76.1846 14.8742 75.5314 14.4121 75.6317 13.7942L76.2657 9.89135L73.5464 7.09253C73.1219 6.65558 73.3673 5.91954 73.9682 5.82734L77.6921 5.25597L79.3239 1.76465Z' fill='%23374151'/%3E%3C/svg%3E%0A");
}

.toplist-customtheme__offer-rating-stars-full {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='88' height='16' viewBox='0 0 88 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.32391 1.76465C7.59272 1.18953 8.40728 1.18953 8.67609 1.76465L10.3079 5.25597L14.0318 5.82734C14.6327 5.91954 14.8781 6.65558 14.4536 7.09253L11.7343 9.89135L12.3683 13.7942C12.4686 14.4121 11.8154 14.8742 11.2698 14.5713L8 12.7562L4.73019 14.5713C4.18456 14.8742 3.53138 14.4121 3.63175 13.7942L4.26569 9.89135L1.54642 7.09253C1.1219 6.65558 1.36727 5.91954 1.96819 5.82734L5.69207 5.25597L7.32391 1.76465Z' fill='%23f59e0b'/%3E%3Cpath d='M25.3239 1.76465C25.5927 1.18953 26.4073 1.18953 26.6761 1.76465L28.3079 5.25597L32.0318 5.82734C32.6327 5.91954 32.8781 6.65558 32.4536 7.09253L29.7343 9.89135L30.3683 13.7942C30.4686 14.4121 29.8154 14.8742 29.2698 14.5713L26 12.7562L22.7302 14.5713C22.1846 14.8742 21.5314 14.4121 21.6317 13.7942L22.2657 9.89135L19.5464 7.09253C19.1219 6.65558 19.3673 5.91954 19.9682 5.82734L23.6921 5.25597L25.3239 1.76465Z' fill='%23f59e0b'/%3E%3Cpath d='M43.3239 1.76465C43.5927 1.18953 44.4073 1.18953 44.6761 1.76465L46.3079 5.25597L50.0318 5.82734C50.6327 5.91954 50.8781 6.65558 50.4536 7.09253L47.7343 9.89135L48.3682 13.7942C48.4686 14.4121 47.8154 14.8742 47.2698 14.5713L44 12.7562L40.7302 14.5713C40.1846 14.8742 39.5314 14.4121 39.6317 13.7942L40.2657 9.89135L37.5464 7.09253C37.1219 6.65558 37.3673 5.91954 37.9682 5.82734L41.6921 5.25597L43.3239 1.76465Z' fill='%23f59e0b'/%3E%3Cpath d='M61.3239 1.76465C61.5927 1.18953 62.4073 1.18953 62.6761 1.76465L64.3079 5.25597L68.0318 5.82734C68.6327 5.91954 68.8781 6.65558 68.4536 7.09253L65.7343 9.89135L66.3682 13.7942C66.4686 14.4121 65.8154 14.8742 65.2698 14.5713L62 12.7562L58.7302 14.5713C58.1846 14.8742 57.5314 14.4121 57.6317 13.7942L58.2657 9.89135L55.5464 7.09253C55.1219 6.65558 55.3673 5.91954 55.9682 5.82734L59.6921 5.25597L61.3239 1.76465Z' fill='%23f59e0b'/%3E%3Cpath d='M79.3239 1.76465C79.5927 1.18953 80.4073 1.18953 80.6761 1.76465L82.3079 5.25597L86.0318 5.82734C86.6327 5.91954 86.8781 6.65558 86.4536 7.09253L83.7343 9.89135L84.3682 13.7942C84.4686 14.4121 83.8154 14.8742 83.2698 14.5713L80 12.7562L76.7302 14.5713C76.1846 14.8742 75.5314 14.4121 75.6317 13.7942L76.2657 9.89135L73.5464 7.09253C73.1219 6.65558 73.3673 5.91954 73.9682 5.82734L77.6921 5.25597L79.3239 1.76465Z' fill='%23f59e0b'/%3E%3C/svg%3E%0A");
}

.toplist-customtheme__offer-rating-value {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    position: relative;
    top: 1px;
    color: #9ca3af;
}

.toplist-customtheme__offer-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-area: main;
}

.toplist-customtheme__offer-bonus {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #9ca3af;
}

.toplist-customtheme__offer-title {
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 32px;
    color: #fff;
}

.toplist-customtheme__offer-title span {
    color: #f59e0b;
}

.toplist-customtheme__offer-key-features {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    gap: 8px;
}

.toplist-customtheme__offer-key-features-item {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    padding: 2px 8px;
    color: #d1d5db;
    border: 1px solid #ffffff1a;
    border-radius: 4px;
    background-color: #ffffff0c;
}

.toplist-customtheme__offer-actions {
    display: flex;
    align-items: end;
    flex-direction: column;
    gap: 8px;
    grid-area: actions;
}

.toplist-customtheme__offer-cta-btn {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 151px;
    height: 44px;
    padding: 6px 12px;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: unset;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 8px;
    background: #22c55e;
}

.toplist-customtheme__offer-cta-btn:hover {
    transform: translateY(-1px);
    text-decoration: unset;
    color: #fff;
    background-color: #16a34a;
    box-shadow: 0 4px 15px #22c55e66;
}

.toplist-customtheme__offer:first-child .toplist-customtheme__offer-cta-btn {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px #22c55e4c;
    }

    15% {
        box-shadow: 0 0 12.593px #22c55e67;
    }

    35% {
        box-shadow: 0 0 19.8533px #22c55e7f;
    }

    55% {
        box-shadow: 0 0 15.7023px #22c55e70;
    }

    75% {
        box-shadow: 0 0 8px #22c55e59;
    }

    90% {
        box-shadow: 0 0 5.116px #22c55e4c;
    }

    100% {
        box-shadow: 0 0 5px #22c55e4c;
    }
}

.toplist-customtheme__offer-terms,
.toplist-customtheme__offer-terms p {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    margin-bottom: 0;
    text-align: center;
    color: #6b7280;
}

@media (max-width: 1024px) {
    .toplist-customtheme__offer-inner {
        padding: 16px;
        gap: 16px;
        grid-template-areas:
            'logo'
            'main'
            'actions';
        grid-template-columns: auto;
    }

    .toplist-customtheme__offer-title {
        font-size: 20px;
        line-height: 28px;
    }

    .toplist-customtheme__offer-actions {
        align-items: stretch;
    }

    .toplist-customtheme__offer-cta-btn {
        width: 100%;
    }
}