[data-room-catalog] .room-image { width: 100%; height: 180px; object-fit: cover; }
[data-room-catalog] .room-no-image { height: 180px; display: grid; place-items: center; background: #f1f3f5; color: #64717c; }
#booking-dialog { width: min(560px, calc(100% - 24px)); max-height: 90vh; overflow: auto; border: 0; border-radius: 12px; padding: 24px; color: #212529; }
#booking-dialog::backdrop { background: rgb(0 0 0 / 50%); }
#booking-dialog label { display: block; margin-top: 12px; }
#booking-dialog input { width: 100%; }
#booking-dialog .booking-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#booking-result { margin-top: 16px; white-space: pre-line; }
#booking-result:empty { display: none; }
#booking-result[data-state="error"] { background: #fff0ed; color: #8a2418; padding: 12px; border-radius: 6px; }
#booking-result[data-state="success"] { background: #e7f4ec; color: #165a30; padding: 12px; border-radius: 6px; }
@media(max-width: 420px) { #booking-dialog .booking-dates { grid-template-columns: 1fr; gap: 0; } }

.room-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media(max-width: 991px) { .room-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width: 767px) { .room-catalog { grid-template-columns: minmax(0, 1fr); } }

/* Keep prices aligned above booking buttons regardless of description length. */
[data-room-catalog] .room-price { padding-top: 8px; font-variant-numeric: tabular-nums; }

/* Keep the nightly rate at the same offset below every room photograph. */
[data-room-catalog] .card-body > h3 { min-block-size: 2.5em; line-height: 1.25; margin-bottom: .25rem; }
[data-room-catalog] .room-price { margin: 0 0 .75rem; padding: 0; line-height: 1.25; font-size: 1.25rem; }
[data-room-catalog] .card-body > button { margin-top: auto; }
.country-photo { display: block; width: 100%; height: clamp(150px, 24vw, 280px); object-fit: cover; border-radius: .5rem; margin-bottom: 1.25rem; }
.country-tab-name { font-size: .875rem; }
@media (max-width: 991px) {
  .nav.scroll-horizontal:has(.country-tab-name) { flex-wrap: nowrap; overflow-x: auto; }
  .nav.scroll-horizontal > a:has(.country-tab-name) { flex: 0 0 auto; min-width: 100px !important; }
}