/* Мобильный каркас сайта: работает на страницах, где у <body> класс responsive и есть meta viewport (main.tpl). */

@media (max-width: 760px) {
    html:has(body.responsive), body.responsive { min-width: 0; }
    .responsive #wrapper { min-height: 0; background-size: 1600px auto; }

    .responsive header { margin: 0; }
    .responsive header .content { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 0; width: auto; padding: 14px 12px 0; }
    .responsive a.logo { top: 0; width: 170px; height: 60px; background-size: contain; }
    .responsive header nav { top: 0; left: 0; width: 100%; }
    .responsive header nav ul { display: flex; justify-content: space-around; }
    .responsive header nav ul li { flex: 1 1 0; margin: 0; text-align: center; }
    .responsive header nav ul li:before, .responsive header nav ul li:after { left: 50% !important; top: 0 !important; transform: translateX(-50%) scale(.75); transform-origin: 50% 0; }
    .responsive header nav ul li a { display: block; padding: 30px 2px 0; font-size: 10px; line-height: 1.15; white-space: normal; }

    .responsive #middle { width: auto; margin: 26px 0 0; padding: 0 8px; }
    .responsive #leftSide { width: 100%; float: none; }
    .responsive #rightSide { width: auto; float: none; margin: 24px 0 0; border-left: 0; padding-bottom: 12px; }
    .responsive #rightSide:before, .responsive #rightSide:after { display: none; }
    .responsive #rightSide > * { margin-left: auto !important; margin-right: auto !important; max-width: 100%; }

    .responsive #footer_container { height: auto; background-size: cover; }
    .responsive #footer_container .content { width: auto; padding: 24px 16px 16px; }
    .responsive a.gamesymbol { display: none; }
    .responsive #copyrights { width: auto !important; padding: 0; }
    .responsive .bottom-banners { flex-wrap: wrap; height: auto; padding: 16px 0 0; gap: 12px; }
    .responsive .policies a { display: inline-block; padding: 0 10px 6px 0; }
    .responsive .policies_icons svg { max-width: 100%; height: auto; }
}