/* Builds on flight-search.css's shared field-box/popover/pax-pill system —
   only hotel-specific additions live here (hero, dates field, room blocks,
   nationality row, and the read-only search summary page). */

/* ================= Hero ================= */
/* A clifftop resort pool above the ocean. Shell, scrim and grain all come from
   the shared hero rule in flight-search.css — only the photograph and its crop
   live here.

   This replaced a timber lodge shot whose gable roof landed squarely behind the
   headline: measured as local detail energy across the title box it scored 1.14
   against 0.37 here, which is exactly the clutter that made the type look
   pasted on. The 57% crop keeps the open horizon behind the headline and drops
   the palms and terrace along the bottom of the band, where the frosted stats
   strip has something to sit against. */
.hotel-hero {
  --hero-photo: url("https://images.unsplash.com/photo-1540541338287-41700207dee6?fm=jpg&q=72&w=1800&auto=format&fit=crop&ixlib=rb-4.1.0");
  --hero-photo-pos: center 57%;
  padding: 3.5rem 0 calc(var(--hero-card-overlap, 260px) + 2.5rem);
}

.hotel-search-wrapper {
  margin-top: calc(-1 * var(--hero-card-overlap, 260px));
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 5;
}

/* Shared by the hotel/tour/sightseeing/visa/cruise heroes. Real frosted glass
   over the photograph — it stays legible whatever is behind it, and the blur
   is what sells the panel as a physical layer rather than a flat white box. */
.hero-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1.75rem;
  width: fit-content;
  max-width: 100%;
  margin: 2.1rem auto 0;
  padding: 0.95rem 1.7rem;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 1.05rem;
  box-shadow: 0 14px 36px rgba(11, 31, 58, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: 1.75rem;
  border-right: 1px solid rgba(11, 31, 58, 0.11);
}

.hero-stat:last-child {
  padding-right: 0;
  border-right: none;
}

.hero-stat .icon {
  width: 22px;
  height: 22px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.hero-stat div {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.25;
}

.hero-stat strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-navy);
}

.hero-stat span {
  font-size: 0.72rem;
  color: #6b7789;
  white-space: nowrap;
}

/* ================= Fields row ================= */
.hotel-search-form .trip-fields-simple {
  align-items: stretch;
}

.field-box.field-dates .field-value-text.is-placeholder,
.field-box.field-travelers .field-value-text.is-placeholder {
  color: #a7b0bd;
  font-weight: 500;
}

.hotel-search-btn {
  align-self: center;
}

/* ================= Autocomplete: city initial badge ================= */
.autocomplete-code-city {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-navy-soft);
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ================= Rooms & guests panel ================= */
.rooms-panel {
  width: 420px;
  padding: 1.1rem 1.1rem 1rem;
}

.nationality-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid #eef1f6;
}

.nationality-row label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nationality-row label .icon {
  width: 15px;
  height: 15px;
  color: var(--brand-gold);
}

.nationality-row select {
  border: 1px solid #dde3ec;
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-navy);
  background: #fff;
  max-width: 220px;
}

.rooms-container {
  max-height: 320px;
  overflow-y: auto;
}

.room-block {
  padding: 0.5rem 0;
}

.room-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.room-block-head strong {
  font-size: 0.85rem;
  color: var(--brand-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.room-remove-btn {
  border: none;
  background: none;
  color: #d8574a;
  font-weight: 600;
  font-size: 0.8rem;
}

.room-remove-btn:hover {
  text-decoration: underline;
}

.room-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  flex-wrap: wrap;
}

.room-count-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5565;
  flex: 0 0 auto;
}

.room-count-row .pax-pill-group {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.child-age-row {
  background: var(--brand-navy-soft);
  border-radius: 0.6rem;
  padding: 0.5rem 0.6rem;
  margin-top: 0.3rem;
}

.child-age-row .pax-pill {
  min-width: 28px;
  height: 28px;
  font-size: 0.78rem;
}

.room-divider {
  border: none;
  border-top: 1px dashed #dde3ec;
  margin: 0.6rem 0;
}

.rooms-panel-footer {
  justify-content: space-between;
}

.add-room-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1.5px solid var(--brand-navy);
  color: var(--brand-navy);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 1.1rem;
  border-radius: 2rem;
  transition: background-color 0.2s ease;
}

.add-room-btn .icon {
  width: 14px;
  height: 14px;
}

.add-room-btn:hover:not(:disabled) {
  background: var(--brand-navy-soft);
}

.add-room-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ================= Modify-search bar (results page) ================= */
.hotel-modify-bar {
  background: var(--brand-navy-soft);
  padding: 1.1rem 0;
  margin-bottom: 2rem;
}

.hotel-modify-bar .flight-search-card {
  box-shadow: 0 10px 28px rgba(11, 31, 58, 0.1);
}

/* Detail page: no product-switcher tabs, so the bar goes full-bleed edge to
   edge instead of sitting inside the boxed .container — a slim, full-width
   utility strip rather than a scaled-down copy of the main search card. */
.hotel-modify-bar-full {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 1.1rem 2rem;
}

.hotel-modify-bar-full .flight-search-card {
  max-width: none;
}

/* ================= Results page ================= */
.hotel-results-page {
  padding-bottom: 4rem;
}

.hotel-results-summary {
  margin-bottom: 1.5rem;
}

.hotel-results-summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hotel-results-summary-text strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  color: var(--brand-navy);
}

.hotel-results-summary-text span {
  font-size: 0.88rem;
  color: #6b7789;
}

.hotel-results-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
}

.hotel-filters {
  position: sticky;
  top: 1rem;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 1.25rem;
  box-shadow: 0 16px 34px rgba(11, 31, 58, 0.08);
  padding: 1.25rem;
}

.hotel-location-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #dde3ec;
  border-radius: 0.6rem;
  padding: 0.55rem 0.75rem;
  transition: border-color 0.15s ease;
}

.hotel-location-search:focus-within {
  border-color: var(--brand-navy);
}

.hotel-location-search .icon {
  width: 15px;
  height: 15px;
  color: #9aa1b3;
  flex-shrink: 0;
}

.hotel-location-input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 0.85rem;
  color: var(--brand-navy);
  background: transparent;
}

.hotel-location-input::placeholder {
  color: #9aa1b3;
}

.hotel-fhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.hotel-fhead b {
  color: var(--brand-navy);
  font-size: 0.95rem;
}

.hotel-fhead button {
  background: none;
  border: none;
  color: var(--brand-gold);
  font-weight: 600;
  font-size: 0.78rem;
}

.hotel-fsec {
  padding: 1rem 0;
  border-top: 1px solid #eef1f6;
}

.hotel-fsec:first-of-type {
  border-top: none;
  padding-top: 0;
}

.hotel-fsec h4 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-navy);
  margin-bottom: 0.7rem;
}

.hotel-price-val {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-navy);
  margin-bottom: 0.4rem;
}

.hotel-price-val .num:first-child {
  color: #8b95a5;
  font-weight: 500;
}

#hotelPriceRange {
  width: 100%;
  accent-color: var(--brand-navy);
}

.hotel-chk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  cursor: pointer;
  font-size: 0.85rem;
  color: #4b5565;
}

.hotel-chk input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.hotel-chk-box {
  width: 18px;
  height: 18px;
  border-radius: 0.3rem;
  border: 1.5px solid #cdd4de;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hotel-chk-box .icon {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.hotel-chk input:checked + .hotel-chk-box {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}

.hotel-chk input:checked + .hotel-chk-box .icon {
  opacity: 1;
}

.hotel-sortbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.hotel-rescount {
  font-size: 0.88rem;
  color: #6b7789;
}

.hotel-rescount b {
  color: var(--brand-navy);
  font-size: 1.05rem;
}

.hotel-sorttabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hotel-stab {
  border: 1px solid #dde3ec;
  border-radius: 2rem;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7789;
  background: #fff;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hotel-stab.active {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}

.hotel-results-main {
  background: #f6f8fb;
  border-radius: 1.25rem;
  padding: 1.5rem;
}

.hotel-results-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hotel-card-skel {
  height: 220px;
  border-radius: 1rem;
  background: linear-gradient(90deg, #fff 25%, #eef1f6 37%, #fff 63%);
  background-size: 400% 100%;
  animation: hotel-skel-shimmer 1.4s ease infinite;
}

@keyframes hotel-skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.hotel-results-empty {
  background: #fff;
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed #dde3ec;
  border-radius: 1rem;
}

.hotel-results-empty h3 {
  color: var(--brand-navy);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.hotel-results-empty p {
  color: #6b7789;
  font-size: 0.9rem;
  max-width: 480px;
  margin: 0 auto;
}

.hotel-results-empty-hint {
  margin-top: 0.4rem !important;
  font-size: 0.8rem !important;
  color: #9aa4b2 !important;
}

/* Shared beyond the results list, so these stay even though the old result-card
   block they used to live in is gone: .hotel-card-stars is reused by the hotel
   detail header, and .hotel-card-address by the booking confirmation and review
   pages. Without the base rules here the star SVGs fall back to their intrinsic
   size and lose the gold. */
.hotel-card-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--brand-gold);
}

.hotel-card-stars svg {
  width: 13px;
  height: 13px;
}

.hotel-card-address {
  font-size: 0.82rem;
  color: #8b95a5;
  margin-top: 0.2rem;
}

/* ================= Result card =================
   Three columns: photo, detail, price rail. The price rail is the commercial
   half of the card, so it is boxed off with its own left border and carries the
   two CTAs — the pattern travellers already know from the big OTAs. */
.hres-card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 232px;
  background: #fff;
  border: 1px solid #e7ecf3;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 31, 58, 0.04), 0 8px 20px rgba(11, 31, 58, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.hres-card:hover {
  transform: translateY(-2px);
  border-color: #d6deea;
  box-shadow: 0 2px 4px rgba(11, 31, 58, 0.05), 0 18px 38px rgba(11, 31, 58, 0.13);
}

/* ---------- Photo ---------- */
.hres-media {
  position: relative;
  display: block;
  background: linear-gradient(160deg, #eef2f8, #e3e9f2);
  overflow: hidden;
}

/* Neutral placeholder that sits behind the photo. It only becomes visible when
   no <img> was emitted (supplier sent no photo) or the image failed and removed
   itself — so a property without a picture reads as "no photo" instead of
   borrowing someone else's. */
.hres-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16'/><path d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 54px 54px;
  opacity: 0.22;
}

.hres-img {
  position: relative;
  z-index: 1;
}

.hres-img {
  width: 100%;
  height: 100%;
  min-height: 208px;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.hres-card:hover .hres-img {
  transform: scale(1.05);
}

.hres-media-tag {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  background: rgba(11, 31, 58, 0.82);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 1rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ---------- Detail ---------- */
.hres-main {
  padding: 1.1rem 1.25rem;
  min-width: 0;
}

.hres-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--brand-navy);
  margin: 0 0 0.3rem;
}

.hres-name a {
  color: inherit;
  text-decoration: none;
}

.hres-name a:hover {
  color: var(--brand-gold);
}

.hres-addr {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #7b8798;
  margin: 0 0 0.8rem;
}

.hres-addr svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #a2adbc;
}

/* ---------- Amenity icons ---------- */
.hres-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.hres-amenity {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: #46536a;
  background: #f3f6fa;
  border: 1px solid #e6ecf4;
  padding: 0.28rem 0.6rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}

.hres-amenity svg {
  width: 14px;
  height: 14px;
  color: var(--brand-navy);
  flex-shrink: 0;
}

.hres-amenity.is-plain {
  color: #6b7789;
}

.hres-amenity.is-more {
  background: none;
  border-color: transparent;
  color: #8b95a5;
  padding-left: 0.15rem;
}

/* ---------- Trust tags ---------- */
.hres-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hres-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #5a6678;
}

.hres-tag svg {
  width: 13px;
  height: 13px;
}

.hres-tag.is-good {
  color: #1c7a45;
}

/* ---------- Price rail ---------- */
.hres-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  gap: 0.15rem;
  padding: 1.1rem 1.25rem;
  border-left: 1px dashed #e3e9f1;
  background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
}

.hres-rate {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-navy);
}

.hres-rate small {
  font-size: 0.72rem;
  font-weight: 500;
  color: #8b95a5;
  margin-left: 0.12rem;
}

.hres-total {
  font-size: 0.78rem;
  color: #5a6678;
}

.hres-tax {
  font-size: 0.7rem;
  color: #9aa4b2;
  margin-bottom: 0.75rem;
}

.hres-cta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}

.hres-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.hres-btn-book {
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-light));
  color: #fff;
  box-shadow: 0 6px 16px rgba(11, 31, 58, 0.24);
}

.hres-btn-book:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11, 31, 58, 0.32);
}

.hres-btn-ghost {
  background: #fff;
  border: 1px solid #d9e1ec;
  color: var(--brand-navy);
}

.hres-btn-ghost:hover {
  border-color: var(--brand-gold);
  color: var(--brand-gold);
}

/* ---------- Load-more / lazy sentinel ---------- */
.hres-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 0 0.25rem;
}

.hres-more-btn {
  background: #fff;
  border: 1px solid #d9e1ec;
  border-radius: 2rem;
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 0.86rem;
  padding: 0.65rem 1.75rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.hres-more-btn:hover {
  border-color: var(--brand-gold);
  color: var(--brand-gold);
}

.hres-more-count {
  font-size: 0.78rem;
  color: #8b95a5;
  margin: 0;
}

.hotel-rooms-panel {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #eef1f6;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hotel-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #f9fafc;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.hotel-room-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--brand-navy);
  margin-bottom: 0.3rem;
}

.hotel-room-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.hotel-room-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 1rem;
  background: #eef1f6;
  color: #4b5565;
}

.hotel-room-tag.is-refundable {
  background: #e4f5e9;
  color: #2e7d46;
}

.hotel-room-tag.is-nonrefundable {
  background: #fbeae7;
  color: #b3492f;
}

.hotel-room-price {
  text-align: right;
  flex-shrink: 0;
}

.hotel-room-total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-navy);
}

.hotel-room-sub {
  font-size: 0.68rem;
  color: #8b95a5;
  margin-bottom: 0.4rem;
}

.hotel-room-select {
  background: var(--brand-navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 0.5rem;
}

.hotel-room-select:hover {
  background: #142c4f;
}

@media (max-width: 991.98px) {
  .hotel-results-layout {
    grid-template-columns: 1fr;
  }

  .hotel-filters {
    position: static;
  }

  /* Tablet: photo on top, detail and price side by side underneath. */
  .hres-card {
    grid-template-columns: minmax(0, 1fr) 212px;
    grid-template-areas:
      "media media"
      "main  price";
  }

  .hres-media {
    grid-area: media;
    height: 190px;
  }

  .hres-main {
    grid-area: main;
  }

  .hres-price {
    grid-area: price;
  }

  .hotel-results-main {
    padding: 1.1rem;
  }
}

@media (max-width: 575.98px) {
  /* Phone: single column throughout, price rail becomes a footer strip with the
     rate on the left and the CTAs stacked on the right. */
  .hres-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "main"
      "price";
  }

  .hres-price {
    align-items: stretch;
    text-align: left;
    border-left: none;
    border-top: 1px dashed #e3e9f1;
  }

  .hres-cta {
    flex-direction: row;
  }

  .hres-cta .hres-btn {
    flex: 1 1 0;
  }

  .hotel-room-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .hotel-room-price {
    text-align: left;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .hotel-hero {
    padding-top: 3rem;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 0.85rem 1.1rem;
  }

  .hero-stat {
    padding-right: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .rooms-panel {
    width: 92vw;
  }

  .hero-stats {
    gap: 0.85rem 1.1rem;
  }

  .hero-stat {
    padding-right: 1.1rem;
  }

  .hero-stat span {
    white-space: normal;
  }
}

/* ================= Hotel detail page ================= */
.hotel-detail-page {
  padding-bottom: 4rem;
}

.hotel-gallery {
  margin-bottom: 2rem;
}

/* ---- Gallery collage teaser (1 big + 2 stacked small + "view all" pill) ---- */
.hotel-gallery-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  /* Without this, the single implicit row auto-sizes to its tallest child.
     The <img> tags inside use height:100%, which can't resolve against an
     auto-height row, so the browser falls back to the image's natural
     aspect ratio — ballooning the row (and, since overflow isn't clipped,
     visibly spilling into whatever sits below the gallery) well past the
     420px this box is supposed to be. Pinning the row to 100% forces it to
     the container's own explicit height instead. */
  grid-template-rows: 100%;
  gap: 0.6rem;
  height: 420px;
  overflow: hidden;
}

.hotel-gallery-collage.is-single {
  grid-template-columns: 1fr;
}

.hotel-gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #eef1f6;
  cursor: pointer;
}

.hotel-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s ease;
}

.hotel-gallery-tile:hover img {
  transform: scale(1.04);
}

.hotel-gallery-tile-main {
  height: 100%;
}

.hotel-gallery-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 0.6rem;
  height: 100%;
}

.hotel-gallery-viewall {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(11, 31, 58, 0.82);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(11, 31, 58, 0.25);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.hotel-gallery-viewall:hover {
  background: rgba(11, 31, 58, 0.95);
  transform: translateY(-1px);
}

.hotel-gallery-viewall .icon {
  width: 16px;
  height: 16px;
}

/* ---- Gallery lightbox modal — the actual "slider", images shown whole (no crop) ---- */
.hotel-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.hotel-gallery-modal.is-open {
  display: block;
}

.hotel-gallery-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 26, 0.92);
}

.hotel-gallery-modal-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem 1.5rem;
}

.hotel-gallery-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0.25rem 0.25rem 0.75rem;
}

.hotel-gallery-modal-counter {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.hotel-gallery-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.hotel-gallery-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.hotel-gallery-modal-viewer {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotel-gallery-modal-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.hotel-gallery-modal-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, not cover — the lightbox is where a guest actually inspects a
     photo, so the whole image must show, letterboxed if the aspect ratio
     doesn't match, rather than cropping any of it away. */
  object-fit: contain;
  object-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.hotel-gallery-modal-image.is-active {
  opacity: 1;
  visibility: visible;
}

.hotel-gallery-modal-viewer .hotel-gallery-nav {
  z-index: 2;
}

.hotel-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.hotel-gallery-nav:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-50%) scale(1.06);
}

.hotel-gallery-nav .icon {
  width: 20px;
  height: 20px;
}

.hotel-gallery-modal-prev {
  left: 4px;
}

.hotel-gallery-modal-next {
  right: 4px;
}

.hotel-gallery-modal-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  flex-shrink: 0;
}

.hotel-gallery-modal-thumbs .hotel-gallery-thumb {
  flex: 0 0 92px;
  height: 64px;
  border-radius: 0.6rem;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0.55;
  border: 2px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.hotel-gallery-modal-thumbs .hotel-gallery-thumb:hover {
  opacity: 0.85;
}

.hotel-gallery-modal-thumbs .hotel-gallery-thumb.is-active {
  opacity: 1;
  border-color: var(--brand-gold);
}

.hotel-detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}

.hotel-detail-head h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.9rem;
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.hotel-detail-head .hotel-card-stars {
  color: var(--brand-gold);
}

.hotel-detail-head .hotel-card-stars .icon {
  width: 16px;
  height: 16px;
}

.hotel-detail-address {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #6b7789;
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.hotel-detail-address .icon {
  width: 16px;
  height: 16px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.hotel-detail-address a {
  margin-left: 0.4rem;
  color: var(--brand-navy);
  font-weight: 600;
  text-decoration: underline;
}

.hotel-detail-section {
  padding: 1.75rem 0;
  border-top: 1px solid #eef1f6;
}

.hotel-detail-section:first-of-type {
  padding-top: 0;
  border-top: none;
}

.hotel-detail-section h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.3rem;
  color: var(--brand-navy);
  margin-bottom: 1rem;
}

.hotel-detail-description {
  color: #3a4353;
  font-size: 1.02rem;
  line-height: 1.75;
  white-space: pre-line;
}

.hotel-detail-description p {
  margin: 0 0 1rem;
}

.hotel-detail-description p:last-child {
  margin-bottom: 0;
}

.hotel-detail-description.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hotel-see-more-btn {
  background: none;
  border: none;
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: underline;
  margin-top: 0.6rem;
}

.hotel-amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.hotel-amenities-grid.is-clamped {
  max-height: 204px;
  overflow: hidden;
}

.hotel-amenity-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.86rem;
  color: #3a4353;
  background: #f7f8fb;
  border: 1px solid #eef1f6;
  border-radius: 0.7rem;
  padding: 0.6rem 0.8rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.hotel-amenity-item:hover {
  background: #f0f3f9;
  border-color: #dfe5ef;
  transform: translateY(-1px);
}

.hotel-amenity-item .icon {
  width: 15px;
  height: 15px;
  color: #fff;
  flex-shrink: 0;
  background: #2e7d46;
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
}

/* ---- Room selection ---- */
.hotel-room-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.hotel-room-occupancy-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  background: var(--brand-navy-soft);
  color: var(--brand-navy);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.7rem 1rem;
  border-radius: 0.6rem;
  margin-bottom: 1.25rem;
}

.hotel-room-nights {
  color: #6b7789;
  font-weight: 500;
}

.hotel-room-nights::before {
  content: "\00b7";
  margin-right: 1rem;
}

.hotel-detail-rooms-panel {
  background: #f6f8fb;
  border-radius: 1.25rem;
  padding: 1.75rem;
}

.hotel-room-groups {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hotel-room-skel {
  height: 140px;
  border-radius: 0.9rem;
  background: linear-gradient(90deg, #fff 25%, #eef1f6 37%, #fff 63%);
  background-size: 400% 100%;
  animation: hotel-skel-shimmer 1.4s ease infinite;
}

.hotel-room-group {
  background: #fff;
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hotel-room-group:hover {
  box-shadow: 0 16px 34px rgba(11, 31, 58, 0.14);
  transform: translateY(-2px);
}

.hotel-room-group-head {
  background: #f9fafc;
  padding: 0.8rem 1.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-navy);
  border-bottom: 1px solid #eef1f6;
}

.hotel-room-group-options {
  display: flex;
  flex-direction: column;
}

.hotel-room-group-options .hotel-room-row {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #eef1f6;
  background: #fff;
}

.hotel-room-group-options .hotel-room-row:last-child {
  border-bottom: none;
}

.hotel-room-tag.is-promo {
  background: #fdeee0;
  color: #b3651f;
}

/* ---- Meal plan badge — the primary differentiator between rate-plan rows,
   so it gets its own icon + tier color instead of blending into the tag row. ---- */
.hotel-meal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  margin: 0.35rem 0;
}

.hotel-meal-badge .icon,
.hotel-meal-badge svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.hotel-meal-tier-room-only {
  background: #eef1f6;
  color: #566273;
}

.hotel-meal-tier-breakfast {
  background: #fdf1d9;
  color: #8a6a13;
}

.hotel-meal-tier-half-board {
  background: #dbeafe;
  color: #1d5a9e;
}

.hotel-meal-tier-full-board {
  background: #eae1f9;
  color: #6b3fa0;
}

.hotel-room-inclusions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  margin-top: 0.4rem;
  font-size: 0.76rem;
  color: #8b95a5;
}

.hotel-room-inclusions span::before {
  content: "\2713 ";
  color: #2e7d46;
}

/* ---- Sidebar ---- */
.hotel-detail-sidebar {
  position: sticky;
  top: 1rem;
}

.hotel-policies-card {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 1.25rem;
  box-shadow: 0 16px 34px rgba(11, 31, 58, 0.08);
  padding: 1.5rem;
}

.hotel-policies-card h3 {
  font-size: 0.95rem;
  color: var(--brand-navy);
  margin-bottom: 1.1rem;
}

.hotel-policy-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-top: 1px solid #eef1f6;
}

.hotel-policy-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.hotel-policy-row .icon {
  width: 16px;
  height: 16px;
  color: var(--brand-gold);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.hotel-policy-row b {
  display: block;
  font-size: 0.82rem;
  color: var(--brand-navy);
}

.hotel-policy-row span,
.hotel-policy-row a {
  font-size: 0.82rem;
  color: #6b7789;
}

@media (max-width: 991.98px) {
  .hotel-detail-layout {
    grid-template-columns: 1fr;
  }

  .hotel-detail-sidebar {
    position: static;
  }

  .hotel-gallery-collage {
    height: 280px;
  }

  .hotel-gallery-modal-thumbs .hotel-gallery-thumb {
    flex-basis: 76px;
    height: 54px;
  }

  .hotel-detail-rooms-panel {
    padding: 1.25rem;
  }

  .hotel-amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .hotel-gallery-collage {
    height: 200px;
    grid-template-columns: 1fr;
  }

  .hotel-gallery-side {
    display: none;
  }

  .hotel-gallery-viewall span {
    display: none;
  }

  .hotel-gallery-nav {
    width: 34px;
    height: 34px;
  }

  .hotel-amenities-grid {
    grid-template-columns: 1fr;
  }

  .hotel-room-filters {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ================= Hotel booking / traveller-details page ================= */
.hotel-booking-page {
  padding: 2rem 0 4rem;
}

.hotel-booking-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #6b7789;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 1rem;
}

.hotel-booking-back .icon {
  width: 15px;
  height: 15px;
}

.hotel-booking-back:hover {
  color: var(--brand-navy);
}

.hotel-booking-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.75rem;
  color: var(--brand-navy);
  margin-bottom: 1.5rem;
}

.hotel-booking-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  align-items: start;
}

.hotel-booking-section {
  padding: 1.5rem 0;
  border-top: 1px solid #eef1f6;
}

.hotel-booking-section:first-of-type {
  padding-top: 0;
  border-top: none;
}

.hotel-booking-section h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  color: var(--brand-navy);
  margin-bottom: 0.4rem;
}

.hotel-booking-section-hint {
  font-size: 0.83rem;
  color: #8b95a5;
  margin-bottom: 1.1rem;
}

/* ---- Room summary card ---- */
.hotel-booking-room-card {
  border: 1px solid #eef1f6;
  border-radius: 0.9rem;
  padding: 1.25rem 1.4rem;
}

.hotel-booking-room-skel {
  height: 140px;
  border-radius: 0.6rem;
  background: linear-gradient(90deg, #f1f3f7 25%, #e8ebf0 37%, #f1f3f7 63%);
  background-size: 400% 100%;
  animation: hotel-skel-shimmer 1.4s ease infinite;
}

.hotel-booking-room-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.hotel-booking-room-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem;
  color: var(--brand-navy);
}

.hotel-booking-dates {
  font-size: 0.83rem;
  color: #6b7789;
  margin-top: 0.2rem;
}

.hotel-cancel-policy {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eef1f6;
}

.hotel-cancel-policy h4 {
  font-size: 0.85rem;
  color: var(--brand-navy);
  margin-bottom: 0.5rem;
}

/* Room/rate amenities inside a booking/review/confirmation room card — the
   same grid the Detail page uses, tightened to two columns for the narrower
   card and never clamped (rate-level amenity lists are short). */
.hotel-room-amenities {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eef1f6;
}

.hotel-room-amenities h4 {
  font-size: 0.85rem;
  color: var(--brand-navy);
  margin-bottom: 0.5rem;
}

.hotel-room-amenities .hotel-amenities-grid {
  grid-template-columns: repeat(2, 1fr);
}

.hotel-room-amenities .hotel-amenity-item {
  font-size: 0.83rem;
  padding: 0.5rem 0.7rem;
}

.hotel-cancel-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.83rem;
  color: #4b5565;
  padding: 0.3rem 0;
}

.hotel-cancel-row .is-free {
  color: #2e7d46;
}

.hotel-cancel-row .is-charge {
  color: #b3492f;
}

.hotel-cancel-policy-toggle {
  display: inline-block;
  background: none;
  border: none;
  color: var(--brand-navy);
  font-weight: 600;
  font-size: 0.78rem;
  text-decoration: underline;
  margin-top: 0.5rem;
  padding: 0;
}

.hotel-cancel-policy-toggle:disabled {
  opacity: 0.6;
  cursor: wait;
}

.hotel-cancel-none {
  font-size: 0.8rem;
  color: #8b95a5;
  margin: 0;
}

/* ---- Mandatory pay-at-property charges (TBO "Supplements") ---- */
.hotel-supplements-notice {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: var(--brand-gold-soft);
  border: 1px solid #f0e2bb;
  border-radius: 0.7rem;
}

.hotel-supplements-notice h4 {
  font-size: 0.85rem;
  color: #8a6a13;
  margin-bottom: 0.35rem;
}

.hotel-supplements-notice p {
  font-size: 0.78rem;
  color: #8a6a13;
  margin: 0 0 0.6rem;
  line-height: 1.5;
}

.hotel-supplement-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.83rem;
  color: #5c4610;
  padding: 0.3rem 0;
  border-top: 1px solid #f0e2bb;
}

.hotel-supplement-row:first-of-type {
  border-top: none;
}

.hotel-supplement-row b {
  color: #8a6a13;
}

/* ---- Rate conditions (TBO "RateConditions") — supplier free-text rules ---- */
.hotel-rate-conditions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eef1f6;
}

.hotel-rate-conditions h4 {
  font-size: 0.85rem;
  color: var(--brand-navy);
  margin-bottom: 0.5rem;
}

.hotel-rate-conditions ul {
  margin: 0;
  padding-left: 1.1rem;
}

.hotel-rate-conditions li {
  font-size: 0.8rem;
  color: #6b7789;
  line-height: 1.6;
}

/* ---- Form fields ---- */
.hotel-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Corporate / GST booking toggle on the traveller form */
.hotel-corporate-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: #3a4353;
  cursor: pointer;
  margin-bottom: 0.9rem;
}

.hotel-corporate-toggle input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.hotel-form-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-navy);
  margin-bottom: 0.35rem;
}

.hotel-input {
  width: 100%;
  border: 1.5px solid #dde3ec;
  border-radius: 0.55rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.88rem;
  color: var(--brand-navy);
  background: #fff;
}

.hotel-input:focus {
  outline: none;
  border-color: var(--brand-navy);
}

.hotel-input.is-invalid {
  border-color: #d9534f;
}

.hotel-field-error {
  display: block;
  font-size: 0.76rem;
  color: #d9534f;
  margin-top: 0.3rem;
  font-weight: 600;
}

/* ---- Traveller blocks ---- */
.hotel-traveller-room {
  border: 1px solid #eef1f6;
  border-radius: 0.9rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
}

.hotel-traveller-room-head {
  font-weight: 700;
  color: var(--brand-navy);
  font-size: 0.92rem;
  margin-bottom: 0.9rem;
}

.hotel-traveller-block {
  margin-bottom: 1rem;
}

.hotel-traveller-block:last-child {
  margin-bottom: 0;
}

.hotel-traveller-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5565;
}

.hotel-traveller-age {
  color: #8b95a5;
  font-weight: 500;
  margin-left: 0.3rem;
}

.hotel-traveller-fields {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: 0.6rem;
}

.hotel-input-title {
  padding-left: 0.5rem;
  padding-right: 0.3rem;
}

/* PAN is collected per guest, so the field sits inside each traveller block
   rather than in a section of its own. Indented and rule-marked so it reads as
   belonging to the traveller above it. */
.hotel-traveller-pan {
  margin-top: 0.6rem;
  padding-left: 0.75rem;
  border-left: 2px solid #eef1f6;
}

.hotel-traveller-pan-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-navy);
  margin-bottom: 0.25rem;
}

.hotel-traveller-pan-opt {
  font-weight: 400;
  color: #8a94a6;
}

.hotel-pan-input {
  max-width: 260px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Sidebar / price summary ---- */
.hotel-booking-sidebar {
  position: sticky;
  top: 1rem;
}

.hotel-price-summary-card {
  border: 1px solid #eef1f6;
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.hotel-price-summary-skel {
  height: 160px;
  border-radius: 0.6rem;
  background: linear-gradient(90deg, #f1f3f7 25%, #e8ebf0 37%, #f1f3f7 63%);
  background-size: 400% 100%;
  animation: hotel-skel-shimmer 1.4s ease infinite;
}

.hotel-price-summary-card h3 {
  font-size: 0.95rem;
  color: var(--brand-navy);
  margin-bottom: 1rem;
}

.hotel-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #4b5565;
  padding: 0.5rem 0;
  border-top: 1px solid #eef1f6;
}

.hotel-price-row:first-of-type {
  border-top: none;
}

.hotel-price-total {
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-navy);
  border-top: 1.5px solid #eef1f6;
  margin-top: 0.3rem;
  padding-top: 0.7rem;
}

.hotel-price-changed-note {
  background: #fdf1d9;
  color: #8a6a13;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  margin-bottom: 0.9rem;
}

.hotel-confirm-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--brand-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem;
  border-radius: 0.6rem;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.hotel-confirm-btn .icon {
  width: 16px;
  height: 16px;
}

.hotel-confirm-btn:hover:not(:disabled) {
  background: #142c4f;
}

.hotel-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hotel-booking-disclaimer {
  text-align: center;
  font-size: 0.75rem;
  color: #8b95a5;
  margin-top: 0.6rem;
}

/* "Hold — Pay Later" — the secondary path on the Review sidebar and on a
   held-booking Confirmation page. A quieter, outlined version of the primary
   confirm button so it reads as the alternative, not the main call. */
.hotel-hold-option {
  margin-top: 0.9rem;
}

.hotel-hold-divider {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a7b0bf;
  margin-bottom: 0.6rem;
}

.hotel-hold-btn {
  background: #fff;
  color: var(--brand-navy);
  border: 1.5px solid var(--brand-navy);
}

.hotel-hold-btn:hover:not(:disabled) {
  background: #f2f5fa;
}

.hotel-hold-deadline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff8e6;
  border: 1px solid #f4e2b0;
  color: #7a5a12;
  font-size: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  margin: 0.8rem 0;
}

@media (max-width: 991.98px) {
  .hotel-booking-layout {
    grid-template-columns: 1fr;
  }

  .hotel-booking-sidebar {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .hotel-form-grid {
    grid-template-columns: 1fr;
  }

  .hotel-traveller-fields {
    grid-template-columns: 1fr;
  }
}

/* ================= Review page (read-only) ================= */
.hotel-readonly-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--brand-gold-soft);
  color: #8a6a13;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.8rem 1.1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.hotel-readonly-banner .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.hotel-status-success {
  background: #e4f5e9;
  color: #1f6b38;
}

.hotel-status-success .icon {
  color: #2e7d46;
}

.hotel-status-warning {
  background: #fdf1d9;
  color: #8a6a13;
}

.hotel-status-warning .icon {
  color: var(--brand-gold);
}

.hotel-status-error {
  background: #fbeae7;
  color: #8f3521;
}

.hotel-status-error .icon {
  color: #b3492f;
}

.hotel-pdf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.hotel-pdf-btn .icon {
  width: 16px;
  height: 16px;
}

.hotel-pdf-btn-secondary {
  background: #fff;
  color: var(--brand-navy);
  border: 1.5px solid var(--brand-navy);
}

.hotel-pdf-btn-secondary:hover {
  background: var(--brand-navy-soft);
}

.hotel-booking-back-home {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7789;
  margin-top: 0.5rem;
}

.hotel-review-contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.hotel-review-contact div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hotel-review-contact b {
  font-size: 0.78rem;
  font-weight: 600;
  color: #8b95a5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hotel-review-contact span {
  font-size: 0.92rem;
  color: var(--brand-navy);
}

.hotel-review-traveller-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The row carries a third item once PAN is collected per guest — let it wrap
     rather than squeezing the name on a narrow screen. */
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid #eef1f6;
  font-size: 0.88rem;
}

.hotel-review-traveller-row:first-of-type {
  border-top: none;
}

.hotel-review-traveller-name {
  font-weight: 600;
  color: var(--brand-navy);
  /* Holds the name left and pushes type/PAN to the right edge. */
  margin-right: auto;
}

.hotel-review-traveller-type {
  color: #8b95a5;
  font-size: 0.82rem;
}

.hotel-review-traveller-pan {
  color: var(--brand-navy);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .hotel-review-contact {
    grid-template-columns: 1fr;
  }
}

/* hero photo: phone-sized variant. The hero is this page's Largest Contentful Paint element, and the
   1800px crop is ~450 KB for a viewport a fifth as wide. Phones get a 760px
   version instead.

   This repeats the hero's own selector rather than overriding :root: the base
   rule sets --hero-photo on the hero element itself, and a property set on the
   element always beats one inherited from an ancestor, whatever the source
   order. */
@media (max-width: 767.98px) {
  .hotel-hero {
    --hero-photo: url("https://images.unsplash.com/photo-1540541338287-41700207dee6?fm=jpg&q=68&w=760&auto=format&fit=crop&ixlib=rb-4.1.0");
  }
}

/* =====================================================================
   Booking + Confirmation flow polish — step progress bar, hotel identity
   strips, trust badges, avatars, success hero, help card. Shared between
   Hotels/Booking, Hotels/Review and HotelBooking/Confirmation, all of
   which already use the .hotel-booking-* / .hotel-price-* classes above.
   ===================================================================== */

/* ---- Step progress bar ---- */
.hotel-steps {
  display: flex;
  align-items: center;
  margin-bottom: 1.75rem;
}

.hotel-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #9aa4b3;
  font-size: 0.85rem;
  font-weight: 700;
}

.hotel-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  background: #eef1f6;
  color: #9aa4b3;
  flex-shrink: 0;
}

.hotel-step-num .icon {
  width: 13px;
  height: 13px;
}

.hotel-step.is-done .hotel-step-num {
  background: var(--brand-navy);
  color: #fff;
}

.hotel-step.is-done {
  color: var(--brand-navy);
}

.hotel-step.is-active .hotel-step-num {
  background: var(--brand-gold);
  color: #fff;
}

.hotel-step.is-active {
  color: var(--brand-navy);
}

.hotel-step-line {
  flex: 1 1 40px;
  max-width: 64px;
  height: 1.5px;
  background: #dde3ec;
  margin: 0 0.75rem;
}

@media (max-width: 575.98px) {
  .hotel-step span:last-child {
    display: none;
  }

  .hotel-step-line {
    flex: 1 1 24px;
  }
}

/* ---- Section header with an icon badge, used in place of a bare <h2> ---- */
.hotel-booking-section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.hotel-booking-section-head h2 {
  margin-bottom: 0;
}

.hotel-section-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-navy-soft);
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hotel-section-icon .icon {
  width: 15px;
  height: 15px;
}

/* ---- Hotel identity strip (photo + name + stars), main column ---- */
.hotel-booking-hotel-strip {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid #eef1f6;
  border-radius: 0.9rem;
  margin-bottom: 0.9rem;
  background: #fafbfd;
}

.hotel-booking-hotel-thumb {
  width: 72px;
  height: 72px;
  border-radius: 0.65rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef1f6;
}

.hotel-booking-hotel-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.hotel-booking-hotel-name .hotel-card-stars {
  color: var(--brand-gold);
}

.hotel-booking-hotel-name .hotel-card-stars .icon {
  width: 12px;
  height: 12px;
}

/* ---- Compact hotel strip inside the sticky sidebar price card ---- */
.hotel-sidebar-hotel-strip {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eef1f6;
}

.hotel-sidebar-hotel-thumb {
  width: 48px;
  height: 48px;
  border-radius: 0.55rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef1f6;
}

.hotel-sidebar-hotel-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-navy);
  line-height: 1.3;
}

.hotel-sidebar-hotel-meta {
  font-size: 0.76rem;
  color: #8b95a5;
  margin-top: 0.15rem;
}

/* ---- Trust badges row, under the CTA ---- */
.hotel-trust-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.hotel-trust-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7789;
}

.hotel-trust-badge .icon {
  width: 14px;
  height: 14px;
  color: #2e7d46;
  flex-shrink: 0;
}

/* ---- Traveller block header with avatar + lead badge ---- */
.hotel-traveller-block-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.hotel-traveller-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-navy-soft);
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.hotel-lead-badge {
  display: inline-flex;
  align-items: center;
  background: var(--brand-gold-soft);
  color: #8a6a13;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Confirmation page: success hero ---- */
.hotel-success-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 1.5rem;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(180deg, #f3faf5 0%, #fff 100%);
  border: 1px solid #e4f5e9;
}

.hotel-success-hero.is-warning {
  background: linear-gradient(180deg, #fdf8ec 0%, #fff 100%);
  border-color: #fdf1d9;
}

.hotel-success-hero.is-error {
  background: linear-gradient(180deg, #fcf1ef 0%, #fff 100%);
  border-color: #fbeae7;
}

.hotel-success-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #2e7d46;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 8px 20px rgba(46, 125, 70, 0.25);
}

.hotel-success-hero.is-warning .hotel-success-icon {
  background: var(--brand-gold);
  box-shadow: 0 8px 20px rgba(169, 121, 26, 0.25);
}

.hotel-success-hero.is-error .hotel-success-icon {
  background: #b3492f;
  box-shadow: 0 8px 20px rgba(179, 73, 47, 0.25);
}

.hotel-success-icon .icon {
  width: 30px;
  height: 30px;
}

.hotel-success-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.6rem;
  color: var(--brand-navy);
  margin-bottom: 0.4rem;
}

.hotel-success-sub {
  color: #4b5565;
  font-size: 0.92rem;
  max-width: 480px;
  margin-bottom: 1.1rem;
}

.hotel-confirmation-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1.5px dashed #c9d3e0;
  border-radius: 0.7rem;
  padding: 0.6rem 1.1rem;
}

.hotel-confirmation-pill b {
  font-size: 1.05rem;
  color: var(--brand-navy);
  letter-spacing: 0.04em;
}

.hotel-confirmation-pill span {
  font-size: 0.72rem;
  color: #8b95a5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Confirmation page: check-in/out timeline strip ---- */
.hotel-itinerary-timeline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  margin: 0.75rem 0;
  border-top: 1px solid #eef1f6;
  border-bottom: 1px solid #eef1f6;
}

.hotel-timeline-point {
  flex: 1;
}

.hotel-timeline-point .label {
  font-size: 0.72rem;
  color: #8b95a5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}

.hotel-timeline-point .date {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--brand-navy);
}

.hotel-timeline-point .time {
  font-size: 0.78rem;
  color: #6b7789;
  margin-top: 0.1rem;
}

.hotel-timeline-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #c9d3e0;
  flex-shrink: 0;
}

.hotel-timeline-mid .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-gold);
}

.hotel-timeline-mid span {
  font-size: 0.7rem;
  color: #8b95a5;
  font-weight: 700;
  margin-top: 0.2rem;
  white-space: nowrap;
}

/* ---- Confirmation page: help/support card ---- */
.hotel-help-card {
  border: 1px solid #eef1f6;
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  margin-top: 1rem;
}

.hotel-help-card h4 {
  font-size: 0.88rem;
  color: var(--brand-navy);
  margin-bottom: 0.6rem;
}

.hotel-help-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: #4b5565;
  padding: 0.3rem 0;
  text-decoration: none;
}

.hotel-help-row .icon {
  width: 15px;
  height: 15px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

/* ---- Confirmation page: "what to expect next" info panel ---- */
.hotel-next-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-top: 0.5rem;
}

.hotel-next-step {
  padding: 1rem;
  border: 1px solid #eef1f6;
  border-radius: 0.8rem;
  text-align: left;
}

.hotel-next-step .hotel-section-icon {
  margin-bottom: 0.6rem;
}

.hotel-next-step h5 {
  font-size: 0.85rem;
  color: var(--brand-navy);
  margin-bottom: 0.25rem;
}

.hotel-next-step p {
  font-size: 0.78rem;
  color: #6b7789;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .hotel-success-title {
    font-size: 1.35rem;
  }

  .hotel-next-steps {
    grid-template-columns: 1fr;
  }

  .hotel-itinerary-timeline {
    flex-wrap: wrap;
  }
}