/* Single Property Page Specific Styles */
/* Enhanced carousel navigation for property galleries */

/* Add circular pseudo-element behind carousel navigation icons */
.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: #1f537a;
    border: 2px solid #1f537a;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: -1;
}

.carousel-control-prev:hover .carousel-control-prev-icon::before,
.carousel-control-next:hover .carousel-control-next-icon::before {
    background: #174b60;
    border-color: #1f537a;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Also apply to modal carousel */
#imageModal .carousel-control-prev-icon::before,
#imageModal .carousel-control-next-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: #1f537a;
    border: 2px solid #1f537a;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: -1;
}

#imageModal .carousel-control-prev:hover .carousel-control-prev-icon::before,
#imageModal .carousel-control-next:hover .carousel-control-next-icon::before {
    background: #174b60;
    border-color: #1f537a;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}