/* ============================================================
   LAKEFOX — customer.css
   客户账号页（登录/注册/账户/订单/地址/激活/重置）— 由 sections/main-*.liquid 自链引入
   品牌适配：全部令牌取自 base.css（--space-* / --radius-* / --shadow-* / 品牌 11 色 / scheme --color-*）
   类名：.lf-customer BEM（§9 lf- 前缀）；按钮复用 base.css 的 .lf-btn / .lf-btn--primary / .lf-btn--secondary
   对比度决策（§2.10 实测表）：
     - 正文 --text-primary #15211F on 白/暖灰卡 ≈13~14.7:1 ✓
     - 辅助/占位 --text-secondary #5F6A6E on 白 ≈4.68:1 ✓（≥4.5 小字门槛）
     - 链接 --acc #C8432B on 白 ≈6.3:1 ✓（金 #C8432B ≈2.9:1 ✗ 禁做链接色）
     - 徽章 --dark #0B1A1D on 金浅底（gold 16% 混暖灰）≈6.8:1 ✓
     - 主按钮 .lf-btn--primary 金底深字 ≈6.9:1 / 次按钮 .lf-btn--secondary 砖红底白字 ≈5.7:1（base.css 已实现）
  触控：输入框 min-height 44px；链接可点区 ≥44px（§2 touch-target-size）
  RTL：逻辑属性（padding-inline / text-align: start / 逻辑 margin）
  移动端订单表：块化 + data-label 前置（禁止横向滚动 §6）
  ============================================================ */

.lf-customer {
  display: flex;
  justify-content: center;
  padding-block: var(--section-pad); /* 区块垂直节奏对齐 .lf-container 体系（原 var(--space-12) 硬值 48px → section-pad 同值） */
  padding-inline: var(--space-6);
  /* 容器化：原为全主题唯一不走 .lf-container 体系的页面，超宽屏内容贴边、留白割裂；
     此处值对齐 .lf-container 契约（max-width + margin-inline: auto），不自引类（纯 CSS 对齐） */
  max-width: var(--page-width);
  margin-inline: auto;
}

.lf-customer__card {
  /* 对齐 base.css §7b .lf-card 契约：bg/border/radius/shadow 逐项核对一致（值对齐，不加类——
     宽窄两档 max-width 由 --wide 策略控制，与 .lf-card 的尺寸无关） */
  width: 100%;
  max-width: 34rem; /* 登录/注册/激活/重置：窄卡 */
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-card-background, var(--soft));
  border: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
  box-shadow: var(--shadow-card);
}

/* 账户/订单/地址：宽卡容纳表格与地址网格 */
.lf-customer--wide .lf-customer__card {
  max-width: 56rem;
}

.lf-customer__title {
  margin-block-end: var(--space-6);
  font-size: var(--text-h3); /* 窄卡片语境显式降档：原 clamp(1.375rem, 1.125rem + 0.5vw, 1.75rem) 与 --text-h3 值等价 */
  font-weight: 700;
  color: var(--color-foreground, var(--text-primary));
  text-align: center;
}

.lf-customer__subtitle {
  margin-block: var(--space-6) var(--space-4);
  font-size: var(--text-6);
  font-weight: 600;
  color: var(--color-foreground, var(--text-primary));
}

.lf-customer__welcome {
  margin-block-end: var(--space-4);
  font-size: var(--text-4);
  color: var(--color-text-secondary, var(--text-secondary));
  text-align: center;
}

/* ---------- 表单字段（§5.3 低摩擦：可见 label + 必填标记，禁 placeholder 当 label） ---------- */
.lf-customer__field {
  margin-block-end: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lf-customer__label {
  /* 对齐 base.css §7b .lf-label 契约：字号 text-3 / 字重 600（原 500 越档）/ 前景色 + scheme 回退 /
     margin-block-end space-2；客户页模板结构复杂（字段 flex gap 自带 label→input 间距），采用值对齐而非类替换 */
  font-size: var(--text-3);
  font-weight: 600;
  color: var(--color-foreground, var(--text-primary));
  margin-block-end: var(--space-2);
}

.lf-customer__input {
  /* 对齐 base.css §7b .lf-input 契约：font-size text-5（15→16px，防 iOS 聚焦缩放）/ line-height leading-snug */
  width: 100%;
  min-height: 44px; /* 触摸目标（§2 touch-target-size） */
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-radius: var(--radius-base);
  border: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.16));
  background: var(--color-background, var(--bg-white));
  font-family: inherit;
  font-size: var(--text-5);
  line-height: var(--leading-snug);
  color: var(--color-foreground, var(--text-primary));
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.lf-customer__input::placeholder {
  color: var(--color-text-muted, var(--text-secondary)); /* ≈4.68:1 ✓ */
}

.lf-customer__input:focus-visible {
  /* 对齐 .lf-input 契约的金边 + 金 25% 环；保留 outline 增强（主环 + 软化晕），值全部令牌化 */
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent);
}

/* 表单内链接（如 Forgot password?）：可点区 ≥44px */
.lf-customer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  align-self: flex-start;
  font-size: var(--text-2);
  color: var(--acc); /* ≈6.3:1 ✓（金 2.9:1 ✗ 禁） */
  text-decoration: none;
}

.lf-customer__link:hover {
  text-decoration: underline;
}

.lf-customer__alt {
  margin-block-start: var(--space-4);
  font-size: var(--text-3);
  color: var(--color-text-secondary, var(--text-secondary));
  text-align: center;
  display: flex; /* CB-1：引导句与入口链接同行垂直居中（flex 后 text-align 由 justify-content 接管） */
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.lf-customer__alt a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* CB-1：触达契约 ≥44px（与 .lf-customer__link 同规格；原 inline 15px 行框不可点按） */
  padding-inline: var(--space-1);
  color: var(--acc);
  font-weight: 400; /* 正文链接：原 500 实际渲染即 400（继承），零视觉变化，显式声明 */
  text-decoration: none;
}

.lf-customer__alt a:hover {
  text-decoration: underline;
}

/* ---------- 按钮布局（颜色变体在 base.css §5.1，此处只补布局） ---------- */
.lf-customer__btn-block {
  width: 100%;
  margin-block-start: var(--space-2);
}

.lf-customer__btn-sm {
  min-height: 44px;
  padding-inline: var(--space-4);
  font-size: var(--text-2);
}

/* input[type=submit] 复用 .lf-btn 时消除默认外观 */
.lf-customer input.lf-btn {
  appearance: none;
}

/* ---------- 错误与状态（§5.3：错误文字砖红，role=alert 播报） ---------- */
.lf-customer__errors,
.lf-customer__cancelled {
  margin-block-end: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-base);
  background: var(--bg-white); /* color-mix 兜底 */
  background: color-mix(in srgb, var(--acc) 8%, var(--color-background, var(--bg-white)));
  border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  color: var(--acc); /* ≈6.3:1 on 浅底 ✓ */
  font-size: var(--text-3);
}

.lf-customer__errors ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lf-customer__meta {
  margin-block-end: var(--space-4);
  font-size: var(--text-3);
  line-height: var(--leading-relaxed);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary, var(--text-secondary));
}

/* ---------- 操作按钮行 ---------- */
.lf-customer__actions {
  margin-block-start: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- 订单表（§6 禁横向滚动 → 移动端块化 + data-label 前置） ---------- */
.lf-customer__table-wrap {
  width: 100%;
}

.lf-customer__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-3);
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground, var(--text-primary));
}

.lf-customer__table th,
.lf-customer__table td {
  padding: var(--space-3);
  text-align: start; /* RTL 自动镜像 */
  border-block-end: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.1));
}

.lf-customer__table th {
  font-weight: 600;
  color: var(--color-text-secondary, var(--text-secondary));
}

.lf-customer__table tfoot td {
  font-weight: 600;
  border-block-end: 0;
}

.lf-customer__table a {
  color: var(--acc);
  text-decoration: none;
}

.lf-customer__table a:hover {
  text-decoration: underline;
}

.lf-customer__empty {
  padding-block: var(--space-6);
  color: var(--color-text-muted, var(--text-secondary));
}

/* 移动端：表格块化（窄列转行，thead 隐藏） */
@media (max-width: 767.98px) {
  .lf-customer__table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .lf-customer__table,
  .lf-customer__table tbody,
  .lf-customer__table tr,
  .lf-customer__table td {
    display: block;
    width: 100%;
  }

  .lf-customer__table tr {
    padding-block: var(--space-2);
  }

  .lf-customer__table td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-2);
    border-block-end: 0;
  }

  .lf-customer__table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-secondary, var(--text-secondary));
  }

  .lf-customer__table td:has(a) {
    justify-content: flex-start;
  }

  .lf-customer__table td:has(a)::before {
    margin-inline-end: auto;
  }

  .lf-customer__table tfoot {
    display: block;
  }

  .lf-customer__table tfoot tr {
    display: flex;
    justify-content: space-between;
  }

  .lf-customer__table tfoot td {
    border-block-start: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.1));
  }
}

/* ---------- 地址簿 ---------- */
.lf-customer__addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

.lf-customer__address {
  padding: var(--space-5);
  border-radius: var(--radius-base);
  border: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
  background: var(--color-background, var(--bg-white));
  font-size: var(--text-3);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary, var(--text-secondary));
}

.lf-customer__address-label {
  margin-block-end: var(--space-2);
  font-weight: 600;
  color: var(--color-foreground, var(--text-primary));
}

.lf-customer__badge {
  /* 对齐 base.css §7b .lf-badge 契约：胶囊 + 加粗 + 紧凑行高；padding 竖档 2px → var(--space-1)
     （全仓唯一 2px 间距离档修复），字号收敛到 --text-1 */
  display: inline-block;
  margin-block-start: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--soft); /* color-mix 兜底 */
  background: color-mix(in srgb, var(--acc) 16%, var(--soft));
  color: var(--dark); /* ≈6.8:1 ✓（金底深字） */
  font-size: var(--text-1);
  font-weight: 600;
}

.lf-customer__address-actions {
  margin-block-start: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lf-customer__address-actions form {
  margin: 0;
}

.lf-customer__form {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.1));
}

@media (min-width: 768px) {
  .lf-customer {
    padding-block: var(--section-pad-lg); /* 72px 桌面端（对齐 .lf-container 体系节奏） */
  }

  .lf-customer__addresses {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 分页 ----------
   base.css §7b 已有全局分页全套定义（类契约与 snippets/pagination.liquid 的 BEM 一致），
   本地定义删除（原为 news-list 之外的第二套实现，链接色 secondary→foreground、间距微调，属有意统一到全局契约） */

/* ---------- 动效降级（§7.4 + base.css §12 双层兜底） ---------- */
@media (prefers-reduced-motion: reduce) {
  .lf-customer__input {
    transition: none;
  }
}