/* The two public intake forms. Layered on /book.css, which already owns the
 * header, the wordmark, the type scale and the button styles — this file adds
 * only what the forms need.
 *
 * 🔴 EXTERNAL, NOT INLINE. The booking front's CSP is `style-src 'self'` with
 * no `unsafe-inline`, and `booking_front_test` asserts no inline style or
 * script appears on any page it serves. A `<style>` block here would be
 * refused by the browser and reddened by the battery — in that order. */

.step         { margin: 1.6rem 0 2.2rem; }
.step h2      { margin: 0 0 .4rem; }
.is-hidden    { display: none !important; }

label         { display: block; margin: 1.1rem 0 .3rem; font-weight: 600; }
label .opt    { font-weight: 400; opacity: .65; }

input[type=text], input[type=email], input[type=tel], textarea {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem;
  border: 1px solid rgba(255,255,255,.22); border-radius: 8px;
  background: rgba(255,255,255,.04); color: inherit; font: inherit;
}
input[type=file] { margin-top: .3rem; font: inherit; }
textarea      { resize: vertical; min-height: 8rem; }

input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid #7fb2ff; outline-offset: 2px;
}

.hint         { opacity: .75; font-size: .93rem; margin: .35rem 0 0; }
.err          { color: #ffb4b4; margin-top: .9rem; font-weight: 600; }

button[type=submit] {
  margin-top: 1.4rem; padding: .8rem 1.5rem; font: inherit; font-weight: 700;
  border: 0; border-radius: 999px; cursor: pointer;
}
button[disabled] { opacity: .6; cursor: default; }

/* 🔴 THE HONEYPOT.
 *
 * Moved off-screen rather than `display:none`, and the distinction is the whole
 * point. The crudest form-fillers skip anything display:none, which would make
 * this trap catch only the bots that were never the problem. Positioning it out
 * of view leaves it in the layout and in the accessibility tree's reach — so
 * `aria-hidden` and `tabindex="-1"` on the markup are what keep a screen reader
 * and a keyboard user away from it, not the CSS.
 *
 * Three independent covers, because any one of them alone has a known way to
 * be wrong: off-screen (a bot reading geometry ignores it), aria-hidden (a
 * screen reader skips it), tabindex -1 (a keyboard never lands on it). */
.trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto; width: 1px; height: 1px; overflow: hidden;
}