/* Smart Reviews Carousel - Modern Design */
.reviews-carousel {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Reduced padding to expand card area */
    overflow: visible; /* Allow arrows to overlap the card area */
}

.reviews-carousel-container {
    overflow: hidden;
    border-radius: 0; /* Remove border-radius for cleaner look */
    position: relative;
}

.reviews-carousel-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smoother easing */
    align-items: stretch; /* Ensure equal height */
}

.reviews-carousel .review-card {
    flex: 0 0 calc(33.333% - 24px) !important; /* PC: 3 cards with proper spacing */
    margin: 0px 12px 20px !important;
    min-width: 0 !important;
    box-sizing: border-box;
    height: auto; /* Allow natural height */
}

.reviews-carousel .review-card:last-child {
    margin-right: 0 !important; /* Remove margin from last card */
}

/* Mobile: 1 card per view */
@media (max-width: 768px) {
    .reviews-carousel {
        padding: 0;
    }
    
    .reviews-carousel .review-card {
        flex: 0 0 calc(100% - 24px) !important;
    }
}

/* Modern Navigation Buttons - Minimalist Arrow Style */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent; /* No fill background */
    color: rgba(150, 150, 150, 0.7); /* Light gray arrow */
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 0; /* No border radius */
    cursor: pointer;
    font-size: 24px; /* Larger arrow size */
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: none; /* Remove glass effect */
    box-shadow: none; /* Remove shadow */
}

.carousel-btn:hover {
    color: rgba(100, 100, 100, 0.9); /* Darker gray on hover */
    transform: translateY(-50%) scale(1.1); /* Slightly larger on hover */
    background: transparent; /* Keep transparent */
}

.carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
    color: rgba(80, 80, 80, 1); /* Even darker on click */
}

.carousel-btn-prev {
    left: 10px; /* Overlap the card area */
}

.carousel-btn-next {
    right: 10px; /* Overlap the card area */
}

@media (max-width: 768px) {
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 20px; /* Keep good visibility on mobile */
    }
    
    .carousel-btn-prev {
        left: 5px; /* Closer to edge on mobile */
    }
    
    .carousel-btn-next {
        right: 5px; /* Closer to edge on mobile */
    }
}

/* Modern Minimalist Indicators */
.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    gap: 12px;
}

.indicator {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 4px; /* Rounded rectangle instead of circle */
    background: rgba(26, 26, 26, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.indicator.active {
    background: #1a1a1a; /* Solid dark color */
    width: 24px; /* Expand active indicator */
    transform: none; /* Remove scale transform */
}

.indicator:hover:not(.active) {
    background: rgba(26, 26, 26, 0.4);
}

/* Disable text selection on carousel */
.reviews-carousel {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Smooth card transitions */
.reviews-carousel .review-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reviews-carousel .review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Hide scrollbars */
.reviews-carousel-container::-webkit-scrollbar {
    display: none;
}

.reviews-carousel-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}