/* =========================================================================
   book.css  —  THE BOOKING PAGE, AND ONLY THE BOOKING PAGE
   =========================================================================
   Loaded after css/app.css by book.html. It replaces the plain two-column
   form with a booking "counter": a photograph of the expedition across the
   top, the questions as cards you tap rather than dropdowns you open, and a
   running total that is a panel beside the form on a laptop and a bar
   across the foot of the screen on a phone.

   Everything is prefixed .bk- (or scoped under .bk-page), so nothing here
   reaches the other app pages.
   ========================================================================= */

.bk-page{ background: var(--paper); }
.bk-page .app-main{ padding: 0 0 calc(var(--bk-bar, 0px) + 3rem); }

/* ---------- 1. The banner: the trip you are booking ---------------------- */
.bk-hero{
  position: relative; isolation: isolate;
  padding: clamp(2.2rem, 6vw, 3.6rem) 0 clamp(1.6rem, 4vw, 2.4rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.bk-hero-photo{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .5;
  transition: opacity .6s var(--ease);
}
.bk-hero::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(var(--dark-rgb) / .92) 30%, rgb(var(--dark-rgb) / .55)),
    linear-gradient(0deg, var(--paper), rgb(var(--dark-rgb) / .35));
}
.bk-hero-inner{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.bk-eyebrow{
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rust-text);
}
.bk-title{
  margin: .5rem 0 .6rem;
  font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.02;
  text-transform: uppercase; color: var(--ink);
}
.bk-sub{ max-width: 46ch; color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
.bk-facts{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.bk-facts span{
  padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgb(var(--dark-rgb) / .5);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- 2. The progress rail ---------------------------------------- */
.bk-rail{
  position: sticky; top: 64px; z-index: 40;
  background: rgb(var(--dark-rgb) / .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bk-rail-inner{
  max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter);
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
}
.bk-rail-inner::-webkit-scrollbar{ display: none; }
.bk-step{
  display: flex; align-items: center; gap: .55rem;
  padding: .95rem .2rem; white-space: nowrap;
  font-size: .82rem; font-weight: 600; color: var(--ink-faint);
  border-bottom: 2px solid transparent;
  background: none; cursor: pointer;
}
.bk-step + .bk-step{ margin-left: 1.4rem; }
.bk-step i{
  font-style: normal; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
  border: 1px solid var(--line-strong); color: var(--ink-faint);
}
.bk-step:disabled{ cursor: not-allowed; opacity: .5; }
.bk-step.is-done{ color: var(--ink-soft); }
.bk-step.is-done i{ background: var(--pine); border-color: var(--pine); color: var(--on-accent); }
.bk-step.is-active{ color: var(--ink); border-bottom-color: var(--rust); }
.bk-step.is-active i{ background: var(--rust); border-color: var(--rust); color: var(--on-accent); }

/* ---------- 3. The two columns ------------------------------------------ */
.bk-grid{
  max-width: var(--container); margin-inline: auto; padding: clamp(1.6rem, 4vw, 2.6rem) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 21rem;
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start;
}
.bk-form{ min-width: 0; }
.bk-panel{ display: none; }
.bk-panel.is-active{ display: block; animation: bkIn .35s var(--ease) both; }
@keyframes bkIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .bk-panel.is-active{ animation: none; } }

.bk-head{ margin-bottom: 1.2rem; }
.bk-head h2{
  font-family: var(--font-display); font-stretch: var(--semi); font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); color: var(--ink);
}
.bk-head p{ margin-top: .4rem; color: var(--ink-faint); font-size: .92rem; }

/* ---------- 4. Card choices (trips, vehicles, packages) ------------------ */
.bk-cards{ display: grid; gap: .7rem; }
.bk-cards-2{ grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* the trip cards that book.js writes (.trip-choice) restyled as picture cards */
.bk-page .trip-group{
  margin: .4rem 0 .2rem; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.bk-page .trip-choice label{
  gap: 1rem; padding: .8rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
}
.bk-page .trip-choice img{ width: 92px; height: 74px; border-radius: 8px; }
.bk-page .trip-choice .tc-name{ font-size: 1.02rem; }
.bk-page .trip-choice .tc-price b{ color: var(--rust-soft); }
.bk-page .trip-choice input:checked + label{
  border-color: var(--rust); background: rgb(var(--accent-rgb) / .07);
  box-shadow: 0 0 0 1px var(--rust);
}

/* vehicle and package cards */
.bk-opt{ position: relative; }
.bk-opt input{ position: absolute; opacity: 0; width: 0; height: 0; }
.bk-opt label{
  display: flex; flex-direction: column; gap: .3rem;
  height: 100%; padding: 1rem 1.05rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.bk-opt label:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.bk-opt input:checked + label{
  border-color: var(--rust); background: rgb(var(--accent-rgb) / .07);
  box-shadow: 0 0 0 1px var(--rust);
}
.bk-opt input:focus-visible + label{ outline: 2px solid var(--rust); outline-offset: 2px; }
.bk-opt b{ font-size: .98rem; color: var(--ink); }
.bk-opt small{ font-size: .8rem; color: var(--ink-faint); }
.bk-opt .bk-opt-price{
  margin-top: auto; padding-top: .5rem;
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--rust-text);
}

/* ---------- 5. Fields --------------------------------------------------- */
.bk-page .field label,
.bk-page .bk-label{
  display: block; margin-bottom: .35rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.bk-page .field input[type="text"],
.bk-page .field input[type="email"],
.bk-page .field input[type="tel"],
.bk-page .field input[type="date"],
.bk-page .field input[type="number"],
.bk-page .field input[type="password"],
.bk-page .field select,
.bk-page .field textarea{
  border-radius: 10px; padding: .75rem .85rem; background: var(--surface);
}
.bk-count{ display: flex; align-items: center; gap: .5rem; }
.bk-count button{
  width: 42px; height: 42px; flex: none; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 1.2rem; color: var(--ink); cursor: pointer;
}
.bk-count button:hover{ border-color: var(--rust); color: var(--rust-text); }
.bk-count input{ width: 5rem; text-align: center; font-weight: 700; }

.bk-page .dep-chip{ border-radius: 10px; padding: .7rem 1rem; }

/* ---------- 6. The summary --------------------------------------------- */
.bk-summary{
  position: sticky; top: 124px;
  border: 1px solid var(--card-line); border-radius: 14px;
  background: linear-gradient(180deg, var(--dark-card), var(--dark));
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.bk-sum-photo{ display: block; width: 100%; height: 7.5rem; object-fit: cover; opacity: .85; }
.bk-sum-head{ padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--dark-line); }
.bk-sum-head .eyebrow{ color: var(--rust-soft); font-size: .64rem; }
.bk-sum-head h3{
  margin-top: .3rem; font-family: var(--font-display); font-stretch: var(--semi);
  font-weight: 700; font-size: 1.05rem; color: var(--dark-ink);
}
.bk-sum-rows{ padding: .8rem 1.1rem; display: grid; gap: .5rem; }
.bk-sum-rows > div{ display: flex; justify-content: space-between; gap: 1rem; font-size: .84rem; }
.bk-sum-rows > div > span:first-child{ color: var(--dark-muted); }
.bk-sum-rows > div > span:last-child{ color: var(--dark-ink); font-weight: 600; text-align: right; }
.bk-sum-price{
  padding: .9rem 1.1rem; border-top: 1px solid var(--dark-line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.bk-sum-price span{
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dark-muted);
}
.bk-sum-price b{
  font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--rust-soft);
}
.bk-sum-foot{ padding: .85rem 1.1rem 1.1rem; font-size: .76rem; line-height: 1.55; color: var(--dark-muted); }
.bk-sum-foot .summary-why{ margin: 0 0 .5rem; }

/* ---------- 7. Step buttons -------------------------------------------- */
.bk-actions{ display: flex; align-items: center; gap: .7rem; margin-top: 1.6rem; }
.bk-actions .spacer{ margin-left: auto; }
.bk-page .btn{ border-radius: 10px; }

/* ---------- 8. Phones: the summary becomes a bar ------------------------ */
@media (max-width: 900px){
  .bk-grid{ grid-template-columns: 1fr; }
  .bk-rail{ top: 58px; }
  .bk-summary{
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 50;
    border: 0; border-top: 1px solid var(--dark-line); border-radius: 14px 14px 0 0;
    max-height: 72vh; overflow: auto;
  }
  .bk-sum-photo{ display: none; }
  .bk-summary:not(.is-open) .bk-sum-rows,
  .bk-summary:not(.is-open) .bk-sum-foot{ display: none; }
  .bk-sum-head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 1rem; border: 0; }
  .bk-sum-toggle{
    flex: none; display: inline-flex; align-items: center; gap: .35rem;
    min-height: 44px; padding: 0 .4rem; margin-right: -.4rem;   /* a thumb-sized target */
    font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--rust-soft); background: none; border: 0; cursor: pointer;
  }
  /* 11px is the floor for an uppercase label on a phone */
  .bk-sum-head .eyebrow,
  .bk-sum-price span{ font-size: .6875rem; }
  .bk-sum-foot{ font-size: .8rem; }
  .bk-sum-price{ padding: .7rem 1rem .9rem; }
  .bk-sum-price b{ font-size: 1.5rem; }
  .bk-page .app-main{ padding-bottom: 11rem; }
  .bk-page .app-footer{ margin-bottom: 8rem; }
}
@media (min-width: 901px){
  .bk-sum-toggle{ display: none; }
}


/* ---------- 9. The Summer / Winter switch above the expeditions ---------- */
.bk-seasons{ display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.bk-seasons:empty{ display: none; }
.bk-seasons button{
  display: flex; flex-direction: column; gap: .1rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.bk-seasons button:hover{ border-color: var(--rust); color: var(--ink); }
.bk-seasons button b{ font-size: .9rem; font-weight: 700; letter-spacing: .02em; }
.bk-seasons button small{ font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.bk-seasons button[aria-pressed="true"]{
  background: rgb(var(--accent-rgb) / .14); border-color: var(--rust); color: var(--ink);
}
.bk-seasons button[aria-pressed="true"] small{ color: var(--rust-text); }

/* the departures, now under the expedition cards in the same step */
.bk-departures{ margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* The departures board: every open departure, in a Winter and a Summer
   section, one row per expedition with its dates as chips (book.js,
   renderDepartures). The expedition already chosen is the lit row. */
.dep-board{ display: grid; gap: 1.3rem; margin-top: .6rem; }
.dep-season-head{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem;
  margin: 0 0 .5rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.dep-season-head b{
  font-family: var(--font-display); font-weight: 800;
  font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.dep-season-head span{
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.dep-trip{
  display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: .5rem 1rem; align-items: center;
  padding: .65rem .75rem; margin: 0 -.75rem;
  border: 1px solid transparent; border-radius: 10px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.dep-trip.is-chosen{ border-color: var(--gold-line); background: rgb(var(--accent-rgb) / .06); }
.dep-trip-name{ margin: 0; font-weight: 700; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.dep-trip-name span{ display: block; margin-top: .1rem; font-weight: 500; font-size: .78rem; color: var(--ink-faint); }
.dep-trip .dep-chips{ margin: 0; }
@media (max-width: 640px){
  .dep-trip{ grid-template-columns: minmax(0, 1fr); margin: 0 -.5rem; padding: .6rem .5rem; }
}
@media (prefers-reduced-motion: reduce){ .dep-trip{ transition: none; } }


/* ---------- 10. The own-vehicle kit list -------------------------------- */
.bk-ticks{ display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem .9rem; }
.bk-tick{
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); font-size: .86rem; color: var(--ink-soft); cursor: pointer;
}
.bk-tick:hover{ border-color: var(--line-strong); }
.bk-tick input{ flex: none; }
.bk-tick:has(input:checked){ border-color: var(--rust); background: rgb(var(--accent-rgb) / .07); color: var(--ink); }

/* ---------- 11. The "important" notice (pick-up and drop-off) ------------ */
.bk-important{
  display: flex; gap: .9rem; align-items: flex-start;
  margin: 0 0 1.4rem; padding: 1rem 1.1rem;
  border: 1px solid var(--gold-line); border-left: 3px solid var(--rust);
  border-radius: 12px; background: rgb(var(--accent-rgb) / .08);
}
.bk-important-mark{
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rust); color: var(--on-accent);
  font-weight: 800; font-size: .86rem; line-height: 1;
}
.bk-important b{
  display: block; margin-bottom: .25rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust-text);
}
.bk-important p{ font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }