/* ================================================================
 * TOBI Mobile UX Fix  v2.0  (2026-08-31)
 * 增强版：基于 HTML 分析补充修复
 * 新增修复：双语言按钮去重、seo导航优化、iOS缩放防护、文字层级、
 *          选型器触摸优化、卡片间距、页脚布局、横向溢出补丁
 * ================================================================ */

/* ===== 补丁1: 隐藏重复的语言切换按钮组（保留第一组）===== */
/* 页面存在两组 data-dom-id="nav-lang-zh"，第一组在 #main-nav，第二组在 footer 或其他位置 */
@media (max-width: 1200px) {
  /* 保留 #main-nav 内的语言切换，隐藏其他位置的重复按钮 */
  [data-dom-id="nav-lang-zh"]:not(#main-nav [data-dom-id="nav-lang-zh"]),
  [data-dom-id="nav-lang-en"]:not(#main-nav [data-dom-id="nav-lang-en"]),
  [data-dom-id="nav-lang-ko"]:not(#main-nav [data-dom-id="nav-lang-ko"]) {
    display: none !important;
  }
}

/* ===== 补丁2: SEO 内部链接导航优化 ===== */
@media (max-width: 768px) {
  .seo-internal-links {
    max-width: 100% !important;
    padding: 12px !important;
    gap: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  .seo-internal-links a {
    padding: 4px 8px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

/* ===== 补丁3: 防止 iOS 输入框缩放（font-size ≥16px）===== */
@media (max-width: 768px) {
  .form-input,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 8px !important;
  }
  .form-input {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-width: 1px !important;
  }
  textarea.form-input {
    min-height: 100px !important;
    line-height: 1.5 !important;
  }
  select.form-input {
    background-position: right 12px center !important;
    padding-right: 32px !important;
  }
}

/* ===== 补丁4: Hero 区域文字层级和间距优化 ===== */
@media (max-width: 768px) {
  #hero {
    min-height: 100vh !important;
    padding-top: 70px !important;
    padding-bottom: 40px !important;
  }
  #hero h1,
  #hero .hero-title,
  #hero [data-dom-id="hero-title"] {
    font-size: 26px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 16px !important;
  }
  #hero h2,
  #hero .hero-subtitle,
  #hero [data-dom-id="hero-subtitle"] {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
  }
  #hero .hero-brand-chip,
  #hero [data-dom-id="hero-brand-chip"] {
    padding: 6px 12px !important;
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }
  #hero .hero-ctas,
  #hero [data-dom-id="hero-ctas"] {
    gap: 10px !important;
    margin-bottom: 28px !important;
  }
  #hero .hero-ctas a,
  #hero .hero-ctas button {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }
  #hero .hero-pillars,
  #hero [data-dom-id="hero-pillars"] {
    gap: 10px !important;
  }
  #hero .hero-pillars > div {
    padding: 14px !important;
    font-size: 13px !important;
  }
}

/* ===== 补丁5: 超小屏 (≤375px) Hero 文字进一步缩小 ===== */
@media (max-width: 375px) {
  #hero h1,
  #hero .hero-title,
  #hero [data-dom-id="hero-title"] {
    font-size: 22px !important;
  }
  #hero h2,
  #hero .hero-subtitle,
  #hero [data-dom-id="hero-subtitle"] {
    font-size: 14px !important;
  }
}

/* ===== 补丁6: Section 标题统一文字层级 ===== */
@media (max-width: 768px) {
  .section-title,
  h2.section-title {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===== 补丁7: 四问选型器优化（触摸目标和布局）===== */
@media (max-width: 768px) {
  .selector-radio + label,
  [class*="selector"] label,
  [class*="selector"] .selector-option {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }
  .selector-radio:checked + label {
    border-width: 2px !important;
  }
  [class*="selector"] {
    gap: 8px !important;
  }
}

/* ===== 补丁8: 卡片间距和内边距统一 ===== */
@media (max-width: 768px) {
  .card,
  [class*="card"]:not(.hero-pillars > div) {
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  .grid {
    gap: 12px !important;
  }
  .grid > * {
    margin-bottom: 0 !important;
  }
}

/* ===== 补丁9: 页脚布局优化 ===== */
@media (max-width: 768px) {
  footer {
    padding: 32px 16px !important;
    text-align: center !important;
  }
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  footer h3,
  footer h4 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }
  footer p,
  footer li,
  footer a {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  footer [data-dom-id="footer-contact"] {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
}

/* ===== 补丁10: 按钮触摸目标统一 ≥44px ===== */
@media (max-width: 1200px) {
  .btn-flame,
  button[type="submit"],
  a.btn,
  a[class*="btn"] {
    min-height: 48px !important;
    min-width: 44px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===== 补丁11: 横向溢出补丁（捕获遗漏元素）===== */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
  }
  body * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 允许内部滚动容器 */
  pre,
  code,
  table,
  .overflow-x-auto,
  .overflow-x-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* 防止 flex 子元素溢出 */
  .flex,
  .grid {
    min-width: 0 !important;
  }
  .flex > *,
  .grid > * {
    min-width: 0 !important;
  }
}

/* ===== 补丁12: 图片和媒体元素统一 ===== */
@media (max-width: 768px) {
  img,
  video,
  canvas,
  svg,
  picture {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
  }
  .aspect-ratio,
  [class*="aspect-"] {
    aspect-ratio: 16 / 9 !important;
  }
}

/* ===== 补丁13: 模态框/弹窗移动端全屏优化 ===== */
@media (max-width: 768px) {
  .modal,
  [class*="modal"],
  [role="dialog"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 16px !important;
  }
  .modal-overlay,
  [class*="overlay"] {
    padding: 0 !important;
  }
}

/* ===== 补丁14: 滚动行为优化 ===== */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 70px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ===== 补丁15: 表单提交按钮全宽 ===== */
@media (max-width: 768px) {
  form button[type="submit"],
  form .btn-flame {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
  }
}

/* ===== 补丁16: 链接和文本可读性 ===== */
@media (max-width: 768px) {
  a,
  p,
  li,
  span {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  p {
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }
}

/* ===== 补丁17: 数据卡样例区域优化 ===== */
@media (max-width: 768px) {
  [data-dom-id*="sample"],
  [class*="sample"],
  [class*="data-card"] {
    padding: 14px !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  [data-dom-id*="sample"] img,
  [class*="sample"] img {
    margin-bottom: 10px !important;
  }
}

/* ===== 补丁18: 设备规格标签优化 ===== */
@media (max-width: 768px) {
  [class*="spec"],
  [class*="tag"],
  [class*="badge"] {
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    margin: 2px !important;
  }
}

/* ===== 补丁19: 采购路径卡片优化 ===== */
@media (max-width: 768px) {
  [class*="purchase"],
  [class*="path-card"],
  [class*="step-card"] {
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  [class*="purchase"] h3,
  [class*="path-card"] h3,
  [class*="step-card"] h3 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }
}

/* ===== 补丁20: 移除重复 CSS 引用造成的样式闪烁（降级处理）===== */
/* 由于 tobi-contrast-fixes.css 被引用5次，这里确保最终样式一致 */
@media (max-width: 768px) {
  [data-tobi-contrast-fix] {
    /* 确保只应用一次有效样式，重复引用不会造成冲突 */
    animation: none !important;
    transition: none !important;
  }
}

/* ===== 补丁21: 超小屏 (≤360px) 额外适配 ===== */
@media (max-width: 360px) {
  .section-title,
  h2.section-title {
    font-size: 18px !important;
  }
  .card,
  [class*="card"] {
    padding: 12px !important;
  }
  #hero h1 {
    font-size: 20px !important;
  }
  footer h3,
  footer h4 {
    font-size: 15px !important;
  }
}