/* =========================================================
   Community Detail – Consolidated Styles
   (drop-in replacement for your current file)
   ========================================================= */

:root {
  /* Brand */
  --brand-blue: #002d62;
  --brand-red:  #ED1C24;

  /* Stacking order */
  --z-slider: 1;
  --z-header: 1040;
  --z-sticky: 1030;
  --z-modal-backdrop: 10500;
  --z-modal: 10510;
 
  --status-green: #22c55e;     /* Move‑In Ready / Now Available */
  --status-yellow:#f59e0b;     /* Under Construction */
  --status-red:   var(--brand-red); /* Sold: Under Contract */
  --status-gray:  #94a3b8;     /* Fallback */
}


/* --- Revolution Slider arrow sizing --- */
#rev_slider_73_1 .uranus.tparrows {
  width: 50px;
  height: 50px;
  background: transparent;
}
#rev_slider_73_1 .uranus.tparrows:before {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  transition: all .3s;
}
#rev_slider_73_1 .uranus.tparrows:hover:before { opacity: .75; }

.rev_slider_wrapper { z-index: var(--z-slider) !important; }

/* --- Global layout trims --- */
html, body { max-width: 100vw; overflow-x: hidden; }
#allthedata { margin-top: 60px; }

/* --- Header / sticky bar layering --- */
#header { z-index: var(--z-header); }

/* Default state; JS toggles .is-stuck and inline top */
.sticky-blue-bar {
  position: relative;
  top: 0;
  z-index: var(--z-sticky);
  isolation: isolate; /* new stacking context */
}
.sticky-blue-bar.is-stuck { position: fixed; left: 0; right: 0; width: 100%; }

/* --- Forms / modal cosmetics --- */
.ftx-form label { color: var(--brand-blue); font-weight: 600; }

#infoRequestModal .modal-content { background: #fff !important; }
@media (max-width: 768px) {
  #infoRequestModal .modal-content { padding-bottom: 10px !important; }
  #infoRequestModal .modal-body {
    padding-bottom: 10px !important;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
}

/* Keep the calculator modal dialog edge-to-edge on small screens */
@media (max-width: 576px) {
  #calcModal .modal-dialog { max-width: 100vw !important; margin: 0 !important; }
}

/* --- Modal stacking above everything --- */
.modal-backdrop { z-index: var(--z-modal-backdrop) !important; }
.modal           { z-index: var(--z-modal)           !important; }

/* --- Card bottom buttons (shared) --- */
.card-btnbar { display: flex; width: 100%; }

.btn-learnmore,
.btn-requesttour,
.btn-requestinfo {
  flex: 1 1 50%;
  padding: .9rem 1rem;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease; 	line-height: 1em
}

/* View Details: blue -> invert on hover */
.btn-learnmore { background: var(--brand-blue); color: #fff; line-height: 1em; border:none;}
.btn-learnmore:hover {
  background: #fff;
  color: var(--brand-blue);
  border-right: 1px solid color:#002d62;
  line-height: 1em;
  font-weight: 800;
}

/* Tour/Request: red -> invert on hover */
 .btn-requesttour { background: var(--brand-red); color: #fff; line-height: 1em; border:none;}
 .btn-requesttour:hover {
  background: #fff;
  color: var(--brand-red);
  border-left: 1px solid color:#002d62;
  line-height: 1em;
  font-weight: 800;
}

/* Tour/Request: red -> invert on hover */
.btn-requestinfo, .btn-requestinfo { background: #fff;  color:#002d62; line-height: 1em; border:none;}
.btn-requestinfo:hover, .btn-requestinfo:hover {
  background: #fff;
  color: var(--brand-red);
 
  line-height: 1em;
  font-weight: 800;
}

/* Subtle divider between the 2 buttons */
.btn-divider-left { border-left: 1px solid rgba(255, 255, 255, .2); }

/* --- Calculator modal (host page) --- */
#calcContainer { position: relative; min-height: 420px; }

/* Overlay spinner; toggled with .is-on class from JS */
#calcLoading {
  position: absolute;
  inset: 0;
  display: none;               /* hidden by default */
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 2;                  /* above the iframe while loading */
}
#calcLoading.is-on { display: flex; }

/* Iframe sizing; refined via postMessage 'calc:resize' */
#calcContainer iframe#calcFrame {
  display: block;
  width: 100%;
  height: calc(100dvh - 160px);  /* modal header/footer allowance */
  border: 0;
}
@media (max-width: 576px) {
  #calcContainer iframe#calcFrame { height: calc(100dvh - 140px); }
}

/* Small extras for this template */
.avatar-80 { width: 80px; height: 80px; }
.obj-cover { object-fit: cover; }
.fs-90     { font-size: .9rem !important; }  /* used for the sticky bar links */


#calcContainer { position: relative; }

#calcLoading {
  position: absolute !important;
  inset: 0 !important;
  display: none;                 /* only shown while we’re loading */
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 2;                    /* sits over the iframe while active */
  min-height: 0 !important;      /* kill the inline min-height */
  pointer-events: none;          /* prevents accidental blocking */
}

#calcLoading.is-on { display: flex; }

 

/* Any status label you want the dot on */
.spec-status{
  display: inline-flex;             /* keeps text & dot aligned */
  align-items: center;
  gap: .45rem;
  font-weight: 700;
}

/* the dot itself (pseudo-element) */
.spec-status::before{
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--status-gray);
  flex: 0 0 .7rem;
  /* white ring so it shows on dark/blue ribbons */
  box-shadow: 0 0 0 2px #fff;
}

/* Map text to colors (case-insensitive) */
.spec-status[data-status*="under contract" i]::before{ background: var(--status-red); }
.spec-status[data-status="move-in ready" i]::before,
.spec-status[data-status="now available" i]::before{   background: var(--status-green); }
.spec-status[data-status="under construction" i]::before{ background: var(--status-yellow); }

.card-btnbar { display:flex; align-items:stretch; }
.card-btnbar .btn { border-radius:0; }
.btn.btn-learnmore { background:#002d62; color:#fff; width:33.333%; }
.btn.btn-requestinfo { background:#ffffff; color:#002d62; width:33.333%; }
.btn.btn-requesttour { background:#ED1C24; color:#fff; width:33.333%; }
.status-ribbon { font-size:.9rem; }
	
/* Diagonal SOLD ribbon */
.spec-ribbon {
  position: absolute;
  inset: 0;                 /* fill image wrapper */
  pointer-events: none;     /* don't block clicks on the image */
  z-index: 3;
}

.spec-ribbon.diagonal span{
  --ribbon-color: #ED1C24;  /* red */
  --ribbon-height: 44px;    /* thickness of the bar */
  --ribbon-angle: -35deg;   /* flip to 35deg for the other diagonal */

  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;              /* long enough to span the diagonal */
  height: var(--ribbon-height);
  line-height: var(--ribbon-height);
  transform: translate(-50%, -50%) rotate(var(--ribbon-angle));
  background: var(--ribbon-color);
  color: #fff;
  text-align: center;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  white-space: nowrap;
}

@media (max-width: 576px){
  .spec-ribbon.diagonal span{ --ribbon-height: 36px; font-size: .85rem; }
}






















	
	
/* About gallery: keep your masonry columns */
.aboutgallery-masonry { column-count: 1; column-gap: 12px; }
@media (min-width: 576px){ .aboutgallery-masonry { column-count: 2; } }
@media (min-width: 992px){ .aboutgallery-masonry { column-count: 3; } }
.aboutgallery-item { margin: 0 0 12px; display: inline-block; width: 100%; border-radius:8px; overflow:hidden; cursor:pointer; border:1px solid #ddd; }
.aboutgallery-item img { width:100%; height:auto; display:block; }

/* About tab cards polish */
#about-border .card { border-radius: 10px; }
#about-border .card-body { padding: 16px 18px; }
	
	iframe.video-100 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
 
	
	/* Gallery filter via container class */
#photogallery-border.filter-elev .photogallery-item[data-type="int"]  { display:none !important; }
#photogallery-border.filter-int  .photogallery-item[data-type="elev"] { display:none !important; }
/* Lightbox controls: side-centered arrows */
.lb-modal .modal-body{ position:relative; min-height:70vh; }
.lb-modal .lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:#000a; color:#fff; border:0;
  display:flex; align-items:center; justify-content:center;
  z-index:1056; cursor:pointer;
}
.lb-modal .lightbox-prev{ left:10px; }
.lb-modal .lightbox-next{ right:10px; }
.lb-modal .lightbox-nav:hover{ background:#000d; }
.lb-modal .btn-close{ z-index:1062; }
 


	
	/* Fix: modal video on mobile (Bootstrap .ratio + our .video-100) */
#aboutVideoModal .ratio { --bs-aspect-ratio: 56.25%; }               /* 16:9 */
#aboutVideoModal .ratio > * { position:absolute; inset:0; width:100%; height:100%; }
#aboutVideoModal .video-100 {
  width:100% !important;
  height:100% !important;     /* override height:auto */
  aspect-ratio:auto !important;
  margin:0 !important;
}
	
 
	
	/* Modal video sizing: keep a clean 16:9 and no extra blank space */
#aboutVideoModal .ratio { --bs-aspect-ratio:56.25%; }           /* 16:9 */
#aboutVideoModal .ratio > * { position:absolute; inset:0; width:100%; height:100%; }
#aboutVideoModal .video-100 { width:100%!important; height:100%!important; aspect-ratio:auto!important; margin:0!important; }

	 
@media (min-width: 576px){
  #photogallery-border .pg-mobile{ display:none !important; }
}

/* < sm (phones): hide the grid; show exactly ONE carousel based on the filter */
@media (max-width: 575.98px){
  /* hide the desktop grid on phones */
  #photogallery-border .photogallery-masonry{ display:none !important; }

  /* both mobile carousels are hidden by default... */
  #photogallery-border .pg-mobile{ display:none !important; }

  /* ...then we show ONE based on the container filter class set by JS */
  #photogallery-border.filter-elev .pg-mobile-elev { display:block !important; }
  #photogallery-border.filter-int  .pg-mobile-int  { display:block !important; }
}

/* --- About tab: mobile actions + carousel vs desktop grid --- */

/* ≥ sm (tablet/desktop): keep the grid, hide the mobile layout */
@media (min-width: 576px){
  #about-mobile { display:none !important; }
}

/* < sm (phones): hide desktop grid; show mobile layout */
@media (max-width: 575.98px){
  #about-media-grid { display:none !important; }
  #about-mobile     { display:block !important; }
}

/* Pretty blue action buttons for mobile */
.btn-fth {
  background:#002d62; color:#fff; border:0; font-weight:700;
  padding:.7rem 1rem; border-radius:.5rem;
}
.btn-fth:hover, .btn-fth:focus { background:#083b7f; color:#fff; }