/**
 * refinements-v325.css — v3.25 (loads LAST)
 * ---------------------------------------------------------------------------
 * 1. Rooms page date/guests row: wider fields so dd-mm-yyyy + "2 Guests" all
 *    fit on ONE row, guests label centred with breathing room.
 * 2. Price box: small sentence-case "Taxes may be applicable" note.
 * 3. Confirm Booking: icon + label optically centred (letter-spacing comped).
 * 4. Mobile hero widget: dd-mm-yyyy hint matches the date value exactly.
 * 5. Auth notice: one sentence, links never broken mid-word, two clean lines.
 * 6. Mobile room cards: one even vertical rhythm.
 * 7. Gold gradient buttons: white label text (gradient itself untouched).
 */

/* ── 1. ROOMS PAGE — DATES + GUESTS ON ONE ROW ────────────────────────── */
@media (min-width: 901px) {
  .hl-datepicker-card { padding: 18px 18px 20px !important; }

  .hl-room-show__dates-grid {
    grid-template-columns:
      minmax(8.6rem, 1fr) minmax(8.6rem, 1fr) minmax(9.25rem, 1.02fr) !important;
    gap: 14px 12px !important;
  }

  /* Date inputs: full column, tight side padding so the whole
     dd-mm-yyyy value plus the picker icon stays visible. */
  .hl-room-show__date-field input[type="date"],
  .hl-room-show__dates-grid input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    padding: .78rem .55rem !important;
    font-size: .92rem !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: clip !important;
  }
  .hl-room-show__date-field input[type="date"]::-webkit-date-and-time-value {
    width: 100%;
    text-align: center;
  }
  .hl-room-show__date-field input[type="date"]::-webkit-calendar-picker-indicator {
    margin-inline-start: 0;
    padding-inline: 2px;
  }

  /* Guests: full label ("2 Guests"), centred, with a small gap each side. */
  .hl-room-show__date-field select.hl-room-guests,
  .hl-room-show__dates-grid select.hl-room-guests {
    width: 100% !important;
    min-width: 0 !important;
    padding: .78rem 1.85rem .78rem 1.05rem !important;
    font-size: .92rem !important;
    text-align: center !important;
    text-align-last: center !important;
    text-overflow: clip !important;
    white-space: nowrap;
    letter-spacing: .015em;
  }
  .hl-room-guests option { padding: .5rem .9rem !important; letter-spacing: .015em; }
}

/* Very narrow desktop body columns: wrap guests onto its own full-width row
   rather than squeezing the dates. */
@media (min-width: 901px) and (max-width: 1080px) {
  .hl-room-show__dates-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .hl-room-show__dates-grid > .hl-room-show__date-field:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
}

/* ── 2. PRICE BOX — TAX NOTE ──────────────────────────────────────────── */
.hl-room-show__price { flex-wrap: wrap; row-gap: 2px; }
.hl-room-show__price-tax,
.hl-room-card__price-tax {
  display: block;
  width: 100%;
  margin-top: 2px;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: none !important;
  color: var(--hl-text-muted, #8a7a6a);
  opacity: .95;
}
@media (min-width: 901px) {
  .hl-room-show__price-tax { font-size: .74rem; }
}

/* ── 3. CONFIRM BOOKING — ICON / LABEL ALIGNMENT ──────────────────────── */
.hl-btn .hl-btn__label,
.hl-btn .hl-btn__loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  line-height: 1;
  /* Uppercase + letter-spacing adds a trailing gap after the last glyph,
     which pushes the icon+label pair visibly left of true centre. */
  margin-inline-end: -.14em;
}
.hl-btn .hl-btn__label > svg,
.hl-btn .hl-btn__loading > svg,
.hl-btn .hl-btn__label > .hl-spinner,
.hl-btn .hl-btn__loading > .hl-spinner {
  flex: 0 0 auto;
  display: block;
  position: relative;
  top: 0;
  margin: 0 !important;
  align-self: center;
}
#bk-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  text-align: center;
}

/* ── 4. DATE PLACEHOLDER (dd-mm-yyyy) — EXACT OVERLAY ─────────────────── */
.hl-date-input-wrap { position: relative; display: block; width: 100%; }
.hl-date-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  background: transparent !important;
  padding: 0;
  margin: 0;
  border: 0;
  transform: none !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  color: var(--hl-text-muted, #8a7868);
  opacity: .9;
  overflow: hidden;
  white-space: nowrap;
}

/* ── 5. AUTH NOTICE — CLEAN TWO-LINE SENTENCE ─────────────────────────── */
.hl-booking-auth-notice {
  display: flex !important;
  align-items: flex-start;
  gap: .55rem;
  flex-wrap: nowrap;
  text-align: left;
  line-height: 1.55;
}
.hl-booking-auth-notice > svg { flex: 0 0 auto; margin-top: .2rem; }
.hl-booking-auth-notice__text {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
.hl-booking-auth-notice__text a {
  display: inline;
  white-space: nowrap;
  word-break: keep-all;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── 6. MOBILE ROOM CARDS — EVEN RHYTHM ───────────────────────────────── */
@media (max-width: 768px) {
  .hl-room-card__body {
    display: flex !important;
    flex-direction: column !important;
    gap: .8rem !important;
    padding: 1.1rem 1.15rem 1.2rem !important;
  }
  .hl-room-card__body > * { margin: 0 !important; }
  .hl-room-card__meta {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem 1rem !important;
    font-size: .82rem !important;
    line-height: 1.3 !important;
  }
  .hl-room-card__meta-item { display: inline-flex; align-items: center; gap: .35rem; }
  .hl-room-card__title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }
  .hl-room-card__desc { font-size: .9rem !important; line-height: 1.6 !important; }
  .hl-room-card__amenities {
    display: flex !important;
    flex-wrap: wrap;
    gap: .45rem !important;
    padding-inline-start: 0 !important;
    list-style: none;
  }
  .hl-room-card__amenities li {
    margin: 0 !important;
    padding: .4rem .8rem !important;
    line-height: 1.25 !important;
    font-size: .82rem !important;
  }
  .hl-room-card__footer {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: .7rem !important;
    margin: 0 !important;
    padding-top: .85rem !important;
    border-top: 1px solid var(--hl-border, #e3d6c4);
  }
  .hl-room-card__price { margin: 0 !important; line-height: 1.25; }
  .hl-room-card__footer .hl-btn { width: 100%; justify-content: center; margin: 0 !important; }
}

/* ── 7. GOLD / GRADIENT BUTTONS — WHITE LABEL TEXT ────────────────────── */
.hl-btn--gold,
.hl-btn--gold:link,
.hl-btn--gold:visited,
.hl-btn--gold:hover,
.hl-btn--gold:focus,
.hl-btn--gold:active,
.hl-room-show__book,
.hl-room-show__book:hover,
.hl-search-bar__btn,
.hl-search-bar__btn:hover,
.hl-mobile-cta__book,
.hl-sticky-cta .hl-btn--gold,
.hl-floating-btn--call {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.hl-btn--gold *,
.hl-room-show__book *,
.hl-search-bar__btn *,
.hl-mobile-cta__book * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
.hl-btn--gold svg,
.hl-room-show__book svg,
.hl-search-bar__btn svg { stroke: currentColor; }
@media (hover: none) and (pointer: coarse) {
  .hl-btn--gold:hover,
  .hl-btn--gold:focus:not(:focus-visible) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
}