/* Mobile Menu Styles - Extracted from common.css */

/* Desktop: Hide mobile menu elements */
@media (min-width: 992px) {
    .mobile-dropdown-header,
    .mobile-category-list,
    .mobile-dropdown-image {
        display: none;
    }
}

/* Mobile Menu Overlay - Only visible on mobile */
.mobile-menu-overlay {
    display: none;
}

@media (max-width: 991.98px) {
    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .navbar .container-fluid{
        padding-left: 0 !important;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* max-width: 400px; */
        height: 100%;
        background: #f5f5f5;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: visible;
    }

    .mobile-menu-overlay.active .mobile-menu-container {
        transform: translateX(0);
    }

    /* Mobile Menu Header */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 10002;
        flex-shrink: 0;
    }

    /* 确保头部在二级菜单中也能显示 */
    .mobile-menu-item.active .mobile-menu-dropdown .mobile-menu-header {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10002 !important;
        flex-shrink: 0 !important;
    }

    /* 确保头部在三级菜单中也能显示 */
    .mobile-category-item.active .mobile-category-submenu .mobile-menu-header {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10002 !important;
        flex-shrink: 0 !important;
        background: #fff !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 确保三级菜单中的子菜单头部也能显示，位于logo头部下方 */
    .mobile-category-item.active .mobile-category-submenu .mobile-submenu-header {
        display: flex !important;
        position: sticky !important;
        top: 76px !important; /* logo头部高度 + padding，使其位于logo头部下方 */
        z-index: 10 !important;
        background: #fff !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #39393999 !important;
    }

    .mobile-menu-logo {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .mobile-logo-img {
        height: 25px;
        width: auto;
    }

    .mobile-logo-text {
        display: flex;
        flex-direction: column;
        font-size: 0.9rem;
        color: #333;
        line-height: 1.3;
    }

    .mobile-logo-text div:first-child {
        font-weight: 500;
        color: #333;
    }

    .mobile-logo-text div:last-child {
        font-size: 0.75rem;
        color: #666;
    }

    .mobile-menu-close {
        background: none;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        color: #333;
        font-size: 1.5rem;
        line-height: 1;
    }

    /* Mobile Menu List */
    .mobile-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
        background: #f5f5f5;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        transition: transform 0.3s ease;
    }

    .mobile-menu-item {
        position: relative;
    }

    .mobile-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem;
        color: #333;
        text-decoration: none;
        background: #fff;
        transition: background 0.2s ease;
        font-size: 24.2px;
        font-weight: 500;
    }

    .mobile-menu-link:hover {
        background: #f9f9f9;
    }

    .mobile-menu-link span {
        flex: 1;
    }

    .mobile-menu-link i {
        color: #999;
        font-size: 0.9rem;
    }

    /* Mobile Menu Dropdown */
    .mobile-menu-dropdown {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 400px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        background: #fff !important;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 10000 !important;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex !important;
        flex-direction: column;
        visibility: hidden;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    }

    .mobile-menu-item.active .mobile-menu-dropdown {
        transform: translateX(0) !important;
        visibility: visible !important;
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        z-index: 10000 !important;
    }

    /* 确保父元素不会裁剪二级菜单 */
    .mobile-menu-item.active {
        position: static !important;
        overflow: visible !important;
    }

    .mobile-menu-list {
        overflow: visible !important;
    }

    .mobile-menu-container.has-active-dropdown {
        overflow: visible !important;
    }

    /* 确保二级菜单内的元素正确显示 - 使用更高优先级 */
    .mobile-menu-item.active .mobile-menu-dropdown .mobile-menu-header {
        display: flex !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10002 !important;
        background: #fff !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-menu-item.active .mobile-menu-dropdown .mobile-dropdown-header {
        display: flex !important;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        visibility: visible !important;
        opacity: 1 !important;
        color: #39393999;
    }

    .mobile-menu-item.active .mobile-menu-dropdown .mobile-category-list {
        display: flex !important;
        flex-direction: column;
        /* flex: 1; */
        min-height: 0;
        overflow-y: auto;
        background: #f5f5f5;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-menu-item.active .mobile-menu-dropdown .mobile-dropdown-image {
        flex-shrink: 0;
        width: 358px;
        height: 268px;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 1rem;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-menu-item.active .mobile-menu-dropdown .mobile-dropdown-content {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 1rem;
        gap: 1rem;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 确保所有子元素都可见 */
    /* .mobile-menu-item.active .mobile-menu-dropdown * {
        visibility: visible !important;
    } */

    .mobile-menu-item.active .mobile-menu-dropdown .mobile-category-item,
    .mobile-menu-item.active .mobile-menu-dropdown .mobile-category-link,
    .mobile-menu-item.active .mobile-menu-dropdown .mobile-submenu-list,
    .mobile-menu-item.active .mobile-menu-dropdown .mobile-submenu-list li,
    .mobile-menu-item.active .mobile-menu-dropdown .mobile-submenu-list a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 确保二级菜单内的所有文本和按钮可见 */
    .mobile-menu-item.active .mobile-menu-dropdown h6,
    .mobile-menu-item.active .mobile-menu-dropdown button,
    .mobile-menu-item.active .mobile-menu-dropdown a,
    .mobile-menu-item.active .mobile-menu-dropdown span,
    .mobile-menu-item.active .mobile-menu-dropdown i {
        visibility: visible !important;
        opacity: 1 !important;
        color: inherit !important;
    }

    /* 确保图片可见 */
    .mobile-menu-item.active .mobile-menu-dropdown img {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    /* 当二级菜单激活时，隐藏主菜单列表 */
    .mobile-menu-item.active ~ .mobile-menu-item {
        display: none;
    }

    /* 当有二级菜单激活时，隐藏主菜单列表容器（但不影响二级菜单） */
    /* 不使用 opacity，改用 visibility 和 transform，避免影响子元素 */
    .mobile-menu-container.has-active-dropdown .mobile-menu-list {
        visibility: hidden;
        pointer-events: none;
    }

    /* 确保激活的菜单项和其二级菜单不受影响 */
    .mobile-menu-container.has-active-dropdown .mobile-menu-item.active,
    .mobile-menu-container.has-active-dropdown .mobile-menu-item.active .mobile-menu-dropdown {
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* 确保二级菜单不受父元素 opacity 影响 - 使用 fixed 定位脱离文档流 */
    .mobile-menu-item.active .mobile-menu-dropdown {
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* 确保二级菜单独立于父元素的 opacity */
        position: fixed !important;
        z-index: 10000 !important;
    }

    /* 确保二级菜单内的所有内容不受父元素影响 */
    .mobile-menu-item.active .mobile-menu-dropdown * {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 由于二级菜单使用 fixed 定位，需要确保它不受父元素影响 */
    .mobile-menu-container.has-active-dropdown .mobile-menu-item.active .mobile-menu-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }

    /* Mobile Dropdown Content for Office */
    .mobile-dropdown-content {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

  

    .mobile-package-card {
        position: relative;
        overflow: hidden;
        border-radius: 0;
        cursor: pointer;
        transition: transform 0.3s ease;
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .mobile-package-image {
        width: 100%;
        height: 119px;
        overflow: hidden;
        position: relative;
    }

    .mobile-package-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mobile-package-overlay {
        position: absolute;
        text-align: justify;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
        padding: 1.5rem;
        color: #ffffff;
    }

    .mobile-package-title {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 1rem 0;
        color: #ffffff;
        font-family: "Noto Sans Japanese", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }

    .mobile-package-link {
        color: #ffffff;
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: 1px;
        font-size: 16px;
        position: relative;
        display: inline-block;
        font-family: "Noto Sans Japanese", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }

    /* Mobile Dropdown Styles */
    .dropdown-mega-menu {
        display: none;
    }

    /* Mobile Header */
    .mobile-dropdown-header {
        display: flex;
        align-items: center;
        padding: 0.2rem 1rem;
        border-bottom: 1px solid #e0e0e0;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-dropdown-back {
        background: none;
        border: none;
        padding: 0.5rem;
        margin-right: 1rem;
        cursor: pointer;
        color: #333;
        font-size: 1.2rem;
    }

    .mobile-dropdown-title {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
        color: #39393999;
        flex: 1;
    }

    /* Desktop Only */
    .desktop-only {
        display: none;
    }

    /* Mobile Category List */
    .mobile-category-list {
        display: flex;
        flex-direction: column;
        background: #f5f5f5;
        /* flex: 1; */
        overflow-y: auto;
    }

    .mobile-category-item {
        position: relative;
    }

    /* 确保激活的分类项可见 */
    .mobile-category-item.active {
        z-index: 10001;
    }

    /* 最后一个分类项添加下划线 */
    .mobile-category-item:last-child .mobile-category-link1 {
        border-bottom: 1px solid #e0e0e0;
    }

    .mobile-category-link {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        padding: 1rem 1.5rem;
        color: #393939;
        text-decoration: none;
        background: #fff;
        transition: background 0.2s ease;
        font-size: 24px;
        font-weight: 500;
    }

    .mobile-category-link1 {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        padding: 1rem 1.5rem;
        color: #393939;
        text-decoration: none;
        background: #fff;
        transition: background 0.2s ease;
        font-size: 24px;
        font-weight: 500;
    }


    .mobile-category-arrow1{
        color: #999 !important;
        font-size: 0.9rem !important;
        margin-left: 1rem !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        order: 2 !important;
        display: inline-block !important;
        width: auto !important;
    }


    .mobile-category-link:hover {
        background: #f9f9f9;
    }

    .mobile-category-link span {
        flex: 1 1 auto !important;
        font-size: 24px !important;
        font-weight: 500 !important;
        margin-right: auto !important;
        text-align: left !important;
        order: 1 !important;
        min-width: 0 !important;
    }

    .mobile-category-link i,
    .mobile-category-arrow,
    .mobile-category-link .right-icon,
    .mobile-category-link .fa-chevron-right {
        color: #999 !important;
        font-size: 0.9rem !important;
        margin-left: 1rem !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        order: 2 !important;
        display: inline-block !important;
        width: auto !important;
    }

    /* Mobile Submenu */
    .mobile-category-submenu {
        position: fixed !important;
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 400px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        background: #fff !important;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 10001 !important;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
        visibility: hidden;
    }

    .mobile-category-item.active .mobile-category-submenu {
        transform: translateX(0) !important;
        visibility: visible !important;
        display: block !important;
        opacity: 1 !important;
    }

    /* 确保三级菜单在二级菜单激活时也能显示 */
    .mobile-menu-item.active .mobile-category-item.active .mobile-category-submenu {
        transform: translateX(0) !important;
        visibility: visible !important;
        display: block !important;
        opacity: 1 !important;
        z-index: 10001 !important;
    }

    /* 确保三级菜单内的所有内容可见 */
    .mobile-category-item.active .mobile-category-submenu * {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 确保三级菜单在二级菜单激活时也能显示 */
    .mobile-menu-item.active .mobile-category-item.active .mobile-category-submenu {
        transform: translateX(0) !important;
        visibility: visible !important;
        display: block !important;
    }

    .mobile-submenu-header {
        display: flex;
        align-items: center;
        padding: 0.2rem 1rem;
        border-bottom: 1px solid #e0e0e0;
        background: #fff;
        position: sticky;
        top: 76px; /* 位于logo头部下方 */
        z-index: 10;
    }

    /* 如果三级菜单中没有logo头部，则子菜单头部在顶部 */
    .mobile-category-item.active .mobile-category-submenu:not(:has(.mobile-menu-header)) .mobile-submenu-header {
        top: 0 !important;
    }

    .mobile-submenu-back {
        background: none;
        border: none;
        padding: 0.5rem;
        margin-right: 1rem;
        cursor: pointer;
        color: #333;
        font-size: 1.2rem;
    }

    .mobile-submenu-title {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 500;
        color: #333;
        flex: 1;
    }

    .mobile-submenu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

  

    .mobile-submenu-list a {
        display: block;
        padding: 1rem 1.5rem;
        color: #333;
        text-decoration: none;
        transition: background 0.2s ease;
    }

    .mobile-submenu-list a:hover {
        background: #f9f9f9;
    }

    /* Mobile Image */
    .mobile-dropdown-image {
        width: 100%;
        height: 300px;
        overflow: hidden;
        /* margin-top: auto; */
        flex-shrink: 0;
        display: block;
    }

    .mobile-dropdown-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dropdown-package-menu {
        min-width: 100%;
        max-width: 100%;
    }

    .dropdown-mega-content {
        flex-direction: column;
        padding: 0;
        gap: 0;
        height: 100%;
        display: flex;
    }

    /* 确保二级菜单内的元素显示 - 使用更高优先级 */
    .mobile-menu-item.active .mobile-menu-dropdown .mobile-dropdown-header,
    .mobile-menu-item.active .mobile-menu-dropdown .mobile-category-list,
    .mobile-menu-item.active .mobile-menu-dropdown .mobile-dropdown-image {
        display: block !important;
    }

    .mobile-menu-item.active .mobile-menu-dropdown .mobile-dropdown-header {
        display: flex !important;
    }

    .mobile-menu-item.active .mobile-menu-dropdown .mobile-category-list {
        display: flex !important;
    }

    .package-content {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .package-image {
        height: 250px;
    }

    .package-overlay {
        padding: 1.5rem;
    }

    .package-title {
        font-size: 18px;
    }

    .dropdown-columns {
        flex-direction: column;
        gap: 2rem;
    }

    .dropdown-column {
        width: 100%;
    }

    .dropdown-column-title {
        margin-bottom: 1rem;
    }

    .dropdown-column-list {
        display: block;
    }

    .dropdown-column-list li {
        margin-bottom: 0.75rem;
    }
}