/* The hotel rooms page. */
.hr { max-width: 1200px; margin: 0 auto; }
.hr * { box-sizing: border-box; }
.hr-card { background: var(--fs-surface); border: 1px solid var(--fs-line); border-radius: var(--fs-radius); }
.hr-head { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; padding: .9rem; margin-bottom: 1rem; }
@media (max-width: 800px) { .hr-head { grid-template-columns: 1fr; } }
.hr-photo { border-radius: 10px; min-height: 170px; background: var(--fs-sunk) center/cover no-repeat; }
.hr-name { font-size: 1.5rem; font-weight: 800; color: var(--fs-ink); margin: .2rem 0; display: flex; gap: .6rem; align-items: center; }
.hr-stars { color: #f79009; letter-spacing: 1px; font-size: 1rem; }
.hr-addr { color: var(--fs-muted); margin-bottom: .4rem; }
.hr-rating { color: var(--fs-ok); font-weight: 600; }
.hr-back { display: inline-block; margin-top: .6rem; color: var(--fs-accent); font-weight: 600; text-decoration: none; }
.hr-title { font-size: 1.15rem; font-weight: 700; color: var(--fs-ink); margin: 0 0 .6rem; }
.hr-rate { display: grid; grid-template-columns: 1fr 160px 300px; gap: 1rem; align-items: center; padding: .9rem; border-bottom: 1px solid var(--fs-line); }
.hr-rate:last-child { border-bottom: 0; }
@media (max-width: 900px) { .hr-rate { grid-template-columns: 1fr; } }
.hr-room { font-weight: 700; color: var(--fs-ink); font-size: 1.05rem; }
.hr-sub { color: var(--fs-muted); font-size: .9rem; margin-top: .2rem; }
.hr-pill { display: inline-block; font-size: .74rem; padding: .15rem .5rem; border-radius: 999px; margin-right: .3rem; }
.hr-pill.ok { background: #dcfae6; color: #067647; }
.hr-pill.no { background: var(--fs-sunk); color: var(--fs-muted); }
.hr-pill.warn { background: #fef0c7; color: #b54708; }
.hr-price { text-align: right; font-size: 1.35rem; font-weight: 800; color: var(--fs-ink); }
.hr-price small { display: block; font-size: .75rem; font-weight: 500; color: var(--fs-muted); }
.hr-modes { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.hr-mode { padding: .6rem 1rem; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: .9rem; border: 1px solid var(--fs-accent); }
.hr-mode.confirm { background: var(--fs-accent); color: var(--fs-accent-ink); }
.hr-mode.hold { background: var(--fs-surface); color: var(--fs-accent); }
.hr-empty { padding: 2rem; text-align: center; color: var(--fs-muted); }
.hr-cxl { margin-top: .3rem; font-size: .8rem; color: var(--fs-muted); }