/*
 * 我要买卡 Batch 16
 * 手机端结算页 CSS-only 安全优化版
 *
 * 不使用 JavaScript，不改 DOM，不改结算/支付/下单逻辑。
 * 仅在手机端结算页生效。
 */

@media (max-width: 767px) {
  /* ===== 页面基础 ===== */
  body.checkout-checkout,
  #checkout-checkout {
    overflow-x: hidden !important;
    background: #f5f6f8 !important;
  }

  body.checkout-checkout #content,
  #checkout-checkout #content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 14px 28px !important;
    box-sizing: border-box !important;
  }

  body.checkout-checkout #content > .container,
  body.checkout-checkout #content > .container-fluid,
  #checkout-checkout #content > .container,
  #checkout-checkout #content > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.checkout-checkout #content .row,
  #checkout-checkout #content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.checkout-checkout #content [class*="col-"],
  #checkout-checkout #content [class*="col-"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===== 页面标题 ===== */
  body.checkout-checkout #content h1,
  #checkout-checkout #content h1 {
    position: relative;
    margin: 4px 0 18px !important;
    padding: 0 0 11px !important;
    color: #171b2c !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 38px !important;
    border-bottom: 1px solid #e0e4e9 !important;
  }

  body.checkout-checkout #content h1::after,
  #checkout-checkout #content h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: #e71924;
  }

  body.checkout-checkout #content .breadcrumb,
  #checkout-checkout #content .breadcrumb {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #8f96a1 !important;
    background: transparent !important;
  }

  /* ===== 登录提示 ===== */
  body.checkout-checkout #content .alert,
  #checkout-checkout #content .alert {
    margin: 0 0 14px !important;
    padding: 11px 13px !important;
    font-size: 13px !important;
    line-height: 21px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
  }

  /* ===== 结算区块 ===== */
  body.checkout-checkout #checkout-register,
  body.checkout-checkout #checkout-payment-method,
  body.checkout-checkout #checkout-confirm,
  #checkout-checkout #checkout-register,
  #checkout-checkout #checkout-payment-method,
  #checkout-checkout #checkout-confirm {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #e5e8ed !important;
    border-radius: 11px !important;
    box-shadow: 0 3px 14px rgba(25, 35, 50, 0.045) !important;
  }

  body.checkout-checkout #content h2,
  body.checkout-checkout #content h3,
  body.checkout-checkout #content legend,
  #checkout-checkout #content h2,
  #checkout-checkout #content h3,
  #checkout-checkout #content legend {
    position: relative;
    width: 100% !important;
    margin: 0 0 13px !important;
    padding: 0 0 8px 11px !important;
    color: #171b2c !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 27px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f3 !important;
  }

  body.checkout-checkout #content h2::before,
  body.checkout-checkout #content h3::before,
  body.checkout-checkout #content legend::before,
  #checkout-checkout #content h2::before,
  #checkout-checkout #content h3::before,
  #checkout-checkout #content legend::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 19px;
    border-radius: 4px;
    background: #e71924;
  }

  /* ===== 隐藏“直接结算” ===== */
  body.checkout-checkout label:has(input[name="account"][value="guest"]),
  body.checkout-checkout .radio:has(input[name="account"][value="guest"]),
  body.checkout-checkout .form-check:has(input[name="account"][value="guest"]),
  #checkout-checkout label:has(input[name="account"][value="guest"]),
  #checkout-checkout .radio:has(input[name="account"][value="guest"]),
  #checkout-checkout .form-check:has(input[name="account"][value="guest"]) {
    display: none !important;
  }

  /* 只剩注册账号后，调整为温和提示样式 */
  body.checkout-checkout label:has(input[name="account"][value="register"]),
  body.checkout-checkout .radio:has(input[name="account"][value="register"]),
  body.checkout-checkout .form-check:has(input[name="account"][value="register"]),
  #checkout-checkout label:has(input[name="account"][value="register"]),
  #checkout-checkout .radio:has(input[name="account"][value="register"]),
  #checkout-checkout .form-check:has(input[name="account"][value="register"]) {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    color: #40536a !important;
    font-size: 14px !important;
    line-height: 22px !important;
    background: #eef5ff !important;
    border: 1px solid #d8e6fa !important;
    border-radius: 9px !important;
  }

  body.checkout-checkout input[name="account"][value="register"],
  #checkout-checkout input[name="account"][value="register"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 8px 0 0 !important;
    accent-color: #e71924;
  }

  /* ===== 隐藏账户类型 Default ===== */
  body.checkout-checkout .form-group:has(select[name="customer_group_id"]),
  body.checkout-checkout .mb-3:has(select[name="customer_group_id"]),
  #checkout-checkout .form-group:has(select[name="customer_group_id"]),
  #checkout-checkout .mb-3:has(select[name="customer_group_id"]) {
    display: none !important;
  }

  /* ===== 隐藏邮件订阅 ===== */
  body.checkout-checkout label:has(input[name="newsletter"]),
  body.checkout-checkout .checkbox:has(input[name="newsletter"]),
  body.checkout-checkout .form-check:has(input[name="newsletter"]),
  #checkout-checkout label:has(input[name="newsletter"]),
  #checkout-checkout .checkbox:has(input[name="newsletter"]),
  #checkout-checkout .form-check:has(input[name="newsletter"]) {
    display: none !important;
  }

  /* ===== 隐藏订单备注输入框 ===== */
  body.checkout-checkout .form-group:has(textarea[name="comment"]),
  body.checkout-checkout .mb-3:has(textarea[name="comment"]),
  body.checkout-checkout div:has(> textarea[name="comment"]),
  #checkout-checkout .form-group:has(textarea[name="comment"]),
  #checkout-checkout .mb-3:has(textarea[name="comment"]),
  #checkout-checkout div:has(> textarea[name="comment"]) {
    display: none !important;
  }

  /* ===== 表单 ===== */
  body.checkout-checkout #content .form-group,
  body.checkout-checkout #content .mb-3,
  #checkout-checkout #content .form-group,
  #checkout-checkout #content .mb-3 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 11px !important;
  }

  body.checkout-checkout #content label,
  #checkout-checkout #content label {
    margin-bottom: 5px !important;
    color: #343b47 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
  }

  body.checkout-checkout #content input[type="text"],
  body.checkout-checkout #content input[type="email"],
  body.checkout-checkout #content input[type="password"],
  body.checkout-checkout #content input[type="tel"],
  body.checkout-checkout #content input[type="number"],
  body.checkout-checkout #content select,
  body.checkout-checkout #content textarea,
  #checkout-checkout #content input[type="text"],
  #checkout-checkout #content input[type="email"],
  #checkout-checkout #content input[type="password"],
  #checkout-checkout #content input[type="tel"],
  #checkout-checkout #content input[type="number"],
  #checkout-checkout #content select,
  #checkout-checkout #content textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 45px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    box-sizing: border-box !important;
    color: #202633 !important;
    font-size: 15px !important;
    line-height: 23px !important;
    background: #ffffff !important;
    border: 1px solid #dce1e7 !important;
    border-radius: 8px !important;
    outline: 0 !important;
    box-shadow: none !important;
    writing-mode: horizontal-tb !important;
  }

  body.checkout-checkout #content input:focus,
  body.checkout-checkout #content select:focus,
  body.checkout-checkout #content textarea:focus,
  #checkout-checkout #content input:focus,
  #checkout-checkout #content select:focus,
  #checkout-checkout #content textarea:focus {
    border-color: #e71924 !important;
    box-shadow: 0 0 0 3px rgba(231, 25, 36, 0.08) !important;
  }

  /* 隐私政策 */
  body.checkout-checkout label:has(input[type="checkbox"][name*="agree"]),
  body.checkout-checkout .checkbox:has(input[type="checkbox"][name*="agree"]),
  body.checkout-checkout .form-check:has(input[type="checkbox"][name*="agree"]),
  #checkout-checkout label:has(input[type="checkbox"][name*="agree"]),
  #checkout-checkout .checkbox:has(input[type="checkbox"][name*="agree"]),
  #checkout-checkout .form-check:has(input[type="checkbox"][name*="agree"]) {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 9px 0 !important;
    color: #5c6470 !important;
    font-size: 13px !important;
    line-height: 21px !important;
  }

  body.checkout-checkout input[type="checkbox"][name*="agree"],
  #checkout-checkout input[type="checkbox"][name*="agree"] {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 1px 8px 0 0 !important;
    accent-color: #e71924;
  }

  /* ===== 付款方式 ===== */
  body.checkout-checkout #checkout-payment-method input[readonly],
  body.checkout-checkout #checkout-payment-method input:disabled,
  #checkout-checkout #checkout-payment-method input[readonly],
  #checkout-checkout #checkout-payment-method input:disabled {
    color: #657181 !important;
    background: #f6f8fa !important;
    border: 1px dashed #d2d8e0 !important;
  }

  /* ===== 订单汇总 ===== */
  body.checkout-checkout #checkout-confirm,
  #checkout-checkout #checkout-confirm {
    overflow: hidden !important;
  }

  body.checkout-checkout #checkout-confirm table,
  body.checkout-checkout #content table.table,
  #checkout-checkout #checkout-confirm table,
  #checkout-checkout #content table.table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e1e5ea !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  body.checkout-checkout #content table th,
  body.checkout-checkout #content table td,
  #checkout-checkout #content table th,
  #checkout-checkout #content table td {
    padding: 10px 8px !important;
    color: #414956 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    vertical-align: top !important;
    white-space: normal !important;
    word-break: break-word !important;
    writing-mode: horizontal-tb !important;
    border-color: #e8ebef !important;
  }

  body.checkout-checkout #content table th:first-child,
  body.checkout-checkout #content table td:first-child,
  #checkout-checkout #content table th:first-child,
  #checkout-checkout #content table td:first-child {
    width: 68% !important;
    text-align: left !important;
  }

  body.checkout-checkout #content table th:last-child,
  body.checkout-checkout #content table td:last-child,
  #checkout-checkout #content table th:last-child,
  #checkout-checkout #content table td:last-child {
    width: 32% !important;
    text-align: right !important;
  }

  body.checkout-checkout #content table tfoot td,
  #checkout-checkout #content table tfoot td {
    color: #202633 !important;
    font-weight: 700 !important;
    background: #fafbfc !important;
  }

  /* ===== 主按钮 ===== */
  body.checkout-checkout #content .btn-primary,
  #checkout-checkout #content .btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    margin: 13px 0 0 !important;
    padding: 11px 15px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    text-align: center !important;
    background: #e71924 !important;
    border: 1px solid #e71924 !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 16px rgba(231, 25, 36, 0.16) !important;
  }

  /* ===== 隐藏手机底部红色导航和浮动按钮 ===== */
  body.checkout-checkout .mobile-bar,
  body.checkout-checkout .bottom-menu,
  body.checkout-checkout .mobile-bottom-menu,
  body.checkout-checkout .mobile-nav-bottom,
  body.checkout-checkout .bottom-nav,
  body.checkout-checkout .mobile-footer-menu,
  body.checkout-checkout .side-buttons,
  body.checkout-checkout .back-to-top,
  body.checkout-checkout .scroll-top,
  body.checkout-checkout .scroll-to-top,
  #checkout-checkout .mobile-bar,
  #checkout-checkout .bottom-menu,
  #checkout-checkout .mobile-bottom-menu,
  #checkout-checkout .mobile-nav-bottom,
  #checkout-checkout .bottom-nav,
  #checkout-checkout .mobile-footer-menu,
  #checkout-checkout .side-buttons,
  #checkout-checkout .back-to-top,
  #checkout-checkout .scroll-top,
  #checkout-checkout .scroll-to-top {
    display: none !important;
  }

  /* ===== 结算页精简营销页脚 ===== */
  body.checkout-checkout footer .wymk-payment-mobile,
  body.checkout-checkout footer .wymk-payment-desktop-anchor,
  body.checkout-checkout footer .footer-main,
  body.checkout-checkout footer .footer-columns,
  #checkout-checkout footer .wymk-payment-mobile,
  #checkout-checkout footer .wymk-payment-desktop-anchor,
  #checkout-checkout footer .footer-main,
  #checkout-checkout footer .footer-columns {
    display: none !important;
  }
}