/* ============================================================
   orders.css  —  styles ONLY for the My Orders page.
   Scoped under .page-orders.
   ============================================================ */

/* ---------- toolbar ---------- */
.page-orders .ord-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.page-orders .ord-filter {
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); font-size: 12px; color: var(--muted); cursor: pointer;
  font-family: inherit; transition: all .15s;
}
.page-orders .ord-filter:hover { border-color: var(--navy-light); }
.page-orders .ord-filter.on { background: var(--navy); color: #fff; border-color: var(--navy); }

.page-orders .ord-search {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px;
  background: var(--surface); color: var(--muted);
}
.page-orders .ord-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 12px; color: var(--ink); width: 170px; }

/* ---------- table ---------- */
.page-orders .ord-table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.page-orders .ord-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.page-orders .ord-table th {
  padding: 11px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--muted); font-weight: 500; background: var(--surface2); text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.page-orders .ord-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink2); vertical-align: middle; white-space: nowrap; }
.page-orders .ord-table tbody tr:last-child td { border-bottom: none; }
.page-orders .ord-table tbody tr:hover td { background: var(--surface2); }
.page-orders .ord-svc { font-size: 13px; font-weight: 500; color: var(--ink); }
.page-orders .ord-id  { font-size: 11px; color: var(--muted); }
.page-orders .ord-coins.earn  { color: var(--orange); }
.page-orders .ord-coins.muted { color: var(--muted); }

/* status pills */
.page-orders .ord-status { font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.page-orders .ord-status.progress { background: var(--blue-bg);   color: var(--blue); }
.page-orders .ord-status.complete { background: var(--green-bg);  color: var(--green); }
.page-orders .ord-status.pending  { background: var(--orange-bg); color: var(--orange); }
.page-orders .ord-status.draft    { background: var(--surface2);  color: var(--muted); }

/* action buttons */
.page-orders .ord-actions { display: flex; gap: 6px; }
.page-orders .ord-btn {
  font-size: 11px; border: none; border-radius: 6px; padding: 5px 10px; cursor: pointer;
  font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  color: var(--blue); background: var(--blue-bg);
}
.page-orders .ord-btn.warn   { color: var(--orange); background: var(--orange-bg); }
.page-orders .ord-btn.gold   { color: var(--orange); background: var(--gold-pale); }
.page-orders .ord-btn.rebook { color: var(--navy); background: var(--surface2); border: 1px solid var(--border); }
.page-orders .ord-btn:hover { filter: brightness(0.96); }

.page-orders .ord-no-results { text-align: center; color: var(--muted); padding: 30px; font-size: 13px; }