/**
 * Mobile Menu Styles
 * Стилі для мобільного меню з підтримкою підменю
 * bookish.kiev.ua
 */

/* Основний контейнер мобільного меню */
#mobilemenu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: #fff;
    z-index: 10000;
    overflow: hidden;
    transition: left 0.3s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

#mobilemenu.opened {
    left: 0;
}

/* Overlay при відкритому меню */
#mobilemenu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#mobilemenu.opened + #mobilemenu-overlay,
#mobilemenu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Scroller всередині меню */
#mobilemenu .mobilemenu-v1.scroller {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 60px; /* Відступ для кнопки закриття */
    padding-top: calc(60px + env(safe-area-inset-top, 0px)); /* Підтримка Safe Area для iPhone */
}

#mobilemenu .wrap {
    padding: 10px 0;
}

/* Основний список меню */
#mobilemenu .menu.top {
    margin: 0;
    padding: 0;
}

#mobilemenu .menu.top ul.top {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobilemenu .menu.top ul.top > li {
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

/* Посилання в меню */
#mobilemenu .menu.top ul.top > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#mobilemenu .menu.top ul.top > li > a:hover,
#mobilemenu .menu.top ul.top > li > a:active {
    background-color: #f8f8f8;
    color: #be003c;
}

#mobilemenu .menu.top ul.top > li > a span:first-child {
    flex: 1;
}

/* Стрілка для батьківських елементів */
#mobilemenu .menu.top ul.top > li > a .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

#mobilemenu .menu.top ul.top > li > a .arrow .svg,
#mobilemenu .menu.top ul.top > li > a .arrow i {
    font-size: 12px;
    color: #999;
    transition: color 0.2s ease;
}

#mobilemenu .menu.top ul.top > li > a:hover .arrow .svg,
#mobilemenu .menu.top ul.top > li > a:hover .arrow i {
    color: #be003c;
}

/* ===== DROPDOWN ПІДМЕНЮ ===== */
#mobilemenu ul.dropdown {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10001;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Показуємо підменю при кліку */
#mobilemenu ul.dropdown.show {
    left: 0;
}

/* Елементи в підменю */
#mobilemenu ul.dropdown > li {
    border-bottom: 1px solid #f0f0f0;
}

#mobilemenu ul.dropdown > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#mobilemenu ul.dropdown > li > a:hover,
#mobilemenu ul.dropdown > li > a:active {
    background-color: #f8f8f8;
    color: #be003c;
}

/* ===== КНОПКА "НАЗАД" ===== */
#mobilemenu ul.dropdown > li.menu_back {
    background: linear-gradient(135deg, #be003c 0%, #9a0031 100%);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 10;
}

#mobilemenu ul.dropdown > li.menu_back > a {
    color: #fff;
    font-weight: 600;
    padding: 16px;
    justify-content: flex-start;
    gap: 10px;
}

#mobilemenu ul.dropdown > li.menu_back > a:hover,
#mobilemenu ul.dropdown > li.menu_back > a:active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

#mobilemenu ul.dropdown > li.menu_back > a .svg,
#mobilemenu ul.dropdown > li.menu_back > a i {
    transform: rotate(180deg);
    font-size: 14px;
}

/* ===== ЗАГОЛОВОК ПІДМЕНЮ ===== */
#mobilemenu ul.dropdown > li.menu_title {
    background: #f8f8f8;
    border-bottom: 2px solid #be003c;
}

#mobilemenu ul.dropdown > li.menu_title > a {
    color: #333;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 16px;
}

#mobilemenu ul.dropdown > li.menu_title > a:hover {
    color: #be003c;
    background: transparent;
}

/* ===== ВКЛАДЕНІ ПІДМЕНЮ (2 рівень) ===== */
#mobilemenu ul.dropdown ul.dropdown {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10002;
}

#mobilemenu ul.dropdown ul.dropdown.show {
    left: 0;
}

/* ===== СТИЛІ ДЛЯ ЕЛЕМЕНТІВ PARENT ===== */
#mobilemenu a.parent {
    cursor: pointer;
}

#mobilemenu a.parent span:first-child {
    flex: 1;
}

/* Стрілка для parent елементів */
#mobilemenu a.parent .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    margin-right: -16px;
    padding-right: 16px;
}

/* ===== АНІМАЦІЯ ДЛЯ SVG ІКОНОК ===== */
#mobilemenu .svg.svg_triangle_right,
#mobilemenu .svg.svg-arrow-right {
    display: inline-block;
    width: 10px;
    height: 10px;
    transition: transform 0.2s ease;
}

/* ===== КОНТАКТИ В МОБІЛЬНОМУ МЕНЮ ===== */
#mobilemenu .contacts {
    padding: 20px 16px;
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
}

#mobilemenu .contacts a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

#mobilemenu .contacts a:hover {
    color: #be003c;
}

#mobilemenu .contacts a i,
#mobilemenu .contacts a .fa {
    width: 20px;
    text-align: center;
    color: #be003c;
}

/* ===== АДАПТИВНІСТЬ ===== */
@media (max-width: 480px) {
    #mobilemenu {
        width: 100%;
        max-width: none;
    }
}

@media (min-width: 992px) {
    /* На десктопі ховаємо мобільне меню */
    #mobilemenu,
    #mobilemenu-overlay {
        display: none !important;
    }
}

/* ===== ACCESSIBILITY ===== */
#mobilemenu a:focus {
    outline: 2px solid #be003c;
    outline-offset: -2px;
}

#mobilemenu ul.dropdown > li.menu_back > a:focus {
    outline-color: #fff;
}

/* ===== ЗАКРИТТЯ МЕНЮ ===== */
#mobilemenu .menu-close {
    position: absolute;
    top: 10px;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #be003c 0%, #9a0031 100%);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s ease;
    color: #fff;
    box-shadow: 0 2px 8px rgba(190, 0, 60, 0.3);
}

#mobilemenu .menu-close:hover {
    background: linear-gradient(135deg, #d10043 0%, #be003c 100%);
    transform: scale(1.05);
}

#mobilemenu .menu-close:active {
    transform: scale(0.95);
}

#mobilemenu .menu-close svg {
    width: 18px;
    height: 18px;
}