.bonus-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 20px !important;
    padding: 12px;
    background-color: #252626;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.bonus-item--exclusive {
    background: #252626 url("/wp-content/themes/casino.ru/assets/images/bonuses/img.png") top right no-repeat;
    background-size: 200px;
}

body.new-year .bonus-item {
    background: #252626 url("/wp-content/themes/casino.ru/assets/images/new-year/bonus-item-bg.svg") top right no-repeat;
}

.bonus-item__main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bonus-item__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 83px;
    border-radius: 10px;
}

.bonus-item--finish-date .bonus-item__logo:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 28px;
    background: linear-gradient(180deg, rgba(36, 37, 38, 0.00) 0%, #242526 100%);
}

.bonus-item__logo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.bonus-item--finish-date .bonus-item__logo > img {
    border-radius: 10px 10px 0 0;
}

.bonus-item__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.bonus-item__type {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
    color: #ffffff;
    border-radius: 6px;
}

.bonus-item__type--welcome {
    background-color: #00CB26;
}

.bonus-item__type--no_deposit {
    background-color: #FFDF01;
    color: #000000;
}

.bonus-item__type--deposit {
    background-color: #A6FF00;
    color: #000000;
}

.bonus-item__type--freespins,
.bonus-item__type--poker {
    background-color: #FF0000;
}

.bonus-item__type--cashback {
    background-color: #1E88E5;
}

.bonus-item__type--exclusive {
    background-color: #BF00FF;
}

.bonus-item__type--playup {
    background-color: #01B3FF;
}

.bonus-item__type--highroller {
    background-color: #FF2EB2;
}

.bonus-item__type--reload {
    background-color: #7F8AFF;
}

.bonus-item__type--vip_bonus {
    color: #000000;
    background-color: #F5BC00;
}

.bonus-item__title {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    color: #ffffff;
}

.bonus-item__aside {
    padding: 12px 0;
    border-top: 1px solid #374956;
    border-bottom: 1px solid #374956;
}

.bonus-item__buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bonus-item__button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 40px;
    font-size: 16px;
    line-height: 22px;
    text-decoration: none;
    font-weight: bold;
    background-color: #ffffff;
    border-radius: 3px;
}

.bonus-item__button .finger {
    left: 50%;
    right: initial;
    bottom: -15px;
    transform: translateX(20px);
}

.bonus-item__button:hover {
    opacity: 0.8;
}

.bonus-item__code {
    position: relative;
    width: 100%;
    height: 40px;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-underline-position: under;
    color: #000;
    background: #FFD600;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .35), -2px -2px 10px 0 rgba(255, 188, 17, .80);
    border-radius: 3px;
    border: 0;
}

.bonus-item__code:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px dashed rgba(255, 255, 255, .5);
    border-radius: 5px;
    z-index: 0;
}

.bonus-item__code:after {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
}

.bonus-item__code-inside {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 100%;
}

body.new-year .bonus-item__code-inside:after {
    content: "";
    display: block;
    position: absolute;
    top: -6px;
    right: 0;
    width: 108px;
    height: 24px;
    background: url("/wp-content/themes/casino.ru/assets/images/new-year/snow.png") no-repeat;
    background-size: contain;
}

.bonus-item__code .copy {
    position: initial;
}

.bonus-item__code .finger {
    right: -12px;
    bottom: -12px;
}

.bonus-item__promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bonus-item__promo-label {
    font-size: 16px;
    line-height: 20px;
    color: #FFDF01;
}

.bonus-item__description {
    display: none;
    font-size: 16px;
    line-height: 18px;
    color: #ffffff;
}

.bonus-item.open .bonus-item__description {
    display: block;
}

.bonus-item__props {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #374956;
    border-bottom: 1px solid #374956;
}

.bonus-item__description-text + .bonus-item__props {
    margin-top: 12px;
}

.bonus-item__prop {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bonus-item__prop-label {
    color: rgba(255, 255, 255, 0.50);
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
}

.bonus-item__prop-value {
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
}

.bonus-item__prop-value > a {
    color: #ffffff;
}

.bonus-item__footer {
    display: none;
    align-items: center;
    justify-content: space-between;
}

.bonus-item.open .bonus-item__footer {
    display: flex;
}

.bonus-item__more {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 16px;
    line-height: 22px;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-underline-position: under;
    color: #00CB26;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.bonus-item__more:hover {
    opacity: 0.8;
}

.bonus-item__more:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjMDBDQjI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTAgNi42Njd2Ni42NjZNNi42NjcgMTBoNi42NjZNNi41IDE3LjVoN2MxLjQgMCAyLjEgMCAyLjYzNS0uMjczYTIuNSAyLjUgMCAwIDAgMS4wOTItMS4wOTJjLjI3My0uNTM1LjI3My0xLjIzNS4yNzMtMi42MzV2LTdjMC0xLjQgMC0yLjEtLjI3My0yLjYzNWEyLjUgMi41IDAgMCAwLTEuMDkyLTEuMDkzQzE1LjYgMi41IDE0LjkgMi41IDEzLjUgMi41aC03Yy0xLjQgMC0yLjEgMC0yLjYzNS4yNzJhMi41IDIuNSAwIDAgMC0xLjA5MyAxLjA5M0MyLjUgNC40IDIuNSA1LjEgMi41IDYuNXY3YzAgMS40IDAgMi4xLjI3MiAyLjYzNWEyLjUgMi41IDAgMCAwIDEuMDkzIDEuMDkyQzQuNCAxNy41IDUuMSAxNy41IDYuNSAxNy41WiIvPjwvc3ZnPg==") center no-repeat;
}

.bonus-item.open .bonus-item__more--open {
    display: none;
}

.bonus-item__more--desktop {
    display: none;
}

.bonus-item.open .bonus-item__more--close:before {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjMDBDQjI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTggMTJoOG0tOC4yIDloOC40YzEuNjggMCAyLjUyIDAgMy4xNjItLjMyN2EzIDMgMCAwIDAgMS4zMTEtMS4zMTFDMjEgMTguNzIgMjEgMTcuODggMjEgMTYuMlY3LjhjMC0xLjY4IDAtMi41Mi0uMzI3LTMuMTYyYTMgMyAwIDAgMC0xLjMxMS0xLjMxMUMxOC43MiAzIDE3Ljg4IDMgMTYuMiAzSDcuOGMtMS42OCAwLTIuNTIgMC0zLjE2Mi4zMjdhMyAzIDAgMCAwLTEuMzExIDEuMzExQzMgNS4yOCAzIDYuMTIgMyA3Ljh2OC40YzAgMS42OCAwIDIuNTIuMzI3IDMuMTYyYTMgMyAwIDAgMCAxLjMxMSAxLjMxMUM1LjI4IDIxIDYuMTIgMjEgNy44IDIxWiIvPjwvc3ZnPg==") center no-repeat;
}

.bonus-item .vote {
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
}

.bonus-item .vote__btn {
    gap: 5px;
    height: 32px;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #545454;
    border-radius: 3px;
}

.bonus-item .vote__btn:before {
    margin: 0;
}

.bonus-item .vote__plus span {
    color: #00CB26;
}

.bonus-item .vote__minus span {
    color: #ff0000;
}

.bonus-item .vote__plus:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%2300CB26' d='M13 16H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3.551C5.981 4.395 6 2.813 6 1a1 1 0 0 1 1-1c4.213 0 4.876 2.137 4.98 4H13a3.003 3.003 0 0 1 3 3v6a3.004 3.004 0 0 1-3 3ZM2 14h2V8H2v6Zm12-7a1.001 1.001 0 0 0-1-1h-2a1 1 0 0 1-1-1c0-1.748 0-2.734-2.01-2.953A7.645 7.645 0 0 1 6 7.4V14h7a1 1 0 0 0 1-1V7Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 16h16V0H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.bonus-item .vote__minus:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FD0202' d='M3 0h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3.551C10.019 11.605 10 13.187 10 15a1 1 0 0 1-1 1c-4.213 0-4.876-2.137-4.98-4H3a3.003 3.003 0 0 1-3-3V3a3.003 3.003 0 0 1 3-3Zm11 2h-2v6h2V2ZM2 9a1.001 1.001 0 0 0 1 1h2a1 1 0 0 1 1 1c0 1.748 0 2.734 2.01 2.953A7.645 7.645 0 0 1 10 8.6V2H3a1.001 1.001 0 0 0-1 1v6Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M16 0H0v16h16z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.casino-bonuses-title {
    margin-bottom: 20px;
    border-bottom: solid 1px #121212;
}

.casino-bonuses-title span {
    background-color: #121212;
    display: inline-block;
    color: #fff;
    padding: 8px 15px 7px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}


.vote {
    display: flex;
    flex-direction: row;
    float: right;
    white-space: nowrap;
    margin-left: auto;
}

@media (max-width: 359px) {

    .vote {
        font-size: 15px;
    }
}

.vote button {
    background: transparent;
    border: 1px solid #C9C9C9;
    border-radius: 3px;
    margin: 0 0 0 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: ease-out all .3s;
}

.vote button:before {
    content: "";
    display: block;
    width: 16px;
    height: 17px;
    margin: 0 5px 0 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 17px;
    pointer-events: none;
}

.vote__plus:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 17\'%3E%3Cpath d='M13 16.991H1a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1H4.55C5.981 5.386 6 3.805 6 1.991a1 1 0 0 1 1-1c4.213 0 4.876 2.137 4.98 4H13a3.003 3.003 0 0 1 3 3v6a3.003 3.003 0 0 1-3 3Zm-11-2h2v-6H2v6Zm12-7a1.001 1.001 0 0 0-1-1h-2a1 1 0 0 1-1-1c0-1.748 0-2.734-2.01-2.953A7.645 7.645 0 0 1 6 8.391v6.6h7a1.002 1.002 0 0 0 1-1v-6Z' fill='%232F8F41'/%3E%3C/svg%3E");
}

.vote__minus:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 17\'%3E%3Cpath d='M3 .991h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3.552c-1.43 1.606-1.448 3.187-1.448 5a1 1 0 0 1-1 1c-4.213 0-4.876-2.136-4.98-4H3a3.004 3.004 0 0 1-3-3v-6a3.003 3.003 0 0 1 3-3Zm11 2h-2v6h2v-6Zm-12 7a1.001 1.001 0 0 0 1 1h2a1 1 0 0 1 1 1c0 1.748 0 2.735 2.01 2.954A7.645 7.645 0 0 1 10 9.59v-6.6H3a1.001 1.001 0 0 0-1 1v6Z' fill='%23FD0202'/%3E%3C/svg%3E");
}

.vote__plus:hover {
    background-color: rgb(47 143 65 / 30%);
    border: 1px solid rgb(47 143 65 / 30%);
}

.vote__minus:hover {
    background-color: rgb(253 2 2 / 30%);
    border: 1px solid rgb(253 2 2 / 30%);
}

.bonus__form .popup__heading svg {
    width: 36px;
    height: 36px;
    display: block;
    margin: 0 auto 20px;
}

.vote__plus__count {
    pointer-events: none;
}

.last-user-reviews__title {
    margin: 20px 0 10px;
    font-size: 1.5em;
    font-weight: bold;
}

.last-user-reviews__title + .bonus_container .bonus__item {
    margin-bottom: 10px;
}

.last-user-reviews--hidden .bonus-item {
    display: none;
}

.last-user-reviews--hidden .bonus-item:nth-child(1),
.last-user-reviews--hidden .bonus-item:nth-child(2),
.last-user-reviews--hidden .bonus-item:nth-child(3) {
    display: flex;
}

.bonus_container--visible .bonus-item {
    display: grid;
}

.last-user-reviews__button {
    margin: 15px auto;
    cursor: pointer;
}

.bonus-item__footer-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bonus-item__uses-count {
    font-size: 14px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.50);
}

.bonus-item__timer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bonus-item__timer--desktop {
    display: none;
}

.bonus-item__timer-title {
    flex-shrink: 0;
    width: 120px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.bonus-item__timer-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 4px;
}

.bonus-item__timer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    width: 100%;
    gap: 5px;
    padding: 8px;
    border: 1px solid #374956;
    border-radius: 4px;
}

.bonus-item__timer-item-value {
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
    color: #54FF1D;
}

.bonus-item__timer-item-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.50);
}

.bonus-item__timer-separator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    gap: 4px;
}

.bonus-item__timer-separator:before,
.bonus-item__timer-separator:after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background-color: #54FF1D;
}

.bonus-item__timer-footer {
    display: none;
    font-size: 14px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.5);
}

/*** Responsive ***/

@media (min-width: 768px) {

    .bonus-item {
        display: grid;
        grid-template-columns: 1fr 202px;
        grid-template-areas:
            "main aside"
    }

    .bonus-item--no-bonus {
        grid-template-columns: 1fr;
        gap: 10px 0;
        grid-template-areas:
            "main"
    }

    .bonus-item.open {
        grid-template-areas:
            "main aside"
            "description aside"
            "footer aside";
    }

    .bonus-item--no-bonus.open {
        grid-template-areas:
            "main"
            "description"
            "footer";
    }

    body.new-year .bonus-item {
        background-position: top right 215px;
    }

    body.new-year .bonus-item--no-bonus {
        background-position: top right;
    }

    .bonus-item__main {
        grid-area: main;
    }

    .bonus-item__info {
        width: 100%;
    }

    .bonus-item__title {
        font-size: 22px;
    }

    .bonus-item__aside {
        grid-area: aside;
        margin: -12px 0 -12px;
        padding: 16px 4px 16px 16px;
        border: 0;
        border-left: 1px solid #374956;
    }

    .bonus-item__buttons {
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    .bonus-item__promo {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        height: 100%;
    }

    .bonus-item__promo-label {
        color: #ffffff;
    }

    .bonus-item__description {
        grid-area: description;
    }

    .bonus-item__props {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }

    .bonus-item__prop {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
    }

    .bonus-item__footer {
        grid-area: footer;
    }

    .bonus-item__more--mobile {
        display: none !important;
    }

    .bonus-item__more--desktop {
        display: flex;
    }

    .bonus-item.open .bonus-item__more--open {
        display: flex;
        opacity: 0;
    }

    .last-user-reviews--hidden .bonus-item:nth-child(1),
    .last-user-reviews--hidden .bonus-item:nth-child(2),
    .last-user-reviews--hidden .bonus-item:nth-child(3) {
        display: grid;
    }

    .bonus-item__uses-count {
        display: none;
    }

    .bonus-item__timer--mobile {
        display: none;
    }

    .bonus-item__timer--desktop {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: 160px;
    }

    .bonus-item__timer-title {
        width: initial;
    }

    .bonus-item__timer-footer {
        display: flex;
    }
}