/* ============================================================
   STAY ENGINE — booking flow
   Four steps: dates → room → extras → confirm.
   ============================================================ */

.shell { max-width: 72rem; margin-inline: auto; padding: 1.25rem; display: grid; gap: 1.25rem; }

/* ============ HEADER ============ */
.eng-head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.1rem; background: var(--bg);
  border: 1px solid var(--line-s); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.eng-head__brand { display: flex; align-items: center; gap: .65rem; }
.eng-head__mark { width: 1.9rem; height: 1.9rem; color: var(--acc); flex: none; }
.eng-head__name { font-family: var(--serif); font-size: var(--fs-lg); font-weight: 400; }
.eng-head__name small { display: block; font-family: var(--mono); font-size: var(--fs-xs); color: var(--tx-2); letter-spacing: .1em; }
.eng-head__spacer { flex: 1; }
.eng-head__secure { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--tx-2); }
.eng-head__secure svg { width: .85rem; height: .85rem; }

/* ============ STEPPER ============ */
.steps { display: flex; gap: .25rem; flex-wrap: wrap; }
.step {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem; border-radius: var(--r);
  font-size: var(--fs-sm); color: var(--tx-2);
  background: transparent; border: 1px solid transparent;
  transition: all .25s var(--ease);
}
.step__n {
  width: 1.4rem; height: 1.4rem; border-radius: 99px; flex: none;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--fs-xs);
  background: var(--bg-sub2); color: var(--tx-2);
}
.step.is-current { background: var(--bg); border-color: var(--line); color: var(--tx); font-weight: 500; box-shadow: var(--sh-1); }
.step.is-current .step__n { background: var(--acc); color: #fff; }
.step.is-done { color: var(--acc-tx); }
.step.is-done .step__n { background: var(--acc-lt); color: var(--acc-tx); }
@media (max-width: 40rem) { .step__t { display: none; } .step.is-current .step__t { display: inline; } }

/* ============ LAYOUT ============ */
.flow { display: grid; grid-template-columns: minmax(0,1fr) 20rem; gap: 1.25rem; align-items: start; }
@media (max-width: 62rem) { .flow { grid-template-columns: 1fr; } }

.panel {
  background: var(--bg); border: 1px solid var(--line-s);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden;
}
.panel__head { padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid var(--line-s); }
.panel__t { font-size: var(--fs-xl); font-family: var(--serif); font-weight: 400; }
.panel__d { color: var(--tx-1); font-size: var(--fs-sm); margin-top: .2rem; }
.panel__body { padding: 1.25rem; display: grid; gap: 1.1rem; }

.pane[hidden] { display: none; }

/* ============ STEP 1 — DATES ============ */
.date-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: end; }
@media (max-width: 46rem) { .date-row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .35rem; }
.field > label { font-size: var(--fs-sm); font-weight: 500; }
.field input, .field select {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .65rem .75rem; background: var(--bg); width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-lt);
}
.field__hint { font-size: var(--fs-xs); color: var(--tx-2); }
.field__err { font-size: var(--fs-xs); color: var(--err); }

.nights-pill {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .6rem .9rem; border-radius: var(--r);
  background: var(--acc-lt); color: var(--acc-tx); white-space: nowrap;
}
.nights-pill b { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 500; }

/* mini calendar */
.cal { border: 1px solid var(--line-s); border-radius: var(--r); overflow: hidden; }
.cal__head {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .75rem; background: var(--bg-sub); border-bottom: 1px solid var(--line-s);
}
.cal__m { font-weight: 550; font-size: var(--fs-sm); flex: 1; text-align: center; }
.cal__nav {
  width: 1.8rem; height: 1.8rem; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--bg); display: grid; place-items: center; cursor: pointer;
}
.cal__nav svg { width: .8rem; height: .8rem; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow {
  text-align: center; padding: .4rem 0; font-family: var(--mono);
  font-size: var(--fs-xs); color: var(--tx-2); border-bottom: 1px solid var(--line-s);
}
.cal__d {
  aspect-ratio: 1.15; border: 0; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--tx);
  display: grid; place-items: center; position: relative;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.cal__d:hover:not(:disabled) { background: var(--bg-sub2); }
.cal__d:disabled { color: var(--tx-2); opacity: .35; cursor: not-allowed; }
.cal__d.is-in-range { background: var(--acc-lt); }
.cal__d.is-start, .cal__d.is-end { background: var(--acc); color: #fff; font-weight: 500; }
.cal__d.is-empty { cursor: default; }
.cal__d small {
  position: absolute; bottom: .12rem; font-size: .54rem;
  color: var(--tx-2); font-weight: 400;
}
.cal__d.is-start small, .cal__d.is-end small { color: rgba(255,255,255,.8); }

/* ============ STEP 2 — ROOMS ============ */
.rooms { display: grid; gap: .85rem; }
.room-card {
  display: grid; grid-template-columns: 11rem minmax(0,1fr) auto;
  gap: 1rem; padding: .85rem; align-items: center;
  border: 1px solid var(--line-s); border-radius: var(--r-lg);
  cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.room-card:hover { border-color: var(--line); box-shadow: var(--sh-2); }
.room-card[aria-selected="true"] { border-color: var(--acc); background: var(--acc-lt); box-shadow: 0 0 0 1px var(--acc); }
.room-card.is-sold { opacity: .55; cursor: not-allowed; }
.room-card.is-sold:hover { border-color: var(--line-s); box-shadow: none; }
.room-card__fig { aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; background: var(--bg-sub2); }
.room-card__fig img { width: 100%; height: 100%; object-fit: cover; }
.room-card__n { font-family: var(--serif); font-size: var(--fs-lg); }
.room-card__d { font-size: var(--fs-sm); color: var(--tx-1); margin-block: .2rem .4rem; }
.room-card__meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.room-card__p { text-align: right; white-space: nowrap; }
.room-card__p b { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 500; display: block; }
.room-card__p span { font-size: var(--fs-xs); color: var(--tx-2); }
@media (max-width: 52rem) {
  .room-card { grid-template-columns: 1fr auto; }
  .room-card__fig { grid-column: 1/-1; aspect-ratio: 16/9; }
}

/* ============ STEP 3 — EXTRAS ============ */
.extras { display: grid; gap: .6rem; }
.extra {
  display: grid; grid-template-columns: 1.3rem minmax(0,1fr) auto;
  gap: .8rem; align-items: start; padding: .8rem .9rem;
  border: 1px solid var(--line-s); border-radius: var(--r);
  cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.extra:hover { border-color: var(--line); }
.extra:has(input:checked) { border-color: var(--acc); background: var(--acc-lt); }
.extra input { width: 1.1rem; height: 1.1rem; accent-color: var(--acc); margin-top: .18rem; cursor: pointer; }
.extra__n { display: block; font-weight: 500; font-size: var(--fs-sm); }
.extra__d { display: block; font-size: var(--fs-xs); color: var(--tx-1); margin-top: .1rem; }
.extra__p { font-family: var(--mono); font-size: var(--fs-sm); white-space: nowrap; }

/* ============ STEP 4 — CONFIRM ============ */
.guest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 40rem) { .guest-grid { grid-template-columns: 1fr; } }

.review { border: 1px solid var(--line-s); border-radius: var(--r); overflow: hidden; }
.review__r {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem .85rem; border-bottom: 1px solid var(--line-s); font-size: var(--fs-sm);
}
.review__r:last-child { border-bottom: 0; }
.review__r span:first-child { color: var(--tx-1); }
.review__r b { font-weight: 500; text-align: right; }

.done {
  text-align: center; padding: 2.5rem 1.5rem; display: grid; gap: .75rem; justify-items: center;
}
.done__tick {
  width: 3.2rem; height: 3.2rem; border-radius: 99px;
  background: var(--acc-lt); color: var(--acc); display: grid; place-items: center;
}
.done__tick svg { width: 1.5rem; height: 1.5rem; }
.done__ref {
  font-family: var(--mono); font-size: var(--fs-lg);
  background: var(--bg-sub); padding: .4rem .9rem; border-radius: var(--r);
  border: 1px dashed var(--line);
}

/* ============ FOOTER NAV ============ */
.flow-foot {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .9rem 1.25rem; border-top: 1px solid var(--line-s); background: var(--bg-sub);
}
.flow-foot__spacer { flex: 1; }
.flow-foot[hidden] { display: none; }
.flow-foot__err { color: var(--err); font-size: var(--fs-sm); }

/* ============ SUMMARY RAIL ============ */
.summary { position: sticky; top: 1.25rem; display: grid; gap: 0; }
.summary__head { padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--line-s); }
.summary__prop { font-family: var(--serif); font-size: var(--fs-lg); }
.summary__loc { font-family: var(--mono); font-size: var(--fs-xs); color: var(--tx-2); letter-spacing: .08em; }
.summary__body { padding: .9rem 1.1rem; display: grid; gap: .5rem; }
.summary__r { display: flex; justify-content: space-between; gap: .75rem; font-size: var(--fs-sm); }
.summary__r span { color: var(--tx-1); }
.summary__r b { font-weight: 500; text-align: right; }
.summary__r--muted b { color: var(--tx-2); font-weight: 400; }
.summary__sep { height: 1px; background: var(--line-s); margin-block: .3rem; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .9rem 1.1rem; border-top: 1px solid var(--line-s); background: var(--bg-sub); }
.summary__total b { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 550; }
.summary__note { padding: 0 1.1rem 1rem; font-size: var(--fs-xs); color: var(--tx-2); line-height: 1.45; }

/* ============ DEMO RIBBON ============ */
.demo-tag {
  position: fixed; right: 0; bottom: 0; z-index: 120;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border: 1px solid var(--line-s); border-right: 0; border-bottom: 0;
  padding: .5rem .9rem; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2);
  transition: color .3s var(--ease), transform .4s var(--ease), opacity .3s var(--ease);
}
.demo-tag.is-idle { transform: translateY(85%); opacity: .6; }
.demo-tag:hover { color: var(--tx); transform: translateY(0); opacity: 1; }
.demo-tag b { color: var(--acc); font-weight: 500; }