/*
 * Booking pages.
 *
 * The existing site has all of its CSS inline in index.html, so there is no
 * stylesheet to import. These are the same custom properties, fonts and class
 * names lifted from there, so the booking pages sit in the same design
 * language rather than inventing a new look.
 */

:root {
  --paper: #F4F1E8;
  --ink: #2E2A26;
  --track: #B34A3F;
  --stand: #5E93A8;
  --grass: #7A9257;
  --line: #DDD6C6;
  --muted: #6B6458;
  --error: #A32E22;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.booking-body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 1.06rem;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.display { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .02em; }

/* ---------- top strap, matching the hero strap on the home page ---------- */
.booking-strap {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: .65rem 1rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 500;
  font-size: .85rem;
}
.booking-strap span { color: #E8A87C; }
.booking-strap a { color: inherit; text-decoration: none; }
.booking-strap a:hover, .booking-strap a:focus-visible { text-decoration: underline; }

/* ---------- layout ---------- */
.booking-main {
  flex: 1;
  padding: 3rem 1.25rem 4rem;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.panel-h {
  display: inline-block;
  background: #fff;
  padding: .55rem 1.3rem .5rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  letter-spacing: .02em;
  box-shadow: 6px 6px 0 rgba(46, 42, 38, .12);
  margin-bottom: 1.8rem;
}

/* Cards echo .steps / .map-card on the home page */
.booking-card {
  background: #fff;
  padding: 1.8rem 1.6rem;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .15);
}

.intro { margin-bottom: 1.6rem; max-width: 52ch; }

/* ---------- price summary ---------- */
.price {
  border: 2px dashed var(--line);
  padding: 1rem 1.1rem;
  margin-bottom: 1.8rem;
}
.price-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem 0;
}
.price-row.total {
  border-top: 2px solid var(--line);
  margin-top: .5rem;
  padding-top: .6rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.2rem;
}
.price-row .k { color: var(--muted); }
.price-row.total .k { color: var(--ink); }

/* ---------- form ---------- */
.field { margin-bottom: 1.3rem; }

.field label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--track);
  margin-bottom: .4rem;
}

.field input {
  width: 100%;
  padding: .8rem .9rem;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 0;
}
.field input:focus {
  outline: 3px solid var(--stand);
  outline-offset: 1px;
  border-color: var(--ink);
}
.field input[aria-invalid="true"] { border-color: var(--error); }

.field-error {
  display: none;
  color: var(--error);
  font-size: .9rem;
  margin-top: .35rem;
  font-weight: 500;
}
.field-error.show { display: block; }

.form-error {
  display: none;
  background: #F7E4E1;
  border-left: 4px solid var(--error);
  color: var(--error);
  padding: .8rem 1rem;
  margin-bottom: 1.3rem;
  font-weight: 500;
}
.form-error.show { display: block; }

.error-list { color: var(--error); margin: 0 0 1.4rem 1.2rem; }

/* Button styled like .book-btn on the home page */
.book-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: 1.15rem;
  padding: 1rem 2.4rem;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .25);
}
.book-btn:hover, .book-btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(0, 0, 0, .3); }
.book-btn:focus-visible { outline: 3px solid var(--stand); outline-offset: 2px; }
.book-btn[disabled] { opacity: .6; cursor: progress; transform: none; box-shadow: 6px 6px 0 rgba(0, 0, 0, .25); }

.submit-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }

.fineprint {
  font-size: .92rem;
  color: var(--muted);
  border-left: 3px solid var(--line);
  padding-left: 1rem;
  margin-top: 1.6rem;
}
.fineprint a { color: var(--track); }

.note { font-size: .95rem; color: var(--muted); margin-top: 1.6rem; }
.note a { color: var(--track); }

/* ---------- confirmation ---------- */
.ref-badge {
  display: inline-block;
  background: var(--track);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 1.3rem;
  padding: .5rem 1.2rem;
  margin: .4rem 0 1.4rem;
}

.confirm-detail { margin-bottom: 1.1rem; max-width: 56ch; }

/* Framed photo, same treatment as .map-card on the home page */
.photo-card {
  background: #fff;
  padding: .9rem;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .15);
  margin-top: 2.2rem;
}
.photo-card img { display: block; width: 100%; height: auto; }
.photo-cap {
  font-size: .85rem;
  color: var(--muted);
  padding: .7rem .4rem .2rem;
  text-align: center;
}

/* ---------- footer ---------- */
.booking-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 2rem 1.25rem;
  text-align: center;
  font-size: .9rem;
}
.booking-footer a { color: #E8A87C; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}