/* Booking result panel and the optional fields.

   Its own file on purpose: site.css and media.css are regenerated by other
   passes, and a block appended to either has already been lost once that way.
   Everything here reads the site's own custom properties, so each of the
   thirteen designs keeps its palette without a per-site copy of this file. */

.field .opt {
  font-weight: 400;
  font-size: 0.78em;
  opacity: 0.65;
  margin-left: 0.5em;
  letter-spacing: 0;
}

/* Kills the 300ms double-tap zoom delay. This form is filled in on a phone,
   often one-handed, often outside the shop. */
.form button,
.form input,
.form select,
.form textarea,
.book-result a { touch-action: manipulation; }

/* A visible focus ring for keyboard users, without the ring appearing on
   every mouse click. Nothing here removes an outline without replacing it. */
.form :focus-visible,
.book-result :focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 2px;
}

.form textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  background: var(--bg-3, rgba(127, 127, 127, 0.08));
  color: inherit;
  border: 1px solid var(--line, rgba(127, 127, 127, 0.35));
  border-radius: inherit;
  resize: vertical;
  min-height: 3.2em;
}

/* Two buttons share the row on a wide form and stack on a narrow one. The
   primary is the website booking; LINE sits beside it and never in front. */
.book-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.book-actions .btn { flex: 1 1 14rem; min-height: 48px; }

/* An input the server rejected. Marked rather than only described, because a
   message above a six-field form does not tell anyone which field is wrong. */
.field.bad input,
.field.bad select,
.field.bad textarea { border-color: #f0a08c; }
.field .field-msg {
  display: none;
  font-size: 0.85rem;
  color: #f0a08c;
}
.field.bad .field-msg { display: block; }

/* The confirmation. It replaces the form rather than sitting under it, so the
   reference number is the only thing on screen once a booking is taken. */
.book-result {
  border: 1px solid var(--line, rgba(127, 127, 127, 0.35));
  border-left: 3px solid var(--accent, currentColor);
  background: var(--bg-2, rgba(127, 127, 127, 0.06));
  padding: 1.6rem 1.5rem;
}
.book-result h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.book-result .lede { color: var(--muted, inherit); margin-bottom: 1.3rem; }

/* The reference is read down a telephone, so it is set big, in a mono face,
   and given room. It is the one thing on this panel a customer copies out. */
.book-ref {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The reference is compared character by character against whatever the
     shop reads back, so the digits must be the same width. */
  font-variant-numeric: tabular-nums;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.8rem;
  background: var(--accent, currentColor);
  color: var(--accent-ink, #fff);
  margin-bottom: 1.2rem;
}
.book-ref-label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--muted, inherit);
  margin-bottom: 0.3rem;
}

.book-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.2rem;
  margin-bottom: 1.3rem;
  font-size: 0.98rem;
}
.book-detail dt { color: var(--muted, inherit); }
.book-detail dd { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: break-word; }

.book-result .tel-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.book-result .tel-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent, currentColor);
  text-decoration: underline;
}

@media (max-width: 560px) {
  .book-ref { font-size: 1.5rem; }
}