/**
 * refinements-v322.css — v3.22
 * ---------------------------------------------------------------------------
 * Loads LAST, after rooms-fixes-v320.css. Presentation only.
 *
 *   1. Colour hierarchy tune-up (tokens only — gradients untouched).
 *   2. Guests selects: readable "2 Guests" label, aligned, breathing room.
 *   3. Desktop type hierarchy on the rooms page (mirrors the mobile scale).
 *   4. Availability badge moved to the TOP-LEFT of the gallery.
 *   5. Booking page: mobile layout no longer overflows the viewport.
 *   6. Rooms filter bar: tabs + sort stay on ONE line at every width.
 */

/* ── 1. COLOUR HIERARCHY ──────────────────────────────────────────────── */
:root {
  /* Text ramp: heading → body → supporting → faint. Evenly stepped so
     nothing reads as "almost the same colour" as its neighbour. */
  --hl-text-primary:   #241C16;
  --hl-text-secondary: #5C4C3E;
  --hl-text-muted:     #8A7868;
  --hl-text-faint:     #A99787;

  /* Surface ramp: white → light → subtle → cream. */
  --hl-light:  #FCF9F4;
  --hl-subtle: #F5EEE4;
  --hl-cream:  #EDE1D1;
  --hl-border: #E3D6C4;

  /* Accent ramp stays terracotta, just evened out between steps. */
  --hl-gold-light: #D9A184;
  --hl-gold:       #B16A4C;
  --hl-gold-dark:  #8C4E34;
  --hl-gold-deep:  #5E3522;

  /* Status colours re-tinted warm so they sit inside the palette. */
  --hl-success:  #2A6A46;
  --hl-danger:   #A33B2E;
}

/* Rooms content text now uses the palette instead of one-off browns. */
.hl-rooms-showcase .hl-room-show__eyebrow { color: var(--hl-gold-dark) !important; }
.hl-rooms-showcase .hl-room-show__title   { color: var(--hl-text-primary) !important; }
.hl-rooms-showcase .hl-room-show__price strong { color: var(--hl-gold-deep) !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 {
  color: var(--hl-text-muted) !important;
  opacity: 1;
}
.hl-rooms-showcase .hl-room-show__desc { color: var(--hl-text-secondary); }
.hl-rooms-showcase .hl-room-show__specs li,
.hl-rooms-showcase .hl-room-show__highlights li { color: var(--hl-text-secondary); }

/* Availability wording follows the same status ramp. */
.hl-avail__status { color: var(--hl-success) !important; }
.hl-room-show__avail.is-out .hl-avail__status { color: var(--hl-danger) !important; }
.hl-availability-msg--avail { color: var(--hl-success); }
.hl-availability-msg--na    { color: var(--hl-danger); }

/* Room cards: title darkest, meta supporting, price accent. */
.hl-room-card__title    { color: var(--hl-text-primary); }
.hl-room-card__desc     { color: var(--hl-text-secondary); }
.hl-room-card__meta-item,
.hl-room-card__price-from,
.hl-room-card__price-night { color: var(--hl-text-muted); }
.hl-room-card__price-amount { color: var(--hl-gold-deep); }

/* ── 2. GUESTS SELECTS ────────────────────────────────────────────────── */
.hl-room-guests,
#qb-guests,
#hluxe-guests,
#bw-guests {
  min-width: 9.5rem;
  width: 100%;
  text-align: left;
  text-align-last: left;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.hl-room-show__date-field select.hl-room-guests {
  padding: .78rem 2.25rem .78rem .9rem;
  letter-spacing: .01em;
}
.hl-room-guests option,
#qb-guests option,
#bw-guests option {
  padding: .45rem .75rem;
  letter-spacing: .01em;
}
/* Hero widget select: same left alignment + gap as the date fields. */
.hl-search-bar__field select {
  width: 100%;
  min-width: 8.5rem;
  padding: .1rem 1.1rem .1rem 0;
  text-align: left;
  text-align-last: left;
}
@media (min-width: 901px) {
  .hl-search-bar__field { padding: 1rem 1.35rem; }
  .hl-room-show__dates-grid { grid-template-columns: 1fr 1fr 1.25fr; }
}

/* ── 3. DESKTOP TYPE HIERARCHY (rooms page) ───────────────────────────── */
@media (min-width: 961px) {
  .hl-rooms-showcase .hl-room-show__eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .hl-rooms-showcase .hl-room-show__title {
    font-size: clamp(1.9rem, 2.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.01em;
    margin-top: .35rem;
  }
  .hl-rooms-showcase .hl-room-show__desc {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
  }
  .hl-rooms-showcase .hl-room-show__specs li {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
  }
  .hl-rooms-showcase .hl-room-show__highlights li {
    font-size: .88rem;
    font-weight: 400;
  }
  .hl-rooms-showcase .hl-room-show__price strong {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
  }
  .hl-rooms-showcase .hl-room-show__price-from,
  .hl-rooms-showcase .hl-room-show__price-unit {
    font-size: .85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
  }
  .hl-rooms-showcase .hl-room-show__date-field label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--hl-text-muted);
  }
  .hl-rooms-showcase .hl-avail__status { font-size: 1.05rem; font-weight: 700; }
  .hl-rooms-showcase .hl-avail__nights { font-size: .875rem; font-weight: 400; }
  .hl-rooms-showcase .hl-avail__quote  { font-size: .95rem; font-weight: 400; }
  .hl-rooms-showcase .hl-avail__quote--total { font-weight: 700; }
  .hl-rooms-showcase .hl-room-show__note {
    font-size: .85rem;
    line-height: 1.7;
    color: var(--hl-text-muted);
  }
}

/* ── 4. AVAILABILITY BADGE → TOP-LEFT ─────────────────────────────────── */
.hl-avail-badge {
  left: 12px;
  right: auto;
}
@media (max-width: 640px) {
  .hl-avail-badge { left: 10px; right: auto; }
}
.hl-avail-badge     { background: rgba(42,106,70,.94); }
.hl-avail-badge--out { background: rgba(163,59,46,.94); }

/* ── 5. BOOKING PAGE — MOBILE ─────────────────────────────────────────── */
@media (max-width: 700px) {
  .hl-booking-page { overflow-x: clip; }
  .hl-booking-page .hl-container,
  .hl-booking-page .hl-container--narrow {
    width: 100%;
    max-width: 100%;
    padding-inline: 1rem;
  }
  .hl-booking-panel {
    padding: 1.5rem 1.15rem 1.75rem;
    border-radius: var(--hl-radius-lg);
    margin-inline: 0;
  }
  .hl-booking-panel__header h2 { font-size: 1.6rem; line-height: 1.2; }
  .hl-booking-panel__header p  { font-size: .92rem; }

  .hl-booking-layout,
  .hl-booking-form-wrap,
  .hl-form-grid,
  .hl-form-group,
  .hl-booking-summary,
  .hl-booking-summary__inner { min-width: 0; max-width: 100%; }

  .hl-form-group input,
  .hl-form-group select,
  .hl-form-group textarea { width: 100%; max-width: 100%; }

  .hl-booking-steps { justify-content: space-between; overflow: visible; }
  .hl-booking-step  { min-width: 0; }
  .hl-booking-step__label { font-size: .62rem; letter-spacing: .05em; text-align: center; }

  /* Actions stacked full-width instead of a nowrap row that overflowed. */
  .hl-booking-form-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .75rem;
    margin-top: 1.5rem;
  }
  .hl-booking-form-actions .hl-btn { width: 100%; justify-content: center; }

  .hl-booking-summary { padding: 1.25rem 1.15rem; }
  .hl-summary-row {
    gap: .75rem;
    align-items: baseline;
    font-size: .85rem;
  }
  .hl-summary-row span:first-child { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
  .hl-summary-row span:last-child  { flex: 0 0 auto; text-align: right; overflow-wrap: anywhere; }
  .hl-summary-total { gap: .75rem; }
  .hl-summary-total span:last-child { text-align: right; }
  .hl-addons-grid { grid-template-columns: 1fr; }
  .hl-confirm-details table,
  .hl-confirm-details { max-width: 100%; overflow-wrap: anywhere; }
}

/* ── 6. FILTER BAR: TABS + SORT ON ONE LINE (ALL WIDTHS) ──────────────── */
.hl-rooms-filter-bar--tabs-only .hl-rooms-filter-bar__row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem;
}
.hl-rooms-filter-bar--tabs-only .hl-room-type-tabs {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  padding-bottom: .4rem;
}
.hl-rooms-filter-bar--tabs-only .hl-listing-sort {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .hl-rooms-filter-bar--tabs-only .hl-listing-sort select {
    max-width: 9rem;
    padding: .4rem 1.7rem .4rem .6rem;
  }
}