/* Shop flow shared additions
   Shared rules that should load on every shop-flow page. */

.wrapper.products_list,
.wrapper.products {
  overflow: visible;
}

.products_list_page .category_tabs_wrap,
.products .category_tabs_wrap {
  z-index: 30;
}

.shop_order_badge,
.confirm_status_ok,
.confirm_status_pending,
.confirm_status_fail,
.order_detail_page .od_badge,
.order_detail .od_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  border: 0;
}

.shop_order_badge::before {
  content: none !important;
}

/* === SKILL 3-color group rule（shop_order_badge_* 8 種固定 3 群） ===
   Group 1（付款階段）：pending + confirming → 暖色 / warning
   Group 2（配送階段）：packing + shipped + delivered（+ legacy processing）→ 冷色 / success
   Group 3（終止階段）：completed + cancelled + refunded → 中性灰 / neutral
   confirm_status_* 不屬於 8 變體 — 沿用語意色（ok=success / pending=warning / fail=danger） */

.shop_order_badge_pending,
.shop_order_badge_confirming,
.confirm_status_pending,
.order_detail_page .od_badge-pending,
.order_detail .od_badge-pending {
  color: var(--color-warning);
  background: rgba(var(--color-warning-rgb), 0.15);
}

.shop_order_badge_processing,
.shop_order_badge_packing,
.shop_order_badge_shipped,
.shop_order_badge_delivered,
.confirm_status_ok,
.order_detail_page .od_badge-success,
.order_detail .od_badge-success {
  color: var(--color-success);
  background: rgba(var(--color-success-rgb), 0.12);
}

.shop_order_badge_completed,
.shop_order_badge_cancelled,
.shop_order_badge_refunded {
  color: var(--color-grey-600);
  background: rgba(0, 0, 0, 0.06);
}

.confirm_status_fail,
.order_detail_page .od_badge-fail,
.order_detail .od_badge-fail {
  color: var(--color-danger);
  background: rgba(var(--color-danger-rgb), 0.12);
}