/* ── Monday waste collections ───────────────────────────────────────────────
   Loaded only by the collections pages, through their own headExtras block, so
   nothing here can reach the rest of the site. Every class is wc- prefixed for
   the same reason.

   No new colours, no new fonts, no new radii. Everything is a token from
   tokens.css or a value already used elsewhere in components.css. Mobile first:
   the base rules are the 375px layout and the wider screens are the media
   queries. */

/* ── How it works panel ──────────────────────────────── */

.wc-intro {
  background: var(--secondary);
  border: 1px solid rgba(45, 49, 124, 0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.wc-intro__heading {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--primary-dark);
  margin: 0 0 var(--space-4);
}

.wc-intro p {
  margin: 0 0 var(--space-4);
  color: rgba(26, 30, 82, 0.85);
  line-height: 1.7;
}
.wc-intro p:last-child { margin-bottom: 0; }

/* The one line people are looking for. */
.wc-intro__free {
  font-weight: 600;
  color: var(--primary-dark);
}

/* The Sunday timeline. Every screen reflects it, so it is a real list rather
   than the ASCII block from the brief. */
.wc-timeline {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-2);
}

.wc-timeline li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(26, 30, 82, 0.85);
}

.wc-timeline__when {
  font-weight: 600;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

/* ── The date you are booking ─────────────────────────── */

.wc-date {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
}

.wc-date__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  opacity: 0.65;
  margin: 0 0 var(--space-2);
}

.wc-date__value {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--neutral-wood);
  margin: 0 0 var(--space-2);
}

.wc-date__note {
  font-size: 0.875rem;
  color: var(--neutral-wood);
  opacity: 0.7;
  margin: 0;
  line-height: 1.6;
}

.wc-date__skipped {
  font-size: 0.875rem;
  color: var(--neutral-wood);
  opacity: 0.7;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* ── Postcode check ───────────────────────────────────── */

.wc-postcode {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.wc-postcode__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.wc-postcode__field {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Postcodes are short and always upper case. */
.wc-input--postcode {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  max-width: 12rem;
}

.wc-feedback {
  margin: var(--space-4) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}
.wc-feedback[hidden] { display: none; }
.wc-feedback--ok {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}
.wc-feedback--no {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

/* ── Item list ────────────────────────────────────────── */

/* Each category is a <details>. Closed, the whole price list fits on one phone
   screen; open, it behaves exactly as the flat list did. */
.wc-category {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.wc-category__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 56px of header, so opening a category is an easy tap on a phone. */
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--neutral-wood);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
}

/* The browser's own triangle, removed in both dialects, so the chevron below is
   the only marker. */
.wc-category__name::-webkit-details-marker { display: none; }
.wc-category__name::marker { content: ''; }

.wc-category__name:hover { background: var(--neutral-paper); }

/* Focus lands on the summary, so the ring goes there and stays visible. */
.wc-category__name:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
}

.wc-category__label { flex: 1; min-width: 0; }

/* How many things are picked in a folded-away category. Without this you would
   have to open all eight to find what you had chosen. */
.wc-category__count {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px var(--space-3);
  border-radius: 999px;
  background: var(--primary);
  color: var(--white);
  white-space: nowrap;
}
.wc-category__count[hidden] { display: none; }

.wc-category__total {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  opacity: 0.5;
  white-space: nowrap;
}

.wc-category__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0.55;
  transition: transform 0.2s ease;
}
.wc-category[open] .wc-category__chevron { transform: rotate(180deg); }

.wc-category[open] .wc-category__name {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* The item list sits inside the panel, so it needs the padding the category used
   to have. Tighter on a phone, where every pixel of name width counts. */
.wc-category .wc-items {
  padding: 0 var(--space-4) var(--space-2);
}

@media (min-width: 480px) {
  .wc-category .wc-items {
    padding: 0 var(--space-5) var(--space-2);
  }
}

.wc-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* On a narrow phone the stepper is 150px of the ~320px available, which left the
   name about 110px and wrapped "Glass bottles and jars (per box or bag)" over four
   lines. So below 480px the name gets the full width and the stepper drops to its
   own row, right-aligned. Above that they sit side by side as one row.

   The stepper is not shrunk to make room: 44px targets are the floor on a phone
   and the long names are the thing that has to give. */
.wc-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.wc-item:last-child { border-bottom: none; }

/* Second row, under the name, pushed right. */
.wc-item .wc-stepper {
  grid-column: 2;
  justify-self: end;
}

@media (min-width: 480px) {
  .wc-item {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3) var(--space-4);
  }
  .wc-item .wc-stepper {
    grid-column: 3;
    justify-self: auto;
  }
}

/* Deliberately quiet. Sixty-four icons down a page will shout if you let them,
   and the name is what people actually read — the icon is there to help the eye
   land while scrolling, nothing more. Hence brand navy at low opacity rather than
   full strength, and a hairline stroke.

   No fill and currentColor throughout, so the whole set is one CSS rule away from
   any other colour if this turns out too faint on a phone in daylight. */
.wc-item__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0.45;
  transition: var(--transition-fast);
}

/* Once something is in the basket its icon comes up to full strength, which marks
   the chosen rows without adding anything new to the page. */
.wc-item.is-chosen .wc-item__icon {
  opacity: 1;
}

/* A row with something in it is worth spotting at a glance when scrolling back. */
.wc-item.is-chosen {
  background: var(--neutral-paper);
  box-shadow: -1rem 0 0 var(--neutral-paper), 1rem 0 0 var(--neutral-paper);
}

.wc-item__name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--neutral-wood);
  line-height: 1.4;
}

.wc-item__price {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--neutral-wood);
  opacity: 0.6;
  margin-top: 2px;
}

/* The caveat under an item — what counts as a box of glass, what is not
   included. Small and quiet, but the wording is doing real work: it is the
   difference between a box of jars and somebody's patio door. */
.wc-item__note {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--neutral-wood);
  opacity: 0.6;
  margin-top: 3px;
}

/* ── Quantity stepper ─────────────────────────────────── */
/* 44px targets so it is usable on a phone without hitting the wrong control. */

.wc-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.wc-stepper__btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-fast);
  padding: 0;
}
.wc-stepper__btn:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.wc-stepper__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wc-stepper__input {
  width: 3.5rem;
  height: 44px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--neutral-wood);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-1);
  -moz-appearance: textfield;
  appearance: textfield;
}
.wc-stepper__input::-webkit-outer-spin-button,
.wc-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wc-stepper__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45, 49, 124, 0.12);
}

/* Safari on iOS zooms the page when a focused field is under 16px, which on a
   list this long means the page jumping on every tap. Same guard as the
   contact form in components.css. */
@media (max-width: 900px), (pointer: coarse) {
  .wc-stepper__input,
  .wc-input,
  .wc-textarea,
  .wc-input--postcode {
    font-size: 16px;
  }
}

/* ── Running total ────────────────────────────────────── */
/* On a phone this has to stay on screen while 64 items scroll past, which is a
   hard requirement rather than a nicety — it is the only thing telling someone
   what the van load is costing.

   position: sticky cannot do it here. base.css sets overflow-x: hidden on html
   and body, which computes to "hidden auto" and makes body a scroll container,
   and a sticky element inside a scroll container pins to that container rather
   than to the viewport — so it never appears. Verified in a browser at 375px:
   sticky left the bar at its static offset, thousands of pixels down the page.
   Changing base.css is not an option (nothing new in a global stylesheet), and
   position: fixed is untouched by an ancestor's overflow. So: fixed on narrow
   screens, ordinary panel once the screen is wide enough not to need it. */

.wc-total {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.wc-total__figure {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--neutral-wood);
  line-height: 1.1;
}

.wc-total__count {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  opacity: 0.6;
  margin-top: 2px;
}

.wc-total__note {
  font-size: 0.8125rem;
  opacity: 0.65;
  margin: 0;
  flex-basis: 100%;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .wc-total {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 -4px 24px rgba(26, 30, 82, 0.14);
  }

  /* The long small print would make the fixed bar tall enough to eat the screen.
     It is already repeated in full above the submit button, so dropping it here
     loses nothing and keeps the bar to one line. */
  .wc-total__note { display: none; }

  /* Room to scroll past the bar, so it can never sit on top of the submit
     button or the last field. */
  .wc-form { padding-bottom: 6rem; }
}

/* ── Form blocks ──────────────────────────────────────── */

.wc-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.wc-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--neutral-wood);
  margin: 0 0 var(--space-5);
}

.wc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.wc-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--neutral-wood);
}

.wc-input,
.wc-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--neutral-wood);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}
.wc-input:focus,
.wc-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45, 49, 124, 0.12);
}
.wc-textarea {
  resize: vertical;
  min-height: 5rem;
}

/* An invalid field is outlined as well as described, so the error is findable
   without reading every label. */
.wc-input.is-invalid,
.wc-textarea.is-invalid {
  border-color: var(--status-error);
}

.wc-error {
  font-size: 0.875rem;
  color: var(--status-error);
  margin: 0;
  line-height: 1.5;
}

.wc-hint {
  font-size: 0.8125rem;
  opacity: 0.6;
  margin: 0;
  line-height: 1.5;
}

.wc-required {
  color: var(--status-error);
  margin-left: 2px;
}

@media (min-width: 601px) {
  .wc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
  .wc-field-row .wc-field { margin-bottom: var(--space-5); }
}

/* ── Access choice ────────────────────────────────────── */
/* The whole card is the target, following the pattern the giving charity cards
   already set. */

.wc-choices {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.wc-choice {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: var(--transition-fast);
}
.wc-choice:hover { border-color: var(--secondary); }

.wc-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--neutral-paper);
}

/* Focus lands on the visually hidden radio, so the ring is drawn on the card. */
.wc-choice:has(input:focus-visible) {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.wc-choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.wc-choice__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #B4C2D6;
  flex-shrink: 0;
  margin-top: 2px;
  transition: var(--transition-fast);
}
.wc-choice:has(input:checked) .wc-choice__dot {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 4px var(--white);
}

.wc-choice__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--neutral-wood);
  margin-bottom: var(--space-1);
}

.wc-choice__body {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--neutral-wood);
  opacity: 0.75;
  margin: 0;
}

/* Shown only once "we need to come in" is chosen. */
.wc-reveal[hidden] { display: none; }

/* ── Tickbox ──────────────────────────────────────────── */

.wc-tick {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.6;
  cursor: pointer;
  margin-bottom: var(--space-4);
}

.wc-tick input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}

/* ── Small print under the total ──────────────────────── */

.wc-smallprint {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--neutral-wood);
  opacity: 0.65;
  margin: 0 0 var(--space-5);
}

/* ── Out of area ──────────────────────────────────────── */

.wc-out {
  background: var(--neutral-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}
.wc-out[hidden] { display: none; }

.wc-out__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  color: var(--neutral-wood);
}

.wc-out p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 0 var(--space-4);
}

/* ── Order summary, on the review page ────────────────── */

.wc-summary {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
}

.wc-summary th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-wood);
  opacity: 0.55;
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border);
}
.wc-summary th:last-child,
.wc-summary td:last-child { text-align: right; }

.wc-summary td {
  padding: var(--space-3) 0;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.wc-summary__qty {
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.wc-summary tfoot td {
  border-bottom: none;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 600;
}

.wc-review__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: 0.9375rem;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.wc-review__row:last-child { border-bottom: none; }

.wc-review__key {
  font-weight: 500;
  opacity: 0.6;
}

.wc-flag {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #fff3cd;
  color: #856404;
}

@media (max-width: 480px) {
  .wc-review__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── The total breakdown ────────────────────────────────────────────────────
   Sits under the headline figure inside the sticky total. Deliberately quiet:
   the grand total is the number people read, these lines are there so nobody
   has to wonder where the extra came from. */
.wc-total__breakdown {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.wc-total__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  opacity: 0.85;
}

.wc-total__breakdown li[hidden] { display: none; }

/* ── Help page accordions ───────────────────────────────────────────────────
   Native <details>, same as the price categories on the booking page. The
   site's .faq-item is a plain div elsewhere, so this gets its own name rather
   than quietly changing what that class means. */
.wc-faq {
  border-bottom: 1px solid var(--border);
}

.wc-faq__q {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--neutral-wood);
  line-height: 1.45;
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: baseline;
}

.wc-faq__q::-webkit-details-marker { display: none; }
.wc-faq__q::marker { content: ''; }

/* The chevron is the only affordance saying these open, so it is drawn rather
   than left to the browser's default triangle, which varies. */
.wc-faq__q::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.45;
  transition: transform 0.15s ease;
}

.wc-faq[open] > .wc-faq__q::after {
  transform: rotate(-135deg);
}

.wc-faq__q:focus-visible {
  outline: 2px solid var(--brand-primary, currentColor);
  outline-offset: 2px;
}

.wc-faq__a {
  padding: 0 0 var(--space-6);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--neutral-wood);
  opacity: 0.85;
  max-width: 62ch;
}

.wc-faq__a p { margin: 0 0 var(--space-4); }
.wc-faq__a p:last-child { margin-bottom: 0; }

.wc-faq__heading {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--neutral-wood);
  margin-bottom: var(--space-4);
}

/* ── Home / Business tabs ───────────────────────────────────────────────────
   Two buttons rather than links, because switching costs nothing and a page
   load to compare the two would be the worst part of the page. With no
   JavaScript both panels are simply visible one after the other, which reads
   fine — the script hides one, it does not create them. */
.wc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.wc-tab {
  appearance: none;
  text-align: left;
  cursor: pointer;
  background: var(--white, #fff);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font: inherit;
  color: var(--neutral-wood);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wc-tab:hover { border-color: var(--neutral-wood); }

.wc-tab:focus-visible {
  outline: 2px solid var(--neutral-wood);
  outline-offset: 2px;
}

.wc-tab[aria-selected="true"] {
  border-color: var(--brand-primary, #1a1e52);
  background: var(--neutral-paper);
}

.wc-tab__title {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.wc-tab__sub {
  display: block;
  font-size: 0.8125rem;
  opacity: 0.7;
  margin-top: 2px;
}

/* Without the script, both panels show. The heading inside each one says which
   is which, so the page still makes sense. */
.wc-panel-tab[hidden] { display: none; }

@media (max-width: 420px) {
  .wc-tabs { grid-template-columns: 1fr; }
}