/* =========================================================
   SNOWTAILORS · booking.css
   Multi-step booking form, premium edit.
   ========================================================= */

/* ========== HERO BOOKING ========== */
.bk-hero{
  position:relative;color:#fff;padding:160px 0 60px;
  background:
    linear-gradient(180deg,rgba(15,27,60,.4) 0%,rgba(15,27,60,.85) 100%),
    url('../img/hero/booking-bg.jpg') center/cover no-repeat;
  min-height:380px;display:flex;align-items:center;
}
.bk-hero h1{color:#fff;max-width:18ch;margin-top:24px;font-size:clamp(40px,5.5vw,72px)}
.bk-hero h1 em{color:var(--gold);font-style:italic}
.bk-hero__lede{
  margin-top:20px;max-width:54ch;font-size:17px;font-weight:300;
  color:rgba(255,255,255,.85);line-height:1.75;
}

/* ========== BOOKING WRAPPER ========== */
.bk{padding:80px 0 var(--gap-xl) 0;background:var(--paper)}
.bk__shell{
  display:grid;grid-template-columns:1fr 380px;gap:60px;
  align-items:start;
}
@media (max-width: 1024px){.bk__shell{grid-template-columns:1fr;gap:40px}}

/* ========== STEP RAIL ========== */
.bk-rail{
  background:#fff;padding:32px;
  border:1px solid var(--line-dark);
  position:sticky;top:120px;
  display:flex;flex-direction:column;gap:24px;
}
.bk-rail h3{font-size:20px;color:var(--navy);margin-bottom:4px}
.bk-rail__sub{font-size:13px;color:var(--grey);font-style:italic}
.bk-rail__list{display:flex;flex-direction:column;gap:14px;margin:18px 0 8px}
.bk-rail__step{
  display:flex;gap:14px;align-items:flex-start;padding:14px;
  border-left:2px solid var(--line-dark);
  cursor:pointer;
  transition:border-color var(--duration) var(--ease-luxe),background var(--duration) var(--ease-luxe);
}
.bk-rail__step:hover{background:var(--paper-2)}
.bk-rail__step.is-active{border-left-color:var(--gold);background:rgba(201,169,97,.06)}
.bk-rail__step.is-done{border-left-color:var(--gold)}
.bk-rail__step.is-done .bk-rail__num{background:var(--gold);color:var(--navy)}
.bk-rail__num{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);color:var(--grey);
  font-size:12px;font-weight:600;
  font-family:var(--font-display);
  transition:all var(--duration) var(--ease-luxe);
}
.bk-rail__step.is-active .bk-rail__num{background:var(--navy);color:#fff}
.bk-rail__title{font-family:var(--font-display);font-size:18px;color:var(--navy);font-weight:400;line-height:1.2}
.bk-rail__meta{font-size:12px;color:var(--grey);margin-top:4px}
.bk-rail__step.is-done .bk-rail__meta{color:var(--gold);font-weight:500}
.bk-rail__contact{
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:10px;font-size:13px;
}
.bk-rail__contact strong{color:var(--navy);display:block;margin-bottom:6px}
.bk-rail__contact a{color:var(--gold);font-weight:500}

/* ========== STEPS ========== */
.bk-steps{position:relative;min-height:520px}
.bk-step{
  display:none;
  animation:fadeUp .55s var(--ease-out-expo);
}
.bk-step.is-active{display:block}
.bk-step__head{margin-bottom:32px}
.bk-step__head .eyebrow{display:block;margin-bottom:14px}
.bk-step__head h2{color:var(--navy);font-size:clamp(30px,4vw,42px)}
.bk-step__head h2 em{color:var(--gold);font-style:italic}
.bk-step__head p{margin-top:14px;color:var(--grey);font-size:15px;max-width:54ch;line-height:1.7}

/* ========== STATIONS GRID — picker ========== */
.bk-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width: 1024px){.bk-pick{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 540px){.bk-pick{grid-template-columns:1fr}}
.bk-pick__item{
  position:relative;cursor:pointer;
  border:1px solid var(--line-dark);background:#fff;
  overflow:hidden;
  transition:all var(--duration) var(--ease-luxe);
}
.bk-pick__item:hover{transform:translateY(-3px);box-shadow:0 20px 40px -15px rgba(15,27,60,.18)}
.bk-pick__item input{position:absolute;opacity:0;pointer-events:none}
.bk-pick__img{height:160px;background-size:cover;background-position:center;filter:brightness(.85);transition:filter var(--duration) var(--ease-luxe)}
.bk-pick__item:hover .bk-pick__img{filter:brightness(1)}
.bk-pick__body{padding:18px 20px}
.bk-pick__name{font-family:var(--font-display);font-size:22px;color:var(--navy);font-weight:500}
.bk-pick__alt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:4px}

.bk-pick__item:has(input:checked){
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 30px 60px -20px rgba(15,27,60,.18);
}
.bk-pick__item:has(input:checked) .bk-pick__check{
  opacity:1;transform:scale(1);
}
.bk-pick__check{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  background:var(--gold);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;
  opacity:0;transform:scale(.7);transition:all var(--duration) var(--ease-luxe);z-index:2;
}

/* ========== EXPERIENCE PICKER ========== */
.bk-svc{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width: 640px){.bk-svc{grid-template-columns:1fr}}
.bk-svc__item{
  position:relative;cursor:pointer;
  background:#fff;border:1px solid var(--line-dark);
  padding:24px 24px 24px 28px;
  transition:all var(--duration) var(--ease-luxe);
}
.bk-svc__item input{position:absolute;opacity:0;pointer-events:none}
.bk-svc__item:has(input:checked){
  border-color:var(--gold);background:rgba(201,169,97,.05);
  box-shadow:0 0 0 1px var(--gold);
}
.bk-svc__item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform var(--duration) var(--ease-luxe);
}
.bk-svc__item:has(input:checked)::before{transform:scaleY(1)}
.bk-svc__title{font-family:var(--font-display);font-size:22px;color:var(--navy);font-weight:500}
.bk-svc__price{font-family:var(--font-display);font-size:18px;color:var(--gold);margin-top:4px}
.bk-svc__price small{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-light);font-family:var(--font-body);margin-right:4px}
.bk-svc__desc{margin-top:10px;font-size:13px;color:var(--grey);line-height:1.6}

/* ========== DATES ========== */
.bk-dates{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
@media (max-width: 640px){.bk-dates{grid-template-columns:1fr}}

/* ========== GROUP ========== */
.bk-group{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width: 640px){.bk-group{grid-template-columns:1fr}}
.bk-langs{display:flex;flex-wrap:wrap;gap:8px}
.bk-lang{
  cursor:pointer;padding:9px 16px;border:1px solid var(--line-dark);background:#fff;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  transition:all var(--duration) var(--ease-luxe);position:relative;
}
.bk-lang input{position:absolute;opacity:0;pointer-events:none}
.bk-lang:has(input:checked){background:var(--navy);color:#fff;border-color:var(--navy)}
.bk-lang:hover{border-color:var(--gold)}

.bk-level{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.bk-level__row{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:12px 16px;border:1px solid var(--line-dark);background:#fff;
  transition:all var(--duration) var(--ease-luxe);
}
.bk-level__row input{position:absolute;opacity:0;pointer-events:none}
.bk-level__row:has(input:checked){border-color:var(--gold);background:rgba(201,169,97,.06)}
.bk-level__bullets{display:flex;gap:3px}
.bk-level__bullet{width:8px;height:8px;background:var(--paper-2);border:1px solid var(--line-dark)}
.bk-level__bullet.fill{background:var(--gold);border-color:var(--gold)}
.bk-level__name{font-family:var(--font-display);font-size:17px;color:var(--navy);flex:1}
.bk-level__hint{font-size:12px;color:var(--grey)}

/* ========== ACTIONS ========== */
.bk-actions{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:48px;padding-top:32px;border-top:1px solid var(--line-dark);gap:18px;flex-wrap:wrap;
}
.bk-actions__progress{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.bk-actions__progress strong{color:var(--gold)}
.bk-actions__buttons{display:flex;gap:12px}

/* ========== CONFIRMATION ========== */
.bk-confirm{
  text-align:center;padding:60px 32px;
  background:#fff;border:1px solid var(--line-dark);
}
.bk-confirm__icon{
  width:72px;height:72px;border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
  color:var(--navy);font-size:32px;
}
.bk-confirm h2{color:var(--navy);font-size:42px}
.bk-confirm h2 em{color:var(--gold);font-style:italic}
.bk-confirm p{margin:18px auto 0;max-width:48ch;color:var(--grey);line-height:1.8;font-size:16px}
.bk-confirm__actions{margin-top:40px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ========== SUMMARY (mobile bottom) ========== */
.bk-summary-mobile{display:none}
@media (max-width: 1024px){
  .bk-summary-mobile{display:block;margin-top:24px}
}

/* ========== POLICY NOTE ========== */
.bk-policy{
  margin-top:24px;padding:18px 22px;background:rgba(201,169,97,.06);
  border-left:2px solid var(--gold);font-size:12px;color:var(--txt-soft);line-height:1.7;
}
.bk-policy strong{color:var(--navy);display:block;margin-bottom:4px;font-size:13px}

/* ========== INTRODUCTION (referral) ========== */
.bk-introduction{
  background:var(--paper-2);
  padding:32px;
  border:1px solid var(--line-dark);
  margin-bottom:8px;
}
.bk-introduction__head .eyebrow{display:block;margin-bottom:8px}
.bk-introduction__head h3{
  font-family:var(--font-display);font-size:26px;font-weight:400;color:var(--navy);
  margin-bottom:8px;
}
.bk-introduction__head p{
  font-size:14px;color:var(--grey);line-height:1.7;max-width:54ch;margin-bottom:8px;
}
.bk-introduction .bk-level__row{
  background:#fff;
}

/* Hidden referral-code field, slides in when "guest" is selected */
#referral-code{
  max-height:0;overflow:hidden;opacity:0;
  margin-top:0 !important;margin-bottom:0;
  transition:max-height .55s var(--ease-luxe),opacity .35s ease,margin-top .55s var(--ease-luxe);
}
#referral-code.is-visible{
  max-height:120px;opacity:1;margin-top:18px !important;
}