/* ===== GLOBAL HORIZONTAL SCROLL FIX ===== */
/* Убирает нижнюю горизонтальную полосу прокрутки страницы.
   Обычный вертикальный скролл сайта остается. */

html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    position: relative;
}

/* Не даем секциям и декоративным рамкам вылезать шире экрана */
main,
section,
header,
footer,
.container,
.hero,
.services,
.services-section,
.services-page,
.service-page,
.price-list-full,
.prices-section,
.top-entertainment,
.top-entertainment-section,
.entertainment-section,
.premium-section,
.pastel-section,
.aurora-section,
.content-wrapper,
.page-wrapper,
.wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Частая причина полосы — элементы с width: 100vw + padding/border */
.hero,
.services,
.services-section,
.price-list-full,
.top-entertainment,
.entertainment-section {
    width: 100% !important;
}

/* Изображения, карточки и сетки не должны растягивать страницу */
img,
video,
iframe,
.card,
.service-card,
.entertainment-card,
.price-card,
.loft-card,
.portfolio-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Горизонтальные меню/табы пусть скроллятся внутри себя, но не растягивают всю страницу */
.services-nav,
.services-tabs,
.tabs,
.category-tabs,
.filter-tabs,
.nav-tabs {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
}

/* Скрываем внешний вид горизонтального скролла у табов */
.services-nav::-webkit-scrollbar,
.services-tabs::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.category-tabs::-webkit-scrollbar,
.filter-tabs::-webkit-scrollbar,
.nav-tabs::-webkit-scrollbar {
    height: 0 !important;
    display: none !important;
}

.services-nav,
.services-tabs,
.tabs,
.category-tabs,
.filter-tabs,
.nav-tabs {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Если декоративные элементы/звездочки/псевдоэлементы выходят за экран */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ===== GLOBAL INNER SCROLLBAR FIX: HERO + SERVICES PRICES ===== */
/* Обычный скролл страницы НЕ трогаем. Убираем только внутренние полосы в рамках. */

.hero,
.hero .container,
.hero-content,
.hero-wrapper,
.hero-inner,
.hero-card,
.hero-frame,
.main-hero,
.main-hero .container,
.main-hero-content {
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
}

.hero::-webkit-scrollbar,
.hero .container::-webkit-scrollbar,
.hero-content::-webkit-scrollbar,
.hero-wrapper::-webkit-scrollbar,
.hero-inner::-webkit-scrollbar,
.hero-card::-webkit-scrollbar,
.hero-frame::-webkit-scrollbar,
.main-hero::-webkit-scrollbar,
.main-hero .container::-webkit-scrollbar,
.main-hero-content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.hero,
.hero .container,
.hero-content,
.hero-wrapper,
.hero-inner,
.hero-card,
.hero-frame,
.main-hero,
.main-hero .container,
.main-hero-content {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Услуги и цены / прайс-лист */
#prices,
#prices .container,
#prices .service-section,
.price-list-full,
.price-list-full .container,
.price-list-full .price-table,
.price-table,
.price-table-wrapper,
.pricing-table,
.pricing-wrapper,
.puppet-prices,
.individual-prices,
.service-prices,
.services-prices,
.prices-section,
.prices-wrapper {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    height: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#prices::-webkit-scrollbar,
#prices .container::-webkit-scrollbar,
#prices .service-section::-webkit-scrollbar,
.price-list-full::-webkit-scrollbar,
.price-list-full .container::-webkit-scrollbar,
.price-list-full .price-table::-webkit-scrollbar,
.price-table::-webkit-scrollbar,
.price-table-wrapper::-webkit-scrollbar,
.pricing-table::-webkit-scrollbar,
.pricing-wrapper::-webkit-scrollbar,
.puppet-prices::-webkit-scrollbar,
.individual-prices::-webkit-scrollbar,
.service-prices::-webkit-scrollbar,
.services-prices::-webkit-scrollbar,
.prices-section::-webkit-scrollbar,
.prices-wrapper::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Чтобы таблица цен не создавала внутреннюю горизонтальную прокрутку */
.price-table,
.price-list-full .price-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.price-header,
.price-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .price-header,
    .price-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        text-align: center !important;
    }

    .price-col,
    .price-name,
    .price-duration,
    .price-value {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

/* ===== GLOBAL MOBILE FIXED BOTTOM PANEL ===== */
@media (max-width: 768px) {
    /* Старый бургер в шапке полностью убран на всех страницах */
    .menu-toggle,
    #menuToggle,
    header .menu-toggle,
    .navbar .menu-toggle,
    .mobile-burger,
    .burger,
    .burger-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 78px !important;
        background: rgba(255, 255, 255, 0.97) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 2147483000 !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        width: 33.333%;
        height: 100%;
        background: transparent;
        border: 0;
        outline: 0;
        padding: 8px 4px;
        margin: 0;
        color: #2e2348;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        font-family: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav .icon {
        font-size: 24px;
        line-height: 1;
        display: block;
    }

    .mobile-bottom-nav .center-action {
        color: #7a4fa3;
        font-weight: 700;
    }

    .mobile-bottom-nav .center-action .icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f3b7ff, #92d9ff);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2e2348;
        box-shadow: 0 6px 18px rgba(122, 79, 163, 0.25);
    }

    .mobile-slide-menu {
        position: fixed !important;
        left: 14px !important;
        right: 14px !important;
        bottom: 92px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: 22px;
        padding: 14px 18px;
        z-index: 2147482999 !important;
        display: none;
        flex-direction: column;
        box-shadow: 0 12px 38px rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .mobile-slide-menu.active {
        display: flex !important;
    }

    .mobile-slide-menu a {
        display: block;
        padding: 13px 4px;
        color: #2e2348;
        text-decoration: none;
        font-size: 17px;
        font-weight: 700;
        border-bottom: 1px solid rgba(46, 35, 72, 0.10);
    }

    .mobile-slide-menu a:last-child { border-bottom: 0; }

    .whatsapp-btn, .whatsapp-button, .whatsapp-float { bottom: 168px !important; }
    .telegram-btn, .telegram-button, .telegram-float { bottom: 92px !important; }

    body { padding-bottom: 96px !important; }

}

@media (min-width: 769px) {
    .mobile-bottom-nav,
    .mobile-slide-menu {
        display: none !important;
    }
}


/* ===== STABLE FRAME FIX: HERO + SERVICES NAV =====
   Исправление по подсказке преподавателя:
   родитель ограничивает рамку, дочерние слои не становятся выше/шире родителя.
   Поэтому у hero и блока "Наши услуги" больше не появляется собственный скролл. */
.hero,
.page-header {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: min(720px, 100svh) !important;
    height: auto !important;
    overflow: hidden !important;
    overscroll-behavior: auto !important;
    isolation: isolate !important;
}

.hero > .container,
.page-header > .container,
.hero-content,
.main-hero-content,
.banner-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.hero::before,
.hero::after,
.page-header::before,
.page-header::after {
    max-width: 100% !important;
    max-height: 100% !important;
    pointer-events: none !important;
}

.hero-frame,
.hero-wrapper,
.hero-inner,
.hero-card {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.hero::-webkit-scrollbar,
.page-header::-webkit-scrollbar,
.hero-frame::-webkit-scrollbar,
.hero-wrapper::-webkit-scrollbar,
.hero-inner::-webkit-scrollbar,
.hero-card::-webkit-scrollbar,
.hero-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Блок навигации "Наши услуги": вместо внутреннего горизонтального скролла
   элементы переносятся на новую строку и остаются внутри родительской рамки. */
.services-nav {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: normal !important;
}

.services-nav .container {
    max-width: 1200px !important;
    overflow: visible !important;
}

.services-nav-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    white-space: normal !important;
    gap: 12px !important;
}

.services-nav .nav-link,
.services-nav-inner .nav-link {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    max-width: 180px !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

.services-nav::-webkit-scrollbar,
.services-nav-inner::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

@media (max-width: 768px) {
    .hero,
    .page-header {
        min-height: auto !important;
        padding-top: 96px !important;
        padding-bottom: 88px !important;
    }

    .services-nav-inner {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .services-nav .nav-link,
    .services-nav-inner .nav-link {
        width: 100% !important;
        max-width: none !important;
        min-height: 72px !important;
    }
}

@media (max-width: 420px) {
    .services-nav-inner {
        grid-template-columns: 1fr !important;
    }
}


/* === FIX 2026-05: smaller gap between mobile WhatsApp/Telegram buttons === */
@media (max-width: 768px) {
    .whatsapp-btn, .whatsapp-button, .whatsapp-float { bottom: 150px !important; }
    .telegram-btn, .telegram-button, .telegram-float { bottom: 92px !important; }
}

.services-nav {
    width: calc(100% - 60px) !important;
    max-width: calc(100% - 60px) !important;
    margin-left: 37px !important;
    margin-top: 50px !important;
}

body .page-header {
    min-height: 360px !important;
    padding: 70px 0 !important;
}