/**
 * refinements-v323.css — v3.23 (loads LAST)
 * ---------------------------------------------------------------------------
 * 1. Desktop guests selects: label text visible, centred, with breathing room.
 * 2. Availability badge: visible on desktop too, pinned to the TOP-LEFT.
 * 3. Sort control: smaller type on mobile so the full label fits.
 * 4. Mobile gallery: fast slide transition (no long fade / stuck lazy image).
 * 5. Date fields: dd-mm-yyyy hint shown while a date input is empty.
 */

/* ── 1. GUESTS SELECTS (desktop) ──────────────────────────────────────── */
.hl-room-guests,
#qb-guests,
#bw-guests,
#hluxe-guests {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  -webkit-appearance: none;
  appearance: none;
  color: var(--hl-text-primary, #241C16) !important;
  -webkit-text-fill-color: var(--hl-text-primary, #241C16) !important;
  opacity: 1 !important;
  overflow: visible;
  text-overflow: clip !important;
  text-indent: 0;
  white-space: nowrap;
  line-height: 1.4;
  height: auto;
}

/* Room cards + booking widget: centred label with a small gap each side. */
.hl-room-show__date-field select.hl-room-guests,
.hl-room-show__dates-grid select.hl-room-guests {
  text-align: center !important;
  text-align-last: center !important;
  padding: .78rem 1.9rem .78rem 1.1rem !important;
  font-size: .95rem;
  letter-spacing: .01em;
}
.hl-search-bar__field select,
#qb-guests,
#bw-guests {
  text-align: center !important;
  text-align-last: center !important;
  padding: .15rem 1.1rem .15rem 1.1rem !important;
  font-size: .9rem;
}
.hl-room-guests option,
#qb-guests option,
#bw-guests option,
#hluxe-guests option {
  text-align: center;
  padding: .45rem .8rem;
}
@media (min-width: 901px) {
  /* Give the guests column enough room so the "N Guests" label never clips. */
  .hl-room-show__dates-grid { grid-template-columns: 1fr 1fr 1.3fr; }
  .hl-search-bar__field { min-width: 0; }
}

/* ── 2. AVAILABILITY BADGE — always visible, top-left ─────────────────── */
.hl-room-show__frame,
.hl-room-show__media { position: relative; }
.hl-avail-badge {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  z-index: 20 !important;
  animation: none !important;
  transform: none !important;
}
@media (max-width: 640px) {
  .hl-avail-badge { top: 10px !important; left: 10px !important; }
}

/* ── 3. SORT CONTROL — smaller text on mobile ─────────────────────────── */
@media (max-width: 900px) {
  .hl-rooms-filter-bar--tabs-only .hl-listing-sort label { font-size: .68rem; }
  .hl-rooms-filter-bar--tabs-only .hl-listing-sort select {
    font-size: .7rem !important;
    max-width: 8.6rem !important;
    padding: .35rem 1.35rem .35rem .45rem !important;
    text-overflow: clip;
  }
}
@media (max-width: 420px) {
  .hl-rooms-filter-bar--tabs-only .hl-listing-sort select {
    font-size: .66rem !important;
    max-width: 8rem !important;
  }
}

/* ── 4. MOBILE GALLERY — snappy transitions ───────────────────────────── */
@media (max-width: 960px) {
  .hl-room-show__slide {
    transition: opacity .22s ease !important;
  }
  .hl-room-show__slide.is-active {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Lazy-load fade gates elsewhere must never hold an active slide hidden. */
  .hl-room-show__frame .hl-room-show__slide.is-active,
  .hl-room-show__frame .hl-room-show__slide.hl-loaded,
  .hl-room-show__frame .hl-room-show__slide.is-loaded { opacity: 1; }
  .hl-room-show__slide:not(.is-active) { opacity: 0 !important; }
}

/* ── 5. DATE PLACEHOLDER (dd-mm-yyyy) ─────────────────────────────────── */
.hl-date-input-wrap { position: relative; }
.hl-date-ph {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: .9rem;
  letter-spacing: .02em;
  color: var(--hl-text-muted, #8A7868);
  opacity: .85;
  background: #fff;
  padding-right: .35rem;
}
.hl-search-bar__field .hl-date-ph {
  left: 0;
  font-size: .9rem;
  background: transparent;
}
input[type="date"].hl-date-empty {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}