/* ===================================================================
   themes/_shared/responsive.css
   PC / 移动端自适应公共层（12 套模板共用，在各自 style.css 之后加载）

   只处理「跨模板共通的适配问题」，不碰任何模板的配色与圆角：
   1. 手机端表单控件强制 16px —— iOS Safari 在字号 < 16px 时会在聚焦
      瞬间把整页放大，用户点一下输入框页面就"跳"一下，这是真实存在的坑
   2. 手机端主要可点元素保证 44px 高度（拇指触控最小目标）
   3. 触屏去掉 300ms 点击延迟
   4. 横屏小高度时压缩纵向留白，避免提交按钮被推出首屏
   =================================================================== */

html { -webkit-text-size-adjust: 100%; }

button, .chip, a { touch-action: manipulation; }

body { overflow-x: hidden; }

@media (max-width: 480px), (hover: none) and (pointer: coarse) {
  /* 防 iOS 聚焦放大：元素选择器 + !important，才能压过各模板的
     .field input{font-size:13px} 这类类选择器规则。
     max(16px, 1em) 让本来字号就够大的模板（如移动端模板的 22px）不被缩小。
     触屏平板（iPad 768px）同样会触发聚焦放大，所以一并覆盖。 */
  input, textarea, select { font-size: max(16px, 1em) !important; }

  /* 触控目标：金额按钮 / 支付方式 / 主按钮至少 44px 高 */
  .chip, .amount-item, .pay, .payment-item, .pay-box, .btn { min-height: 44px; }

  /* 窄屏收紧左右留白，把宽度让给内容 */
  .wrap, .main, .page { padding-left: 14px; padding-right: 14px; }
}

/* 横屏手机（如 iPhone 横向 390×844 变成 844×390）：压缩纵向留白 */
@media (orientation: landscape) and (max-height: 480px) {
  .wrap, .main, .page { padding-top: 14px; padding-bottom: 18px; }
  .head, .header, .hero { padding-top: 10px; padding-bottom: 12px; }
}

/* 宽屏右栏：最近赞赏 + 赞赏榜竖向堆叠，把两栏高度拉平
   窄屏时 .side 是普通块级容器，效果与原先逐个堆叠完全一致 */
@media (min-width: 900px) {
  .side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .side > .share { margin-bottom: 0; }
  .side > .card { margin-bottom: 0; }
}