/* =====================================================================
   BOOK NOW — the booking panel used by every bookable product.
   Partial: resources/views/frontend/partials/book-now.blade.php

   Every colour here is one of the site's semantic tokens (--surface,
   --ink, --gold, --border …), which style.css re-points under
   [data-theme="dark"]. So this panel follows the theme without a single
   dark-mode rule of its own.

   The trigger (.bkn-open) is deliberately left almost unstyled: each page
   passes the class of the CTA it sits beside, and js/buttons.js then
   dresses it exactly like every other button on the site. Controls INSIDE
   the panel carry data-kx-skip so that script leaves them alone.
   ===================================================================== */

/* ---------------------------------------------------------- trigger --- */
/* BOOK NOW is the primary action, so it is gold where "ask our team" is navy
   and My Trip is a navy outline — the site-wide booking-card convention.

   THE CARD'S OWN SHEET WINS, AND SHOULD.
   Where Book Now sits in a booking card, that card's sheet sizes the whole
   stack so the three buttons read as one set — listing.css `.lst .lst-book
   .bkn-open`, package-detail.css `.pkd-buy`, ski-product.css `.skp-buy`.
   Those selectors carry two or three classes on purpose, because this sheet
   loads after them. What is set here is only the fallback for a Book Now
   placed somewhere with no card sheet of its own, and it matches the same
   convention (gold, white label, 50px tall, 10px corners) so the two can
   never visibly disagree.

   js/buttons.js skips inside those cards. Anywhere else it may still dress
   this button, and .kx-btn sets background and colour with !important — so
   the only way to keep it gold is through its own custom properties, which
   is what the second rule does. The glow tile goes navy to read on gold. */
.bkn-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: var(--gold, #BD830D);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color .18s ease;
}
.bkn-open:hover { background: #a8740b; }

.bkn-open.kx-btn {
  --kx-ground: var(--gold, #BD830D);
  --kx-navy: #FFFFFF;
  --kx-gold: #2e4755;
  --kx-gold-2: #456677;
}

/* A page that wants it full width passes this. */
.bkn-open--block { width: 100%; }

/* Where the trigger lands on the pages that use it. Kept here rather than in
   listing.css / package-detail.css so the whole component is one pair of
   files and another session editing those sheets cannot collide with it. */
.lst-booknow { margin-top: 10px; }
.pkd-buy__book { margin-top: 10px; }
.skl-booknow { margin-top: 12px; }

/* ------------------------------------------------------------ shell --- */
.bkn {
  position: fixed;
  inset: 0;
  z-index: 10050;            /* over the header (which sits near 1000) */
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 40px);
}
.bkn[hidden] { display: none; }

.bkn__scrim {
  position: absolute;
  inset: 0;
  background: rgba(46, 71, 85, .55);
  backdrop-filter: blur(3px);
  animation: bkn-fade .22s var(--ease, ease) both;
}

.bkn__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88vh, 860px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface, #fff);
  color: var(--ink, #2e4755);
  border: 1px solid var(--border, rgba(46, 71, 85, .1));
  border-radius: var(--radius-lg, 22px);
  box-shadow: var(--shadow-lg, 0 30px 70px rgba(46, 71, 85, .35));
  padding: clamp(20px, 4vw, 34px);
  animation: bkn-rise .26s var(--ease, ease) both;
}

@keyframes bkn-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes bkn-rise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  .bkn__scrim, .bkn__panel { animation: none; }
}

.bkn__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2, #f4f6f7);
  color: var(--ink, #2e4755);
  cursor: pointer;
  transition: background .18s;
}
.bkn__x:hover { background: var(--gold, #c49320); color: var(--on-accent, #1f3240); }
.bkn__x svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------- head --- */
.bkn__head { padding-right: 44px; margin-bottom: 18px; }

.bkn__eyebrow {
  margin: 0 0 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft, #bd830d);
}
.bkn__title {
  margin: 0;
  font-family: var(--font-head, system-ui);
  font-size: clamp(1.18rem, 2.4vw, 1.46rem);
  line-height: 1.22;
  font-weight: 700;
}
.bkn__from { margin: 8px 0 0; font-size: .92rem; color: var(--text-2, inherit); }
.bkn__from b { font-size: 1.12rem; color: var(--ink, #2e4755); }
.bkn__from span { opacity: .75; }

/* ------------------------------------------------------- step dots --- */
.bkn__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: bkn;
}
.bkn__steps li {
  counter-increment: bkn;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-faint, rgba(46, 71, 85, .46));
  padding-top: 9px;
  border-top: 2px solid var(--border, rgba(46, 71, 85, .1));
  transition: color .2s, border-color .2s;
}
.bkn__steps li::before { content: counter(bkn) ". "; }
.bkn__steps li.is-on { color: var(--ink, #2e4755); border-top-color: var(--gold, #c49320); }
.bkn__steps li.is-done { color: var(--gold-soft, #bd830d); border-top-color: var(--gold, #c49320); }

/* ------------------------------------------------------------ fields --- */
.bkn__row { display: grid; gap: 12px; }
.bkn__row--2 { grid-template-columns: 1fr 1fr; }

.bkn__f { display: block; margin-bottom: 12px; }
.bkn__row .bkn__f { margin-bottom: 0; }
.bkn__row { margin-bottom: 12px; }

.bkn__f > span {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2, inherit);
}
.bkn__f > span em { font-style: normal; font-weight: 400; opacity: .6; }

.bkn__f input,
.bkn__f select,
.bkn__f textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: .92rem;
  color: var(--ink, #2e4755);
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, rgba(46, 71, 85, .22));
  border-radius: 11px;
  transition: border-color .16s, box-shadow .16s;
}
.bkn__f textarea { resize: vertical; min-height: 60px; }

.bkn__f input:focus,
.bkn__f select:focus,
.bkn__f textarea:focus {
  outline: 0;
  border-color: var(--gold, #c49320);
  box-shadow: 0 0 0 3px rgba(196, 147, 32, .18);
}
/* A field the browser or our own check has marked as wrong. */
.bkn__f input.is-bad, .bkn__f select.is-bad, .bkn__f textarea.is-bad {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

.bkn__rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint, rgba(46, 71, 85, .46));
}
.bkn__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, rgba(46, 71, 85, .1));
}

/* ----------------------------------------------------------- buttons --- */
/* .bkn__go is left for js/buttons.js to dress like the site's CTAs; what
   is set here is only the shape and the fallback look for the moment
   before that script runs (and if it never does). */
.bkn__go {
  width: 100%;
  margin-top: 6px;
  padding: 14px 20px;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--on-primary, #fff);
  background: var(--primary, #2e4755);
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  transition: transform .16s var(--ease, ease), filter .16s;
}
.bkn__go:hover { filter: brightness(1.08); }
.bkn__go:active { transform: translateY(1px); }
.bkn__go[disabled] { opacity: .6; cursor: progress; }

.bkn__actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }

.bkn__back {
  padding: 14px 18px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink, #2e4755);
  background: var(--surface-2, #f4f6f7);
  border: 1px solid var(--border, rgba(46, 71, 85, .1));
  border-radius: 13px;
  cursor: pointer;
}
.bkn__back:hover { background: var(--border-soft, #eef2f4); }
.bkn__actions .bkn__go { margin-top: 0; }

/* ----------------------------------------------------------- summary --- */
.bkn__sum {
  border: 1px solid var(--border, rgba(46, 71, 85, .1));
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.bkn__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border, rgba(46, 71, 85, .1));
  font-size: .9rem;
}
.bkn__line b { font-weight: 600; }
.bkn__line small { display: block; margin-top: 3px; font-size: .78rem; color: var(--text-2, inherit); opacity: .8; }
.bkn__line span { white-space: nowrap; font-variant-numeric: tabular-nums; }

.bkn__line--total {
  border-bottom: 0;
  background: var(--surface-2, #f4f6f7);
  padding: 15px 16px;
  font-size: 1rem;
}
.bkn__line--total b { font-weight: 700; }
.bkn__line--total span { font-size: 1.22rem; font-weight: 700; color: var(--ink, #2e4755); }

.bkn__note {
  margin: 0 0 14px;
  padding: 11px 14px;
  font-size: .82rem;
  line-height: 1.5;
  background: rgba(196, 147, 32, .11);
  border-left: 3px solid var(--gold, #c49320);
  border-radius: 0 9px 9px 0;
}

/* The sentence shown when no gateway is configured yet. Not an error — the
   booking IS taken, it is payment that follows by phone. */
.bkn__hold {
  margin: 0 0 14px;
  padding: 12px 14px;
  font-size: .85rem;
  line-height: 1.55;
  background: var(--surface-2, #f4f6f7);
  border: 1px dashed var(--border-strong, rgba(46, 71, 85, .22));
  border-radius: 11px;
}
.bkn__hold[hidden] { display: none; }

.bkn__fine { margin: 12px 0 0; font-size: .76rem; line-height: 1.5; color: var(--text-faint, rgba(46, 71, 85, .46)); }

.bkn__err {
  margin: 0 0 12px;
  padding: 11px 14px;
  font-size: .85rem;
  line-height: 1.5;
  color: #8e2a1f;
  background: rgba(192, 57, 43, .09);
  border-left: 3px solid #c0392b;
  border-radius: 0 9px 9px 0;
}
.bkn__err[hidden] { display: none; }

/* -------------------------------------------------------------- done --- */
.bkn__done { text-align: center; padding: 8px 0 0; }
.bkn__tick {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--on-accent, #1f3240);
  background: var(--gold, #c49320);
}
.bkn__tick svg { width: 28px; height: 28px; }
.bkn__done h4 {
  margin: 0 0 8px;
  font-family: var(--font-head, system-ui);
  font-size: 1.24rem;
  font-weight: 700;
}
.bkn__done p { margin: 0 0 14px; font-size: .9rem; line-height: 1.6; color: var(--text-2, inherit); }
.bkn__ref {
  display: inline-block;
  margin: 0 0 18px !important;
  padding: 9px 16px;
  font-size: .82rem;
  letter-spacing: .04em;
  background: var(--surface-2, #f4f6f7);
  border-radius: 10px;
}
.bkn__ref b { font-weight: 700; color: var(--ink, #2e4755); }

/* ------------------------------------------------------------- phones --- */
@media (max-width: 560px) {
  .bkn { padding: 0; place-items: end stretch; }
  .bkn__panel {
    width: 100%;
    max-height: 94vh;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
  }
  .bkn__row--2 { grid-template-columns: 1fr; }
  .bkn__steps li { font-size: .66rem; }
  .bkn__actions { grid-template-columns: 1fr; }
  .bkn__actions .bkn__back { order: 2; }
}

/* The page behind must not scroll while the panel is open. */
body.bkn-locked { overflow: hidden; }