/* ==================================================
   通用按钮 —— 补齐全端基础样式
   原先 .btn 只在 mobile.css 的 768px 媒体查询内定义，
   导致桌面端下单页/卡密工具栏的按钮全是裸文字、点着像没反应
================================================== */
.btn {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  transition: background-color .15s, border-color .15s, color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: #00A2CA; color: #fff; }
.btn-primary:hover { background: #0089ab; color: #fff; }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #12833c; color: #fff; }
.btn-danger { background: #f44336; color: #fff; }
.btn-danger:hover { background: #d63328; color: #fff; }
.btn-gray { background: #eef0f1; color: #555; }
.btn-gray:hover { background: #e2e5e6; color: #333; }
.btn-p { background: #1E9FFF; color: #fff; }
.btn-p:hover { background: #0f8ae0; color: #fff; }
.btn-block { display: block; width: 100%; }

/* ==================================================
   导航：当前页高亮
================================================== */
.haoquanyi_com_navigation .hqy_top_nav li a.active {
  background: #017390;
  font-weight: bold;
}

/* ==================================================
   公告跑马灯：整条可点击进公告中心
================================================== */
.index-gonggao .box li { flex: 1; }
.index-gonggao .gonggao-link { display: block; color: #ff8020; }
.index-gonggao .gonggao-link:hover { color: #f44336; }

/* ==================================================
   进站公告弹窗
================================================== */
body.faka-ann-lock { overflow: hidden; }
.faka-ann-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .58);
  opacity: 0;
  transition: opacity .25s ease;
}
.faka-ann-mask.show { opacity: 1; }
.faka-ann-box {
  position: relative;
  width: min(420px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
  transform: translateY(14px) scale(.97);
  transition: transform .25s ease;
}
.faka-ann-mask.show .faka-ann-box { transform: translateY(0) scale(1); }
.faka-ann-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f2f4f5;
  color: #888;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.faka-ann-close:hover { background: #e5e8e9; color: #333; }
.faka-ann-head { margin-bottom: 12px; padding-right: 30px; }
.faka-ann-badge {
  display: inline-block;
  background: #fff3e6;
  color: #ff8020;
  border: 1px solid #ffd9b3;
  border-radius: 20px;
  padding: 3px 14px;
  font-size: 12px;
  margin-bottom: 10px;
}
.faka-ann-head h3 {
  font-size: 19px;
  color: #006493;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}
.faka-ann-body {
  font-size: 14px;
  color: #555;
  line-height: 1.9;
  text-align: left;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  word-break: break-word;
}
.faka-ann-image { margin-bottom: 14px; }
.faka-ann-image img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid #eee;
}
.faka-ann-foot { margin-top: 4px; }
.faka-ann-ok {
  width: 100%;
  height: 42px;
  border: none;
  border-radius: 6px;
  background: #00A2CA;
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
}
.faka-ann-ok:hover { background: #0089ab; }

/* ==================================================
   首页 Banner 轮播
================================================== */
.faka-banner {
  position: relative;
  width: 1200px;
  margin: 12px auto 0;
  aspect-ratio: 1200 / 320;
  border-radius: 4px;
  overflow: hidden;
  background: #eef0f1;
  touch-action: pan-y;
}
.faka-banner-track { position: absolute; inset: 0; }
.faka-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.faka-banner-slide.active { opacity: 1; pointer-events: auto; }
.faka-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.faka-banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 56px;
  border: none;
  background: rgba(0, 0, 0, .32);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, background .2s;
}
.faka-banner:hover .faka-banner-nav { opacity: 1; }
.faka-banner-nav:hover { background: rgba(0, 0, 0, .55); }
.faka-banner-nav.prev { left: 0; border-radius: 0 4px 4px 0; }
.faka-banner-nav.next { right: 0; border-radius: 4px 0 0 4px; }
.faka-banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  gap: 7px;
  justify-content: center;
}
.faka-banner-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: width .2s, background .2s;
}
.faka-banner-dot.active { width: 22px; border-radius: 5px; background: #fff; }

/* ==================================================
   商品封面图（列表 + 详情）
================================================== */
.shop-cover {
  width: 46px;
  height: 46px;
  border-radius: 4px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 10px;
  border: 1px solid #eef0f1;
  background: #f8f9fa;
  flex-shrink: 0;
}
.index-box1 .index-box1-shop .shop1 {
  display: flex;
  align-items: center;
  word-break: break-all;
}
.index-box1 .index-box1-shop .shop1 .shop1-text { flex: 1; min-width: 0; }

/* ==================================================
   商品详情：封面图
================================================== */
.pd-cover-img {
  width: 220px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e9eaec;
  flex-shrink: 0;
}

/* ==================================================
   下单页 / 表单：移动端友好的输入
================================================== */
.form-control { font-family: inherit; }
input[type="number"].form-control { -moz-appearance: textfield; }
input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 数量选择器 */
.num-picker { display: flex; align-items: center; gap: 0; }
.num-picker button {
  width: 42px;
  height: 42px;
  border: 1px solid #d5d5d5;
  background: #f7f8f9;
  color: #333;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.num-picker button:first-child { border-radius: 4px 0 0 4px; }
.num-picker button:last-child { border-radius: 0 4px 4px 0; }
.num-picker button:hover { background: #eef0f1; }
.num-picker button:disabled { color: #ccc; cursor: not-allowed; background: #fafafa; }
.num-picker input {
  width: 84px;
  height: 42px;
  border: 1px solid #d5d5d5;
  border-left: none;
  border-right: none;
  text-align: center;
  font-size: 16px;
  font-family: inherit;
  outline: none;
}

/* ==================================================
   收款码裁剪放大（微信收款 / 支付宝）
   支付通道返回的是整张推广海报（微信 828x1124 或 1118x1524，支付宝 1200x1800），
   二维码只占海报宽约 41%（微信）/ 46%（支付宝）。原代码 240x240 强制正方形既压扁海报，
   又让二维码在手机上只有约 100px，难扫。
   做法：外层裁切窗口 + 内层图片按比例放大平移，只露二维码（避开卖家昵称/海报 logo）。
   裁剪比例由真实样本实测，具体计算在 js/payqr.js（按图片真实尺寸算，兼容多套模板；
   遇到未知模板会自动回退为「完整显示」而不是裁坏二维码）。
================================================== */
.payqr-crop {
  position: relative;
  overflow: hidden;
  width: 276px;
  height: 276px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
/* 默认（未命中已知模板 / JS 未执行）：完整等比显示，绝不裁坏二维码 */
.payqr-img { display: block; width: 100%; height: auto; }
/* 命中已知模板后由 payqr.js 设位并加此类 */
.payqr-crop.is-cropped { width: 276px; height: 276px; }
.payqr-crop.is-cropped .payqr-img { position: absolute; width: auto; height: auto; }
/* 未知模板回退：容器改为自适应高度，正常显示整张海报 */
.payqr-crop.no-crop { height: auto; }

/* ==================================================
   支付方式卡片
================================================== */
.pay-type { position: relative; transition: border-color .15s, background .15s; }
.pay-type:hover:not(.disabled) { border-color: #b9dcf0; }
.pay-type.selected { border-color: #007BDA; background: #eaf6fd; }
.pay-type.selected::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007BDA;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* ==================================================
   卡密展示区 + 工具栏
================================================== */
.cards-toolbar { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.cards-toolbar .cards-btn { flex: 0 1 auto; }
.cards-toolbar-tip { font-size: 12px; color: #999; margin-top: 8px; line-height: 1.7; }

/* 全局轻提示 */
.faka-toast {
  position: fixed;
  left: 50%;
  bottom: 12vh;
  transform: translate(-50%, 12px);
  z-index: 11000;
  max-width: 86vw;
  padding: 11px 20px;
  border-radius: 22px;
  background: rgba(22, 163, 74, .96);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.faka-toast.show { opacity: 1; transform: translate(-50%, 0); }
.faka-toast.error { background: rgba(220, 38, 38, .96); }

/* 卡密区文字可长按选择（移动端兜底复制） */
.cards-box { -webkit-user-select: text; user-select: text; }

body.faka-modal-lock { overflow: hidden; }

/* ==================================================
   二维码弹层
================================================== */
.faka-qr-mask {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0, 0, 0, .55);
}
.faka-qr-panel {
  display: flex;
  flex-direction: column;
  width: min(440px, 94vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.faka-qr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.faka-qr-head h4 { margin: 0; font-size: 16px; color: #333; }
.faka-qr-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f2f4f5;
  color: #888;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.faka-qr-close:hover { background: #e5e8e9; color: #333; }
.faka-qr-tabs {
  display: flex;
  gap: 0;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.faka-qr-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: #555;
}
.faka-qr-scroll {
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 56vh;
  margin: 0 -4px;
  padding: 0 4px;
  touch-action: pan-y;
}
.faka-qr-single { padding: 12px; border: 1px solid #eee; border-radius: 8px; }
/* 单码模式 box.innerHTML 是裸 <img>（无 .faka-qr-code 包裹），必须单独约束，
   否则新的大尺寸原图（~627px）会溢出弹层。 */
.faka-qr-single img { display: block; width: 100%; max-width: 255px; height: auto; margin: 0 auto; }
.faka-qr-item {
  margin-bottom: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
}
.faka-qr-item.scanned { background: #f6ffed; border-color: #b7eb8f; }
.faka-qr-item.scanned .faka-qr-code img { filter: grayscale(80%); opacity: .55; }
/* 二维码序号：加粗加深放大，居中显示，便于在多个码之间定位「这是第几个」 */
.faka-qr-no {
  font-size: 14px;
  font-weight: 700;
  color: #1f2d3d;
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: .3px;
}
/* 「第 N/M」里的数字再突出一点 */
.faka-qr-no b { font-size: 16px; color: #007BDA; font-weight: 800; }
.faka-qr-text {
  font-size: 12px;
  color: #444;
  font-family: Consolas, monospace;
  word-break: break-all;
  background: #f8f9fa;
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 8px;
  -webkit-user-select: text;
  user-select: text;
}
/* 二维码显示尺寸：上限 255px（原 340px 的 3/4）。原图只有 ~120px 且 max-width 只能
   缩小不能放大，故生成时做大图、这里再限制显示上限，兼顾清晰与不撑爆布局。
   容器为块级并限制最大宽度，图片 width:100% 才能稳定撑满而不会溢出窄屏。 */
.faka-qr-code img { display: block; width: 100%; max-width: 255px; height: auto; margin: 0 auto; }
.faka-qr-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.faka-mini-btn {
  font-size: 12px;
  padding: 7px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-family: inherit;
  cursor: pointer;
}
.faka-mini-btn:hover { border-color: #007BDA; color: #007BDA; }
.faka-mini-btn.on { background: #f6ffed; color: #389e0d; border-color: #b7eb8f; }
.faka-mini-btn.copied { background: #f6ffed; color: #389e0d; border-color: #b7eb8f; }
.faka-qr-caption { font-size: 12px; color: #888; margin-top: 12px; word-break: break-all; }
.faka-qr-hint { font-size: 11px; color: #999; margin-top: 8px; }

/* ==================================================
   公告中心
================================================== */
.gg-empty { text-align: center; color: #999; padding: 40px 0; }
.gg-list { display: flex; flex-direction: column; gap: 12px; }
.gg-item { border: 1px solid #e9eaec; border-radius: 4px; overflow: hidden; background: #fff; }
.gg-item-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #f8f9fa;
  border: none;
  border-bottom: 1px solid #eef0f1;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.gg-item-head:hover { background: #eef6fa; }
.gg-item-head .gg-tag {
  flex-shrink: 0;
  background: #f44336;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
}
.gg-item-head .gg-title { flex: 1; font-size: 15px; color: #006493; font-weight: bold; word-break: break-word; }
.gg-item-head .gg-time { flex-shrink: 0; font-size: 12px; color: #999; }
.gg-item-head .gg-arrow { flex-shrink: 0; color: #bbb; font-size: 13px; transition: transform .2s; }
.gg-item.open .gg-item-head .gg-arrow { transform: rotate(90deg); }
.gg-item-body { display: none; padding: 16px; font-size: 14px; color: #555; line-height: 1.9; word-break: break-word; }
.gg-item.open .gg-item-body { display: block; }
.gg-item-body .gg-text { white-space: pre-line; }
.gg-item-body img {
  display: block;
  max-width: min(320px, 100%);
  height: auto;
  margin: 12px auto 0;
  border-radius: 8px;
  border: 1px solid #eee;
}

/* ==================================================
   订单查询页优化
================================================== */
.order-lookup { display: flex; gap: 10px; max-width: 640px; flex-wrap: wrap; }
.order-lookup input { flex: 1; height: 40px; min-width: 180px; }
.order-lookup .hqy-btn { height: 40px; line-height: 40px; padding: 0 26px; font-size: 15px; white-space: nowrap; }

/* 未登录下单提示（buy.php） */
.guest-tip {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #0c4a6e;
  line-height: 1.8;
}
.guest-tip-main { font-size: 14px; margin-bottom: 2px; }
.guest-tip-sub { color: #0369a1; }
.guest-tip a { color: #0369a1; font-weight: 700; text-decoration: underline; }
.order-hint {
  background: #fff8ed;
  border: 1px solid #f5dfb8;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  color: #8a5a00;
  line-height: 1.9;
  margin-bottom: 16px;
}
.order-hint b { color: #d97706; }
.order-fail {
  background: #fdf0f0;
  border: 1px solid #f3c6c6;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  color: #b00909;
  margin-top: 12px;
}