/* ============================================================
   CentSnap 前台账户 / 登录 / 注册 / 订单样式（account.css）
   依赖 store.css 提供的 .cs-wrap/.cs-box/.cs-btn/.cs-field 等基类。
   ============================================================ */

/* ── 登录 / 注册 居中卡片 ── */
.cs-auth-wrap { display: flex; justify-content: center; padding: 48px 20px 64px; }
.cs-auth-card {
  width: 100%; max-width: 420px; background: #fff;
  border: 1px solid #eaecef; border-radius: 14px; padding: 32px 28px;
  box-shadow: 0 8px 28px rgba(17,24,39,.06);
}
.cs-auth-title { font-size: 22px; margin: 0 0 6px; }
.cs-auth-sub { margin: 0 0 22px; color: #6b7280; font-size: 14px; }
.cs-auth-error {
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; font-size: 14px;
}
.cs-auth-ok {
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; font-size: 14px;
}
.cs-auth-form .cs-field input,
.cs-auth-form .cs-field textarea { width: 100%; }
.cs-auth-foot { margin-top: 18px; text-align: center; color: #6b7280; font-size: 14px; }
.cs-auth-foot a { color: #2f6fed; font-weight: 600; }
.cs-auth-sep { margin: 0 10px; color: #d1d5db; }

/* ── 账户中心布局 ── */
.cs-account { padding: 32px 20px 64px; }
.cs-account-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cs-account-grid { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
@media (max-width: 720px) { .cs-account-grid { grid-template-columns: 1fr; } }

.cs-account-side { text-align: center; padding: 26px 18px; }
.cs-avatar {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
  background: #2f6fed; color: #fff; font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cs-account-name { font-size: 17px; font-weight: 700; }
.cs-account-email { color: #9ca3af; font-size: 13px; word-break: break-all; }

/* ── 订单卡片 ── */
.cs-order-card { background: #fff; border: 1px solid #eaecef; border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.cs-order-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid #f1f3f6; background: #fafbfc;
}
.cs-order-no { font-weight: 700; }
.cs-order-date { color: #9ca3af; font-size: 13px; }
.cs-order-items { padding: 8px 18px; }
.cs-order-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px dashed #eef1f4; font-size: 14px;
}
.cs-order-item:last-child { border-bottom: none; }
.cs-oi-title { flex: 1 1 auto; font-weight: 600; }
.cs-oi-variant { color: #9ca3af; font-size: 12px; }
.cs-oi-qty { color: #6b7280; }
.cs-oi-sub { font-weight: 600; min-width: 80px; text-align: right; }
.cs-order-foot { padding: 12px 18px; text-align: right; border-top: 1px solid #f1f3f6; }
.cs-order-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 12px 18px; border-top: 1px dashed #eef1f4; background: #fafbfc;
  font-size: 13px; color: #475569;
}
.cs-omi-label { color: #9ca3af; }
.cs-omi-val { font-weight: 600; }
.cs-omi-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #eef2ff; color: #4338ca; padding: 2px 8px; border-radius: 6px;
}
.cs-order-logistics {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px 18px; border-top: 1px dashed #eef1f4; background: #f7f9ff;
}
.cs-oli-label { font-size: 13px; color: #6b7280; }
.cs-oli-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #eef2ff; color: #4338ca; padding: 2px 8px; border-radius: 6px; }
.cs-oli-carrier { font-size: 12px; color: #4f46e5; background: #eef2ff; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.cs-order-track-link { margin-left: auto; }
@media (max-width: 520px) {
  .cs-order-track-link { margin-left: 0; width: 100%; text-align: center; }
}

/* ── 状态徽标 ── */
.cs-badge-warn  { background: #f59e0b; color: #fff; }
.cs-badge-info  { background: #3b82f6; color: #fff; }
.cs-badge-ok    { background: #10b981; color: #fff; }
.cs-badge-muted { background: #9ca3af; color: #fff; }

/* ════════════════════════════════════════════════════════
   退换货 RMA（returns.php / my-returns.php）
   ════════════════════════════════════════════════════════ */
.cs-req { color: #ef4444; margin-left: 2px; }

/* 申请表单 */
.cs-rma-form { max-width: 720px; }
.cs-rma-types { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-rma-type {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border: 1px solid #e5e7eb; border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 14px; user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.cs-rma-type input { margin: 0; }
.cs-rma-type:has(input:checked) {
  border-color: #2f6fed; background: #eff4ff; color: #2f6fed; font-weight: 600;
}

.cs-rma-items { display: flex; flex-direction: column; gap: 8px; }
.cs-rma-items-empty { color: #9ca3af; font-size: 14px; padding: 8px 0; }
.cs-rma-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid #eef1f4; border-radius: 10px; background: #fff;
}
.cs-rma-item-title { font-weight: 600; flex: 1 1 auto; min-width: 140px; word-break: break-word; }
.cs-rma-item-variant { color: #9ca3af; font-size: 12px; width: 100%; margin-top: -4px; }
.cs-rma-item-price { color: #6b7280; font-weight: 600; }
.cs-rma-item-qtywrap { color: #6b7280; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.cs-rma-item-qtywrap .rma-item-qty { width: 64px; display: inline-block; margin: 0; }

.cs-rma-summary {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: #f8fafc; border: 1px solid #eef1f4; border-radius: 10px;
  padding: 12px 16px; font-size: 15px;
}
.cs-rma-summary b { color: #16a34a; font-size: 18px; }
.cs-rma-summary-note { color: #9ca3af; font-size: 12px; }

.cs-rma-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.cs-rma-msg { font-size: 14px; }

/* 退换货记录卡片 */
.cs-rma-card { margin-bottom: 18px; }
.cs-rma-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid #f1f3f6; background: #fafbfc;
  border-radius: 12px 12px 0 0;
}
.cs-rma-no { font-weight: 700; }
.cs-rma-ordno { color: #6b7280; font-size: 13px; margin-left: 10px; }
.cs-rma-type-tag {
  display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px;
  background: #eff4ff; color: #2f6fed; font-size: 12px; font-weight: 600;
}

/* 状态时间轴 */
.cs-rma-timeline {
  display: flex; align-items: flex-start; padding: 18px 16px 6px;
  overflow-x: auto;
}
.cs-rma-step {
  position: relative; flex: 1 1 0; min-width: 72px; text-align: center;
  padding-top: 22px; font-size: 13px; color: #9ca3af;
}
.cs-rma-step::before, .cs-rma-step::after {
  content: ''; position: absolute; top: 7px; height: 2px; background: #e5e7eb;
}
.cs-rma-step::before { left: 0;  right: 50%; }
.cs-rma-step::after  { right: 0; left: 50%; }
.cs-rma-step:first-child::before { display: none; }
.cs-rma-step:last-child::after    { display: none; }
.cs-rma-step-done::before,
.cs-rma-step-done::after,
.cs-rma-step-active::before { background: #2f6fed; }
.cs-rma-step-dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #e5e7eb; border: 2px solid #fff; box-shadow: 0 0 0 1px #e5e7eb;
}
.cs-rma-step-done .cs-rma-step-dot { background: #2f6fed; box-shadow: 0 0 0 1px #2f6fed; }
.cs-rma-step-active { color: #2f6fed; font-weight: 700; }
.cs-rma-step-active .cs-rma-step-dot { background: #2f6fed; box-shadow: 0 0 0 3px rgba(47,111,237,.2); }
.cs-rma-step-todo { color: #9ca3af; }
.cs-rma-step-terminal {
  flex: 0 0 auto; margin: 0 auto; padding: 8px 18px;
  color: #ef4444; font-weight: 700; background: #fef2f2; border-radius: 10px;
}
.cs-rma-step-terminal::before, .cs-rma-step-terminal::after { display: none; }
.cs-rma-step-label { display: block; line-height: 1.3; }
.cs-rma-step-sub { display: block; color: #9ca3af; font-size: 11px; margin-top: 2px; }

/* 商品清单（mini） */
.cs-rma-items-mini { padding: 4px 18px 0; }
.cs-rma-mini-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px dashed #eef1f4; font-size: 14px;
}
.cs-rma-mini-item:last-child { border-bottom: none; }
.cs-rmi-title { font-weight: 600; flex: 1 1 auto; word-break: break-word; }
.cs-rmi-qty { color: #6b7280; }

.cs-rma-refund { padding: 10px 18px 0; font-size: 14px; color: #6b7280; }
.cs-rma-refund b { color: #16a34a; font-size: 16px; }
.cs-rma-addr, .cs-rma-track, .cs-rma-reason { padding: 6px 18px; font-size: 13px; color: #6b7280; }
.cs-rma-reason { color: #475569; }

.cs-rma-card-foot {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 16px;
  border-top: 1px solid #f1f3f6; margin-top: 8px;
}
.cs-rma-cancel-msg { font-size: 13px; }

/* 订单卡片内的「申请退换货」入口 */
.cs-order-rma-link { margin-left: 10px; }