/* =============================================================
   Rentz Property Detail — pixel-rebuild of template
   Cream background · Ink text · DM Sans · Orange & Teal accents
   ============================================================= */

:root {
  --rpd-ink: #15161C;
  --rpd-muted: #6A6B73;
  --rpd-hair: #ECE9E0;
  --rpd-cream: #FFFFFF;   /* template v2: page background is pure white; warm cream tones now live only in inset surfaces (--rpd-soft) */
  --rpd-soft: #FAF7EF;
  --rpd-orange: #EE6B2D;
  --rpd-orange-deep: #a8451a;
  --rpd-teal: #2FB5B5;
  --rpd-teal-deep: #1a6b76;
}

/* Paint the page with cream and DM Sans. Scope hard so it overrides Porto. */
body.single-product { background: var(--rpd-cream) !important; }
body.single-product #main, body.single-product .main-content { background: transparent !important; }

#rentz-pd-root,
#rentz-pd-root * {
  box-sizing: border-box;
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
#rentz-pd-root {
  color: var(--rpd-ink);
  /* Don't impose our own container — Porto wraps this in .container (1140px
     desktop, fluid below) and our root just fills it. That makes the property
     detail page exactly as wide as every other page on the site (listings,
     compound, /all-properties/, etc.) without any double-padding.
     Only vertical padding stays, to space the content above/below the hero. */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 32px 0 64px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}
#rentz-pd-root a { color: inherit; }
#rentz-pd-root img { max-width: 100%; display: block; }
#rentz-pd-root .rpd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.rpd-hairline { height: 1px; background: var(--rpd-hair); margin: 40px 0; }
.rpd-hairline-lg { margin: 56px 0; }

.rpd-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rpd-muted);
}
.rpd-eyebrow-muted { color: var(--rpd-muted); }

.rpd-h1 {
  font-size: 44px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--rpd-ink);
  margin: 0;
  max-width: 820px;
  text-wrap: pretty;
}
.rpd-h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 10px 0 24px;
  color: var(--rpd-ink);
}

.rpd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.rpd-chip-ink { background: var(--rpd-ink); color: #fff; border: 1px solid var(--rpd-ink); }

.rpd-icon { display: inline-flex; }
.rpd-icon-orange { color: var(--rpd-orange); }

/* ============ TITLE BLOCK ============ */
.rpd-title { margin-bottom: 10px; }
.rpd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--rpd-muted);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.rpd-breadcrumb a { color: var(--rpd-muted); text-decoration: none; }
.rpd-breadcrumb a:hover { color: var(--rpd-ink); }
.rpd-bc-sep { opacity: .4; }
.rpd-bc-current { color: var(--rpd-ink); font-weight: 500; }

.rpd-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.rpd-title-main { flex: 1; min-width: 0; }
.rpd-chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rpd-loc-inline {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--rpd-muted);
}
.rpd-loc-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,.2);
  cursor: pointer;
  color: var(--rpd-muted);
}
.rpd-loc-link:hover { color: var(--rpd-ink); }
.rpd-loc-dot { opacity: .4; }

.rpd-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Tighter to the H1 above; gallery below adds its own 48px breathing room */
  margin-top: 10px;
  font-size: 14px;
  color: var(--rpd-ink);
  flex-wrap: wrap;
}
.rpd-stat { display: inline-flex; align-items: center; gap: 6px; }
.rpd-stat-dot {
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--rpd-hair);
}
.rpd-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--rpd-muted);
}

.rpd-title-side {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rpd-rating-pill,
.rpd-title-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--rpd-hair);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--rpd-ink);
  cursor: pointer;
  font-family: inherit;
}
.rpd-title-btn:hover { border-color: var(--rpd-ink); }

/* Save (wishlist) button — when active, the heart fills red and the label
   reads "Saved". Note: we use a dedicated .rpd-save-icon span so the JS can
   tag JUST the icon's saved state without mutating the label text (which
   was causing the "Save → Saved → Savedd" double-replace bug). */
.rpd-save-btn .rpd-save-icon { display: inline-flex; color: currentColor; }
.rpd-save-btn.is-saved {
  border-color: rgba(220, 38, 38, .35) !important;
  background: rgba(220, 38, 38, .04);
}
.rpd-save-btn.is-saved .rpd-save-icon svg {
  fill: #dc2626 !important;
  stroke: #dc2626 !important;
}
.rpd-save-btn.is-saved .rpd-btn-label { color: #b91c1c; font-weight: 600; }

/* ---- Compare button (lives in title-side) ----
   The .igx-prop-compare-btn class from the ignitix-compare-properties plugin
   forces a tiny 28×28 orange icon-only style intended for the V1b card. We
   need our title-button look — pill shape, hairline border, ink text. Reset
   every property that the plugin's rule sets, with !important since both
   rules share specificity (one class). */
.rpd-title-btn.igx-prop-compare-btn,
.rpd-title-btn.igx-prop-compare-btn:hover {
  width: auto !important;
  height: auto !important;
  background: #fff !important;
  color: var(--rpd-ink) !important;
  border: 1px solid var(--rpd-hair) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}
.rpd-title-btn.igx-prop-compare-btn:hover {
  border-color: var(--rpd-ink) !important;
}
/* "Added to compare" state — the plugin toggles .igx-prop-compare-selected */
.rpd-title-btn.igx-prop-compare-btn.igx-prop-compare-selected {
  background: rgba(47, 181, 181, .08) !important;
  border-color: rgba(47, 181, 181, .35) !important;
  color: var(--rpd-teal) !important;
}
.rpd-title-btn.igx-prop-compare-btn .rpd-btn-label {
  /* Ensure the label text inherits the right colour even when Porto pins it,
     AND override the line-height: 1 the V1b card plugin sets on
     .igx-card-v1b__compare-label — which was making this button shorter
     than its Share / Save siblings. */
  color: inherit !important;
  line-height: 1.5 !important;
}
.rpd-rating-star { color: #d1cfc6; display: flex; }
.rpd-rating-num { font-weight: 600; }
.rpd-rating-cnt { color: var(--rpd-muted); }

/* When the property actually has reviews, the pill becomes an anchor that
   deep-links to the reviews section. We also paint the star in the brand
   orange — matching .rr-stars-orange inside the reviews section itself —
   so the rating reads as "filled" / "active". */
a.rpd-rating-pill {
  text-decoration: none !important;
  color: var(--rpd-ink) !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
a.rpd-rating-pill:hover { border-color: var(--rpd-ink); background: var(--rpd-soft); }
.rpd-rating-pill.has-reviews .rpd-rating-star {
  color: var(--rpd-orange);
}
.rpd-rating-pill.has-reviews .rpd-rating-star svg { fill: var(--rpd-orange); }

/* ============ GALLERY ============ */
.rpd-gallery { margin-top: 48px; position: relative; }
.rpd-gallery-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-rows: 232px 232px;
  gap: 8px;
  height: 472px;
  border-radius: 6px;
  overflow: hidden;
}
/* Gallery tiles are <button> elements (so they're keyboard-focusable click
   targets). Reset all default button styling. */
.rpd-g-tile {
  position: relative;
  background: #d8d5cb;
  overflow: hidden;
  display: block;
  padding: 0;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
}
.rpd-g-tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.rpd-g-tile:hover img { transform: scale(1.03); }
.rpd-g-hero { grid-column: 1 / 2; grid-row: 1 / 3; }
.rpd-g-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #5a5648;
  background-image: repeating-linear-gradient(135deg, #e8e4d8 0 8px, #dcd7c8 8px 16px);
}
/* Counter pill on the hero (bottom-left): "01 / N" */
.rpd-g-code {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: .06em;
  pointer-events: none;
}
/* Show-all button — pixel-matched to template (white pill, ink border + shadow) */
.rpd-g-showall {
  position: absolute;
  right: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--rpd-ink);
  border: 1px solid var(--rpd-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  z-index: 3;
  transition: background .15s ease, color .15s ease;
}
.rpd-g-showall:hover { background: var(--rpd-ink); color: #fff; }
.rpd-g-showall svg { width: 14px; height: 14px; }

.rpd-gallery-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.rpd-g-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--rpd-ink);
  border: 1px solid var(--rpd-hair);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.rpd-g-tab:hover { border-color: var(--rpd-ink); }
.rpd-g-tab.is-active { background: var(--rpd-ink); color: #fff; border-color: var(--rpd-ink); }
.rpd-g-tab-count {
  color: var(--rpd-muted);
  font-weight: 500;
}
.rpd-g-tab.is-active .rpd-g-tab-count { color: rgba(255,255,255,.55); }

/* ============ MODAL (room-grouped photo browser) ============ */
.rpd-modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 9999;
}
.rpd-modal[aria-hidden="false"] { display: block; }
.rpd-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
}
.rpd-modal-dialog {
  position: relative;
  max-width: 980px;
  max-height: 84vh;
  margin: 5vh auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  z-index: 1;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.rpd-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rpd-hair);
  flex-shrink: 0;
}
.rpd-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--rpd-ink);
  letter-spacing: -0.01em;
}
.rpd-modal-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--rpd-muted);
  cursor: pointer;
  padding: 0 4px;
}
.rpd-modal-close:hover { color: var(--rpd-ink); }
.rpd-modal-body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  flex: 1;
}
.rpd-modal-section { padding: 16px 0; border-top: 1px solid var(--rpd-hair); }
.rpd-modal-section:first-child { border-top: none; padding-top: 6px; }
.rpd-modal-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rpd-ink);
}
.rpd-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.rpd-modal-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eee;
  border-radius: 6px;
  cursor: pointer;
  padding: 0; border: 0;
  position: relative;
}
.rpd-modal-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .25s ease;
}
.rpd-modal-thumb:hover img { transform: scale(1.05); }
@media (max-width: 768px) {
  .rpd-modal-dialog { margin: 0; max-height: 100vh; border-radius: 0; }
  .rpd-modal-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ SLIDER (Swiper fullscreen lightbox) ============ */
.rpd-slider {
  position: fixed; inset: 0;
  display: none;
  z-index: 10000;
}
.rpd-slider[aria-hidden="false"] { display: block; }
.rpd-slider-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .94);
}
.rpd-slider-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: none;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.rpd-slider-close:hover { background: rgba(255,255,255,.22); }
.rpd-slider-shell {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 1180px;
  height: 100%;
  margin: 0 auto;
  display: flex; align-items: center;
}
.rpd-swiper { width: 100%; }
.rpd-swiper .swiper-slide {
  display: flex; align-items: center; justify-content: center;
  height: 86vh;
}
.rpd-swiper .swiper-slide img {
  max-width: 100%; max-height: 86vh;
  object-fit: contain;
  display: block;
}
.rpd-slider .swiper-button-prev,
.rpd-slider .swiper-button-next {
  color: #fff;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  --swiper-navigation-size: 18px;
}
.rpd-slider .swiper-button-prev:hover,
.rpd-slider .swiper-button-next:hover { background: rgba(255,255,255,.22); }
.rpd-slider .swiper-pagination {
  color: #fff;
  bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ============ MAIN GRID — main + sticky sidebar ============ */
.rpd-grid {
  display: grid;
  /* At the 1140px container, the sidebar gets a touch narrower than the
     1240px template (380px → 360px) so the main column keeps the same
     reading width. Gap also tightens slightly. */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  margin-top: 48px;
  /* IMPORTANT: do NOT set `align-items: start/flex-start` on this grid.
     `position: sticky` on the right column needs its parent (the grid cell
     / `.rpd-aside`) to be TALLER than the sidebar itself — otherwise sticky
     has no scroll range inside the parent and just sits where it was placed.
     Default `stretch` makes both columns fill the row height (= the tall
     left column's height) so the right column has plenty of room to stick. */
  align-items: stretch;
}
.rpd-aside { align-self: stretch; }
.rpd-main { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.rpd-aside { position: relative; }

/* ============ DESCRIPTION ============ */
.rpd-desc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.rpd-desc-sub { color: var(--rpd-muted); font-size: 14px; margin-top: 6px; }
.rpd-desc-sub .rpd-mono { color: var(--rpd-ink); }

.rpd-host-avatar {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rpd-teal) 0%, var(--rpd-teal-deep) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 64px;
}

.rpd-desc-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--rpd-ink);
  margin-top: 20px;
  max-width: 680px;
  text-wrap: pretty;
}
.rpd-desc-body p { margin: 0 0 14px; }
.rpd-desc-body p:last-child { margin-bottom: 0; }

.rpd-comp-strip {
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--rpd-soft);
  border: 1px solid var(--rpd-hair);
  border-radius: 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.rpd-comp-val {
  font-size: 22px; font-weight: 700;
  color: var(--rpd-ink); margin-top: 6px;
  letter-spacing: -0.01em;
}
.rpd-comp-sub { font-size: 12px; color: var(--rpd-muted); margin-top: 2px; }

.rpd-includes {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rpd-includes .rpd-eyebrow { margin-right: 4px; }
.rpd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: #fff;
  border: 1px solid var(--rpd-hair);
  border-radius: 999px;
  font-size: 12px;
  color: var(--rpd-ink);
  font-weight: 500;
}
.rpd-pill-check { color: var(--rpd-teal); display: flex; }
.rpd-pill-off {
  color: var(--rpd-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,.25);
}
.rpd-pill-off > span:last-child { text-decoration: line-through; }
.rpd-pill-cross { color: #c4c1b6; display: flex; text-decoration: none; }

/* ============ PROPERTY DETAILS ============ */
.rpd-pd-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rpd-pd-card {
  background: #fff;
  border: 1px solid var(--rpd-hair);
  border-radius: 6px;
  padding: 20px 22px;
}
.rpd-pd-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--rpd-ink);
  margin-top: 8px;
  margin-bottom: 6px;
}
.rpd-pd-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rpd-hair);
  font-size: 14px;
}
.rpd-pd-row:last-child { border-bottom: none; }
.rpd-pd-key { color: var(--rpd-muted); }
.rpd-pd-val { color: var(--rpd-ink); font-weight: 600; }

/* ============ VIDEO ============ */
.rpd-video-frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--rpd-ink);
  border: 1px solid var(--rpd-hair);
  cursor: pointer;
}
.rpd-video-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, #1c1d24 0 10px, var(--rpd-ink) 10px 20px);
}
.rpd-video-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 86px; height: 86px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  border: none;
  cursor: pointer;
  z-index: 2;
}
.rpd-video-play span {
  width: 0; height: 0;
  border-left: 22px solid var(--rpd-ink);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
.rpd-video-tag {
  position: absolute;
  left: 16px; top: 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: #fff;
  letter-spacing: .16em;
  font-weight: 700;
  z-index: 2;
}
.rpd-video-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #ff3b30;
}
.rpd-video-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  z-index: 2;
}
.rpd-video-title { font-size: 14px; font-weight: 600; }
.rpd-video-sub { font-size: 12px; opacity: .8; margin-top: 2px; }
.rpd-video-frame.is-playing .rpd-video-stripes,
.rpd-video-frame.is-playing .rpd-video-play,
.rpd-video-frame.is-playing .rpd-video-tag,
.rpd-video-frame.is-playing .rpd-video-caption { display: none; }
.rpd-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============ AMENITIES ============ */
.rpd-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2 columns × 4 rows = 8 visible */
  gap: 12px 32px;
}
.rpd-amenity {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rpd-hair);
}
.rpd-amenity-icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--rpd-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--rpd-teal);
  flex: 0 0 32px;
}
.rpd-amenity-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  /* Tint the (mostly black) SVG icons to brand teal so they sit nicely on
     the soft cream background. The filter approximates #2FB5B5; leaves
     coloured icons (PNG/JPEG) untouched-ish. */
  filter: invert(56%) sepia(72%) saturate(424%) hue-rotate(132deg) brightness(92%) contrast(88%);
}
.rpd-amenity-name { flex: 1; font-size: 14px; color: var(--rpd-ink); min-width: 0; }

@media (max-width: 640px) {
  .rpd-amenities-grid { grid-template-columns: 1fr; }
}

/* ---- Hide the embedded [amenities_modal] shortcode's visible UI ----
   We render it only so its modal markup + open/close JS are available,
   then our own "Show all" button programmatically clicks its trigger. */
.rpd-amenities-modal-mount > .amenities-wrap > .amenities-title,
.rpd-amenities-modal-mount > .amenities-wrap > .amenities-grid,
.rpd-amenities-modal-mount > .amenities-wrap > .amenities-btn {
  display: none !important;
}
.rpd-amenities-modal-mount { margin: 0; padding: 0; }

.rpd-not-included { margin-top: 26px; }
.rpd-not-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}

.rpd-cta-outline {
  margin-top: 24px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--rpd-ink);
  color: var(--rpd-ink);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
}
.rpd-cta-outline:hover { background: var(--rpd-ink); color: #fff; }
.rpd-cta-outline:hover svg { stroke: #fff; }

/* ============ LOCATION ============ */
.rpd-loc-addr {
  font-size: 14px;
  color: var(--rpd-muted);
  margin: 6px 0 20px;
  max-width: 620px;
}
.rpd-map {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  height: 380px;
  background: #d8e7e3;
  border: 1px solid var(--rpd-hair);
}
.rpd-nearby {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.rpd-nearby-item {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rpd-hair);
  border-radius: 6px;
}
.rpd-nearby-name { font-size: 13px; font-weight: 600; color: var(--rpd-ink); }
.rpd-nearby-meta { font-size: 12px; color: var(--rpd-muted); margin-top: 2px; }

/* ============ THINGS TO KNOW ============ */
.rpd-ttk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.rpd-ttk-col-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--rpd-ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rpd-ttk-head-icon {
  display: inline-flex;
  color: var(--rpd-ink);
}
.rpd-ttk-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.rpd-ttk-li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--rpd-ink);
  line-height: 1.5;
}
.rpd-ttk-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--rpd-soft);
  color: var(--rpd-teal);
  position: relative;
}

/* ---- Blocked / not-allowed state ----
   - Icon background goes muted grey
   - Icon stroke fades to muted text colour
   - A diagonal slash in brand orange overlays the icon (drawn with a
     linear-gradient so we don't need an extra DOM node)
   - The text alongside it is muted slightly so the whole row reads as off */
.rpd-ttk-icon.is-blocked {
  background: rgba(0, 0, 0, .05);
  color: var(--rpd-muted);
}
.rpd-ttk-icon.is-blocked::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(
    -45deg,
    transparent calc(50% - 1.2px),
    var(--rpd-orange) calc(50% - 1.2px),
    var(--rpd-orange) calc(50% + 1.2px),
    transparent calc(50% + 1.2px)
  );
  pointer-events: none;
}
.rpd-ttk-li.is-blocked .rpd-ttk-text {
  color: var(--rpd-muted);
}

/* ============ COMPOUND ============ */
.rpd-compound-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.rpd-compound-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rpd-ink);
  text-decoration: none;
}
.rpd-compound-link:hover { color: var(--rpd-orange); }
.rpd-compound-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--rpd-ink);
  max-width: 760px;
  text-wrap: pretty;
  margin: 0;
}
/* ---- Attraction points: 3-card grid pixel-matched to the template ---- */
.rpd-attractions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.rpd-attraction {
  background: #fff;
  border: 1px solid var(--rpd-hair);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rpd-attraction-thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  background: #eee center/cover no-repeat;
}
.rpd-attraction-num {
  position: absolute;
  left: 12px; top: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: .06em;
}
.rpd-attraction-body { padding: 18px; flex: 1; }
.rpd-attraction-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--rpd-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.rpd-attraction-desc {
  font-size: 13px;
  color: var(--rpd-muted);
  line-height: 1.55;
}
.rpd-attraction-desc p { margin: 0 0 8px; }
.rpd-attraction-desc p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .rpd-attractions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rpd-attractions { grid-template-columns: 1fr; }
}

/* ============ REVIEWS WRAP ============ */
.rpd-reviews-wrap { margin-top: 0; }
.rpd-reviews-wrap > .rpd-eyebrow,
.rpd-reviews-wrap > .rpd-h2 { /* render normally — section title comes from us */ }
/* Re-skin the rentz-reviews section to flow under our own title.
   The plugin's own .rr-section-title shows the star/avg/count line —
   demote it to a sub-header style so the visual hierarchy is:
     EYEBROW   Reviews
     H2        Guest reviews
     SUBLINE   ★★★★★ 4.8 · 10 reviews                [Write a review]
   …then the breakdown chart, then the review cards. */
.rpd-reviews-wrap .rr-property-section { max-width: none; padding: 0; margin: 0; }
.rpd-reviews-wrap .rr-section-head { margin-bottom: 16px; }
.rpd-reviews-wrap .rr-section-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
.rpd-reviews-wrap .rr-stars { font-size: 18px; }
.rpd-reviews-wrap .rr-avg { font-weight: 700; }
.rpd-reviews-wrap .rr-count { font-weight: 500; color: var(--rpd-muted); font-size: 14px; }

/* ============ STICKY RESERVATION COLUMN ============
   The right column sticks as the user scrolls. Important:
   - No max-height + overflow — that was cropping a tall booking form to a
     scrolling sub-region inside its own column. Now the column is as tall
     as its content and sticks naturally.
   - No background / border on the booking slot — the booking form already
     paints its own card; layering another card around it caused the white
     box visible behind the teal form in the previous build.
*/
.rpd-reservation-stick {
  /* Plain CSS sticky — matches the template exactly. Smooth native scroll,
     no rubber-band. The sidebar sticks at top: 24px once the user scrolls
     past it; when the form is collapsed (Guests + Add-ons collapsed by
     default) it almost always fits inside the viewport. */
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 5;
}
/* Pass-through wrapper — no styling, the form keeps its own design */
.rpd-booking-slot { background: transparent; border: 0; }
.rpd-booking-slot > .bpr-booking-anchor,
.rpd-booking-slot > .bpr-rform,
.rpd-booking-slot > * { margin: 0 !important; }

/* Porto + WooCommerce style buttons and number inputs globally. Re-assert
   the booking form's own stepper look so the +/− glyphs and digit color
   render correctly against the teal card. Scoped under .rpd-booking-slot
   so this never leaks into other places the form might be used. */
.rpd-booking-slot .bpr-rform__stepper-btn,
.rpd-booking-slot .bpr-stepper .bpr-inc,
.rpd-booking-slot .bpr-stepper .bpr-dec {
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
.rpd-booking-slot .bpr-rform__stepper-btn:hover:not(:disabled),
.rpd-booking-slot .bpr-stepper .bpr-inc:hover:not(:disabled),
.rpd-booking-slot .bpr-stepper .bpr-dec:hover:not(:disabled) {
  background: rgba(255,255,255,.34) !important;
  border-color: rgba(255,255,255,.6) !important;
  color: #fff !important;
}
.rpd-booking-slot .bpr-rform__stepper-btn:disabled,
.rpd-booking-slot .bpr-stepper .bpr-inc:disabled,
.rpd-booking-slot .bpr-stepper .bpr-dec:disabled {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.55) !important;
  cursor: default !important;
}
.rpd-booking-slot .bpr-rform__stepper-value,
.rpd-booking-slot .bpr-stepper .bpr-count {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: #fff !important;     /* Safari readonly inputs */
}

/* ============ COLLAPSIBLE GUESTS / ADD-ONS (inside booking form) ============
   Injected by the JS smart-collapse module. Lives inside the existing
   booking form so we style scoped to .rpd-collapsible. The colors inherit
   from the form's own design (currentColor) so we don't fight its palette.
*/
.rpd-collapsible__toggle {
  appearance: none;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  border-top: 1px solid rgba(255,255,255,.15);
}
.rpd-collapsible__toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}
.rpd-collapsible__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}
.rpd-collapsible__right {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
}
.rpd-collapsible__summary {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  text-align: right;
}
.rpd-collapsible__chev {
  display: inline-flex;
  transition: transform .22s ease;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
}
.rpd-collapsible.is-collapsed .rpd-collapsible__chev { transform: rotate(0deg); }
.rpd-collapsible:not(.is-collapsed) .rpd-collapsible__chev { transform: rotate(180deg); }

/* The actual edit panel — animated open/close using the grid-rows trick.
   .body transitions grid-template-rows 1fr ↔ 0fr; .inner is the single
   child that holds the real content and clips it with overflow:hidden.
   Without .inner the grid trick can't compute a collapse target. */
.rpd-collapsible__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .25s ease;
}
.rpd-collapsible.is-collapsed .rpd-collapsible__body {
  grid-template-rows: 0fr;
}
.rpd-collapsible__inner {
  min-height: 0;
  overflow: hidden;
}
.rpd-collapsible.is-collapsed .rpd-collapsible__inner {
  /* Belt-and-braces in case the browser doesn't animate grid-rows: still
     clamp the inner box to 0 so the section truly takes no vertical space. */
  visibility: hidden;
  pointer-events: none;
}

/* When the section was already styled by the booking form with its own
   padding/borders, we keep them. Remove the booking-form's own bordering
   on the section since our toggle now provides the visual divider. */
.rpd-collapsible.bpr-rform__section { border-bottom: 0 !important; padding-top: 0; padding-bottom: 0; }
.rpd-collapsible:first-of-type .rpd-collapsible__toggle { border-top: 0; }

/* Sticky parents must NOT have overflow set or the child won't stick.
   We override every ancestor that Porto could clip on a single product
   page so the sticky right column actually sticks while scrolling. */
.rpd-grid, .rpd-aside { overflow: visible !important; }
body.single-product .page-wrapper,
body.single-product #main,
body.single-product #main > .container,
body.single-product .main-content,
body.single-product #primary,
body.single-product #content,
body.single-product .site-main { overflow: visible !important; }

.rpd-contact-card {
  background: #fff;
  border: 1px solid var(--rpd-hair);
  border-radius: 6px;
  padding: 18px;
}
.rpd-contact-head { display: flex; align-items: center; gap: 12px; }
.rpd-contact-avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rpd-teal) 0%, var(--rpd-teal-deep) 100%);
  color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.rpd-contact-label { font-size: 13px; color: var(--rpd-muted); }
.rpd-contact-name { font-size: 15px; font-weight: 700; color: var(--rpd-ink); }
.rpd-contact-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.rpd-contact-wa, .rpd-contact-call {
  padding: 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit;
}
.rpd-contact-wa { background: #25D366; color: #fff; }
.rpd-contact-wa:hover { background: #1ebe5a; color: #fff; }
.rpd-contact-call { background: #fff; color: var(--rpd-ink); border: 1px solid var(--rpd-ink); }
/* On hover the bg + border flip to ink, the text stays white so it remains
   readable. Force the white text with !important + a descendant selector
   to win against Porto's own button rules that try to pin the text colour
   to black on every link. */
.rpd-contact-call:hover {
  background: var(--rpd-ink) !important;
  border-color: var(--rpd-ink) !important;
}
.rpd-contact-call:hover,
.rpd-contact-call:hover *,
.rpd-contact-call:hover:focus,
.rpd-contact-call:hover:active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;  /* Safari sometimes pins this */
}
.rpd-contact-hours {
  font-size: 11px;
  color: var(--rpd-muted);
  margin-top: 10px;
  text-align: center;
}

.rpd-share-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
}
.rpd-share-label { font-size: 12px; color: var(--rpd-muted); }
.rpd-share-icons { display: flex; gap: 6px; }
.rpd-share-icon {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--rpd-hair);
  background: #fff;
  cursor: pointer;
  color: var(--rpd-ink);     /* official icons inherit black via currentColor */
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.rpd-share-icon svg {
  /* Make sure the SVG glyph stays the same colour as the button — even when
     Porto / WP themes try to pin `color` on links. */
  color: inherit !important;
  fill: currentColor;
}
.rpd-share-icon:hover {
  /* Subtle hover: warm cream wash + darker border. Icon stays BLACK so the
     glyph remains legible (the previous "invert to ink on hover" pattern
     made the icons disappear — black-on-black). */
  background: var(--rpd-soft);
  border-color: var(--rpd-ink);
  transform: translateY(-1px);
}
.rpd-share-icon:hover svg { color: var(--rpd-ink) !important; }
/* Override Porto's :link / :visited / :hover colour pin on anchors */
html body .rpd-share-strip a.rpd-share-icon,
html body .rpd-share-strip a.rpd-share-icon:link,
html body .rpd-share-strip a.rpd-share-icon:visited,
html body .rpd-share-strip a.rpd-share-icon:hover,
html body .rpd-share-strip a.rpd-share-icon:active,
html body .rpd-share-strip a.rpd-share-icon:focus {
  color: var(--rpd-ink) !important;
}

/* ============ SIMILAR ============ */
/* Similar Stays uses the existing V1b card via [property_card] shortcode.
   We only style the section's head + grid here; the card itself owns its CSS. */
.rpd-similar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.rpd-similar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* The V1b card is rendered as a top-level element; make sure each one fills its grid cell */
.rpd-similar-grid > .igx-pc,
.rpd-similar-grid > .igx-card-v1b,
.rpd-similar-grid > article,
.rpd-similar-grid > a { display: block; width: 100%; }

/* ============ RESPONSIVE ============ */
/* =========================================================================
   TOAST — small floating notification (used by save-to-wishlist click)
   ========================================================================= */
.rpd-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 24px);
  opacity: 0;
  pointer-events: none;
  background: var(--rpd-ink);
  color: #fff;
  padding: 12px 16px 12px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Sans', system-ui, sans-serif;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35);
  z-index: 100000;
  transition: opacity .22s ease, transform .22s ease;
  white-space: nowrap;
}
.rpd-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.rpd-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}
.rpd-toast.is-undo .rpd-toast-icon { background: rgba(255, 255, 255, .14); }
.rpd-toast-msg { line-height: 1; }

/* The "View list" link inside the toast */
.rpd-toast a {
  color: #fff !important;
  opacity: .85;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  margin-left: 4px;
}
.rpd-toast a:hover { opacity: 1; }

@media (max-width: 1163px) {
  /* Below Porto's container breakpoint, drop the sticky sidebar to its own
     row. No need to add horizontal padding — Porto's .container already
     adapts its own gutters as the viewport shrinks. */
  #rentz-pd-root { padding: 24px 0 48px; }
  .rpd-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Below desktop, sidebar drops to its own row and unsticks.
     Move the reservation column to render FIRST (right after the gallery
     above the grid) so users on small screens see Reserve + Concierge
     immediately, then the description / amenities / etc. */
  .rpd-aside { order: -1; }
  .rpd-main  { order: 0; }
  .rpd-reservation-stick { position: static; top: auto; }
  .rpd-similar-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .rpd-nearby { grid-template-columns: repeat(2, 1fr); }
  .rpd-comp-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #rentz-pd-root { padding: 16px 0 32px; font-size: 14px; }
  .rpd-h1 { font-size: 28px; line-height: 1.1; }
  .rpd-h2 { font-size: 22px; }

  /* Title block: stack the main info above the rating/share/save chips so the
     main column gets the full row width — otherwise the side chips eat the
     space and the H1 ends up wrapping one word per line. */
  .rpd-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .rpd-title-side {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  /* Compact stats row: tighter gap, drop the decorative bullet separators. */
  .rpd-stats { gap: 12px; margin-top: 14px; }
  .rpd-stat-dot { display: none; }
  /* Location chip — keep on one line, ellipsis if it overflows */
  .rpd-loc-inline { flex-wrap: wrap; }

  .rpd-gallery-grid { grid-template-columns: 1fr; grid-template-rows: 280px; height: auto; }
  .rpd-gallery-grid .rpd-g-tile { grid-column: auto !important; grid-row: auto !important; }
  .rpd-gallery-grid .rpd-g-tile:not(.rpd-g-hero):not(.rpd-g-thumb-last) { display: none; }
  .rpd-pd-cards { grid-template-columns: 1fr; }
  .rpd-amenities-grid { grid-template-columns: 1fr; }
  .rpd-ttk-grid { grid-template-columns: 1fr; gap: 24px; }
  .rpd-compound-card { grid-template-columns: 1fr; }
  .rpd-similar-grid { grid-template-columns: 1fr; }
  .rpd-nearby { grid-template-columns: 1fr; }
}