/**
 * Personal Cabinet Menu - Mobile Styles
 * Стили для мобильного меню в sidebar-slide.php
 */

/* ============================================================
   ОБЩИЕ СТИЛИ КОНТЕЙНЕРА
   ============================================================ */

#mobile-personal-cabinet {
    padding: 0;
    margin-bottom: 20px; /* Отступ от основного меню */
    border-radius: 8px;
    overflow: hidden;
    background: #fff; /* Фон для контейнера */
}

/* Заголовок с информацией о пользователе (Триггер) */
.mobile-cabinet-header {
    padding: 20px 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.mobile-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-user-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
}

.mobile-user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-user-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-user-login {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

/* Стрелка переключения */
.mobile-cabinet-arrow {
    font-size: 20px;
    color: #fff;
    transition: transform 0.3s ease;
    margin-left: 10px;
}

.mobile-personal-cabinet.is-open .mobile-cabinet-arrow {
    transform: rotate(180deg);
}

/* ============================================================
   КОЛЛАПСИРУЕМЫЙ КОНТЕНТ (Сворачивание/разворачивание)
   ============================================================ */

.mobile-cabinet-content {
    /* Стили для сворачивания */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background: #fff;
    padding-bottom: 0; /* Удаляем внутренний паддинг, чтобы избежать белой полосы при закрытии */
}

.mobile-personal-cabinet.is-open .mobile-cabinet-content {
    /* Значение max-height должно быть достаточно большим, чтобы вместить все меню */
    max-height: 1000px; 
    padding-bottom: 10px; /* Добавляем нижний паддинг, когда открыто */
}

/* ============================================================
   СТИЛИ ВЛОЖЕННОГО МЕНЮ (Output of [personal_cabinet_menu])
   ============================================================ */

/* Скрываем ненужные обертки, которые генерирует шорткод в этом контексте */
.mobile-cabinet-content .pcm-personal-cabinet-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    z-index: auto !important;
}

.mobile-cabinet-content .pcm-cabinet-trigger {
    /* Скрываем основной десктопный триггер */
    display: none !important;
}

.mobile-cabinet-content .pcm-cabinet-dropdown {
    /* Сбрасываем стили выпадающего меню */
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 0 !important;
    width: auto !important;
}

.mobile-cabinet-content .pcm-cabinet-header {
    /* Скрываем внутренний заголовок, так как у нас есть внешний */
    display: none;
}

/* Список пунктов меню */
.mobile-cabinet-content .pcm-cabinet-menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-cabinet-content .pcm-cabinet-menu-list li {
    border-bottom: 1px solid #eee;
    margin: 0;
}

.mobile-cabinet-content .pcm-cabinet-menu-list li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.mobile-cabinet-content .pcm-cabinet-menu-list li a:hover {
    background-color: #f7f7f7;
}

.mobile-cabinet-content .pcm-cabinet-menu-list li i {
    font-size: 16px;
    color: #667eea;
}

.mobile-cabinet-content .pcm-cabinet-menu-list li.pcm-logout-item {
    border-top: 1px solid #ddd;
}

.mobile-cabinet-content .pcm-cabinet-menu-list li.pcm-logout-item a {
    color: #dc3545;
}

.mobile-cabinet-content .pcm-cabinet-menu-list li.pcm-logout-item i {
    color: #dc3545;
}

/* Анимация пульсации для привлечения внимания (опционально) */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
}

/* Применяется только при первом входе */
.mobile-personal-cabinet.first-visit .mobile-cabinet-arrow {
    animation: pulse 2s ease-in-out 3;
}