/* ---------- Order History page (/order-history/) ----------
   Adapted from the static prototype's own css/sections/order-history.css.
   Follows the same section rhythm every other section uses (--section-pad-
   block/--section-header-gap tokens aside — see --oh-gap below) rather than
   inventing a new page-shell language. */

/* Extra top clearance because, unlike every homepage section, this page has
   no full-bleed hero above it to push content below the fixed .site-header. */
.order-history-page {
  padding-top: clamp(7rem, 14vw, 9rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  min-height: 60vh;
  /* One shared rhythm for every major block on this page — breadcrumb,
     title+subtitle, filter tabs, and the table all space off this same
     value rather than each picking its own. */
  --oh-gap: clamp(1.5rem, 3vw, 2rem);
}
/* A plain, un-narrowed .a-wrap (max-width: var(--wrap), same as
   .site-header's) so both edges line up with the navbar — the logo on one
   side, "Get a Quote"/hamburger on the other — rather than reading-width-
   capping the table stranded short of the nav's own right edge. */

.order-history-breadcrumb { margin-bottom: var(--oh-gap); }
.order-history-breadcrumb ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: var(--small);
  font-weight: 500;
}
.order-history-breadcrumb li { display: flex; align-items: center; }
.order-history-breadcrumb a { color: var(--muted); }
.order-history-breadcrumb a:hover { color: var(--terracotta); }
.order-history-breadcrumb li[aria-current="page"] { color: color-mix(in srgb, var(--ink) 65%, var(--muted) 35%); }
.order-history-breadcrumb-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  font-size: 0.8em;
}
.order-history-breadcrumb-sep i { line-height: 1; transform: rotate(-90deg); }

.order-history-page-head { margin-bottom: var(--oh-gap); }
.order-history-page-head h1 {
  font-size: var(--h2);
  letter-spacing: -0.005em;
  line-height: 1.08;
  margin-bottom: 0.35em;
}
.order-history-subtitle { color: var(--muted); margin: 0; }

.order-history-card { }

.order-history-tabs {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 1.5rem;
  margin-bottom: var(--oh-gap);
}
.order-history-tab {
  display: inline-block;
  padding: 0.1rem 0 0.85rem;
  font-size: var(--small);
  font-weight: 500;
  color: var(--muted);
}
.order-history-tab:hover,
.order-history-tab:focus-visible { color: var(--ink); }
.order-history-tab.is-active { color: var(--terracotta); }

/* The table container is the grid; each .order-history-row (a <details>
   element) locks onto its shared column template via subgrid, so the head
   row's split and every body row's split come from the same grid rather
   than each computing its own from its own content. */
.order-history-table {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr auto;
}
.order-history-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding-block: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.order-history-row--head {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 1rem;
  font-size: var(--small);
  font-weight: 600;
  color: var(--muted);
  border-top: none;
  padding-block: 0 0.75rem;
}
/* <details><summary> is what makes "View details" an accessible, native
   disclosure with no JS — display:contents on the summary lifts its own
   children up to be direct grid items of .order-history-row (the <details>),
   landing on the same subgrid columns as the head row above. The trailing
   <dl> below the summary (also a direct child of the grid) then spans the
   full row width on its own line. */
.order-history-row-summary {
  display: contents;
  cursor: pointer;
  list-style: none;
}
.order-history-row-summary::-webkit-details-marker,
.order-history-row-summary::marker { display: none; content: ""; }
.order-history-row-summary > * {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0;
}
.order-history-row[open] .order-history-details-btn i { transform: rotate(180deg); }

.order-history-product { display: flex; align-items: center; gap: 0.85rem; }
.order-history-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--ink) 6%, var(--bg));
  border-radius: var(--radius-card-icon);
  color: var(--muted);
  font-size: 1.25rem;
}
.order-history-product strong { display: block; font-weight: 600; }
.order-history-product small { display: block; color: var(--muted); font-size: var(--small); margin-top: 0.15em; }

/* Explicit traffic-light hues (orange/green/red) — a functional state
   indicator on a signed-in customer's own order-status readout, following
   the same orange/green/red convention every order-tracking UI uses, not a
   decorative accent competing with the brand's terracotta spark. Plain
   colored text, no pill background/border. */
.order-status {
  display: inline-block;
  font-size: var(--small);
  font-weight: 600;
  padding: 0.3em 0.75em;
}
.order-status--pending { color: #A16207; }
/* Blue, not a fourth warm hue: pending/completed/cancelled already own
   amber/green/red, and "in progress" is the one state in the set that is
   neither a warning nor an outcome. Blue is what every tracking UI uses for
   it, so it needs no learning. */
.order-status--processing { color: #1D4ED8; }
.order-status--completed { color: #15803D; }
.order-status--cancelled { color: #B91C1C; }

.order-history-details-btn {
  color: var(--muted);
  font-size: var(--small);
  font-weight: 500;
}
.order-history-details-btn i { transition: transform 0.15s ease; }
.order-history-row-summary:hover .order-history-details-btn,
.order-history-row-summary:focus-visible .order-history-details-btn { color: var(--terracotta); }

/* Overrides .result-lines' shared label/value layout (theme's modals.css —
   label left, value pushed to the far right) for this page's own wider
   table: a narrow fixed-width label column with the value left-aligned
   right beside it, indented under the row's own product name/thumb above
   (3.6rem = .order-history-thumb's 2.75rem width + .order-history-product's
   0.85rem gap). Two classes combined gives this the specificity it needs to
   win regardless of the two stylesheets' load order. */
.order-history-details.result-lines {
  grid-column: 1 / -1;
  margin: 0 0 0.5rem;
  padding-left: 3.6rem;
}
.order-history-details.result-lines > div {
  justify-content: flex-start;
  gap: 1.5rem;
  border-top: none;
}
.order-history-details.result-lines dt {
  flex: 0 0 9rem;
}
.order-history-details.result-lines dd {
  flex: 1;
  text-align: left;
}

.order-history-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.order-history-link-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-card-icon);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--muted);
}
.order-history-link-thumb:hover { color: var(--terracotta); border-color: currentColor; }

.order-history-empty,
.order-history-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
}
.order-history-empty i,
.order-history-guest i { font-size: 2rem; }
.order-history-empty .btn,
.order-history-guest .btn { margin-top: 0.5rem; }

@media (max-width: 640px) {
  .order-history-row,
  .order-history-row--head { grid-template-columns: 1fr; }
  .order-history-row-summary > * { flex-wrap: wrap; }
  .order-history-row--head { display: none; }
  .order-history-details.result-lines { padding-left: 1.25rem; }
  .order-history-details.result-lines dt { flex-basis: 6rem; }
}

/* ---------- Cancel an order, and the result of having done so ----------
   Rendered only for a pending order (blocks/order-history/render.php); the
   handler re-checks both the ownership and the status regardless. */
.order-history-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem 1rem;
}
.order-history-actions form { margin: 0; }

/* Smaller than the page's primary buttons on purpose. Cancelling is a
   destructive action nobody should reach for by accident, so it gets the
   least prominent treatment available rather than sitting at the same
   weight as "Create an order". */
.order-history-actions .btn-small {
  font-size: var(--small);
  padding: 0.5em 1.1em;
}

.order-history-notice {
  margin: 0 0 1rem;
  padding: 0.75em 1em;
  border-radius: var(--radius);
  border-left: 3px solid currentColor;
  font-size: var(--small);
}
.order-history-notice--success {
  color: #15803D;
  background: color-mix(in srgb, #15803D 8%, transparent);
}
.order-history-notice--error {
  color: #B91C1C;
  background: color-mix(in srgb, #B91C1C 8%, transparent);
}