/* Styles for the shared booking form (booking-form.js). Loaded by book.html
   and index.html so the two mounts cannot drift apart visually either.
   System type stack throughout — the Apple-style direction, no webfont. */
.bf-form{ display:grid; gap:.95rem; text-align:left; }
.bf-field{ display:grid; gap:.45rem; }
.bf-lbl{
  font-size:.78rem; font-weight:600; letter-spacing:.01em; color:#1d1d1f;
}
.bf-form input,.bf-form select,.bf-form textarea{
  font-family:inherit; font-size:1rem; color:#1d1d1f;
  background:#ffffff; border:1px solid #d2d2d7; border-radius:11px;
  padding:.8rem .9rem; width:100%; appearance:none;
}
.bf-form textarea{ min-height:3.4rem; resize:vertical; }
.bf-form input:focus,.bf-form select:focus,.bf-form textarea:focus{
  outline:none; border-color:#0071e3; box-shadow:0 0 0 4px rgba(0,113,227,.14);
}
.bf-form select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236e6e73' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center;
  background-size:12px; padding-right:2.4rem;
}

/* Issue chips — same vocabulary as the staff intake, one tap each.
   An even grid (no ragged wrap): six likely issues up front, the other five
   behind "More" until a tap or an ?issue= deep link reveals them. */
.bf-chips{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
@media(min-width:480px){ .bf-chips{ grid-template-columns:repeat(3,1fr); } }
.bf-chip,.bf-more{
  font-family:inherit; font-size:.85rem; color:#1d1d1f;
  background:#fff; border:1px solid #d2d2d7; border-radius:980px;
  padding:.5rem .5rem; min-height:44px; cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.bf-chips:not([data-more]) .bf-chip-extra{ display:none; }
.bf-more{ color:#6e6e73; border-style:dashed; }
.bf-chip:hover,.bf-more:hover{ border-color:#9a9a9e; }
.bf-chip[aria-pressed="true"]{
  border-color:#0071e3; background:rgba(0,113,227,.08);
  color:#0071e3; font-weight:600;
}
.bf-chips[aria-invalid="true"]{
  outline:2px solid #cc0000; outline-offset:5px; border-radius:10px;
}

.bf-btn{
  font-family:inherit; font-size:1rem; font-weight:600; color:#fff;
  background:#0071e3; border:none; border-radius:980px; padding:.95rem 1.5rem;
  cursor:pointer; width:100%; margin-top:.4rem; min-height:48px;
}
.bf-btn:hover{ background:#0058b8; }
.bf-btn[disabled]{ opacity:.55; cursor:progress; }
.bf-note{ font-size:.82rem; color:#6e6e73; }
.bf-err{ color:#cc0000; font-size:.85rem; display:none; }
.bf-err[data-on]{ display:block; }

.bf-done{ display:none; text-align:center; padding:2rem 0; }
.bf-done[data-on]{ display:block; }
.bf-tick{
  width:58px; height:58px; border-radius:50%; background:#1a6b3a; color:#fff;
  font-size:1.7rem; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.25rem;
}
.bf-done-h{ font-family:inherit; font-size:1.6rem; font-weight:600; letter-spacing:-.01em; margin:0 0 .5rem; }
.bf-done-p{ color:#6e6e73; margin:0 auto; max-width:46ch; }
.bf-code{
  font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:1.3rem; letter-spacing:.06em;
  background:#ffffff; border:1px solid #d2d2d7; border-radius:11px; padding:.75rem 1rem;
  display:inline-block; margin:1rem 0;
}
.bf-callrow{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.bf-callrow a{
  font-size:.9rem; font-weight:500; text-decoration:none; color:inherit;
  border:1px solid #d2d2d7; border-radius:999px; padding:.6rem 1.1rem;
  min-height:44px; display:inline-flex; align-items:center;
}

/* The field an error refers to, so the message and the input agree. */
.bf-form [aria-invalid="true"]{ border-color:#cc0000; outline-color:#cc0000; }

/* "Where do I find this?" — collapsed by default so it never competes with the
   field itself, but present for the customer who has no idea where to look. */
.bf-help{ margin-top:.35rem; }
.bf-help summary{
  font-size:.82rem; color:#0071e3; cursor:pointer; list-style:none;
  padding:.35rem 0; min-height:28px; display:inline-flex; align-items:center;
}
.bf-help summary::-webkit-details-marker{ display:none; }
.bf-help summary::before{ content:"\24D8"; margin-right:.4rem; font-size:.95rem; }
.bf-help[open] summary{ margin-bottom:.25rem; }
.bf-help ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.bf-help li{ font-size:.82rem; color:#6e6e73; line-height:1.45; }
.bf-help strong{ color:#1d1d1f; font-weight:600; }