/* =========================================================
   RealtyPress Single Listing — Luxury 2026 UI (Scoped)
   File: /realtypress/css/single-luxury.css
   ========================================================= */

/* Scope everything to single listing pages only */
body.single-rps_listing .bootstrap-realtypress {
  /* Design system */
  --lux-surface: rgba(255, 255, 255, 0.92);
  --lux-text: #111;
  --lux-muted: rgba(17, 17, 17, 0.62);
  --lux-radius: 18px;
  --lux-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
  --lux-accent: #A78B43; /* gold */
}

/* ---------------------------------------------------------
   HERO WRAPPER
   --------------------------------------------------------- */
body.single-rps_listing .rps-lux-hero {
  margin: 18px 0 0;
}

body.single-rps_listing .rps-lux-hero__inner {
  position: relative;
}

/* Soft fade at bottom of hero for overlay readability */
body.single-rps_listing .rps-lux-hero__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Sold badge */
body.single-rps_listing .rps-lux-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 750;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  z-index: 3;
}

/* ---------------------------------------------------------
   bxSlider MODERNIZER — remove old framing + make hero "cover"
   (This is the key fix for the grey side gutters)
   --------------------------------------------------------- */
body.single-rps_listing .rps-lux-hero .bx-wrapper,
body.single-rps_listing .rps-lux-hero .bx-viewport {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  left: 0 !important;
}

body.single-rps_listing .rps-lux-hero .bx-wrapper {
  margin: 0 !important;
  max-width: 100% !important;
}

/* Define a modern hero height */
body.single-rps_listing .rps-lux-hero .bx-viewport {
  height: clamp(380px, 62vh, 720px) !important;
  overflow: hidden !important;
  border-radius: var(--lux-radius);
}

/* Ensure the slider fills the viewport */
body.single-rps_listing .rps-lux-hero ul.bx-slider {
  height: 100% !important;
}

/* bxSlider often injects inline widths; override for full-bleed */
body.single-rps_listing .rps-lux-hero ul.bx-slider > li {
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Absolute-fill image so it always covers */
body.single-rps_listing .rps-lux-hero ul.bx-slider > li > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
}

/* ---------------------------------------------------------
   Thumbnails — modern film strip
   --------------------------------------------------------- */
body.single-rps_listing .rps-lux-hero .bx-pager-wrap {
  margin-top: 12px;
}

body.single-rps_listing .rps-lux-hero .bx-pager.horizontal {
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.single-rps_listing .rps-lux-hero .bx-pager.horizontal li {
  list-style: none;
  margin: 0 !important;
}

body.single-rps_listing .rps-lux-hero .bx-pager.horizontal img {
  width: 92px;
  height: 62px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(17, 17, 17, 0.10);
  opacity: 0.86;
  transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}

body.single-rps_listing .rps-lux-hero .bx-pager a.active img {
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(167, 139, 67, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

/* ---------------------------------------------------------
   Arrows — premium floating buttons (optional but recommended)
   --------------------------------------------------------- */
body.single-rps_listing .rps-lux-hero .bx-controls-direction a {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 4;
  text-indent: -9999px;   /* hide default text */
  background-image: none !important; /* hide sprite */
}

body.single-rps_listing .rps-lux-hero .bx-prev { left: 14px !important; }
body.single-rps_listing .rps-lux-hero .bx-next { right: 14px !important; }

/* ---------------------------------------------------------
   INTRO CARD — overlaps hero (luxury editorial)
   --------------------------------------------------------- */
body.single-rps_listing .rps-lux-intro {
  position: relative;
  margin-top: -34px;
  z-index: 5;
}

body.single-rps_listing .rps-lux-intro__card {
  background: var(--lux-surface);
  border-radius: var(--lux-radius);
  box-shadow: var(--lux-shadow);
  padding: 22px;
  backdrop-filter: blur(10px);
}

/* Price row */
body.single-rps_listing .rps-lux-intro__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

body.single-rps_listing .rps-lux-price {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lux-text);
}

body.single-rps_listing .rps-lux-chip {
  font-size: 13px;
  font-weight: 750;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(167, 139, 67, 0.16);
  color: var(--lux-text);
  border: 1px solid rgba(167, 139, 67, 0.35);
}

/* Stats grid */
body.single-rps_listing .rps-lux-stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.single-rps_listing .rps-lux-stat {
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(17, 17, 17, 0.04);
  border: 1px solid rgba(17, 17, 17, 0.06);
}

body.single-rps_listing .rps-lux-stat__label {
  font-size: 12px;
  color: var(--lux-muted);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.single-rps_listing .rps-lux-stat__value {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 800;
  color: var(--lux-text);
}

/* Description */
body.single-rps_listing .rps-lux-desc {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.86);
}

/* Optional: extra WP content block styling */
body.single-rps_listing .rps-lux-extra {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.86);
}

/* ---------------------------------------------------------
   Responsive adjustments
   --------------------------------------------------------- */
@media (max-width: 991px) {
  body.single-rps_listing .rps-lux-intro {
    margin-top: -22px;
  }

  body.single-rps_listing .rps-lux-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.single-rps_listing .rps-lux-hero .bx-viewport {
    height: clamp(320px, 48vh, 560px) !important;
  }

  body.single-rps_listing .rps-lux-hero .bx-controls-direction a {
    width: 40px;
    height: 40px;
  }
}