/* ==========================================================================
   site.css —— 所有皮肤共用的底座
   1) 语义色板：下面的变量值就是默认皮肤(als)的观感。任何主题只要在自己的
      theme.css 里覆盖同名变量，无需碰视图即可换肤。
   2) 语义类：视图里不再出现硬编码颜色，颜色一律经变量走这里；
      留下的内联 style 只负责尺寸与间距（与配色无关）。
   3) 通用修补：layui 表格描边、徽章尺寸等与配色无关的修正。
   ========================================================================== */

:root {
  /* 底色与表面 */
  --c-bg: #1a1a2e;
  --c-surface: #22223a;
  --c-surface-head: #1f1f36;
  --c-surface-2: #2d2d2d;
  --c-surface-hover: #2d2d4a;

  /* 文字 */
  --c-text: #e0e0e0;
  --c-text-2: #c8c8d0;
  --c-text-muted: #888888;

  /* 描边 */
  --c-line: #3a3a3a;
  --c-line-strong: #2a2a2a;
  --c-line-soft: #33334d;

  /* 主题色 */
  --c-brand: #667eea;
  --c-brand-2: #764ba2;
  --c-accent: #ff9800;
  --c-hot: #ff5722;
  --c-success: #4caf50;
  --grad-brand: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%);

  /* 危险色的浅底：购物车「已下架」提示条用它铺底，浅色皮肤需同步换成深色低透明 */
  --c-hot-soft: rgba(255, 87, 34, 0.08);

  /* 内容区角标（熱銷 / 熱門 / 分類）的底色。layui 默认的 #ff5722 / #ffb800 /
     #1e9fff 配白字只有 3.16 / 1.73 / 2.82 : 1，浅色皮肤下要换成深一档的同色系；
     熱銷 直接复用 --c-hot，与「立即購買」按钮、购物车角标同源。
     -ink 是角标上的字色：亮黄底必须配深字，暗底配白字 */
  --c-tag-popular: #ffb800;
  --c-tag-popular-ink: #ffffff;
  --c-tag-info: #1e9fff;

  /* 页脚是与页面底色无关联的一块独立色带，单独给一组变量，
     否则「页脚深底浅字」与「页面浅底深字」会互相牵制 */
  --c-footer-bg: #1a1a2e;
  --c-footer-text: #e0e0e0;
  --c-footer-accent: #ff9800;

  /* 订单/支付状态色板：视图只下发语义名（pending/info/shipped/done/cancelled/unknown），
     具体色值由皮肤决定，浅色皮肤才能换成对比度达标的深色 */
  --c-status-pending: #ff9800;
  --c-status-info: #2196f3;
  --c-status-shipped: #667eea;
  --c-status-done: #4caf50;
  --c-status-cancelled: #ff5722;
  --c-status-unknown: #888888;
}

html {
  font-size: 14px;
  background: var(--c-bg) !important;
}

body {
  background: var(--c-bg) !important;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---------- 语义类：文字 ---------- */

/* 正文与强调文字 */
.text-strong { color: var(--c-text); }

/* 富文本正文（文章正文、商品描述）：比次要文字亮一档，保证长文可读 */
.text-body { color: var(--c-text-2); }

/* 次要说明文字：时间、编号、单位、占位提示 */
.text-muted { color: var(--c-text-muted); }

.text-brand { color: var(--c-brand); }

.text-success { color: var(--c-success); }

/* 危险/失效态文字：购物车删除按钮、「已下架」标签与提示条共用 */
.text-danger { color: var(--c-hot); }

/* 金额：强调色 + 大号加粗，购物车/结算/订单三处共用 */
.text-amount {
  color: var(--c-accent);
  font-size: 22px;
  font-weight: 700;
}

/* ---------- 语义类：图标 ---------- */

.icon-muted { color: var(--c-text-muted); }

.icon-hot { color: var(--c-hot); }

/* ---------- 语义类：标题 ---------- */

/* 板块/页面标题：统一为「左侧 4px 色条 + 22px 半粗」，
   色条颜色按语义分档（品牌色 / 促销红 / 强调橙） */
.page-title {
  margin: 0 0 24px;
  padding-left: 14px;
  color: var(--c-text);
  font-size: 22px;
  font-weight: 600;
  border-left: 4px solid var(--c-brand);
}

.page-title--hot { border-left-color: var(--c-hot); }

.page-title--accent { border-left-color: var(--c-accent); }

/* 标题下的说明行，缩进与标题文字对齐 */
.page-subtitle {
  margin: 0 0 24px 18px;
  color: var(--c-text-muted);
  font-size: 14px;
}

/* 面板内的小标题 */
.panel-title {
  margin: 0 0 18px;
  color: var(--c-text);
  font-size: 16px;
  font-weight: 600;
}

/* ---------- 语义类：容器与分隔 ---------- */

/* 面板表面：只管底色与圆角，内边距由各页面自行决定 */
.surface {
  background: var(--c-surface);
  border-radius: 8px;
}

.line-top { border-top: 1px solid var(--c-line-soft); }

.line-bottom { border-bottom: 1px solid var(--c-line-soft); }

/* 购物车「已下架」提示条：整条外观由本类承担，JS 只负责建节点与文案。
   此前这一整组样式（含 #ff5722 与 rgba(255,87,34,.08)）写死在 cart-page.js 里，
   浅色皮肤下橙色字对比度只有 2.8:1，且改皮肤必须动 JS */
.notice-danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--c-hot);
  border-radius: 8px;
  background: var(--c-hot-soft);
  color: var(--c-hot);
  font-size: 14px;
}

/* 条内的「移除已下架产品」按钮：描边与文字跟随 currentColor，无需再写颜色 */
.notice-danger button {
  padding: 6px 12px;
  min-height: 36px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* 分类磁贴：整块可点、悬停换底色。
   原先是靠标签上的 onmouseover/onmouseout 写死两个暗色，换皮肤会串色 */
.category-tile {
  display: block;
  padding: 24px 16px;
  background: var(--c-surface);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s;
}

.category-tile:hover { background: var(--c-surface-hover); }

/* 磁贴上的图标行。统一钉成 font-size 高的块，而不是让它按各字体的行盒自然排：
   字体图标（<i>）在 28px 字号下是 28px，而 emoji 🌐 的字体行盒是 37.33px，
   并排的磁贴会因为这一行高矮不同，把卡片撑成一高一低（实测 155.58 vs 141.85）、
   里面的标题与副文案也不在同一水平线 */
.category-tile-icon {
  display: block;
  height: 28px;
  line-height: 28px;
  font-size: 28px;
}

/* 主题设置页：当前生效皮肤的那张磁贴。用 inset 阴影而非 border 勾勒——
   磁贴的盒模型已由 .category-tile 定好，加 border 会把网格挤偏 2px */
.category-tile--active { box-shadow: inset 0 0 0 2px var(--c-brand); }

/* ---------- 语义类：按钮 ---------- */

/* 主按钮：在 layui-btn 之上套一层全站统一的品牌渐变 */
.btn-primary {
  background: var(--grad-brand);
  border: none;
}

/* ---------- 语义类：商品卡 ---------- */

/* 商品无图时的占位块，尺寸仍由 .product-img 决定 */
.product-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  background: var(--c-surface);
}

/* ---------- 语义类：页脚 ---------- */

.footer-group-title {
  margin-bottom: 15px;
  padding-bottom: 8px;
  color: var(--c-footer-accent);
  font-weight: 600;
  border-bottom: 2px solid var(--c-footer-accent);
}

.footer-link {
  color: var(--c-footer-text);
  opacity: 0.9;
  text-decoration: none;
  transition: opacity 0.3s;
}

.footer-link:hover { opacity: 1; }

/* ---------- 通用修补 ---------- */

/* 统一表格样式 - 较暗边框颜色 */
.layui-table {
  border-collapse: separate;
  border-spacing: 0;
}

.layui-table th,
.layui-table td {
  border-color: var(--c-line-strong) !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.layui-table thead tr,
.layui-table tbody tr {
  border-bottom: 1px solid var(--c-line-strong) !important;
}

.layui-table tbody tr:last-child td {
  border-bottom: none !important;
}

.layui-table th:first-child,
.layui-table td:first-child {
  border-left: none !important;
}

.layui-table th:last-child,
.layui-table td:last-child {
  border-right: none !important;
}

/* 购物车表格：layui 默认是浅色表格，这里跟随主题表面色。
   原先是写在 Cart/Index.cshtml 的 <style> 里，颜色写死在视图上，换皮肤就会串色 */
#cart-content .layui-table,
#cart-content .layui-table th,
#cart-content .layui-table td {
  background: var(--c-surface);
  color: var(--c-text);
}

#cart-content .layui-table thead tr {
  background: var(--c-surface-head);
}

/* 表格内的语义文字类要压过上面的 #cart-content .layui-table td
   （ID + 类 + 元素，权重高于单个 .text-muted），否则 JS 给「已下架」行
   单元格加的 .text-muted 不生效，弱化效果消失 */
#cart-content .layui-table td.text-muted {
  color: var(--c-text-muted);
}

/* 文章正文由后端 CMS 下发，这里只保证不撑破容器、链接跟随主题色 */
.article-body img { max-width: 100%; height: auto; }

.article-body a { color: var(--c-brand); }

.article-body p { margin: 0 0 14px; }

.article-body table { max-width: 100%; }

/* 统一layui-badge高度为30px（内容区的「熱銷 / 熱門 / 分類」标签用）；
   页头购物车角标 #cart-badge 需要小尺寸贴角，故排除在外 */
.layui-badge:not(#cart-badge) {
  height: 30px !important;
  line-height: 30px !important;
  padding: 0 24px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* 内容区角标与危险按钮的底色交由皮肤决定。
   layui 用 .layui-bg-red{background-color:#ff5722!important} 这种单类选择器写死了
   三个色值，配白字只有 3.16 / 1.73 / 2.82 : 1；这里用「两个类」提高权重压过它，
   als 取原值观感不变，zen 换成同色系的深调。熱銷 与危险按钮共用 --c-hot */
.layui-badge.layui-bg-red,
.layui-btn-danger {
  background-color: var(--c-hot) !important;
}

.layui-badge.layui-bg-orange {
  background-color: var(--c-tag-popular) !important;
  color: var(--c-tag-popular-ink) !important;
}

.layui-badge.layui-bg-blue {
  background-color: var(--c-tag-info) !important;
}

/* 导航「当前项」的 3px 指示条（顶部主导航与移动端底栏共用）。
   layui 在 .layui-nav .layui-this:after,.layui-nav-bar 上写死了 #16b777 青绿，
   是全站唯一残留的冷色；这里用同名选择器 + 后加载顺序覆盖成主题色。
   该处 layui 未使用 !important，故无需 !important 对抗 */
.layui-nav .layui-this::after,
.layui-nav-bar {
  background-color: var(--c-brand);
}

/* ---------- 页头语言下拉 ----------
   支持两种以上语言后，「点一下切到另一种语言」的单链接会变成单向门：
   葡语 / 匈语访客从页头点进去就再也回不到自己的语言。改成列出全部语言的下拉。
   用原生 <details> 收放，不依赖 JS；三套皮肤共用这份样式，配色一律走语义变量。
   选择器带 .user-info 前缀是为了压过各皮肤 theme.css 里的 .user-info a（同为 0,2,1
   起算，site.css 先加载，只有把权重提到 0,3,1 才能在级联里站住） */
.user-info .lang-switch {
  position: relative;
  display: inline-block;
}

.user-info .lang-switch > summary {
  /* 触发按钮不在 .user-info a 的范围内，字色要自己给：mahayana 的 body 字色是酒红，
     直接继承会在酒红页头上看不见 */
  color: var(--c-text);
  opacity: 0.9;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: opacity 0.3s;
}

/* 收起 summary 默认的三角标记（Chrome 走 ::-webkit-details-marker，标准见 ::marker） */
.user-info .lang-switch > summary::-webkit-details-marker { display: none; }
.user-info .lang-switch > summary::marker { content: ""; }

.user-info .lang-switch > summary:hover,
.user-info .lang-switch[open] > summary { opacity: 1; }

.user-info .lang-switch-menu {
  position: absolute;
  /* 面板与导航栏同处 .header-main 这个 sticky 堆叠上下文，z-index 要高过导航栏 */
  z-index: 1001;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.user-info .lang-switch-menu a {
  display: block;
  padding: 8px 14px;
  color: var(--c-text-2);
  opacity: 1;
  white-space: nowrap;
}

.user-info .lang-switch-menu a:hover {
  background: var(--c-surface-hover);
  color: var(--c-text);
}

/* ---------- 语言设置页的语言卡片 ----------
   卡片文案是「自称（当前界面语言的译名）」，可能折成两行（如「Magyar（匈牙利語）」）。
   用 flex 让同一行的卡片等高、并把「点击应用 / 使用中」压到卡片底部，
   否则折行的那张比同伴高出整整一行，看起来像排版错位 */
.language-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* 浮动的列在 flex 行里改由 flex 布局接管（flex 项上的 float 会被忽略） */
.language-grid > [class*="layui-col-"] {
  display: flex;
}

/* 磁贴改成竖向 flex 容器：图标、名称、提示依次向下，并撑满列高。
   名称折行时，多出来的高度由提示文字的 margin-top:auto 吸收 */
.language-grid .category-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 译名整段落到第二行。卡片内容宽只有 127px，让「Magyar（匈牙利語）」自己折行
   会从括号中间断开（实测断成「Magyar（匈牙利」/「語）」，很难看） */
.language-grid-tile-localized {
  display: block;
}

.language-grid-tile-hint {
  margin-top: auto;
  padding-top: 4px;
}

/* ---------- 首页顯示方式設置頁：分類勾選 ---------- */
/* 用 flex + gap + flex-basis 排成響應式網格，比 layui-row/layui-col-mdX 更靈活：
   分類數量可變（1–24），無論幾個都能自動換行、保持一致的視覺節奏。 */
.home-settings-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.home-settings-category-grid > .home-category-tile {
  /* 桌面端最多 4 列；min-width 確保窄一點還能保持卡片最小可讀寬度 */
  flex: 1 1 calc(25% - 12px);
  min-width: 160px;
  cursor: pointer;
}

/* 平板：降到 3 列 */
@media (max-width: 992px) {
  .home-settings-category-grid > .home-category-tile {
    flex-basis: calc(33.333% - 10.666px);
  }
}

/* 手機：2 列，每列等寬 */
@media (max-width: 576px) {
  .home-settings-category-grid > .home-category-tile {
    flex-basis: calc(50% - 8px);
  }
}

/* 「使用中」的那一项：加粗 + 左侧一道主题色竖标记。
   不把字色直接换成 --c-brand：als 的 #667eea 落在面板底 #22223a 上只有 4.2:1，
   作为正文级文字不达 WCAG AA；竖标记是装饰，不受正文对比度约束 */
.user-info .lang-switch-menu a.is-current {
  color: var(--c-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c-brand);
}