/* MYTGGO mobile layout fixes - safe override */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    line-height: 1.45;
  }

  main,
  section,
  .container,
  .page,
  .content,
  .wrap,
  .panel {
    max-width: 100%;
  }

  /* ===== 教程中心：修复首次加载卡片过高、按钮发白、间距过大 ===== */
  .tutorial-card,
  .guide-card,
  .help-card,
  .tutorial-item,
  .guide-item,
  [class*="tutorial-card"],
  [class*="guide-card"],
  [class*="help-card"] {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 18px !important;
    margin: 0 0 14px !important;
    border-radius: 18px !important;
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
  }

  .tutorial-card h3,
  .guide-card h3,
  .help-card h3,
  .tutorial-item h3,
  .guide-item h3,
  [class*="tutorial"] h3,
  [class*="guide"] h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin: 0 0 12px !important;
    letter-spacing: 0 !important;
  }

  .tutorial-card p,
  .guide-card p,
  .help-card p,
  .tutorial-item p,
  .guide-item p,
  [class*="tutorial"] p,
  [class*="guide"] p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 12px !important;
    color: #64748b !important;
  }

  .tutorial-card a,
  .guide-card a,
  .help-card a,
  .tutorial-item a,
  .guide-item a,
  [class*="tutorial"] a,
  [class*="guide"] a {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin-top: 4px !important;
    color: #3454ff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    opacity: 1 !important;
  }

  /* 防止教程按钮被旧样式弄成白色透明，第一次打开像隐身一样 */
  a[href*="tutorial"],
  button[class*="tutorial"],
  .tutorial-resource a {
    color: #3454ff !important;
    opacity: 1 !important;
  }

  /* ===== 订单详情：移动端压缩信息密度 ===== */
  .order-detail,
  .order-detail-card,
  .order-card,
  .order-info,
  .order-panel,
  [class*="order-detail"],
  [class*="order-card"],
  [class*="order-info"] {
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .order-detail h1,
  .order-detail h2,
  .order-detail h3,
  [class*="order"] h1,
  [class*="order"] h2,
  [class*="order"] h3 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin: 0 0 12px !important;
    word-break: break-word !important;
  }

  /* 把订单里的字段卡片压扁，不要每个字段占一个大砖头 */
  .order-detail .field,
  .order-detail .info-row,
  .order-detail .detail-row,
  .order-detail .meta-row,
  [class*="order"] .field,
  [class*="order"] .info-row,
  [class*="order"] .detail-row,
  [class*="order"] .meta-row {
    padding: 10px 12px !important;
    margin: 8px 0 !important;
    border-radius: 14px !important;
    min-height: 0 !important;
  }

  .order-detail label,
  .order-detail .label,
  [class*="order"] label,
  [class*="order"] .label {
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
  }

  .order-detail .value,
  .order-detail strong,
  [class*="order"] .value,
  [class*="order"] strong {
    font-size: 15px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
  }

  /* 商品名最多显示 3 行，避免一个商品名把页面撑成卷轴 */
  .order-detail .product,
  .order-detail .product-name,
  [class*="order"] .product,
  [class*="order"] .product-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* 状态标签压缩 */
  .badge,
  .status,
  .tag,
  [class*="badge"],
  [class*="status"],
  [class*="tag"] {
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
  }

  /* 页面底部留白，避免 Safari 地址栏挡住按钮 */
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ===== fix: 防止教程/售后里的主按钮被链接样式误伤 ===== */
@media (max-width: 768px) {
  a.btn,
  .btn,
  .primary-btn,
  .contact-btn,
  .support-btn,
  a[class*="btn"],
  button[class*="btn"],
  a[class*="contact"],
  a[class*="support"] {
    color: #ffffff !important;
    opacity: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .btn.secondary,
  a.btn.secondary,
  .secondary-btn {
    color: #1e40af !important;
  }
}

/* ===== orders mobile compact v2 ===== */
@media (max-width: 768px) {
  .rec-card-compact {
    padding: 16px !important;
    margin: 0 0 14px !important;
    border-radius: 18px !important;
  }

  .rec-head-compact {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .rec-head-compact .rec-order {
    font-size: 20px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  .rec-status-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-end !important;
    flex-shrink: 0 !important;
  }

  .rec-summary-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 !important;
  }

  .rec-mini {
    background: #f8fafc !important;
    border: 1px solid #edf1f7 !important;
    border-radius: 14px !important;
    padding: 10px 8px !important;
    min-width: 0 !important;
  }

  .rec-mini span,
  .rec-product-mini span {
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
  }

  .rec-mini b {
    display: block !important;
    color: #0f172a !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .rec-product-mini {
    background: #f8fafc !important;
    border: 1px solid #edf1f7 !important;
    border-radius: 14px !important;
    padding: 11px 12px !important;
    margin: 10px 0 !important;
  }

  .rec-product-mini b {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .rec-delivery-compact {
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .rec-delivery-compact strong {
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .rec-delivery-compact textarea {
    min-height: 92px !important;
    max-height: 150px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    padding: 11px !important;
    border-radius: 13px !important;
  }

  .rec-copy,
  .rec-pay-btn {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    margin-top: 9px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-align: center !important;
  }

  .rec-more {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #edf1f7 !important;
  }

  .rec-more summary {
    cursor: pointer !important;
    color: #3454ff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    list-style: none !important;
  }

  .rec-more summary::-webkit-details-marker {
    display: none !important;
  }

  .rec-more summary::after {
    content: " ▼";
    font-size: 12px;
  }

  .rec-more[open] summary::after {
    content: " ▲";
  }

  .rec-grid-more {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .rec-grid-more .rec-item {
    padding: 9px 10px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  .rec-grid-more .rec-item span {
    font-size: 12px !important;
  }

  .rec-grid-more .rec-item b {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* 修复“联系客服”这类蓝色主按钮文字被误伤 */
  a.btn,
  .btn,
  .primary-btn,
  .contact-btn,
  .support-btn,
  .service-btn,
  a[class*="btn"],
  button[class*="btn"],
  a[class*="contact"],
  a[class*="support"],
  a[class*="service"] {
    color: #ffffff !important;
    opacity: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .btn.secondary,
  a.btn.secondary,
  .secondary-btn {
    color: #1e40af !important;
  }
}

/* ===== orders mobile 2-column compact v3 ===== */
@media (max-width: 768px) {
  .rec-card-mobile2 {
    padding: 14px !important;
    margin: 0 0 14px !important;
    border-radius: 18px !important;
  }

  .rec-head-mobile2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .rec-head-mobile2 .rec-order {
    font-size: 19px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  .rec-status-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-end !important;
    flex-shrink: 0 !important;
  }

  .rec-product-mobile {
    background: #f8fafc !important;
    border: 1px solid #edf1f7 !important;
    border-radius: 14px !important;
    padding: 10px 11px !important;
    margin: 9px 0 !important;
  }

  .rec-product-mobile span,
  .rec-pair-grid .rec-item span {
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-bottom: 5px !important;
  }

  .rec-product-mobile b {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .rec-pair-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 9px 0 !important;
  }

  .rec-pair-grid .rec-item {
    padding: 9px 10px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    min-height: 0 !important;
    background: #f8fafc !important;
    border: 1px solid #edf1f7 !important;
  }

  .rec-pair-grid .rec-item b {
    display: block !important;
    color: #0f172a !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .rec-delivery-mobile {
    margin-top: 10px !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }

  .rec-delivery-mobile strong {
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .rec-delivery-mobile textarea {
    min-height: 86px !important;
    max-height: 138px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .rec-copy,
  .rec-pay-btn {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 13px !important;
    margin-top: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .rec-more {
    margin-top: 9px !important;
    padding-top: 9px !important;
    border-top: 1px solid #edf1f7 !important;
  }

  .rec-more summary {
    cursor: pointer !important;
    color: #3454ff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    list-style: none !important;
  }

  .rec-more summary::-webkit-details-marker {
    display: none !important;
  }

  .rec-more summary::after {
    content: " ▼";
    font-size: 12px;
  }

  .rec-more[open] summary::after {
    content: " ▲";
  }

  .rec-grid-more {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .rec-grid-more .rec-item {
    padding: 9px 10px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
}

/* ===== orders mobile: 把返回商品列表放到购买记录右侧，电脑端不变 ===== */
@media (max-width: 768px) {
  .orders-shell {
    position: relative !important;
  }

  .orders-page .orders-back,
  .orders-page a.orders-back,
  .orders-page a.btn.orders-back,
  .orders-page a.btn.btn-outline.orders-back {
    position: absolute !important;
    top: 34px !important;
    right: 18px !important;
    width: auto !important;
    min-width: 92px !important;
    max-width: 128px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    border: 1px solid #cfd8ff !important;
    color: #4f46e5 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    z-index: 5 !important;
  }

  .orders-page .orders-back:empty::before,
  .orders-page a.orders-back:empty::before {
    content: "返回商品列表";
  }

  .orders-page .orders-shell > header,
  .orders-page .orders-shell .orders-header,
  .orders-page .orders-shell .orders-hero,
  .orders-page .orders-shell .orders-title {
    padding-right: 130px !important;
  }
}

/* ===== buy modal: 只隐藏订单确认里的售后保障，保留商品介绍 ===== */
@media (max-width: 768px) {
  .order-confirm .modal-note,
  .order-confirm .detail-note,
  .order-confirm .product-note,
  .order-confirm .after-sale,
  .order-confirm .after-sale-card,
  .order-confirm .warranty-card,
  .order-confirm .guarantee-card,
  .order-confirm [class*="after"],
  .order-confirm [class*="warranty"],
  .order-confirm [class*="guarantee"] {
    display: none !important;
  }

  .modal-outline,
  button[data-modal-close],
  .btn.btn-outline.modal-outline {
    color: #4f46e5 !important;
    background: #ffffff !important;
    border-color: #cfd8ff !important;
    opacity: 1 !important;
    font-weight: 900 !important;
  }
}