/* iOS/iPhone Safari SVG图标显示修复 */

/* 修复移动端菜单按钮SVG图标 */
.mobile-menu-btn {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-btn svg {
    /* 确保SVG在iOS Safari中正确显示 */
    display: block !important;
    flex-shrink: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* 强制硬件加速 */
    will-change: transform;
}

/* 修复移动端菜单中的导航图标 */
.mobile-nav-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* iOS Safari 中确保SVG颜色正确 */
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* 修复移动端菜单Logo SVG */
.mobile-menu-logo svg {
    display: block !important;
    flex-shrink: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    color: white !important;
    fill: currentColor !important;
}

/* 修复移动端菜单关闭按钮SVG */
.mobile-menu-close svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    color: inherit !important;
    stroke: currentColor !important;
}

/* 修复移动端认证按钮图标 */
.mobile-btn-icon {
    display: block !important;
    flex-shrink: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    color: inherit !important;
    stroke: currentColor !important;
}

/* 修复移动端导航箭头 */
.mobile-nav-arrow {
    display: block !important;
    flex-shrink: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    color: inherit !important;
    stroke: currentColor !important;
}

/* 修复顶部导航栏的所有SVG图标 */
.navbar-brand svg,
.navbar-link svg,
.language-icon,
.language-arrow,
.user-dropdown-icon {
    display: block !important;
    flex-shrink: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* iOS Safari 特定修复 */
@supports (-webkit-touch-callout: none) {
    /* 这个查询只在iOS Safari中为真 */
    
    /* 确保所有SVG在iOS中都有明确的尺寸 */
    svg:not([width]):not([height]) {
        width: 1em;
        height: 1em;
    }
    
    /* 修复SVG在flexbox中的显示问题 */
    .mobile-nav-icon,
    .mobile-menu-btn,
    .mobile-menu-close,
    .mobile-menu-logo {
        /* 强制重绘 */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    /* 修复iOS中SVG stroke-width可能丢失的问题 */
    svg path[stroke-width] {
        stroke-width: 2 !important;
    }
    
    /* 修复iOS中currentColor可能不工作的问题 */
    .mobile-nav-icon svg {
        stroke: #2563eb !important;
    }
    
    .mobile-nav-icon-green svg {
        stroke: #16a34a !important;
    }
    
    .mobile-nav-icon-purple svg {
        stroke: #9333ea !important;
    }
    
    .mobile-nav-icon-red svg {
        stroke: #dc2626 !important;
    }
    
    .mobile-nav-link.active .mobile-nav-icon svg {
        stroke: rgba(255, 255, 255, 0.9) !important;
    }
}

/* 高分辨率屏幕优化（iPhone Retina） */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    svg {
        /* 确保SVG在高分辨率屏幕上清晰显示 */
        shape-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* iPhone X 及更新机型的安全区域适配 */
@supports (padding-top: env(safe-area-inset-top)) {
    .mobile-menu-panel {
        padding-top: env(safe-area-inset-top);
    }
}

/* 修复可能的z-index问题 */
.mobile-menu {
    z-index: 9999 !important;
}

.mobile-menu-panel {
    z-index: 10000 !important;
}

/* 确保触摸事件正确处理 */
.mobile-menu-btn,
.mobile-menu-close,
.mobile-nav-link {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* ===== 首页移动端SVG图标优化 ===== */

/* 大屏平板端优化 */
@media (max-width: 1024px) and (min-width: 769px) {
    /* 图标保持原始尺寸，不做调整 */
    .w-8.h-8 {
        width: 2rem !important;  /* 32px，原始尺寸 */
        height: 2rem !important;
    }
    
    /* 圆形背景容器保持原始尺寸 */
    .w-16.h-16 {
        width: 4rem !important;  /* 64px，原始尺寸 */
        height: 4rem !important;
    }
}

/* 移动端首页功能区域图标优化 */
@media (max-width: 768px) {
    :root {
        --icon-size: 2.125rem; /* 34px */
        --container-size: 4.5rem; /* 72px */
    }
    
    /* 只增大圆形背景容器，图标保持相对比例 */
    .w-16.h-16 {
        width: var(--container-size) !important;
        height: var(--container-size) !important;
        min-width: var(--container-size) !important;
        min-height: var(--container-size) !important;
    }
    
    /* 图标适度增大，但不撑满背景 */
    .w-8.h-8 {
        width: var(--icon-size) !important;
        height: var(--icon-size) !important;
        min-width: var(--icon-size) !important;
        min-height: var(--icon-size) !important;
    }
    
    /* 按钮中的SVG图标 - 保持原始大小 */
    .btn .w-5.h-5 {
        width: 1.25rem !important;  /* 20px，保持原始大小 */
        height: 1.25rem !important;
        min-width: 1.25rem !important;
        min-height: 1.25rem !important;
    }
}

/* 小屏幕设备进一步优化 */
@media (max-width: 480px) {
    :root {
        --icon-size: 2.375rem; /* 38px */
        --container-size: 5rem; /* 80px */
    }
    
    /* 圆形背景容器进一步增大 */
    .w-16.h-16 {
        width: var(--container-size) !important;
        height: var(--container-size) !important;
        min-width: var(--container-size) !important;
        min-height: var(--container-size) !important;
    }
    
    /* 图标适度增大，但保持在背景中的留白 */
    .w-8.h-8 {
        width: var(--icon-size) !important;
        height: var(--icon-size) !important;
        min-width: var(--icon-size) !important;
        min-height: var(--icon-size) !important;
    }
    
    /* 按钮中的SVG图标 - 保持不变 */
    .btn .w-5.h-5 {
        width: 1.25rem !important;  /* 20px，保持原始 */
        height: 1.25rem !important;
        min-width: 1.25rem !important;
        min-height: 1.25rem !important;
    }
}

/* iPhone特定优化（基于屏幕宽度） */
@media (max-width: 414px) {
    :root {
        --icon-size: 2.625rem; /* 42px */
        --container-size: 5.5rem; /* 88px */
    }
    
    /* 圆形背景容器最大增大 */
    .w-16.h-16 {
        width: var(--container-size) !important;
        height: var(--container-size) !important;
        min-width: var(--container-size) !important;
        min-height: var(--container-size) !important;
    }
    
    /* 图标最大增大，但保持合适的留白 */
    .w-8.h-8 {
        width: var(--icon-size) !important;
        height: var(--icon-size) !important;
        min-width: var(--icon-size) !important;
        min-height: var(--icon-size) !important;
    }
}

/* 确保SVG图标在移动端正确显示 */
@media (max-width: 768px) {
    /* 首页所有SVG图标的通用修复 */
    .w-8.h-8 svg,
    .w-5.h-5 svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        flex-shrink: 0;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* 确保圆形背景容器正确居中图标 */
    .w-16.h-16 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    /* 图标在圆形背景中不撑满，保持指定尺寸 */
    .w-16.h-16 .w-8.h-8 {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        max-width: none !important;
        max-height: none !important;
    }
    
    /* 重要：覆盖任何可能让图标撑满的样式 */
    .bg-primary-100.rounded-full.flex.items-center.justify-center .w-8.h-8,
    .bg-success-100.rounded-full.flex.items-center.justify-center .w-8.h-8,
    .bg-warning-100.rounded-full.flex.items-center.justify-center .w-8.h-8,
    .bg-indigo-100.rounded-full.flex.items-center.justify-center .w-8.h-8,
    .bg-purple-100.rounded-full.flex.items-center.justify-center .w-8.h-8,
    .bg-red-100.rounded-full.flex.items-center.justify-center .w-8.h-8 {
        flex: none !important;
        width: var(--icon-size) !important;
        height: var(--icon-size) !important;
    }
    
    /* 确保图标颜色正确 */
    .text-primary-600 svg {
        color: rgb(37 99 235) !important;
        stroke: currentColor !important;
    }
    
    .text-success-600 svg {
        color: rgb(22 163 74) !important;
        stroke: currentColor !important;
    }
    
    .text-warning-600 svg {
        color: rgb(217 119 6) !important;
        stroke: currentColor !important;
    }
    
    .text-indigo-600 svg {
        color: rgb(79 70 229) !important;
        stroke: currentColor !important;
    }
    
    .text-purple-600 svg {
        color: rgb(147 51 234) !important;
        stroke: currentColor !important;
    }
    
    .text-red-600 svg {
        color: rgb(220 38 38) !important;
        stroke: currentColor !important;
    }
}

/* iOS Safari特定修复 */
@supports (-webkit-touch-callout: none) {
    /* 首页功能区域图标在iOS中的特殊处理 */
    .w-8.h-8,
    .w-5.h-5,
    .w-16.h-16 {
        /* 强制重绘避免显示问题 */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        will-change: transform;
    }
    
    /* 确保SVG路径在iOS中正确渲染 */
    .w-8.h-8 svg path,
    .w-5.h-5 svg path,
    .w-16.h-16 svg path {
        stroke-width: 2 !important;
        vector-effect: non-scaling-stroke;
    }
}

/* 高分辨率屏幕优化（Retina显示屏） */
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) {
    .w-8.h-8,
    .w-5.h-5,
    .w-16.h-16 {
        /* 确保在高分辨率屏幕上图标清晰 */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .w-8.h-8 svg,
    .w-5.h-5 svg,
    .w-16.h-16 svg {
        shape-rendering: geometricPrecision;
    }
}