/* =========================================================
   TRANG TRA CỨU ĐƠN HÀNG (page-tracking.php)
   Bám theo đúng token trong assets/css/base/variables.css và pattern
   card đã dùng ở dx-cart.css / dx-checkout.css:
     - card: bg charcoal, border ink, radius md
     - khối quan trọng: nâng viền lên gold-dim
     - CTA chính: gradient gold, chữ đen, font-mono uppercase
     - label: font-mono uppercase 11-12px letter-spacing .06em
     - breakpoint chính: 850px
     - input/select thật ép font-size 16px trên mobile (fix zoom iOS Safari)
   ========================================================= */

/* ⚠️ FIX BUG — nền vẫn trắng dù đã viết background đen:
   Trong markup thật, class "dx-scope" và "dx-tracking-page" nằm CHUNG
   trên đúng 1 thẻ <main id="main" class="dx-scope dx-tracking-page">,
   KHÔNG phải quan hệ cha/con. Selector cũ ".dx-scope.dx-tracking-page #main"
   (có khoảng trắng) đòi hỏi #main phải là HẬU DUỆ của 1 phần tử mang cả
   2 class đó — không bao giờ khớp vì #main chính là phần tử đó, không
   phải con của nó. Bỏ khoảng trắng để chọn đúng CHÍNH thẻ #main. */
.dx-scope.dx-tracking-page#main{
  background: var(--dx-black);
}

/* ---------- Breadcrumb (Home / Track Order) ----------
   ⚠️ Copy nguyên khối này từ dx-cart.css thay vì trỏ chung — trang
   tracking dùng page-tracking.php, KHÔNG phải trang WooCommerce cart/
   checkout, nên is_cart()/is_checkout() đều false và dx-cart.css /
   dx-checkout.css (nơi định nghĩa .checkout-page-title/.checkout-
   breadcrumbs) KHÔNG được enqueue ở đây. Nếu không khai lại, breadcrumb
   sẽ render trần trụi theo CSS mặc định của Flatsome (link xanh gạch
   chân) dù markup HTML đúng class. */
.dx-scope .checkout-page-title{
  background: var(--dx-charcoal);
  border-bottom: 1px solid var(--dx-ink);
  padding-block: 28px;
}
.dx-scope .checkout-breadcrumbs{
  font-family: var(--dx-font-body) !important;
  font-size: 12px !important;
  letter-spacing: .01em;
  text-transform: none;
  gap: 14px;
  display: flex;
  align-items: center;
}
.dx-scope .checkout-breadcrumbs a{
  color: var(--dx-muted-2) !important;
  opacity: 1 !important;
  text-decoration: none !important;
  transition: color .25s;
}
.dx-scope .checkout-breadcrumbs a:hover{
  color: var(--dx-ivory) !important;
}
.dx-scope .checkout-breadcrumbs a.current{
  color: var(--dx-gold) !important;
}
.dx-scope .checkout-breadcrumbs .divider{
  color: var(--dx-ink);
}

.dx-scope .dx-tracking-container{
  padding-block: 48px 80px;
}

.dx-scope .dx-tracking-container .container{
  max-width: 620px;
  margin-inline: auto;
}

/* ---------- Card dùng chung cho form + kết quả ----------
   Nâng cấp viền lên gold-dim + thêm glow nhẹ phía sau, đồng bộ với
   pattern "khối quan trọng" đã dùng ở .cart-sidebar / .col-inner.has-border
   (cart.css/checkout.css) — khối chứa form nhập liệu là điểm nhấn chính
   của trang này nên xứng đáng có border-treatment cao cấp hơn card thường. */
.dx-scope .dx-tracking-card{
  position: relative;
  background: var(--dx-charcoal);
  border: 1px solid var(--dx-gold-dim);
  border-radius: var(--dx-radius-md);
  padding: 32px 30px;
  box-shadow: 0 30px 70px -30px rgba(201,162,74,.25);
}
.dx-scope .dx-tracking-card + .dx-tracking-card,
.dx-scope .dx-tracking-result:not(:empty){
  margin-top: 24px;
}

.dx-scope .dx-tracking-title{
  font-family: var(--dx-font-display);
  color: var(--dx-ivory);
  font-size: 26px;
  margin-bottom: 8px;
}
.dx-scope .dx-tracking-subtitle{
  color: var(--dx-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 28px;
}

/* ---------- Form ---------- */
.dx-scope .dx-tracking-field{
  margin-bottom: 18px;
}
.dx-scope .dx-tracking-field label{
  display: block;
  font-family: var(--dx-font-body);
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--dx-muted);
  margin-bottom: 6px;
}
.dx-scope .dx-tracking-field label .required{
  color: #e0554a;
}
.dx-scope .dx-tracking-field input{
  width: 100%;
  background: var(--dx-charcoal-2);
  border: 1px solid var(--dx-ink);
  color: var(--dx-ivory);
  border-radius: var(--dx-radius-sm);
  padding: 13px 14px;
  font-size: 14px;
  font-family: var(--dx-font-body);
  box-sizing: border-box;
  transition: border-color .25s;
}
.dx-scope .dx-tracking-field input:focus{
  outline: none;
  border-color: var(--dx-gold-dim);
}

.dx-scope .dx-tracking-submit{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  background: linear-gradient(120deg, var(--dx-gold), var(--dx-gold-light)) !important;
  color: var(--dx-black) !important;
  font-family: var(--dx-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-transform: none;
  border: none !important;
  border-radius: var(--dx-radius-sm) !important;
  cursor: pointer;
  transition: box-shadow .3s, opacity .3s;
}
.dx-scope .dx-tracking-submit:hover{
  box-shadow: 0 10px 30px -10px rgba(201,162,74,.55);
}
.dx-scope .dx-tracking-submit:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Spinner trong nút — chỉ hiện khi form đang submit (JS toggle class is-loading) */
.dx-scope .dx-tracking-submit__spinner{
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(11,11,12,.35);
  border-top-color: var(--dx-black);
  border-radius: 50%;
  animation: dx-tracking-spin .7s linear infinite;
}
.dx-scope .dx-tracking-form.is-loading .dx-tracking-submit__spinner{
  display: inline-block;
}
@keyframes dx-tracking-spin{
  to{ transform: rotate(360deg); }
}

.dx-scope .dx-tracking-error{
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--dx-charcoal-2);
  border: 1px solid var(--dx-ink);
  border-left: 3px solid #e0554a;
  border-radius: var(--dx-radius-sm);
  color: var(--dx-ivory);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Kết quả tra cứu ---------- */
.dx-scope .dx-tracking-card--result{
  border-color: var(--dx-gold-dim) !important;
}

.dx-scope .dx-tracking-result__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.dx-scope .dx-tracking-result__eyebrow{
  font-family: var(--dx-font-body);
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--dx-muted-2);
  margin-bottom: 4px;
}
.dx-scope .dx-tracking-result__order-number{
  font-family: var(--dx-font-mono);
  color: var(--dx-ivory);
  font-size: 16px;
  letter-spacing: -0.02em;
}
.dx-scope .dx-tracking-result__meta{
  color: var(--dx-muted);
  font-size: 13px;
  margin-bottom: 28px;
}
.dx-scope .dx-tracking-result__subtitle{
  font-family: var(--dx-font-display);
  color: var(--dx-ivory);
  font-size: 18px;
  margin: 28px 0 14px;
}

/* Badge trạng thái — mặc định trung tính, riêng completed/processing tô
   màu để nhận diện nhanh; các trạng thái còn lại (pending, on-hold...)
   dùng chung style mặc định phía trên, không cần khai riêng từng cái */
.dx-scope .dx-tracking-status-badge{
  flex: 0 0 auto;
  font-family: var(--dx-font-body);
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--dx-muted);
  border: 1px solid var(--dx-ink);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}
.dx-scope .dx-tracking-status-badge--processing{
  color: var(--dx-gold);
  border-color: var(--dx-gold-dim);
}
.dx-scope .dx-tracking-status-badge--completed{
  color: #6fbf73;
  border-color: #6fbf73;
}
.dx-scope .dx-tracking-status-badge--cancelled,
.dx-scope .dx-tracking-status-badge--failed,
.dx-scope .dx-tracking-status-badge--refunded{
  color: #e0554a;
  border-color: #e0554a;
}

/* ---------- Timeline ---------- */
.dx-scope .dx-tracking-timeline{
  display: flex;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.dx-scope .dx-tracking-step{
  flex: 1 1 0;
  position: relative;
  text-align: center;
}
/* Đường nối giữa các chấm — vẽ bằng ::before trên MỌI step trừ step đầu,
   kéo dài từ mép trái ô sang tới giữa chấm của chính nó */
.dx-scope .dx-tracking-step::before{
  content: '';
  position: absolute;
  top: 11px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--dx-ink);
  z-index: 0;
}
.dx-scope .dx-tracking-step:first-child::before{
  display: none;
}
.dx-scope .dx-tracking-step--done::before{
  background: var(--dx-gold);
}

.dx-scope .dx-tracking-step__dot{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 auto 10px;
  background: var(--dx-charcoal-2);
  border: 1px solid var(--dx-ink);
  border-radius: 50%;
  color: var(--dx-black);
  transition: background .3s, border-color .3s;
}
.dx-scope .dx-tracking-step--done .dx-tracking-step__dot{
  background: var(--dx-gold);
  border-color: var(--dx-gold);
}
.dx-scope .dx-tracking-step--active .dx-tracking-step__dot{
  border-color: var(--dx-gold);
  box-shadow: 0 0 0 3px rgba(201,162,74,.18);
}
.dx-scope .dx-tracking-step--active .dx-tracking-step__dot::after{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dx-gold);
}

.dx-scope .dx-tracking-step__label{
  display: block;
  font-family: var(--dx-font-body);
  font-size: 10.5px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--dx-muted-2);
}
.dx-scope .dx-tracking-step--done .dx-tracking-step__label,
.dx-scope .dx-tracking-step--active .dx-tracking-step__label{
  color: var(--dx-ivory);
}

/* Trạng thái huỷ/hoàn tiền — thay thế toàn bộ timeline */
.dx-scope .dx-tracking-cancelled{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--dx-charcoal-2);
  border: 1px solid var(--dx-ink);
  border-left: 3px solid #e0554a;
  border-radius: var(--dx-radius-sm);
  padding: 16px 18px;
}
.dx-scope .dx-tracking-cancelled__icon{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(224,85,74,.14);
  color: #e0554a;
  font-size: 18px;
  line-height: 1;
}
.dx-scope .dx-tracking-cancelled__title{
  color: var(--dx-ivory);
  font-size: 14px;
  font-weight: 600;
}
.dx-scope .dx-tracking-cancelled__meta{
  color: var(--dx-muted-2);
  font-size: 12px;
  margin-top: 2px;
}

/* ---------- Bảng sản phẩm (tái dùng skin order-details) ----------
   ⚠️ Y HỆT bug đã gặp với breadcrumb ở trên: markup <table> dùng lại
   đúng class "woocommerce-table--order-details" từ trang order-received
   của WooCommerce để thừa hưởng style — nhưng style thật của class đó
   nằm trong dx-checkout.css, khối "TRANG ORDER RECEIVED" ở cuối file,
   CHỈ được enqueue khi is_checkout()/is_order_received(). Trang tracking
   dùng page-tracking.php nên không bao giờ load dx-checkout.css, khiến
   bảng hiện nguyên CSS mặc định của trình duyệt/WooCommerce core: chữ
   đen (trùng nền đen -> mất chữ), viền ô dày màu xám/trắng mặc định.
   Copy lại đúng khối style bảng đó vào đây, scope riêng theo
   .dx-tracking-product-table để không đụng gì tới trang order-received
   thật (class gốc "woocommerce-table--order-details" vẫn giữ nguyên để
   lỡ có styling khác từ Flatsome/WooCommerce core cũng không bị vỡ). */
.dx-scope .dx-tracking-product-table{
  margin-top: 4px;
  width: 100%;
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-md);
  border-collapse: separate;
  overflow: hidden;
  background: var(--dx-charcoal);
}
.dx-scope .dx-tracking-product-table thead th{
  background: var(--dx-charcoal-2);
  color: var(--dx-muted);
  font-family: var(--dx-font-body);
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
  font-weight: 500;
  border: none !important;
  padding: 14px 18px;
}
.dx-scope .dx-tracking-product-table th.product-total,
.dx-scope .dx-tracking-product-table td.product-total{
  text-align: right;
}
.dx-scope .dx-tracking-product-table tbody tr.order_item{
  border-bottom: 1px solid var(--dx-ink);
}
.dx-scope .dx-tracking-product-table td{
  border: none !important;
  padding: 16px 18px;
  vertical-align: top;
  color: var(--dx-ivory);
  font-family: var(--dx-font-display);
  font-size: 15px;
}
.dx-scope .dx-tracking-product-table td.product-name .product-quantity{
  font-family: var(--dx-font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--dx-muted-2);
  white-space: nowrap;
}
.dx-scope .dx-tracking-product-table .amount,
.dx-scope .dx-tracking-product-table .amount *{
  font-family: var(--dx-font-mono) !important;
  color: var(--dx-gold) !important;
}

/* tfoot — Subtotal / Shipping / Total */
.dx-scope .dx-tracking-product-table tfoot tr{
  border-top: 1px solid var(--dx-ink);
}
.dx-scope .dx-tracking-product-table tfoot th,
.dx-scope .dx-tracking-product-table tfoot td{
  border: none !important;
  padding: 13px 18px;
  font-size: 14px;
}
.dx-scope .dx-tracking-product-table tfoot th{
  font-family: var(--dx-font-body);
  font-size: 12px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--dx-muted-2);
  font-weight: 500;
  text-align: left;
}
.dx-scope .dx-tracking-product-table tfoot td{
  color: var(--dx-muted);
  text-align: right;
  font-family: var(--dx-font-body);
}
.dx-scope .dx-tracking-product-table tfoot .amount,
.dx-scope .dx-tracking-product-table tfoot .amount *{
  color: var(--dx-ivory) !important;
  font-family: var(--dx-font-mono) !important;
}
/* Hàng "Total" — luôn là hàng CUỐI trong tfoot (khớp thứ tự render ở
   tracking-result.php: Subtotal, Shipping, Total) */
.dx-scope .dx-tracking-product-table tfoot tr:last-child{
  border-top: 1px solid var(--dx-gold-dim) !important;
}
.dx-scope .dx-tracking-product-table tfoot tr:last-child th{
  color: var(--dx-ivory);
  font-size: 15px;
}
.dx-scope .dx-tracking-product-table tfoot tr:last-child .amount,
.dx-scope .dx-tracking-product-table tfoot tr:last-child .amount *{
  color: var(--dx-gold) !important;
  font-size: 19px !important;
  font-weight: 600;
}

/* ---------- Địa chỉ ---------- */
.dx-scope .dx-tracking-addresses{
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--dx-ink);
}
.dx-scope .dx-tracking-address-block__title{
  font-family: var(--dx-font-body);
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--dx-muted-2);
  margin-bottom: 8px;
}
.dx-scope .dx-tracking-address-block address{
  font-style: normal;
  color: var(--dx-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 850px){
  .dx-scope .dx-tracking-card{
    padding: 26px 20px;
  }
  .dx-scope .dx-tracking-result__head{
    flex-direction: column;
    gap: 10px;
  }
  .dx-scope .dx-tracking-step__label{
    font-size: 9.5px;
  }

  /* Fix zoom iOS Safari — input thật < 16px sẽ bị Safari tự zoom khi focus */
  .dx-scope .dx-tracking-field input{
    font-size: 16px !important;
  }
}