/* ==========================================================================
   My Account — order stages: status badges + the order tracker
   (woocommerce/myaccount/view-order.php, orders.php, dashboard.php).
   Stages come from grillsons-core/includes/order-stages.php. Account pages
   only; loads after design-system.css and mobile.css. Phone first: the
   tracker is a vertical timeline, and a row of five steps from 720px.
   ========================================================================== */

/* ---- Status badges (order history rows) -------------------------------- */
.gs-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gs-status--live { color: var(--gold-bright); background: rgba(212,162,78,0.14); }
.gs-status--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
  animation: gsStagePulse 1.6s ease-in-out infinite;
}
.gs-status--wait { color: var(--text-2); background: rgba(237,230,216,0.07); }
.gs-status--off { color: #E07A6A; background: rgba(140,47,35,0.18); }

@keyframes gsStagePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- The order page ----------------------------------------------------- */
.gs-vo { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }

.gs-vo__back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none; transition: color .2s;
}
.gs-vo__back:hover { color: var(--gold-bright); }
.gs-vo__back svg { flex: none; }
[dir="rtl"] .gs-vo__back svg { transform: scaleX(-1); }

.gs-vo__card {
  position: relative; overflow: hidden;
  background: var(--surface-2); border: 1px solid rgba(237,230,216,0.09); border-radius: 14px;
  padding: 18px 16px 16px;
}
.gs-vo__card--live { background: linear-gradient(160deg, rgba(212,162,78,0.10), var(--surface-2) 46%); border-color: rgba(212,162,78,0.28); }
.gs-vo__card--ok { background: linear-gradient(160deg, rgba(123,191,112,0.10), var(--surface-2) 46%); border-color: rgba(123,191,112,0.28); }
.gs-vo__card--off { background: linear-gradient(160deg, rgba(140,47,35,0.16), var(--surface-2) 50%); border-color: rgba(140,47,35,0.4); }

.gs-vo__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gs-vo__num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.gs-vo__title {
  font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text-bright); margin: 10px 0 6px;
}
.gs-vo__card--ok .gs-vo__title { color: #A6D99C; }
.gs-vo__card--off .gs-vo__title { color: #E9A091; }
.gs-vo__blurb { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin: 0; max-width: 56ch; }

/* ---- Tracker: vertical (phone) ------------------------------------------ */
.gs-track { list-style: none; margin: 20px 0 2px; padding: 0; display: flex; flex-direction: column; }
.gs-track__step { position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; align-items: start; padding-bottom: 18px; }
.gs-track__step:last-child { padding-bottom: 0; }
/* Connector to the next step. */
.gs-track__step::before {
  content: ""; position: absolute; inset-inline-start: 13px; top: 30px; bottom: 2px; width: 2px; border-radius: 2px;
  background: var(--hairline-2);
}
.gs-track__step:last-child::before { display: none; }
.gs-track__step.is-done::before { background: var(--gold); }

.gs-track__dot {
  position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--hairline-3); background: var(--bg); color: var(--surface-ink); box-sizing: border-box;
}
.gs-track__dot svg { width: 14px; height: 14px; }
.is-done .gs-track__dot { background: var(--gold); border-color: var(--gold); }
.is-done.is-final .gs-track__dot { background: var(--green); border-color: var(--green); }
.is-current .gs-track__dot { border-color: var(--gold-bright); background: rgba(231,178,78,0.12); box-shadow: 0 0 0 5px rgba(231,178,78,0.10); }
.is-current .gs-track__dot::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-bright);
  animation: gsStagePulse 1.6s ease-in-out infinite;
}
.is-wait .gs-track__dot { border-color: var(--text-dim); background: transparent; box-shadow: none; }
.is-wait .gs-track__dot::after { background: var(--text-dim); animation: none; }

.gs-track__text { display: flex; flex-direction: column; gap: 2px; min-height: 28px; justify-content: center; }
.gs-track__label { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.25; color: var(--text-dim); }
.is-done .gs-track__label { color: var(--text-2); }
.is-current .gs-track__label { color: var(--text-bright); font-weight: 700; }
.gs-track__time { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.is-current .gs-track__time { color: var(--gold-bright); }

/* ---- Facts, points, help ------------------------------------------------ */
.gs-vo__facts { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); }
.gs-vo__facts > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gs-vo__facts dt {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.gs-vo__facts dd { margin: 0; font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.gs-vo__facts dd .gs-mono { font-family: var(--font-mono); color: var(--text-bright); }
.gs-vo__facts dd small { color: var(--text-dim); font-size: 12.5px; }

.gs-vo__points {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 13px;
  font-size: 13.5px; line-height: 1.4; color: var(--gold-bright);
  background: rgba(212,162,78,0.08); border: 1px solid rgba(212,162,78,0.22); border-radius: 10px;
}
.gs-vo__points svg { flex: none; }
.gs-vo__points--earned { color: #A6D99C; background: rgba(123,191,112,0.08); border-color: rgba(123,191,112,0.25); }

.gs-vo__help {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 12px; padding: 0 14px;
  border: 1px solid var(--hairline-2); border-radius: 10px; color: var(--text-2); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: border-color .2s, color .2s;
}
.gs-vo__help:hover { color: var(--text-bright); border-color: rgba(212,162,78,0.45); }
.gs-vo__help svg { flex: none; color: #7BBF70; }

/* ---- Customer notes from the shop ---------------------------------------- */
.gs-vo__updates { background: var(--surface-2); border: 1px solid rgba(237,230,216,0.09); border-radius: 14px; padding: 16px; }
.gs-vo__h { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text); margin: 0 0 10px; }
.gs-vo__updates ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gs-vo__updates time { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 3px; }
.gs-vo__updates p { margin: 0; font-size: 14px; color: var(--text-2); }

/* ---- WooCommerce order details below the tracker ------------------------- */
.woocommerce-account .gs-acct__content .woocommerce-order-details,
.woocommerce-account .gs-acct__content .woocommerce-customer-details {
  margin: 0 0 14px; padding: 16px; border: 1px solid rgba(237,230,216,0.09); border-radius: 14px; background: var(--surface-2);
}
.woocommerce-account .gs-acct__content .woocommerce-order-details__title,
.woocommerce-account .gs-acct__content .woocommerce-column__title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text); margin: 0 0 10px;
}
.woocommerce-account .gs-acct__content .woocommerce-table--order-details { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.woocommerce-account .gs-acct__content .woocommerce-table--order-details th,
.woocommerce-account .gs-acct__content .woocommerce-table--order-details td {
  padding: 10px 0; border-bottom: 1px solid var(--hairline); text-align: start; vertical-align: top; font-weight: 400; color: var(--text-2);
}
.woocommerce-account .gs-acct__content .woocommerce-table--order-details thead th {
  padding-top: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
}
.woocommerce-account .gs-acct__content .woocommerce-table--order-details td:last-child,
.woocommerce-account .gs-acct__content .woocommerce-table--order-details th:last-child { text-align: end; padding-inline-start: 12px; overflow-wrap: anywhere; }
.woocommerce-account .gs-acct__content .woocommerce-table--order-details .woocommerce-Price-amount { white-space: nowrap; }
.woocommerce-account .gs-acct__content .woocommerce-table--order-details .product-name a { color: var(--text); text-decoration: none; }
.woocommerce-account .gs-acct__content .woocommerce-table--order-details .wc-item-meta { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--text-dim); }
.woocommerce-account .gs-acct__content .woocommerce-table--order-details .wc-item-meta p { display: inline; margin: 0; }
.woocommerce-account .gs-acct__content .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .gs-acct__content .woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; }
.woocommerce-account .gs-acct__content .woocommerce-table--order-details tfoot th { color: var(--text-3); white-space: nowrap; }
.woocommerce-account .gs-acct__content .woocommerce-table--order-details tfoot tr:has(.gs-grand-total) th,
.woocommerce-account .gs-acct__content .woocommerce-table--order-details tfoot tr:has(.gs-grand-total) td { font-weight: 700; font-size: 16px; color: var(--gold-bright); }
.woocommerce-account .gs-acct__content .woocommerce-customer-details address { font-style: normal; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; border: 0; padding: 0; }
.woocommerce-account .gs-acct__content .woocommerce-customer-details .col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.woocommerce-account .gs-acct__content .woocommerce-customer-details .col2-set > * { float: none; width: auto; min-width: 0; }
.woocommerce-account .gs-acct__content .order-again { margin: 14px 0 0; }
.woocommerce-account .gs-acct__content .order-again .button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-btn); background: var(--gold); color: var(--surface-ink); font-weight: 700; text-decoration: none;
}

/* ---- Wider screens: the tracker becomes a row of five ------------------- */
@media (min-width: 720px) {
  .gs-vo__card { padding: 24px 26px 22px; }
  .gs-vo__title { font-size: 31px; }
  .gs-track { flex-direction: row; margin: 26px 0 4px; }
  .gs-track__step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 4px; }
  .gs-track__step::before { top: 13px; bottom: auto; width: auto; height: 2px; inset-inline-start: calc(50% + 18px); inset-inline-end: calc(-50% + 18px); }
  .gs-track__text { align-items: center; min-height: 0; }
  .gs-track__label { font-size: 14.5px; }
  .gs-vo__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .gs-vo__help { align-self: flex-start; display: inline-flex; }
}

/* ---- Arabic: no letter-spacing (it breaks the joins), body face ---------- */
.gs-rtl .gs-status,
.gs-rtl .gs-vo__back,
.gs-rtl .gs-vo__num,
.gs-rtl .gs-vo__facts dt,
.gs-rtl .gs-track__time,
.gs-rtl .gs-vo__updates time,
.gs-rtl .gs-acct__content .woocommerce-table--order-details thead th { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.gs-rtl .gs-status { font-size: 11.5px; }
.gs-rtl .gs-vo__back, .gs-rtl .gs-vo__num, .gs-rtl .gs-vo__facts dt { font-size: 12.5px; }
.gs-rtl .gs-track__time { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .gs-status--live::before, .is-current .gs-track__dot::after { animation: none; }
}