/* ═══════════════════════════════════════════════════════════════════════
   CloseHotel guided booking shell — shares CloseFlight's visual identity.

   CloseFlight builds its wizard by rewriting a single page's DOM. CloseHotel
   already has three real pages (search → room & guests → review), so the same
   shell is rendered server-side on each page with its step marked. Same look,
   far less machinery, and every step keeps a real URL.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --chw-navy: #0f1f46;
  --chw-blue: #1769e0;
  --chw-blue-dark: #154bb8;
  --chw-sky: #eaf3ff;
  --chw-ink: #17233c;
  --chw-muted: #64748b;
  --chw-line: #d9e4f2;
  --chw-bg: #f4f7fb;
  --chw-success: #11824b;
  --chw-violet: #6d43e5;
}

body.chw-active {
  background: var(--chw-bg);
  color: var(--chw-ink);
}

/* ── The shell ───────────────────────────────────────────────────────── */
/* The homepage renders the shell up front but only reveals it once a search
   has produced results, so step 1 stays a clean landing page. */
.chw-shell { display: none; }
body.chw-active .chw-shell { display: block; }

.chw-shell {
  position: fixed;
  z-index: 900;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1480px, calc(100% - 32px));
  margin: 18px auto 0;
  padding: 18px 22px 16px;
  border: 1px solid var(--chw-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 36px rgba(15, 31, 70, .11);
  backdrop-filter: blur(14px);
  box-sizing: border-box;
}

.chw-shell-spacer { display: block; width: 100%; height: 0; transition: height .18s ease; }

.chw-shell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.chw-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.chw-brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--chw-blue), var(--chw-blue-dark));
  color: #fff;
  font-size: 21px;
  box-shadow: 0 8px 20px rgba(23, 105, 224, .26);
}

.chw-eyebrow {
  color: var(--chw-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.chw-title { margin: 2px 0 0; color: var(--chw-navy); font-size: 18px; font-weight: 900; }

.chw-shell-actions { display: flex; align-items: center; gap: 10px; }
.chw-step-copy { text-align: right; }
.chw-step-count { display: block; color: var(--chw-muted); font-size: 12px; font-weight: 800; }
.chw-step-name { display: block; margin-top: 2px; color: var(--chw-navy); font-size: 15px; font-weight: 900; }

.chw-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 48px;
  padding: 11px 20px;
  border: 1.5px solid #c8d7ea;
  border-radius: 14px;
  background: #fff;
  color: #243b5a;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 31, 70, .08);
  transition: border-color .15s, background .15s, transform .15s;
}
.chw-back:hover, .chw-back:focus-visible {
  border-color: var(--chw-blue);
  background: #f4f8ff;
  outline: none;
  transform: translateY(-1px);
}

.chw-progress { position: relative; height: 6px; overflow: hidden; border-radius: 99px; background: #e5ebf3; }
.chw-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--chw-blue), var(--chw-violet));
  transition: width .35s ease;
}

.chw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 11px; }

.chw-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #91a0b4;
  font-size: 12px;
  font-weight: 800;
}

.chw-step-dot {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid #d5dfec;
  border-radius: 50%;
  background: #fff;
  font-size: 10px;
}

.chw-step-item.is-active { color: var(--chw-blue-dark); }
.chw-step-item.is-active .chw-step-dot {
  border-color: var(--chw-blue);
  background: var(--chw-blue);
  color: #fff;
  box-shadow: 0 5px 12px rgba(23, 105, 224, .23);
}
.chw-step-item.is-done { color: var(--chw-success); }
.chw-step-item.is-done .chw-step-dot {
  border-color: #9eddbd;
  background: #e6f8ef;
  color: var(--chw-success);
}

/* ── Shared surfaces ─────────────────────────────────────────────────── */
.chw-stage {
  width: min(1480px, calc(100% - 32px));
  margin: 24px auto 0;
  padding: 26px;
  border: 1px solid var(--chw-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 31, 70, .10);
  box-sizing: border-box;
}

.chw-stage-heading { margin: 0 0 14px; color: var(--chw-navy); font-size: 18px; font-weight: 900; }

.chw-banner {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid #b9dfcb;
  border-radius: 16px;
  background: #ecfaf3;
  color: #146a42;
  font-weight: 850;
}

.chw-primary-btn {
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--chw-blue), var(--chw-blue-dark));
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(23, 105, 224, .25);
  transition: transform .15s, box-shadow .15s;
}
.chw-primary-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(23, 105, 224, .32); }

.chw-note { margin: 9px 0 0; color: var(--chw-muted); font-size: 12px; text-align: center; }

/* ── Desktop left rail (≥981px) ──────────────────────────────────────── */
@media (min-width: 981px) {
  body.chw-active { padding-left: 262px; }
  body.chw-active .chw-shell-spacer { height: 0 !important; }

  body.chw-active .chw-shell {
    top: 12px;
    bottom: 12px;
    left: 14px;
    width: 234px;
    margin: 0;
    transform: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px 18px;
  }

  .chw-shell-top { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 16px; }
  .chw-shell-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .chw-step-copy { text-align: left; }
  .chw-brand-mark { width: 40px; height: 40px; font-size: 20px; }
  .chw-back { width: 100%; }
  .chw-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
  .chw-step-item { font-size: 13px; }
}

@media (max-width: 980px) {
  .chw-shell { padding: 15px; }
  .chw-shell-top { align-items: flex-start; }
  .chw-brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .chw-title { font-size: 15px; }
  .chw-back { min-width: 92px; min-height: 44px; font-size: 14px; }
  .chw-step-name { font-size: 13px; }
  .chw-stage { width: calc(100% - 24px); padding: 18px; border-radius: 18px; }
}

/* ── Homepage: entering step 2 turns the landing page into a workspace ── */
body.home-page.chw-active .site-header,
body.home-page.chw-active .hero-copy,
body.home-page.chw-active .trust-strip,
body.home-page.chw-active .steps,
body.home-page.chw-active .seo-section,
body.home-page.chw-active .faq-section,
body.home-page.chw-active .site-footer { display: none !important; }

body.home-page.chw-active .hero { padding-top: 18px !important; }
body.home-page.chw-active .hero-content { display: block !important; }
body.home-page.chw-active .results-section { padding-top: 8px !important; }

/* The review page keeps its own action bar, aligned to the shell. */
body.chw-active .review-bar {
  position: static !important;
  width: min(1480px, calc(100% - 32px));
  margin: 20px auto 0 !important;
  border: 1px solid #b9dfcb !important;
  border-radius: 16px !important;
  background: #ecfaf3 !important;
  box-shadow: none !important;
}
body.chw-active .review-bar .review-sub {
  color: #146a42 !important;
  font-weight: 850 !important;
  font-size: 14px !important;
}
body.chw-active .review-bar .download {
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--chw-blue), var(--chw-blue-dark)) !important;
  box-shadow: 0 10px 24px rgba(23,105,224,.25) !important;
}

/* ── Identity alignment: CloseFlight's palette on CloseHotel surfaces ── */
body.chw-active .hotel-card,
body.chw-active .details-card,
body.chw-active .selected-property {
  border-radius: 24px !important;
  border: 1px solid var(--chw-line) !important;
  box-shadow: 0 18px 48px rgba(15, 31, 70, .10) !important;
}

body.chw-active .selected-property {
  background: linear-gradient(120deg, var(--chw-navy), #2a4a8a) !important;
}

body.chw-active .hotel-price-row button,
body.chw-active .review-total button {
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--chw-blue), var(--chw-blue-dark)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px rgba(23, 105, 224, .25) !important;
}

body.chw-active .review-total {
  border-radius: 20px !important;
  background: var(--chw-navy) !important;
}

body.chw-active .room-option.selected {
  border-color: var(--chw-blue) !important;
  background: var(--chw-sky) !important;
}

body.chw-active .step-number {
  background: var(--chw-sky) !important;
  color: var(--chw-blue-dark) !important;
}

body.chw-active .kicker,
body.chw-active .details-kicker {
  color: var(--chw-blue) !important;
  letter-spacing: .11em !important;
}

body.chw-active .section-head h2,
body.chw-active .details-card-head h2 {
  color: var(--chw-navy) !important;
}

body.chw-active .sleeping-arrangement {
  background: var(--chw-sky) !important;
  border-color: #bcd6f7 !important;
  color: var(--chw-blue-dark) !important;
}

/* ── Primary action inside the rail ──────────────────────────────────── */
.chw-shell-action { margin-top: 18px; }
.chw-shell-action .chw-primary-btn { min-height: 52px; font-size: 15px; }
.chw-shell-action .chw-note { font-size: 11px; line-height: 1.4; }

@media (min-width: 981px) {
  /* Pin it to the bottom of the rail, below the steps. */
  .chw-shell-action { margin-top: auto; padding-top: 20px; }
}

@media (max-width: 980px) {
  .chw-shell-action { margin-top: 12px; }
  .chw-shell-action .chw-note { display: none; }
}

/* ── Closing action at the end of the document ───────────────────────── */
.doc-end-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: min(1120px, calc(100% - 32px));
  margin: 22px auto 40px;
  padding: 20px 24px;
  border: 1px solid var(--chw-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 31, 70, .10);
  box-sizing: border-box;
}
.doc-end-action strong { display: block; color: var(--chw-navy); font-size: 16px; font-weight: 900; }
.doc-end-action span { display: block; margin-top: 3px; color: var(--chw-muted); font-size: 13px; }
.doc-end-action .chw-primary-btn { width: auto; min-width: 220px; padding: 0 26px; min-height: 54px; }
@media (max-width: 620px) {
  .doc-end-action { flex-direction: column; align-items: stretch; }
  .doc-end-action .chw-primary-btn { width: 100%; }
}

/* ── Rail refinements (2026-08-04) ───────────────────────────────────── */

/* The brand name and the step title were inline spans, so they ran together
   on one line: "CLOSEHOTEL Build your itinerary". They are two separate
   things and must read as two lines. */
.chw-eyebrow { display: block; line-height: 1; }
.chw-title { display: block; margin-top: 5px; line-height: 1.25; }

/* The brand is the only way back to the site from inside the flow, so it has
   to look clickable - and answer the keyboard as well as the mouse. */
.chw-brand { border-radius: 14px; transition: opacity .15s ease; }
.chw-brand:hover { opacity: .82; }
.chw-brand:hover .chw-title { text-decoration: underline; text-underline-offset: 3px; }
.chw-brand:focus-visible { outline: 2px solid var(--chw-blue); outline-offset: 3px; }

@media (min-width: 981px) {
  /* The rail is fixed, but its primary action sat at the end of a scrolling
     column: on a long document the Download button scrolled out of the rail
     itself. Now the step list is the only part that scrolls and the action is
     pinned to the bottom edge, always one click away. */
  body.chw-active .chw-shell { overflow: hidden; }
  body.chw-active .chw-steps { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-bottom: 4px; }
  body.chw-active .chw-shell-action {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-top: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 42%);
  }
  /* A hairline appears only when there is still list left to scroll past. */
  body.chw-active .chw-shell-action::before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 14px;
    background: var(--chw-line);
  }
}