/* ================================================================
   PROPERTY DETAIL — detail.css
   Shared styles for home.aspx (QP/Showhome) and model.aspx.
   Include on both detail pages.
   ================================================================ */

/* === Breadcrumb — spacing below fixed nav ======================== */
/* Both pages output a <nav> immediately after the fixed nav */
.detail-breadcrumb,
nav[aria-label="breadcrumb"] {
  font-size: 0.78rem !important;
  padding-top: 1rem !important;
  padding-bottom: 0.75rem !important;
}
.breadcrumb-item,
.breadcrumb-item a {
  font-size: 0.78rem;
}
.breadcrumb-item a {
  color: var(--gray);
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: var(--red);
}

/* === Detail page two-column layout =============================== */
/* flex cols — bypasses Bootstrap grid to avoid formatter breakage  */
.detail-img-col {
  flex: 1 1 55%;
  min-width: 0;
}
.detail-info-col {
  flex: 1 1 40%;
  min-width: 0;
}

@media (max-width: 767.98px) {
  .detail-img-col,
  .detail-info-col {
    flex: 1 1 100%;
  }
}

/* === Image badge overlay ========================================= */
.img-badges .badge {
  font-size: 0.72rem;
  padding: 0.35rem 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* === Exterior image (home.aspx static image) ===================== */
.exterior-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--off-white);
  border-radius: 12px;
}

/* === Sidebar ===================================================== */
.detail-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* === Action cards ================================================ */
.detail-action {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  text-decoration: none;
  color: var(--dark);
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
  height: 100%;
}
.detail-action:hover {
  border-color: var(--red);
  background: var(--off-white);
  color: var(--dark);
}
.detail-action-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  border-radius: 50%;
  color: var(--red);
  font-size: 1rem;
}
.detail-action-title {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.detail-action-sub {
  font-size: 0.75rem;
  color: var(--gray);
}
.detail-action-arrow {
  color: var(--gray);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* === Specs row =================================================== */
.detail-specs {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
  margin: 1.25rem 0;
}
.detail-spec {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.detail-spec i {
  color: var(--red);
}

/* === Spec grid (large numbers, fills right column) =============== */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0;
}
.spec-grid-item {
  padding: 1rem 0.75rem;
  text-align: center;
  border-right: 1px solid var(--gray-light);
}
.spec-grid-item:last-child {
  border-right: none;
}
.spec-num {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.spec-lbl {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray);
  margin-top: 0.2rem;
}

/* === Status badges (home.aspx right column) ====================== */
.detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.7rem;
  border-radius: 50px;
  white-space: nowrap;
}
.detail-badge i {
  font-size: 0.65rem;
}
.detail-badge--green {
  background: #d1f5d8;
  color: #1a7a2a;
}
.detail-badge--red {
  background: #fde8e8;
  color: #c0392b;
}
.detail-badge--neutral {
  background: var(--gray-light);
  color: var(--dark);
}

/* === Actions section (showhome hours card + pills) =============== */

.detail-actions-section .action-pills {
  margin-top: 0.75rem;
}

/* === Action trigger card (showhome hours) ======================== */
.action-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--gray-light);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: var(--dark);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.action-card:hover {
  border-color: var(--red);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  color: var(--dark);
}
.action-card .fw-semibold {
  font-size: 0.875rem;
}

.icon-circle {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fef0f0;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* === Compact action pills ======================================== */
.action-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.25rem;
}
.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.875rem;
  border: 1.5px solid var(--gray-light);
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  transition: border-color 0.2s ease;
  cursor: pointer;
  background: none;
  white-space: nowrap;
}
.action-pill i {
  color: var(--red);
  font-size: 0.72rem;
}
.action-pill:hover {
  border-color: var(--red);
  color: var(--dark);
}

/* === Price box =================================================== */
.price-box {
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.price-value {
  font-size: clamp(1.5rem, 3vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.price-callout {
  font-size: 0.78rem;
  color: var(--gray);
}

/* GST toggle (home.aspx) */
.gst-segmented {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50px;
  padding: 3px;
}
.gst-btn {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 50px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.gst-btn.active,
.gst-btn.bg-white {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* === Features list (legacy inline — kept for model.aspx) ========= */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}
.feature-list i {
  color: var(--red);
  font-size: 0.75rem;
}

/* === Features box (home.aspx upgraded grid) ====================== */
.features-box {
  background: var(--off-white);
  border-radius: 14px;
  padding: 1.75rem 2rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
}

.features-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dark);
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.features-item i {
  color: var(--red);
  font-size: 0.8rem;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .features-box {
    padding: 1.25rem;
  }
  .features-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* === Exterior slider (model.aspx) ================================ */
.modelSlider {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--off-white);
}
.modelSlider img {
  width: 100%;
  max-height: 480px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.modelSlider-prev,
.modelSlider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}
.modelSlider-prev {
  left: 0.75rem;
}
.modelSlider-next {
  right: 0.75rem;
}
.modelSlider-prev:hover,
.modelSlider-next:hover {
  background: #fff;
}
.swiper-button-disabled {
  display: none !important;
}

/* === Community logo cards (model.aspx) =========================== */
.logo-community-card {
  display: block;
  padding: 0.75rem;
  border: 2px solid var(--gray-light);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.logo-community-card:hover {
  border-color: var(--red);
}
.logo-community-card img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin-bottom: 0.4rem;
}
.logo-community-card p {
  font-size: 0.68rem;
  color: var(--gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* === Floorplan download (model.aspx) ============================= */
.fp-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid var(--red);
  color: var(--red);
  border-radius: 50px;
  padding: 0.6rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.fp-download-btn:hover {
  background: var(--red);
  color: #fff;
}

/* === Floorplan core behaviour (restored from stripped inline style) */

/* All floor plan images hidden by default — JS shows the active one */
[data-floorplan] {
  display: none;
}

/* On desktop every tab pane is visible (side-by-side columns) */
@media (min-width: 992px) {
  .d-lg-i {
    opacity: 1 !important;
  }
}

/* === Floorplan section (both pages) ============================== */

/* Section heading */
.floorplan-module h2,
.property-detail_subheading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

/* Download button overrides — home.aspx uses .theme-btn, model.aspx uses inline styles */
.floorplan-module .theme-btn.btn-style-one,
#btnDownload {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid var(--red) !important;
  color: var(--red) !important;
  background: transparent;
  border-radius: 50px;
  padding: 0.55rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.floorplan-module .theme-btn.btn-style-one:hover,
#btnDownload:hover {
  background: var(--red) !important;
  color: #fff !important;
}

/* MiTY button (model.aspx only) */
a[href="#makeittrulyyoursModal"] {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid var(--dark) !important;
  color: var(--dark) !important;
  background: transparent;
  border-radius: 50px;
  padding: 0.55rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
a[href="#makeittrulyyoursModal"]:hover {
  background: var(--dark) !important;
  color: #fff !important;
}

/* Mobile tabs */
.floorplan-module .nav-tabs,
.nav-tabs#myTab {
  border-bottom: 2px solid var(--gray-light);
  gap: 0;
}
.floorplan-module .nav-tabs .nav-link,
.nav-tabs#myTab .nav-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
  padding: 0.6rem 1rem;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  background: none;
}
.floorplan-module .nav-tabs .nav-link.active,
.nav-tabs#myTab .nav-link.active,
.floorplan-module .nav-tabs .nav-link:hover,
.nav-tabs#myTab .nav-link:hover {
  color: var(--red);
  border-bottom-color: var(--red);
  background: none;
}

/* Tab content container wrapper */
.floorplan-module > div > .p-lg-4.bg-white,
.floorplan-module > .p-lg-4.bg-white,
.floorplan-module > .p-3.bg-white {
  border-color: var(--gray-light) !important;
  border-radius: 12px !important;
}

/* Floor option select (model.aspx only — home.aspx has no dropdown) */
.floorplan-module .form-select,
.first-floor-options ~ .form-floating .form-select,
select[id^="floor"] {
  border-color: var(--gray-light);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: "Inter", system-ui, sans-serif;
}
.floorplan-module .form-select:focus,
select[id^="floor"]:focus {
  border-color: var(--red);
  box-shadow: none;
}

.fancybox__content,
.f-thumbs__slide {
  background-color: white !important;
}

/* Floor plan images — remove forced height so no white gap */
.floorplan-height-fix {
  min-height: 0 !important;
}
.floorplan-module .ops {
  height: auto;
}
.floorplan-module .ops a {
  height: auto !important;
  display: block;
}
.floorplan-module .ops img,
.floorplan-module .magnify-icon img {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* === Photo gallery masonry ======================================= */
.gallery-masonry {
  columns: 4;
  column-gap: 0.75rem;
}
.gallery-masonry a {
  display: block;
  break-inside: avoid;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.gallery-masonry a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
  pointer-events: none;
}
.gallery-masonry a:hover::after {
  background: rgba(0, 0, 0, 0.18);
}
.gallery-masonry img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-masonry a:nth-child(n + 11) {
  display: none;
}
.gallery-masonry.gallery-expanded a:nth-child(n + 11) {
  display: block;
}
@media (max-width: 991.98px) {
  .gallery-masonry {
    columns: 3;
  }
}
@media (max-width: 575.98px) {
  .gallery-masonry {
    columns: 2;
  }
}

/*Floorplan Module - to be removed, should come from bq-floorplan-module.css module*/
.magnify-icon:before {
  content: "";
  width: 30px;
  height: 30px;
  background: url("/images/magnify-icon.svg") center center no-repeat white;
  background-size: 80%;
  border-radius: 60px;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
}
.floorplan-height-fix {
  height: calc(100vh - 50px);
}
.floorplan-height-fix img {
  max-width: 100%;
  max-height: 100%;
}