/* =========================================================
   🏠 Brick & Beyond – Single Property Page (Final Stable v15)
   âš¡ Fully Commented + Shiftable Container + Colors Centralized
========================================================= */


/* =========================================================
   🧩 LOCAL / TEMPLATE-SPECIFIC BACKGROUND
   ========================================================= */
.bnb-single-property,
.bnb-breadcrumb-container,
.bnb-property-content {
  background: var(--bg) !important; /* Force white background on property pages */
  color: #222;
}



/* =========================================================
   CAROUSEL – Edge-to-Edge
========================================================= */
.bnb-carousel {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: #000;
  z-index: 2;
}
.bnb-carousel .swiper-wrapper {
  width: 100%;
}
.bnb-carousel img,
.bnb-carousel iframe {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #000;
  border: none;
}

/* Carousel Arrows */
.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
  opacity: 0;
  width: 44px;
  height: 44px;
  z-index: 30 !important;
  transition: opacity 0.35s ease, transform 0.25s ease;
  pointer-events: none;
}
.bnb-carousel:hover .swiper-button-next,
.bnb-carousel:hover .swiper-button-prev {
  opacity: 0.9;
  pointer-events: auto;
}
.swiper-button-next { right: 25px !important; }
.swiper-button-prev { left: 25px !important; }
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 22px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  padding: 10px;
}
.swiper-button-next:hover,
.swiper-button-prev:hover { opacity: 1; transform: scale(1.1); }
/* Pagination */
.swiper-pagination { bottom: 12px !important; z-index: 25 !important; }
.swiper-pagination-bullet { background: #fff; opacity: 0.6; }
.swiper-pagination-bullet-active { background: var(--accent); opacity: 1; }

/* =========================================================
   PROPERTY CONTENT GRID – Shift Container Right
========================================================= */
.bnb-property-content {
  max-width: var(--maxw);
  margin: 25px 0 60px; /* Shift right using variable */
  display: grid;
  grid-template-columns: 2fr 360px;
  gap: 20px;
  padding: 0 20px;
  position: relative;
  z-index: 3;
  /* âš¡ All content moves together; change --property-shift-right to move left/right */
}

/* =========================================================
   🧩 LOCAL: PROPERTY HEADER – Title / Price / Meta
   ========================================================= */
.bnb-header-line {
  display: flex;
  align-items: baseline;  /* Align title and price visually on the same line */
  gap: 25px;              /* Controls space between title and price */
  margin-bottom: 10px;    /* Spacing below the header line */
}

.bnb-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--color-title);
  margin: 0;
  padding: 0;
  line-height: 1;
}

.bnb-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-price);
  margin: 0;
  padding: 0;
  line-height: 1;
}


/* =========================================================
   🧩 LOCAL: PROPERTY CONTENT – Location / Pills / Specs / Description
   ========================================================= */

/* Group wrapper (ensures all text aligns left within shifted container) */
.bnb-location,
.bnb-meta-boxes,
.bnb-specs,
.bnb-description {
  text-align: left;
  margin-top: 20px; /* space from price to address */
}

/* ---------- META PILLS ---------- */
.meta-pill {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-pill-text);
  background: var(--color-pill-bg);
  border: 1px solid var(--color-pill-border);
  border-radius: 50px;
  padding: 6px 14px;
  text-transform: capitalize;
}
.meta-pill:empty {
  display: none !important;
}

/* ---------- SPECS (Bed / Bath / Area) ---------- */
.bnb-specs {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 16px;
  color: #444;
  margin-top: 20px; /* space from status to specs */
}
.bnb-specs div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bnb-specs i {
  color: var(--color-specs-icon);
  font-size: 18px;
}

/* ---------- DESCRIPTION ---------- */
.bnb-description {
  font-size: 17px;
  color: var(--color-description-text);
  line-height: 1.8;
  margin-top: 18px;
}






/* =========================================================
   ASTRA CONTAINER OVERRIDE – Fix Left/Right Alignment
========================================================= */
.single-property .ast-container,
.single-property .site-content > .ast-container,
.single-property .ast-row {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
}

/* =========================================================
   🧩 RESPONSIVE ADJUSTMENTS – Optimized Final
   ========================================================= */
/* ---------- TABLET (up to 1024px) ---------- */
@media (max-width: 1024px) {
  .bnb-property-content {
    grid-template-columns: 1fr 300px;
  }

  .bnb-contact.sticky-right {
    width: auto;
    max-width: 320px;
  }
}

/* ---------- MOBILE + SMALL TABLET (up to 768px) ---------- */
@media (max-width: 768px) {
  /* Remove container restriction for mobile */
  .bnb-property-content.container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove header–carousel gap, keep 10px below */
  .bnb-carousel {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }

  /* Also neutralize Astra’s default top padding */
  .site-main,
  .ast-container,
  .ast-row,
  .bnb-property-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Main content wrapper */
  .bnb-main {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 16px; /* Safe space on sides */
    text-align: left;
  }

  /* Adaptive Typography */
  .bnb-main h1 {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .bnb-main h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  .bnb-main h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-top: 1.5rem;
  }
  .bnb-main p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  /* Specs & meta pills */
  .bnb-meta-boxes {
    flex-wrap: wrap;
    gap: 6px;
  }
  .bnb-specs div {
    font-size: 0.95rem;
  }
  .bnb-specs i {
    margin-right: 6px;
  }
}

/* ---------- SMALL MOBILE (up to 640px) ---------- */
@media (max-width: 640px) {
  .bnb-property-content {
    grid-template-columns: 1fr;
  }

  /* Contact Box adjustments */
  .bnb-contact-box {
    padding: 15px 20px;
    text-align: center;
  }

  .bnb-contact-form {
    display: none;
  }

  .bnb-contact.active .bnb-contact-form {
    display: block;
  }
}


/*============= 30 October 2025 =========*/
/* === Fix left shift on single property pages === */
.single-property .bnb-property-content.container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 auto !important;
}

/* Keep text readable inside main column */
.single-property .bnb-main {
  padding: 0 5vw; /* Adds internal breathing space, no outer offset */
}

/* Contact side box alignment */
.single-property .bnb-contact-side {
  right: 5vw !important; /* keep aligned with main column padding */
}

/* Add spacing between carousel and content */
.bnb-carousel {
  margin-bottom: 2rem !important; /* roughly two text lines */
}


/* ==========================================================
   🧱 SINGLE PROPERTY PAGE — ZERO GAP BETWEEN HEADER & CAROUSEL
   ========================================================== */

.single-property .bnb-carousel {
  margin-top: -40px !important;
}