/* Reserveren: steps on paper, a small bar at the bottom with the summary, and the table's "Gereserveerd" card at the end. */
.bk { background: var(--paper); }
.bk-back { margin-left: auto; color: #e9dcc2; text-decoration: none; font: 500 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; padding: 12px 0; }
.bk-main .card-head h1 { font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(26px, 5vw, 40px); color: #f4ead6; }
.bk-form { max-width: 760px; padding-top: 26px; padding-bottom: 150px; }
.step { padding: 22px 0 26px; border-bottom: 1px solid var(--line); }
.step h2 { font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step h2 span { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--gold-hi); display: inline-flex; align-items: center; justify-content: center;
  font: 600 17px/1 var(--cond); flex: none; }
.hint { font-size: 16px; color: var(--muted); font-style: italic; margin: 12px 0 0; }
.hint a { color: var(--red); }
.bk-offer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ink); color: #f3e7cf;
  border: 1px solid var(--gold); border-radius: 6px; padding: 14px 18px; }
.bk-offer b { display: block; font-size: 21px; font-weight: 600; }
.bk-offer span { color: var(--gold-hi); font-style: italic; }
.bk-offer .link-btn { color: var(--gold-hi); }

.days { display: grid; grid-auto-flow: column; grid-auto-columns: 74px; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; min-width: 0; }
.day, .pp, .tm { border: 1px solid #d3c4a8; background: #fff; border-radius: var(--r); cursor: pointer; color: var(--text); }
.day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 4px; min-height: 84px; }
.day small { font: 600 13px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.day b { font: 600 26px/1 var(--serif); }
.day i { font-size: 14px; color: var(--muted); }
.day .tag { font: 600 11px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.ppl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.pp { min-height: 50px; font: 600 21px/1 var(--serif); }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tm { min-height: 46px; font: 600 18px/1 var(--serif); font-variant-numeric: tabular-nums; }
.day[aria-checked="true"], .pp[aria-checked="true"], .tm[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: #f6ead2; }
.day[aria-checked="true"] small, .day[aria-checked="true"] i { color: var(--gold-hi); }
.day:hover, .pp:hover, .tm:hover { border-color: var(--gold); }
.bk-occ { margin-top: 18px; }
.step .field { margin-top: 14px; }
.ask-row .field { margin-top: 0; }

.bk-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--ink); border-top: 2px solid var(--gold); padding: 10px 16px 44px; }
.bk-bar-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bk-bar p { margin: 0; color: #eadcc0; font-size: 17px; line-height: 1.3; }
.bk-bar p b { color: #fff4de; }
.bk-bar .btn { flex: none; }
.bk-bar .btn[aria-disabled="true"] { opacity: .55; }
.bk-bar .form-err { max-width: 760px; margin: 6px auto 0; color: #ffb4a6; font-size: 15px; }

.done { max-width: 640px; padding-top: 34px; padding-bottom: 120px; text-align: center; }
.done:focus { outline: none; }
.tent { perspective: 900px; margin: 10px auto 22px; max-width: 420px; }
.tent-in { background: var(--ink); color: #f3e7cf; border: 1px solid var(--gold); border-radius: 4px; padding: 26px 22px 24px; position: relative;
  box-shadow: 0 18px 30px rgba(21, 18, 14, .28); transform-origin: 50% 100%; animation: tent .6s ease-out both; }
.tent-in::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(220, 189, 132, .4); border-radius: 2px; pointer-events: none; }
.tent-in svg { color: var(--gold-hi); margin: 0 auto 6px; }
.tent-big { font: 500 clamp(30px, 8vw, 40px)/1 var(--serif); text-transform: uppercase; letter-spacing: .16em; margin: 0 0 12px; color: #f8eedb; }
.tent-name { font: italic 500 26px/1.2 var(--serif); color: var(--gold-hi); margin: 0 0 6px; }
.tent-when { font: 600 17px/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.tent-extra { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(220, 189, 132, .35); font-size: 16px; color: #d8c9ac; font-style: italic; }
@keyframes tent { from { transform: rotateX(-70deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
.done-txt { color: var(--muted); }
.done-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
@media (max-width: 520px) {
  .bk-bar { padding-bottom: 42px; }
  .bk-bar p { font-size: 15px; }
  .bk-bar .btn-lg { padding: 12px 18px; min-height: 48px; }
  .done-btns .btn { width: 100%; }
}