/* Room details: the card. Link after fonts.css, tokens.css and the skeleton and badge styles. Tokens only. */

/* the card's own buttons, so it looks right on a page with no button styles */
.room button { font: inherit; padding: 7px 14px; border-radius: var(--sg-radius-1, 4px); border: 1px solid var(--sg-rule-strong, currentColor); background: var(--sg-surface, Canvas); color: inherit; cursor: pointer; }
.room button:disabled { cursor: default; opacity: 0.6; }
.room button:focus-visible { outline: var(--sg-focus-width, 2px) solid var(--sg-focus, Highlight); outline-offset: var(--sg-focus-offset, 2px); }

.room { display: block; max-width: 26rem; padding: 18px; border: var(--sg-rule-width, 1px) solid var(--sg-rule, currentColor); border-radius: var(--sg-radius-2, 8px); background: var(--sg-surface-raised, Canvas); }
.room:focus { outline: none; }
.room:focus-visible { outline: var(--sg-focus-width, 2px) solid var(--sg-focus, Highlight); }
.room__photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 6px; }
.room__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 14px 0 6px; }
.room__head h2 { font: 600 var(--sg-step-1, 1.2rem)/1.25 var(--sg-font-display, inherit); margin: 0; }
.room p { margin: 0 0 8px; }
.room__summary, .room__facts { color: var(--sg-text-soft, inherit); }
.room__price { font-size: var(--sg-step-1, 1.15rem); }
.room__price strong { font-weight: var(--sg-weight-bold, 600); }
.room h3 { font: 600 var(--sg-step--1, 0.9rem)/1.3 var(--sg-font-body, inherit); margin: 14px 0 4px; }
.room__included { margin: 0 0 16px; padding-inline-start: 1.2em; list-style: disc; }
.room button.room__act { background: var(--sg-accent); color: var(--sg-on-accent, #fff); border-color: transparent; font-weight: var(--sg-weight-medium, 500); }
.room__error p { margin: 0 0 12px; }
/* a failed card keeps its loading size (measured by recipe.js, or about a card's height), message centred */
.room.is-failed { display: grid; align-content: center; box-sizing: border-box; min-block-size: var(--room-min, 22rem); }
/* components set their own display, so hidden needs saying outright */
.room [hidden] { display: none !important; }