/*
 * АГРЕССИВНЫЙ FIX для overflow
 * Применяется ко ВСЕМ элементам без исключений
 * НО: БЕЗ правил для .folder-card-1 - они конфликтуют с GSAP
 */

@media (max-width: 767.98px) {

    /* Уровень 1: Корневые элементы */
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
        box-sizing: border-box !important;
    }

    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 80px !important;
        box-sizing: border-box !important;
    }

    /* Уровень 2: ВСЕ элементы */
    * {
        box-sizing: border-box !important;
    }

    *:not(iconify-icon):not(svg):not(path) {
        max-width: 100vw !important;
    }

    /* Уровень 3: Контейнеры и секции */
    .container,
    .container-fluid,
    .row,
    section,
    main,
    article,
    aside,
    div[class*="section-"],
    div[class*="hero"],
    div[class*="feature"],
    div[class*="category"],
    div[class*="pricing"],
    div[class*="testimonial"],
    div[class*="cta"] {
        overflow-x: hidden !important;
        max-width: 100% !important;
        /* width: 100% удалено - ломало круглые аватары */
    }

    /* Исключение: аватары должны оставаться круглыми */
    .testimonial-avatar-circle {
        width: auto !important;
        max-width: none !important;
    }

    /* Уровень 4: Row исправления */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Уровень 5: Columns */
    [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }

    /* Уровень 6: Smooth scroll wrappers */
    #smooth-wrapper,
    #smooth-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }

    /* Уровень 7: Изображения */
    img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* Уровень 8: Blend-y-end fix */
    .blend-y-end {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    .blend-y-end img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* Мобильное меню аватара как обычный dropdown под кнопкой */
@media (max-width: 991.98px) {
    .mobile-header-actions {
        position: relative;
        z-index: 10000;
        /* чтобы меню не пряталось под контентом */
    }

    #mobileAvatarMenu.collapse {
        position: fixed !important;
        /* Поведение, как у бургер-меню */
        top: 70px !important;
        right: 1rem !important;
        left: 1rem !important;
        width: auto !important;
        min-width: 200px !important;
        max-width: calc(100vw - 2rem) !important;

        background: rgba(15, 23, 42, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
        padding: 0.5rem 0 !important;

        opacity: 0;
        visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        pointer-events: none;
        display: none;
        z-index: 9998 !important;
        transition: none !important;

        /* Ensure no margin interference */
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Убираем анимацию высоты collapsing, чтобы не мигала старая верстка */
    #mobileAvatarMenu.collapsing {
        height: auto !important;
        transition: none !important;
        overflow: visible !important;
    }

    #mobileAvatarMenu.collapse.show,
    #mobileAvatarMenu.collapsing {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    /* Стили пунктов меню (раньше завязаны на .mobile-header-actions) */
    #mobileAvatarMenu .dropdown-item {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem;
        display: flex !important;
    }

    #mobileAvatarMenu .dropdown-item:hover {
        background: rgba(99, 102, 241, 0.1) !important;
        color: rgba(99, 102, 241, 1) !important;
    }

    #mobileAvatarMenu .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.1);
        opacity: 1 !important;
        margin: 0.5rem 0;
    }
}