/* VIA Derm — премиальное мобильное меню (золото-беж, дорогой стиль) */

@media (max-width: 991.98px) {

    /* ── Контейнер меню ─────────────────────────────────────────────── */
    .pbmit-mobile-menu-bg {
        background: linear-gradient(160deg, #14140e 0%, #0a0a07 100%) !important;
    }

    /* Тонкая золотая полоска по левому краю выезжающей панели */
    .pbmit-mobile-menu-bg::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(212, 175, 55, .55) 30%, rgba(212, 175, 55, .55) 70%, transparent);
        pointer-events: none;
    }

    /* Логотип VIA Derm в шапке меню (если рендерится) */
    body.active .pbmit-mobile-menu-bg::after {
        content: "";
        position: absolute;
        top: 22px;
        left: 24px;
        width: 56px;
        height: 56px;
        background: url('../images/logo-white.svg') no-repeat center / contain;
        opacity: .92;
        pointer-events: none;
    }

    /* ── Контейнер навигации ───────────────────────────────────────── */
    .site-header .pbmit-navbar > div,
    .pbmit-mobile-menu-bg .pbmit-navbar > div {
        background: transparent !important;
        top: 0 !important;
        padding: 100px 0 40px !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }

    /* ── Закрывашка ─────────────────────────────────────────────────── */
    .closepanel {
        right: 18px !important;
        top: 22px !important;
        width: 40px !important;
        height: 40px !important;
        border: 1px solid rgba(212, 175, 55, .35) !important;
        border-radius: 50% !important;
        display: grid !important;
        place-items: center !important;
        background: rgba(20, 20, 14, .6) !important;
        transition: background .25s ease, transform .3s cubic-bezier(.2,.85,.25,1.4), border-color .25s ease !important;
    }
    .closepanel:hover, .closepanel:focus-visible {
        background: var(--pbmit-global-color, #d4af37) !important;
        border-color: transparent !important;
        transform: rotate(90deg);
    }
    .closepanel svg {
        fill: #f3d57a !important;
        width: 16px !important;
        height: 16px !important;
        transition: fill .25s ease;
    }
    .closepanel:hover svg { fill: #14140e !important; }

    /* ── Список ────────────────────────────────────────────────────── */
    ul#pbmit-top-menu {
        padding: 0 18px !important;
        margin: 0 !important;
    }
    .main-menu .navigation > li {
        border-bottom: 1px solid rgba(212, 175, 55, .12) !important;
        position: relative;
        opacity: 0;
        transform: translateX(20px);
        transition: opacity .35s ease, transform .35s ease;
    }
    body.active .main-menu .navigation > li {
        opacity: 1;
        transform: none;
    }
    /* Поочерёдная анимация появления */
    body.active .main-menu .navigation > li:nth-child(1) { transition-delay: .15s; }
    body.active .main-menu .navigation > li:nth-child(2) { transition-delay: .22s; }
    body.active .main-menu .navigation > li:nth-child(3) { transition-delay: .29s; }
    body.active .main-menu .navigation > li:nth-child(4) { transition-delay: .36s; }
    body.active .main-menu .navigation > li:nth-child(5) { transition-delay: .43s; }
    body.active .main-menu .navigation > li:nth-child(6) { transition-delay: .50s; }
    body.active .main-menu .navigation > li:nth-child(7) { transition-delay: .57s; }

    /* Текст пунктов */
    .site-header .site-navigation ul.navigation > li > a {
        color: #f5e8c8 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
        padding: 18px 16px !important;
        display: block !important;
        position: relative;
        transition: color .25s ease, padding-left .25s ease, background .25s ease;
    }
    /* Лёгкий hover/active фон + золотой бар слева */
    .site-header .site-navigation ul.navigation > li > a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        transform-origin: center;
        width: 3px;
        height: 60%;
        background: linear-gradient(180deg, #f6dd8a, #d4af37);
        border-radius: 2px;
        transition: transform .3s cubic-bezier(.2,.85,.25,1.2);
    }
    .site-header .site-navigation ul.navigation > li.active > a,
    .site-header .site-navigation ul.navigation > li > a:hover {
        color: #f3d57a !important;
        padding-left: 22px !important;
    }
    .site-header .site-navigation ul.navigation > li.active > a::before,
    .site-header .site-navigation ul.navigation > li > a:hover::before {
        transform: translateY(-50%) scaleY(1);
    }

    /* ── Стрелочка справа ──────────────────────────────────────────── */
    .site-header .sub-menu-toggle {
        right: 14px !important;
        top: 18px !important;
        width: 28px !important;
        height: 28px !important;
        display: grid !important;
        place-items: center !important;
        color: #d4af37 !important;
        border: 1px solid rgba(212, 175, 55, .35) !important;
        border-radius: 50%;
        transition: transform .35s cubic-bezier(.2,.85,.3,1.2), background .25s ease, color .25s ease;
    }
    .site-header .sub-menu-toggle i {
        font-size: 11px !important;
        transition: transform .3s ease;
    }
    /* Когда подменю открыто — стрелка поворачивается */
    .main-menu .navigation > li.dropdown > ul.show ~ .sub-menu-toggle,
    .main-menu .navigation > li:has(ul.show) > .sub-menu-toggle {
        background: var(--pbmit-global-color, #d4af37) !important;
        color: #14140e !important;
        transform: rotate(90deg);
    }

    /* ── Подменю ────────────────────────────────────────────────────── */
    .main-menu .navigation > li > ul {
        background: transparent !important;
        padding: 0 0 0 18px !important;
        margin: 0 0 6px 0 !important;
        border-left: 1px solid rgba(212, 175, 55, .25);
    }
    .main-menu .navigation > li > ul.show {
        animation: pbmitSubExpand .35s cubic-bezier(.2,.85,.25,1) both;
    }
    @keyframes pbmitSubExpand {
        from { opacity: 0; transform: translateY(-6px); max-height: 0; }
        to   { opacity: 1; transform: none; max-height: 600px; }
    }
    .main-menu .navigation > li > ul li {
        border: none !important;
        opacity: 0;
        transform: translateX(10px);
        animation: pbmitSubItem .35s ease forwards;
    }
    .main-menu .navigation > li > ul.show li:nth-child(1) { animation-delay: .08s; }
    .main-menu .navigation > li > ul.show li:nth-child(2) { animation-delay: .14s; }
    .main-menu .navigation > li > ul.show li:nth-child(3) { animation-delay: .20s; }
    .main-menu .navigation > li > ul.show li:nth-child(4) { animation-delay: .26s; }
    .main-menu .navigation > li > ul.show li:nth-child(5) { animation-delay: .32s; }
    @keyframes pbmitSubItem { to { opacity: 1; transform: none; } }

    .main-menu .navigation > li > ul a {
        color: rgba(245, 232, 200, .75) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        letter-spacing: .04em !important;
        text-transform: none !important;
        padding: 11px 14px !important;
        display: block !important;
        transition: color .2s ease, padding-left .2s ease;
    }
    .main-menu .navigation > li > ul a:hover {
        color: #f3d57a !important;
        padding-left: 18px !important;
    }

    /* Скроллбар внутри меню — золотой */
    .pbmit-navbar > div::-webkit-scrollbar { width: 4px; }
    .pbmit-navbar > div::-webkit-scrollbar-thumb {
        background: rgba(212, 175, 55, .4);
        border-radius: 2px;
    }

    /* Курсор pointer на родителях, чтобы было понятно что клик работает */
    .pbmit-navbar li.dropdown > a,
    .pbmit-navbar li:has(ul) > a {
        cursor: pointer;
    }

    @media (prefers-reduced-motion: reduce) {
        .main-menu .navigation > li,
        .main-menu .navigation > li > ul,
        .main-menu .navigation > li > ul li,
        .closepanel,
        .site-header .sub-menu-toggle {
            animation: none !important;
            transition: none !important;
            transform: none !important;
            opacity: 1 !important;
        }
    }
}