/* 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);
}

/* ── 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: rgba(255, 255, 255, 0.5);
  text-indent: -9999px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
}

.hk-dotnav > li.hk-active > a,
.hk-dotnav > li:hover > a,
.hk-dotnav > li.hk-active > button,
.hk-dotnav > li:hover > button {
  background: #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;
}

.hfse-property-slideshow-dotnav {
  margin-bottom: 12px;
}

.hfse-property-container .hk-dotnav > * > * {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* 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);
}