/**
 * Customer order area — history, detail, timeline, returns.
 *
 * Rides on the tokens already declared by checkout.css so it themes with the
 * rest of the storefront.
 */

.gms-orders {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  font-family: var(--gms-font, inherit);
  color: var(--gms-ink, #111827);
}

.gms-orders__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gms-muted, #6b7280);
  text-decoration: none;
}

.gms-orders__back:hover { color: var(--gms-ink, #111827); }

/* ---- List ---------------------------------------------------------- */

.gms-orders__list {
  display: grid;
  gap: 12px;
}

.gms-order-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--gms-surface, #fff);
  border: 1px solid var(--gms-line, #e5e7eb);
  border-radius: var(--gms-radius, 14px);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}

.gms-order-row:hover {
  border-color: var(--gms-brand, #2563eb);
  transform: translateY(-1px);
}

.gms-order-row__main { display: grid; gap: 3px; min-width: 0; }
.gms-order-row__main strong { font-size: 15px; letter-spacing: -.01em; }
.gms-order-row__main em { font-style: normal; font-size: 13px; color: var(--gms-muted, #6b7280); }

.gms-order-row__thumbs { display: flex; }

.gms-order-row__thumbs img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--gms-surface, #fff);
  background: var(--gms-sunken, #f3f4f6);
}

/* Overlap them so three thumbnails read as one group, not a row of tiles. */
.gms-order-row__thumbs img + img { margin-left: -12px; }

.gms-order-row__right { display: grid; gap: 4px; justify-items: end; text-align: right; }

/* ---- Status pill ---------------------------------------------------- */

.gms-pill-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--gms-sunken, #f3f4f6);
  color: var(--gms-muted, #6b7280);
  white-space: nowrap;
}

.gms-pill-status.is-processing { background: #eef2ff; color: #3730a3; }
.gms-pill-status.is-shipped    { background: #ecfeff; color: #155e75; }
.gms-pill-status.is-delivered  { background: #ecfdf5; color: #065f46; }
.gms-pill-status.is-pending    { background: #fffbeb; color: #92400e; }
.gms-pill-status.is-cancelled,
.gms-pill-status.is-failed     { background: #fef2f2; color: #991b1b; }
.gms-pill-status.is-refunded   { background: #f5f3ff; color: #5b21b6; }

/* ---- Single order --------------------------------------------------- */

.gms-order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.gms-order-head h2 { margin: 0 0 2px; font-size: 19px; letter-spacing: -.01em; }
.gms-order-head p  { margin: 0; font-size: 13px; color: var(--gms-muted, #6b7280); }

.gms-order-awb {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--gms-sunken, #f3f4f6);
  font-size: 13px;
  font-weight: 600;
}

/* ---- Timeline ------------------------------------------------------- */

.gms-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.gms-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding-bottom: 20px;
}

.gms-timeline li:last-child { padding-bottom: 0; }

/* The connecting rail, drawn from each dot down to the next one. */
.gms-timeline li::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 16px;
  bottom: -4px;
  width: 2px;
  background: var(--gms-line, #e5e7eb);
}

.gms-timeline li:last-child::before { display: none; }
.gms-timeline li.is-done::before { background: var(--gms-brand, #2563eb); }

.gms-timeline__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gms-line, #e5e7eb);
  background: var(--gms-surface, #fff);
  position: relative;
  z-index: 1;
}

.gms-timeline li.is-done .gms-timeline__dot {
  border-color: var(--gms-brand, #2563eb);
  background: var(--gms-brand, #2563eb);
}

/* A tick inside completed steps, drawn rather than shipped as an image. */
.gms-timeline li.is-done .gms-timeline__dot::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.gms-timeline__body { display: grid; gap: 2px; padding-top: 1px; }
.gms-timeline__body strong { font-size: 14px; font-weight: 600; color: var(--gms-muted, #6b7280); }
.gms-timeline li.is-done .gms-timeline__body strong { color: var(--gms-ink, #111827); }
.gms-timeline__body em { font-style: normal; font-size: 12.5px; color: var(--gms-muted, #6b7280); }

/* ---- Returns -------------------------------------------------------- */

.gms-return-ref {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.gms-return-note,
.gms-return-policy {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gms-muted, #6b7280);
}

.gms-return-policy {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--gms-sunken, #f3f4f6);
  white-space: pre-line;
}

.gms-return-form { display: grid; gap: 12px; }
.gms-return-form .gms-btn-solid { justify-self: start; }

.gms-return-form textarea.gms-field__input {
  resize: vertical;
  min-height: 60px;
  font: inherit;
}

/* ---- Cancelling ------------------------------------------------------
   Deliberately quieter than everything around it. The button is a ghost
   button and the destructive colour appears only once the customer has
   opened the form and is looking at the reason field — nobody should be
   able to cancel an order by mis-tapping a red button on the way past. */

.gms-cancel-form { display: grid; gap: 12px; }

.gms-cancel-form textarea.gms-field__input {
  resize: vertical;
  min-height: 60px;
  font: inherit;
}

.gms-cancel-form__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.gms-btn-solid--danger {
  background: var(--gms-bad, #b42318);
  border-color: var(--gms-bad, #b42318);
  color: #fff;
}

.gms-btn-solid--danger:hover,
.gms-btn-solid--danger:focus-visible {
  /* Darker, not a different hue: the button must not look like it turned
     into a different button under the finger. */
  background: #8f1d13;
  border-color: #8f1d13;
  color: #fff;
}

/* ---- Mobile --------------------------------------------------------- */

@media (max-width: 600px) {
  .gms-orders { padding: 16px 12px 80px; }

  .gms-order-row {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  /* Thumbnails are the first thing to go — the number and the price are what
     someone scanning their history is actually looking for. */
  .gms-order-row__thumbs { display: none; }

  .gms-order-head { flex-direction: column; gap: 8px; }
}