/* Page-specific styling on top of the shared checkout stylesheet. */
/* Signed out this is a form and should stay a reading column; signed in it is a
   dashboard and needs the screen. One page, two widths, switched by the class
   the script adds on a successful lookup. */
.lookup-layout { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; transition: max-width .2s ease; }
.lookup-layout.is-signed-in { max-width: 1320px; padding-top: 28px; }
.lookup-intro h1 { font: 500 44px/1.15 var(--serif, serif); letter-spacing: -.04em; margin: 12px 0 18px; }
.lookup-intro p { font-size: 14px; line-height: 1.85; opacity: .82; max-width: 46em; }

.lookup-panel { margin-top: 44px; padding: 26px; border: 1px solid var(--line, rgba(29,41,35,.2)); }
.lookup-panel h2 { font: 600 20px/1.3 var(--serif, serif); margin: 0 0 18px; }
.lookup-panel label { display: grid; gap: 8px; margin-top: 16px; font: 12px/1.4 var(--sans, sans-serif); }
.lookup-panel input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line, rgba(29,41,35,.2));
  background: var(--card, #fff9ef); color: var(--ink, #1d2923); font: 15px/1.5 var(--sans, sans-serif);
}
.lookup-panel button {
  margin-top: 22px; width: 100%; padding: 14px; border: 0; cursor: pointer;
  background: var(--red, #b6462e); color: var(--card, #fff9ef);
  font: 600 15px/1 var(--sans, sans-serif);
}
.lookup-panel button[disabled] { opacity: .6; cursor: default; }

.order-result { margin-top: 44px; padding: 26px; border: 2px solid var(--ink, #1d2923); }
.order-result h2 { font: 600 22px/1.3 var(--serif, serif); margin: 0 0 24px; }
.order-result h3 { font: 600 15px/1.3 var(--serif, serif); margin: 28px 0 12px; }

/* The track shows the whole journey so a customer can see what comes next,
   not just where they are now. */
.status-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.status-track li {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 4px 14px;
  padding: 12px 14px; background: var(--mist, #eef1ea); opacity: .45;
}
.status-track li span { font: 11px/1.6 var(--mono, monospace); letter-spacing: .1em; opacity: .7; }
.status-track li strong { font: 600 14px/1.3 var(--sans, sans-serif); }
.status-track li small { grid-column: 2; font-size: 12px; opacity: .75; }
.status-track li.is-done { opacity: .8; }
.status-track li.is-current {
  opacity: 1; background: var(--card, #fff9ef);
  border-left: 4px solid var(--red, #b6462e); padding-left: 10px;
}

.result-facts { margin: 26px 0 0; display: grid; grid-template-columns: 6em 1fr; gap: 10px 16px; font-size: 13px; }
.result-facts dt { font: 10px/1.7 var(--mono, monospace); letter-spacing: .1em; opacity: .7; }
.result-facts dd { margin: 0; }

.result-items { list-style: none; margin: 0; padding: 0; }
.result-items li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--line, rgba(29,41,35,.2)); font-size: 14px;
}
.result-help { margin-top: 26px; font-size: 12px; line-height: 1.8; opacity: .8; }
.order-footer { padding: 32px 24px; text-align: center; font-size: 12px; opacity: .7; }

/* The money breakdown. Line totals are undiscounted, so the discount needs its
   own row or the figures read as a mistake. */
.result-total {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line, rgba(29,41,35,.2));
  display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 13px;
}
.result-total > div { display: contents; }
.result-total dt { opacity: .78; }
.result-total dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.result-total .is-total { font: 600 17px/1.3 var(--sans, sans-serif); opacity: 1; padding-top: 6px; }

/* A customer whose checkout session expired at the bank has already paid.
   This is their way back in without creating a second order. */
.pending-transfer {
  margin: 28px 0 0; padding: 22px;
  border: 1px solid var(--ink, #1d2923); background: var(--mist, #eef1ea);
}
.pending-transfer h3 { margin: 0 0 8px; font-size: 18px; }
.pending-transfer > p { margin: 0 0 14px; font-size: 13px; line-height: 1.75; }
.transfer-account { margin: 0 0 18px; font-size: 13px; }
.transfer-account dt { font-weight: 700; margin-top: 8px; }
.transfer-account dd { margin: 2px 0 0; font-family: var(--mono, monospace); }
.pending-transfer label { display: grid; gap: 6px; margin-top: 14px; font-size: 12px; }
.pending-transfer input { width: 100%; padding: 10px 12px; border: 1px solid var(--line, #ccc); background: #fff; font-size: 15px; }
.pending-transfer button { width: 100%; min-height: 50px; margin-top: 20px; border: 1px solid var(--red, #b6462e); background: var(--red, #b6462e); color: #fff; font-weight: 700; cursor: pointer; }
.pending-status { margin: 12px 0 0; font-size: 13px; line-height: 1.7; }

/* One phone can own several orders. The customer names which one before any
   session is issued for it. */
.order-choices { margin-top: 28px; padding: 22px; border: 1px solid var(--ink, #1d2923); }
.order-choices h2 { margin: 0 0 6px; font-size: 20px; }
.order-choices > p { margin: 0 0 16px; font-size: 13px; opacity: .8; }
.choices-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.choice-button {
  display: grid; gap: 4px; width: 100%; padding: 14px 16px; text-align: left;
  border: 1px solid var(--line, #ccc); background: #fff; cursor: pointer;
}
.choice-button:hover { border-color: var(--ink, #1d2923); }
.choice-button strong { font-family: var(--mono, monospace); letter-spacing: .04em; }
.choice-button span { font-size: 12px; opacity: .75; }
/* The order still owing a transfer report is the one they came back for. */
.choice-button.is-pending { border-color: var(--red, #b6462e); border-width: 2px; }
.choice-action { margin-top: 4px; font-weight: 700; opacity: 1 !important; }
.choice-button.is-pending .choice-action { color: var(--red, #b6462e); }

/* --- Dashboard ------------------------------------------------------------
   A returning buyer asks three questions in this order: do I still owe money,
   where is my parcel, what did I buy last time. The layout answers all three
   before any click. */
.dashboard { margin-top: 28px; }
.dashboard-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.dashboard-bar h2 { margin: 0; font-size: 26px; }
.dashboard-who { margin: 4px 0 0; font: 12px/1.5 var(--mono, monospace); opacity: .7; }

.dashboard-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 0 0 26px; padding: 0; background: var(--line, #d9d4c7);
  border: 1px solid var(--line, #d9d4c7);
}
.dashboard-summary > div { padding: 14px 16px; background: var(--card, #fdfaf3); }
.dashboard-summary dt { margin: 0; font-size: 11px; letter-spacing: .04em; opacity: .7; }
.dashboard-summary dd { margin: 6px 0 0; font: 700 22px/1 var(--mono, monospace); }
/* When something is waiting on the customer, that number is the whole message. */
.dashboard-summary.has-action > div:first-child dd { color: var(--red, #b6462e); }

.order-group { margin-bottom: 30px; }
.order-group h3 { margin: 0 0 4px; font-size: 17px; }
.order-group.is-action h3 { color: var(--red, #b6462e); }
.group-note { margin: 0 0 12px; font-size: 12px; line-height: 1.6; opacity: .75; }
.dashboard-help { margin: 24px 0 0; font-size: 12px; line-height: 1.75; opacity: .8; }

.back-to-list { display: inline-block; margin-bottom: 14px; }
.result-next {
  margin: 0 0 22px; padding: 12px 14px;
  border-left: 3px solid var(--green, #315c45); background: rgba(49, 92, 69, .07);
  font-size: 13px; line-height: 1.75;
}
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.button-reorder {
  padding: 12px 20px; border: 1px solid var(--ink, #1d2923);
  font-weight: 700; font-size: 13px; text-decoration: none; color: inherit;
}
.button-reorder:hover { background: var(--ink, #1d2923); color: var(--card, #fdfaf3); }
.result-support { font-size: 13px; }

@media (max-width: 640px) {
  .dashboard-summary { grid-template-columns: repeat(2, 1fr); }
}

/* Customer-side dashboard: the shell comes from ../dashboard.css; only what is
   specific to a buyer's view lives here. */
.topbar-heading { margin: 0; font-size: 16px; }
.topbar-link { font-size: 13px; }
.order-group + .order-group { margin-top: 0; }
.order-group h2 { font-size: 15px; }
.order-group.is-action h2 { color: var(--red, #b6462e); }
.group-note { margin: 0 0 12px; font-size: 12px; line-height: 1.6; opacity: .75; }
.choices-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.chart-panel.is-narrow { max-width: 360px; }