/*
CTC Separate Stylesheet
Fixed scroll position on menu open/close
*/

/* =================================================================
   МОБИЛЬНОЕ МЕНЮ - УМЕНЬШЕННАЯ НА 25% КНОПКА
   ================================================================= */

@media (max-width: 767px) {
    /* 1. КНОПКА МЕНЮ - УМЕНЬШЕНА НА 25% (65px -> 49px) */
    .menu-button-mobile {
        position: fixed !important;
        top: 20px !important;
        right: 15px !important;
        z-index: 999999 !important;
        width: 49px !important;
        height: 49px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 10px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.18) !important;
    }
    
    .menu-button-mobile .navbar-header {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    a.custom-menu-icon.hc-nav-trigger.hc-nav-1 {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
        text-decoration: none !important;
    }
    
    .custom-menu-icon {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .custom-menu-icon svg {
        width: 36px !important;
        height: 36px !important;
        display: block !important;
        transition: transform 0.3s ease !important;
    }
    
    .custom-menu-icon:hover svg {
        transform: scale(1.08) !important;
    }
    
    .custom-menu-icon span,
    .hc-nav-trigger.custom-menu-icon span,
    .hc-nav-trigger.custom-menu-icon span::before,
    .hc-nav-trigger.custom-menu-icon span::after {
        display: none !important;
    }
    
    /* 6. БОКОВОЕ МЕНЮ */
    .hc-offcanvas-nav {
        background: #fff !important;
        box-shadow: -2px 0 12px rgba(0,0,0,0.12) !important;
    }
    
    .hc-offcanvas-nav .nav-wrapper {
        background: #fff !important;
    }
    
    .hc-offcanvas-nav ul {
        background: #fff !important;
    }
    
    .hc-offcanvas-nav li a {
        padding: 16px 22px !important;
        font-size: 16px !important;
        color: #333 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        transition: background 0.2s ease !important;
    }
    
    .hc-offcanvas-nav li a:hover {
        background: #f8f8f8 !important;
        color: #000 !important;
    }
    
    .header-right .menu-button:not(.menu-button-mobile) {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .menu-button-mobile {
        top: 15px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    .custom-menu-icon svg {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .menu-button-mobile {
        top: 20px !important;
        right: 15px !important;
        width: 53px !important;
        height: 53px !important;
    }
    
    .custom-menu-icon svg {
        width: 39px !important;
        height: 39px !important;
    }
}

/* =================================================================
   ИСПРАВЛЕНИЕ СКРОЛЛА - СОХРАНЕНИЕ ПОЗИЦИИ
   ================================================================= */

/* Отключаем scroll-behavior везде */
html,
body {
    scroll-behavior: auto !important;
}

* {
    scroll-behavior: auto !important;
}

/* Эмулируем overflow: hidden через padding/margin при открытом меню */
body.hc-nav-open {
    overflow-y: scroll !important;
    pointer-events: none !important;
}

body.hc-nav-open .page-wrap,
body.hc-nav-open .hc-offcanvas-nav {
    pointer-events: auto !important;
}

/* =================================================================
   TELEGRAM MINI APP - ПЕРЕМЕЩЕНИЕ КНОПОК
   ================================================================= */

@media (max-width: 767px) {
    /* КНОПКА МЕНЮ - ПРАВЫЙ НИЖНИЙ УГОЛ */
    .menu-button-mobile {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        right: 15px !important;
        left: auto !important;
        z-index: 999999 !important;
    }
    
    /* КНОПКА "ВВЕРХ" - ЛЕВЫЙ НИЖНИЙ УГОЛ */
    #toTop,
    .scroll-to-top,
    a[href="#top"],
    .back-to-top {
        position: fixed !important;
        bottom: 20px !important;
        left: 15px !important;
        right: auto !important;
    }
}

/* ПОДСКАЗКА ДЛЯ МЕНЮ */
.menu-tooltip {
    position: fixed;
    bottom: 80px;
    right: 15px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    z-index: 999998;
    animation: fadeInOut 2s ease-in-out forwards;
    pointer-events: none;
    white-space: nowrap;
}

.menu-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(255, 255, 255, 0.95);
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    20% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* КНОПКА "ВВЕРХ" - ЛЕВЫЙ НИЖНИЙ УГОЛ - ДОПОЛНИТЕЛЬНЫЕ СЕЛЕКТОРЫ */
@media (max-width: 767px) {
    #toTop,
    .toTop,
    .scroll-to-top,
    .scrolltop,
    .scroll-top,
    a[href="#top"],
    a[href="#"],
    .back-to-top,
    .backtotop,
    .go-top,
    [class*="scroll"][class*="top"],
    button[class*="top"],
    .fa-arrow-up:parent,
    .la-arrow-up:parent {
        position: fixed !important;
        bottom: 20px !important;
        left: 15px !important;
        right: auto !important;
    }
}

/* КНОПКА "ВВЕРХ" #return-to-top - ЛЕВЫЙ НИЖНИЙ УГОЛ */
@media (max-width: 767px) {
    #return-to-top {
        position: fixed !important;
        bottom: 20px !important;
        left: 15px !important;
        right: auto !important;
    }
}

/* Для всех размеров экрана в Telegram Mini App */
#return-to-top {
    position: fixed !important;
    bottom: 20px !important;
    left: 15px !important;
    right: auto !important;
}

/* =================================================================
   КНОПКА МЕНЮ - ОДИНАКОВЫЙ СТИЛЬ С КНОПКОЙ "ВВЕРХ"
   ================================================================= */

@media (max-width: 767px) {
    /* Обновляем стили кнопки меню */
    .menu-button-mobile {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        right: 15px !important;
        left: auto !important;
        z-index: 999999 !important;
        /* Убираем старые размеры */
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 50% !important; /* Делаем круглой как кнопка "Вверх" */
        box-shadow: 0 3px 12px rgba(0,0,0,0.18) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .menu-button-mobile .navbar-header {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .menu-button-mobile a.custom-menu-icon {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    
    /* Уменьшаем иконку меню */
    .menu-button-mobile svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* =================================================================
   ИСПРАВЛЕНИЕ КНОПКИ МЕНЮ - ТОЧНЫЕ ОТСТУПЫ
   ================================================================= */

@media (max-width: 767px) {
    /* Кнопка меню с правильными отступами */
    .menu-button-mobile {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
        z-index: 999999 !important;
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 50% !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.18) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .menu-button-mobile .navbar-header {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .menu-button-mobile a.custom-menu-icon,
    .menu-button-mobile .hc-nav-trigger {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 50% !important;
    }
    
    /* Уменьшаем иконку меню */
    .menu-button-mobile svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Кнопка "Вверх" с теми же отступами */
    #return-to-top {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        right: auto !important;
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ПОДСКАЗКА ДЛЯ МЕНЮ - ИСПРАВЛЕННАЯ */
.menu-tooltip {
    position: fixed !important;
    bottom: 80px !important;
    right: 20px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #333 !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    z-index: 999998 !important;
    animation: fadeInOut 2s ease-in-out forwards !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0 !important;
}

.menu-tooltip::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    right: 20px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid rgba(255, 255, 255, 0.95) !important;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    20% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* =================================================================
   ОТКЛЮЧЕНИЕ MARGIN ДЛЯ КНОПКИ МЕНЮ
   ================================================================= */

@media (max-width: 767px) {
    .menu-button {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =================================================================
   ОТКЛЮЧЕНИЕ ВСЕХ ПАРАМЕТРОВ ДЛЯ КНОПКИ МЕНЮ
   ================================================================= */

@media (max-width: 767px) {
    .menu-button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        display: block !important;
        align-items: unset !important;
        justify-content: unset !important;
    }
}

/* =================================================================
   АГРЕССИВНОЕ ОТКЛЮЧЕНИЕ ВСЕХ ПАРАМЕТРОВ MENU-BUTTON
   ================================================================= */

.menu-button,
.menu-button-mobile,
div.menu-button,
div.menu-button-mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    display: block !important;
    align-items: normal !important;
    justify-content: normal !important;
}

@media (max-width: 767px) {
    .menu-button,
    .menu-button-mobile,
    div.menu-button,
    div.menu-button-mobile {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        float: none !important;
        display: block !important;
        align-items: normal !important;
        justify-content: normal !important;
    }
    
    .header-right .menu-button,
    .header-right.menu-button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }
}

/* =================================================================
   ПЛАВНАЯ АНИМАЦИЯ КНОПОК ПРИ ОТКРЫТИИ МЕНЮ
   ================================================================= */

#return-to-top,
.menu-button-mobile {
    transition: opacity 0.3s ease-in-out !important;
}

#return-to-top.fade-out,
.menu-button-mobile.fade-out {
    opacity: 0 !important;
    pointer-events: none !important;
}

#return-to-top.fade-in,
.menu-button-mobile.fade-in {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* =================================================================
   ПРИНУДИТЕЛЬНАЯ ПЛАВНАЯ АНИМАЦИЯ КНОПОК
   ================================================================= */

#return-to-top,
.menu-button-mobile,
.menu-button-mobile * {
    transition: opacity 0.5s ease-in-out !important;
    -webkit-transition: opacity 0.5s ease-in-out !important;
    -moz-transition: opacity 0.5s ease-in-out !important;
    -o-transition: opacity 0.5s ease-in-out !important;
}

/* Состояния для плавного затухания */
body.hc-nav-open #return-to-top,
body.hc-nav-open .menu-button-mobile {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease-in-out !important;
}

/* Состояния для плавного появления */
body:not(.hc-nav-open) #return-to-top,
body:not(.hc-nav-open) .menu-button-mobile {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.5s ease-in-out !important;
}

/* =================================================================

/* =================================================================
   ПЛАВНАЯ АНИМАЦИЯ КНОПОК (БЕЗ БЛОКИРОВКИ)
   ================================================================= */

#return-to-top,
.menu-button-mobile {
    transition: opacity 0.5s ease-in-out !important;
}