/**
 * refinements-v326.css — v3.26 (loads LAST)
 * ---------------------------------------------------------------------------
 * 1. Rooms page: wider check-in / check-out / guests fields so the full
 *    dd-mm-yyyy value and picker icon are never clipped.
 * 2. Field labels (Check-in, Check-out, Guests) centred over their boxes.
 * 3. "Taxes may be applicable" — smaller; inline after the price on desktop,
 *    on its own second line on mobile.
 */

/* ── 1 + 2. DATE / GUEST FIELDS ───────────────────────────────────────── */

/* Labels centred over their inputs on every breakpoint. */
.hl-room-show__date-field label {
  display: block !important;
  width: 100%;
  text-align: center !important;
  justify-content: center !important;
}

/* Inputs fill their column, centred value, room for the picker icon. */
.hl-room-show__date-field input[type="date"],
.hl-room-show__dates-grid input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: .8rem .5rem !important;
  font-size: .95rem !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;
  overflow: visible;
}
.hl-room-show__date-field input[type="date"]::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  margin-inline-start: .15rem;
  padding-inline: 0;
}
.hl-date-ph { justify-content: center; text-align: center; font-size: .95rem; }

@media (min-width: 901px) {
  /* Columns share the available width and can shrink — never overflow. */
  .hl-datepicker-card { padding: 18px 16px 20px !important; overflow: hidden; }
  .hl-room-show__dates-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px 10px !important;
    width: 100%;
    max-width: 100%;
  }
  .hl-room-show__date-field { min-width: 0 !important; }
  .hl-room-show__date-field input[type="date"],
  .hl-room-show__dates-grid input[type="date"] {
    padding: .78rem .35rem !important;
    font-size: .9rem !important;
  }
  .hl-room-show__date-field select.hl-room-guests,
  .hl-room-show__dates-grid select.hl-room-guests {
    padding: .78rem 1.6rem .78rem .6rem !important;
    font-size: .9rem !important;
  }
}

/* Narrow body column: guests drops to its own full-width row so the two
   date fields keep comfortable width instead of clipping. */
@media (min-width: 901px) and (max-width: 1240px) {
  .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;
  }
}

/* ── 3. PRICE + TAX NOTE ──────────────────────────────────────────────── */
.hl-room-show__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .35rem;
  row-gap: 2px;
}
.hl-room-show__price-tax,
.hl-room-card__price-tax {
  font-size: .62rem !important;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: none !important;
  color: var(--hl-text-muted, #8a7a6a);
  opacity: .85;
}

/* Desktop: same line as the price. */
@media (min-width: 769px) {
  .hl-room-show__price { flex-wrap: nowrap; }
  .hl-room-show__price-tax {
    display: inline !important;
    width: auto !important;
    margin-top: 0 !important;
    margin-inline-start: .5rem;
    white-space: nowrap;
    font-size: .64rem !important;
  }
}

/* Mobile: second line, under the price. */
@media (max-width: 768px) {
  .hl-room-show__price-tax {
    display: block !important;
    width: 100% !important;
    margin-top: 1px !important;
    font-size: .62rem !important;
  }
}

/* Safety: nothing in the date card may overflow its column. */
.hl-room-show__dates-grid, .hl-datepicker-card { max-width: 100%; }
.hl-room-show__date-field, .hl-date-input-wrap { min-width: 0 !important; max-width: 100%; }
.hl-room-show__date-field input,
.hl-room-show__date-field select { box-sizing: border-box !important; max-width: 100%; }