/* =====================================================================
   926o.com 移动端响应式增强样式表 (mobile-responsive.css)
   ---------------------------------------------------------------------
   目标：在不改动 PHP 逻辑与现有庞大 CSS 的前提下，渐进增强移动端体验
   加载：由各 Header.html 在原有 CSS 之后引入，利用层叠覆盖生效
   断点：≤575.98px 手机 / 576-767.98px 大手机·小平板 / ≤991.98px 平板
   作者：站点移动端适配改造
   日期：2026-07-03
   ===================================================================== */

/* ---------- 全局：安全区、盒模型、防溢出 ---------- */
:root {
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-safe-top: env(safe-area-inset-top, 0px);
}

@media (max-width: 991.98px) {
  /* 防止任何子元素撑破视口导致横向滚动 */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
  }
  /* 容器留出合理的移动端边距 */
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---------- 导航栏（手机） ---------- */
@media (max-width: 767.98px) {
  .navbar-acg .container {
    position: relative;
  }
  /* 品牌 logo 与店名尺寸收敛，避免与用户框/汉堡挤压 */
  .navbar-brand.fw-bold {
    font-size: 15px;
    max-width: 60vw;
    overflow: hidden;
  }
  .navbar-brand .brand-logo {
    height: 32px !important;
  }
  .navbar-brand span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 汉堡按钮触控区放大 */
  .navbar-toggler {
    padding: 6px 10px;
    border-radius: 10px;
  }
  /* 展开后的下拉导航：更清晰的分隔与触控高度 */
  .navbar-collapse .navbar-nav .nav-link {
    padding: 12px 6px;
    font-size: 15px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }
  .navbar-collapse .search-input {
    margin-top: 8px;
    display: flex !important;
  }
  /* 未登录时的登录/注册按钮：绝对定位改为随行，避免遮挡 */
  .user-login-box {
    position: static !important;
    display: flex;
    gap: 6px;
  }
  .user-login-box .btn {
    padding: 6px 10px;
    font-size: 13px;
  }
  /* 已登录用户信息框：收敛尺寸 */
  .user-info-box {
    position: static !important;
  }
  .user-info-box #username {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
}

/* 超小屏进一步收敛店名，给交互元素让位 */
@media (max-width: 400px) {
  .navbar-brand span {
    max-width: 42vw;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ---------- 首页主视觉与面板 ---------- */
@media (max-width: 767.98px) {
  main.container {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* hero banner：圆角与阴影收敛，边距适配 */
  .hero-visual {
    margin-bottom: 14px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(160,120,40,.15) !important;
  }
  /* 面板（公告/购买/详情）：内边距、圆角、间距移动端优化 */
  .panel {
    margin-bottom: 14px;
    border-radius: 14px;
  }
  .panel-header {
    padding: 12px 14px;
  }
  .panel-title {
    font-size: 15px;
  }
  .panel-body {
    padding: 12px 14px;
  }
  /* 公告内容字号与行高，便于阅读 */
  .panel-body .notice,
  .panel-body p {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ---------- 分类 chip 横滑区 ---------- */
@media (max-width: 767.98px) {
  .chip-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chip-list::-webkit-scrollbar { display: none; }
  .chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 999px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- 商品卡片列表 ---------- */
@media (max-width: 767.98px) {
  /* 卡片外层间距 */
  .item-list > a {
    margin-bottom: 14px !important;
  }
  .acg-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
  }
  /* 商品缩略图高度：手机上更饱满 */
  .acg-thumb {
    height: 150px !important;
  }
  .acg-card .p-3 {
    padding: 12px !important;
  }
  /* 标签徽章：可换行不溢出 */
  .acg-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
  }
  .acg-card .badge-soft {
    font-size: 11px;
    padding: 2px 8px;
  }
  /* 商品标题：两行截断，行高清晰 */
  .goods-title {
    font-size: 14px;
    line-height: 1.4;
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    margin-bottom: 6px;
  }
  /* 价格：突出显示 */
  .stat-row .price {
    font-size: 20px;
    font-weight: 800;
  }
  .stat-row .price .unit {
    font-size: 13px;
  }
  /* 库存/已售信息 */
  .stat-bottom {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    color: #6b7280;
  }
}

/* 双列布局：大手机横屏 / 小平板（Bootstrap col-md-6 已处理，这里加固间距） */
@media (min-width: 576px) and (max-width: 991.98px) {
  .acg-thumb {
    height: 160px !important;
  }
  .goods-title {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    min-height: 1.4em;
  }
}

/* ---------- 商品详情页 ---------- */
@media (max-width: 767.98px) {
  /* 封面图与信息区上下堆叠（Bootstrap col-12 已处理，这里优化间距） */
  .item-detail,
  .panel.mt-3 {
    margin-top: 12px !important;
  }

  /* 封面图列：手机端不再拉伸等高，避免过高/塔陷 */
  .panel-body .row.align-items-stretch {
    align-items: flex-start !important;
  }
  .panel-body .col-12.col-lg-6.d-flex {
    display: block !important;
  }

  /* CSS 盾牌封面：手机端做成小巧的宽屏横幅，固定宽高比自适应缩小 */
  .acg-card.css-cover,
  .acg-cover.css-cover,
  .card.css-cover,
  .css-cover {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    max-height: 200px;
    width: 100% !important;
  }
  /* 真实位图封面（非 CSS 封面时）：自适应、限高、不变形 */
  .acg-card:not(.css-cover),
  .acg-cover:not(.css-cover) {
    height: auto !important;
    min-height: 0 !important;
  }
  .acg-cover .item-cover {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
  }
  /* 商品名标题 */
  .panel-body h4 {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 8px;
    word-break: break-word;
  }
  /* 徽章行：换行不溢出 */
  .panel-body .d-flex.align-items-center.gap-2 {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  /* 价格区 */
  .abacus .price {
    font-size: 22px;
    font-weight: 800;
  }

  /* 购买表单整体：防溢出，纵向堆叠 */
  form.vstack {
    width: 100%;
    max-width: 100%;
  }
  form.vstack > div {
    width: 100%;
    max-width: 100%;
  }
  .form-label {
    font-size: 14px;
    margin-bottom: 6px;
    font-weight: 600;
  }

  /* SKU / 宝贝类型 按钮组：自动换行、触控友好 */
  .sku-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sku {
    flex: 0 1 auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .sku .badge-money {
    font-size: 12px;
  }

  /* 表单输入框：触控高度、字号防 iOS 缩放（≥16px） */
  .form-control {
    min-height: 44px;
    font-size: 16px;
    border-radius: 10px;
  }

  /* 数量选择器：小巧、不换行、不占满整行（修复按钮被挤换行导致的过高问题） */
  .qty-group {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: 160px;
    vertical-align: middle;
  }
  .qty-group .change-num-sub,
  .qty-group .change-num-add {
    flex: 0 0 auto;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qty-group .form-control {
    flex: 0 0 auto;
    width: 56px;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    padding: 0 4px;
    font-size: 16px;
    text-align: center;
  }

  /* 人机验证：输入框 + 验证码图片同一行，不换行、不溢出、不多占一行 */
  .panel-body .input-group[style*="240px"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
  }
  .captcha-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .panel-body .input-group[style*="240px"] .input-group-append {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    margin-left: 8px;
  }
  .captcha-img {
    height: 44px;
    width: auto;
    max-width: 130px;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
  }

  /* 支付方式列表 */
  .cash-pay {
    padding: 12px !important;
    border-radius: 14px;
  }
  .pay-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* 宝贝详情富文本：图片自适应、防溢出 */
  .item-detail .panel-body {
    overflow-x: auto;
    word-break: break-word;
  }
  .item-detail .panel-body img,
  .item-detail .panel-body table {
    max-width: 100% !important;
    height: auto;
  }

  /* 信任条 / 紧迫感条（trust-bar / urgency-bar）防溢出 */
  .trust-bar,
  .urgency-bar {
    max-width: 100%;
    flex-wrap: wrap;
    font-size: 12px;
  }
}

/* ---------- 登录 / 注册页 ---------- */
@media (max-width: 575.98px) {
  .auth-card {
    width: 100% !important;
    max-width: 92vw !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }
  .auth-card .form-control {
    min-height: 44px;
    font-size: 16px;
  }
  .auth-card .btn {
    min-height: 46px;
    font-size: 15px;
  }
}

/* ---------- 用户中心 / 仪表盘 ---------- */
@media (max-width: 767.98px) {
  /* 侧边导航改为横向可滑或堆叠，避免挤压内容 */
  .security-nav,
  .dashboard-nav {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* 表格类内容横向可滑动，避免撑破 */
  .table-responsive,
  .layui-table-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    font-size: 13px;
  }
  /* 个人中心信息卡片 */
  .user-panel,
  .personal-card {
    padding: 14px;
    border-radius: 14px;
  }
}

/* ---------- 通用按钮：移动端触控高度 ---------- */
@media (max-width: 767.98px) {
  .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sm {
    min-height: 36px;
  }
  /* 主行动按钮（购买/提交）全宽更易点 */
  .btn-primary.btn-buy,
  .submit-order-btn,
  button[type="submit"].btn-primary {
    width: 100%;
  }
}

/* ---------- 底部安全区（iPhone 刘海屏） ---------- */
@media (max-width: 767.98px) {
  body {
    padding-bottom: var(--m-safe-bottom);
  }
  /* 固定在底部的操作栏（如有）留出安全区 */
  .fixed-bottom,
  .cash-pay.fixed {
    padding-bottom: calc(12px + var(--m-safe-bottom)) !important;
  }
}

/* ---------- Footer 页脚 ---------- */
@media (max-width: 767.98px) {
  footer,
  .footer {
    padding: 16px 14px calc(16px + var(--m-safe-bottom));
    font-size: 12px;
    text-align: center;
    line-height: 1.6;
  }
}

/* ---------- 弹层 layer / 模态：移动端宽度自适应 ---------- */
@media (max-width: 575.98px) {
  .layui-layer {
    max-width: 92vw !important;
  }
  .layui-layer-page .layui-layer-content {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ---------- 悬浮客服(TG) 与 "刚刚购买"提示 的移动端协调 ---------- */
/* 说明：enhance.js 中已关闭 WhatsApp，仅保留 Telegram 单个按钮。
   这里进一步上移悬浮客服，确保不遮挡左下角"刚刚购买"社会认同提示。 */
@media (max-width: 767.98px) {
  /* 悬浮客服：右下，上移避开底部；单按钮更清爽 */
  #cs-float {
    right: 12px !important;
    bottom: 84px !important;
    gap: 10px !important;
  }
  /* 单个 TG 圆钮尺寸适中、触控友好 */
  #cs-float > a {
    width: 46px;
    height: 46px;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center;
  }
  #cs-float > a .cs-label {
    display: none !important;
  }

  /* "刚刚购买"提示：左下，紧凑不过宽，避免与右下客服在视觉上打架 */
  .live-sales {
    left: 12px !important;
    right: auto !important;
    bottom: 16px !important;
    max-width: 68vw !important;
    z-index: 99998;
  }
  .live-sales .ls-inner {
    padding: 9px 12px !important;
    border-radius: 12px !important;
  }
  .live-sales .ls-txt {
    font-size: 12px !important;
  }
}

/* 超小屏（≤380px）：客服钮再收敛一点 */
@media (max-width: 380px) {
  #cs-float > a {
    width: 42px;
    height: 42px;
  }
  .live-sales {
    max-width: 64vw !important;
  }
}