/* =============================================================
   证书查验页样式(2026-07-30 重做)

   为什么重做:
   - 改造前有效状态是整块 `background:#6C9` 亮绿 + `border:3px solid #4DA269`,
     状态**仅靠背景色**传达。色盲用户、以及把结果打印成黑白后,信息就丢了。
   - 主要使用场景是**手机扫码**,但原样式没有任何针对窄屏的处理
     (表格标签固定 9em 宽,在小屏上把内容挤成一条)。
   - 下游买家常把结果打印或存 PDF 作为留档,原样式没有 print 规则,
     亮绿底色会整片吃墨。

   语义色只有三组,与 hfc_cert_tone() 一一对应:
     ok      在有效期内
     warn    记录真实存在,但当前不具效力(过期/暂停/在册无日期/歧义)
     invalid 查不到,或已吊销/注销/取消
   ============================================================= */

.vfy {
  max-width: 720px;
  margin: 28px auto;
  padding: 28px 26px 22px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-top: 5px solid #9aa0a6;      /* 状态色只在顶边 + 徽章上,不铺满整块 */
  border-radius: 4px;
  color: #23272b;
  font-size: 15px;
  line-height: 1.65;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* ---- 三组语义色 ---- */
.vfy--ok      { border-top-color: #2e7d46; }
.vfy--warn    { border-top-color: #b26a00; }
.vfy--invalid { border-top-color: #9c2c2c; }

.vfy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ececec;
}

.vfy-kicker {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6b7075;
}

/* 徽章 = 符号 + 文字。两者都不依赖颜色,黑白打印/色盲下仍可读 */
.vfy-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.vfy--ok      .vfy-badge { color: #2e7d46; background: #f2f9f4; }
.vfy--warn    .vfy-badge { color: #b26a00; background: #fdf7ee; }
.vfy--invalid .vfy-badge { color: #9c2c2c; background: #fbf3f3; }

.vfy-mark { font-size: 14px; line-height: 1; font-weight: 700; }

.vfy-en {
  margin: 18px 0 6px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  color: #1a1d20;
}
.vfy--ok      .vfy-en { color: #205c33; }
.vfy--warn    .vfy-en { color: #7d4b00; }
.vfy--invalid .vfy-en { color: #7a2222; }

.vfy-zh {
  margin: 0 0 10px;
  font-size: 16.5px;
  color: #33383d;
}

.vfy-note {
  margin: 0 0 4px;
  padding: 11px 13px;
  background: #f7f8f9;
  border-left: 3px solid #c9ced3;
  font-size: 13.5px;
  color: #4a5055;
}
.vfy--warn    .vfy-note { border-left-color: #d9a441; }
.vfy--invalid .vfy-note { border-left-color: #c98a8a; }

/* ---- 证书信息表 ---- */
table.certinfo {
  width: 100%;
  margin: 20px 0 4px;
  border-collapse: collapse;
}

td.cerlbl {
  vertical-align: top;
  padding: 11px 14px 11px 0;
  width: 34%;
  border-top: 1px solid #ececec;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #6b7075;
}

.cerlbl-zh {
  display: inline-block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #8b9096;
}

td.cerval {
  vertical-align: top;
  padding: 11px 0;
  border-top: 1px solid #ececec;
  color: #23272b;
  word-break: break-word;
}

.cerval-cn     { color: #5a6065; font-size: 14px; }
.cerval-muted  { color: #8b9096; font-style: italic; }
/* 有效期那一行自带状态标记,避免只扫一眼这行的人误判 */
.cerval-flag   { color: #b26a00; font-weight: 600; font-size: 13px; white-space: nowrap; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 15px;
  letter-spacing: .4px;
}

/* 已失效证书:信息加删除线,但仍完整展示 —— 它是真实的历史记录 */
table.certinfo--void td.cerval {
  text-decoration: line-through;
  text-decoration-color: #b06a6a;
  text-decoration-thickness: 1.5px;
  color: #55595d;
}

ul.prodlist {
  margin: 0;
  padding-left: 1.15em;
}
ul.prodlist li { margin: 1px 0; }

/* ---- 再查一次 ---- */
.vfy-again {
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #ececec;
}
.vfy-again label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  color: #6b7075;
}
.vfy-inrow { display: flex; gap: 8px; flex-wrap: nowrap; }
.vfy-again input {
  flex: 1;
  min-width: 0;                       /* 不加这条 flex 子项在窄屏会溢出 */
  padding: 10px 12px;
  border: 1px solid #ccd1d6;
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;                    /* ≥16px:iOS Safari 聚焦时才不会自动放大整页 */
}
.vfy-again input:focus {
  outline: 2px solid #4a7fb5;
  outline-offset: 1px;
  border-color: #4a7fb5;
}
.vfy-again button {
  padding: 10px 20px;
  border: 1px solid #2f4f6f;
  border-radius: 4px;
  background: #2f4f6f;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.vfy-again button:hover { background: #26415c; }
.vfy-again button:focus-visible { outline: 2px solid #1a1d20; outline-offset: 2px; }

.vfy-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8b9096;
}

/* ---- 查询指南(入口页) ---- */
.vfy-guide {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #ececec;
}
.vfy-guide h2 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #6b7075;
}
.vfy-guide ol {
  margin: 0;
  padding-left: 1.3em;
  font-size: 13.5px;
  color: #4a5055;
}
.vfy-guide ol li { margin-bottom: 9px; }
.vfy-guide-note {
  margin: 12px 0 0;
  padding: 11px 13px;
  background: #f7f8f9;
  border-left: 3px solid #c9ced3;
  font-size: 12.5px;
  color: #4a5055;
}

/* ---- 页脚:可核验要素 ---- */
.vfy-foot {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #ececec;
}
.vfy-foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 4px;
  font-size: 12.5px;
}
.vfy-foot-k {
  min-width: 150px;
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #8b9096;
}
.vfy-foot-v { color: #4a5055; }

.vfy-disclaimer {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #7c8186;
}

/* ---- 手机(扫码是主场景,所以窄屏必须好用) ---- */
@media (max-width: 640px) {
  .vfy {
    margin: 14px 10px;
    padding: 20px 16px 16px;
    font-size: 14.5px;
  }
  .vfy-en { font-size: 17.5px; }
  .vfy-zh { font-size: 15.5px; }

  /* 表格改成上下堆叠:标签固定宽度在小屏会把值挤成一条 */
  table.certinfo, table.certinfo tbody, table.certinfo tr, table.certinfo td {
    display: block;
    width: auto;
  }
  table.certinfo tr { padding: 9px 0; border-top: 1px solid #ececec; }
  td.cerlbl {
    width: auto;
    padding: 0 0 3px;
    border-top: none;
  }
  .cerlbl-zh { margin-left: 6px; }
  td.cerval { padding: 0; border-top: none; }

  .vfy-inrow { flex-wrap: wrap; }
  .vfy-again input { flex: 1 1 100%; }
  .vfy-again button { flex: 1 1 100%; }
  .vfy-foot-k { min-width: 0; display: block; }
}

/* ---- 打印:下游常把结果打印/存 PDF 留档 ---- */
@media print {
  /* 站点框架(菜单/页眉/页脚/返回顶部)对打印件无意义,且会挤掉正文 */
  .main_left, .header, .footer, .gotop, .vfy-again { display: none !important; }
  .main, .main_right { display: block !important; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }

  .vfy {
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    border-top: 3px solid #000;        /* 彩色底会整片吃墨,只留一条黑边 */
    box-shadow: none;
    font-size: 11pt;
  }
  .vfy-badge { border-color: #000 !important; color: #000 !important; background: none !important; }
  .vfy-en, .vfy-zh { color: #000 !important; }
  .vfy-note { background: none; border-left: 2px solid #000; }
  .cerval-flag { color: #000 !important; }
  /* 打印件上时间戳与免责声明最重要:它说明这是"哪一刻"的结论 */
  .vfy-foot { border-top: 1px solid #000; }
  .vfy-disclaimer { color: #000 !important; font-size: 9pt; }
  a[href]:after { content: ""; }
}