.progress-track{ display:flex; justify-content:space-between; margin-bottom:36px; position:relative; }
.progress-track::before{ content:""; position:absolute; top:18px; left:5%; right:5%; height:2px; background:var(--border-soft); z-index:0; }
.progress-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
.progress-step .dot{ width:36px; height:36px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:-3px -3px 8px var(--clay-hi), 4px 4px 10px var(--clay-lo); color:var(--text-muted); }
.progress-step .label{ font-size:.72rem; font-weight:600; color:var(--text-muted); text-align:center; }
.progress-step.is-active .dot, .progress-step.is-done .dot{ background:linear-gradient(155deg, var(--gold-strong), var(--gold)); color:#241d0f; }
.progress-step.is-active .label{ color:var(--text); }
@media(max-width:620px){ .progress-step .label{ display:none; } }

.booking-layout{ display:grid; grid-template-columns:1fr 320px; gap:26px; align-items:start; }
@media(max-width:900px){ .booking-layout{ grid-template-columns:1fr; } }
.booking-panel{ padding:34px; min-height:420px; }
.calendar-note{ padding:14px 18px; font-size:.9rem; color:var(--text); margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-left:4px solid var(--gold); }
.calendar-note p{ margin:0; flex:1; min-width:220px; }

/* Step 1 — calendar beside the time slot and guest count */
.date-layout{ display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 1fr); gap:28px; align-items:start; margin-top:18px; }
@media(max-width:760px){ .date-layout{ grid-template-columns:1fr; } }
.field-label{ font-weight:600; font-size:var(--fs-14); display:block; margin-bottom:8px; }
.slot-options{ display:grid; gap:12px; }
.slot-option{ text-align:left; padding:14px 18px; border-radius:var(--radius-clay-sm); border:2px solid transparent; background:var(--surface); color:var(--text); font-family:var(--font-body); cursor:pointer; display:flex; flex-direction:column; gap:2px; box-shadow:-4px -4px 10px var(--clay-hi), 5px 5px 12px var(--clay-lo); transition:transform 300ms var(--ease-clay); }
.slot-option:hover{ transform:translateY(-2px); }
.slot-option span{ font-size:var(--fs-12); color:var(--text-muted); }
.slot-option.is-selected{ border-color:var(--gold); }
.date-picked{ text-align:left; hyphens:none; font-size:.92rem; color:var(--text-muted); margin:0; }
.date-picked strong{ color:var(--text); }

.stepper{ display:inline-flex; align-items:center; gap:10px; }
.stepper input{ width:84px !important; text-align:center; padding:12px 8px !important; }
.stepper-btn{ width:44px; height:44px; flex-shrink:0; border-radius:50%; border:1px solid var(--border-soft); background:var(--surface); color:var(--text); font-size:1.3rem; line-height:1; cursor:pointer; box-shadow:-3px -3px 8px var(--clay-hi), 4px 4px 10px var(--clay-lo); }
.stepper-btn:active{ box-shadow:inset -3px -3px 8px var(--clay-hi), inset 3px 3px 8px var(--clay-lo); }
.stepper--sm input{ width:60px !important; font-family:var(--font-body); font-size:var(--fs-16); color:var(--text); border-radius:var(--radius-clay-sm); border:1px solid var(--border-soft); background:var(--surface); box-shadow:inset -3px -3px 8px var(--clay-hi), inset 3px 3px 8px var(--clay-lo); }

/* Step 2 — native huts and the function hall */
.cabin-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:18px; margin-top:18px; }
.cabin-card{ padding:0; overflow:hidden; cursor:pointer; border:2px solid transparent; }
.cabin-card.is-selected{ border-color:var(--gold); }
.cabin-card.is-taken{ opacity:.55; cursor:not-allowed; }
.cabin-card.is-taken:hover{ transform:none; }
.cabin-card-body{ padding:18px; }
.cabin-card-body p{ margin:0 0 8px; }
.cabin-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.kubo-icon{ width:44px; height:44px; border-radius:14px; background:linear-gradient(155deg, var(--gold-strong), var(--gold)); display:flex; align-items:center; justify-content:center; }
.cabin-price{ color:var(--gold-strong); font-weight:700; font-family:var(--font-head); font-size:1.25rem; }

.addon-list{ display:grid; gap:14px; }
.addon-card{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; gap:14px; flex-wrap:wrap; }

.step-actions{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:30px; flex-wrap:wrap; }
.step-actions #btn-next{ margin-left:auto; }

.price-sidebar{ padding:26px; position:sticky; top:110px; }
.price-when{ font-size:.85rem; margin:0; }
.price-lines{ margin:16px 0; display:grid; gap:8px; font-size:.9rem; }
.price-lines .line{ display:flex; justify-content:space-between; gap:12px; color:var(--text-muted); }
.price-lines .line span:last-child{ white-space:nowrap; }
.price-total{ font-family:var(--font-head); font-size:1.6rem; font-weight:700; padding-top:14px; border-top:1px solid var(--border-soft); color:var(--gold-strong); }
.price-sticky{ display:none; }
@media(max-width:900px){
  .price-sidebar{ display:none; }
  .price-sticky{ display:flex; flex-direction:column; position:fixed; bottom:0; left:0; right:0; z-index:90; background:var(--surface); padding:12px 20px; box-shadow:0 -6px 18px var(--clay-lo); align-items:flex-start; }
  .price-sticky span:first-child{ font-family:var(--font-head); font-size:1.2rem; font-weight:700; color:var(--gold-strong); }
  body{ padding-bottom:70px; }
}

.confirm-screen{ text-align:center; padding:20px 0; position:relative; overflow:hidden; }
.confirm-check{ width:84px; height:84px; border-radius:50%; background:linear-gradient(155deg, var(--gold-strong), var(--gold)); display:flex; align-items:center; justify-content:center; font-size:2.4rem; margin:0 auto 20px; animation:confirm-pop .5s var(--ease-clay); color:#241d0f; }
@keyframes confirm-pop{ from{ transform:scale(.4); opacity:0;} to{ transform:scale(1); opacity:1;} }
[data-motion="reduce"] .confirm-check{ animation:none; }
.confetti-leaf{ position:absolute; font-size:1.4rem; animation:leaf-fall 2.6s linear forwards; }
[data-motion="reduce"] .confetti-leaf{ display:none; }
@keyframes leaf-fall{ 0%{ transform:translateY(-20px) rotate(0deg); opacity:1;} 100%{ transform:translateY(340px) rotate(240deg); opacity:0;} }
.confirm-summary{ text-align:left; max-width:420px; margin:24px auto 0; }
.confirm-summary .line{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border-soft); font-size:.92rem; }
.confirm-summary .line--total{ border-bottom:none; font-weight:700; font-size:1.05rem; color:var(--gold-strong); }
/* The picture ticket */
.ticket-wrap{ max-width:340px; margin:22px auto 0; }
.ticket-img{ width:100%; height:auto; border-radius:18px; box-shadow:-6px -6px 14px var(--clay-hi), 8px 8px 20px var(--clay-lo); }
.ticket-loading{ width:100%; aspect-ratio:1080 / 1560; }
.ticket-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:22px; }
.confirm-number{ font-family:var(--font-head); font-size:1.3rem; color:var(--gold-strong); margin-top:6px; }

/* New, additive reassurance row below the booking flow */
.booking-trust-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px; }
.booking-trust-pill{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--radius-pill);
  background:var(--surface); font-size:.82rem; font-weight:600; color:var(--text-muted);
  box-shadow:-4px -4px 10px var(--clay-hi), 5px 5px 12px var(--clay-lo);
}