/* Booking form feedback shared by every client site (bookform.js): required marks, errors under each field,
   and the "sent" status. Colours come from each site's tokens; --danger is set by the theme. */
.req { margin-inline-start: 3px; color: var(--danger, #e5484d); font-weight: 700; }
/* An error under one field must not stretch the fields beside it, and a dropdown with a long option must not
   widen its field past the card on a narrow phone (grid items default to their content's minimum width). */
.field { align-content: start; min-width: 0; }
.field select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
/* The same goes for every other row of the form; the long send button wraps instead of widening the card. */
.book__form > *, .calc__fields > * { min-width: 0; }
.book__form .btn--block { white-space: normal; text-align: center; line-height: 1.4; }
.form-note { grid-column: 1 / -1; margin: 0; font-size: .875rem; color: var(--muted); }
/* :is() lifts these above each site's ".field > span" label rule. */
:is(.field, fieldset) > .field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: .875rem; line-height: 1.5; font-weight: 500; color: var(--danger, #e5484d); }
:is(.field, fieldset) > .field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; font-size: .75rem; line-height: 1; font-weight: 700; color: var(--surface, #fff); background: var(--danger, #e5484d); }
.field [aria-invalid="true"], .dp-trigger[aria-invalid="true"] { border-color: var(--danger, #e5484d); }
.form-error { color: var(--danger, #e5484d); }
.form-status { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; font-size: .9375rem; line-height: 1.6; color: var(--text); background: color-mix(in srgb, #25d366 14%, transparent); border: 1px solid color-mix(in srgb, #25d366 45%, transparent); }
.form-status::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: #1fa855 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.form-status[hidden], .form-error[hidden] { display: none; }
/* An empty dropdown shows its prompt in the muted colour, like a placeholder. */
.field select:has(option[value=""]:checked) { color: var(--muted); }
.field select option { color: var(--text); }