/**
 * HOME PAGE Testimonials Slider Section Styles
 */
.testimonials-slider-section {
    padding: 60px 0;
    background-color: #f9f9f9; /* Light gray background, similar to example */
    overflow: hidden; /* Prevent horizontal scroll if swiper buttons are outside container */
}

/* Constrain content width within the section if needed */
#testimonials-slider-section .ast-container { 
    max-width: 1200px; /* Adjust as needed */
    margin-left: auto;
    margin-right: auto;
}

.testimonials-section-title {
    text-align: center;
    font-size: 1.8rem; 
    font-weight: 600; /* Example style */
    margin-bottom: 10px; 
    color: #333; /* Dark text color */
}

/* Wrapper for stars and total review count below the main title */
.section-rating-summary { 
    display: flex;
    flex-direction: column; /* Stack stars above review count */
    align-items: center;
    margin-bottom: 35px; /* Space below this summary block */
}

.summary-stars {
    display: flex;
    justify-content: center;
    margin-bottom: 10px; /* Space between stars and review count text */
}

.summary-stars .star-svg { 
    width: 22px; 
    height: 22px;
    margin: 0 2px; /* Spacing between stars */
}
/* Assuming astra_child_get_filled_star_svg uses 'filled' class and you pass a color */
.summary-stars .star-svg.filled path,
.testimonial-rating .star-svg.filled path { /* Apply to card stars too */
    fill: #FFC107; /* Gold/Yellow color for stars */
}
/* If your outline function adds 'outline' class */
.summary-stars .star-svg.outline path,
.testimonial-rating .star-svg.outline path {
    stroke: #FFC107;
    fill: none;
}


.total-reviews-count {
    text-align: center;
    font-size: 1rem; /* Example size */
    color: #555; /* Darker gray text */
    display: flex;
    align-items: center;
    justify-content: center;
}

.total-reviews-count .green-checkmark-icon {
    margin-left: 8px; /* Place icon before the text */
    display: inline-flex; 
    align-items: center;
}

.total-reviews-count .green-checkmark-icon svg {
    fill: #28a745; /* A pleasant green color */
    width: 22px; 
    height: 22px; 
}

.testimonials-swiper {
    position: relative; /* For positioning nav buttons */
    overflow: hidden; /* Important for peek-a-boo effect and slide containment */
    /* Padding for peek-a-boo effect on mobile is handled by slidesPerView/centeredSlides in JS */
}


/* NEW RULE: Override background for testimonial slides */
.testimonials-swiper .swiper-slide {
    background-color: transparent; /* Or use #f9f9f9 if issues with transparent */
    /* Ensure other .swiper-slide styles from hero-slider.css don't conflict if they are too general */
    /* For example, if hero-slider.css set a specific height or flex properties that are not desired here: */
    /* display: flex; */ /* Already set by Swiper's default, but can be explicit */
    /* align-items: stretch; */ /* If cards need to stretch to fill slide height */
    /* justify-content: center; */
}


.testimonial-slide { /* This class is on the same element as .swiper-slide for testimonials */
    box-sizing: border-box;
    height: auto; /* Slides will have equal height by default in Swiper if not overridden */
    display: flex; /* This ensures the card within can be centered if slide is wider */
    justify-content: center; /* Center card if slide is wider */
    padding-bottom: 10px; /* Space for shadow */
    padding-top: 5px; /* Space for shadow */
}

.testimonial-card {
    background-color: #fff;
    border: 1px solid #eaeaea; /* Lighter border */
    border-radius: 8px; /* Rounded corners */
    padding: 25px;
    text-align: left;
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure card takes up slide width */
    height: 100%; /* Comment out for height be auto based on content, or set if fixed height is desired */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Example shadow */
    overflow: hidden; /* To remove any "black filling" in corners if background bleeds */
}

.testimonial-rating {
    margin-bottom: 12px; /* Space after stars */
    display: flex; 
}

.testimonial-rating .star-svg { 
    width: 17px; /* Slightly smaller stars in card */
    height: 17px;
    margin-right: 3px;
}

.testimonial-excerpt {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #444; /* Darker excerpt text */
    flex-grow: 1; 
    margin-bottom: 15px;
}

.testimonial-author-meta {
    margin-top: auto; /* Pushes this block to the bottom of the card */
    padding-top: 15px; 
    /* border-top: 1px solid #f0f0f0; Removed horizontal line */
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow date to wrap nicely */
    gap: 8px; /* Space between items in this row */
}

.testimonial-author-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.testimonial-verified-reviewer-icon {
    display: inline-flex; /* Changed from margin-left to rely on gap */
    align-items: center;
}
.testimonial-verified-reviewer-icon svg { /* Assuming your ACF field outputs raw SVG */
    width: 16px; 
    height: 16px; 
    fill: #28a745; /* Light green */
}


.testimonial-date {
    font-size: 0.8rem;
    color: #666; /* Slightly darker date */
    /* margin-left: auto; Removed to allow natural flow with gap */
}

/* Swiper Navigation Buttons */
.testimonials-swiper .swiper-button-prev,
.testimonials-swiper .swiper-button-next {
    color: #333; /* Arrow color */
    width: auto; /* Auto width to fit content (arrow icon) */
    height: auto; /* Auto height */
    background-color: transparent; /* MODIFIED: No background */
    border-radius: 0; /* MODIFIED: No radius needed */
    box-shadow: none; /* MODIFIED: No shadow */
    transition: color 0.2s ease, opacity 0.2s ease; /* Adjusted transition */
    opacity: 0.8;
    display: flex; /* Ensure they are visible by default (Swiper's default) */
    align-items: center;
    justify-content: center;
    z-index: 10; 
    /* Adjust size of the clickable area if needed, keeping background transparent */
    padding: 10px; /* Add some padding to make it easier to click */
    position: absolute; /* Ensure position is absolute for top/transform */
    top: 50%; /* Position from the top */
    transform: translateY(-50%); /* Vertically center */
}
.testimonials-swiper .swiper-button-prev:hover,
.testimonials-swiper .swiper-button-next:hover {
    background-color: transparent; /* Ensure no background on hover */
    color: #000;
    opacity: 1;
}
.testimonials-swiper .swiper-button-prev::after,
.testimonials-swiper .swiper-button-next::after {
    font-size: 16px; 
    font-weight: bold;
}

/* Position nav buttons (adjust if ast-container is not used or if slider is full-width) */
.testimonials-swiper .swiper-button-prev {
    left: 1px; /* Position slightly outside the content flow */
}
.testimonials-swiper .swiper-button-next {
    right: 1px; /* Position slightly outside the content flow */
}

/* Swiper Pagination Dots */
.testimonials-swiper .swiper-pagination {
    position: relative; /* Static position within the flow */
    bottom: auto; /* Reset bottom positioning */
    margin-top: 25px; /* Space above dots */
}
.testimonials-swiper .swiper-pagination-bullet {
    background-color: #cccccc; /* Lighter inactive dots */
    opacity: 1;
    width: 9px;
    height: 9px;
    transition: background-color 0.2s ease;
}
.testimonials-swiper .swiper-pagination-bullet-active {
    background-color: #555555; /* Darker active dot */
}


/* Responsive adjustments for the slider */
@media (max-width: 1023px) { /* Tablet and below, where slidesPerView < 4 */
    .testimonials-swiper .swiper-button-prev {
        left: 5px; 
    }
    .testimonials-swiper .swiper-button-next {
        right: 5px; 
    }
}

@media (max-width: 767px) { /* Mobile view */
    .testimonials-swiper {
        padding-left: 0; /* JS handles peek with slidesPerView & centeredSlides */
        padding-right: 0;
    }
    .testimonials-swiper .swiper-button-prev,
    .testimonials-swiper .swiper-button-next {
        display: none; /* hide on mobile */
    }
    
    .testimonials-swiper .swiper-pagination {
        display: none; /* Hide pagination dots on mobile as requested */
    }
    .testimonial-card {
        padding: 20px;
    }
    .testimonials-section-title {
        font-size: 1.6rem; /* Adjusted for consistency */
    }
     #testimonials-slider-section .ast-container {
        padding-left: 0; /* Remove container padding if slider has its own for peeking */
        padding-right: 0;
    }
}