/* 最小化样式 - 只保留必要的非 Tailwind 样式 */

/* 主题系统已移除 - 插件现在使用宿主项目的 Tailwind 配置 */
/* 请在宿主项目的 tailwind.config.js 中配置 primary 颜色 */

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* SEO预渲染内容样式 */
/* 默认隐藏预渲染内容，只对搜索引擎爬虫显示 */
.pre-render { 
    display: none !important; 
}

/* 对于无JavaScript环境（如搜索引擎）显示预渲染内容 */
.no-js .pre-render { 
    display: block; 
}

/* JavaScript增强内容默认显示 */
.js-enhanced { 
    display: block; 
}

/* 无JavaScript时隐藏增强内容 */
.no-js .js-enhanced { 
    display: none; 
}

/* 自定义动画 - Tailwind 不支持的复杂动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* 产品卡片渐进式动画 */
.product-card {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
    position: relative;
    /* 性能优化 */
    will-change: transform, opacity;
    transform: translateZ(0); /* GPU 加速 */
    backface-visibility: hidden;
}

/* 产品卡片悬停效果 - 使用伪元素 */
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg, transparent, rgba(0, 0, 0, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
    pointer-events: none;
}

.product-card:hover::before {
    opacity: 1;
}

/* 渐进式动画延迟 */
.product-card:nth-child(1) { animation-delay: 0.05s; }
.product-card:nth-child(2) { animation-delay: 0.1s; }
.product-card:nth-child(3) { animation-delay: 0.15s; }
.product-card:nth-child(4) { animation-delay: 0.2s; }
.product-card:nth-child(5) { animation-delay: 0.25s; }
.product-card:nth-child(6) { animation-delay: 0.3s; }
.product-card:nth-child(7) { animation-delay: 0.35s; }
.product-card:nth-child(8) { animation-delay: 0.4s; }

/* 骨架屏加载动画 */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e5e7eb;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: shimmer 1.5s ease-in-out infinite;
}

/* 暗黑模式骨架屏 */
.dark .skeleton {
    background-color: #374151;
}

.dark .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
}

/* 基础设计系统变量 */
:root {
    /* 明亮模式配色 */
    --bg-base: 255 255 255;
    --bg-secondary: 248 250 252;
    --bg-tertiary: 241 245 249;
    --bg-accent: 236 242 249;
    
    --text-base: 15 23 42;
    --text-secondary: 30 41 59;
    --text-tertiary: 71 85 105;
    --text-muted: 100 116 139;
    
    --border-light: 226 232 240;
    --border-medium: 203 213 225;
    --border-heavy: 148 163 184;
    
    --shadow-light: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08);
    --shadow-medium: 0 4px 6px -1px rgb(15 23 42 / 0.12), 0 2px 4px -2px rgb(15 23 42 / 0.12);
    --shadow-heavy: 0 10px 15px -3px rgb(15 23 42 / 0.15), 0 4px 6px -4px rgb(15 23 42 / 0.15);
}

/* 暗黑模式配色 */
.dark {
    --bg-base: 12 14 20;
    --bg-secondary: 17 24 35;
    --bg-tertiary: 30 41 59;
    --bg-accent: 42 52 71;
    
    --text-base: 255 255 255;
    --text-secondary: 226 232 240;
    --text-tertiary: 160 174 192;
    --text-muted: 100 116 139;
    
    --border-light: 42 52 71;
    --border-medium: 60 77 99;
    --border-heavy: 100 116 139;
    
    --shadow-light: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
    --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    --shadow-heavy: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
}

/* 设计系统样式类 - 使用 CSS 变量 */
.bg-base { background-color: rgb(var(--bg-base)); }
.bg-secondary { background-color: rgb(var(--bg-secondary)); }
.bg-tertiary { background-color: rgb(var(--bg-tertiary)); }
.bg-accent { background-color: rgb(var(--bg-accent)); }

.text-base-color { color: rgb(var(--text-base)); }
.text-secondary { color: rgb(var(--text-secondary)); }
.text-tertiary { color: rgb(var(--text-tertiary)); }
.text-muted { color: rgb(var(--text-muted)); }

.border-light { border-color: rgb(var(--border-light)); }
.border-medium { border-color: rgb(var(--border-medium)); }
.border-heavy { border-color: rgb(var(--border-heavy)); }

.shadow-light { box-shadow: var(--shadow-light); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-heavy { box-shadow: var(--shadow-heavy); }

/* 折扣标签动画 */
@keyframes discountPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.discount-badge {
    animation: discountPulse 2s ease-in-out infinite;
    background-image: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

/* 移动端特定样式 */
@media (max-width: 640px) {
    /* 确保所有按钮在移动端至少48px高度 */
    button, .btn, [role="button"] {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* 移动端搜索框优化 - 防止iOS缩放 */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    font-size: 16px !important; /* 防止iOS缩放 */
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 防止横向滚动 */
body {
    overflow-x: hidden;
}

/* 触摸滑动优化 */
.touch-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 性能优化类 */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
}

/* 减少重绘的过渡效果 */
.optimized-transition {
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

/* 图片性能优化 */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    will-change: transform;
}

/* 禁用移动端的悬停效果 */
@media (hover: none) and (pointer: coarse) {
    .product-card:hover {
        transform: none;
    }
    
    .product-card:hover::before {
        opacity: 0;
    }
}

/* 移动端安全区域适配（刘海屏） */
@supports (padding: env(safe-area-inset-top)) {
    .safe-top {
        padding-top: env(safe-area-inset-top);
    }
    
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .mobile-bottom-bar {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}