/* 自助充值页 (/redeem) 的补充样式。
 *
 * 参考站结构与默认外观由 /static/redeem-reference.css 提供（该文件由
 * scripts/build_redeem_reference_css.py 从参考站的编译样式表提取，
 * 作用域限定在 main.redeem-flow）。这里只补两类东西：
 *   1. 参考站未覆盖的交互状态：当前步骤高亮、兑换方式切换；
 *   2. 本站自己的动态组件：进度面板、成功卡、官方账单、批量面板和提示条。
 */

/* ------------------------------------------------------------------ *
 * 1. 状态补丁
 * ------------------------------------------------------------------ */

/* 左侧步骤卡：默认态（idle）写在模板里，这里补 active / done。 */
.redeem-flow [data-rail-step][data-state="active"] {
  /* 用参考站自己的 Tailwind v4 调色板变量，保证与参考站逐像素同色。 */
  border-color: var(--color-violet-500);
  border-left-color: var(--color-violet-700);
  background-color: rgb(245 243 255 / .8);
  box-shadow: 0 8px 18px rgb(103 78 211 / .14);
}

.redeem-flow [data-rail-step][data-state="active"] > span:first-child {
  background-color: var(--color-violet-600);
  color: #fff;
}

.redeem-flow [data-rail-step][data-state="done"] {
  border-color: var(--color-slate-200);
  border-left-color: var(--color-violet-300);
  background-color: rgb(248 250 252 / .8);
}

.redeem-flow [data-rail-step][data-state="done"] > span:first-child {
  background-color: var(--color-violet-100);
  color: var(--color-violet-700);
}

/* 手机版侧栏折叠步骤卡。 */
.redeem-flow [data-rail-mobile][data-state="active"] {
  border-color: var(--color-violet-400);
  background-color: rgb(245 243 255 / .7);
}

.redeem-flow [data-rail-mobile][data-state="idle"] {
  border-color: var(--color-slate-200);
  background-color: #fff;
}

.redeem-flow [data-rail-mobile][data-state="active"] [data-rail-mobile-index] {
  background-color: var(--color-violet-600);
  color: #fff;
}

/* 右栏步骤条：默认态写在模板里，这里补 active / done。 */
.redeem-flow [data-redeem-top-steps] li[data-state="active"] [data-top-step-dot] {
  border-color: #6b50dc;
  background-color: #6b50dc;
  color: #fff;
  box-shadow: 0 0 0 5px #eeeaff;
}

.redeem-flow [data-redeem-top-steps] li[data-state="active"] [data-top-step-label] {
  color: #7257de;
}

.redeem-flow [data-redeem-top-steps] li[data-state="done"] [data-top-step-dot] {
  border-color: #6b50dc;
  background-color: #eeeaff;
  color: #6b50dc;
  box-shadow: none;
}

.redeem-flow [data-redeem-top-steps] li[data-state="done"] [data-top-step-label] {
  color: #7257de;
}

.redeem-flow [data-redeem-top-steps] li[data-state="idle"] [data-top-step-dot] {
  border-color: #e5eaf3;
  background-color: #f3f6fb;
  color: #97a5bc;
  box-shadow: none;
}

.redeem-flow [data-redeem-top-steps] li[data-state="idle"] [data-top-step-label] {
  color: #98a5ba;
}

/* 兑换方式切换（本站单笔/批量入口，沿用参考站会员页的分段控件外观）。 */
.redeem-flow .redeem-service-tabs a {
  text-align: center;
}

/* 单笔/批量入口是本站为「多卡密提交」新增的分段控件，参考站没有这个元素，
   所以参考站的编译样式表里也没有 right-[17px] / md:right-8 / md:top-6。
   这里按模板原本的意图把它固定在卡片头部右上角（参考站该区域为空），
   尽量不影响参考站自身的排版。 */
.redeem-flow [data-redeem-mode-switch] {
  position: absolute;
  top: 20px;
  right: 17px;
}

@media (min-width: 48rem) {
  .redeem-flow [data-redeem-mode-switch] {
    top: 24px;
    right: 32px;
  }
}

/* 参考站这两处容器是普通 <div>，本站为了实现回车提交换成了 <form>。
   Tailwind preflight 不重置 form 的 UA 下外边距，这里只归零下边距，
   上边距仍交给模板里的 mt-* 工具类，保持几何与参考站一致。 */
.redeem-flow #query-form {
  margin-bottom: 0;
}

.redeem-flow [data-mode] {
  background-color: transparent;
  color: #66758d;
  cursor: pointer;
}

.redeem-flow [data-mode]:hover {
  background-color: rgb(255 255 255 / .7);
  color: #384963;
}

.redeem-flow [data-mode].active {
  background-color: #fff;
  color: #3141b8;
  box-shadow: 0 2px 8px rgb(43 71 120 / .12);
}

.redeem-flow [data-mode]:focus-visible {
  outline: 3px solid #a5b4fc;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 2. 本站动态组件
 * ------------------------------------------------------------------ */

/* 提交中切换标签时的提示条。 */
.redeem-navigation-notice {
  margin: 0 auto 16px;
  max-width: 1080px;
  padding: 12px 18px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  font-size: .8125rem;
}

/* 提示条：错误 / 成功 / 提醒三种语气。 */
.redeem-flow #notice,
.redeem-flow #res-message,
.redeem-flow #session-check-result {
  border-radius: 12px;
  font-size: .8125rem;
  line-height: 1.6;
}

.redeem-flow #notice:not([hidden]),
.redeem-flow #res-message:not([hidden]) {
  padding: 11px 14px;
  border: 1px solid #fecdca;
  color: #b42318;
  background: #fef3f2;
}

.redeem-flow #notice[data-tone="success"],
.redeem-flow #res-message[data-tone="success"] {
  border-color: #abefc6;
  color: #067647;
  background: #ecfdf3;
}

.redeem-flow #session-check-result:not([hidden]) {
  color: #b42318;
}

.redeem-flow #session-check-result[data-tone="success"] {
  color: #067647;
}

.redeem-flow #session-check-result[data-tone="warn"] {
  color: #b54708;
}

/* 步骤二里的填写示例图（由 storefront.js 按后台配置注入）。 */
.redeem-tutorial {
  margin-top: 14px;
}

.redeem-tutorial summary {
  cursor: pointer;
  color: #6d4ad8;
  font-weight: 700;
}

.redeem-tutorial figure {
  margin: 14px 0;
}

.redeem-tutorial img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d5deea;
  border-radius: 10px;
}

.redeem-tutorial figcaption {
  margin-top: 8px;
  color: #62748e;
  font-size: .75rem;
  line-height: 1.7;
}

.redeem-session-example{margin-top:8px}
.session-example-dialog{width:min(980px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:22px;background:#fff;color:#17294a;box-shadow:0 30px 90px rgba(15,23,42,.28);overflow:hidden}
.session-example-dialog::backdrop{background:rgba(15,23,42,.62);backdrop-filter:blur(4px)}
.session-example-dialog-inner{max-height:calc(100dvh - 32px);overflow:auto;padding:28px}
.session-example-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.session-example-dialog-head h2{margin:0;font-size:24px;line-height:1.3;font-weight:900;letter-spacing:-.03em}
.session-example-dialog-head p{margin:6px 0 0;color:#62748e;font-size:14px;line-height:1.6}
.session-example-close{flex:0 0 auto;border:1px solid #dbe4f0;border-radius:10px;background:#fff;color:#314158;padding:9px 16px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.session-example-close:hover{border-color:#a98bf4;color:#5f3dd6;background:#faf8ff}
.session-example-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 18px}
.session-example-steps article{min-width:0;padding:15px;border-radius:14px;background:#f4f1ff;border:1px solid #e6ddff}
.session-example-steps b{display:block;color:#4f2bc5;font-size:14px;line-height:1.45}
.session-example-steps p{margin:6px 0 0;color:#5c4c85;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.session-example-steps a{color:#5c24d6;text-decoration:underline;text-underline-offset:2px}
.session-example-figure{margin:0;border:1px solid #dfe7f3;border-radius:14px;background:#f8faff;padding:10px}
.session-example-figure img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:9px;background:#fff;cursor:zoom-in}
.session-example-figure figcaption{margin:8px 2px 0;color:#71829c;font-size:12px;line-height:1.5;text-align:center}
.session-example-json{margin-top:16px;border:1px solid #dfe7f3;border-radius:14px;overflow:hidden;background:#fbfcff}
.session-example-json-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid #e7edf6;color:#314158;font-size:13px}
.session-example-json-head span{color:#8a97aa;font-size:11px;font-weight:700}
.session-example-json pre{margin:0;padding:14px;max-height:210px;overflow:auto;color:#43516a;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.session-example-notice{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:#fff8e7;color:#8a5b08;font-size:12px;line-height:1.6}
@media(max-width:700px){.session-example-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:18px}.session-example-dialog-inner{max-height:calc(100dvh - 20px);padding:20px}.session-example-dialog-head h2{font-size:20px}.session-example-dialog-head p{font-size:12px}.session-example-steps{grid-template-columns:1fr;gap:8px;margin:16px 0 14px}.session-example-steps article{padding:12px}.session-example-steps b{font-size:13px}.session-example-figure img{max-height:280px}.session-example-json pre{max-height:170px;font-size:11px}.session-example-close{padding:8px 12px}}

:is(.recharge-ui, .redeem-flow) #cdk-verified-card {
  margin: 16px 0;
  padding: 18px 20px;
  border: 2px solid #9677eb;
  border-left: 5px solid #7657df;
  border-radius: 14px;
  background: linear-gradient(110deg, #f1eaff, #f9f6ff);
  box-shadow: 0 6px 20px #7657df14;
  color: #453276;
}

:is(.recharge-ui, .redeem-flow) #cdk-verified-card > strong {
  color: #5941ce;
  font-size: 18px;
  line-height: 1.5;
}

:is(.recharge-ui, .redeem-flow) #cdk-verified-card > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 16px;
}

:is(.recharge-ui, .redeem-flow) #cdk-verified-card b {
  padding: 6px 12px;
  border: 1px solid #d4c5f9;
  border-radius: 9px;
  background: #fff;
  color: #5941ce;
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

:is(.recharge-ui, .redeem-flow) #cdk-verified-card p {
  margin: 12px 0 0;
  color: #665780;
  font-size: 15px;
  line-height: 1.7;
}

:is(.recharge-ui, .redeem-flow) #cdk-continue.cdk-next-ready {
  box-shadow: 0 0 0 3px #e8ddff, 0 8px 18px #7657df24;
}

.redeem-flow {
  font-size: 16px;
  line-height: 1.7;
}

.redeem-flow :is([class~="text-[9px]"], [class~="text-[10px]"], [class~="text-[11px]"], [class~="text-[12px]"], [class~="text-xs"], [class~="text-[0.68rem]"]) {
  font-size: 14px;
  line-height: 1.6;
}

.redeem-flow :is([class~="text-[13px]"], [class~="text-sm"], p, label, summary) {
  font-size: 16px;
  line-height: 1.7;
}

.redeem-flow :is(input:not([type="checkbox"]), textarea, select, button) {
  font-size: 16px;
}

.redeem-flow :is([data-rail-step], [data-rail-mobile]) :is(h2, h3) {
  font-size: 16px;
  line-height: 1.5;
}

.redeem-flow :is([data-rail-step], [data-rail-mobile]) :is(p, a),
.redeem-flow :is([data-step-kicker], [data-redeem-card-head] > div > p, [data-redeem-aside-heading] p, [data-top-step-label]) {
  font-size: 14px;
  line-height: 1.7;
}

.redeem-flow :is([data-step-title] h3, [data-redeem-aside-heading] h2, #redeem-current-title) {
  font-size: 24px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.redeem-flow [data-redeem-card-head] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.redeem-flow [data-redeem-card-head] > div:first-child {
  flex: 1 1 240px;
  min-width: 0;
}

.redeem-flow [data-redeem-mode-switch] {
  position: static;
  flex: 0 0 auto;
}

.redeem-flow .redeem-service-tabs a {
  font-size: 16px;
}

.redeem-flow #session-token {
  min-height: 140px;
  font-size: 16px;
  line-height: 1.7;
}

.redeem-flow :is(#notice, #session-check-result, #res-message, .redeem-tutorial figcaption) {
  font-size: 15px;
  line-height: 1.7;
}

.redeem-flow :is(#session-summary, #confirm-form) b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.redeem-flow :is(#session-form, #confirm-form) a {
  overflow-wrap: anywhere;
}

.recharge-ui :is(.button.primary, .mode-tab.active) {
  background: var(--primary-gradient);
  color: #fff;
}

.recharge-ui :is(.hint, .session-help-card p, .session-security-alert, .security-note p, .step-kicker) {
  font-size: 15px;
  line-height: 1.7;
}

.recharge-ui :is(.input, .button, .rail-step :is(strong, h2, h3), .summary-row) {
  font-size: 16px;
}

.recharge-ui .redeem-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.recharge-ui .redeem-field-head label { display: block; }
.recharge-ui .req { color: var(--red); }
.recharge-ui .redeem-field-badge { color: var(--green); font-size: 14px; }
.recharge-ui .redeem-input-wrap { position: relative; }
.recharge-ui .redeem-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.recharge-ui .redeem-input-wrap input { padding-left: 42px; }
.recharge-ui .step-title h3 { font: 700 24px/1.4 "Segoe UI", "Microsoft YaHei", sans-serif; }

@media (min-width: 701px) and (max-width: 1120px) {
  body:has(.redeem-flow) .nav-toggle { display: block; margin-left: auto; }
  body:has(.redeem-flow) .nav-links { position: absolute; display: none; top: 78px; left: 16px; right: 16px; padding: 12px; background: #fff; border: 1px solid #e1e7f0; border-radius: 16px; box-shadow: 0 18px 45px #0f172b24; flex-direction: column; align-items: stretch; gap: 3px; max-height: calc(100dvh - 96px); overflow-y: auto; }
  body:has(.redeem-flow) .nav-links.open { display: flex; }
  body:has(.redeem-flow) .nav-links a,
  body:has(.redeem-flow) .nav-menu summary { border-radius: 10px; }
  body:has(.redeem-flow) .nav-menu-panel { position: static; box-shadow: none; border: 0; background: #f8fafc; margin: 3px 0; }
}

@media (max-width: 767px) {
  .redeem-flow :is([data-step-title] h3, #redeem-current-title) { font-size: 22px; }
  .redeem-flow .redeem-service-tabs { width: 100%; min-width: 0; }
  .redeem-flow .redeem-service-tabs a { padding-inline: 10px; font-size: 15px; }
  .redeem-flow [data-rail-progress-chip] { flex-wrap: wrap; gap: 6px; }
  :is(.recharge-ui, .redeem-flow) #cdk-verified-card { padding: 16px; }
}

/* 参考模板用 divide-[#eef2f8] 指定行分隔线颜色，但这个任意值类没有编译进
   redeem-reference.css，浏览器只能回退到 currentColor（近黑），于是每个结果
   格子之间出现一条很重的深色横线。这里按模板原意补回浅色分隔线。 */
.redeem-scope [class~="divide-[#eef2f8]"] > :not(:last-child){border-bottom-color:#eef2f8}