/* The public side of the Events feature: the live parts dropped into a pasted
 * page, the two popups, the buyer's three screens, and one class's live page.
 *
 * BRAND DESIGN AND NOT DESK DESIGN. Cream and maroon, Montserrat for the
 * headings and Poppins for the text — the same furniture `series-page.css`
 * dresses the built sales page in, and these are its tokens. The admin's
 * sheet is a different file for a different audience.
 *
 * 1rem IS NOT 16px ON THESE PAGES. The brand stylesheet owns the root size
 * and makes it 7.68px, which is why every measurement in this file is in px
 * or in an em of a known font size. A `padding: 1rem` here is 7.68px and
 * reads as a layout mistake rather than as a unit mistake.
 */

:root {
  --el-cream: #FBF7EF;
  --el-maroon: #6E1B22;
  --el-orange: #D9772B;
  --el-ink: #2A1F1C;
  --el-soft: #6B5C57;
  --el-line: #E4D9C8;
  --el-line-strong: #CBB99F;
}

/* ==========================================================================
   THE LIVE PARTS, inside somebody else's pasted markup
   ==========================================================================
   These classes are written by `event_landing.live_parts` and dropped in
   where a token was. They have to look right INSIDE a layout this sheet has
   never seen — so every one of them is inline-level, brings its own spacing,
   and inherits the surrounding font rather than setting one. A block with a
   width would fight the paste. */

.el-pricing { display: inline-flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap; }
.el-price {
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.5em; font-weight: 700; color: var(--el-maroon);
  line-height: 1.1;
}
.el-was {
  font-size: .95em; color: var(--el-soft);
  text-decoration: line-through;
}
.el-window {
  font-size: .75em; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--el-orange);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}

.el-seats {
  display: inline-block;
  font-size: .95em; font-weight: 650; color: var(--el-maroon);
}
/* SOLD OUT IS NOT RED-AND-ALARMING, it is plain. A page that shouts when
   something has gone reads as an error rather than as information. */
.el-seats.is-gone { color: var(--el-soft); font-weight: 600; }

.el-countdown {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: .95em; color: var(--el-ink);
}
.el-clock { font-variant-numeric: tabular-nums; font-weight: 700; }

/* The Reserve control. A real target at both widths: 48px tall, which clears
   the 44px floor with room for the border. */
.el-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  color: #fff; background: var(--el-maroon);
  border: 0; border-radius: 10px;
  text-decoration: none; cursor: pointer;
}
.el-cta:hover { background: #561216; }
.el-cta.is-gone,
.el-cta.is-soon,
.el-cta.is-preview {
  background: transparent; color: var(--el-soft);
  border: 1px dashed var(--el-line-strong); cursor: default;
  flex-direction: column; gap: 2px; text-align: center;
}
.el-cta.is-preview small { font-size: 12px; font-weight: 500; }

/* The bar across a preview, so a page behind the login is never mistaken for
   the page on the web. */
.el-preview-bar {
  background: var(--el-orange); color: #fff;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 14px; margin-bottom: 18px; border-radius: 8px;
}

/* ==========================================================================
   THE POPUPS
   ========================================================================== */

.pop-wrap {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(42, 31, 28, .55);
  /* The backdrop is a click target — one of the three ways out — so it must
     not be behind the page's own content. */
}
.pop-panel {
  position: relative;
  width: 100%; max-width: 27em;
  box-sizing: border-box;
  padding: 26px 24px 24px;
  background: var(--el-cream);
  color: var(--el-ink);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(42, 31, 28, .3);
  font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.55;
  /* A LONG OFFER ON A SHORT PHONE STILL CLOSES. Without this the close
     button goes off the top of a landscape phone and the only way out is
     the backdrop — which somebody trying to read the box will not find. */
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}
.pop-close {
  position: absolute; top: 6px; right: 6px;
  /* 44px of target on a control whose glyph is 14px. The box is the target
     and the ✕ sits in the middle of it. */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  color: var(--el-soft);
  background: transparent; border: 0; border-radius: 50%;
  cursor: pointer;
}
.pop-close:hover { background: rgba(110, 27, 34, .08); color: var(--el-maroon); }
.pop-h {
  margin: 0 36px 8px 0;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 21px; font-weight: 700; line-height: 1.2;
  color: var(--el-maroon);
}
.pop-p { margin: 0 0 16px; color: var(--el-ink); }
.pop-small { margin: 10px 0 0; font-size: 12.5px; color: var(--el-soft); }

.pop-form { display: flex; flex-direction: column; gap: 10px; }
.pop-input {
  width: 100%; box-sizing: border-box;
  min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px;   /* 16px so iOS does not zoom the page */
  color: var(--el-ink); background: #fff;
  border: 1px solid var(--el-line-strong); border-radius: 10px;
}
.pop-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 20px;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; font-weight: 700;
  color: #fff; background: var(--el-maroon);
  border: 0; border-radius: 10px;
  text-decoration: none; cursor: pointer;
}
.pop-cta:hover { background: #561216; }
.pop-cta[disabled] { opacity: .6; cursor: progress; }
.pop-said { margin: 2px 0 0; font-size: 13.5px; }
.pop-said.is-ok { color: #2f7d32; }
.pop-said.is-bad { color: #9b2420; }

.pop-code {
  margin: 0 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px; font-weight: 700; letter-spacing: .12em;
  text-align: center; color: var(--el-maroon);
  background: #fff; border: 1px dashed var(--el-line-strong);
  border-radius: 10px; padding: 12px 10px;
  /* A code is read off a screen and typed. `user-select: all` makes one tap
     select the whole thing. */
  user-select: all;
}
.pop-clock {
  margin: 0 0 14px; text-align: center;
  font-size: 13.5px; font-weight: 650; color: var(--el-orange);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   THE BUYER'S THREE SCREENS
   ========================================================================== */

/* A READING WIDTH AND A GUTTER, BOTH ITS OWN. The shell these screens are
   served in dresses them in the brand's header and footer and leaves the
   body to size itself — which is right for the built sales page, whose
   sections each set their own width. A checkout that inherited that ran to
   both edges of a 1280px window with the amounts flush against the right
   one, and had no gutter at all on a phone. Measured, not assumed. */
.bq {
  font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.55; color: var(--el-ink);
  max-width: 44em; margin: 0 auto; padding: 8px 18px 32px;
  box-sizing: border-box;
}
.bq-h1 {
  margin: 0 0 14px;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 26px; font-weight: 700; color: var(--el-maroon);
}

/* The three steps, so a buyer always knows how much is left. Numbers rather
   than a bar: "2 of 3" is a promise and a bar is a guess. */
.bq-steps {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  list-style: none; margin: 0 0 22px; padding: 0;
  font-size: 13px; color: var(--el-soft);
}
.bq-step { display: flex; align-items: center; gap: 7px; }
.bq-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; font-weight: 700;
  background: var(--el-line); color: var(--el-soft);
}
.bq-step.is-on { color: var(--el-maroon); font-weight: 650; }
.bq-step.is-on .bq-step-n { background: var(--el-maroon); color: #fff; }
.bq-step.is-done .bq-step-n { background: var(--el-orange); color: #fff; }

.bq-set {
  border: 1px solid var(--el-line); border-radius: 12px;
  padding: 16px; margin: 0 0 18px;
}
.bq-set > legend {
  padding: 0 8px;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--el-soft);
}

/* A choice is a whole row and the whole row is the target — 56px of it, so
   a thumb does not have to find a 16px radio. */
.bq-choice {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 10px;
  cursor: pointer;
}
.bq-choice:hover { background: rgba(110, 27, 34, .04); }
.bq-choice input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0;
  accent-color: var(--el-maroon); }
/* THE CHOSEN ROW SAYS SO, not only its little circle. */
.bq-choice:has(input:checked) { background: rgba(110, 27, 34, .06);
  box-shadow: inset 3px 0 0 var(--el-maroon); }
.bq-choice-main { flex: 1 1 auto; display: flex; flex-direction: column; }
.bq-choice-title { font-weight: 650; }
.bq-choice-note { font-size: 13px; color: var(--el-soft); }
.bq-choice-price {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; color: var(--el-maroon);
}
.bq-was { font-size: .85em; font-weight: 500; color: var(--el-soft); }

.bq-field { display: block; margin: 0 0 14px; }
.bq-field > span { display: block; font-size: 13px; font-weight: 650;
  margin-bottom: 5px; }
.bq-field > input {
  width: 100%; box-sizing: border-box;
  min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px;
  color: var(--el-ink); background: #fff;
  border: 1px solid var(--el-line-strong); border-radius: 10px;
}

.bq-lines { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.bq-lines td { padding: 9px 0; border-bottom: 1px solid var(--el-line); }
.bq-lines .bq-amount { text-align: right; white-space: nowrap; }
.bq-lines tfoot td {
  border-bottom: 0; border-top: 2px solid var(--el-line-strong);
  padding-top: 12px; font-size: 17px;
}
.bq-discount td { color: var(--el-orange); }

.bq-code { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin: 0 0 18px; }
.bq-code .bq-field { flex: 1 1 12em; margin-bottom: 0; }
.bq-apply {
  min-height: 48px; padding: 12px 18px;
  font: inherit; font-weight: 650;
  color: var(--el-maroon); background: transparent;
  border: 1px solid var(--el-maroon); border-radius: 10px; cursor: pointer;
}
.bq-code .pop-said, .bq-ok, .bq-error { flex-basis: 100%; margin: 0; }
.bq-ok { font-size: 13.5px; color: #2f7d32; }
.bq-error { font-size: 13.5px; color: #9b2420; font-weight: 600; }
.bq-gone { font-size: 14px; color: var(--el-soft); margin: 0 0 16px; }
.bq-note { font-size: 13px; color: var(--el-soft); margin: 0 0 14px; }
.bq-running { font-size: 15px; margin: 0 0 16px; }
/* Refunds and cancellations, and what paying agrees to. Quiet, and present
   on the first step and the last. */
.bq-terms { margin: 22px 0 14px; padding: 14px 16px; border-radius: 10px;
  background: rgba(110, 27, 34, .04); border: 1px solid var(--el-line);
  font-size: 13.5px; }
.bq-terms p { margin: 0 0 6px; }
.bq-terms p:last-child { margin-bottom: 0; }
.bq-terms-h { font-weight: 700; color: var(--el-maroon); }
.bq-terms a { color: var(--el-maroon); }
.bq-terms-agree { color: var(--el-soft); }
.bq-mail { user-select: all; }
/* A cheaper way to buy the same cart. Its own small form above the step. */
.bq-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 18px; padding: 12px 14px; border-radius: 10px;
  background: rgba(232, 105, 28, .09); border: 1px solid rgba(232, 105, 28, .35); }
.bq-nudge p { margin: 0; flex: 1 1 16em; font-size: 14.5px; }
.bq-nudge-go { font: inherit; font-weight: 650; padding: 9px 14px; min-height: 44px;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--el-orange); color: #fff; }

.bq-go { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 6px; }
.bq-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 30px;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; font-weight: 700;
  color: #fff; background: var(--el-maroon);
  border: 0; border-radius: 10px; cursor: pointer;
}
.bq-cta:hover { background: #561216; }
/* "Pay $219", not "Pay$219": a flex button drops the space before the
   amount's own span, so the gap puts it back. */
.bq-paybtn { gap: .3em; }
.bq-back {
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: 14px; color: var(--el-soft); text-decoration: underline;
}

/* ==========================================================================
   ONE CLASS'S LIVE PAGE
   ========================================================================== */

/* The same gutter for one class's own page, and for the same reason. */
.cl-when { font-size: 15px; color: var(--el-soft); margin: 0 0 14px; }
.cl-note { font-size: 14px; color: var(--el-ink); margin: 0 0 14px; }
.cl-soon {
  font-size: 15px; color: var(--el-soft);
  border: 1px dashed var(--el-line-strong); border-radius: 10px;
  padding: 18px; margin: 0 0 18px;
}
/* The embed keeps its shape at every width. A 16:9 box rather than a fixed
   height, because a 480px-tall iframe on a 390px phone is a letterbox. */
.cl-stage { margin: 0 0 18px; }
.cl-stage iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  min-height: 200px; border: 0; border-radius: 12px; background: #000;
}
.cl-h2 {
  margin: 24px 0 10px;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; font-weight: 700; color: var(--el-maroon);
}
.cl-mats { list-style: none; margin: 0 0 18px; padding: 0; }
.cl-mats li {
  padding: 11px 0; border-bottom: 1px solid var(--el-line);
  font-size: 15px;
}
.cl-mats li a { min-height: 44px; display: inline-flex; align-items: center; }
.cl-mats li.is-soon { color: var(--el-soft); }
.cl-mats small { color: var(--el-soft); }
.cl-back { font-size: 14px; }

@media (max-width: 480px) {
  .bq { padding: 8px 14px 28px; }
  .bq-h1 { font-size: 22px; }
  .bq-choice { align-items: flex-start; flex-wrap: wrap; }
  .bq-choice-price { width: 100%; padding-left: 32px; }
  .bq-go .bq-cta { width: 100%; }
  .pop-panel { padding: 24px 18px 20px; }
  .pop-h { font-size: 19px; }
}

/* =========================================================================
   19 OCT 2026, SECOND BATCH — the checkout polish (U–AB). Text sizes are a
   step up for legibility (Tom is colourblind; so are some buyers), and no
   meaning is carried by colour alone.
   ========================================================================= */
.bq { font-size: 16px; }
.bq-choice-note, .bq-field > span, .bq-note, .bq-ok, .bq-error { font-size: 15px; }

/* ---- X · check and pay in two columns: who | paying ------------------- */
.bq--pay { max-width: 64em; }
.bq-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px 34px; align-items: start; }
.bq-col { min-width: 0; background: #fff; border: 1px solid var(--el-line);
  border-radius: 14px; padding: 20px 20px 18px; }
.bq-h2 { margin: 0 0 14px; font-family: Montserrat, "Helvetica Neue", Arial,
  sans-serif; font-size: 19px; font-weight: 700; color: var(--el-maroon); }
.bq-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.bq-field > select { width: 100%; box-sizing: border-box; min-height: 46px;
  padding: 10px 12px; font: inherit; font-size: 16px; color: var(--el-ink);
  background: #fff; border: 1px solid var(--el-line-strong); border-radius: 10px; }
@media (max-width: 760px) {
  .bq-cols { grid-template-columns: 1fr; }
  .bq-row2 { grid-template-columns: 1fr; }
}

/* ---- Y · sign in with Google / Facebook, and switching ---------------- */
.bq-social { display: grid; gap: 10px; }
.bq-social-btn { display: flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 16px;
  font-weight: 600; color: #222; background: #fff; border: 1px solid #c9c4bc;
  border-radius: 10px; cursor: pointer; }
.bq-social-btn:hover { background: #f6f3ee; }
.bq-social-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.bq-or { display: flex; align-items: center; gap: 10px; margin: 16px 0;
  color: #5d5650; font-size: 15px; }
.bq-or::before, .bq-or::after { content: ""; flex: 1 1 auto; height: 1px;
  background: var(--el-line); }
.bq-signed { margin: 0 0 14px; font-size: 15px; }
.bq-signed a { color: var(--el-maroon); }
.bq-field > input[readonly] { background: #f6f3ee; }

/* ---- AA · the discount code behind a link, compact when open ---------- */
details.bq-code { display: block; margin: 0 0 16px; }
details.bq-code > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; min-height: 44px; color: var(--el-maroon); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; }
details.bq-code > summary::-webkit-details-marker { display: none; }
.bq-code-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.bq-code-row input { width: 34%; min-width: 9em; min-height: 44px;
  box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 16px;
  border: 1px solid var(--el-line-strong); border-radius: 10px; }

/* ---- AB · the embedded card form --------------------------------------- */
.bq-card { margin: 4px 0 14px; padding: 14px; border: 1px solid var(--el-line);
  border-radius: 12px; background: #fffeec; }
.bq-card[hidden] { display: none; }
.bq-card-wait { margin: 0; font-size: 15px; color: #5d5650; }
.bq-card-wait[hidden] { display: none; }
.bq-paybtn.is-busy { opacity: .7; cursor: progress; }

/* ---- Z · the terms toggle ---------------------------------------------- */
.bq-toggle { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 16px;
  font-size: 15px; line-height: 1.45; cursor: pointer; }
.bq-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bq-switch { flex: 0 0 auto; position: relative; width: 46px; height: 26px;
  margin-top: 1px; border-radius: 13px; background: #b9b2a8;
  transition: background .15s ease; }
.bq-switch::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; }
/* ON IS SAID BY POSITION AND A CHECK, not by colour alone. */
.bq-toggle input:checked + .bq-switch { background: var(--el-maroon); }
.bq-toggle input:checked + .bq-switch::after { transform: translateX(20px);
  content: "\2713"; color: var(--el-maroon); font-size: 14px; font-weight: 800;
  line-height: 20px; text-align: center; }
.bq-toggle input:focus-visible + .bq-switch { outline: 3px solid #f2a65a;
  outline-offset: 2px; }
.bq-toggle a { color: var(--el-maroon); }

/* ---- U · room between a button and the "No purchase necessary" line --- */
.bq .sp-free-entry, .bq-go + .sp-free-entry, .bq-terms + .sp-free-entry {
  margin-top: 16px; }
/* The order lines, a comfortable size (they rendered at ~13px). */
.bq-lines td { font-size: 15px; }
.bq-lines tfoot td { font-size: 17px; }

/* ---- Third batch, the pay step (Tom, 20 Oct 2026) ---------------------- */
/* 30 · the terms toggle sits under the details now, with room above it. */
.bq-col--who .bq-toggle { margin: 18px 0 10px; }
/* 34 · the newsletter box: ticked, easy to untick, a 44px target. */
.bq-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px;
  margin: 4px 0 6px; font-size: 15px; line-height: 1.5; color: #2a1712;
  cursor: pointer; }
.bq-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto;
  accent-color: var(--el-maroon); cursor: pointer; }
/* 31 · the ZIP, Iowa only, and the tax line in the order. */
.bq-zip[hidden] { display: none; }
.bq-zip input { max-width: 180px; }
.bq-lines .bq-tax td { color: #2a1712; }

/* Launch-fix B4: the Stripe note with Stripe's own badge beside it. */
.bq-secure { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 12px 0 4px; }
.bq-secure .bq-note { flex: 1 1 260px; margin: 0; }
.bq-stripe-badge { display: inline-flex; min-height: 44px; align-items: center; }
.bq-stripe-badge img { display: block; width: 120px; height: auto; }

/* ---- the row above the payment box (Tom, 21 Oct 2026, checkout
   simplification): Powered by Stripe left, Discount code right; an opened
   code drops onto a full-width line beneath. */
.bq-payhead { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 16px; margin: 4px 0 12px; }
.bq-payhead .bq-stripe-badge { display: inline-flex; }
.bq-payhead details.bq-code { margin: 0 0 0 auto; }
/* OPENED, the summary stays on the row and the field drops onto the line
   below: the details element steps aside (`display: contents`) so its
   summary and its field are laid out by the row itself. */
.bq-payhead details.bq-code[open] { display: contents; }
.bq-payhead details.bq-code[open] > summary { margin-left: auto; }
.bq-payhead details.bq-code[open] > :not(summary) { flex-basis: 100%; }
/* RIGHT-ALIGNED under the link (Tom, 21 Oct 2026): the field and Apply sit
   flush right, beneath "Discount code", and so do its messages. */
.bq-payhead details.bq-code[open]::details-content { display: contents; }
.bq-payhead details.bq-code[open] > .bq-code-row { justify-content: flex-end; }
.bq-payhead details.bq-code[open] > .bq-ok,
.bq-payhead details.bq-code[open] > .bq-error { text-align: right; }
.bq-secure { margin-top: 4px; }

/* ---- A tip for Tom (Tom, 21 Oct 2026) ----------------------------------
   Under "Your details", in the left column: a small warm card, four
   choices in a row, nothing picked. The chosen one is maroon AND carries a
   tick, so it reads without colour. */
.bq-left { display: grid; gap: 22px; min-width: 0; align-content: start; }
.bq-tip { background: var(--el-cream); }
.bq-tip-h { margin: 0 0 12px; font-family: Montserrat, "Helvetica Neue", Arial,
  sans-serif; font-size: 17px; font-weight: 700; color: var(--el-maroon); }
/* In the page's Poppins: Montserrat at this weight is not loaded. */
.bq-tip-h span { font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; color: #5d5650; font-size: 15px; }
.bq-tip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; }
.bq-tip-opt { position: relative; display: block; cursor: pointer; }
.bq-tip-opt input { position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; }
.bq-tip-opt span { display: flex; align-items: center; justify-content: center;
  gap: 4px; min-height: 46px; padding: 8px 6px; box-sizing: border-box;
  font-size: 16px; font-weight: 600; color: #222; background: #fff;
  border: 1px solid #c9c4bc; border-radius: 10px; text-align: center; }
.bq-tip-opt:hover span { background: #f6f3ee; }
.bq-tip-opt input:checked + span { background: var(--el-maroon);
  border-color: var(--el-maroon); color: #fff; }
.bq-tip-opt input:checked + span::before { content: "\2713"; font-weight: 700; }
.bq-tip-opt input:focus-visible + span { outline: 3px solid #f2a65a;
  outline-offset: 2px; }
/* "Other" opens its field — by CSS, so it works with no script too. */
.bq-tip-other { display: none; margin: 12px 0 0; }
.bq-tip:has(input[value="other"]:checked) .bq-tip-other { display: block; }
.bq-tip-dollar { display: flex; align-items: center; gap: 6px; font-size: 16px;
  font-weight: 600; }
.bq-tip-dollar input { width: 8em; min-height: 46px; box-sizing: border-box;
  padding: 10px 12px; font: inherit; font-weight: 400; color: var(--el-ink);
  background: #fff; border: 1px solid var(--el-line-strong); border-radius: 10px; }
.bq-tipline td { color: #2a1712; }