/* ============================================================
   RIDGELINE — BOOKING REQUEST MODAL
   Companion styling for js/booking.js. Built from the existing
   design tokens (paper ground, ink type, moss accent, Fraunces
   headings, mono labels) so the flow reads as part of the site
   rather than a bolted-on widget.
   ============================================================ */

.bk[hidden]{ display:none; }
.bk *[hidden]{ display:none !important; }

.bk{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.bk__scrim{
  position:absolute; inset:0;
  background:rgba(13,26,12,0.72);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity 0.22s ease;
}
.bk.is-open .bk__scrim{ opacity:1; }

.bk__dialog{
  position:relative; z-index:1;
  width:100%; max-width:620px; max-height:min(88vh, 780px);
  display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  border:1px solid rgba(13,26,12,0.55); border-radius:20px;
  box-shadow:0 12px 28px -16px rgba(13,26,12,0.5), 0 40px 70px -30px rgba(13,26,12,0.55);
  opacity:0; transform:translateY(14px) scale(0.985);
  transition:opacity 0.22s ease, transform 0.22s ease;
  overflow:hidden;
}
.bk.is-open .bk__dialog{ opacity:1; transform:none; }

.bk__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(13,26,12,0.06); border:none; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, color 0.2s ease;
}
.bk__close:hover{ background:rgba(13,26,12,0.12); color:var(--ink); }
.bk__close svg{ width:15px; height:15px; }

/* ---- head ---- */
.bk__head{ padding:28px 28px 20px; border-bottom:1px solid rgba(13,26,12,0.1); }
.bk__eyebrow{
  font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--moss-dim); margin-bottom:10px;
}
.bk__title{
  font-family:var(--f-display); font-weight:600; color:var(--ink);
  font-size:clamp(1.35rem, 3vw, 1.75rem); line-height:1.15; letter-spacing:-0.01em;
}
.bk__sub{ font-size:0.88rem; color:var(--ink-soft); margin-top:8px; max-width:52ch; }

.bk__crumbs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.bk__crumbs span{
  font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.03em;
  background:var(--paper-dim); color:var(--ink-soft);
  padding:4px 10px; border-radius:999px;
}

.bk__progress{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.bk__bar{ flex:1; height:3px; border-radius:2px; background:rgba(13,26,12,0.12); overflow:hidden; }
.bk__bar i{
  display:block; height:100%; width:20%; border-radius:2px;
  background:linear-gradient(90deg, var(--ember-hi), #54A58B);
  transition:width 0.3s ease;
}
.bk__count{
  font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.05em;
  color:var(--stone-dim); white-space:nowrap;
}

/* ---- body ---- */
.bk__body{ padding:24px 28px; overflow-y:auto; flex:1; }

/* ---- chips ---- */
.bk-chip{
  position:relative; text-align:left;
  background:#fff; border:1px solid rgba(13,26,12,0.16); border-radius:12px;
  padding:13px 15px; color:var(--ink);
  display:flex; flex-direction:column; gap:2px;
  transition:border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.bk-chip b{ font-size:0.92rem; font-weight:600; line-height:1.25; }
.bk-chip span{ font-size:0.76rem; color:var(--stone-dim); }
.bk-chip i{ font-style:normal; font-size:0.7rem; color:var(--stone-dim); margin-top:4px; }
.bk-chip:hover:not(:disabled){
  border-color:#54A58B; transform:translateY(-2px);
  box-shadow:0 10px 20px -14px rgba(13,26,12,0.5);
}
.bk-chip.is-selected{
  background:#39705E; border-color:#39705E; color:var(--paper);
}
.bk-chip.is-selected span,
.bk-chip.is-selected i{ color:rgba(242,246,239,0.78); }
.bk-chip:disabled{ opacity:0.4; cursor:not-allowed; }

.bk-grid{ display:grid; gap:10px; }
.bk-grid--2{ grid-template-columns:repeat(2, 1fr); }
.bk-grid--3{ grid-template-columns:repeat(3, 1fr); }
.bk-wide{ align-items:flex-start; justify-content:center; min-height:56px; }

/* ---- step 1: date strip ---- */
.bk-dates{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(74px, 1fr)); gap:8px;
}
.bk-date{ align-items:center; text-align:center; gap:0; padding:10px 6px; }
.bk-date__dow{
  font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--stone-dim);
}
.bk-date b{ font-family:var(--f-display); font-size:1.25rem; line-height:1.2; }
.bk-date span{ font-size:0.68rem; }
.bk-date.is-selected .bk-date__dow{ color:rgba(242,246,239,0.78); }

/* ---- step 4: other location ---- */
.bk-other-wrap{ display:none; margin-top:16px; }
.bk-other-wrap.is-open{ display:block; }

/* ---- form bits ---- */
.bk-field{ margin-bottom:14px; }
.bk-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bk-label{
  display:block; font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--moss-dim); margin-bottom:6px;
}
.bk-input{
  width:100%; background:#fff; color:var(--ink);
  border:1px solid rgba(13,26,12,0.16); border-radius:10px;
  padding:12px 14px; font-size:0.92rem;
  transition:border-color 0.18s ease, box-shadow 0.18s ease;
}
.bk-input::placeholder{ color:var(--stone-dim); }
.bk-input:focus{ outline:none; border-color:#54A58B; box-shadow:0 0 0 3px rgba(84,165,139,0.15); }
.bk-input.has-error{ border-color:#B4412F; box-shadow:0 0 0 3px rgba(180,65,47,0.12); }
.bk-error{ font-size:0.8rem; color:#B4412F; margin-bottom:12px; }
.bk-hint{ font-size:0.75rem; color:var(--stone-dim); margin-top:8px; }
.bk-hint--center{ text-align:center; margin-top:12px; }
.bk-hint a{ color:#39705E; font-weight:600; text-decoration:underline; }

/* ---- buttons ---- */
.bk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border:none; border-radius:14px;
  font-family:var(--f-body); font-weight:700; font-size:0.95rem;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.bk-btn svg{ width:16px; height:16px; }
.bk-btn--primary{
  background:linear-gradient(135deg, #5CC79A 0%, #54A58B 50%, #365429 100%);
  color:var(--paper);
  box-shadow:0 10px 22px -10px rgba(84,165,139,0.55);
}
.bk-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(64,170,130,0.65); }
.bk-btn--block{ width:100%; margin-top:6px; }
.bk-btn--ghost{
  background:none; border:1px solid rgba(13,26,12,0.25); color:var(--ink-soft);
  font-weight:600; margin-top:20px;
}
.bk-btn--ghost:hover{ border-color:var(--ink); }
.bk-other__go{ margin-top:14px; }

/* ---- foot ---- */
.bk__foot{ padding:0 28px 22px; }
.bk__back{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:none; padding:0;
  font-family:var(--f-mono); font-size:0.76rem; letter-spacing:0.04em;
  color:var(--stone-dim); transition:color 0.18s ease;
}
.bk__back:hover{ color:var(--ink); }
.bk__back svg{ width:13px; height:13px; }

/* ---- confirmation ---- */
.bk-done{ text-align:center; }
.bk-done__mark{
  width:54px; height:54px; border-radius:50%; margin:0 auto 18px;
  background:var(--moss-dim); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.bk-done__mark svg{ width:24px; height:24px; }
.bk-done__lead{
  font-family:var(--f-display); font-size:1.08rem; font-weight:600;
  color:var(--ink); margin:0 auto 10px; max-width:40ch;
}
.bk-done__call{ font-size:0.9rem; color:var(--ink-soft); margin:0 auto; max-width:46ch; }
.bk-done__call b{ color:var(--moss-dim); }

.bk-summary{
  text-align:left; margin:22px 0 4px;
  background:var(--paper-dim); border-radius:14px; padding:6px 18px;
}
.bk-summary__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:11px 0; border-bottom:1px solid rgba(13,26,12,0.1);
}
.bk-summary__row:last-child{ border-bottom:none; }
.bk-summary__row span{
  font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--moss-dim); white-space:nowrap;
}
.bk-summary__row b{ font-size:0.86rem; font-weight:600; color:var(--ink); text-align:right; }

/* ---- responsive ---- */
@media (max-width:560px){
  .bk{ padding:0; align-items:flex-end; }
  .bk__dialog{ max-width:none; max-height:94vh; border-radius:20px 20px 0 0; border-bottom:none; }
  .bk__head{ padding:24px 20px 18px; }
  .bk__body{ padding:20px; }
  .bk__foot{ padding:0 20px 18px; }
  .bk-grid--2, .bk-grid--3, .bk-field-row{ grid-template-columns:1fr; }
  .bk-dates{ grid-template-columns:repeat(auto-fill, minmax(66px, 1fr)); }
}

@media (prefers-reduced-motion: reduce){
  .bk__scrim, .bk__dialog{ transition:none; }
  .bk-chip:hover:not(:disabled), .bk-btn--primary:hover{ transform:none; }
}
