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

.toplist-techcity__wrapper {
    margin: 25px 0;
}

.toplist-techcity__offers {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    counter-reset: bm-toplist-techcity-counter;
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 1px 3px 0 #0000000a,
        0 8px 24px 0 #00000014;
    gap: 4px;
}

.toplist-techcity__filter-tags-json {
    box-sizing: border-box;
}

.toplist-techcity__filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0;
    gap: 8px;
}

.toplist-techcity__filter-tag {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 135%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    height: 46px;
    padding: 14px 24px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: #fff;
    background: #96c3ff;
}

.toplist-techcity__filter-tag.filter-tag-active {
    background: #4a97ff;
}

.toplist-techcity__filter-tag:first-child:before {
    display: inline-flex;
    width: 13.5px;
    height: 15.5px;
    margin-right: 6px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16' fill='none'%3E%3Cpath d='M9.67676 2.39636C10.7544 2.5657 11.7435 2.75352 12.4004 2.88562C12.9033 2.98668 13.2121 3.05507 13.2188 3.05652V3.05554C13.2524 3.06315 13.2752 3.095 13.2725 3.12976C13.2675 3.1844 12.7955 8.44622 11.7021 14.3251L11.4756 15.5077C11.469 15.5405 11.4402 15.5643 11.4072 15.5643C11.4072 15.5643 11.4064 15.5644 11.4053 15.5643C11.4045 15.5643 11.4036 15.5634 11.4023 15.5634H11.4033C11.3951 15.5627 11.086 15.5411 10.584 15.496C9.7946 15.4252 8.52953 15.2979 7.21289 15.1073C6.59995 15.0185 6.00345 14.92 5.46582 14.8251L4.07031 14.5634C4.05943 14.5612 4.04934 14.557 4.04102 14.5507L4.02148 14.5262C4.01194 14.5076 4.01144 14.4854 4.02051 14.4657L9.60254 2.4364C9.61569 2.40813 9.64604 2.39172 9.67676 2.39636Z' fill='%239CC0FD' stroke='%235C8FFC' stroke-width='0.312301'/%3E%3Cpath d='M4.98926 0.436157C6.42877 0.436167 7.80364 0.494969 8.6709 0.541626C9.22848 0.57183 9.57619 0.596927 9.59473 0.598267C9.63014 0.600903 9.65821 0.62978 9.66016 0.664673C9.66475 0.748216 9.97876 6.50693 9.71973 13.028L9.66016 14.3434C9.65885 14.3693 9.64285 14.3921 9.62012 14.403L9.59473 14.4098C9.57603 14.4111 9.23166 14.4353 8.67871 14.4655C7.8121 14.5124 6.43332 14.5719 4.98926 14.5719C3.79907 14.5719 2.65249 14.5323 1.80078 14.4918C1.37508 14.4716 1.02318 14.4505 0.776367 14.4352C0.653202 14.4275 0.556127 14.4212 0.489258 14.4166C0.456077 14.4144 0.429918 14.413 0.412109 14.4117C0.403196 14.4111 0.395423 14.4101 0.390625 14.4098H0.382812C0.356393 14.4078 0.334356 14.3907 0.324219 14.3678L0.318359 14.3434C-0.0439266 7.30091 0.313529 0.752576 0.318359 0.664673C0.320313 0.629689 0.347849 0.600926 0.382812 0.598267L0.381836 0.59729C0.409645 0.59538 2.6112 0.436157 4.98926 0.436157Z' fill='white' stroke='%235C8FFC' stroke-width='0.312301'/%3E%3Cpath d='M2.07606 3.50982C2.23987 3.50786 2.51083 3.50599 2.79973 3.50964C2.84101 3.63874 2.88019 3.77152 2.91541 3.90557C2.9421 4.00711 3.03371 4.07433 3.13402 4.07433C3.15304 4.07433 3.17237 4.07188 3.19164 4.06685C3.31245 4.03509 3.38465 3.91142 3.35292 3.79061C3.09786 2.82005 2.65863 1.93987 2.64002 1.9029C2.60166 1.82645 2.52343 1.7782 2.43791 1.7782C2.35238 1.7782 2.27416 1.82645 2.2358 1.9029C2.21722 1.9399 1.77793 2.82008 1.52286 3.79061C1.49111 3.91142 1.56333 4.03509 1.68414 4.06685C1.80489 4.09854 1.92862 4.02641 1.96038 3.90557C1.9956 3.77168 2.03477 3.63896 2.07606 3.50982ZM2.438 2.54837C2.49997 2.69267 2.57069 2.86538 2.64195 3.05582C2.49147 3.05488 2.35097 3.05521 2.2339 3.05603C2.30522 2.86556 2.376 2.69276 2.438 2.54837Z' fill='%235C8FFC'/%3E%3Cpath d='M8.4562 12.9461C8.20113 11.9756 7.76187 11.0954 7.74326 11.0584C7.7049 10.982 7.62667 10.9337 7.54115 10.9337C7.45563 10.9337 7.3774 10.982 7.33904 11.0584C7.32046 11.0954 6.8812 11.9756 6.62614 12.9461C6.59438 13.0669 6.66661 13.1906 6.78741 13.2224C6.90822 13.2541 7.03189 13.1819 7.06365 13.0611C7.09884 12.9272 7.13802 12.7945 7.17933 12.6653C7.34314 12.6634 7.61407 12.6615 7.90297 12.6652C7.94429 12.7943 7.98349 12.9271 8.01871 13.0611C8.0454 13.1626 8.13702 13.2298 8.23732 13.2298C8.25635 13.2298 8.27568 13.2274 8.29495 13.2224C8.41572 13.1906 8.48792 13.0669 8.4562 12.9461ZM7.33714 12.2115C7.40843 12.0211 7.47915 11.8484 7.54115 11.704C7.60312 11.8483 7.67384 12.021 7.7451 12.2114C7.59465 12.2104 7.45415 12.2107 7.33714 12.2115Z' fill='%235C8FFC'/%3E%3Cpath d='M8.07024 6.64139C8.07024 9.11454 5.03739 9.95471 4.99004 9.96768C4.98974 9.96768 4.98974 9.96768 4.98944 9.96798C4.98944 9.96798 1.90894 9.13414 1.90894 6.64139C1.90894 4.40407 4.98944 4.69689 4.98944 6.37421C4.98944 5.59827 5.64896 5.11848 6.35795 5.04882C7.18092 4.9677 8.07024 5.43935 8.07024 6.64139Z' fill='%239CC0FD'/%3E%3Cpath d='M8.07044 6.64147C8.07044 9.11462 5.03758 9.95479 4.99023 9.96775C5.93987 9.21323 6.95464 8.04436 6.95464 6.50094C6.95464 5.82724 6.71429 5.35077 6.35814 5.0489C7.18112 4.96778 8.07044 5.43943 8.07044 6.64147Z' fill='%23B0CDFD'/%3E%3C/svg%3E");
}

.toplist-techcity__offer {
    overflow: hidden;
}

.toplist-techcity__offer-inner {
    display: grid;
    overflow: hidden;
    counter-increment: bm-toplist-techcity-counter 1;
    border-left: 4px solid #fff;
    grid-template-areas: 'logo main';
    grid-template-columns: 222px auto;
    grid-template-rows: auto;
}

.toplist-techcity__offer-last-visible .toplist-techcity__offer-inner,
.toplist-techcity__offer:last-child .toplist-techcity__offer-inner {
    border-bottom: 4px solid #fff;
    border-bottom-left-radius: 14px;
}

.toplist-techcity__offer:first-child .toplist-techcity__offer-inner {
    border-top: 4px solid #fff;
    border-top-left-radius: 14px;
}

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

.toplist-techcity__offer-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%);
    grid-area: logo;
}

.toplist-techcity__offer-logo:before {
    font-family: Onest, sans-serif;
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
    line-height: 12px;
    position: absolute;
    top: 8px;
    right: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 24px;
    content: counter(bm-toplist-techcity-counter);
    text-align: center;
    color: #fff;
    background: #1c2b39;
    clip-path: polygon(0 0, 87% 0, 100% 100%, 13% 100%);
}

.toplist-techcity__offer-logo img {
    width: 150px;
    height: 60px;
    margin-right: 20px;
    object-fit: contain;
}

.toplist-techcity__offer-main {
    display: grid;
    align-items: center;
    padding: 27.5px 32px;
    gap: 20px;
    grid-area: main;
    grid-template-areas: 'title cta-btn';
    grid-template-columns: auto 220px;
    grid-template-rows: auto;
}

.toplist-techcity__offer-last-visible .toplist-techcity__offer-main {
    border-bottom: none !important;
}

.toplist-techcity__offer:not(:last-child) .toplist-techcity__offer-main {
    border-bottom: 1px solid #dadada;
}

.toplist-techcity__offer-title-wrapper {
    grid-area: title;
}

.toplist-techcity__offer-title {
    font-family: Corbel, sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    line-height: 24px;
    margin-bottom: 8px;
    color: #1c2b39;
}

.toplist-techcity__offer-star-rating img {
    height: 14px;
}

.toplist-techcity__offer-cta-btn {
    font-family: Corbel, sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    letter-spacing: -0.2px;
    color: #fff;
    background: #4a97ff;
    grid-area: cta-btn;
}

.toplist-techcity__offer-cta-btn:hover {
    text-decoration: none;
    color: #fff;
    background: #2265bf;
}

.toplist-techcity__offer-cta-btn:after {
    position: relative;
    top: 1px;
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M13 7.99998L0.999999 14.9282L1 1.07178L13 7.99998Z' fill='white'/%3E%3C/svg%3E");
}

.toplist-techcity__show-more-btn {
    font-family: Corbel, sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 44px;
    margin: 8px auto 0;
    padding: 12px 8px;
    color: #000;
    border: 1px solid #000;
}

.toplist-techcity__show-more-btn:hover {
    cursor: pointer;
    border-color: #a4a4a4;
}

@media (max-width: 991px) {
    .toplist-techcity__wrapper {
        margin: 23px 0;
    }

    .toplist-techcity__offers {
        border-radius: 16px;
        box-shadow:
            0 1px 2px 0 #0000000a,
            0 4px 16px 0 #0000000f;
        gap: 8px;
    }

    .toplist-techcity__filter-wrapper {
        overflow-x: scroll;
        flex-wrap: nowrap;
        width: 100vw;
        margin: 0 -16px 8px;
        padding: 0 16px;
    }

    .toplist-techcity__filter-wrapper::-webkit-scrollbar {
        display: none;
    }

    .toplist-techcity__offer {
        border-bottom: 1px solid #dadada;
    }

    .toplist-techcity__offer:last-child,
    .toplist-techcity__offer-last-visible {
        border-bottom: none;
    }

    .toplist-techcity__offer-inner {
        border-right: 8px solid #fff;
        border-left: 8px solid #fff;
        grid-template-areas:
            'logo'
            'main';
        grid-template-columns: auto;
    }

    .toplist-techcity__offer:first-child .toplist-techcity__offer-inner {
        border-top: 8px solid #fff;
        border-top-left-radius: 16px;
    }

    .toplist-techcity__offer-logo {
        height: 100px;
        clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%);
    }

    .toplist-techcity__offer-logo:before {
        top: 12px;
        right: 11px;
        width: 28px;
        clip-path: polygon(0 0, 79% 0, 100% 100%, 21% 100%);
    }

    .toplist-techcity__offer-logo img {
        width: 200px;
        height: 80px;
    }

    .toplist-techcity__offer-main {
        padding: 16px;
        border-bottom: none !important;
        grid-template-areas:
            'title'
            'cta-btn';
        grid-template-columns: auto;
    }
}