/**
 * rooms-fixes-v321.css — v3.21
 * ---------------------------------------------------------------------------
 * Rooms page only. Loads LAST.
 *   1. Brown highlight for rooms CONTENT TEXT only (eyebrow, title, price).
 *      Global gold palette + all buttons stay untouched.
 *   2. Mobile: sort control stays on the same row as the type tabs (not sticky).
 *   3. Mobile: check-in + check-out on one row, guests below, CTA below that.
 *   4. Availability heading alignment.
 *   5. Smoother scroll flow after the room gallery.
 *   6. Guest selects wide enough to show "2 Guests".
 *   7. Availability badge on the gallery corner.
 */

/* ── 1. Brown text highlights (rooms content only) ─────────────────────── */
.hl-rooms-showcase .hl-room-show__eyebrow { color: #8C5A3C !important; }
.hl-rooms-showcase .hl-room-show__title   { color: #5C3A22 !important; }
.hl-rooms-showcase .hl-room-show__price strong,
.hl-rooms-showcase .hl-room-show__price .hl-room-show__price-from,
.hl-rooms-showcase .hl-room-show__price .hl-room-show__price-unit { color: #8C5A3C !important; }
.hl-rooms-showcase .hl-room-show__price .hl-room-show__price-from,
.hl-rooms-showcase .hl-room-show__price .hl-room-show__price-unit { opacity: .8; }

/* ── 2. Mobile: sort inline, right-aligned, never sticky ───────────────── */
@media (max-width: 900px) {
  .hl-rooms-filter-bar,
  .hl-rooms-filter-bar--tabs-only {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
  .hl-rooms-filter-bar--tabs-only .hl-rooms-filter-bar__row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between;
    gap: .75rem;
  }
  .hl-rooms-filter-bar--tabs-only .hl-room-type-tabs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hl-rooms-filter-bar--tabs-only .hl-room-type-tabs::-webkit-scrollbar { display: none; }
  .hl-rooms-filter-bar--tabs-only .hl-room-type-tabs .hl-type-tab { flex: 0 0 auto; }
  .hl-rooms-filter-bar--tabs-only .hl-listing-sort {
    flex: 0 0 auto;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: .35rem;
  }
  .hl-rooms-filter-bar--tabs-only .hl-listing-sort label {
    font-size: .68rem;
    letter-spacing: .1em;
  }
  .hl-rooms-filter-bar--tabs-only .hl-listing-sort select {
    max-width: 9.5rem;
    font-size: .8rem;
    padding: .4rem 1.6rem .4rem .55rem;
  }
}
@media (max-width: 420px) {
  .hl-rooms-filter-bar--tabs-only .hl-listing-sort label { display: none; }
  .hl-rooms-filter-bar--tabs-only .hl-listing-sort select { max-width: 8.5rem; }
}

/* ── 3. Mobile date/guest layout ───────────────────────────────────────── */
@media (max-width: 640px) {
  .hl-room-show__dates-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: end;
  }
  .hl-room-show__dates-grid > .hl-room-show__date-field:nth-child(1),
  .hl-room-show__dates-grid > .hl-room-show__date-field:nth-child(2) { grid-column: auto !important; }
  .hl-room-show__dates-grid > .hl-room-show__date-field:nth-child(3),
  .hl-room-show__dates-grid > .hl-room-show__confirm-dates { grid-column: 1 / -1 !important; }
  .hl-room-show__dates-grid > .hl-room-show__confirm-dates { width: 100%; }
  .hl-room-show__dates-grid input[type="date"],
  .hl-room-show__dates-grid select { width: 100%; min-width: 0; font-size: .95rem; }
}

/* ── 4. Availability heading alignment ─────────────────────────────────── */
.hl-room-show__avail .hl-avail__status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  line-height: 1.35;
  text-wrap: balance;
}
.hl-room-show__avail .hl-avail__status svg {
  flex: 0 0 18px;
  margin: 2px 0 0 !important;
  vertical-align: baseline !important;
}
.hl-room-show__avail .hl-avail__nights { text-align: left; }
@media (max-width: 640px) {
  .hl-room-show__avail { padding: 16px 16px 18px; }
  .hl-room-show__avail .hl-avail__status { font-size: 1rem; }
}

/* ── 5. Smoother flow after the gallery ───────────────────────────────── */
@media (max-width: 900px) {
  .hl-room-show__frame,
  .hl-room-show__media { touch-action: pan-y; overscroll-behavior-y: auto; }
  .hl-room-show { scroll-margin-top: 88px; row-gap: 1.5rem; }
  .hl-room-show__body { padding-top: .25rem; }
  .hl-rooms-showcase { row-gap: 2.75rem; }
  .hl-room-show__slide { pointer-events: none; }
  .hl-room-show__nav,
  .hl-room-show__dot { pointer-events: auto; }
}

/* ── 6. Guest selects always show the word ────────────────────────────── */
.hl-room-guests,
#qb-guests,
#hluxe-guests { min-width: 8.5rem; text-overflow: ellipsis; }

/* ── 7. Availability badge over the gallery ───────────────────────────── */
.hl-room-show__frame { position: relative; }
.hl-avail-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(29,122,74,.94);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  pointer-events: none;
  animation: hlAvailBadgeIn .28s ease-out both;
}
.hl-avail-badge--out { background: rgba(177,48,48,.94); }
.hl-avail-badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; opacity: .9;
}
@keyframes hlAvailBadgeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .hl-avail-badge { top: 10px; right: 10px; font-size: .68rem; padding: 6px 10px; }
}