:root {
  --cart-ink: #183126;
  --cart-muted: #68756d;
  --cart-forest: #244f3a;
  --cart-forest-dark: #143426;
  --cart-leaf: #7b9479;
  --cart-sand: #f2ecdf;
  --cart-cream: #fbf8f1;
  --cart-white: #fff;
  --cart-danger: #9e4337;
  --cart-line: rgba(24, 49, 38, 0.15);
  --cart-shadow: 0 24px 60px rgba(21, 49, 36, 0.11);
}

.booking-cart-page { background: var(--cart-cream); color: var(--cart-ink); }

.booking-flash-list {
  position: fixed;
  z-index: 100;
  top: 5.5rem;
  right: 1rem;
  width: min(420px, calc(100% - 2rem));
}

.booking-flash {
  margin: 0 0 0.6rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(36, 79, 58, 0.24);
  border-radius: 0.8rem;
  background: var(--cart-white);
  color: var(--cart-ink);
  box-shadow: 0 12px 30px rgba(21, 49, 36, 0.16);
}

.booking-flash-error { border-color: rgba(158, 67, 55, 0.35); color: var(--cart-danger); }
.booking-flash-success { border-color: rgba(36, 79, 58, 0.35); color: var(--cart-forest-dark); }

.booking-cart-hero {
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(4.5rem, 8vw, 7rem);
  background:
    linear-gradient(115deg, rgba(14, 42, 29, 0.96), rgba(29, 70, 49, 0.78)),
    url("../images/sleep/sleep-hero.webp") center/cover;
  color: var(--cart-white);
}

.booking-cart-hero h1 {
  margin: 0.55rem 0 0.75rem;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.booking-cart-hero p { max-width: 680px; margin: 0; color: rgba(255, 255, 255, 0.82); }
.booking-cart-section { padding: 0 0 clamp(4rem, 8vw, 7rem); }

.booking-hold-banner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: -2.5rem;
  margin-bottom: 2rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(36, 79, 58, 0.28);
  border-radius: 1rem;
  background: var(--cart-white);
  box-shadow: var(--cart-shadow);
}

.booking-hold-banner > div:first-child { display: grid; gap: 0.2rem; }
.booking-hold-label { color: var(--cart-leaf); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.booking-countdown { display: grid; min-width: 138px; justify-items: end; }
.booking-countdown span { color: var(--cart-muted); font-size: 0.72rem; text-transform: uppercase; }
.booking-countdown strong { color: var(--cart-forest); font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.booking-countdown.is-warning strong, .booking-countdown.is-expired strong { color: var(--cart-danger); }

.booking-cart-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr); gap: 2rem; align-items: start; }
.booking-cart-items { display: grid; gap: 1.25rem; }

.booking-cart-item {
  display: grid;
  grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
  overflow: hidden;
  border: 1px solid var(--cart-line);
  border-radius: 1.2rem;
  background: var(--cart-white);
  box-shadow: 0 14px 38px rgba(21, 49, 36, 0.07);
}

.booking-cart-item-media { min-height: 290px; background: var(--cart-sand); }
.booking-cart-item-media img { width: 100%; height: 100%; object-fit: cover; }
.booking-cart-item-body { padding: clamp(1.2rem, 3vw, 2rem); }
.booking-cart-item-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.2rem; }
.booking-cart-item-heading h2 { margin: 0.35rem 0 0.2rem; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.booking-cart-item-heading p { margin: 0; color: var(--cart-muted); }
.booking-item-total { white-space: nowrap; font-size: 1.25rem; }

.booking-item-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1.35rem 0; border-top: 1px solid var(--cart-line); border-left: 1px solid var(--cart-line); }
.booking-item-facts div { display: grid; gap: 0.2rem; padding: 0.8rem; border-right: 1px solid var(--cart-line); border-bottom: 1px solid var(--cart-line); }
.booking-item-facts dt { color: var(--cart-muted); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
.booking-item-facts dd { margin: 0; font-weight: 800; }

.booking-nightly-details { margin-bottom: 1rem; border-bottom: 1px solid var(--cart-line); }
.booking-nightly-details summary { padding: 0 0 0.8rem; color: var(--cart-forest); font-weight: 800; cursor: pointer; }
.booking-nightly-details p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.65rem 0; border-top: 1px solid var(--cart-line); font-size: 0.84rem; }
.booking-item-policy { color: var(--cart-muted); font-size: 0.8rem; line-height: 1.5; }

.booking-item-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.booking-item-actions a, .booking-item-actions button { color: var(--cart-forest); font: inherit; font-size: 0.84rem; font-weight: 900; }
.booking-item-actions button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.booking-item-actions button:hover { color: var(--cart-danger); }
.booking-item-actions form { margin: 0; }

.booking-add-stay {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  padding: 1.15rem;
  border: 1px dashed rgba(36, 79, 58, 0.38);
  border-radius: 1rem;
  color: var(--cart-ink);
  text-decoration: none;
}
.booking-add-stay > span { grid-row: 1 / 3; font-size: 2rem; line-height: 1; }
.booking-add-stay small { color: var(--cart-muted); }
.booking-add-stay:hover { border-color: var(--cart-forest); background: var(--cart-white); }

.booking-trip-summary { position: sticky; top: 6rem; padding: 1.5rem; border: 1px solid var(--cart-line); border-radius: 1.2rem; background: var(--cart-white); box-shadow: var(--cart-shadow); }
.booking-trip-summary h2 { margin: 0.45rem 0 1.2rem; }
.booking-trip-summary dl { margin: 0; }
.booking-trip-summary dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--cart-line); }
.booking-trip-summary dd { margin: 0; font-weight: 800; text-align: right; }
.booking-trip-summary .booking-total { margin-top: 0.35rem; font-size: 1.05rem; }
.booking-trip-summary .booking-due-now { color: var(--cart-forest); font-size: 1.05rem; }
.booking-trip-summary .booking-saving { color: var(--cart-forest); }
.booking-trip-summary > p { margin: 1rem 0; color: var(--cart-muted); font-size: 0.8rem; line-height: 1.55; }
.booking-trip-summary .sleep-button[disabled] { opacity: 0.62; cursor: not-allowed; transform: none; }
.booking-policy-link { display: block; margin-top: 0.8rem; color: var(--cart-forest); font-size: 0.8rem; font-weight: 800; text-align: center; }

.booking-cart-empty { max-width: 760px; margin: -2.5rem auto 0; padding: clamp(2.5rem, 7vw, 5rem); border: 1px solid var(--cart-line); border-radius: 1.2rem; background: var(--cart-white); box-shadow: var(--cart-shadow); text-align: center; }
.booking-cart-empty h1 { margin: 0.5rem 0 0.7rem; }
.booking-cart-empty p { margin: 0 auto 1.4rem; color: var(--cart-muted); }
.booking-empty-mark { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: var(--cart-sand); font-size: 1.4rem; }

@media (max-width: 980px) {
  .booking-cart-layout { grid-template-columns: 1fr; }
  .booking-trip-summary { position: static; }
}

@media (max-width: 720px) {
  .booking-hold-banner { align-items: flex-start; flex-direction: column; }
  .booking-countdown { justify-items: start; }
  .booking-cart-item { grid-template-columns: 1fr; }
  .booking-cart-item-media { min-height: 260px; }
  .booking-item-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .booking-cart-hero { padding-top: 6rem; }
  .booking-cart-item-heading { flex-direction: column; }
  .booking-item-facts { grid-template-columns: 1fr; }
  .booking-nightly-details p { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
}