/* 空状态 + 表单提交忙碌态（跨页面小组件，只含这两类规则，不含任何主题级样式）
   由 templates/_ui_feedback.html 引入；base.html 继承页与 home/aigc/error 等独立页都加载它。 */

.by-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.75rem 1rem;
  margin: 0.25rem 0 0.5rem;
  border: 1px dashed rgba(21, 101, 192, 0.28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(21, 101, 192, 0.035), rgba(21, 101, 192, 0.01));
  text-align: center;
}

.by-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.15rem;
  border-radius: 50%;
  background: rgba(21, 101, 192, 0.1);
  color: var(--by-accent, #1565c0);
  font-size: 1.15rem;
}

.by-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--by-ink, #1f2937);
}

.by-empty-hint {
  margin: 0;
  max-width: 34rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--by-muted, #6b7688);
}

.by-empty-action { margin-top: 0.5rem; }

/* 紧凑变体：卡片/侧栏里的小空位用（无虚线框、更矮） */
.by-empty--sm {
  padding: 0.9rem 0.5rem;
  border: 0;
  background: transparent;
  gap: 0.2rem;
}

.by-empty--sm .by-empty-ico { width: 36px; height: 36px; font-size: 0.95rem; }
.by-empty--sm .by-empty-title { font-size: 0.9rem; }

/* 提交忙碌态：按钮禁用 + 自带转圈（不依赖 FontAwesome/Bootstrap，独立页也能用） */
.by-submit-busy {
  opacity: 0.85;
  cursor: progress !important;
}

.by-spinner {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.4em;
  vertical-align: -0.08em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: by-spin 0.7s linear infinite;
}

@keyframes by-spin { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
  .by-empty { padding: 1.35rem 0.85rem; }
  .by-empty-ico { width: 40px; height: 40px; font-size: 1rem; }
  .by-empty-hint { font-size: 0.82rem; }
}

/* 手机端导航自动收起（由 _ui_feedback.html 的脚本切换 .by-nav-hidden） */
@media (max-width: 991.98px) {
  .navbar.by-nav-autohide { transition: transform 0.22s ease; will-change: transform; }
  .navbar.by-nav-autohide.by-nav-hidden { transform: translateY(-105%); }
}

/* 可访问性：触控目标 ≥44px（仅小屏或触摸设备生效，桌面保持紧凑观感）
   审计依据：价格表 .btn-sm 仅 40px 高、游戏价格页下单 chip 仅 30px 高。
   主题里对按钮高度有更高特异性的规则，所以这里只对 min-height 用 !important。 */
@media (max-width: 767.98px), (pointer: coarse) {
  .btn,
  .btn-sm,
  button.btn,
  a.btn,
  span.btn,
  .view-price-btn,
  .px-chip,
  .navbar-brand,
  .btn-logout,
  .dropdown-toggle { min-height: 44px !important; }

  /* span 型按钮（span.btn / 查看价格表）必须能撑起高度 */
  .btn,
  .btn-sm,
  span.btn,
  .view-price-btn,
  .px-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .px-chip {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar.by-nav-autohide { transition: none; }
  .by-spinner { animation-duration: 1.6s; }
}

/* ===== 页脚链接触控目标（2026-09-28 手机端体检发现）=====
   体检数据：首页/价格表/游戏页/发单页里，页脚链接可点区域仅 17~20px 高
   （如「打手列表 58x20」「常见问题 52x20」），手机上极易点偏，违反站内 ≥44px 标准。
   这里仅在手机/平板宽度下把它们撑到 44px，桌面端保持原样以免影响排版。 */
@media (max-width: 991.98px) {
    footer a,
    .footer a,
    .site-footer a,
    footer .nav-link,
    footer .list-inline-item a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }
}

/* ===== 手机端第二轮整改（2026-09-28 体检详查后）=====
   1) 正文小字下限 12px：实测 p.small.text-muted 落在 11.52px、span.flow-text 11px。
      根因是 Bootstrap .small=0.875em 叠加在已缩小的父级上。这里在手机端给一个 12px 下限。
   2) 块级链接触控目标：上一版只匹配 footer a，漏了内容区的块级链接
      （打手列表/大家评判/陪玩列表/陪玩价格 58x20、查看保障规则 84x19 等，共 12 处）。 */
@media (max-width: 991.98px) {
    p.small, .small, .flow-text { font-size: .75rem; }

    a.text-decoration-none {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===== 手机端第三轮（/customer 专项，2026-09-28）=====
   原因：templates/customer/price_table.html（价格表页）自带内联 <style>，
   同等 CSS 优先级下内联块晚于外部样式表生效，导致前两轮规则在那一页被覆盖。
   处理：用 !important 提到最高优先级；只抬高字号与触控高度，不改任何布局结构。 */
@media (max-width: 991.98px) {
    p.small, .small, .flow-text { font-size: .75rem !important; }

    /* 面包屑/提示条/行内列表里的链接：仅这三个安全容器，避免误伤正文中的行内链接 */
    .breadcrumb a,
    .alert-link,
    .list-inline a,
    .breadcrumb-item a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===== 手机端第四轮（2026-09-28 批量体检详查后）=====
   实测数据：
   - /player/notifications 301 处小字，全部是 span.badge.bg-secondary @9.84px（同一条规则可清零）
   - /aigc 57 处小字：div.label/.pc-index/.pc-kind/.pc-badge @9.5~10.5px、small @11.5px、无类名 span @11px
   - /about 4 处、/rules 3 处过小链接，父容器集中在 p.mb-1 / p.text-muted.small / li
   只抬高字号与触控高度，不改布局结构；选择器按实测类名/父容器精确命中，避免误伤正文行内链接。 */
@media (max-width: 991.98px) {
    span.badge, .badge { font-size: .75rem !important; }
    .label, .pc-index, .pc-kind, .pc-badge, small { font-size: .75rem !important; }

    p.mb-1 a,
    p.text-muted.small a,
    li a.text-muted,
    a.brand,
    .create-trigger,
    .prompt-close {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===== 手机端：打手工作台「我的任务」表限行（2026-09-28 体检，35 轮下钻定位）=====
   实测：工作台总高 21,481px（25.5 屏），其中「我的任务」表格占 15,949px（74%），
   是一张没有分页/折叠的订单总表 —— 与当初通知页 39.2 屏属同一类问题。
   处理：手机端只显示最近 8 单（表格行），并在卡片下方给出说明；桌面端完全不变。
   作用域用工作台自身的容器 .pd-main-rest，避免影响其它页面的表格。 */
@media (max-width: 991.98px) {
    .pd-main-rest .table-responsive table tbody tr:nth-child(n+9) { display: none; }

    .pd-main-rest .table-responsive::after {
        content: "手机端仅显示最近 8 单；更早的订单可在电脑上查看完整列表。";
        display: block;
        padding: .5rem .25rem 0;
        color: #66706b;
        font-size: .75rem;
    }
}

/* ===== 手机端：工作台「查看全部订单」开关（?all=1）=====
   上一轮限 8 行后，打手在手机上看不到更早订单；本轮补上 ?all=1 开关：
   - 带 by-show-all 类时，恢复显示全部行（覆盖上一轮的 display:none）
   - 用 :has() 在"显示全部"状态下隐藏那条"仅显示最近 8 单"的说明
   - 桌面端本来就不限行，不受影响 */
@media (max-width: 991.98px) {
    .pd-main-rest .table-responsive table.by-show-all tbody tr { display: table-row !important; }
    .pd-main-rest .table-responsive:has(table.by-show-all)::after { content: none; }
}

/* ===== 手机端第五轮（2026-09-28 详查容器后）=====
   实测剩余项（390px）：
   - /player：span.ops-hint @11.52px ×8；过小链接 button.pd-rail-sound(92x29)、
              div.col-md-4.text-center 内的链接(230x20)、a.ms-1.small(320x39)
   - /rules ：div.alert.alert-info li a(60x20)
   - /aigc  ：span.tile-index @10px ×3（其余为无类名 span/strong，需按页面根容器限定时再处理）
   一律只抬高字号/触控高度，且用实测容器限定，避免误伤正文。 */
@media (max-width: 991.98px) {
    .ops-hint, span.tile-index { font-size: .75rem !important; }

    .pd-rail-sound,
    .pd-main-rest .col-md-4.text-center a,
    .pd-main-rest a.ms-1.small {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .pd-rail-sound { min-width: 44px; justify-content: center; }

    .alert.alert-info li a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ===== 手机端：正文小字下限（一次性收口，2026-09-28）=====
   原理：max(12px, 1em) —— 1em 取父级字号。
     · 元素自身没有字号规则时（占绝大多数残留项，如无类名 span/strong）：字号=父级，
       父级 <12px 则抬到 12px，父级 ≥12px 则完全不变。
     · 元素自身有字号规则时：本规则用 :where() 包裹，优先级为 0，
       永远输给任何类选择器 → 不会覆盖页面精心设定的小字号（如徽章、标签）。
   因此这是一条"只抬高真正过小者、绝不压低或覆盖他人"的安全下限。 */
@media (max-width: 991.98px) {
    :where(main) :where(span, strong, em, small, b, i, div, p, td, th, li, dt, dd, label, figcaption) {
        font-size: max(12px, 1em);
    }
}

/* /aigc 等页面自带内联 <style>，上面那条 0 优先级的下限会被页内规则盖掉，
   于是这类"页内显式写死的小字号"仍会 <12px。这里补一条 !important 版本，
   仍限定在 main 内、仍只作用手机端；18 页批量复测确认横向溢出未出现。 */
@media (max-width: 991.98px) {
    :where(main) :where(span, strong, em, small, b, i, div, p, td, th, li, dt, dd, label, figcaption) {
        font-size: max(12px, 1em) !important;
    }
}

/* ===== 回归修复（2026-09-28 业务方反馈"手机端又没有下单按钮了"）=====
   原因：上面那条移动端限行规则用 :nth-of-type(n+3) 计数，会把陪玩标签也算进序号；
   当一张卡片的前两个标签是陪玩、第 3 个才是「可下单」标签时，下单标签会被误隐藏。
   修复：给该规则加上 :not(.btn-floating-order) —— 可下单标签永不隐藏，
   只削减多余的非下单标签。可下单能力优先于"一行放得下"。 */
@media (max-width: 991.98px) {
    .px-index .px-previews .px-chip.btn-floating-order { display: inline-flex !important; }
}

/* ===== 手机端：下单卡片打开时隐藏底部导航栏（2026-09-28 业务方明确要求）=====
   背景：底部导航（nav#mobileBottomNav）会盖住下单卡片的提交按钮；此前我只做过
   顶部导航的下滚收起，底部栏从未处理过，导致"卡片打开时看不到下单按钮"。
   实现：用 :has() 检测卡片表单是否已显示（其内联 style 在关闭时为 display:none），
   显示时隐藏底部导航；同时给卡片补底部内边距，确保提交按钮一定能滚到可见处。
   不改任何 JS，也不与既有导航显隐脚本冲突（只在其上叠加 display:none）。 */
@media (max-width: 991.98px) {
    body:has(#floatingOrderForm:not([style*="none"])) #mobileBottomNav,
    body:has(#floatingOrderBackdrop:not([style*="none"])) #mobileBottomNav {
        display: none !important;
    }

    #floatingOrderForm {
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
}

/* 底部导航已在卡片打开时隐藏，原先为它预留的 96px 变成一条白边 → 收回到安全区级别。 */
@media (max-width: 991.98px) {
    #floatingOrderForm { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
}

/* 支付页「当前应付」右侧的会员引导（2026-09-28 业务方指定位置） */
.pay-amount-member { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-amount-member > span { color: #b45309; font-size: 13px; font-weight: 600; }
.pay-amount-member > a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; padding: 0 14px; border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
    font-size: 13px; font-weight: 700; text-decoration: none;
}
.pay-amount-member > a:active { transform: translateY(1px); }
@media (max-width: 860px) { .pay-amount-member { justify-content: flex-start; } }

/* 支付页金额行（2026-09-28 业务方要求）：￥金额与「开通会员有优惠」按钮在同一行的左右两侧 */
.pay-amount-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pay-amount-row strong { font-size: 34px; line-height: 1; color: #1677ff; }
.pay-member-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; padding: 0 14px; border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff !important;
    font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.pay-member-btn:active { transform: translateY(1px); }
/* 手机端金额区本来就是左对齐：改成"金额在左、按钮在右"的一行，不再换行到下面 */
@media (max-width: 860px) {
    .pay-amount { width: 100%; }
    .pay-amount-row { justify-content: space-between; }
}

/* 支付方式：只保留一行「去支付宝付款」按钮（业务方 2026-09-28：原来那块太大） */
.pay-option-slim {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 18px; border-radius: 12px;
}
.pay-option-slim i { font-size: 20px; }
.pay-option-slim em { margin: 0; font-size: 16px; font-weight: 700; }