/* Older SMS/in-app browsers cannot interpret Tailwind 4's modern CSS.
   Keep booking usable without cascade layers, nesting or modern colours. */
@supports not (color: oklch(50% 0.1 180)) {
  body { margin: 0; font-family: Arial, sans-serif; color: #0f172a; background: #fff; line-height: 1.5; }
  img { max-width: 100%; height: auto; }
  svg { width: 24px; height: 24px; }
  a { color: #0369a1; }
  #booking, #contact { padding: 48px 16px; }
  #booking { background: #f1f5f9; }
  #booking *, #contact * { box-sizing: border-box; }
  #booking > div { max-width: 896px; margin: 0 auto; }
  #booking > div > div:first-child { text-align: center; margin-bottom: 28px; }
  #booking h2, #contact h2 { font-size: 32px; line-height: 1.2; margin: 0 0 16px; }
  #booking h3 { font-size: 24px; margin: 0 0 12px; }
  #booking p { margin: 12px 0; }
  #booking > div > div + div { background: #fff; border: 1px solid #e2e8f0; border-radius: 24px; padding: 24px; box-shadow: 0 12px 32px rgba(15,23,42,.12); }
  #booking form { margin-top: 24px; }
  #booking form > div { margin-bottom: 20px; }
  #booking form > div > div { margin-bottom: 20px; }
  #booking label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 8px; }
  #booking input, #booking select, #booking textarea { display: block; width: 100%; max-width: 100%; min-height: 48px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; font: inherit; }
  #booking textarea { min-height: 120px; }
  #booking button { width: 100%; padding: 16px; border: 0; border-radius: 28px; background: #0284c7; color: #fff; font: inherit; font-weight: bold; cursor: pointer; }
  #booking input:focus, #booking select:focus, #booking textarea:focus, #booking button:focus { outline: 2px solid #0284c7; outline-offset: 2px; }
  #booking .errorlist { color: #be123c; }
  #contact > div { max-width: 1152px; margin: auto; }
  #contact iframe { max-width: 100%; }
  @media (min-width: 768px) {
    #booking form > .grid { display: flex; margin-left: -12px; margin-right: -12px; }
    #booking form > .grid > div { width: 50%; padding: 0 12px; margin-bottom: 0; }
  }
}