@charset "utf-8";
/* CSS Document */

/* --- Global Styles for Review Cards --- */
/* --- Review Card Container --- */
.review-card {
    /* Existing styles here */
    padding: 20px;
	border: 1px solid #CCC;
	border-radius: 10px;
}

/* --- Review Header Layout --- */
.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
}

.review-author-info {
    display: flex;
    flex-direction: column;
    margin-left: 0px;
}
.review-author-name {
	font-weight: 500;
}

/* --- Profile Photo / Avatar --- */
	.profile-photo-wrapper {
    /* Sets the context for absolute positioning */
    position: relative; 
    
    /* Match the size of the profile photo + icon overlap area */
    width: 50px; /* Assuming photo is 40px wide */
    height: 50px; 
    margin-right: 5px; /* Add margin to separate from name */
}

.review-profile-photo {
    /* Keep photo positioning simple */
    position: relative;
    z-index: 1; /* Ensure photo stays below the icon if needed */
    width: 40px; /* Adjust size to fit wrapper */
    height: 40px; 
    border-radius: 50%;
    object-fit: cover;
    /* Optional: Small border/shadow to define the circle */
    /* box-shadow: 0 0 0 1px #fff, 0 0 0 2px #ddd; */
}

.default-avatar {
    background-color: #4285f4; /* Google Blue */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

/* --- Meta Information (Icon, Verified Check, Time) --- */
.review-meta {
	display: none;
	/* display: flex; */
    align-items: center;
    font-size: 0.85em;
    color: #555;
}

.review-source-icon {
    /* Take it out of the normal document flow */
    position: absolute; 
    z-index: 10; /* Ensure it is on top of the profile photo */
    
    /* Position it to the bottom right corner of the wrapper */
    bottom: 0; 
    right: 0; 
    
    /* Size the circular icon container */
    width: 22px; 
    height: 22px; 
    border-radius: 50%;
    
    /* Optional: White background circle and shadow for the floating effect */
    background: white; 
    padding: 2px; /* Padding to create the white ring around the G */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
    display: flex; 
    align-items: center;
    justify-content: center;
}
.review-source-icon .google-svg-icon {
    width: 100%;
    height: 100%;
}

p.review-text {
	margin-bottom: 0px !important;
}

/* --- Read More Link --- */
.read-more-link {
    color: #4285f4; /* Google Blue link color */
    text-decoration: none;
    font-weight: 500;
    margin-top: 5px;
    display: block;
}

.review-star.full {
    color: gold; /* Yellow stars */
	font-size: 24px;
}

/* --- Masonry Grid Layout --- */
.review-masonry-grid {
    /* Use CSS Grid for the masonry effect */
    display: grid;
    /* Adjust this for desired number of columns */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 20px;
}

/* --- Carousel Layout (Needs a library like Splide/Slick) --- */
.review-carousel-track {
    /* This will be handled by the carousel library's CSS */
    display: flex; 
    overflow-x: auto; 
    padding: 10px 0;
}
/* If using a carousel, you'll need the CSS for that library as well */


/* --- CAROUSEL BASE STYLING (General Principles) --- */

/* Ensures the entire slide (the LI) is positioned correctly */
.splide__list > .splide__slide {
    /* Splide's JS handles the width calculation, but this ensures no overriding margins */
    margin: 0; 
    padding: 0px; /* Add left and right padding to LI for spacing between cards */
    box-sizing: border-box;
    /* We move the min-height and flex properties to the review-card for equal height */
}

/* Apply height, width, and flexbox styles directly to the .review-card */
.splide__slide .review-card {
    /* Use the flex properties on the CARD for vertical alignment */
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    
    /* Set a fixed minimum height for consistency */
    min-height: 250px; 
    height: 100%; /* Important: Makes the card fill the entire LI height */
    
    /* Remove any redundant margins now handled by the LI padding */
    margin: 0; 
}

/* Ensure the review text area takes up all available space */
.review-card .review-text {
    flex-grow: 1; /* Allows the text area to expand to fill the card height */
    overflow: hidden; /* Important for truncation effect */
    margin-bottom: 10px;
}

/* Ensure Read More link/Review date is always at the very bottom */
.read-more-link {
    margin-top: auto; /* Pushes the element to the bottom of the flex container */
}


/* --- SPLIDE LIBRARY DEFAULT STYLING (Placeholder - You'd include the library's CSS too) --- */

.splide__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    touch-action: pan-y;
}