/* ==========================================================================
   page-apply.css · 报考流程页（apply.html）
   --------------------------------------------------------------------------
   作用域：body.page-apply
   结构：页面标题区 → 步骤条 → [左：步骤内容区 | 右：粘性费用汇总]
   四步：选科目 → 核对信息 → 缴费 → 生成准考证
   注：.page-head / .crumb 已抽到 components.css 全站共用。
   ========================================================================== */

/* --------------------------------------------------------------------------
   步骤条容器（吸附在页头下方）
   -------------------------------------------------------------------------- */

.stepbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5) 0;
}
.stepbar .steps { max-width: 940px; margin: 0 auto; }

/* 步骤节点可点击回退：仅第 1 步（无条件）与已到达过的步骤 */
#steps .step[data-step="1"] .step-top { cursor: pointer; }
#steps .step[data-step="1"] .step-top:hover .step-node { border-color: var(--navy-700); }

/* --------------------------------------------------------------------------
   主布局
   -------------------------------------------------------------------------- */

.apply { padding: var(--sp-7) 0 var(--sp-9); }
.apply-grid {
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: var(--sp-6);
  align-items: start;
}

.pane-block[hidden] { display: none; }
.block-head { margin-bottom: var(--sp-5); }
.block-head .t-h3 { margin: var(--sp-3) 0 var(--sp-2); }

/* --------------------------------------------------------------------------
   步骤 1 · 科目选择卡
   --------------------------------------------------------------------------
   用 <label> 包住隐藏的原生 checkbox：零 JS 也能响应键盘与点击，
   选中态完全交给 :checked 伪类，避免手动切 class 造成状态不同步。
   -------------------------------------------------------------------------- */

.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }

.pick-body {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: all var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
/* 左栏位条：未选=灰，选中=红（母题的选中态表达） */
.pick-body::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--line-strong);
  transition: background var(--dur) var(--ease);
}
.pick:hover .pick-body { border-color: var(--navy-200); background: var(--navy-50); box-shadow: var(--sh-1); }
.pick input:checked + .pick-body {
  border-color: var(--navy-800);
  background: var(--navy-50);
  box-shadow: inset 0 0 0 1px var(--navy-800), var(--sh-2);
}
.pick input:checked + .pick-body::before { background: var(--red-600); }
.pick input:focus-visible + .pick-body { outline: 3px solid rgba(27, 87, 165, .35); outline-offset: 2px; }

/* --- 自绘勾选框 --- */
.pick-tick {
  width: 21px;
  height: 21px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-xs);
  flex: 0 0 auto;
  margin-top: 2px;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: all var(--dur) var(--ease);
}
.pick input:checked + .pick-body .pick-tick { background: var(--navy-800); border-color: var(--navy-800); }
.pick-tick::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pick input:checked + .pick-body .pick-tick::after { opacity: 1; }

.pick-main { flex: 1; min-width: 0; }
.pick-title { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pick-title b { font-size: 16px; font-weight: 700; color: var(--navy-900); }
.pick-price { margin-left: auto; text-align: right; flex: 0 0 auto; }
.pick-price b { font-family: var(--ff-mono); font-size: 19px; color: var(--red-600); font-weight: 700; }
.pick-price span { display: block; font-size: var(--fs-micro); color: var(--ink-400); }
.pick-desc { font-size: var(--fs-sm); color: var(--ink-500); margin: 8px 0 var(--sp-4); max-width: 60ch; }
.pick-meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.pick-meta span { font-size: var(--fs-xs); color: var(--ink-400); display: flex; align-items: center; gap: 5px; }
.pick-meta span b { color: var(--ink-700); font-weight: 700; }

/* --------------------------------------------------------------------------
   右 · 粘性费用汇总栏
   --------------------------------------------------------------------------
   三科以上自动出现"全科立减"行（由 page-apply.js 控制显隐）。
   -------------------------------------------------------------------------- */

.summary { position: sticky; top: calc(var(--h-header) + 16px); }

.sum-head {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sum-list { padding: var(--sp-3) var(--sp-5); max-height: 280px; overflow: auto; }
.sum-item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm);
}
.sum-item:last-child { border-bottom: 0; }
.sum-item b { font-weight: 500; color: var(--ink-700); font-size: var(--fs-xs); line-height: 1.5; }
.sum-item span { font-family: var(--ff-mono); color: var(--ink-500); flex: 0 0 auto; font-size: var(--fs-xs); padding-top: 2px; }
.sum-empty { padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--ink-400); font-size: var(--fs-xs); line-height: 1.9; }

.sum-total { border-top: 1px solid var(--line-strong); padding: var(--sp-4) var(--sp-5); background: var(--navy-50); }
.sum-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 4px 0; color: var(--ink-500); }
.sum-row em { font-style: normal; font-family: var(--ff-mono); color: var(--ink-700); }
.sum-row--big {
  font-size: var(--fs-body);
  color: var(--ink-900);
  font-weight: 700;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px dashed var(--navy-200);
}
.sum-row--big em { font-size: 23px; color: var(--red-600); font-weight: 700; }
.sum-row--save em { color: var(--green-600); }

/* --------------------------------------------------------------------------
   步骤 2 · 信息核对表单
   -------------------------------------------------------------------------- */

.form-sec {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.form-sec > .sec-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.form-sec > .sec-label h3 { margin: 0; font-size: var(--fs-h4); color: var(--navy-900); font-weight: 700; }

.fg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
.fg .full { grid-column: 1 / -1; }

/* 只读字段：虚线边框 + 灰底，一眼区分"系统带出"与"手填" */
.readonly { background: var(--canvas); border-style: dashed; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   步骤 3 · 支付
   -------------------------------------------------------------------------- */

.pay-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.pay {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  background: var(--paper);
}
.pay:hover { border-color: var(--navy-200); background: var(--navy-50); }
.pay:has(input:checked) { border-color: var(--navy-800); background: var(--navy-50); box-shadow: inset 0 0 0 1px var(--navy-800); }
.pay input { accent-color: var(--navy-800); width: 16px; height: 16px; }
.pay b { font-size: var(--fs-sm); color: var(--ink-900); }

/* 支付方式图标：装饰元素（aria-hidden），文字信息由右侧标签承担 */
.pay .pay-ic {
  width: 26px; height: 26px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
}

.order-tbl { margin-bottom: var(--sp-5); }

/* --------------------------------------------------------------------------
   步骤 4 · 报名成功 + 准考证
   -------------------------------------------------------------------------- */

.done-head {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border-bottom: 0;
}
.done-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-600);
  display: grid;
  place-items: center;
  margin: 0 auto var(--sp-5);
  border: 2px solid #BFE3CE;
}

.admit {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: var(--sp-6);
}
.admit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--navy-800);
  flex-wrap: wrap;
}
.admit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-5); }
.admit-grid div { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); padding: 9px 0; border-bottom: 1px dashed var(--line); }
.admit-grid dt { color: var(--ink-400); flex: 0 0 84px; }
.admit-grid dd { margin: 0; color: var(--ink-900); font-weight: 500; }
.admit-grid dd.mono { font-family: var(--ff-mono); font-weight: 700; color: var(--navy-800); }

.next-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   底部操作条（上一步 / 下一步 + 状态提示）
   -------------------------------------------------------------------------- */

.actions {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .apply-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .fg { grid-template-columns: 1fr; }
  .admit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* 订单明细表 5 列在手机上放不下：整表横向滑动，表头随动 */
  .order-tbl {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  /* 步骤条节点横向可滑，避免挤压文字 */
  .steps { overflow-x: auto; flex-direction: row; gap: var(--sp-2); padding-bottom: 4px; }
  .steps .step { flex: 0 0 auto; }
  .step-line { display: none; }
  /* 底部操作条小屏纵向堆叠：按钮整宽更好点，提示文字居中 */
  .actions { flex-direction: column; align-items: stretch; }
  .actions > .btn,
  .actions .row .btn { width: 100%; }
  .actions .row { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .actions .row .t-xs { text-align: center; }
}

/* --------------------------------------------------------------------------
   微信扫码支付 modal（page-apply.js 5.6 节控制）
   --------------------------------------------------------------------------
   · 与 .notice / .modal-overlay 共用同一个遮罩风格，但容器改成「居中弹窗」
   · 严格遵循「不伪造成功」原则：modal 关闭不视为支付成功，必须经后端校验
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 16, 38, 0.55);
  backdrop-filter: blur(2px);
  z-index: 80;
}
.modal-container--wechat {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 81;
  padding: var(--sp-4);
  overflow-y: auto;                 /* 弹窗内容溢出时允许整页滚动 */
  -webkit-overflow-scrolling: touch;
}
.modal-content--wechat {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - var(--sp-4) * 2);
  max-height: calc(100dvh - var(--sp-4) * 2);   /* iOS Safari 视口高度，避免被 URL 栏遮挡 */
  overflow-y: auto;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 16, 38, 0.28);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
  -webkit-overflow-scrolling: touch;
}
.modal-close-x {
  position: absolute; top: 10px; right: 14px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  font-size: 22px; line-height: 1; color: var(--ink-400);
  cursor: pointer;
}
.modal-close-x:hover { color: var(--ink-900); }

.modal-header--wechat .modal-icon--wechat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #07C160; color: #fff;
  font-weight: 700; font-size: 20px;
  margin-bottom: var(--sp-3);
}
.modal-header--wechat .modal-title {
  margin: 0 0 4px;
  font-size: var(--fs-h4); font-weight: 700; color: var(--ink-900);
}
.modal-header--wechat .modal-message {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm); color: var(--ink-500);
}

.qrcode-container {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-4) var(--sp-3);
  background: #FAFBFC;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.qrcode-wrapper {
  width: clamp(180px, 64vw, 209px);
  aspect-ratio: 209 / 196;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto;
}
#qrcodeImg { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.qrcode-fallback {
  margin: 0;
  font-size: 11px; color: var(--ink-700);
  word-break: break-all;
  padding: var(--sp-2);
}
.modal-tip {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs); color: var(--ink-500);
}
.modal-tip b {
  font-family: var(--mono); font-weight: 700;
  color: var(--red-600); font-size: 13px;
  letter-spacing: 0.5px;
}

.qrcode-meta {
  margin: var(--sp-4) 0 var(--sp-5);
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 4px var(--sp-3);
  text-align: left;
}
.qrcode-meta > div { display: contents; }
.qrcode-meta dt {
  font-size: var(--fs-xs); color: var(--ink-500);
  align-self: center;
}
.qrcode-meta dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-900); }
.qrcode-price { font-size: 18px; font-weight: 700; color: var(--red-600); }
.qrcode-orderno { word-break: break-all; font-size: 12px; }

.modal-footer--wechat {
  display: flex; gap: var(--sp-3); justify-content: center;
}
.modal-footer--wechat .btn { min-width: 120px; }
.modal-footer--wechat .btn[disabled] { opacity: 0.7; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   手机适配（≤560px）
   --------------------------------------------------------------------------
   「」里的按钮要够大可点，二维码要有足够扫描识别度，订单号能换行但不被截断。
   也兼顾 iPhone X+ 底部 home indicator 的安全区。                        */
@media (max-width: 560px) {

  /* 弹窗外层：保留 12px 边距，避免贴屏幕 */
  .modal-container--wechat {
    padding: 12px;
    align-items: flex-end;          /* 从底部弹出，更符合手机习惯 */
  }
  .modal-content--wechat {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 56px 20px 20px;
    border-radius: 14px 14px 0 0;  /* 顶部圆角保留，底部贴屏幕 */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  /* 关闭 X：缩小定位空间，避免图标被遮 */
  .modal-close-x {
    top: 8px; right: 10px;
    width: 36px; height: 36px;     /* 44px 推荐下限，但弹窗已有内边距，36 已够 */
    font-size: 24px;
  }

  /* 头部图标与标题缩小 */
  .modal-header--wechat .modal-icon--wechat {
    width: 36px; height: 36px;
    font-size: 18px;
    margin-bottom: 8px;
  }
  .modal-header--wechat .modal-title {
    font-size: 17px;
  }
  .modal-header--wechat .modal-message {
    font-size: 12.5px;
    margin-bottom: 16px;
  }

  /* 二维码容器：内部 padding 收紧 */
  .qrcode-container {
    padding: 14px 12px;
  }

  /* meta 改单列：金额行块状，订单号一行可滚不被截 */
  .qrcode-meta {
    grid-template-columns: 1fr;
    gap: 8px 0;
    margin: 14px 0 18px;
  }
  .qrcode-meta > div {
    display: flex; align-items: baseline; gap: 8px;
  }
  .qrcode-meta dt {
    flex: 0 0 4.5em;
    font-size: 12px;
  }
  .qrcode-meta dd {
    flex: 1 1 auto;
    min-width: 0;                  /* 允许 flex 子项收缩触发滚动 */
    font-size: 13px;
  }
  .qrcode-price { font-size: 17px; }
  .qrcode-orderno {
    font-size: 11.5px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* 底部按钮：竖排满宽，符合拇指触及区 */
  .modal-footer--wechat {
    flex-direction: column;
    gap: 8px;
  }
  .modal-footer--wechat .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;              /* iOS 推荐 44pt 安卓 48dp */
    font-size: 14px;
  }

  /* 提示文字：略放大但还在小字号档 */
  .modal-tip {
    font-size: 12px;
  }
  .modal-tip b {
    font-size: 13px;
  }

  /* 步骤 3 / 4 的 mobile 适配已下沉到 Views/Register/Index.cshtml 内部
     <style> 块（避免对其他页面的「扩散修改」），此处不再重复。            */
}

/* --------------------------------------------------------------------------
   超窄屏（≤360px）—— iPhone SE 1代 / 5.5 寸以下
   进一步压缩弹窗内边距，保证不被截。                                     */
@media (max-width: 360px) {
  .modal-content--wechat {
    padding: 50px 14px 16px;
  }
  .qrcode-container { padding: 12px 10px; }
  .qrcode-meta dd { font-size: 12.5px; }
  .qrcode-orderno { font-size: 11px; }
  /* 步骤 3 / 4 的 ≤360 适配已下沉到 Views/Register/Index.cshtml */
}

/* 减弱动效以满足 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .modal-content--wechat { transition: none; }
}