/*
  _____          _____   ____  _    _  _____ ______ _      
 / ____|   /\   |  __ \ / __ \| |  | |/ ____|  ____| |     
| |       /  \  | |__) | |  | | |  | | (___ | |__  | |     
| |      / /\ \ |  _  /| |  | | |  | |\___ \|  __| | |     
| |____ / ____ \| | \ \| |__| | |__| |____) | |____| |____ 
 \_____/_/    \_\_|  \_\\____/ \____/|_____/|______|______|

CSS SPECIFIC TO BOOTSTRAP CAROUSEL

KEEP CAROUSEL ABOVE MAP CONTROLS 

*/

.carousel,
.carousel-inner,
.carousel-item {

  width: 100%;
  height: 100%;
}

.carousel,
.carousel::after,
.carousel .carousel-inner,
.carousel .carousel-item,
.carousel .carousel-item img {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  background-position: center center ;
  background-repeat: no-repeat;
}
.carousel .carousel-inner { background-color: var(--brand); }
.carousel .carousel-item { }

.carousel .carousel-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  opacity: .3;
  background-color: var(--footer-bg);
}
.carousel .carousel-item img { object-fit: cover; transform: scale(1.2); /* hide google logo */ }

/*.carousel .carousel-item img:first-child { height: 110%; }*/

#floor-plans.carousel .carousel-item {
  background-color: var(--brand);
  display: flex;
  justify-content: center;
  align-items: center;
}

#floor-plans.carousel .carousel-item > img { 
  object-fit: contain; 
  transform: scale(.7);
}

/* CAROUSEL CAPTION */

.carousel .carousel-caption {
  padding: 15px;
  background-color: transparent;
  margin-bottom: 100px;
  display: flex !important;
  flex-direction: column;
  justify-content: space-around;
  z-index: 2;
}
.carousel .carousel-caption * { 
  color: var(--white); 
}
.carousel .carousel-caption h2,
.carousel .carousel-caption p {
  padding: 0;
  margin: 0;
}

.carousel-prev-next-navs {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
/*  background-color: rgba(0, 0, 0, .3);*/
  z-index: 1;
}

.nav.carousel-prev-next-navs li {
  width: 50%;
  height: 100%;
  margin-right: 0px !important;
  background-color: transparent;
}

.carousel-prev-next-navs a {
  height: 100% !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.carousel-prev-next-navs li:first-of-type a {
  padding-left: 30px;
  justify-content: flex-start;

}
.carousel-prev-next-navs li:first-of-type:hover {
/*  background-image: linear-gradient( to left, transparent 90%, var(--brand) 100%) !important;*/
}

.carousel-prev-next-navs li:last-of-type a {
  padding-right: 30px;
  justify-content: flex-end;
}
  

.carousel-prev-next-navs li:last-of-type:hover {
/*  background-image: linear-gradient(to right, transparent 90%, var(--brand) 100%) !important;*/
}

.carousel-prev-next-navs a i {
  color: var(--white) !important;
}


/* CAROUSEL PREV / NEXT BUTTONS */

.carousel-inner button.carousel-control-prev,
.carousel-inner button.carousel-control-next {
  height: 100% !important; /* button override */
  width: 50% !important;
  background-color: transparent;
  border-radius: 0; 
  transition: var(--transition);
/*  z-index: 2;*/
}
.carousel-inner button.carousel-control-prev {
  padding-left: 30px;
  display: flex;
  justify-content: flex-start;
}
.carousel-inner button.carousel-control-next {
  padding-right: 30px;
  display: flex;
  justify-content: flex-end;
}
.carousel-inner button.carousel-control-prev:hover,
.carousel-inner button.carousel-control-prev:active {
  background: linear-gradient(to right, rgba(26,30,35,.6), transparent ) !important;
}
.carousel-inner button.carousel-control-next:hover,
.carousel-inner button.carousel-control-next:active {
  background: linear-gradient(to left, rgba(26,30,35,.6), transparent ) !important;
}
.carousel-inner button.carousel-control-prev:active,
.carousel-inner button.carousel-control-prev:focus, 
.carousel-inner button.carousel-control-next:active,
.carousel-inner button.carousel-control-next:focus {
  box-shadow: var(--box-shadow-none);
}
.carousel-inner button.carousel-control-prev:focus,
.carousel-inner button.carousel-control-next:focus {
  background: transparent !important;
}

.carousel-inner .carousel-indicators [data-bs-target] {}

.slider-controls .carousel-indicators {
	padding: 15px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slider-controls .carousel-indicators li {
  background-color: var(--box-border);
  border: 1px solid white;
}
.slider-controls .carousel-indicators li:hover {
  background-color: var(--brand-light);
}
.slider-controls .carousel-indicators li.active {
  background-color: var(--brand) !important;
}


.carousel-inner button.carousel-control-prev i,
.carousel-inner button.carousel-control-next i {
  color: var(--white);
}

/* IMAGE POPOVERS ON IDX IMAGE CAROUSEL */





body .slider-controls .carousel-indicators li {
	background-color: var(--white);
}

.slider-controls li.dot {

	padding: 0; /* Adjust padding as necessary */
  
	width: var(--small-dot-size);
	min-width: var(--small-dot-size);
	max-width: var(--small-dot-size);

	height: var(--small-dot-size);
	min-height: var(--small-dot-size);
	max-height: var(--small-dot-size);


	border-radius: var(--small-dot-radius) !important;
	overflow: hidden;
}

.carousel .slider-controls {
  padding: 30px;
  flex-direction: column;
}

.carousel .slider-controls {
  padding: 6px;
}
.carousel .slider-controls ul {
  padding: 0px;
  margin: 0px;
}
.carousel .slider-controls ul.row-1 {
  margin-bottom: 3px;
}
.carousel .slider-controls ul.row-2 {
  margin-top: 3px;
}

.carousel-indicators [data-bs-target] { 
  opacity: .7;
}
.carousel-indicators [data-bs-target]:hover { 
  opacity: 1;
}

.card .media-subnav,
.card .slider-controls {

  display: none;
  
}

.carousel,
.carousel-inner,
.carousel-item {

  width: 100%;
  height: 100%;
}




body .popover {
    max-width: 300px;         /* Or whatever width you want */
    overflow: hidden;         /* Prevent image overflow */
    padding: 0;               /* Optional, to control spacing */
    border-radius: var(--border-radius);    /* Optional, visual polish */
}

body .popover-header {
    padding: 0;               /* Remove padding if you want the image flush */
}
body .popover-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: var(--border-radius);
}
body .popover img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);   /* Optional */
}


body .popover .popover-arrow {

}

body .popover.bs-popover-top {}    /* top placement */
body .popover.bs-popover-bottom {} /* bottom placement */
body .popover.bs-popover-start  {} /* left placement */
body .popover.bs-popover-end  {}   /* right placement */


.carousel:focus {
    outline: none !important;
    box-shadow: none !important;
}