/* ============================================
   汾酒防伪 - 公共样式表
   基于 375px 设计稿，rem 适配方案
   ============================================ */

/* CSS 变量 - 从截图中精确提取的颜色 */
:root {
  --color-primary-red: #C4161C;      /* 首页主红色 */
  --color-primary-blue: #2B6DE0;     /* 查验页/我的页主蓝色 */
  --color-dark-blue: #1A3A6B;        /* 查验页顶部深蓝 */
  --color-light-blue: #E8F0FE;       /* 浅蓝背景 */
  --color-bg: #F5F5F5;               /* 页面背景灰 */
  --color-white: #FFFFFF;
  --color-text: #333333;             /* 主文字色 */
  --color-text-secondary: #999999;   /* 次要文字 */
  --color-text-light: #666666;       /* 浅灰文字 */
  --color-border: #EEEEEE;           /* 边框色 */
  --color-warning: #E74C3C;          /* 警示红 */
  --color-success: #27AE60;          /* 成功绿 */

  /* 图标颜色 */
  --icon-orange: #FF8C42;
  --icon-blue: #4A90D9;
  --icon-coral: #FF6B6B;
  --icon-green: #4CAF50;
  --icon-purple: #9B59B6;

  /* 尺寸 */
  --tabbar-height: 50px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================
   CSS Reset
   ============================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 375px 基准，1rem = 37.5px，10rem = 375px */
html {
  font-size: 37.5px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 0.373rem; /* 14px */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 10px);
  max-width: 750px;
  margin: 0 auto;
  overflow-x: hidden;
  line-height: 1.5;
  position: relative;
}

a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
  border: 0;
}

input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================
   底部导航栏 (.tabbar)
   ============================================ */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 750px;
  margin: 0 auto;
  height: var(--tabbar-height);
  background: var(--color-white);
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
  padding-bottom: var(--safe-bottom);
  overflow: visible; /* 允许查验按钮凸起部分可见 */
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  position: relative;
}

.tabbar-item .tab-icon {
  width: 0.64rem;  /* 24px */
  height: 0.64rem; /* 24px */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.tabbar-item .tab-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-text-secondary);
}

.tabbar-item .tab-label {
  font-size: 0.267rem; /* 10px */
  line-height: 1;
  color: var(--color-text-secondary);
  font-weight: normal;
}

/* 激活态 - 首页/我的 */
.tabbar-item:not(.tabbar-item-center).active .tab-icon svg {
  fill: var(--color-primary-blue);
}

.tabbar-item:not(.tabbar-item-center).active .tab-label {
  color: var(--color-primary-blue);
  font-weight: 600;
}

/* ============================================
   查验按钮 - 浮动图标效果（无背景）
   ============================================ */
.tabbar-item-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}

/* 查验图标容器 - 透明，凸出导航栏 */
.tabbar-item-center .tab-verify-circle {
  position: absolute;
  top: -16px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 1;
}

/* 查验图标图片 */
.tabbar-item-center .tab-verify-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 查验文字 - 与其他tab文字对齐 */
.tabbar-item-center .tab-label {
  font-size: 0.267rem;
  line-height: 1;
  color: var(--color-text-secondary);
  font-weight: normal;
  padding-top: 28px;
}

.tabbar-item-center.active .tab-label {
  color: var(--color-primary-blue);
  font-weight: 600;
}

/* 查验按钮激活态：仅文字变色，图标无额外效果 */

/* ============================================
   全局水印 (.watermark)
   ============================================ */
.watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 998;
  opacity: 0.04;
  background-repeat: repeat;
  overflow: hidden;
}

/* ============================================
   页面容器
   ============================================ */
.page-content {
  width: 100%;
  min-height: calc(100vh - var(--tabbar-height) - var(--safe-bottom) - 10px);
  position: relative;
  z-index: 1;
}

/* ============================================
   通用区块标题 (.section-title)
   ============================================ */
.section-title {
  font-size: 0.427rem; /* 16px */
  font-weight: 600;
  color: var(--color-text);
  padding: 0.32rem 0.4rem 0.213rem; /* 12px 15px 8px */
  line-height: 1.4;
}

.section-title .subtitle {
  font-size: 0.32rem; /* 12px */
  font-weight: normal;
  color: var(--color-text-secondary);
  margin-left: 0.213rem; /* 8px */
}

/* ============================================
   按钮样式
   ============================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-blue);
  color: var(--color-white);
  font-size: 0.4rem; /* 15px */
  font-weight: 600;
  padding: 0.32rem 0.8rem; /* 12px 30px */
  border-radius: 0.64rem; /* 24px */
  min-height: 1.173rem; /* 44px */
  text-align: center;
  transition: opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:active {
  opacity: 0.85;
}

.btn-primary.btn-danger {
  background: var(--color-warning);
}

.btn-block {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 1.173rem; /* 44px */
  padding: 0.32rem 0;
  border-radius: 0.64rem;
  font-size: 0.4rem;
  font-weight: 600;
}

/* ============================================
   通用卡片
   ============================================ */
.card {
  background: var(--color-white);
  border-radius: 0.213rem; /* 8px */
  margin: 0.267rem 0.32rem; /* 10px 12px */
  padding: 0.32rem; /* 12px */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ============================================
   列表项（带右箭头）
   ============================================ */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  padding: 0.4rem 0.427rem; /* 15px 16px */
  border-bottom: 1px solid var(--color-border);
  min-height: 1.28rem; /* 48px */
}

.list-item:last-child {
  border-bottom: none;
}

.list-item-text {
  font-size: 0.4rem; /* 15px */
  color: var(--color-text);
}

.list-item-arrow {
  width: 0.213rem;
  height: 0.213rem;
  border-top: 2px solid var(--color-text-secondary);
  border-right: 2px solid var(--color-text-secondary);
  transform: rotate(45deg);
  margin-left: 0.213rem;
}

/* ============================================
   页面顶部 Header（蓝色渐变）
   ============================================ */
.page-header-blue {
  background: linear-gradient(180deg, var(--color-dark-blue) 0%, var(--color-primary-blue) 100%);
  padding: 0.533rem 0.4rem 0.8rem; /* 20px 15px 30px */
  color: var(--color-white);
  position: relative;
}

.page-header-blue .header-title {
  font-size: 0.48rem; /* 18px */
  font-weight: 700;
  text-align: center;
}

/* ============================================
   Toast 提示 (.toast)
   ============================================ */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  color: var(--color-white);
  padding: 0.32rem 0.533rem; /* 12px 20px */
  border-radius: 0.213rem; /* 8px */
  font-size: 0.373rem; /* 14px */
  z-index: 10001;
  max-width: 70%;
  text-align: center;
  line-height: 1.5;
  word-wrap: break-word;
  animation: toastFadeIn 0.25s ease;
  pointer-events: none;
}

@keyframes toastFadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes toastFadeOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* ============================================
   Loading 遮罩 (.loading-mask)
   ============================================ */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.loading-spinner {
  width: 1.067rem; /* 40px */
  height: 1.067rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   文本工具类
   ============================================ */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-red    { color: var(--color-primary-red); }
.text-blue   { color: var(--color-primary-blue); }
.text-gray   { color: var(--color-text-secondary); }
.text-bold   { font-weight: 600; }
.text-sm     { font-size: 0.32rem; }   /* 12px */
.text-md     { font-size: 0.373rem; }  /* 14px */
.text-lg     { font-size: 0.427rem; }  /* 16px */
.text-xl     { font-size: 0.48rem; }   /* 18px */

/* ============================================
   Flex 工具类
   ============================================ */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-1      { flex: 1; }
.flex-wrap   { flex-wrap: wrap; }

/* ============================================
   间距工具类
   ============================================ */
.mt-10 { margin-top: 0.267rem; }
.mt-20 { margin-top: 0.533rem; }
.mb-10 { margin-bottom: 0.267rem; }
.mb-20 { margin-bottom: 0.533rem; }
.p-10  { padding: 0.267rem; }
.p-15  { padding: 0.4rem; }

/* ============================================
   安全区域顶部适配（刘海屏）
   ============================================ */
.safe-area-top {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ============================================
   空状态
   ============================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  color: var(--color-text-secondary);
}

.empty-state .empty-icon {
  width: 2.133rem; /* 80px */
  height: 2.133rem;
  margin-bottom: 0.4rem;
  opacity: 0.5;
}

.empty-state .empty-text {
  font-size: 0.373rem;
  color: var(--color-text-secondary);
}