/*
 * 子比下载表 - 前台下载表样式
 * Copyright (C) 2026 依岸归
 * Licensed under GNU GPL v2 or later
 * https://nav.hoarfall.cn/
 * 子比下载表 fp:99a8a96f4677efac
 */

.hfdl-box {
  margin: 20px 0;
}

.hfdl-box__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hfdl-box__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

.hfdl-box__meta {
  font-size: 13px;
  color: var(--muted-2-color, #999);
}

.hfdl-box__notice {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  background: rgba(24, 95, 165, 0.08);
  color: #185fa5;
}

/* 表格容器：窄屏可横向滚动，不挤压列 */
.hfdl-tablewrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hfdl-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
}

.hfdl-table th,
.hfdl-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.hfdl-table thead th {
  font-weight: 500;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.02);
}

.hfdl-table tbody tr:last-child td {
  border-bottom: none;
}

.hfdl-table .hfdl-col-no {
  width: 52px;
  color: var(--muted-2-color, #999);
}

.hfdl-table .hfdl-col-name {
  min-width: 160px;
}

.hfdl-table .hfdl-col-size,
.hfdl-table .hfdl-col-pan,
.hfdl-table .hfdl-col-gate,
.hfdl-table .hfdl-col-cost {
  white-space: nowrap;
}

.hfdl-table .hfdl-col-act {
  width: 120px;
  text-align: center;
}

/*
 * 网盘 / 类型 / 费用三列内容居中（v0.5.4，客户第 3 轮需求）。
 * 这三列都是短内容（徽标 / 金额），左对齐时表格右侧看着很散；
 * 序号、文件名、大小、操作列保持原样不动。
 * 权重说明：本选择器 (0,2,0) 高于上面 `.hfdl-table th, .hfdl-table td` (0,1,1)，
 * 放在任何位置都能生效 —— 但仍与其它列规则放在一起，便于日后统一调整。
 */
.hfdl-table .hfdl-col-pan,
.hfdl-table .hfdl-col-gate,
.hfdl-table .hfdl-col-cost {
  text-align: center;
}

.hfdl-name {
  word-break: break-all;
}

.hfdl-pwd,
.hfdl-note {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 18px;
  vertical-align: middle;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted-2-color, #888);
}

.hfdl-note {
  background: rgba(186, 117, 23, 0.12);
  color: #854f0b;
}

/* 网盘与权限类型徽标 */
.hfdl-pan,
.hfdl-gate {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}

.hfdl-pan {
  background: rgba(24, 95, 165, 0.1);
  color: #185fa5;
}

/* 类型徽标（.hfdl-gate--*）的配色统一由下方的「类型 / 按钮配色（客户定稿）」定义。
   此处原先还有一份早期版本的同名规则，属性被那份完全覆盖、纯属死代码，已删除，
   免得以后改配色时改错地方。 */

.hfdl-muted {
  font-size: 13px;
  color: var(--muted-2-color, #999);
}

.hfdl-btn {
  min-width: 88px;
}

.hfdl-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.hfdl-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 100000;
  transform: translateX(-50%);
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
}

@media screen and (max-width: 768px) {
  .hfdl-table th,
  .hfdl-table td {
    padding: 9px 10px;
    font-size: 13px;
  }

  .hfdl-table .hfdl-col-act {
    width: auto;
  }

  .hfdl-btn {
    min-width: 76px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .hfdl-package {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .hfdl-package__side {
    justify-content: flex-end;
  }
}

/* ═══════════════════════════════════════════════════════════
 * 类型 / 按钮配色（客户定稿）
 *   免费=黑  积分=蓝  金额=红  一级会员=金  二级会员=粉
 * 浅色模式用「浅底 + 深字」，深色模式由主题变量自动反色时仍保证对比度
 *
 * 粉色是 v0.5.3 客户指定：「更改一下 svip 的颜色 改为粉红色」
 * （此前 SVIP 用的是紫色 #534ab7，已废弃；金色一级会员沿用旧值）
 * ═══════════════════════════════════════════════════════════ */

/* 类型徽标 */
.hfdl-gate--free {
  background: rgba(0, 0, 0, 0.07);
  color: #2c2c2a;
}

.hfdl-gate--points {
  background: rgba(24, 95, 165, 0.12);
  color: #0c447c;
}

.hfdl-gate--price {
  background: rgba(179, 45, 46, 0.12);
  color: #a32d2d;
}

.hfdl-gate--vip {
  background: rgba(191, 144, 0, 0.16);
  color: #8a5a00;
}

.hfdl-gate--svip {
  background: rgba(216, 27, 122, 0.13);
  color: #c2185b;
}

/* 深色模式：底色加深、字变浅（跟随主题切换） */
@media (prefers-color-scheme: dark) {
  .hfdl-gate--free {
    background: rgba(255, 255, 255, 0.12);
    color: #eee;
  }

  .hfdl-gate--points {
    background: rgba(133, 183, 235, 0.2);
    color: #b5d4f4;
  }

  .hfdl-gate--price {
    background: rgba(240, 149, 149, 0.2);
    color: #f7c1c1;
  }

  .hfdl-gate--vip {
    background: rgba(250, 199, 117, 0.2);
    color: #fac775;
  }

  .hfdl-gate--svip {
    background: rgba(244, 143, 193, 0.22);
    color: #f7a8cd;
  }
}

/* 操作按钮：统一宽度与行高，文案长短不影响卡片大小 */
.hfdl-btn {
  min-width: 108px;
  text-align: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.hfdl-btn--free {
  background: #2c2c2a;
  color: #fff;
}

.hfdl-btn--free:hover,
.hfdl-btn--free:focus {
  background: #444441;
  color: #fff;
  box-shadow: none;
}

.hfdl-btn--points {
  background: #185fa5;
  color: #fff;
}

.hfdl-btn--points:hover,
.hfdl-btn--points:focus {
  background: #0c447c;
  color: #fff;
  box-shadow: none;
}

.hfdl-btn--price {
  background: #a32d2d;
  color: #fff;
}

.hfdl-btn--price:hover,
.hfdl-btn--price:focus {
  background: #791f1f;
  color: #fff;
  box-shadow: none;
}

.hfdl-btn--vip {
  background: #c98f00;
  color: #fff;
}

.hfdl-btn--vip:hover,
.hfdl-btn--vip:focus {
  background: #8a5a00;
  color: #fff;
  box-shadow: none;
}

.hfdl-btn--svip {
  background: #d81b7a;
  color: #fff;
}

.hfdl-btn--svip:hover,
.hfdl-btn--svip:focus {
  background: #a3145c;
  color: #fff;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
 * 费用列：文字颜色跟随该行的权限类型（v0.5.3 客户要求）
 *   「费用的字体颜色与对应的类型颜色保持一致，
 *     例如积分 10积分（10积分都是蓝色）」
 * 数字与单位一并上色（.hfdl-cost-unit 是 <em>，继承父级 color），
 * 折扣时的划线原价也随类型色（只是多了 opacity 变淡）。
 *
 * ⚠️ 用 data-gate 属性而不是 class：后台 admin.css 里的
 *    .hfdl-cost--points / .hfdl-cost--price 是**输入框容器**，
 *    前端再用同名类会互相干扰、以后改动容易踩。
 * ═══════════════════════════════════════════════════════════ */
.hfdl-cost-flag {
  white-space: nowrap;
}

.hfdl-cost-val[data-gate="free"] {
  color: #2c2c2a;
}

.hfdl-cost-val[data-gate="points"] {
  color: #0c447c;
}

.hfdl-cost-val[data-gate="price"] {
  color: #a32d2d;
}

.hfdl-cost-val[data-gate="vip"] {
  color: #8a5a00;
}

.hfdl-cost-val[data-gate="svip"] {
  color: #c2185b;
}

@media (prefers-color-scheme: dark) {
  .hfdl-cost-val[data-gate="free"] {
    color: #eee;
  }

  .hfdl-cost-val[data-gate="points"] {
    color: #b5d4f4;
  }

  .hfdl-cost-val[data-gate="price"] {
    color: #f7c1c1;
  }

  .hfdl-cost-val[data-gate="vip"] {
    color: #fac775;
  }

  .hfdl-cost-val[data-gate="svip"] {
    color: #f7a8cd;
  }
}

/* 积分单位：数字大、单位小，且把两者间距收紧（客户要求「积分间距有点大」）。
   ⚠️ 必须写 font-style: normal —— 标签用的是 <em>，浏览器默认就渲染成斜体，
   只改字号/字重会漏掉倾斜。 */
.hfdl-cost-unit {
  margin-left: 1px;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
}

.hfdl-cost-origin {
  opacity: 0.55;
  margin-right: 4px;
  white-space: nowrap;
}

.hfdl-cost-now {
  font-weight: 500;
  white-space: nowrap;
}

/* 打包总链接卡片 */
.hfdl-package {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(24, 95, 165, 0.22);
  background: rgba(24, 95, 165, 0.06);
}

.hfdl-package__main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.hfdl-package__tag {
  flex: none;
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px;
  background: #185fa5;
  color: #fff;
}

.hfdl-package__side {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.hfdl-package__cost {
  font-size: 14px;
  white-space: nowrap;
}

/*
 * 备注 / 描述（F3）：独占一整行，不与名称、网盘、类型、费用、按钮挤在同一个
 * flex 行里 —— 客户原话「描述放到下一行吧，不要一行挤在一起」。
 * flex-basis:100% + order:3 保证它一定落到第二行；分隔线把「上面是这个包的
 * 身份信息、下面是它的补充说明」这件事画清楚。
 */
.hfdl-package__note {
  flex: 0 0 100%;
  order: 3;
  margin: 0;
  padding-top: 9px;
  border-top: 1px dashed rgba(24, 95, 165, 0.28);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-2-color, #7a7a7a);
  word-break: break-word;
}

/* 隐藏的会员购买入口：只作为主题 pay.js 的触发器存在，永远不参与排版 */
.hfdl-vip-trigger {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
 * D2 —— 「今日下载次数已用完」引导弹窗
 *   按钮文案不变，点击后弹这里；配色用主题变量，暗色模式自动跟随。
 * ═══════════════════════════════════════════════════════════ */
.hfdl-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.5);
}

.hfdl-modal__box {
  width: 100%;
  max-width: 340px;
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: var(--main-bg-color, #fff);
  color: var(--main-color, #2c2c2a);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.hfdl-modal__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.hfdl-modal__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
}

.hfdl-modal__acts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.hfdl-modal__btn {
  min-width: 84px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  color: #fff;
  background: #185fa5;
}

.hfdl-modal__btn--gold {
  background: #c98f00;
}

.hfdl-modal__btn--purple {
  background: #534ab7;
}

.hfdl-modal__btn--ghost {
  background: rgba(0, 0, 0, 0.07);
  color: inherit;
}

.hfdl-modal__btn:hover,
.hfdl-modal__btn:focus {
  opacity: 0.88;
}

/* ═══════════════════════════════════════════════════════════
 * 解压密码徽标
 *   前台默认一个字都不输出（防止没取到链接的人直接看到密码），
 *   只有取链成功后由 frontend.js 插入。绿色 = 「这是给你的额外信息」。
 * ═══════════════════════════════════════════════════════════ */
.hfdl-unzip {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 18px;
  vertical-align: middle;
  background: rgba(30, 130, 60, 0.12);
  color: #1b6b3a;
}

/* 表格行：解压密码 / 提取码另起一整行，紧贴上一行，不与文件名挤在一起。
   v0.5.5 起这一行是「取链后才揭晓的密码」共用容器：可能只有提取码、
   可能只有解压密码、也可能两个都有 —— 所以给每枚徽标都留右侧间距。 */
.hfdl-unzip-tr > td {
  padding-top: 0;
  padding-bottom: 12px;
}

.hfdl-unzip-tr .hfdl-pwd,
.hfdl-unzip-tr .hfdl-unzip {
  margin-left: 0;
  margin-right: 6px;
}

@media (prefers-color-scheme: dark) {
  .hfdl-unzip {
    background: rgba(120, 220, 160, 0.2);
    color: #a8e6c0;
  }
}