/* Bear Park — booking drawer (pair: site/book-drawer.js, loaded site-wide).
   Every "Book a tour" CTA opens the booking form in a forest panel that
   slides in from the right while the page pushes left beneath a scrim
   (the the reference quote-drawer move, in the Bear Park palette). The
   booking sections at the bottom of the landing and centre pages stay
   for organic scrollers; the drawer is the fast path. */

.bkd-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(20, 25, 19, .46);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility .5s;
}
body.bkd-open .bkd-scrim { opacity: 1; visibility: visible; pointer-events: auto; }

.bkd {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 121;
  width: min(860px, 94vw);
  background: #20271f; color: #f2eee3;
  transform: translateX(102%);
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
  visibility: hidden;
  display: flex; flex-direction: column;
  box-shadow: -30px 0 90px rgba(18, 24, 18, .45);
}
body.bkd-open .bkd { transform: translateX(0); visibility: visible; }
/* keep it interactive-only while open, but let the slide-out finish on close */
.bkd.bkd-anim { visibility: visible; }

/* the page beneath pushes left; its fixed chrome yields while the panel owns
   the viewport (a transformed page contains fixed descendants, so the chrome
   fades out fast and returns after the push-back) */
body.bkd-open .bp-page { transform: translateX(calc(-1 * min(9vw, 130px))); }
.bp-page { transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
body.bkd-open .topbar, body.bkd-open .pillnav,
body.bkd-fading .topbar, body.bkd-fading .pillnav { opacity: 0 !important; pointer-events: none !important; }
.topbar, .pillnav { transition: opacity .22s ease; }
body.bkd-open { overflow: hidden; }

.bkd-x {
  position: absolute; top: clamp(18px, 2.4vw, 34px); right: clamp(18px, 2.4vw, 34px);
  width: 44px; height: 44px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(242, 238, 227, .3);
  color: #f2eee3; font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.bkd-x:hover { background: #f2eee3; color: #20271f; border-color: #f2eee3; }

.bkd-inner {
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(56px, 9vh, 110px) clamp(26px, 4.5vw, 84px) clamp(40px, 6vh, 72px);
  display: flex; flex-direction: column; gap: clamp(26px, 4vh, 40px);
  height: 100%; box-sizing: border-box;
}
.bkd-eyebrow {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size:var(--t-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242, 238, 227, .62);
}
.bkd-h {
  margin: 0; max-width: 14ch;
  font-family: "Canela LCG", Georgia, serif; font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.04; letter-spacing: -.02em;
  color: #f2eee3;
}
.bkd-sub {
  margin: -8px 0 0; max-width: 46ch;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-weight: 400; font-size: var(--t-body-sm); line-height: 1.6;
  color: rgba(242, 238, 227, .72);
}

.bkd-form { display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 32px); }
.bkd-label {
  display: block; margin-bottom: 12px;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242, 238, 227, .6);
}
.bkd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bkd-chip {
  appearance: none; cursor: pointer;
  background: none; border: 1px solid rgba(242, 238, 227, .32); color: #f2eee3;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 14px; font-weight: 400; padding: 11px 18px;
  transition: background .2s, color .2s, border-color .2s;
}
.bkd-chip:hover { border-color: rgba(242, 238, 227, .7); }
.bkd-chip.sel { background: #f2eee3; color: #20271f; border-color: #f2eee3; }

.bkd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.bkd-field label {
  display: block; margin-bottom: 8px;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 14px; font-weight: 400; color: rgba(242, 238, 227, .82);
}
.bkd-field input {
  width: 100%; box-sizing: border-box;
  background: rgba(242, 238, 227, .06);
  border: 1px solid rgba(242, 238, 227, .26); border-radius: 0;
  color: #f2eee3; font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size:var(--t-ui-16); padding: 13px 14px; outline: none;
  transition: border-color .2s;
}
.bkd-field input:focus { border-color: #f2eee3; }
.bkd-field input::placeholder { color: rgba(242, 238, 227, .38); }
/* Safari paints autofilled fields YELLOW (Josh, 10 Jul: not a brand colour) -
   hold the forest field and cream text through autofill */
.bkd-field input:-webkit-autofill,
.bkd-field input:-webkit-autofill:hover,
.bkd-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #2a322b inset;
  -webkit-text-fill-color: #f2eee3;
  caret-color: #f2eee3;
  transition: background-color 99999s ease-out 0s;
}
/* the start date is a real date field (Josh, 10 Jul): native picker, drawn to
   match the text inputs on the forest panel */
.bkd-field input[type="date"] {
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;
  min-height: 49px; /* iOS collapses an empty date field; hold the text-input height */
}
.bkd-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.bkd-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; cursor: pointer; }
.bkd-req { color: #c94e1d; }

.bkd-submit {
  align-self: flex-start; cursor: pointer;
  background: #c94e1d; border: 1px solid #c94e1d; border-radius: 0; color: #fff;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: 17px 34px;
  transition: background .2s, border-color .2s;
}
.bkd-submit:hover { background: #b34317; border-color: #b34317; }
.bkd-help {
  margin: -6px 0 0;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size:var(--t-ui-13); color: rgba(242, 238, 227, .55);
}
/* the soft next step under the submit: the parents guide (opens the modal) */
.bkd-guide {
  margin: -4px 0 0; width: fit-content;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: var(--t-ui-13); font-weight: 400;
  color: rgba(242, 238, 227, .6); text-decoration: none;
  border-bottom: 1px solid rgba(242, 238, 227, .28); padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.bkd-guide:hover { color: #f2eee3; border-color: #f2eee3; }

.bkd-confirm { display: flex; flex-direction: column; gap: 16px; }
.bkd-confirm-h {
  margin: 0; font-family: "Canela LCG", Georgia, serif; font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; color: #f2eee3;
}
.bkd-confirm-p {
  margin: 0; font-size: var(--t-body-sm); line-height: 1.6;
  color: rgba(242, 238, 227, .76); max-width: 42ch;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
}

/* ---------- the drawer form, in page flow (Josh, 9 Jul: one booking form
   everywhere) — the #book sections host the same bkd-* controls on the same
   forest panel; higher specificity so it wins over each page's .bk-card ---------- */
.bk-card.bkd-inline {
  background: #20271f; color: #f2eee3;
  border: 1px solid rgba(242, 238, 227, .14); border-radius: 4px;
  padding: clamp(26px, 3vw, 44px); min-height: 0;
}
.bkd-inline .bkd-form { gap: clamp(22px, 3vh, 30px); }

/* centre pages, desktop: past the hero the pill nav GROWS a Book a tour
   segment between the page name and the burger - the pill widens and the
   orange segment unfolds on the same eased curve as the rest of the site,
   never a snap. Fixed open widths so the CSS transition has real numbers. */
@media (min-width: 821px) {
  body.bp-centre .pillnav, body.bp-home .pillnav {
    transition: width .85s cubic-bezier(.22, 1, .36, 1);
  }
  body.bp-centre .pillnav .pill-cta, body.bp-home .pillnav .pill-cta {
    display: flex; align-items: center; justify-content: center;
    width: 0; padding: 0; opacity: 0; overflow: hidden; white-space: nowrap;
    height: 100%; background: #c94e1d; color: #fff; text-decoration: none;
    font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
    font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
    transition: width .85s cubic-bezier(.22, 1, .36, 1), opacity .4s ease .22s;
  }
  body.bp-centre.bkd-cta .pillnav, body.bp-home.bkd-cta .pillnav { width: 380px; }
  body.bp-centre.bkd-cta .pillnav .pill-cta, body.bp-home.bkd-cta .pillnav .pill-cta { width: 164px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.bp-centre .pillnav, body.bp-centre .pillnav .pill-cta, body.bp-home .pillnav .pill-cta { transition: none; }
}

@media (max-width: 760px) {
  .bkd { width: 100vw; height: 100dvh; }
  body.bkd-open .bp-page { transform: none; }
  .bkd-inner { padding: 76px 22px 40px; gap: 20px; }
  .bkd-h { font-size: 26px; }
  .bkd-sub { margin-top: -4px; }
  .bkd-form { gap: 22px; }
  .bkd-chips { gap: 8px; }
  .bkd-chip { padding: 10px 14px; font-size: 13px; }
  .bkd-fields { grid-template-columns: 1fr; gap: 14px; }
  .bkd-field label { margin-bottom: 6px; font-size: 13px; }
  .bkd-field input { padding: 12px 13px; }
  .bkd-submit { align-self: stretch; text-align: center; padding: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bkd, .bp-page, .bkd-scrim { transition: none; }
}