/**
 * Fix for Slick Carousel arrows - remove white arrows
 * 
 * @package Alpha_Futevolei
 */

/* Hide white arrows generated with ::before pseudo-element */
.slick-prev:before,
.slick-next:before {
    content: "" !important;
    display: none !important;
}

/* Style the arrow buttons to make sure they're visible without the ::before content */
.slick-arrow,
.slick-next,
.slick-prev {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9 !important;
}

/* Add custom black arrow icons */
.slick-prev {
    left: 10px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="%23333"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.slick-next {
    right: 10px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="%23333"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Hover effects */
.slick-prev:hover,
.slick-next:hover {
    background-color: #f5f5f5 !important;
}

/* Make sure arrows are visible on thumbnail sliders too */
.thumbnails-slider .slick-prev,
.thumbnails-slider .slick-next {
    width: 30px !important;
    height: 30px !important;
}

/* Ensure visibility on all backgrounds */
.slick-prev,
.slick-next {
    opacity: 0.8 !important;
}

.slick-prev:hover,
.slick-next:hover {
    opacity: 1 !important;
}