/* ==========================================================================
   BOOKALLO — the hotel CARD, the facet sidebar and the hotel-details panel.

   These three are what janet_hotel_render.js emits, so their styles live
   together and travel with it: /hotels and /search share one renderer, and a
   stylesheet that only one of them loaded would give the same markup two
   different appearances. Load this AFTER janet_live_search.css on both.

   TOKENS ARE LOCAL ON PURPOSE. The card does NOT derive its accent from
   --jt-coral, because janet_premium.css re-points that variable to champagne
   (#E8C989) on the pages that load it — cream ink measures 3.20:1 on coral and
   1.9:1 on champagne, so a card inheriting it would silently fail contrast on
   one page and pass on the other. Every colour below is stated.

   Mobile-first, RTL-safe (logical properties throughout), 44px tap targets,
   reduced-motion aware.
   ========================================================================== */

/*
 * :where() — ZERO specificity, deliberately.
 *
 * These are the component palette DECLARATIONS. Declared on a bare class they
 * sit at (0,1,0) on the element itself, which BEATS the theme re-pointing the
 * same tokens on :root — so janet_premium.css converted the whole product and
 * every card here kept its own coral.
 *
 * Measured on production 2026-08-30, /hotels results: --jhc-coral resolved to
 * the sea accent at documentElement while 44 price elements rendered #B8401F
 * and 19 form controls #E8613C. The theme was correct; it simply never reached
 * the element. janet_book.css already used :where() for exactly this reason.
 *
 * :where() keeps the values as defaults for anything the theme does not
 * re-point, and lets the theme win everywhere it does.
 */
:where(.jhc, .jhf, .jhd) {
  --jhc-ink: #241C16;
  --jhc-ink-2: #4A3B31;
  --jhc-mute: #7A6757;
  --jhc-line: rgba(36, 28, 22, .13);
  --jhc-line-2: rgba(36, 28, 22, .07);
  --jhc-card: #FFFFFF;
  --jhc-coral: #E8613C;
  --jhc-coral-ink: #B8401F;
  --jhc-coral-soft: #FDEFE9;
  --jhc-navy: #1B3A4B;
  --jhc-teal: #12655F;
  --jhc-gold: #C08610;
  --jhc-sand: #F7F0E7;
  --jhc-good: #14653C;
  --jhc-good-bg: #E7F4EC;
  --jhc-r: 16px;
  --jhc-r-sm: 10px;
  --jhc-sh: 0 1px 2px rgba(36,28,22,.05), 0 10px 24px -12px rgba(36,28,22,.22);
  --jhc-sh-hi: 0 2px 6px rgba(36,28,22,.07), 0 20px 42px -16px rgba(36,28,22,.30);
}

/* ==========================================================================
   1. THE CARD
   ========================================================================== */

/* The grid is re-declared rather than inherited: janet_live_search.css sizes
   hotel results at minmax(280px,1fr) auto-fill, which is a tile grid. A card
   that has to carry an image, ten facts and a price rail is a ROW. */
.ls-hotel-grid:has(.jhc) { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.jhc.ls-hotel-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--jhc-card);
  border: 1px solid var(--jhc-line);
  border-radius: var(--jhc-r);
  box-shadow: var(--jhc-sh);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.jhc.ls-hotel-card:hover {
  box-shadow: var(--jhc-sh-hi);
  transform: translateY(-2px);
  border-color: rgba(14, 90, 82, .35);
}
.jhc[data-cheapest] { border-color: rgba(18, 101, 95, .45); }

/* ---------- media ---------- */
.jhc .jhc__media {
  position: relative;
  inline-size: auto; block-size: auto;          /* override the 132x104 thumb */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--jhc-sand);
  border-radius: 0;
}
.jhc .jhc__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.jhc:hover .jhc__media img { transform: scale(1.045); }

.jhc__media--none {
  display: grid; place-content: center; gap: .35rem; text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFF6EC 0%, var(--jhc-sand) 60%, #EFE3D4 100%);
  color: var(--jhc-mute);
}
.jhc__media-fb {
  font: 800 1.6rem/1 "Frank Ruhl Libre", serif;
  color: var(--on-sky, #fff); background: var(--jhc-coral);
  inline-size: 46px; block-size: 46px; border-radius: 50%;
  display: grid; place-items: center; margin-inline: auto;
}
.jhc__media-t { font: 600 .8rem/1.4 "Assistant", sans-serif; }

.jhc__gal {
  position: absolute; inset-block-end: .6rem; inset-inline-end: .6rem;
  /* 44px. Measured on the live card at 390px it was 71x36 — under the touch
     floor, and it sits over a photograph where a mis-tap opens the wrong
     thing. Padding carries the height so the pill's shape is unchanged. */
  min-block-size: 44px; padding: .6rem .7rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20, 14, 10, .72); color: #fff;
  font: 600 .78rem/1 "Assistant", sans-serif;
  backdrop-filter: blur(4px);
}
.jhc__gal:hover { background: rgba(20, 14, 10, .88); }
.jhc__gal:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.jhc__flag {
  position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--jhc-teal); color: #fff;
  font: 700 .72rem/1.3 "Assistant", sans-serif;
  box-shadow: 0 4px 12px rgba(18, 101, 95, .35);
}

/* the favourite heart sits over the image, not in the text column */
.jhc > .jfav {
  position: absolute; z-index: 3;
  inset-block-start: .55rem; inset-inline-end: .55rem;
  /* 44px, from 38. The favourite control sits beside the gallery button on a
     phone, and two under-sized targets next to each other is the pairing that
     actually produces mis-taps. */
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 1.05rem; line-height: 1;
  background: rgba(255, 255, 255, .92); color: var(--jhc-coral-ink);
  box-shadow: 0 2px 8px rgba(36, 28, 22, .2);
}
.jhc > .jfav:focus-visible { outline: 2px solid var(--jhc-coral); outline-offset: 2px; }

/* ---------- body ---------- */
.jhc .jhc__body { padding: 1rem 1.05rem .4rem; min-inline-size: 0; }
.jhc .jhc__name {
  margin: 0 0 .35rem;
  font: 700 1.18rem/1.3 "Frank Ruhl Libre", "Assistant", serif;
  color: var(--jhc-ink);
  overflow-wrap: anywhere;
}
.jhc .jhc__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-block-end: .4rem;
}
.jhc .ls-hotel__stars { color: var(--jhc-gold); letter-spacing: 1px; font-size: .92rem; }
.jhc__type {
  font: 600 .74rem/1 "Assistant", sans-serif; color: var(--jhc-navy);
  background: rgba(20, 24, 28, .09); padding: .25rem .5rem; border-radius: 6px;
}
.jhc .jhc__addr {
  font: 500 .82rem/1.4 "Assistant", sans-serif; color: var(--jhc-mute);
  min-inline-size: 0; overflow-wrap: anywhere;
}
.jhc__loc {
  margin: 0 0 .5rem;
  font: 600 .82rem/1.4 "Assistant", sans-serif; color: var(--jhc-ink-2);
}
.jhc__zone {
  font-weight: 600; color: var(--jhc-teal);
  background: rgba(18, 101, 95, .1); padding: .12rem .42rem; border-radius: 6px;
  font-size: .74rem;
}

.jhc__score { display: inline-flex; align-items: center; gap: .5rem; margin-block-end: .55rem; }
.jhc__score-n {
  display: grid; place-items: center; min-inline-size: 44px; padding: .3rem .45rem;
  border-radius: 10px 10px 10px 3px;
  background: var(--jhc-navy); color: #fff;
  font: 800 1.02rem/1 "Assistant", sans-serif; font-variant-numeric: tabular-nums;
}
.jhc__score-x { display: grid; line-height: 1.25; }
.jhc__score-x b { font: 700 .86rem/1.2 "Assistant", sans-serif; color: var(--jhc-ink); }
.jhc__score-x small { font: 500 .76rem/1.2 "Assistant", sans-serif; color: var(--jhc-mute); }

.jhc .jhc__room {
  font: 600 .88rem/1.45 "Assistant", sans-serif; color: var(--jhc-ink-2);
  margin-block-end: .45rem; overflow-wrap: anywhere;
}
.jhc .jhc__room small { font-weight: 500; color: var(--jhc-mute); }

.jhc .jhc__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: .5rem; }

.jhc__amen {
  list-style: none; margin: 0 0 .8rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .4rem;
}
.jhc__amen-i {
  font: 500 .76rem/1 "Assistant", sans-serif; color: var(--jhc-ink-2);
  background: var(--jhc-sand); border: 1px solid var(--jhc-line-2);
  padding: .3rem .5rem; border-radius: 7px;
  display: inline-flex; align-items: center; gap: .25rem;
}

/* ---------- price rail ---------- */
.jhc .jhc__rail {
  display: grid; align-content: start; gap: .4rem;
  padding: .9rem 1.05rem 1.05rem;
  text-align: start; justify-items: stretch;
  background: linear-gradient(180deg, #FFFDFB 0%, #FDF6EF 100%);
  border-block-start: 1px solid var(--jhc-line-2);
}
.jhc .jhc__total {
  display: grid; gap: .05rem; text-align: start;
  font: inherit; color: var(--jhc-ink);
}
.jhc .jhc__from {
  font: 600 .76rem/1.2 "Assistant", sans-serif; color: var(--jhc-mute);
}
/* THE strongest element on the card. */
.jhc .jhc__amount {
  font: 800 2.05rem/1.05 "Assistant", sans-serif;
  color: var(--jhc-coral-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.jhc .jhc__basis {
  font: 600 .78rem/1.35 "Assistant", sans-serif; color: var(--jhc-ink-2);
}
.jhc .jhc__ppn {
  font: 600 .85rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink);
  font-variant-numeric: tabular-nums;
}
.jhc .ls-hotel-card__tax { font: 600 .74rem/1.35 "Assistant", sans-serif; color: #8A5A12; }
.jhc .ls-hotel-card__tax--unknown { color: var(--jhc-mute); }
.jhc .ls-hotel-card__conf { font: 500 .74rem/1.35 "Assistant", sans-serif; color: var(--jhc-mute); }

.jhc__details {
  min-block-size: 46px; margin-block-start: .3rem;
  border: 1.5px solid var(--jhc-coral); border-radius: 11px; cursor: pointer;
  background: #fff; color: var(--jhc-coral-ink);
  font: 700 .95rem/1 "Assistant", sans-serif;
  transition: background .18s ease, color .18s ease;
}
.jhc__details:hover { background: var(--jhc-coral-soft); }
.jhc__details:focus-visible { outline: 2px solid var(--jhc-ink); outline-offset: 2px; }

.jhc .ls-card__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 46px; border-radius: 11px; text-decoration: none;
  background: var(--jhc-coral); color: #21120A;
  font: 700 .95rem/1 "Assistant", sans-serif; margin-block-start: 0;
}
.jhc .ls-card__cta:hover { background: var(--jhc-coral-ink); color: #FFF6EA; }
.jhc .ls-card__cta--off {
  background: #EFE8DF; color: var(--jhc-mute); cursor: not-allowed;
  border: 1px dashed var(--jhc-line);
}
.jhc .ls-hotel-card__handoff { font: 500 .72rem/1.4 "Assistant", sans-serif; color: var(--jhc-mute); margin: .2rem 0 0; }

/* ---------- the row layout, once there is room for it ---------- */
@media (min-width: 760px) {
  .jhc.ls-hotel-card { grid-template-columns: 264px minmax(0, 1fr); }
  .jhc .jhc__media { aspect-ratio: auto; block-size: 100%; min-block-size: 236px; }
  .jhc .jhc__body { padding: 1.1rem 1.15rem 1rem; }
  .jhc .jhc__rail { border-block-start: 0; }
}
@media (min-width: 1080px) {
  .jhc.ls-hotel-card { grid-template-columns: 288px minmax(0, 1fr) 268px; }
  .jhc .jhc__rail {
    border-inline-start: 1px solid var(--jhc-line-2);
    padding: 1.1rem 1.05rem;
    align-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jhc.ls-hotel-card, .jhc .jhc__media img { transition: none; }
  .jhc.ls-hotel-card:hover { transform: none; }
  .jhc:hover .jhc__media img { transform: none; }
}

/* ==========================================================================
   2. FACET SIDEBAR
   ========================================================================== */
.jhf { display: grid; gap: .9rem; align-content: start; }
.jhf__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.jhf__title { margin: 0; font: 700 1.05rem/1.2 "Frank Ruhl Libre", serif; color: var(--jhc-ink); }
.jhf__clear {
  border: 0; background: none; cursor: pointer; padding: .4rem .2rem; min-block-size: 36px;
  font: 600 .82rem/1 "Assistant", sans-serif; color: var(--jhc-coral-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.jhf__clear:focus-visible { outline: 2px solid var(--jhc-coral); outline-offset: 2px; border-radius: 6px; }
.jhf__g {
  margin: 0; padding: .8rem .9rem; border: 1px solid var(--jhc-line);
  border-radius: var(--jhc-r-sm); background: #fff;
}
.jhf__l { font: 700 .84rem/1.2 "Assistant", sans-serif; color: var(--jhc-ink); padding-inline: .1rem; }
.jhf__opt {
  display: flex; align-items: center; gap: .5rem; min-block-size: 38px;
  font: 500 .87rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink-2); cursor: pointer;
}
.jhf__opt input { inline-size: 17px; block-size: 17px; accent-color: var(--jhc-coral); flex: none; }
.jhf__opt span { min-inline-size: 0; overflow-wrap: anywhere; }
.jhf__c { margin-inline-start: auto; color: var(--jhc-mute); font-size: .76rem; font-variant-numeric: tabular-nums; }
.jhf__range { inline-size: 100%; accent-color: var(--jhc-coral); min-block-size: 30px; }
.jhf__out {
  display: block; font: 700 .85rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. HOTEL DETAILS PANEL (drawer on desktop, full screen on mobile)
   ========================================================================== */
.jhd-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 14, 10, .55);
  backdrop-filter: blur(2px);
  animation: jhd-fade .18s ease;
}
.jhd {
  position: fixed; z-index: 71; inset-block: 0; inset-inline-end: 0;
  inline-size: min(1040px, 100vw);
  background: #FFFDFA; color: var(--jhc-ink);
  box-shadow: -18px 0 60px -20px rgba(20, 14, 10, .5);
  overflow: hidden auto; overscroll-behavior: contain;
  animation: jhd-in .26s cubic-bezier(.22, .61, .36, 1);
  font-family: "Assistant", system-ui, sans-serif;
}
[dir="ltr"] .jhd { box-shadow: 18px 0 60px -20px rgba(20, 14, 10, .5); }
@keyframes jhd-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes jhd-in { from { transform: translateX(var(--jhd-from, 3%)); opacity: .4 } to { transform: none; opacity: 1 } }
[dir="rtl"] .jhd { --jhd-from: -3%; }

.jhd__x {
  position: sticky; inset-block-start: .7rem; inset-inline-start: .7rem;
  z-index: 4; float: inline-start;
  inline-size: 42px; block-size: 42px; border-radius: 50%;
  border: 1px solid var(--jhc-line); background: rgba(255, 255, 255, .95);
  cursor: pointer; font-size: 1.05rem; color: var(--jhc-ink);
  box-shadow: 0 4px 14px rgba(36, 28, 22, .18);
}
.jhd__x:focus-visible { outline: 2px solid var(--jhc-coral); outline-offset: 2px; }

.jhd__loading, .jhd__warn {
  padding: 1rem 1.1rem; font: 600 .9rem/1.5 "Assistant", sans-serif; color: var(--jhc-mute);
}
.jhd__warn {
  margin: 0 0 .9rem; background: #FFF4E5; color: #8A5A00;
  border: 1px solid #F0C980; border-radius: var(--jhc-r-sm);
}

/* ---------- gallery ---------- */
.jhd__gal { background: #17100B; }
.jhd__stage { position: relative; aspect-ratio: 16 / 9; background: #17100B; }
.jhd__img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }
.jhd__nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 46px; block-size: 46px; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(255, 255, 255, .9); color: #17100B;
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
}
.jhd__nav:hover { background: #fff; }
.jhd__nav:focus-visible { outline: 2px solid var(--jhc-coral); outline-offset: 2px; }
.jhd__nav--prev { inset-inline-start: .7rem; }
.jhd__nav--next { inset-inline-end: .7rem; }
.jhd__count {
  position: absolute; inset-block-end: .7rem; inset-inline-end: .8rem;
  padding: .28rem .6rem; border-radius: 999px;
  background: rgba(20, 14, 10, .72); color: #fff;
  font: 600 .76rem/1 "Assistant", sans-serif; font-variant-numeric: tabular-nums;
}
.jhd__cap {
  margin: 0; padding: .5rem .9rem; min-block-size: 1.9rem;
  background: #17100B; color: #E8DED3;
  font: 500 .8rem/1.4 "Assistant", sans-serif;
}
.jhd__thumbs {
  display: flex; gap: .4rem; padding: .5rem .9rem .8rem;
  overflow-x: auto; background: #17100B; scrollbar-width: thin;
}
.jhd__thumb {
  flex: none; inline-size: 96px; block-size: 66px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #2A1F16;
}
.jhd__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.jhd__thumb[data-active] { border-color: var(--jhc-coral); }
.jhd__thumb:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.jhd__galn {
  margin: 0; padding: 0 .9rem .8rem; color: #C7B7A6;
  font: 600 .78rem/1 "Assistant", sans-serif; background: #17100B;
}
.jhd__gal--none { background: none; padding: 1rem 1.1rem 0; }
.jhd__nofoto {
  display: grid; gap: .45rem; justify-items: center; text-align: center;
  padding: 2rem 1.2rem; border-radius: var(--jhc-r);
  border: 1px dashed rgba(14, 90, 82, .45);
  background: radial-gradient(120% 100% at 50% 0%, #FFF6EC 0%, var(--jhc-sand) 70%);
}
.jhd__nofoto-m {
  inline-size: 54px; block-size: 54px; border-radius: 50%;
  display: grid; place-items: center; background: var(--jhc-coral); color: var(--on-sky, #fff);
  font: 800 1.5rem/1 "Frank Ruhl Libre", serif;
}
.jhd__nofoto strong { font: 700 1.02rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink); }
.jhd__nofoto p { margin: 0; max-inline-size: 46ch; font: 500 .86rem/1.5 "Assistant", sans-serif; color: var(--jhc-mute); }

/* ---------- body ---------- */
.jhd__cols { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.1rem; }
.jhd__main { min-inline-size: 0; display: grid; gap: 1rem; align-content: start; }
.jhd__main > .jhd__s { min-inline-size: 0; }
.jhd__head { display: grid; gap: .35rem; }
.jhd__name { margin: 0; font: 800 1.6rem/1.2 "Frank Ruhl Libre", serif; color: var(--jhc-ink); overflow-wrap: anywhere; }
.jhd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.jhd__meta .ls-hotel__stars { color: var(--jhc-gold); letter-spacing: 1px; }
.jhd__score { font: 600 .9rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink-2); }
.jhd__score b {
  display: inline-grid; place-items: center; min-inline-size: 42px; padding: .22rem .4rem;
  border-radius: 9px 9px 9px 3px; background: var(--jhc-navy); color: #fff;
  font-weight: 800; font-variant-numeric: tabular-nums; margin-inline-end: .3rem;
}
.jhd__addr, .jhd__dist { margin: 0; font: 500 .88rem/1.5 "Assistant", sans-serif; color: var(--jhc-mute); }
.jhd__dist { color: var(--jhc-ink-2); font-weight: 600; }

.jhd__s {
  background: #fff; border: 1px solid var(--jhc-line);
  border-radius: var(--jhc-r); padding: 1rem 1.05rem;
}
.jhd__h { margin: 0 0 .6rem; font: 700 1.02rem/1.3 "Frank Ruhl Libre", serif; color: var(--jhc-ink); }
.jhd__desc { font: 400 .92rem/1.65 "Assistant", sans-serif; color: var(--jhc-ink-2); white-space: pre-line; }
.jhd__desc[data-clamp] { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.jhd__desc[data-open] { display: block; }
.jhd__more {
  margin-block-start: .45rem; min-block-size: 38px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--jhc-coral-ink);
  font: 700 .85rem/1 "Assistant", sans-serif; text-decoration: underline; text-underline-offset: 3px;
}
.jhd__more:focus-visible { outline: 2px solid var(--jhc-coral); outline-offset: 2px; border-radius: 6px; }

.jhd__rows { margin: 0; display: grid; gap: 0; }
.jhd__row {
  display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  gap: .6rem; padding: .5rem 0; border-block-end: 1px solid var(--jhc-line-2);
}
.jhd__row:last-child { border-block-end: 0; }
.jhd__row dt { font: 600 .84rem/1.5 "Assistant", sans-serif; color: var(--jhc-mute); }
.jhd__row dd { margin: 0; font: 500 .9rem/1.5 "Assistant", sans-serif; color: var(--jhc-ink); overflow-wrap: anywhere; }
.jhd__row dd small { color: var(--jhc-mute); font-weight: 500; }

.jhd__taxes { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.jhd__taxes small { color: var(--jhc-mute); }

.jhd__fac {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .35rem .8rem;
}
.jhd__fac li {
  font: 500 .87rem/1.5 "Assistant", sans-serif; color: var(--jhc-ink-2);
  padding-inline-start: 1.1rem; position: relative;
}
.jhd__fac li::before {
  content: "✓"; position: absolute; inset-inline-start: 0;
  color: var(--jhc-teal); font-weight: 800; font-size: .8rem;
}
.jhd__note { margin: .7rem 0 0; font: 500 .76rem/1.4 "Assistant", sans-serif; color: var(--jhc-mute); }
.jhd__map {
  display: inline-flex; align-items: center; min-block-size: 40px; margin-block-start: .6rem;
  font: 700 .85rem/1 "Assistant", sans-serif; color: var(--jhc-coral-ink);
}

/* ---------- the booking rail ---------- */
.jhd__book {
  align-self: start; display: grid; gap: .5rem;
  background: linear-gradient(180deg, #FFFDFB 0%, #FDF1E9 100%);
  border: 1px solid rgba(14, 90, 82, .3); border-radius: var(--jhc-r);
  padding: 1rem 1.05rem;
  box-shadow: var(--jhc-sh);
}
.jhd__book-h { margin: 0; font: 700 .95rem/1.2 "Assistant", sans-serif; color: var(--jhc-ink-2); }
.jhd__book-total { display: grid; gap: .05rem; }
.jhd__book-total span { font: 600 .76rem/1.2 "Assistant", sans-serif; color: var(--jhc-mute); }
.jhd__book-total b {
  font: 800 1.95rem/1.05 "Assistant", sans-serif; color: var(--jhc-coral-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.jhd__book-total small { font: 600 .8rem/1.35 "Assistant", sans-serif; color: var(--jhc-ink-2); }
.jhd__book-ppn { margin: 0; font: 600 .88rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink); }
.jhd__book-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.jhd__book .ls-card__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 50px; border-radius: 12px; text-decoration: none;
  background: var(--jhc-coral); color: #21120A; font: 700 1rem/1 "Assistant", sans-serif;
}
.jhd__book .ls-card__cta--check { background: var(--jhc-ink); color: #FFF6EA; border: 0; cursor: pointer; }
.jhd__book .ls-card__cta--check[disabled] { opacity: .6; cursor: progress; }
.jhd__book .ls-card__cta--off {
  background: #EFE8DF; color: var(--jhc-mute); border: 1px dashed var(--jhc-line); cursor: not-allowed;
}
.jhd__book-note { margin: 0; font: 500 .78rem/1.5 "Assistant", sans-serif; color: var(--jhc-mute); }

/* ── the check-availability control ──────────────────────────────────────── */
/*
 * A real <button> that performs a real request, so it is styled as a real
 * control — but deliberately NOT as the coral booking button. Coral is reserved
 * for "this takes you to the seller"; this one asks the supplier a question and
 * answers it in place, so it reads as a strong secondary action. Making them
 * look identical is how a reader learns to expect a hand-off that is not there.
 */
.jhc .ls-card__cta--check {
  background: var(--jhc-ink); color: #FFF6EA; border: 0; cursor: pointer;
  transition: background .18s ease, opacity .18s ease;
}
.jhc .ls-card__cta--check:hover { background: #000; color: #FFF6EA; }
.jhc .ls-card__cta--check:focus-visible { outline: 2px solid var(--jhc-coral); outline-offset: 2px; }
.jhc .ls-card__cta--check[disabled] { opacity: .6; cursor: progress; }

/* The supplier's answer lands here, in the card and in the panel alike. */
.jhc__ctastatus[hidden] { display: none; }
.jhc__ctastatus {
  margin-block-start: .45rem; padding: .45rem .55rem; border-radius: 9px;
  font: 600 .78rem/1.45 "Assistant", sans-serif;
}

/* ── no seller to hand over to ───────────────────────────────────────────── */
/*
 * Deliberately NOT button-shaped. The element it replaces was a filled pill
 * reading "בדוק זמינות" that could not be clicked, on every offer of a
 * destination — the shape said "press me", the behaviour said nothing, and no
 * text on the card said why. This is a statement, so it is typeset as one:
 * flat, no radius large enough to read as a control, no pointer cursor.
 */
.jhc__nobook {
  margin: .3rem 0 0; display: flex; gap: .4rem; align-items: flex-start;
  padding: .5rem .6rem; border-inline-start: 3px solid var(--jhc-line);
  background: var(--jhc-paper, #FBF6EF);
  font: 500 .78rem/1.45 "Assistant", sans-serif; color: var(--jhc-mute);
}
.jhc__nobook-i { flex: none; font-size: .85rem; line-height: 1.35; }
.jhc__nobook--rail { background: transparent; padding-inline: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   RICH PANEL — room options, reviews, map, landmarks, policies
   ══════════════════════════════════════════════════════════════════════════ */

.jhd__h4 {
  margin: 1.1rem 0 .5rem; font: 700 .95rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink);
}

/* ── room options ────────────────────────────────────────────────────────── */
/*
 * A LIST of rows, not a <table>. The same six facts have to sit side by side on
 * a desktop and stack on a phone, and a table that reflows to one column stops
 * being a table while keeping all of a table's semantics. Each row is a small
 * card: photo, facts, price rail.
 */
.jhr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
/*
 * Two column counts, because a row without a matched room photograph has one
 * fewer child. With a single fixed template the browser put the BODY in the
 * photo column and the price rail into `1fr`, and the CTA stretched into a
 * full-width bar across the row — only on the rows with no photo, which is
 * exactly the kind of difference that survives a screenshot of the happy path.
 */
.jhr {
  display: grid; gap: .8rem;
  grid-template-columns: 128px minmax(0, 1fr) 168px;
  align-items: start;
  padding: .75rem; border: 1px solid var(--jhc-line); border-radius: 14px;
  background: #fff;
}
.jhr--nophoto { grid-template-columns: minmax(0, 1fr) 168px; }
.jhr__ph {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--jhc-sand);
}
.jhr__ph img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* The caption names WHICH room the photo is of — the join is by name and the
   reader is entitled to see the name it matched, not just the picture. */
.jhr__phn {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: .2rem .35rem; background: rgba(20, 14, 10, .72); color: #fff;
  font: 600 .62rem/1.3 "Assistant", sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jhr__body { min-inline-size: 0; }
.jhr__name { margin: 0 0 .35rem; font: 700 1rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink); }
.jhr__facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .28rem .4rem;
}
.jhr__facts li {
  font: 600 .74rem/1.3 "Assistant", sans-serif; color: var(--jhc-mute);
  background: var(--jhc-paper, #FBF6EF); border: 1px solid var(--jhc-line);
  border-radius: 999px; padding: .2rem .5rem;
}
.jhr__facts li.jhr__good { color: #1E6B37; background: #E8F5EC; border-color: #CBE7D5; }
.jhr__alt { margin: .4rem 0 0; font: 500 .72rem/1.4 "Assistant", sans-serif; color: var(--jhc-mute); }
.jhr__rail { display: grid; gap: .2rem; align-content: start; }
.jhr__total {
  font: 800 1.15rem/1.1 "Frank Ruhl Libre", serif; color: var(--jhc-coral-ink);
  font-variant-numeric: tabular-nums;
}
.jhr__ppn { font: 600 .76rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink); }
.jhr__tax { font: 500 .68rem/1.35 "Assistant", sans-serif; color: var(--jhc-mute); }
.jhr .ls-card__cta {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 100%; margin-block-start: .35rem; min-block-size: 40px;
  border-radius: 10px; font: 700 .85rem/1 "Assistant", sans-serif;
  background: var(--jhc-ink); color: #FFF6EA; border: 0; cursor: pointer;
  text-decoration: none;
}
.jhr .ls-card__cta:hover { background: #000; }
.jhr .ls-card__cta[disabled] { opacity: .6; cursor: progress; }
.jhr .jhc__nobook { margin-block-start: .35rem; font-size: .7rem; }

@media (max-width: 700px) {
  .jhr { grid-template-columns: 96px minmax(0, 1fr); }
  /*
   * The no-photo variant needs its own mobile template too. Without it the row
   * kept the DESKTOP two-column rule (body + a 168px rail), so on a phone the
   * facts were squeezed against one edge with half the card empty beside them —
   * visible only on the rows that happen to have no matched room photograph.
   */
  .jhr--nophoto { grid-template-columns: minmax(0, 1fr); }
  .jhr__rail { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: center; gap: .4rem .6rem; }
  .jhr__tax { grid-column: 1 / -1; }
  .jhr .ls-card__cta, .jhr .jhc__nobook { grid-column: 1 / -1; margin-block-start: .2rem; }
}

/* ── reviews ─────────────────────────────────────────────────────────────── */
.jhv__top { display: flex; align-items: center; gap: .55rem; margin-block-end: .8rem; }
.jhv__score {
  display: grid; place-items: center; min-inline-size: 46px; block-size: 38px;
  border-radius: 10px; background: var(--jhc-ink); color: #FFF6EA;
  font: 800 1.05rem/1 "Assistant", sans-serif; font-variant-numeric: tabular-nums;
}
.jhv__word { display: grid; }
.jhv__word b { font: 700 .9rem/1.2 "Assistant", sans-serif; color: var(--jhc-ink); }
.jhv__word small { font: 500 .75rem/1.3 "Assistant", sans-serif; color: var(--jhc-mute); }
.jhv__cats { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .6rem; }
/*
 * The score sits NEXT TO its label, not at the far end of the row.
 * `space-between` across a 770px column stranded "8.63" seven hundred pixels
 * from "Cleanliness", close enough to the following category to look like its
 * number. Structurally it was on the right line; it read as the wrong one.
 */
.jhv__cat-h {
  display: flex; justify-content: flex-start; align-items: baseline; gap: .45rem;
  font: 600 .82rem/1.3 "Assistant", sans-serif; color: var(--jhc-ink);
}
.jhv__cat-h b { font-variant-numeric: tabular-nums; color: var(--jhc-coral-ink); }
.jhv__bar {
  block-size: 6px; border-radius: 999px; background: var(--jhc-sand); overflow: hidden;
  margin-block-start: .25rem;
}
.jhv__bar i { display: block; block-size: 100%; background: var(--jhc-coral); }
.jhv__note { margin: .25rem 0 0; font: 500 .74rem/1.45 "Assistant", sans-serif; color: var(--jhc-mute); }
.jhv__lists { display: grid; gap: .7rem; }
@media (min-width: 620px) { .jhv__lists { grid-template-columns: 1fr 1fr; } }
.jhv__pc { padding: .6rem .7rem; border-radius: 12px; background: #E8F5EC; }
.jhv__pc--con { background: #FFF4E5; }
.jhv__pc h4 { margin: 0 0 .3rem; font: 700 .8rem/1.2 "Assistant", sans-serif; color: var(--jhc-ink); }
.jhv__pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .18rem; }
.jhv__pc li { font: 500 .78rem/1.4 "Assistant", sans-serif; color: var(--jhc-ink); }

/* ── map ─────────────────────────────────────────────────────────────────── */
/*
 * The viewport is a fixed pixel box because the tiles inside it are positioned
 * in tile pixels — the projection maths only lines the pin up with the map if
 * the tiles are drawn at their native 256px. The BOX scrolls on a narrow
 * screen rather than the tiles scaling, so the pin never drifts off the
 * building it marks.
 */
/*
 * `max-inline-size: 100%` is load-bearing, and so is `.jhd__s { min-inline-size: 0 }`
 * beside it. The tile viewport is a FIXED 768px box (three 256px tiles, which
 * is what makes the pin maths line up), and a grid item defaults to
 * `min-width: auto` — so on a 390px phone the section grew to 770px, took the
 * whole panel with it, and every room row and button inherited a 744px width
 * inside a 390px screen. The map is allowed to scroll inside itself; it is not
 * allowed to widen the page.
 */
.jhm { margin: .2rem 0 .8rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--jhc-line); position: relative; max-inline-size: 100%; }
.jhm__vp { position: relative; overflow: auto; background: var(--jhc-sand); max-inline-size: 100%; }
.jhm__t { position: absolute; display: block; }
.jhm__pin {
  position: absolute; inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--jhc-coral); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(20, 14, 10, .45);
  transform: translate(-50%, -50%); pointer-events: none;
}
[dir="rtl"] .jhm__pin { transform: translate(50%, -50%); }
.jhm__attr {
  position: absolute; inset-block-end: 0; inset-inline-end: 0;
  background: rgba(255, 255, 255, .82); color: #3A2A1C;
  font: 500 .6rem/1.4 "Assistant", sans-serif; padding: .1rem .3rem;
}

/* ── nearby landmarks ────────────────────────────────────────────────────── */
.jhp { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.jhp__i {
  display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto;
  gap: .45rem; align-items: baseline;
  font: 500 .82rem/1.4 "Assistant", sans-serif; color: var(--jhc-ink);
  padding: .3rem .1rem; border-block-end: 1px solid var(--jhc-line);
}
.jhp__i:last-child { border-block-end: 0; }
.jhp__ic { font-size: .9rem; }
.jhp__n { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jhp__d { font-weight: 700; color: var(--jhc-mute); font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
  .jhd__cols { grid-template-columns: minmax(0, 1fr) 300px; padding: 1.3rem 1.4rem 2rem; }
  .jhd__book { position: sticky; inset-block-start: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jhd, .jhd-scrim { animation: none; }
}

/* ==========================================================================
   WHAT THE DEARER RATE BUYS — the delta line in the rooms panel.
   Added 2026-09-02. See rateComparison() in janet_hotel_render.js.

   Built only from --jhc-* tokens, which janet_premium.css already re-points.
   A new token here would keep its light value under the dark theme, which is
   the exact mechanism that put cream text on a white card.
   ========================================================================== */
.jhr__delta {
  margin: .45rem 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .45rem;
  font: 500 .76rem/1.4 "Assistant", sans-serif; color: var(--jhc-ink-2);
  min-inline-size: 0;
}
/*
 * The delta is the ONE accented thing on the row after the total. It is a
 * price difference, so it takes the price colour — and it is text on the page
 * ground, never text on the accent, so no --on-sky question arises here.
 */
.jhr__delta-n { font-weight: 800; color: var(--jhc-coral-ink); white-space: nowrap; }
/*
 * Each named difference is a hairline chip, not a filled badge. Filled chips
 * beside a filled price make the row read as three competing accents; a
 * hairline keeps the price the loudest thing on it.
 */
.jhr__delta-w {
  padding: .1rem .42rem; border-radius: 999px;
  border: 1px solid var(--jhc-line); color: var(--jhc-ink-2);
  font-size: .72rem; white-space: nowrap;
}
/* The baseline row states its own status quietly and carries no accent. */
.jhr__delta--base { color: var(--jhc-mute); font-weight: 600; }