/**
 * Tier Rating badge (#1813) — port of toolkit assets/css/tier-rating.css.
 * Same class names and `--hrtk-tier-*` theming API so a site's toolkit
 * overrides carry over. Inherits the host typography on purpose. Per-tier
 * tints arrive as inline custom properties on the badge root
 * (common/property-card/tier-rating.ts tierTintStyle).
 */

.hrtk-tier {
  display: inline-flex;
  max-width: 100%;
  margin: 6px 0 2px;
  vertical-align: middle;
  line-height: 1;
}

.hrtk-tier__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 4px 10px 4px 9px;
  border: 1px solid var(--hrtk-tier-border, rgba(0, 0, 0, 0.14));
  border-radius: var(--hrtk-tier-radius, 999px);
  background: var(--hrtk-tier-bg, #f6f4ef);
  color: var(--hrtk-tier-fg, #1f1f1f);
  font: inherit;
  font-size: var(--hrtk-tier-font-size, 13px);
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Disclosure trigger (popover on, #1821) ────────────────────── */

button.hrtk-tier__badge {
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

button.hrtk-tier__badge:hover,
button.hrtk-tier__badge[aria-expanded="true"] {
  border-color: var(--hrtk-tier-fg, #1f1f1f);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

button.hrtk-tier__badge:focus {
  outline: none;
}

button.hrtk-tier__badge:focus-visible {
  outline: 2px solid var(--hrtk-tier-focus, #1f1f1f);
  outline-offset: 2px;
}

.hrtk-tier__info {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  opacity: 0.75;
}

.hrtk-tier__image {
  display: block;
  width: var(--hrtk-tier-image-size, 18px);
  height: var(--hrtk-tier-image-size, 18px);
  object-fit: contain;
}

.hrtk-tier__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--hrtk-tier-star, #c9a227);
  font-size: 0.92em;
  line-height: 1;
  letter-spacing: 0;
}

.hrtk-tier__star {
  display: inline-block;
}

.hrtk-tier__label {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
}

.hrtk-tier__label--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Image as the badge (display "image") ──────────────────────── */

/* The art carries the tier name: no pill, no border, just the image. */
.hrtk-tier--show-image .hrtk-tier__badge {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.hrtk-tier--show-image button.hrtk-tier__badge:hover,
.hrtk-tier--show-image button.hrtk-tier__badge[aria-expanded="true"] {
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.hrtk-tier--show-image button.hrtk-tier__badge:focus-visible {
  outline: 2px solid var(--hrtk-tier-focus, #fff);
  outline-offset: 3px;
  border-radius: 4px;
}

.hrtk-tier--show-image .hrtk-tier__image {
  width: auto;
  height: var(--hrtk-tier-image-badge-size, 64px);
  max-width: 100%;
}

/* ── Over the photo (placement "media") ────────────────────────── */

/* Top-left over the photo, the toolkit's spot (.hfse-property-groups:
   top/left 6px). The slideshow (legacy card) and the media frame (shared
   templates) are the positioned ancestors. Decorative: never steals the
   click from the card link. On the shared templates the favorites heart
   owns the top-left 32px, so the badge drops below it. The disclosure
   button (#1821) is the one thing inside it that takes the pointer: it
   never navigates (TierPopover.tsx onClick). */
.hrtk-tier--media {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  margin: 0;
  pointer-events: none;
}

.hrtk-tier--media button.hrtk-tier__badge {
  pointer-events: auto;
}

/* Inside the legacy card's labels row the badge flows as its first item
   (toolkit: .hfse-property-groups > .hrtk-tier--media). */
.hfse-property-groups > .hrtk-tier--media {
  position: static;
  margin: 0 5px 5px 0;
  vertical-align: top;
}

.hr-property-card .hr-pc-media > .hrtk-tier--media {
  z-index: 2;
}

.hr-property-card .hr-pc-card:has(.hr-pc-fav) .hr-pc-media > .hrtk-tier--media {
  top: 50px;
  left: 10px;
}

/* The larger size is for the art-only badge; a pill keeps its 18px image. */
.hrtk-tier--media.hrtk-tier--show-image .hrtk-tier__image {
  height: var(--hrtk-tier-image-badge-size, 72px);
}

@media (max-width: 480px) {
  .hrtk-tier--media.hrtk-tier--show-image .hrtk-tier__image {
    height: var(--hrtk-tier-image-badge-size-mobile, 56px);
  }
}

/* ── Under the title ───────────────────────────────────────────── */

/* Above the shared card's stretched link: property-card.css puts the link at
   z-index 1 and stacks interactive children at 2 instead of nesting them.
   Without this the disclosure button is unreachable by mouse (hover opens
   nothing, a click opens the property) and the static badge's tooltip never
   shows (#1825). The legacy card nests its body inside the link; harmless. */
.hfse-property-body > .hrtk-tier,
.hr-pc-body > .hrtk-tier {
  position: relative;
  z-index: 2;
  display: inline-flex;
  /* The skin layouts turn the body into a flex column or a grid
     (card-skin-css.ts), which would stretch this wrapper to the full body
     width and, now that it stacks above the link, leave a click-dead strip
     beside the pill. Shrink-wrap it like the chip (align-self precedent). */
  align-self: flex-start;
  justify-self: start;
}

/* ── Popover (#1821, body-portaled; port of the toolkit popover) ─── */

/* Lives in widget-core's elevated shadow root at <body> (or at <body>
   itself on a shadow-less mount), never inside the card: position:fixed
   against the viewport, placed by TierPopover.tsx. */
.hrtk-tier-popover {
  position: fixed;
  z-index: 100000;
  box-sizing: border-box;
  width: max-content;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  margin: 0;
  padding: 14px 16px 15px;
  border: 1px solid var(--hrtk-tier-popover-border, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  background: var(--hrtk-tier-popover-bg, #fff);
  color: var(--hrtk-tier-popover-fg, #1f1f1f);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  box-shadow: var(--hrtk-tier-popover-shadow, 0 10px 30px rgba(0, 0, 0, 0.16));
}

/* Resolved widget theme, stamped by TierPopover.tsx (the portal root is a
   detached shadow host, so :host theming would not reach the popover). */
.hrtk-tier-popover[data-hr-theme="dark"] {
  --hrtk-tier-popover-bg: #1d2024;
  --hrtk-tier-popover-fg: #f3f3f3;
  --hrtk-tier-popover-border: rgba(255, 255, 255, 0.12);
  --hrtk-tier-popover-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.hrtk-tier-popover p {
  margin: 0;
}

.hrtk-tier-popover__eyebrow {
  margin-bottom: 2px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

.hrtk-tier-popover__title {
  margin-bottom: 6px !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.hrtk-tier-popover__desc,
.hrtk-tier-popover__intro {
  margin-bottom: 8px !important;
}

.hrtk-tier-popover__intro {
  font-size: 13px;
  opacity: 0.85;
}

.hrtk-tier-popover__link {
  display: inline-block;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hrtk-tier-popover__link:hover,
.hrtk-tier-popover__link:focus-visible {
  text-decoration-thickness: 2px;
}

@media (max-width: 480px) {
  .hrtk-tier__badge {
    font-size: var(--hrtk-tier-font-size-mobile, 12px);
    padding: 3px 9px 3px 8px;
  }
}
/* Property Card Widget (#822 templates)
 * Self-contained card styling, driven by the `--hfse-*` vars
 * PropertyCardWidgetContent plumbs from the saved color settings. */
.hr-property-card {
  box-sizing: border-box;
  /* The stretched link (z-index: 1) and slideshow controls (z-index: 2) are
     implementation details — contain them so they never compete with host
     overlays outside the card (searchbar dropdowns, sticky headers on
     embedding pages). */
  isolation: isolate;
  /* Raise via customCss to let the card grow past the mock proportions; the
     width setting on the wrapper still caps it from above. */
  --hr-pc-max-width: 420px;
  --hr-pc-radius: 12px;
}

.hr-property-card *,
.hr-property-card *::before,
.hr-property-card *::after {
  box-sizing: border-box;
}

/* ── Card shell ─────────────────────────────────────────────── */

.hr-property-card .hr-pc-card {
  display: block;
  width: 100%;
  max-width: var(--hr-pc-max-width);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--hfse-foreground);
  background: var(--hfse-card-bg);
  border: 1px solid var(--hfse-border);
  border-radius: var(--hr-pc-radius);
  box-shadow: 0 1px 3px rgba(20, 24, 18, 0.07), 0 8px 22px rgba(20, 24, 18, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hr-property-card .hr-pc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(20, 24, 18, 0.09), 0 14px 30px rgba(20, 24, 18, 0.1);
}

/* Stretched link: the whole card is one click target, while the slideshow
   buttons stay valid HTML by stacking ABOVE it (z-index 2) instead of nesting
   inside it. */
.hr-property-card .hr-pc-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--hr-pc-radius);
}

/* Inset ring: the card clips at its border (overflow: hidden), so a positive
   outline-offset on the inset-0 link would be entirely clipped away. */
.hr-property-card .hr-pc-card__link:focus-visible {
  outline: 2px solid var(--hfse-accent);
  outline-offset: -2px;
  border-radius: var(--hr-pc-radius);
}

/* Visually-hidden accessible name for the stretched link. */
.hr-property-card .hr-pc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Media ──────────────────────────────────────────────────── */

.hr-property-card .hr-pc-media {
  position: relative;
  overflow: hidden;
  background: var(--hfse-border);
}

.hr-property-card .hr-pc-media__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hr-property-card .hr-pc-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.hr-property-card .hr-pc-media__img.is-active {
  opacity: 1;
}

.hr-property-card .hr-pc-card:hover .hr-pc-media__img.is-active {
  transform: scale(1.04);
}

.hr-property-card .hr-pc-media__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  /* Hidden means inert: while invisible the arrows must not sit as touch
     targets above the stretched link. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Keyed off the card root, not the media: the stretched link overlays the
   media, so pointer hover lands on the link (a sibling) and .hr-pc-media:hover
   would never fire. */
.hr-property-card .hr-pc-card:hover .hr-pc-media__nav,
.hr-property-card .hr-pc-media__nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* No hover to reveal them on touch devices — keep the arrows always visible
   and tappable there. */
@media (hover: none) {
  .hr-property-card .hr-pc-media__nav {
    opacity: 1;
    pointer-events: auto;
  }
}

.hr-property-card .hr-pc-media__nav:focus-visible,
.hr-property-card .hr-pc-media__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hr-property-card .hr-pc-media__nav::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #1c2024;
  border-right: 2px solid #1c2024;
}

.hr-property-card .hr-pc-media__nav--prev {
  left: 8px;
}

.hr-property-card .hr-pc-media__nav--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.hr-property-card .hr-pc-media__nav--next {
  right: 8px;
}

.hr-property-card .hr-pc-media__nav--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.hr-property-card .hr-pc-media__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  /* Hard single row: dot count is windowed in CardMedia (MAX_DOTS), and any
     residual overflow at extreme narrow widths clips instead of wrapping into
     rows that cover the nav arrows. The window centers the active dot, so the
     clipped edges are never the current slide's indicator. */
  flex-wrap: nowrap;
  overflow: hidden;
  justify-content: center;
  z-index: 2;
  /* The wrapper spans the card's full width — only the dots themselves may
     take clicks, everything between falls through to the stretched link. */
  pointer-events: none;
}

/* 24px minimum touch target; the visible 6px dot is the ::before. flex:none
   so many slides wrap instead of shrinking targets below the minimum. */
.hr-property-card .hr-pc-media__dot {
  flex: none;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.hr-property-card .hr-pc-media__dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

.hr-property-card .hr-pc-media__dot.is-active::before {
  background: #fff;
}

.hr-property-card .hr-pc-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  /* Decorative: never steal clicks from the stretched link underneath. */
  pointer-events: none;
  background: rgba(255, 255, 255, 0.92);
  color: #1c2024;
  font-size: var(--hr-pc-fs-chip, 0.7rem);
  font-weight: 600;
  line-height: 1.5;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  /* Bounded so the overlay dots' reserved zone (below) is always sufficient. */
  max-width: 42%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Text-only card (no photos / showImage off): the chip moves into the body,
   sitting in the flow above the heading instead of floating over a photo. */
.hr-property-card .hr-pc-body .hr-pc-chip {
  position: static;
  display: inline-block;
  margin-bottom: 0.4rem;
  background: var(--hfse-border);
  color: var(--hfse-card-fg);
}

/* Card tags (#1812): the pills wrap where the single chip sits. The group
   takes the chip's corner; each pill stays a .hr-pc-chip (static inside the
   group) so the chip rules above keep styling it, and the inline style carries
   the operator's colours / radius / size (toolkit CardTags::css). */
.hr-property-card .hr-pc-chips {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: calc(100% - 20px);
}
.hr-property-card .hr-pc-chips .hr-pc-chip {
  position: static;
  max-width: 100%;
}
.hr-property-card .hr-pc-chip--tag {
  border: 1px solid;
  padding: 2px 10px;
  line-height: 1.5;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.hr-property-card .hr-pc-body .hr-pc-chips {
  position: static;
  justify-content: flex-start;
  margin-bottom: 0.4rem;
  max-width: none;
}
.hr-property-card .hr-pc-body .hr-pc-chips .hr-pc-chip {
  margin-bottom: 0;
}

/* ── Body ───────────────────────────────────────────────────── */

.hr-property-card .hr-pc-body {
  padding: 0.8rem 0.9rem 0.9rem;
}

.hr-property-card .hr-pc-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.hr-property-card .hr-pc-title {
  margin: 0;
  font-size: var(--hr-pc-fs-title, 1rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--hfse-foreground);
}

.hr-property-card .hr-pc-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: none;
  font-size: var(--hr-pc-fs-location, 0.78rem);
  color: var(--hfse-accent);
}

.hr-property-card .hr-pc-rating__count {
  color: var(--hfse-muted-foreground);
}

.hr-property-card .hr-pc-location {
  margin: 0.12rem 0 0.45rem;
  font-size: var(--hr-pc-fs-location, 0.78rem);
  color: var(--hfse-muted-foreground);
}

/* Central excerpts run to a full paragraph; cap the card at the mock's blurb
   height so a long description can't dwarf the rest of the card. */
.hr-property-card .hr-pc-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0.1rem 0 0.55rem;
  font-size: var(--hr-pc-fs-excerpt, 0.8rem);
  line-height: 1.45;
  color: var(--hfse-card-fg);
}

.hr-property-card .hr-pc-price {
  margin: 0 0 0.55rem;
  font-size: var(--hr-pc-fs-price, 0.86rem);
  color: var(--hfse-card-fg);
}

/* ── Grid-mount extras (explorer bridge): quote pricing + favorites ── */

/* Multi-line quote price: the container may be a div holding line + note. */
.hr-property-card .hr-pc-price--quote .hr-pc-price__line {
  margin: 0;
}

.hr-property-card .hr-pc-price__strike {
  margin-right: 0.25em;
  opacity: 0.65;
}

.hr-property-card .hr-pc-price__sep {
  opacity: 0.6;
}

.hr-property-card .hr-pc-price__total {
  white-space: nowrap;
}

.hr-property-card .hr-pc-price__note {
  margin: 0.15rem 0 0;
  font-size: 0.85em;
  opacity: 0.7;
}

.hr-property-card .hr-pc-price--loading svg {
  display: block;
}

/* Muted states where a price would be: a failed full-price quote ("View Full
   Price") and "No dates available" (toolkit lowest-rate-availability, when
   the property has no bookable nights). */
.hr-property-card .hr-pc-price--failed,
.hr-property-card .hr-pc-price--unavailable {
  opacity: 0.75;
}

/* Favorites heart: top-LEFT corner (the type chip owns the top-right).
   Stacks with the slideshow controls above the stretched link. */
.hr-property-card .hr-pc-fav {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #1c2024;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.hr-property-card .hr-pc-fav:hover {
  transform: scale(1.08);
  background: #fff;
}

.hr-property-card .hr-pc-fav.is-active {
  color: #e0245e;
}

.hr-property-card .hr-pc-fav:focus-visible {
  outline: 2px solid var(--hfse-accent);
  outline-offset: 2px;
}

.hr-property-card .hr-pc-price b {
  font-size: 1.19em;
  color: var(--hfse-foreground);
}

.hr-property-card .hr-pc-price__unit {
  color: var(--hfse-muted-foreground);
}

.hr-property-card .hr-pc-pricerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.hr-property-card .hr-pc-viewlink {
  flex: none;
  margin-bottom: 0.55rem;
  /* Deliberately not knob-driven (#849), but px, not rem — rem resolves
     against the HOST document root, the exact dependency #824 removed. */
  font-size: 13px;
  font-weight: 600;
  color: var(--hfse-accent);
}

.hr-property-card .hr-pc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--hfse-border);
  font-size: var(--hr-pc-fs-meta, 0.78rem);
  color: var(--hfse-card-fg);
}

.hr-property-card .hr-pc-meta span + span::before {
  content: '·';
  margin-right: 0.45rem;
  color: var(--hfse-muted-foreground);
}

/* ── Element order & alignment (#825) ──────────────────────── */

/* Rating on its own row: only rendered once it is moved away from the title
   (adjacent, the pair shares .hr-pc-heading). */
.hr-property-card .hr-pc-ratingrow {
  margin: 0.15rem 0 0.4rem;
  line-height: 1;
}

/* Explicit alignment; `default` emits no class, so an untouched card keeps
   each template's own layout. Text nodes align their text. */
.hr-property-card .hr-pc-al-left { text-align: left; }
.hr-property-card .hr-pc-al-center { text-align: center; }
.hr-property-card .hr-pc-al-right { text-align: right; }
.hr-property-card .hr-pc-al-justify { text-align: justify; }

/* The flex rows (heading, meta, Detailed's pricerow) place their items
   instead — text-align cannot move flex items. `justify` spreads a pair to
   the row's edges, which is what the heading and pricerow do by default. */
.hr-property-card .hr-pc-heading.hr-pc-al-left,
.hr-property-card .hr-pc-meta.hr-pc-al-left,
.hr-property-card .hr-pc-pricerow.hr-pc-al-left {
  justify-content: flex-start;
}

.hr-property-card .hr-pc-heading.hr-pc-al-center,
.hr-property-card .hr-pc-meta.hr-pc-al-center,
.hr-property-card .hr-pc-pricerow.hr-pc-al-center {
  justify-content: center;
}

.hr-property-card .hr-pc-heading.hr-pc-al-right,
.hr-property-card .hr-pc-meta.hr-pc-al-right,
.hr-property-card .hr-pc-pricerow.hr-pc-al-right {
  justify-content: flex-end;
}

.hr-property-card .hr-pc-heading.hr-pc-al-justify,
.hr-property-card .hr-pc-meta.hr-pc-al-justify,
.hr-property-card .hr-pc-pricerow.hr-pc-al-justify {
  justify-content: space-between;
}

/* ── Overlay template ───────────────────────────────────────── */

.hr-property-card .hr-pc-scrim {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  /* Sits at the stretched link's level in DOM order after it — let clicks fall
     through to the link. */
  pointer-events: none;
  padding: 2.2rem 0.9rem 0.8rem;
  color: #fff;
}

.hr-property-card .hr-pc-scrim--soft {
  background: linear-gradient(transparent, rgba(10, 14, 12, 0.78));
}

.hr-property-card .hr-pc-scrim--strong {
  background: linear-gradient(transparent, rgba(10, 14, 12, 0.94));
}

.hr-property-card .hr-pc-scrim .hr-pc-title {
  font-size: calc(var(--hr-pc-fs-title, 1rem) * 1.02);
  color: #fff;
}

.hr-property-card .hr-pc-scrim .hr-pc-price {
  margin: 0.1rem 0 0;
  font-size: calc(var(--hr-pc-fs-price, 0.86rem) * 0.965);
  color: rgba(255, 255, 255, 0.95);
}

.hr-property-card .hr-pc-scrim .hr-pc-price b,
.hr-property-card .hr-pc-scrim .hr-pc-price__unit {
  color: inherit;
}

.hr-property-card .hr-pc-scrim .hr-pc-price b {
  font-size: 1.14em;
}

.hr-property-card .hr-pc-scrim .hr-pc-meta {
  display: block;
  margin: 0.3rem 0 0;
  padding-top: 0;
  border-top: 0;
  font-size: calc(var(--hr-pc-fs-meta, 0.78rem) * 0.95);
  color: rgba(255, 255, 255, 0.85);
}

/* The dots sit under the scrim text on the overlay template. Offsets are
   smaller than the visual position suggests: the 24px hitboxes carry ~9px of
   padding around each 6px dot. padding-right reserves the top-right corner for
   the type chip (capped at 42% width) so wrapped dot rows never paint under it. */
.hr-property-card .hr-pc-card--overlay .hr-pc-media__dots {
  bottom: auto;
  top: 2px;
  justify-content: flex-start;
  left: 4px;
  right: 4px;
  padding-right: 46%;
}

/* ── Skeleton ───────────────────────────────────────────────── */

.hr-property-card .hr-pc-skeleton__media,
.hr-property-card .hr-pc-skeleton__line {
  background: var(--hfse-border);
  animation: hr-pc-pulse 1.6s ease-in-out infinite;
}

.hr-property-card .hr-pc-skeleton__line {
  height: 0.9rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.hr-property-card .hr-pc-skeleton__line--title {
  height: 1.1rem;
  width: 70%;
}

.hr-property-card .hr-pc-skeleton__line--short {
  width: 45%;
}

.hr-property-card .hr-pc-skeleton__line--price {
  width: 55%;
  margin-bottom: 0;
}

@keyframes hr-pc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .hr-property-card .hr-pc-card,
  .hr-property-card .hr-pc-media__img,
  .hr-property-card .hr-pc-media__nav {
    transition: none;
  }

  .hr-property-card .hr-pc-card:hover {
    transform: none;
  }

  .hr-property-card .hr-pc-card:hover .hr-pc-media__img.is-active {
    transform: none;
  }

  .hr-property-card .hr-pc-skeleton__media,
  .hr-property-card .hr-pc-skeleton__line {
    animation: none;
  }
}
/* ==========================================================================
   Shared explorer-look property card (TemplateExplorer)
   ==========================================================================
   Extracted verbatim from widgets/explorer/explorer.css so every consumer of
   the shared card (explorer, related-properties, property-card) can pull in
   just the card styles instead of the whole explorer stylesheet. Internal rule
   order is preserved: hk-* base utilities, then the card block, then the
   rating block (#2516), which intentionally overrides earlier card rules.
   explorer.css @imports this file at its top, so explorer output order keeps
   the base utilities first, exactly where they originally sat. */

/* UIKit-like base classes (hk-*) used by property cards */

.hk-flex { display: flex; }

.hk-flex-column { flex-direction: column; }

.hk-flex-between { justify-content: space-between; }

.hk-flex-middle { align-items: center; }

.hk-flex-top { align-items: flex-start; }

.hk-flex-center { justify-content: center; }

.hk-flex-auto { flex: 1 1 auto; min-width: 0; }

.hk-flex-none { flex: none; }

.hk-card {
  position: relative;
  box-sizing: border-box;
  transition: box-shadow 0.1s ease-in-out;
}

.hk-card-default {
  background: var(--hfse-card-bg, #fff);
  color: var(--hfse-card-fg, #666);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.hk-card-hover:hover {
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.hk-card-small .hk-card-body {
  padding: 15px 20px;
}

.hk-card-body {
  flex: 1 1 auto;
}

.hk-card-media-top {
  overflow: hidden;
}

.hk-card-media-top img {
  width: 100%;
  display: block;
}

.hk-link-toggle {
  text-decoration: none;
  color: inherit;
}

.hk-link-toggle:hover {
  text-decoration: none;
  color: inherit;
}

.hk-h5 {
  margin: 0 0 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
}

.hk-margin-small-top { margin-top: 10px; }

.hk-margin-remove-first-child > :first-child { margin-top: 0; }

.hk-margin-small-bottom { margin-bottom: 10px; }

.hk-text-small { font-size: 0.875rem; }

.hk-position-relative { position: relative; }

.hk-position-center-left {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.hk-position-center-right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.hk-position-small {
  margin: 10px;
}

.hk-position-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.hk-visible-toggle:not(:hover) .hk-hidden-hover {
  opacity: 0;
}

.hk-hidden-hover {
  transition: opacity 0.15s ease;
  cursor: pointer;
}

/* Dot navigation */

.hk-dotnav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 6px;
}

.hk-dotnav > li > a,
.hk-dotnav > li > button {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  /* background-color, not the shorthand: the shorthand would reset the card
     dot's background-clip (#1865, below). */
  background-color: rgba(255, 255, 255, 0.5);
  text-indent: -9999px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* The card dot's 24px touch target is this transparent border (#1865, sized
   by the card rule below). It sits at the old rule's specificity so customer
   CSS that gives the dot its own border (ring dots) still wins. */

.hk-dotnav > li > button {
  border: 6px solid transparent;
}

.hk-dotnav > li.hk-active > a,
.hk-dotnav > li:hover > a,
.hk-dotnav > li.hk-active > button,
.hk-dotnav > li:hover > button {
  background-color: #fff;
}

/* Slideshow nav arrows */

.hfse-property-slideshow-prev-btn,
.hfse-property-slideshow-next-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  z-index: 5;
}

.hfse-property-slideshow-prev-btn::before {
  content: '';
  width: 8px;
  height: 8px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  margin-left: 2px;
}

.hfse-property-slideshow-next-btn::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
  margin-right: 2px;
}

/* Explorer-specific dialog card overrides */

.hfse-form-modal {
  max-width: 520px;
}

.hfse-form-modal .hk-modal-body {
  overflow-y: auto;
}

/* ==========================================================================
   Property Card
   ========================================================================== */

.hfse-property-container {
  width: 100%;
  min-width: 0;
}

.hfse-property-card {
  width: 100%;
  height: 100%;
}

.hfse-property-body {
  flex-grow: 1;
}

.hfse-property-meta {
  padding: 0 20px;
}

.hfse-property-meta-primary {
  display: flex;
  margin-top: 10px;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.hfse-property-meta-primary .hfse-property-locations,
.hfse-property-meta-primary .hfse-property-types {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  max-width: 80%;
  font-size: 13px;
  line-height: 16px;
  box-sizing: border-box;
  padding: 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hfse-property-meta-primary svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.hfse-property-meta-primary .hfse-property-locations {
  padding-right: 10px;
}

.hfse-property-meta-secondary {
  display: flex;
  margin-top: 10px;
  flex-wrap: nowrap;
  padding: 10px 0 15px;
  border-top: 1px solid var(--hfse-border, #eee);
  justify-content: space-between;
}

.hfse-property-meta-secondary .hfse-property-guests,
.hfse-property-meta-secondary .hfse-property-bedrooms,
.hfse-property-meta-secondary .hfse-property-bathrooms {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  font-size: 16px;
  line-height: 20px;
  box-sizing: border-box;
  padding: 4px 0;
}

.hfse-property-meta-secondary svg {
  flex-shrink: 0;
  opacity: 0.6;
  width: 20px;
  height: 20px;
}

.hfse-property-container {
  position: relative;
}

/* 24px touch target, 12px dot (#1865, WCAG 2.5.8). The dots sit inside the
   card's link, so spacing alone can never pass: each button is a 24px box — a
   6px transparent border (the `.hk-dotnav > li > button` rule) around the 12px
   dot, painted only inside the border (background-clip). The dot stays the button, so customer CSS setting
   `background-color` on `.hk-dotnav button` keeps working. Gap 0 puts dot
   centres 24px apart (18px before); the 6px margin keeps the dot itself
   where it was, 12px above the photo's edge. card-skin-css re-sizes the
   border with the skin's dot size so the box never drops under 24px. */

.hfse-property-slideshow-dotnav {
  margin-bottom: 6px;
  gap: 0;
}

.hfse-property-container .hk-dotnav > * > * {
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  /* !important: a `background` shorthand in customer CSS (or a copy of the old
     dot rules) would reset the clip and paint the whole 24px box. */
  background-clip: padding-box !important;
  border-radius: 50%;
}

/* Card tags (#1812, toolkit CardTags::css). The pills take the type slot,
   which explorer.css clips to one 24px line — the tag slot lifts that so the
   pills wrap; own-row (default) puts location and tags on two left-aligned
   rows, the toolkit's layout. Colours / radius / size ride inline per pill. */

.hfse-property-meta-primary .hfse-property-tags {
  height: auto;
  overflow: visible;
  white-space: normal;
  flex-wrap: wrap;
  gap: 6px;
  text-transform: none;
}

.hfse-property-meta-primary.hfse-card-tags-own-row {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px 0;
}

.hfse-property-meta-primary.hfse-card-tags-own-row .hfse-property-locations {
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 0;
}

.hfse-property-meta-primary.hfse-card-tags-own-row .hfse-property-tags {
  flex: 0 0 100%;
  max-width: 100%;
  justify-content: flex-start;
  margin-bottom: 4px;
}

.hfse-card-tag {
  display: inline-block;
  border: 1px solid;
  padding: 2px 10px;
  line-height: 1.5;
  white-space: nowrap;
}

/* Groups / Labels */

.hfse-property-groups, .hfse-property-favorite-toggle-btn {
  z-index: 10;
  position: absolute;
  width: auto !important;
}

.hfse-property-groups {
  top: 6px;
  left: 6px;
}

.hfse-property-group {
  color: #fff;
  padding: 3px 5px;
  margin: 0 5px 5px 0;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Label Designer badges (#1069): inline style carries the cascade; this only
   lays out the optional icon. Unstyled legacy badge above is untouched. */

.hfse-property-group.hfse-label-styled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: top;
}

.hfse-label-icon {
  width: 1em;
  height: 1em;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Overlay groups live inside .hk-card-media-top, whose `img { width: 100% }`
   (the photo rule) would stretch an icon <img> across its badge; the
   badge-scoped selector out-ranks it so icons stay 1em in both placements. */

.hfse-property-group .hfse-label-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
}

/* Icon recolor (#1370 slice 2; toolkit CssGenerator::build_icon_rule with
   recolor_icon): an .svg icon becomes a mask over currentColor, so it takes
   the badge text colour — set or auto-contrast. The mask URL is inline per
   badge (TemplateExplorer iconMaskStyle); the geometry lives here. */

.hfse-label-icon-tint {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Icon-only (toolkit icon_only, font-size:0 on the badge). The text stays in
   the DOM — it is the card link's accessible name — but paints nothing; the
   absolute box leaves the inline-flex flow, so no gap is left beside the icon. */

.hfse-label-icon-only {
  position: relative;
}

.hfse-label-icon-only-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Label Designer overlay placement (#1370 slice 1; toolkit CssGenerator
   position / offset_x / offset_y). Overlay badges leave the top-left row and
   pin to a photo corner. The layer lives INSIDE .hfse-property-slideshow
   (position:relative with an explicit aspect-ratio — the box the toolkit's
   labels-frontend.js shim moves its row into), so bottom corners anchor to
   the photo, not to the card. Insets are inline per group (corner + offset);
   pointer-events:none keeps the slideshow arrows and dots clickable. */

.hfse-property-labels-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
}

.hfse-label-overlay-group {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 5px;
}

.hfse-label-overlay-top-right,
.hfse-label-overlay-bottom-right {
  justify-content: flex-end;
}

.hfse-label-overlay-bottom-left,
.hfse-label-overlay-bottom-right {
  flex-wrap: wrap-reverse;
}

/* The row's per-badge margin (0 5px 5px 0) would push right/bottom-anchored
   badges 5px off their offset; the group gap spaces them instead. */

.hfse-label-overlay-group .hfse-property-group {
  margin: 0;
}

/* Favorite button */

.hfse-property-favorite-toggle-btn {
  top: 10px;
  right: 10px;
}

.hfse-property-favorite-toggle-btn svg {
  color: white;
}

.hfse-property-favorite-toggle-btn svg > path {
  fill: white;
}

.hfse-property-favorite-toggle-btn.favorite svg {
  color: red;
}

.hfse-property-favorite-toggle-btn.favorite svg > * {
  fill: red;
}

/* Rating */

.hfse-property-rating {
  line-height: 20px;
}

.hfse-property-rating-icon polygon {
  fill: var(--hfse-foreground, #333);
  stroke: var(--hfse-foreground, #333) !important;
}

/* Price */

.hfse-property-price-container {
  font-size: 14px;
  color: var(--hfse-card-fg, #666);
}

.hfse-property-price strong {
  font-size: 16px;
  color: var(--hfse-foreground, #333);
}

.hfse-property-price-sep {
  margin: 0 2px;
}

.hfse-property-price-total {
  font-size: 13px;
}

.hfse-property-tax-note {
  font-size: 12px;
  color: var(--hfse-muted-foreground, #999);
}

.hfse-property-price del {
  color: var(--hfse-muted-foreground, #999);
  font-size: 13px;
  margin-right: 4px;
}

.hfse-property-price-loading svg {
  display: inline-block;
  vertical-align: middle;
}

/* "No dates available" (toolkit lowest-rate-availability): a label where a
   price would be, when the property has no bookable nights. */

.hfse-property-price-unavailable {
  opacity: 0.75;
}

.full-price-failed-text {
  color: var(--hfse-muted-foreground, #717171);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
}

.hfse-property-subtitle {
  font-size: 13px;
  color: var(--hfse-muted-foreground, #999);
  margin-top: 4px;
}

/* Favorite Button */

.hfse-property-container {
  position: relative;
}

.hfse-property-favorite-toggle-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: transform 0.15s ease;
}

.hfse-property-favorite-toggle-btn:hover {
  transform: scale(1.15);
}

.hfse-property-favorite-toggle-btn.favorite {
  color: red;
}

.hfse-property-favorite-toggle-btn svg {
  display: block;
}

/* Slideshow */

.hfse-property-slideshow {
  overflow: hidden;
}

.hk-slideshow-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hfse-property-slideshow-item {
  list-style: none;
}

/* ---------- Property card rating (central #2516) ---------- */

.hfse-property-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 0.8125rem;
    color: var(--hfse-foreground, #333);
    white-space: nowrap;
}

.hfse-property-rating svg {
    color: #f5a623;
}

.hfse-property-rating-avg {
    font-weight: 700;
}

.hfse-property-rating-count {
    color: var(--hfse-muted-foreground, #999);
}

/* Card rating placement "location" (card.ratingPlacement): its own line after
   the location row, so it drops the title-row's left margin and stands on a
   full-width line. */

.hfse-property-rating-location {
    display: flex;
    margin-left: 0;
    padding: 2px 0;
}