/*
 * The voucher checkout, in the main site's look.
 *
 * The page loads the site's own stylesheet (hitthetheatre.co.uk/css/app.min.css) for the header,
 * footer, fonts and colours; this file is only the checkout between them. Everything is scoped
 * under .vb so nothing here can reach the site's header or footer. The colours come from the
 * site's own variables, with the same values as fallbacks, so a change of brand colour there
 * carries through here.
 */

.vb {
  /* The site's design tokens (resources/css/tokens.css in the site's code, DESIGN.md), with
     their values as fallbacks. */
  --vb-accent: var(--htt-accent, #7a1f2b);
  --vb-accent-hover: var(--htt-accent-hover, #5e1621);
  --vb-tint: var(--htt-accent-soft, #f6e7e9);
  --vb-ink: var(--htt-ink, #16131a);
  --vb-body: var(--htt-ink-2, #4a4450);
  --vb-muted: var(--htt-muted, #6b6270);
  --vb-line: var(--htt-rule, #e6e1dd);
  --vb-field: var(--htt-chip-border, #d9d2cc);
  --vb-r-card: var(--radius-card, 6px);
  --vb-r-button: var(--radius-button, 4px);
  --vb-gutter: var(--htt-gutter, 16px);
  /* The printed voucher's red, for the miniature of it only. */
  --vb-voucher-red: #c8102e;
  --vb-display: var(--htt-font-display, Archivo, -apple-system, system-ui, "Segoe UI", sans-serif);
  /* The boxes: white, a light grey outline, the site's card corners, no shadow (Will, 20 Oct 2026). */
  --vb-box-border: 1px solid #d1d5db;

  display: block;
  /* Archivo for every word of the checkout, not only the headings, as on the voucher page. */
  font-family: var(--vb-display);
  color: var(--vb-ink);
  background: #fff;
}

/* The browser's own [hidden] rule is only class-specificity, so any later `display:`
   declaration silently beats it. Hidden must always mean hidden. */
.vb [hidden] { display: none !important; }
.vb *, .vb *::before, .vb *::after { box-sizing: border-box; }
/* The site's stylesheet sets Roboto on text elements directly, so inheriting from .vb is not
   enough: every element in the checkout is told Archivo outright. The monospace bank details
   below keep their own font. */
.vb *:not(.mono) { font-family: var(--vb-display); }

.vb__wrap { max-width: var(--htt-max, 1200px); margin: 0 auto; padding: 2.5rem var(--vb-gutter) 4.5rem; }

.vb h1 {
  margin: 0 0 0.75rem;
  font-family: var(--vb-display);
  font-size: var(--htt-size-h1, 40px);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--vb-ink);
}
.vb__head { margin-bottom: 2rem; }
/* The site's breadcrumb (its own stylesheet styles it), in Archivo like the rest of the page. */
.vb .htt-breadcrumbs { margin-bottom: 0.75rem; font-family: inherit; }
.vb .htt-breadcrumbs a { font-weight: 400; color: var(--htt-ink-2, #4a4450); }
.vb .htt-breadcrumbs a:hover { color: var(--vb-accent); }
.vb__lede { max-width: var(--htt-prose-max, 760px); margin: 0; font-size: var(--htt-size-body, 18px); line-height: 1.6; color: var(--vb-body); }

.vb a { color: var(--vb-accent); font-weight: 500; }
.vb a:hover { color: var(--vb-accent-hover); }

/* --- Layout: preview beside the form on a wide screen, above it on a phone ------------- */

.vb__grid { display: grid; gap: 1.5rem; grid-template-areas: "side" "form"; }
.vb__form { grid-area: form; display: grid; gap: 1.25rem; min-width: 0; counter-reset: step; }
.vb__side { grid-area: side; min-width: 0; }

@media (min-width: 960px) {
  .vb__grid { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "form side"; gap: 2.5rem; align-items: start; }
  /* The aside runs the full height of the form, so the preview inside it has room to stay in view. */
  .vb__side { align-self: stretch; }
  .vb__sticky { position: sticky; top: 5rem; } /* clear of the site's sticky header */
}

/* --- The numbered steps ----------------------------------------------------------------- */

.vb-step { padding: 1.75rem; background: #fff; border: var(--vb-box-border); border-radius: var(--vb-r-card); }
.vb-step:not([hidden]) { counter-increment: step; }
.vb-step__h {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-family: var(--vb-display);
  font-size: var(--htt-size-h3, 20px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--vb-ink);
}
.vb-step__h::before {
  content: counter(step);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  color: #fff;
  background: var(--vb-accent);
  border-radius: 999px;
}
.vb-step__intro { margin: -0.5rem 0 1.25rem; font-size: 1rem; color: var(--vb-body); }

/* --- Fields ------------------------------------------------------------------------------ */

.vb .field { margin: 0 0 1.25rem; }
.vb .field:last-child { margin-bottom: 0; }
.vb .field label,
.vb .vpick legend {
  display: block;
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--vb-body);
}
.vb .opt { font-weight: 400; color: var(--vb-muted); }

.vb .field input,
.vb .field textarea {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--vb-ink);
  background: #fff;
  border: 1px solid var(--vb-field);
  border-radius: var(--vb-r-button);
}
.vb .field textarea { resize: vertical; }
.vb .field input:focus-visible,
.vb .field textarea:focus-visible { outline: 3px solid var(--vb-accent); outline-offset: 2px; border-color: var(--vb-accent); }
.vb .field input:disabled,
.vb .field textarea:disabled { color: var(--vb-muted); background: #f3f4f6; }
.vb #validFrom { max-width: 14rem; }

.vb .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.vb .field-row .field { margin-bottom: 0; }

.vb .hint { margin: 0.4rem 0 0; font-size: 0.875rem; color: var(--vb-muted); }
.vb .counter { margin: 0.4rem 0 0; font-size: 0.8rem; text-align: right; white-space: nowrap; color: var(--vb-muted); }
.vb .counter--over { font-weight: 600; color: var(--vb-accent); }
.vb-under { display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; }
.vb .field-err { margin: 0.4rem 0 0; font-size: 0.875rem; font-weight: 500; color: var(--vb-accent); }

/* "£" sits inside the box, so the buyer types only the number. */
.vb-own { max-width: 16rem; margin-top: 1.25rem; }
.vb-money { position: relative; }
.vb-money::before {
  content: "£";
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  font-weight: 600;
  color: var(--vb-muted);
  pointer-events: none;
}
.vb .vb-money input { padding-left: 1.75rem; }

/* --- The amount buttons ------------------------------------------------------------------- */

.vch__amounts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
.vch__amount-opt {
  padding: 0.95rem 0.25rem;
  font: inherit;
  font-family: var(--vb-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  color: var(--vb-ink);
  background: #fff;
  border: 2px solid var(--vb-field);
  border-radius: var(--vb-r-button);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.vch__amount-opt:hover { border-color: var(--vb-accent); }
.vch__amount-opt[aria-checked="true"] { color: var(--vb-accent); background: var(--vb-tint); border-color: var(--vb-accent); }
.vch__amount-opt:focus-visible,
.vpick__opt:focus-visible { outline: 3px solid var(--vb-accent); outline-offset: 2px; }
.vb #over-max { margin: 1rem 0 0; }
.vb #err-amount { margin-top: 0.75rem; }

/* --- The picture picker ------------------------------------------------------------------- */

.vpick { min-width: 0; border: 0; padding: 0; }
.vpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: 0.6rem; }
.vpick__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.65rem 0.3rem;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
  color: var(--vb-ink);
  background: #fff;
  border: 2px solid var(--vb-line);
  border-radius: var(--vb-r-button);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.vpick__opt:hover { border-color: var(--vb-field); }
.vpick__opt[aria-checked="true"] { background: var(--vb-tint); border-color: var(--vb-accent); }
.vpick__opt:disabled { cursor: default; opacity: 0.6; }
.vpick__opt img { display: block; }
.vpick__none { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 0.75rem; color: var(--vb-muted); }

.vb-later { margin: 0; }
.vb .linkish {
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--vb-accent);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.vb .linkish:hover { color: var(--vb-accent-hover); }

/* --- The voucher preview, and what sits under it ------------------------------------------- */

.vb__side-label {
  margin: 0 0 0.6rem;
  font-size: var(--htt-size-label, 12px);
  font-weight: 700;
  letter-spacing: var(--htt-tracking-label, 0.06em);
  text-transform: uppercase;
  color: var(--vb-muted);
}

/* The top of the printed voucher, in miniature: same hierarchy and font as the PDF, the
   occasion in red, the name large, the value larger still, the picture on the right. */
.vch__preview {
  position: relative;
  min-height: 9.5rem;
  padding: 1.25rem 1.4rem 1.4rem;
  font-family: var(--vb-display);
  background: #fff;
  border: var(--vb-box-border);
  border-radius: var(--vb-r-card);
  overflow-wrap: anywhere;
}
.vch__preview p { margin: 0; }
.vch__label { font-size: 1.3rem; font-weight: 400; line-height: 1.2; color: var(--vb-voucher-red); }
.vch__for { margin-top: 0.2rem !important; font-size: 1.4rem; line-height: 1.2; color: var(--vb-ink); }
.vch__for span { font-size: 1rem; font-style: italic; color: var(--vb-muted); }
.vch__amount { font-size: 2.25rem; font-weight: 800; line-height: 1.15; color: var(--vb-voucher-red); }
.vch__message { margin-top: 0.4rem !important; font-size: 0.95rem; font-style: italic; line-height: 1.45; color: #334155; white-space: pre-line; }
.vch__art { position: absolute; top: 0.9rem; right: 1rem; width: 96px; height: 96px; object-fit: contain; object-position: center bottom; }
.vch__preview.has-art > p { padding-right: 108px; }

.vb__side-note { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--vb-muted); }

.vb__trust {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.4rem;
  list-style: none;
  font-size: 0.95rem;
  color: var(--vb-body);
  background: #fff;
  border: var(--vb-box-border);
  border-radius: var(--vb-r-card);
}
.vb__trust li { display: flex; gap: 0.65rem; align-items: flex-start; }
.vb__trust li::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a1f2b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* On a phone the preview sits above the form, and stays small: the reassurance is in the
   intro, so the form starts as soon as possible. */
@media (max-width: 959px) {
  .vb__side-note, .vb__trust { display: none; }
}

/* --- Paying --------------------------------------------------------------------------------- */

.vch__turnstile { min-height: 65px; margin: 0 0 1rem; }
.vb #err-bot { margin: -0.5rem 0 1rem; }

.vch__choices { display: grid; gap: 0.75rem; }
.vb .btn {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  background: var(--vb-accent);
  border: 2px solid var(--vb-accent);
  border-radius: var(--vb-r-button);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.vb .btn:hover { background: var(--vb-accent-hover); border-color: var(--vb-accent-hover); }
.vb .btn:focus-visible,
.vb .linkish:focus-visible { outline: 3px solid var(--vb-accent); outline-offset: 2px; }
.vb .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.vb .btn--secondary { color: var(--vb-accent); background: #fff; }
.vb .btn--secondary:hover { color: var(--vb-accent-hover); background: var(--vb-tint); }
.vb .btn--inline { display: inline-block; width: auto; min-height: 44px; padding: 0.6rem 1.5rem; font-size: 1rem; }

.vb .secure {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  margin: 0.85rem 0 0;
  font-size: 0.875rem;
  color: var(--vb-muted);
}

.vb .banner { margin: 0 0 1rem; padding: 0.85rem 1rem; font-size: 0.95rem; border-radius: var(--vb-r-card); }
.vb .banner--info { color: var(--htt-amber, #92400e); background: var(--htt-amber-soft, #fdf3e7); border: 1px solid var(--htt-amber-border, #fbd9a8); }
.vb .banner--error { color: var(--vb-accent); background: var(--vb-tint); border: 1px solid var(--htt-accent-border, #efc9ce); }

.vch__bacs { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--vb-line); }
.vch__bacs h3 { margin: 0 0 0.5rem; font-family: var(--vb-display); font-size: 1.15rem; font-weight: 700; }
.vb table.lines { width: 100%; border-collapse: collapse; }
.vb .lines th,
.vb .lines td { padding: 0.75rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--vb-line); }
.vb .lines th { font-weight: 400; color: var(--vb-muted); }
.vb .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vb .lines__total th,
.vb .lines__total td { padding-top: 1rem; font-size: 1.15rem; border-top: 2px solid var(--vb-ink); border-bottom: 0; }

.vb-help { margin: 1.5rem 0 0; padding-top: 1.25rem; font-size: 0.9rem; line-height: 1.6; color: var(--vb-muted); border-top: 1px solid var(--vb-line); }
.vb-help a { white-space: nowrap; }

/* --- Loading, paid, and a link that can't be used --------------------------------------------- */

.vb-state { margin: 0; padding: 5rem 1rem; text-align: center; color: var(--vb-muted); }

.vb-card {
  max-width: 40rem;
  margin: 1rem auto 0;
  padding: 2.5rem 2rem;
  background: #fff;
  border: var(--vb-box-border);
  border-radius: var(--vb-r-card);
}
.vb-card h1 { font-size: 1.75rem; }
.vb-card p { margin: 0 0 1rem; font-size: 1.05rem; color: var(--vb-body); }

/* Green, not the brand colour: maroon on a confirmation reads as a warning. */
.done { text-align: center; }
.done__tick { display: block; margin: 0 auto 1.25rem; }
.done__tick circle { fill: #e3f3e8; }
.done__tick path { fill: none; stroke: #1e7a3c; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.done h1 { text-wrap: balance; }
.done h1 span { display: block; }
.done .done__receipt { margin: 1.5rem 0 0; padding-top: 1.25rem; font-size: 0.95rem; color: var(--vb-muted); border-top: 1px solid var(--vb-line); }

.notice { border-left: 4px solid #e8a33d; }
.vb .notice__contact { font-size: 0.95rem; color: var(--vb-muted); }

/* --- Phones ----------------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .vb__wrap { padding: 1.5rem var(--vb-gutter) 3rem; }
    .vb__head { margin-bottom: 1.25rem; }
  .vb__lede { font-size: 1.05rem; }
  .vb-step { padding: 1.35rem 1rem; }
  .vb .field-row { grid-template-columns: 1fr; gap: 0; }
  .vb .field-row .field { margin-bottom: 1.25rem; }
  .vb .field-row .field:last-child { margin-bottom: 0; }
  .vb-card { padding: 2rem 1.25rem; }
}
@media (max-width: 480px) {
  /* The four amounts in a row, and "Your own" across the full width under them. */
  .vch__amounts { grid-template-columns: repeat(4, 1fr); }
  .vch__amount-opt:last-child { grid-column: 1 / -1; }
}