@charset "UTF-8";

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Fonts */
    --font: "Roboto", sans-serif;
    --font-h1: 900 28px/32px var(--font);
    --font-h2: 800 24px/32px var(--font);
    --font-h3: 700 20px/28px var(--font);
    --font-block-title: 700 16px/24px var(--font);
    --font-text: 400 15px/24px var(--font);
    --font-small: 400 14px/22px var(--font);
    --font-button: 600 14px/20px var(--font);

    /* Font colors */
    --color-heading: #1D1D1D;
    --color-font: #404040;
    --color-subtext: #737373;
    --color-blocks: #404040;
    --color-table-head: #F7F7F7;
    --color-dark-blocks: #FFF;
    --color-secondary-blocks: #404040;
    --color-on-primary: #FFF;
    --color-second-button: #FFF;

    /* Bg colors */
    --bg-body: #F7F7F7;
    --bg-blocks: #FFF;
    --bg-dark-blocks: #1D1D1D;
    --bg-table-head: #404040;
    --bg-secondary-blocks: rgba(27, 87, 240, 0.10);
    --bg-second-button: rgba(255, 255, 255, 0.15);
    --border-radius: 4px;

    /* Other colors */
    --primary: #1B57F0;
    --secondary: #404040;

    /* Paddings */
    --offset: 16px;

    /* Other */
    --border: 1px solid #D2D2D2;
    --transition: 0.2s ease-in-out;
    --border-radius: 3px;
    --box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.10);
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar:horizontal {
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary);
}

::-webkit-scrollbar-track {
    background-color: var(--bg-body);
}

.page-404 > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* General */
body {
    display: flex;
    flex-direction: column;
    font: var(--font-text);
    color: var(--color-font);
    background: var(--bg-body);
    min-height: 100vh;
}

.page-main {
    flex: 1 1;
}

h1, h2, h3, h4, h5 {
    color: var(--color-heading);
    text-transform: uppercase;
}

h1.wp-block-heading {
    font: var(--font-h1);
    margin-top: 42px;
}

h2.wp-block-heading {
    font: var(--font-h2);
    margin-bottom: 12px;
}

h3.wp-block-heading {
    font: var(--font-h3);
    margin-bottom: 12px;
}

img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

button {
    background: unset;
    border: none;
    border-radius: unset;
    user-select: none;
    cursor: pointer;
}

._scroll-lock {
    overflow: hidden;
}

ul[class]:not(.wp-block-list) {
    list-style: none;
}

a[class] {
    text-decoration: unset;
    color: var(--color-font);
}

details summary {
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] summary::-webkit-details-marker {
    display: none;
}

/* Bredcrumbs */
.breadcrumbs {
    background: var(--bg-table-head);
    color: var(--color-table-head);
    padding: 10px 0;
}

.breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.breadcrumbs__item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.breadcrumbs__item:not(:last-child):after {
    content: '';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    min-width: 12px;
    height: 12px;
    background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.6568 6.66663L7.99992 12.3235L2.34302 6.66663L3.75708 5.25256L7.99992 9.49475L12.2428 5.25256L13.6568 6.66663Z" fill="%23FFFFFF" transform="rotate(-90 8 8)"/></svg>') no-repeat center/100%;
}

a.breadcrumbs__link {
    color: var(--color-table-head);
    transition: var(--transition);
}

@media (hover: hover) {
    a.breadcrumbs__link:hover {
        text-decoration: underline;
    }
}

/* Buttons */
.button {
    display: block;
    text-align: center;
    padding: 12px 32px;
    background: var(--primary);
    color: var(--color-on-primary);
    font: var(--font-button);
    border-radius: 8px;
}

.button._secondary {
    padding: 10px 32px;
    background: var(--bg-second-button);
    color: var(--color-second-button);
    font: var(--font-button);
}

@media (hover: hover) {
    .button:hover {
        opacity: .7;
    }
}

/* Wrapper & container & gaps */
.wrapper > :not(:first-child) {
    margin-top: var(--offset);
}

.wrapper + .wrapper {
    margin-top: 20px;
}

.wrapper + .wrapper:before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: url('data:image/svg+xml,<svg width="1248" height="1" viewBox="0 0 1248 1" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0.5H1248" stroke="%23D2D2D2" stroke-dasharray="8 8"/></svg>');
    margin: 36px 0;
}

.wrapper > h2.wp-block-heading + p:not([class]) {
    margin-top: 0;
}

.wrapper > h3.wp-block-heading + p:not([class]),
.wrapper > h3.wp-block-heading + .image
{
    margin-top: 0;
}

.wrapper > h3.wp-block-heading:not(:first-child) {
    margin-top: 28px;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1312px) {
    .container {
        max-width: calc(100% - var(--offset) * 2);
        margin-left: var(--offset);
        margin-right: var(--offset);
    }
}

/* Header */
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-blocks);
    color: var(--color-blocks);
    border-bottom: var(--border);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    flex: 1 1;
}

.header__logo img {
    min-width: 100px;
    max-height: 44px;
}

.header__menu {
    flex: 1 1;
}

.header__menu a {
    color: var(--color-blocks);
}

.header__burger {
    display: none;
    cursor: pointer;
}

.header._active .header__burger svg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header._active .header__burger svg rect {
    transition: var(--transition);
}

.header._active .header__burger svg rect:last-child {
    display: none;
}

.header._active .header__burger svg rect:nth-child(1){
    transform: rotate(45deg) translateX(4.5px) translateY(-7px);
}

.header._active .header__burger svg rect:nth-child(2){
    transform: rotate(-45deg) translateX(-11.5px) translateY(5px);
}

@media (max-width: 1024px) {
    .header._active .header__inner {
        flex-wrap: wrap;
    }

    .header__burger {
        display: block;
    }

    .header._active .header__menu {
        display: block;
    }

    .header__lang {
        margin-left: auto;
    }
}

/* Menu */
.menu__list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    flex-wrap: wrap;
}

.menu__item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
}

.menu__item._has-submenu {
    padding-right: 8px;
}

.menu__item .menu__link {
    padding: 8px;
    width: 100%;
    text-decoration: unset;
    white-space: nowrap;
    user-select: none;
    transition: var(--transition);
    cursor: pointer;
}

.menu__item._has-submenu > .menu__link {
    padding-right: 0;
}

.menu__link._active {
    color: var(--primary);
}

@media (hover: hover) {
    .menu__item:hover > a.menu__link {
        color: var(--primary);
    }
}

.menu__sub-list {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px;
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    background: var(--bg-blocks);
    color: var(--color-blocks);
    border-radius: var(--border-radius);
    z-index: 900;
}

.menu__sub-list:before {
    content: '';
    display: block;
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 100%;
    right: 0;
    left: 0;
}

.menu__sub-list._3-lvl {
    top: 0;
    left: calc(100% + 30px);
}

.menu__sub-list._3-lvl:before {
    width: 30px;
    height: 100%;
    bottom: 0;
    left: unset;
    right: 100%;
}

@media (hover: hover) {
    .menu__item._has-submenu:hover > .menu__sub-list {
        display: flex;
    }
}

.menu__arrow {
    display: block;
    width: 16px;
    min-width: 16px;
    height: 16px;
    background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.6568 6.66663L7.99992 12.3235L2.34302 6.66663L3.75708 5.25256L7.99992 9.49475L12.2428 5.25256L13.6568 6.66663Z" fill="%231D1D1D"/></svg>') no-repeat center;
    transition: var(--transition);
}

@media (hover: hover) {
    .menu__item:hover > .menu__arrow {
        transform: rotateZ(180deg);
    }
}

@media (max-width: 1024px) {
    .menu {
        display: none;
        flex-direction: column;
        flex: 1 1 100%;
        order: 10;
    }

    .menu__list {
        flex-direction: column;
    }

    .menu__item {
        width: 100%;
        flex-wrap: wrap;
    }

    .menu__item._has-submenu > .menu__link {
        width: calc(50% - 2px);
    }

    .menu__item._has-submenu > .menu__arrow {
        width: calc(50% - 2px);
        height: 40px;
        background-position: right center;
        background-repeat: no-repeat;
        transition: none;
    }

    .menu__item._has-submenu._active > .menu__arrow {
        transform: rotate(180deg);
        background-position: left center;
    }

    .menu__item._has-submenu._active > .menu__sub-list {
        display: flex;
    }

    .menu__sub-list,
    .menu__sub-list._3-lvl {
        position: relative;
        inset: unset;
        flex: 1 1;
        box-shadow: var(--box-shadow);
        border-radius: var(--border-radius);
        padding: 12px;
    }

}

/* Lang switcher */
.lang {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px;
    border: var(--border);
    border-radius: 4px;
    font: var(--font-small);
    background: var(--bg-blocks);
    color: var(--color-subtext);
    text-transform: uppercase;
    user-select: none;
    cursor: pointer;
}

.lang::before {
    content: '';
    height: 10px;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 900;
}

.lang::after {
    content: '';
    width: 16px;
    min-width: 16px;
    height: 16px;
    display: block;
    background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.6571 6.66663L8.00016 12.3235L2.34326 6.66663L3.75732 5.25256L8.00016 9.49475L12.243 5.25256L13.6571 6.66663Z" fill="%23737373"/></svg>') no-repeat center/100%;
    margin-left: 4px;
}

.lang._active::after {
    transform: rotate(-180deg);
    margin-left: 0;
}

.lang img,
.lang svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    object-fit: cover;
    border-radius: 500px;
    margin-right: 4px;
}

.lang__list {
    display: none;
    position: absolute;
    z-index: 900;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--bg-blocks);
    color: var(--color-subtext);
    border: var(--border);
    border-radius: 4px;
}

.lang._active .lang__list {
    display: flex;
}

@media (hover: hover) {
    .lang:hover .lang__list {
        display: flex;
    }

    .lang:hover::after {
        transform: rotate(-180deg);
        margin-left: 0;
    }
}

.lang__item {
    display: flex;
}

.lang__item._current .lang__link {
    background: var(--primary);
    color: var(--color-on-primary);
}

.lang__link {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 8px;
    font: var(--font-small);
    color: var(--color-subtext);
    transitiony: var(--transition);
    text-transform: uppercase;
    width: 100%;
    text-decoration: unset;
    user-select: none;
    cursor: pointer;
}

@media (hover: hover) {
    .lang__item:not(._current) .lang__link:hover {
        background: var(--primary);
        color: var(--color-on-primary)
    }
}

/* Game */
p:not([class]):has(+ .game) {
    color: var(--color-subtext);
    font: var(--font-small);
    margin-top: 8px;
}

.game {
    position: relative;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    aspect-ratio: 1280.00/656.41;
    width: 100%;
    min-height: 280px;
}

.game > img {
    position: absolute;
    inset: auto;
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
}

.game:after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.88);
    z-index: 2;
}

.game > :not(img) {
    z-index: 3;
}

/* Popup */
.popup {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    z-index: 900;
}

.popup._active {
    display: flex;
}

.popup__content {
    display: flex;
    flex-direction: column;
    background: var(--bg-dark-blocks);
    color: var(--color-dark-blocks);
    aspect-ratio: 1280.00/656.41;
    border-radius: 8px;
}

.popup__header {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 4px;
}

.popup__title {
    font: var(--font-button);
    flex: 1 1;
}

.popup__close {
    display: block;
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5.63623" y="16.9497" width="16" height="2" transform="rotate(-45 5.63623 16.9497)" fill="white"/><rect x="7.05029" y="5.63599" width="16" height="2" transform="rotate(45 7.05029 5.63599)" fill="white"/></svg>') no-repeat center / 100%;
}

.popup__body {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex: 1 1;
}

.popup__body iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: unset;
}

.popup__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
}

@media (max-width: 1024px) {
    .popup__content {
        width: 100%;
        height: 100%;
        max-width: unset;
        aspect-ratio: unset;
        border-radius: unset;
    }
}

/* Categories */
.categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.categories__item:not(:has(a)),
.categories__item a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 8px;
    background: var(--bg-blocks);
    color: var(--color-blocks);
    box-shadow: var(--box-shadow);
    padding: 16px;
    font: var(--font-small);
}

.categories__item span {
    font-weight: 600;
}

/* Toc */
.wrapper:has(.toc) {
    margin-top: 52px;
}

.wrapper:has(.toc):before,
.wrapper:has(.toc) + .wrapper:before {
    content: unset;
}

.wrapper:has(.toc) + .wrapper {
    margin-top: 36px;
}

.toc {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    background: var(--bg-blocks);
    color: var(--color-blocks);
    box-shadow: var(--box-shadow);
    border-radius: 8px;
    padding: 20px;
}

.toc__title {
    display: flex;
    align-items: center;
    gap: 4px;
    font: var(--font-block-title);
    color: var(--color-heading);
    user-select: none;
    cursor: pointer;
}

.toc__title:after {
    content: '';
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.4854 10L12 18.4854L3.51465 10L5.63574 7.87891L12 14.2422L18.3643 7.87891L20.4854 10Z" fill="%231D1D1D"/></svg>') no-repeat center / 100%;;
    margin-left: auto;
}

.toc._active .toc__title:after {
    transform: rotate(180deg);
}

.toc__list {
    display: none;
    flex-wrap: wrap;
    gap: 10px;
}

.toc._active .toc__list {
    display: flex;
}

.toc__link {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-secondary-blocks);
    color: var(--color-secondary-blocks);
    padding: 8px 12px;
    border-radius: 4px;
}

.toc__link:after {
    content: '';
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 20H4V18H20V20ZM10.9629 4.03223C14.01 4.82348 15.7119 7.08143 15.7119 9.5C15.7119 11.4122 14.6475 13.2232 12.6963 14.2891H15V16.2891H9V10.2891H11V12.8623C12.8982 12.1797 13.7119 10.774 13.7119 9.5C13.7119 8.11114 12.7464 6.56138 10.4609 5.96777L10.9629 4.03223Z" fill="%23404040"/></svg>') no-repeat center / 100%;
}



@media (hover: hover) {
    .toc__link:hover {
        opacity: .7;
    }
}

@media (max-width: 1024px) {
    .toc {
        gap: 10px;
    }
}

/* Listing */
.listing {
    width: 100%;
}

.listing tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.listing__item {
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    padding: 20px;
    background: var(--bg-blocks);
    color: var(--color-blocks);
    box-shadow: var(--box-shadow);
}

.listing__index {
    align-self: center;
    margin-right: 8px;
}

.listing__image img {
    max-height: 56px;
    border-radius: 4px;
}

.listing__info,
.listing__bonus,
.listing__buttons {
    margin-left: 16px;
}

.listing__info {
    display: flex;
    flex-direction: column;
    gap: 4px;

}

.listing__name {
    color: var(--color-heading);
    font: var(--font-text);
    font-weight: 600;
}

.listing__bonus {
    display: flex;
    justify-content: center;
    align-self: center;
    flex: 1 1;
    padding: 16px;
    color: var(--color-font);
    font: var(--font-text);
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
    background: var(--bg-body);
}

.listing__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.listing__rating-info {
    display: flex;
    align-items: center;
    font: var(--font-small);
    font-weight: 600;
    color: var(--color-font);
}

.listing__rating {
    position: relative;
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    margin-right: 4px;
}

.listing__rating::before {
    content: "★★★★★";
    color: #ccc;
}

.listing__rating::after {
    content: "★★★★★";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--rating) / 5 * 100%);
    overflow: hidden;
    color: var(--primary);
}

.listing__rating-counter {
    color: var(--color-subtext);
    font-weight: 400;
}

@media (max-width: 1024px) {
    .listing__item {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .listing__index {
        position: absolute;
        left: 8px;
        top: 8px;
        z-index: 2;
    }

    .listing__info,
    .listing__bonus,
    .listing__buttons {
        margin-left: 0;
        margin-top: 16px;
    }

    .listing__image {
        width: 100%;
    }

    .listing__image img {
        width: 100%;
        max-height: unset;
    }

    .listing__bonus {
        width: 100%;
    }

    .listing__buttons {
        width: 100%;
    }

    .listing__button {
        width: 100%;
        max-width: 500px;
    }
}

/* Tables */
.wp-block-table {
    width: 100%;
    border-radius: 8px;
    overflow: auto;
}

.wp-block-table table {
    min-width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
}

.wp-block-table th,
.wp-block-table td {
    padding: 12px;
    border: var(--border);
    font: var(--font-small);
    text-align: left;
}


.wp-block-table th {
    border-color: var(--bg-table-head);
    background: var(--bg-table-head);
    color: var(--color-table-head);
    font-weight: 600;
}

@media (max-width: 1024px) {
    .wp-block-table table:has( td:nth-child(3) ) { min-width: 600px }
    .wp-block-table table:has( td:nth-child(4) ) { min-width: 800px }
    .wp-block-table table:has( td:nth-child(5) ) { min-width: 1000px }
}

/* Gallery */
.gallery__container {
    overflow: hidden;
}

.gallery__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery__item img {
    width: 100%;
}

.gallery__link {
    display: flex;
}

.swiper-pagination {
    position: static !important;
    margin-top: 16px
}

.swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background-color: #40404030 !important;
    opacity: 1 !important
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--primary) !important;
}

/* Image */
.image {
    display: flex;
}

.image img {
    max-width: 100%;
    border-radius: 4px;
}

/* Content buttons */
.content-button_center {
    margin-left: auto;
    margin-right: auto;
}

.content-button_right {
    margin-left: auto;
}

/* How to */
.how-to__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.how-to__item {
    display: flex;
    gap: 20px;
    border-radius: 8px;
    background: var(--bg-blocks);
    box-shadow: var(--box-shadow);
    padding: 20px;
}

.how-to__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
}

.how-to__item img {
    flex: 1 0 0;
    max-width: calc(50% - 10px);
    border-radius: 4px;
}

.how-to__item-title {
    color: var(--font-text);
    font: var(--font-block-title);
}

@media (max-width: 1024px) {
    .how-to__item {
        flex-direction: column;
        gap: 12px;
    }

    .how-to__item img {
        max-width: 100%;
    }
}

/* Index */
.index {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 500px;
    border: var(--border);
    background: var(--bg-blocks);
    font: var(--font-block-title);
    color: var(--primary);
}

/* Pros cons */
.pros-cons {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.pros-cons__block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 0 0;
    padding: 20px;
    background: var(--bg-blocks);
    box-shadow: var(--box-shadow);
    border-radius: 8px;
}

.pros-cons__title {
    font: var(--font-block-title);
}

.pros-cons__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pros-cons__list li {
    display: flex;
    gap: 8px;
    padding: 8px;
}

.pros-cons__list li:before {
    content: '';
    width: 24px;
    min-width: 24px;
    height: 24px;
}

.pros-cons__block_pros li:before {
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 10H18V14H14V18H10V14H6V10H10V6H14V10Z" fill="%2311D75C"/></svg>') no-repeat center / 100%;
}

.pros-cons__block_cons li:before {
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 10V14H6V10H18Z" fill="%23ED0000"/></svg>') no-repeat center / 100%;
}

@media (max-width: 1024px) {
    .pros-cons {
        flex-direction: column;
    }
}

/* FAQ */
.wrapper:has(.faq):before {
    content: unset;
}

.faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq__details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    border-radius: 8px;
    background: var(--bg-blocks);
    box-shadow: var(--box-shadow);
}

.faq__item-title {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font: var(--font-block-title);
    user-select: none;
    cursor: pointer;
}

.faq__item-title:after {
    content: '';
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.4854 10L12 18.4854L3.51465 10L5.63574 7.87891L12 14.2422L18.3643 7.87891L20.4854 10Z" fill="%231D1D1D"/></svg>') no-repeat center / 100%;
}

.faq__details[open] {
    gap: 10px;
}

.faq__details[open] .faq__item-title:after {
    transform: rotate(180deg);
}

/* Footer */
.footer {
    border-top: var(--border);
    background: var(--bg-body);
    padding: 40px 24px 16px 24px;
    margin-top: 26px;
}

.footer__container {
    display: flex;
    flex-wrap: wrap;
}

.footer__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
    flex: 1 0 0;
}

.footer__info img {
    max-height: 44px;
}

.footer__menus {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.footer__menu-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.footer__menu-list {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.footer__menu-title {
    font: var(--font-block-title);
}

.footer__gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1 1 100%;
    margin-top: 20px;
    padding-top: 20px;
    border-top: var(--border);
}

.footer__gallery img {
    max-height: 44px;
}

.footer__gallery a {
    transition: var(--transition);
}

@media (hover: hover) {
    .footer__gallery a:hover {
        opacity: .7;
    }
}

.footer__copyright {
    flex: 1 1 100%;
    margin-top: 20px;
    padding-top: 20px;
    border-top: var(--border);
}

@media (max-width: 1312px) {
    .footer__container {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .footer {
        padding: 40px 16px 16px 16px;
    }

    .footer__container > * {
        flex: 1 1 100%;
    }

    .footer__menus {
        flex-direction: column;
        border-left: unset;
        border-top: var(--border);
        padding-left: 0;
        padding-top: 24px;
        margin-left: 0;
        margin-top: 24px;
    }

    .footer__menu {
        display: flex;
    }
}