/* ==========================================================================
   Realty Listing Gallery Styles
   ========================================================================== */

/* Gallery Container */
#gallery.swiper-slider {
    position: relative;
    overflow: visible !important; /* Ensure buttons aren't clipped */
}

/* Navigation Buttons */
#gallery .swiper-button-next,
#gallery .swiper-button-prev {
    width: 40px;
    height: 40px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    overflow: visible; /* Prevent clipping of the circle */
    padding: 2px; /* Add small padding to prevent edge clipping */
}

/* Hide default Swiper arrow pseudo-elements */
#gallery .swiper-button-next::after,
#gallery .swiper-button-prev::after {
    display: none;
}

/* Add custom SVG arrows using ::before pseudo-elements */
#gallery .swiper-button-next::before,
#gallery .swiper-button-prev::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background-size: 100% 100%; /* Use 100% to ensure full circle displays */
    background-repeat: no-repeat;
    background-position: center;
    overflow: visible;
    flex-shrink: 0;
}

/* Next button - Group 3257.svg */
#gallery .swiper-button-next::before {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35"%3E%3Cellipse cx="18" cy="17.5" rx="18" ry="17.5" fill="%23fff"/%3E%3Cg transform="translate(12.904 9.654)"%3E%3Cpath d="M0,0,7.932,10.422,15.863,0" transform="translate(0 15.863) rotate(-90)" fill="none" stroke="%23000" stroke-linejoin="round" stroke-width="1.5"/%3E%3C/g%3E%3C/svg%3E');
}

/* Previous button - Group 3256.svg */
#gallery .swiper-button-prev::before {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35"%3E%3Cg transform="translate(-38 -409.352)"%3E%3Cellipse cx="18" cy="17.5" rx="18" ry="17.5" transform="translate(38 409.352)" fill="%23fff"/%3E%3Cg transform="translate(50.674 419.005)"%3E%3Cpath d="M0,10.422,7.932,0l7.932,10.422" transform="translate(0 15.863) rotate(-90)" fill="none" stroke="%23000" stroke-linejoin="round" stroke-width="1.5"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

/* Position Previous Button */
#gallery .swiper-button-prev {
    left: 15px;
}

/* Position Next Button */
#gallery .swiper-button-next {
    right: 15px;
}

/* Optional: Add hover effects */
#gallery .swiper-button-next:hover,
#gallery .swiper-button-prev:hover {
    opacity: 0.8;
}

/* Optional: Disabled state */
#gallery .swiper-button-next.swiper-button-disabled,
#gallery .swiper-button-prev.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}