/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 字体设置 */
body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif SC', serif;
}

/* 深色模式 */
.dark-mode {
  --bg-color: #111827;
  --text-color: #f9fafb;
  --text-muted: #d1d5db;
  --card-bg: #1f2937;
  --border-color: #374151;
}

.light-mode {
  --bg-color: #ffffff;
  --text-color: #111827;
  --text-muted: #6b7280;
  --card-bg: #ffffff;
  --border-color: #e5e7eb;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

/* 导航栏样式 */
#header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dark-mode #header {
  background: rgba(17, 24, 39, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-link {
  color: #374151;
  position: relative;
}

.dark-mode .nav-link {
  color: #d1d5db;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #d97706;
  transition: width 0.3s;
}

.nav-link:hover::after {
  width: 100%;
}

/* 语言切换按钮 */
#lang-toggle {
  background: rgba(0, 0, 0, 0.05);
  color: #374151;
}

.dark-mode #lang-toggle {
  background: rgba(255, 255, 255, 0.05);
  color: #d1d5db;
}

/* 产品卡片 */
.product-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}

.dark-mode .product-card {
  background: #1f2937;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.product-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover img {
  transform: scale(1.05);
}

.product-card .product-info {
  padding: 1rem;
}

.product-card .product-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.product-card .product-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #d97706;
}

.product-card .product-category {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

.dark-mode .product-card .product-category {
  color: #9ca3af;
}

/* 分类按钮 */
.category-btn {
  border: 1px solid #e5e7eb;
  color: #374151;
  font-weight: 500;
  transition: all 0.3s;
}

.dark-mode .category-btn {
  border-color: #374151;
  color: #d1d5db;
}

.category-btn.active {
  background-color: #d97706;
  color: white;
  border-color: #d97706;
}

/* 表单输入框 */
input, textarea {
  border-color: #e5e7eb;
  color: #374151;
}

.dark-mode input, .dark-mode textarea {
  border-color: #374151;
  color: #f9fafb;
}

input:focus, textarea:focus {
  outline: none;
}

/* 页脚 */
footer {
  background-color: #111827;
}

/* 模态框动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#product-modal.show {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

#product-modal .modal-content {
  animation: fadeIn 0.3s ease-out;
}

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

/* 图片懒加载占位 */
img[data-src] {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .product-card img {
    height: 200px;
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dark-mode ::-webkit-scrollbar-track {
  background: #1f2937;
}

::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: #4b5563;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* 按钮hover效果 */
button {
  cursor: pointer;
}

button:focus {
  outline: none;
}

/* 禁用选择 */
button, a {
  user-select: none;
}

/* 动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(-10px);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateX(-50%) translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}