/* 下拉菜单修复样式 */
.dropdown {
    position: relative;
    /* iOS Safari 兼容性 */
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 220px;
    margin-top: 0.25rem;
    padding: 0.5rem 0;
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    /* 添加 -webkit- 前缀以支持Safari */
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    pointer-events: none;
    /* iOS Safari 硬件加速 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    /* 防止iOS上的文本选择 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* iOS触摸优化 */
    -webkit-touch-callout: none;
}

/* 添加一个不可见的连接区域，避免鼠标移动时的间隙 */
.dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background: transparent;
    z-index: 999;
}

/* JavaScript 控制显示/隐藏，避免CSS hover冲突 */
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    /* 添加 -webkit- 前缀 */
    transform: translateY(0);
    -webkit-transform: translateY(0);
    pointer-events: auto;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #d1d5db;
    text-decoration: none;
    /* 添加 -webkit- 前缀 */
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
    /* iOS 触摸优化 */
    -webkit-tap-highlight-color: rgba(255, 153, 0, 0.1);
    tap-highlight-color: rgba(255, 153, 0, 0.1);
    /* iOS Safari 硬件加速 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.dropdown-menu a:hover,
.dropdown-menu a:active,
.dropdown-menu a:focus {
    background-color: #374151;
    color: #ff9900;
}

/* iOS Safari 专用样式 - 使用媒体查询检测触摸设备 */
@supports (-webkit-touch-callout: none) {
    .dropdown-menu a:active {
        background-color: #374151;
        color: #ff9900;
    }
}

.dropdown-menu a:first-child {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.dropdown-menu a:last-child {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* 移动端菜单样式增强 */
.mobile-category-menu button {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
}

.mobile-category-menu button:focus {
    outline: none;
    ring: 2px;
    ring-color: #f97316;
    ring-offset: 2px;
}

#mobileCategoryIcon.rotate-180,
#mobileJapaneseAVIcon.rotate-180 {
    transform: rotate(180deg);
}

/* 移动端菜单项悬停效果优化 */
#mobileMenu a {
    border-radius: 0.375rem;
    font-weight: 500;
}

#mobileMenu a:hover {
    background-color: rgba(55, 65, 81, 0.8);
    transform: translateX(2px);
}

#mobileMenu .mobile-category-menu a:hover {
    transform: translateX(4px);
    background-color: rgba(55, 65, 81, 0.6);
}

/* 移动端搜索框样式优化 */
#mobileSearchInput {
    border-radius: 0.5rem;
}

#mobileSearchInput:focus {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

/* 移动端菜单滚动优化 */
#mobileMenu {
    /* 移除 max-height 限制，让菜单占满全屏 */
}

/* 移动端菜单过渡动画 */
#mobileCategoryList,
#mobileJapaneseAVList {
    transition: all 0.2s ease-in-out;
}

#mobileCategoryList.hidden,
#mobileJapaneseAVList.hidden {
    display: none;
}

#mobileCategoryList:not(.hidden),
#mobileJapaneseAVList:not(.hidden) {
    opacity: 1;
    animation: slideDown 0.2s ease-in-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 移动端菜单图标对齐优化 */
#mobileMenu .fa {
    width: 16px;
    text-align: center;
}