/* The product's own layer, on top of the kit. Sizes are rem so the reader's
   interface size moves the whole product; colours and faces come from the kit's
   tokens only. The kit's frame classes are never given layout here. The owner's
   forms and buttons are the kit's own (.mx-field, .mx-btn), not restyled here. */

body { font-family: var(--font-sans); }

.hotel-brand { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--c-ink); font-weight: 700; text-decoration: none; }
.hotel-brand svg { width: 1.75rem; height: 1.75rem; flex: none; color: var(--c-accent); }

.hotel-hint { color: var(--c-ink-muted); font-size: .9rem; margin: 0; }

.hotel-page { max-width: 36rem; margin-inline: auto; padding-block: 2rem; text-align: center; }
.hotel-page h1 { margin-block: .5rem; }

/* A room's own guest page: no Hotel QR frame (header, menu, profile, background animation) -
   the hotel's logo and name, drawn by `.room-head`, are the only mark on it, plus the kit's
   own settings cog (`.room-settings`), fixed to the top corner at the end of the line (top-right; top-left in Arabic) so it stays reachable
   while the page scrolls and never reserves a row of its own. A hotel's print-sheet
   background, if it has one, sits fixed behind the whole page at the owner's chosen opacity
   (`.room-page__bg`); every block of text then wears the same scrim the printed card uses
   over an arbitrary picture (`.room-panel`), in the page's own light or dark colours so it
   still reads against whatever picture the owner chose - otherwise the page stays plain, in
   the site's own light or dark colours. */
.room-page { min-height: 100vh; display: flex; flex-direction: column; }
.room-page__bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.room-settings {
  /* The icon alone, no disc behind it (Chris, 2026-10-09: "only the icon should be visible"). */
  position: fixed; top: max(env(safe-area-inset-top), .5rem); inset-inline-end: .75rem; z-index: 20;
  display: flex;
}
.room-main { flex: 1; width: 100%; max-width: 64rem; margin-inline: auto; padding: 0 1.25rem 2rem; }
/* Left-aligned, no card - the eyebrow names the hotel, the h1 greets by the local clock
   (data-mx-greeting), the line under it names the room only. Inline-end padding keeps the
   text clear of the fixed settings cog above it. */
.room-head {
  display: flex; align-items: center; gap: .875rem;
  padding-block: .5rem 1.25rem; padding-inline-end: 3.5rem;
  text-align: start;
}
.room-head__logo {
  flex: none; width: 56px; height: 56px; border-radius: .75rem; object-fit: cover;
}
@media (min-width: 900px) {
  .room-head__logo { width: 72px; height: 72px; }
}
.room-head__text { min-width: 0; }
.room-head__eyebrow {
  margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; line-height: 1.2;
  text-transform: uppercase; color: var(--c-ink-muted);
}
/* Tight, so the three lines are about the logo's height and sit centred on it (Chris, 2026-10-09:
   "a bit smaller ... room row is too far down ... vertically centered to the logo"). */
.room-head h1 { margin: .125rem 0 0; font-size: 1.875rem; line-height: 1; }
@media (min-width: 900px) {
  .room-head h1 { font-size: 2.25rem; }
}
.room-head__room { margin: 0; line-height: 1.2; color: var(--c-ink-muted); }
.room-panel {
  background: color-mix(in srgb, var(--c-surface) 92%, transparent); color: var(--c-ink);
  border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-top: 1.5rem;
}
.room-panel .hotel-facts,
.room-panel .guide,
.room-panel .chat { margin-top: 0; }
.room-panel .chat__list { background: transparent; border-color: color-mix(in srgb, var(--c-ink) 15%, transparent); }
.room-head.room-panel { margin-top: 1rem; }
.room-grid { display: flex; flex-direction: column; }
.room-grid__facts { min-width: 0; }
.room-grid__chat { min-width: 0; }
@media (min-width: 900px) {
  .room-grid { flex-direction: row; align-items: flex-start; gap: 2rem; }
  .room-grid__facts,
  .room-grid__chat { flex: 1; }
  .room-grid__chat { display: flex; flex-direction: column; position: sticky; top: 1rem; }
  /* Not the kit's own .mx-sheet__scrim (data-mx-sheet, on the chat since task #3055): it is a
     sibling the sheet script inserts before the chat and keeps display:none above 720px -
     forcing it to flex here would steal half the column's height for an invisible box. */
  .room-grid__chat > *:not(.mx-sheet__scrim) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .room-grid__chat .chat { flex: 1; min-height: 0; margin-top: 0; display: flex; flex-direction: column; }
  .room-grid__chat .chat__list { flex: 1; min-height: 0; max-height: none; }
}
/* On a phone the chat is the kit's own sheet (position: fixed, its own background and radius) -
   the room-panel scrim wrapping it must not draw a second box around what is now empty space. */
@media (max-width: 720px) {
  .room-grid__chat > .room-panel { background: none; padding: 0; margin-top: 0; border-radius: 0; }
}

.hotel-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.5rem; }
.hotel-sheet--one { grid-template-columns: minmax(0, 16rem); }
/* The card's own background (an owner's picture, if any) covers the whole card; the code itself
   sits in .hotel-card__qr's own plain, light box (never the background directly, whatever it is
   or whatever theme the rest of the site is in) so every camera can still focus on and read it. */
.hotel-card {
  position: relative; z-index: 0; overflow: hidden; border: 1px dashed var(--c-line-strong); padding: .75rem;
  text-align: center; break-inside: avoid;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.hotel-card__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.hotel-card__qr { display: inline-block; background: #fff; padding: .5rem; border-radius: var(--radius-sm); }
.hotel-card__qr svg { width: 15rem; height: 15rem; max-width: 100%; display: block; margin: 0 auto; }
.hotel-card__logo { display: block; max-height: 2.25rem; max-width: 100%; margin: 0 auto .5rem; }
.hotel-card__text { margin: .5rem 0; }
.hotel-card__text--above { margin-top: 0; }
.hotel-card__line {
  display: inline-block; background: color-mix(in srgb, #fff 88%, transparent); color: #111;
  padding: .2rem .5rem; border-radius: var(--radius-sm); font-size: .8rem; margin: 0;
}
.hotel-card .room { font-size: 1.1rem; font-weight: 700; margin: .5rem 0 0; }
/* The short, typeable address: large on purpose - it is the fallback for a camera that cannot read the code. */
.hotel-card .short-url { font-size: 1.1rem; font-weight: 600; word-break: break-all; margin: .25rem 0 0; }

/* The print sheet's opacity slider, under the kit's own saved-background picker. */
.print-bg-opacity { margin-top: .75rem; max-width: 20rem; }
.print-bg-opacity input[type="range"] { display: block; width: 100%; min-height: 44px; }

/* The design panel: the two forms beside a live preview of one card on a wide screen, stacked on a phone. */
.print-design { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: 1.5rem; margin-top: 1rem; align-items: start; }
.print-design__preview { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 40rem) {
  .print-design { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  @page { margin: 14mm; }
  .noprint { display: none !important; }
  .hotel-sheet { gap: 6mm; }
}

.lp-doc table { width: 100%; border-collapse: collapse; margin-block: 1rem; }
.lp-doc th,
.lp-doc td { text-align: start; padding: .5rem; border-bottom: 1px solid var(--c-line); vertical-align: top; }
/* On a phone the three columns stack: each row becomes a block that names its cells. */
@media (max-width: 40rem) {
  .lp-doc thead { display: none; }
  .lp-doc table,
  .lp-doc tbody,
  .lp-doc tr,
  .lp-doc td { display: block; width: 100%; }
  .lp-doc tr { border-bottom: 1px solid var(--c-line); padding-block: .5rem; }
  .lp-doc td { border: 0; padding: .125rem .5rem; overflow-wrap: anywhere; }
  .lp-doc td::before { content: attr(data-label); display: block; color: var(--c-ink-muted); font-size: .875em; }
}

/* The room's facts at the top of the guest page: one line each, the label on the left, the value on the right. */
.hotel-facts { margin-top: 1.5rem; text-align: start; }
.hotel-facts ul { list-style: none; margin: 0; padding: 0; }
.hotel-facts li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; border-bottom: 1px solid var(--c-line); }
.hotel-facts li > span:first-child { color: var(--c-ink-muted); flex: none; }
.hotel-facts li strong { font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.hotel-facts a { color: var(--c-accent); text-underline-offset: .2em; }
.hotel-facts__value { display: flex; align-items: center; gap: .5rem; min-width: 0; }
/* A small faint icon, not a labelled button: the check icon swaps in for ~1.5s after a copy
   (copy.js toggles .is-copied) and `.hotel-facts__copy-status` (role="status", visually
   hidden) announces it for anyone not watching the icon. */
.hotel-facts__copy {
  /* Just the 16px icon, right in front of the password (Chris, 2026-10-09); ::before keeps the
     44px a finger needs without padding pushing the password away. */
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; margin: 0;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--c-ink-muted);
  opacity: .6; cursor: pointer;
}
.hotel-facts__copy::before { content: ''; position: absolute; inset: -14px; }
.hotel-wifi .hotel-facts__value { gap: .375rem; }
@media (hover: hover) {
  .hotel-facts__copy:hover { opacity: 1; color: var(--c-ink); }
}
.hotel-facts__copy:focus-visible { opacity: 1; color: var(--c-ink); outline: 2px solid var(--c-accent); outline-offset: 1px; }
.hotel-facts__copy svg { width: 16px; height: 16px; }
.hotel-facts__copy-check { display: none; }
.hotel-facts__copy.is-copied { opacity: 1; color: var(--c-accent); }
.hotel-facts__copy.is-copied .hotel-facts__copy-icon { display: none; }
.hotel-facts__copy.is-copied .hotel-facts__copy-check { display: block; }
.hotel-facts__copy-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.hotel-rules { margin: .5rem 0 0; }
.hotel-rules a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-accent); text-underline-offset: .2em; }

/* The local guide on the guest page: left-aligned under the room's welcome, one group per category. */
.guide { margin-top: 2.5rem; text-align: start; }
.guide__title { font-size: 1.25rem; margin: 0 0 1rem; text-align: center; }
.guide__empty { color: var(--c-ink-muted); text-align: center; margin: 0; }
.guide__group { margin-top: 1.5rem; }
.guide__category { font-size: .875rem; color: var(--c-accent); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .25rem; }
.guide__item { border-top: 1px solid var(--c-line); padding-block: .75rem; }
.guide__item h4 { font-size: 1rem; margin: 0 0 .25rem; }
.guide__item p { margin: 0 0 .25rem; }
.guide__address { color: var(--c-ink-muted); font-size: .9rem; }
.guide__item a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-accent); text-underline-offset: .2em; }
.guide__delete { margin-top: 1.5rem; }

/* "Your data" on the hotel's settings, and the page that asks before a delete: each part is a
   sentence and its button, with a rule between what you take out and what you end. */
.hotel-data__part:not(.mx-form) > * + * { margin-top: .75rem; } /* a form keeps its own grid gap */
.hotel-data__part + .hotel-data__part { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-line); }
.hotel-data__text { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--c-ink-muted); }
.hotel-data__text--strong { color: var(--c-ink); font-weight: 600; }

/* The chat between a room and the hotel: the room is the thread, so a guest device and the
   owner's reply both land in the same list, bubbled and timed like a phone's own messaging
   app. On the guest page it is one section among others, so its list keeps a bounded height
   and scrolls on its own; on the owner's and the desk's own thread page (.chat-screen) chat.js
   sizes it to the room actually left on the screen, so the composer sits where a thumb expects
   it - just above the tab bar, never below the fold. */
.chat { margin-top: 2.5rem; text-align: start; }
.chat .hotel-hint { margin-bottom: .75rem; }
.chat__list {
  list-style: none; margin: 0 0 0.75rem; padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  max-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface);
}
.chat__item {
  max-width: 78%; padding: 0.5rem 0.75rem;
  border-radius: 1.1rem; box-shadow: 0 1px 1px color-mix(in srgb, var(--c-ink) 6%, transparent);
}
.chat__item p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat__empty { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 4rem; color: var(--c-ink-muted); font-size: .875rem; text-align: center; padding: .5rem; }
.chat__item--mine { align-self: flex-end; background: var(--c-accent); color: var(--c-accent-ink); border-bottom-right-radius: 0.3rem; }
.chat__item--theirs { align-self: flex-start; background: var(--c-surface-2); color: var(--c-ink); border-bottom-left-radius: 0.3rem; }
.chat__time { display: block; margin-top: 0.2rem; font-size: 0.7rem; opacity: 0.7; text-align: right; }
.chat__item--theirs .chat__time { text-align: left; }

/* Where the composer was, once a free hotel's live chat has taken its month's guest messages (plans.mjs). */
.chat__resting {
  margin: 0; padding: 0.75rem 1rem; border-radius: var(--radius-md);
  border: 1px solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink); font-size: 0.875rem; line-height: 1.45;
}

/* The composer: one pill-shaped row, a growing textarea and a round send button - chat.js grows the
   textarea as its content does, up to chat__input's own max-height, where it scrolls instead. */
.chat__form { display: flex; align-items: flex-end; gap: 0.5rem; margin-top: 0; }
.chat__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.chat__input {
  flex: 1; resize: none; min-height: 2.75rem; max-height: 7rem; overflow-y: auto;
  padding: 0.625rem 1rem; border-radius: 1.375rem; border: 1px solid var(--c-line-strong);
  background: var(--c-surface); color: var(--c-ink); font: inherit; line-height: 1.4;
}
.chat__input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.chat__send {
  flex: none; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 0; background: var(--c-accent); color: var(--c-accent-ink); cursor: pointer;
}
.chat__send:disabled { opacity: 0.6; cursor: default; }
.chat__send svg { width: 1.25rem; height: 1.25rem; }

/* The guest sheet's own head (phone and laptop alike): the hotel's avatar, "Reception · <name>"
   and one line that only says something true - never a reply time we do not know - plus the
   unread badge chat.js shows while the sheet is settled and a reply arrives. */
.chat__sheet-head { display: flex; align-items: center; gap: .625rem; margin: 0 0 .75rem; }
.chat__avatar-wrap {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
}
.chat__avatar-wrap--initial { background: var(--c-accent); border-color: transparent; }
.chat__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.chat__avatar-initial {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.0625rem; color: var(--c-accent-ink);
}
.chat__sheet-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat__sheet-name { font-size: 1rem; font-weight: 700; }
.chat__sheet-sub { font-size: .8125rem; color: var(--c-ink-muted); font-family: var(--font-sans); font-weight: 400; }
.chat__unread {
  flex: none; margin-inline-start: auto; min-width: 1.375rem; height: 1.375rem; padding: 0 .375rem;
  display: flex; align-items: center; justify-content: center; border-radius: 9999px;
  background: var(--c-accent); color: var(--c-accent-ink); font-size: .75rem; font-weight: 700;
}
.chat__unread[hidden] { display: none; }

/* The one-tap requests: a horizontally-scrolling row of plain pills between the list and the
   form - a tap fills the message box, the guest still sends it themselves. */
.chat__chips {
  display: flex; gap: .5rem; overflow-x: auto; padding: 0 0 .5rem; margin: 0;
  scrollbar-width: none;
}
.chat__chips::-webkit-scrollbar { display: none; }
.chat__chip {
  flex: none; min-height: 2.25rem; padding: .4rem .875rem; border-radius: 9999px;
  border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-ink);
  font: inherit; font-size: .8125rem; white-space: nowrap; cursor: pointer;
}
.chat__chip:hover { background: var(--c-surface-2); }

/* The thread's own slim header - a back arrow and the room, like a phone's chat screen - and the
   full-height screen below it, sized by chat.js (data-mx-chat-screen) to clear the tab bar on a phone. */
.chat__head { display: flex; align-items: center; gap: 0.5rem; }
.chat__back {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; margin-inline-start: -0.5rem; border-radius: 50%; color: var(--c-ink);
}
.chat__back svg { width: 1.375rem; height: 1.375rem; }
.chat__head-title { margin: 0; font-size: 1.125rem; font-weight: 700; }
.chat-screen { display: flex; flex-direction: column; min-height: 0; height: 70vh; }
.chat-screen .chat__list { flex: 1; min-height: 0; max-height: none; margin-bottom: 0.75rem; }
.chat-screen .chat__form { flex: none; }

/* The room picker: a calendar-like grid of tiles, one per room, grouped by floor - the no-script
   fallback is the plain textarea next to it (hidden by rooms.js only once the picker is built). */
.room-picker { margin-top: .75rem; text-align: start; }
.room-picker__add-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
.room-picker__add-label { font-size: .8125rem; color: var(--c-ink-muted); }
.room-picker__floor, .room-picker__from, .room-picker__to, .room-picker__single {
  min-height: 44px; min-width: 5.5rem; flex: 1 1 6rem; padding: 0 .75rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-ink); font: inherit;
}
.room-picker__error { margin-top: .5rem; }
.room-picker__groups { margin-top: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.room-picker__floor-title { font-size: .875rem; font-weight: 600; color: var(--c-ink-muted); margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .04em; }
.room-picker__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .5rem; }
.room-tile {
  position: relative; min-height: 44px; min-width: 3rem; padding: 0 .25rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-ink); font: inherit; font-weight: 600;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
}
.room-tile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.room-tile[aria-pressed="false"] { opacity: .4; background: var(--c-surface-sunk); border-style: dashed; }
.room-tile--coded::after {
  content: ''; position: absolute; top: .3rem; right: .3rem; width: .4rem; height: .4rem;
  border-radius: 50%; background: var(--c-accent);
}
.room-picker__count { margin-top: .75rem; }

/* Opening hours: one collapsible block per service, each holding up to HOURS_SPAN_MAX day-and-time rows. */
.hours-services { margin-top: .75rem; display: flex; flex-direction: column; gap: .75rem; }
.hours-service { border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: .75rem; }
.hours-service summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.hours-service .mx-field { margin-top: .5rem; }
.hours-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--c-line); }
.hours-row:first-of-type { margin-top: .5rem; padding-top: 0; border-top: 0; }
.hours-row__days { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.hours-row__checks { display: flex; flex-wrap: wrap; gap: .25rem; }
.hours-day { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; padding-inline: .375rem; font-size: .8125rem; }
.hours-row__time { display: flex; align-items: center; gap: .5rem; }
.hours-row__time input {
  min-height: 44px; min-width: 6rem; padding: 0 .5rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-ink); font: inherit;
}

/* Where a free hotel stands on the live chat's month, in its own inbox (plans.mjs): quiet, louder near the line. */
.plan-line { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--c-ink-subtle); }
.plan-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.plan-line--near { color: var(--c-warn); }
.plan-line--full { color: var(--c-warn); font-weight: 600; }