/**
 * main.css —— 少量自定义补充样式
 * ------------------------------------------------------------
 * 大部分样式由 Tailwind 工具类（HTML class 中）完成，
 * 这里只放：全局字体回退、导航激活态、表单控件、表格等
 * 需要统一维护的少量样式。
 */

/* ---------- 全局基础 ---------- */
html {
  scroll-behavior: smooth; /* 锚点平滑滚动 */
}

body {
  /* 中文字体回退（Tailwind 未生效时也可正常显示） */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: #111827; /* 深灰主色 */
  -webkit-font-smoothing: antialiased;
}

/* 文字选中色（工业蓝） */
::selection {
  background: #2563eb;
  color: #fff;
}

/* ---------- 顶部导航激活态 ---------- */
/* main.js 会根据页面 data-page 给当前栏目加 .active */
.nav-link {
  position: relative;
  transition: color 0.15s ease;
}
.nav-link:hover {
  color: #2563eb;
}
.nav-link.active {
  color: #2563eb;
  font-weight: 600;
}
/* 激活态底部短横线 */
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: #2563eb;
}

/* ---------- 表单控件统一风格 ---------- */
/* HTML 中直接给 input/textarea 加 .form-input 类即可 */
.form-input,
.form-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: #9ca3af;
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* 校验失败红色边框 */
.form-input.error,
.form-textarea.error {
  border-color: #ef4444;
}
/* 错误提示文字 */
.form-error {
  display: none;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: #ef4444;
}
.form-error.show {
  display: block;
}

/* ---------- 参数表格（产品详情页） ---------- */
.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.param-table th,
.param-table td {
  border: 1px solid #e5e7eb;
  padding: 0.625rem 1rem;
  text-align: left;
}
.param-table th {
  width: 9.5rem;
  background: #f9fafb;
  color: #4b5563;
  font-weight: 500;
  white-space: nowrap;
}
.param-table td {
  color: #111827;
}

/* ---------- 图片 ----------
   说明：曾为占位图设置过灰色底色（#f3f4f6），会导致透明底 Logo
   在白色页眉上出现色差，现已移除。全部为实拍图后无需占位底色。 ---------- */

/* ---------- 打印时隐藏导航等 ---------- */
@media print {
  header,
  footer,
  #backTop,
  #menuBtn {
    display: none !important;
  }
}