/* Container for the carousel */
.review-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Wrapper for the carousel slides */
.review-carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}

/* Individual slide styling */
.review-slide {
    box-sizing: border-box;
    padding: 10px;
}

/* Default: Show 2 slides at a time */
.review-slide {
    min-width: 50%; /* Two slides visible at a time for larger screens */
}

/* Review header container to hold stars and reviewer info */
.review-header {
    display: flex;
    flex-direction: column; /* Stack stars and info vertically */
    align-items: flex-start; /* Align content to the left by default */
}

/* Reviewer information and date styling */
.reviewer-info {
    margin-top: 5px; /* Space between stars and reviewer info */
    margin-left:0px;
    font-size: 16px; /* Adjust font size */
    color: #555; /* Subtle color for reviewer info */
}

/* Review message styling */
.review-message {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}

/* Tablet: Show 2 slides at a time */
@media (max-width: 768px) {
    .review-slide {
        min-width: 50%;
    }
}

/* Mobile: Show 1 slide at a time */
@media (max-width: 480px) {
    .review-slide {
        min-width: 100%; /* One slide visible at a time */
    }

    .review-carousel-container {
        padding: 0; /* No padding on mobile to maximize space */
    }

    /* Adjust the review header to center align on mobile */
    .review-header {
        align-items: center; /* Center content for mobile view */
    }

    /* Adjust the stars (rateit) on mobile */
    .rateit {
        margin-bottom: 10px; /* Add space below stars */
    }

    /* Center reviewer info and adjust spacing on mobile */
    .reviewer-info {
        margin-top: 5px;
        font-size: 14px; /* Smaller font size on mobile */
        text-align: center; /* Center text for mobile */
    }

    /* Adjust review message font size for mobile */
    .review-message {
        font-size: 14px;
        text-align: center; /* Center review message for better balance on mobile */
    }
}

/* Carousel controls */
.review-carousel-prev, .review-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 165, 0, 0.7) !important; /* Transparent orange */
    color: white !important;
    border: none !important;
    padding: 10px !important;
    cursor: pointer !important;
    z-index: 20; /* Ensure buttons are above carousel */
    width: 40px !important; /* Fixed size */
    height: 40px !important;
    border-radius: 50% !important; /* Circular buttons */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px; /* Increase font size for visibility */
}

/* Position buttons outside review content */
.review-carousel-prev {
    left: 10px !important;
}

.review-carousel-next {
    right: 10px !important;
}

/* Mobile-specific adjustments for carousel controls */
@media (max-width: 480px) {
    .review-carousel-prev, .review-carousel-next {
        width: 30px !important;
        height: 30px !important;
        padding: 8px !important;
        font-size: 14px; /* Adjust font size for mobile */
    }

    .review-carousel-prev {
        left: 5px !important; /* Adjust position for mobile */
    }

    .review-carousel-next {
        right: 5px !important; /* Adjust position for mobile */
    }
}