/* ===================================================================
   foodai-checkout.css — 结算 / 购物车 / 支付页 深色橙主题
   对齐镜简AI 设计语言（2026-09-18 与首页 .jn-home、图库页统一）
   -------------------------------------------------------------------
   基准 tokens：
     底色    #0f1118
     主橙    #f28c28   （CTA / 选中态 / 链接）
     橙深    #d97a1c   （hover）
     玻璃卡  rgba(25,30,45,.65)
     描边    rgba(255,255,255,.10)
     正文    #f3f4f6
     次要    #9ca3af
   -------------------------------------------------------------------
   目标页面：WooCommerce 块结账（body.woocommerce-checkout）
             + 购物车（body.woocommerce-cart）
   =================================================================== */

/* ---------- 0. 变量 & 页面基底 ---------- */
body.woocommerce-checkout,
body.woocommerce-cart {
  --jn-bg: #0f1118;
  --jn-card: rgba(25, 30, 45, .65);
  --jn-card-solid: #191e2d;
  --jn-border: rgba(255, 255, 255, .10);
  --jn-border-strong: rgba(255, 255, 255, .16);
  --jn-primary: #f28c28;
  --jn-primary-d: #d97a1c;
  --jn-text: #f3f4f6;
  --jn-muted: #9ca3af;
  --jn-radius: 12px;
  --jn-radius-sm: 8px;

  background-color: #0f1118 !important;
  color: #f3f4f6 !important;
  min-height: 100vh;
  background-image:
    radial-gradient(900px 500px at 15% -10%, rgba(242, 140, 40, .10), transparent 60%),
    radial-gradient(760px 420px at 90% 0%, rgba(242, 140, 40, .06), transparent 62%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* 块主题全局色板覆盖（twenty twenty-five preset） */
body.woocommerce-checkout,
body.woocommerce-cart {
  --wp--preset--color--base: #0f1118;
  --wp--preset--color--contrast: #f3f4f6;
  --wp--preset--color--accent-1: #f28c28;
  --wp--preset--color--accent-4: #9ca3af;
  --wp--preset--color--accent-5: #191e2d;
}

/* 所有后代默认继承正文色（避免白底黑字残留） */
body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-cart .wp-site-blocks { color: #f3f4f6; }

/* ---------- 1. 页头：品牌「镜简AI」橙金渐变 ---------- */
body.woocommerce-checkout .wp-block-site-title a,
body.woocommerce-cart .wp-block-site-title a {
  background: linear-gradient(92deg, #ffd0a0 0%, #f28c28 55%, #d97a1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f28c28;
  font-weight: 700;
  text-decoration: none;
}
body.woocommerce-checkout .wp-block-site-title a:hover,
body.woocommerce-cart .wp-block-site-title a:hover {
  text-decoration: none;
  opacity: .9;
}
/* 购物车图标 + 数量气泡 */
body.woocommerce-checkout .wc-block-cart-link,
body.woocommerce-cart .wc-block-cart-link { color: #f3f4f6 !important; }
body.woocommerce-checkout .wc-block-mini-cart__badge,
body.woocommerce-cart .wc-block-mini-cart__badge {
  background: #f28c28 !important;
  color: #fff !important;
  border-color: #f28c28 !important;
}

/* ---------- 2. 结账容器 ---------- */
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-cart .wc-block-cart {
  color: #f3f4f6;
}
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-cart .wc-block-components-title {
  color: #f3f4f6 !important;
  font-weight: 700;
}
body.woocommerce-checkout .wc-block-components-checkout-step__description,
body.woocommerce-cart .wc-block-components-checkout-step__description {
  color: #9ca3af !important;
}

/* 步骤序号圆点 → 橙色 */
body.woocommerce-checkout .wc-block-components-checkout-step__heading::before,
body.woocommerce-checkout .wc-block-components-checkout-step__icon {
  color: #f28c28 !important;
}

/* ---------- 3. 表单：输入框 / 下拉 / 标签 ---------- */
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout textarea,
body.woocommerce-checkout select,
body.woocommerce-cart input[type="text"],
body.woocommerce-cart input[type="email"],
body.woocommerce-cart select,
body.woocommerce-cart textarea {
  background: rgba(15, 17, 24, .75) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  color: #f3f4f6 !important;
  border-radius: 10px !important;
  padding: .7rem .85rem !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.woocommerce-checkout input::placeholder,
body.woocommerce-cart input::placeholder { color: #6b7280 !important; }
body.woocommerce-checkout input:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-cart input:focus {
  border-color: #f28c28 !important;
  box-shadow: 0 0 0 3px rgba(242, 140, 40, .20) !important;
  outline: none !important;
}
/* Woo 块输入组件的标签/说明 */
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-textarea label,
body.woocommerce-checkout .wc-block-components-select label,
body.woocommerce-cart .wc-block-components-text-input label {
  color: #9ca3af !important;
}
body.woocommerce-checkout .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .wc-block-components-textarea.is-active label {
  color: #f28c28 !important;
}
body.woocommerce-checkout .wc-block-components-validation-error,
body.woocommerce-cart .wc-block-components-validation-error {
  color: #f87171 !important;
}
/* 国家/地区下拉箭头 */
body.woocommerce-checkout .wc-block-components-select__label,
body.woocommerce-checkout .wc-block-components-country-input__label { color: #9ca3af !important; }

/* ---------- 4. 支付方式区块 ---------- */
body.woocommerce-checkout .wc-block-components-payment-methods,
body.woocommerce-checkout .wc-block-components-radio-control {
  color: #f3f4f6;
}
body.woocommerce-checkout .wc-block-components-radio-control__option {
  border-color: rgba(255, 255, 255, .10) !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-components-payment-method-label.is-active {
  border-color: rgba(242, 140, 40, .50) !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__input:checked,
body.woocommerce-checkout input[type="radio"]:checked {
  background-color: #f28c28 !important;
  border-color: #f28c28 !important;
}
body.woocommerce-checkout .wc-block-components-payment-method-label,
body.woocommerce-checkout .wc-block-components-radio-control__label {
  color: #f3f4f6 !important;
}
/* 支付方式说明文字 */
body.woocommerce-checkout .wc-block-components-payment-method__description,
body.woocommerce-checkout .wc-block-components-payment-method-description {
  color: #9ca3af !important;
}
/* Stripe 卡片元素容器 */
body.woocommerce-checkout .wc-stripe-elements-field,
body.woocommerce-checkout .wc-block-components-payment-method-content iframe {
  background: rgba(15, 17, 24, .75) !important;
  border-radius: 10px;
}

/* ---------- 5. 快捷支付（Google Pay / Apple Pay）容器 ---------- */
body.woocommerce-checkout .wc-block-components-express-payment,
body.woocommerce-checkout .wc-block-components-express-payment-continue-rule {
  color: #9ca3af !important;
}
body.woocommerce-checkout .wc-block-components-express-payment-continue-rule::before,
body.woocommerce-checkout .wc-block-components-express-payment-continue-rule::after {
  border-color: rgba(255, 255, 255, .10) !important;
}
/* Stripe express 按钮外层留白 */
body.woocommerce-checkout .wc-block-components-express-payment__event-buttons {
  gap: 8px;
}

/* ---------- 6. 订单摘要侧栏（玻璃卡） ---------- */
body.woocommerce-checkout .wc-block-components-order-summary,
body.woocommerce-checkout .wc-block-components-totals-wrapper,
body.woocommerce-cart .wc-block-components-totals-wrapper,
body.woocommerce-cart .wc-block-cart__main,
body.woocommerce-cart .wc-block-cart-items {
  color: #f3f4f6;
}
body.woocommerce-checkout .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-item__label { color: #9ca3af !important; }
body.woocommerce-checkout .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-components-totals-item__value { color: #f3f4f6 !important; }
body.woocommerce-checkout .wc-block-components-totals-footer-item,
body.woocommerce-checkout .wc-block-components-totals-item.wc-block-components-totals-footer-item {
  border-top-color: rgba(255, 255, 255, .10) !important;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-totals-item__value {
  color: #f28c28 !important;
  font-weight: 700;
}
/* 购物车条目行 */
body.woocommerce-cart .wc-block-cart-items__row,
body.woocommerce-checkout .wc-block-components-order-summary-item {
  border-color: rgba(255, 255, 255, .10) !important;
}
body.woocommerce-cart .wc-block-cart-item__image img { border-radius: 8px; }

/* ---------- 7. 按钮（下单 / 结算 / 优惠券） ---------- */
body.woocommerce-checkout .wc-block-components-button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-cart .wc-block-components-button,
body.woocommerce-checkout .wp-element-button,
body.woocommerce-cart .wp-element-button,
body.woocommerce-checkout button.button,
body.woocommerce-cart button.button {
  background: #f28c28 !important;
  color: #fff !important;
  border: 1px solid #f28c28 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
body.woocommerce-checkout .wc-block-components-button:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-cart .wc-block-components-button:hover,
body.woocommerce-cart button.button:hover {
  background: #d97a1c !important;
  border-color: #d97a1c !important;
}
/* 次级按钮（返回购物车 / 优惠券 / 数量增减） */
body.woocommerce-checkout .wc-block-components-button.is-outlined,
body.woocommerce-checkout .wc-block-components-button--secondary,
body.woocommerce-cart .wc-block-components-button.is-outlined,
body.woocommerce-cart .wc-block-cart__submit-button--secondary {
  background: rgba(255, 255, 255, .05) !important;
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, .16) !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector {
  background: rgba(15, 17, 24, .75);
  border-color: rgba(255, 255, 255, .10) !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector input {
  color: #f3f4f6 !important;
  background: transparent !important;
  border: none !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button {
  background: transparent !important;
  color: #f28c28 !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

/* ---------- 8. 提示条 / 分隔线 / 复选框 ---------- */
body.woocommerce-checkout .wc-block-components-notice-banner,
body.woocommerce-cart .wc-block-components-notice-banner {
  background: rgba(242, 140, 40, .10) !important;
  border: 1px solid rgba(242, 140, 40, .45) !important;
  color: #f28c28 !important;
  border-radius: 10px;
}
body.woocommerce-checkout .wc-block-components-notice-banner.is-error,
body.woocommerce-cart .wc-block-components-notice-banner.is-error {
  background: rgba(248, 113, 113, .12) !important;
  border-color: rgba(248, 113, 113, .45) !important;
  color: #f87171 !important;
}
body.woocommerce-checkout .wc-block-components-notice-banner svg,
body.woocommerce-cart .wc-block-components-notice-banner svg { fill: currentColor !important; }
body.woocommerce-checkout input[type="checkbox"] { accent-color: #f28c28; }
body.woocommerce-checkout .wc-block-components-checkbox__label,
body.woocommerce-checkout .wc-block-components-checkbox label { color: #f3f4f6 !important; }
body.woocommerce-checkout .wc-block-components-checkbox__mark { fill: #f28c28 !important; }
body.woocommerce-checkout hr,
body.woocommerce-cart hr,
body.woocommerce-checkout .wc-block-components-checkout-step {
  border-color: rgba(255, 255, 255, .10) !important;
}

/* ---------- 9. 链接 ---------- */
body.woocommerce-checkout a,
body.woocommerce-cart a { color: #f28c28; }
body.woocommerce-checkout a:hover,
body.woocommerce-cart a:hover { color: #ffd0a0; }

/* ---------- 10. 移动端微调 ---------- */
@media (max-width: 768px) {
  body.woocommerce-checkout .wc-block-checkout,
  body.woocommerce-cart .wc-block-cart { padding-left: 12px !important; padding-right: 12px !important; }
  body.woocommerce-checkout .wc-block-components-button,
  body.woocommerce-cart .wc-block-components-button { width: 100%; }
}