/* School Wear United returns portal
   ---------------------------------------------------------------------------
   Mobile first. Most parents do this on a phone, standing in a hallway, with a
   pile of uniform next to them. Everything below 640px is the primary case.

   Nothing here depends on JavaScript. The content security policy blocks
   scripts outright, so every state in this file is reachable with CSS alone.

   The palette and shapes are taken from schoolwearunited.co.uk so the portal
   reads as part of the shop rather than a bolted-on form: the same deep navy,
   the same gold, and the same pill buttons.
   ------------------------------------------------------------------------- */

/* The storefront uses Alata and Alatsi. Drop alata.woff2 and alatsi.woff2 into
   src/public/fonts/ and they are picked up automatically. Until then the stack
   falls through to the system UI font, which is a close enough humanist sans
   and costs nothing to load. No external font host is contacted, deliberately:
   that would send every customer's IP address to a third party. */
@font-face {
  font-family: "Alata";
  src: url("/fonts/alata.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alatsi";
  src: url("/fonts/alatsi.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brand, sampled from the storefront */
  --navy: #12303f;
  --navy-deep: #0b2130;
  --navy-mid: #1b4358;
  --gold: #f2c14e;
  --gold-hover: #e5b03a;
  --gold-soft: #fdf3dc;
  --gold-line: #e6cf5c;

  --ink: #17171a;
  --ink-2: #3a4550;
  --muted: #66707c;
  --paper: #f7f5f1;
  --surface: #ffffff;
  --line: #e4e0d8;
  --line-soft: #efece5;

  --good: #1f6b4a;
  --good-bg: #e9f3ed;
  --warn: #8a5a0b;
  --warn-bg: #fdf3dc;
  --bad: #a32b2b;
  --bad-bg: #fbecec;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 48, 63, .05);
  --shadow: 0 1px 2px rgba(18, 48, 63, .04), 0 12px 28px -18px rgba(18, 48, 63, .35);
  --shadow-lift: 0 2px 4px rgba(18, 48, 63, .06), 0 18px 36px -20px rgba(18, 48, 63, .45);

  --font: "Alata", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Alatsi", "Alata", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max: 46rem;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-mid); text-underline-offset: 2px; }
a:hover { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- shell ---------------------------------------------------------- */

.site-header {
  background: var(--navy);
  color: #fff;
  padding: 18px 20px 16px;
  border-bottom: 3px solid var(--gold);
}
.site-header a { color: #fff; text-decoration: none; }

.wordmark {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.wordmark span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--gold);
  border-left: 1px solid rgba(255, 255, 255, .28);
  padding-left: 10px;
}

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 16px 72px;
}

@media (min-width: 640px) {
  main { padding: 38px 24px 88px; }
}

/* ---------- type ----------------------------------------------------------- */

h1 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 4px 0 12px;
  color: var(--navy);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  margin: 30px 0 10px;
  color: var(--navy);
}
h3 { font-size: 17px; font-weight: 700; margin: 20px 0 8px; color: var(--navy); }
p  { margin: 0 0 15px; }

p.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 26px;
  text-wrap: pretty;
}
.muted { color: var(--muted); font-size: 15px; }

@media (min-width: 640px) {
  h1 { font-size: 36px; }
  h2 { font-size: 23px; }
}

/* ---------- progress ------------------------------------------------------- */

.steps {
  display: flex;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  counter-reset: step;
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--muted);
}
.steps li {
  flex: 1;
  position: relative;
  padding-top: 40px;
  text-align: center;
}
/* The connecting track, drawn behind the numbers. */
.steps li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
}
.steps li:first-child::before { left: 50%; }
.steps li:last-child::before { right: 50%; }

.steps li::after {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
.steps li.done { color: var(--ink-2); }
.steps li.done::before { background: var(--gold); }
.steps li.done::after {
  content: "\2713";
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.steps li.done ~ li::before { background: var(--line); }

.steps li.current { color: var(--navy); font-weight: 700; }
.steps li.current::after {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 4px var(--gold-soft);
}

/* ---------- cards ---------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 20px;
  margin: 0 0 20px;
  box-shadow: var(--shadow);
}
@media (min-width: 640px) {
  .card { padding: 28px 26px; }
}

/* ---------- forms ---------------------------------------------------------- */

label {
  display: block;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--navy);
  margin: 0 0 4px;
}
.hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.45;
  margin: 0 0 9px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* below 16px iOS zooms the page on focus */
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: #cfc9bd; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px var(--gold-soft);
}
input::placeholder, textarea::placeholder { color: #a6adb6; }

textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field { margin: 0 0 22px; }
.field:last-of-type { margin-bottom: 0; }

input[type="file"] {
  font-size: 15px;
  padding: 12px;
  width: 100%;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}

/* ---------- buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
  padding: 15px 30px;
  min-height: 54px;
  border: 2px solid var(--gold);
  border-radius: var(--pill);
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: background-color .12s ease, border-color .12s ease,
              box-shadow .12s ease, transform .06s ease;
}
.btn:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--navy);
  box-shadow: var(--shadow-lift);
}
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }

.btn-block { display: flex; width: 100%; }

.btn-secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--navy);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--surface);
  border-color: var(--navy);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 560px) {
  .actions { flex-direction: row-reverse; justify-content: flex-end; }
  .actions .btn { width: auto; }
}

/* ---------- notices -------------------------------------------------------- */

.notice {
  border: 1px solid var(--line);
  border-left: 5px solid var(--muted);
  background: var(--surface);
  padding: 18px 20px;
  margin: 0 0 20px;
  border-radius: var(--r-sm);
}
.notice p:last-child { margin-bottom: 0; }
.notice h2, .notice h3 { margin-top: 0; }
.notice-info { background: #fbfaf8; border-left-color: var(--navy); }
.notice-warn { background: var(--warn-bg); border-color: #f0dfb4; border-left-color: var(--gold); }
.notice-bad  { background: var(--bad-bg);  border-color: #f0d5d5; border-left-color: var(--bad); }
.notice-good { background: var(--good-bg); border-color: #cfe3d8; border-left-color: var(--good); }

.error-summary {
  border: 1.5px solid var(--bad);
  background: var(--bad-bg);
  padding: 18px 20px;
  border-radius: var(--r-sm);
  margin: 0 0 22px;
  box-shadow: var(--shadow-sm);
}
.error-summary h2 {
  margin: 0 0 8px;
  color: var(--bad);
  font-size: 18px;
  font-family: var(--font-display);
}
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary li { margin-bottom: 4px; }
.error-summary a, .error-summary p:last-child { color: var(--bad); margin-bottom: 0; }

/* ---------- item selection ------------------------------------------------- */

.item {
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  margin: 0 0 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.item:hover { border-color: #cfc9bd; }
.item.selected {
  border-color: var(--navy);
  box-shadow: var(--shadow), inset 4px 0 0 var(--gold);
}
.item.blocked {
  background: var(--paper);
  border-style: dashed;
  box-shadow: none;
}
.item-head { display: flex; gap: 14px; align-items: flex-start; }

/*
 * The thumbnail is an aid, not information: the name, size and colour still
 * carry the meaning, which is why the alt text is empty and the box holds its
 * shape whether or not the picture loads. object-fit keeps a portrait product
 * shot from stretching, and the neutral background stops a white-on-white
 * cutout from looking like a hole in the card.
 */
.item-thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
}

.item-text { min-width: 0; }

.summary-item { display: flex; gap: 12px; align-items: flex-start; }
.summary-item-text { min-width: 0; }
.item-thumb-sm { width: 44px; height: 44px; }
.item-head input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--navy);
}
.item-name { font-weight: 700; font-size: 17px; margin: 0 0 4px; color: var(--navy); }
.item-meta { font-size: 14.5px; color: var(--muted); margin: 0; }
.item-detail {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.qty-row { display: flex; gap: 14px; align-items: flex-end; }
.qty-row .field { flex: 0 0 100px; margin-bottom: 0; }
.qty-row .field-grow { flex: 1 1 auto; margin-bottom: 0; }

.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--pill);
  margin: 0 0 10px;
}
.tag-blocked { background: var(--bad-bg); color: var(--bad); }
.tag-check   { background: var(--warn-bg); color: var(--warn); }
.tag-review  { background: var(--gold-soft); color: var(--warn); }

/* Radio choices. Field labels are bold by default, which would drown out the
   explanation underneath, so the choice block resets the weight. */
label.choice {
  font-weight: 400;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
label.choice:hover { border-color: #cfc9bd; background: #fdfcfa; }
label.choice:has(input:checked) {
  border-color: var(--navy);
  background: var(--gold-soft);
}
label.choice input[type="radio"] {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--navy);
}
label.choice strong { font-weight: 700; color: var(--navy); }
.choice-help { color: var(--muted); font-size: 15px; font-weight: 400; }

/* ---------- summary -------------------------------------------------------- */

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.summary-row:last-child { border-bottom: none; }
.summary-row dt { color: var(--muted); font-size: 15px; margin: 0; }
.summary-row dd { margin: 0; text-align: right; font-weight: 700; color: var(--navy); }

.return-number {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--navy);
  background: var(--gold-soft);
  border: 2px dashed var(--gold-line);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  word-break: break-all;
}

.address-box {
  border: 2px solid var(--navy);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.75;
  background: #fff;
}

.write-this {
  border: 2px dashed var(--navy);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  background: #fff;
}
.write-this ol { margin: 0; padding-left: 22px; }
.write-this li { margin-bottom: 10px; }
.write-this li:last-child { margin-bottom: 0; }

/* ---------- photos --------------------------------------------------------- */

.photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.photo-list img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  display: block;
}

/* ---------- footer --------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 28px 20px 48px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.site-footer p { max-width: 44rem; margin: 0 auto 12px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--navy-mid); }

/* ---------- print ---------------------------------------------------------- */

/* ---------- printable returns note ----------------------------------------
   Sized and spaced so a browser's default print lands it comfortably on one
   A4 sheet, and so the on-screen version still reads as part of the portal
   rather than a bare document. */

.note-sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 30px 24px;
}

.note-head {
  border-bottom: 2px solid var(--navy);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.note-brand {
  margin: 0;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--navy);
  font-size: 17px;
}
.note-kind { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.note-number {
  border: 2px solid var(--navy);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 0 0 22px;
}
.note-label { margin: 0; font-size: 11px; letter-spacing: 1.2px; color: var(--muted); }

.note-sheet h3 {
  margin: 22px 0 8px;
  font-size: 15px;
  color: var(--navy);
}

.note-table { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
.note-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding: 0 8px 6px 0;
}
.note-table td {
  padding: 8px 8px 8px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.note-table .col-qty { width: 42px; }
.note-table .col-size { width: 70px; }
.note-sku { font-size: 12px; color: var(--muted); }

.note-foot {
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

@media print {
  .site-header, .site-footer, .steps, .actions, .no-print { display: none !important; }
  body { background: #fff; font-size: 12pt; color: #000; }
  .card, .item, .notice { border: none; box-shadow: none; padding: 0; }
  .note-sheet { border: none; border-radius: 0; padding: 0; }
  .note-table td, .note-table th { border-bottom: 1pt solid #ccc; }
  .address-box, .write-this, .return-number { border: 1pt solid #000; background: #fff; }
  a { color: #000; text-decoration: none; }
}

/* Someone who has asked their device to stop moving things should get that. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- small utilities ------------------------------------------------
   The content security policy blocks inline style attributes, which is the
   right setting, so the handful of one-off spacing tweaks the templates need
   live here as named classes instead. Keep this list short. */

.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.inline-hint { display: inline; font-weight: 400; }
.item-line { margin: 0 0 4px; }
.item-sub  { margin: 0 0 8px; font-size: 13px; }
.centre { text-align: center; }
.footer-legal { font-size: 13.5px; opacity: .9; }

/* A submit button that follows the last field inside a card needs the same
   breathing room the fields have between them. */
form.card > .btn { margin-top: 26px; }

/* Quantity sits beside the reason. One label wraps to two lines and the other
   does not, so give both the height of two lines and hang them off the bottom,
   otherwise the two labels sit at different heights and the row looks crooked. */
.qty-row label {
  min-height: 2.9em;
  display: flex;
  align-items: flex-end;
}
.write-this .muted { margin-top: 14px; margin-bottom: 0; }