/*!
 * Customer Review Card from Google Styles
 * 
 * Copyright (c) 2025 (mpvprivatecar.com)
 * All rights reserved.
 *
 * Description:
 *  - Custom CSS for google user review card layout
 *
 * License:
 *  This CSS is proprietary and intended for use only in authorized projects.
 *  No part of this code may be copied, modified, or distributed
 *  without explicit written permission from the author.
 */

.outerShapeCard {
    position: relative;
    border-radius: 18px;
    height: 100%;
    background: rgb(245 248 245);
}

.outerShapeCard .shape {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 30px 35px;
}

.outerShapeCard .shape .user_image {
    width: 120px;
    margin-top: -60px;
}

.outerShapeCard .shape .user_image img {
    border-radius: 50%;
    border: 6px solid #88ebd8;
}

.outerShapeCard .shape .user_name {
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 20px 0px 0px;
}

.outerShapeCard .shape .star_rate {
    color: rgb(251 173 29);
    width: 100%;
    font-size: 2rem;
    text-align: center;
    padding: 0px 0px 15px;
}

.outerShapeCard .shape .comment {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    position: relative;
}

.read-more-toggle {
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    cursor: pointer;
}

.read-more-toggle:hover {
    background: #f9fafb;
}

.comment-text {
    display: inline;
}


@media(max-width:500px) {
    .user_comment_card .user_comment p.comment_text {
        -webkit-line-clamp: unset;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-align: left;
        -webkit-line-clamp: inherit !important;
        overflow: auto !important;
        overflow-x: hidden !important;
        padding-right: 10px;
        scrollbar-color: #8d8d8d #e0e0e0;
        scrollbar-width: thin;
        height: 120px !important;
    }
}

@media (max-width: 500px) {
	.outerShapeCard .shape {
		padding: 1vw 5vw 6vw;
	}
	
	.outerShapeCard .shape .user_image {
		width: 31vw;
		margin-top: -15vw;
	}
	
	.outerShapeCard .shape .user_name {
		font-size: 5vw;
		line-height: 1;
		padding: 6vw 0vw 0.5vw;
	}
	
	.outerShapeCard .shape .star_rate {
		font-size: 7vw;
		padding: 0px 0px 2vw;
	}
	
	.outerShapeCard .shape .comment {
		font-size: 4vw;
		line-height: 1.5;
	}
	
	.read-more-toggle {
		font-size: 3.vw;
	}
	
    .swiper_MPVCustomerReviews .swiper-slide {
        width: 80%
    }

    .swiper_MPVCustomerReviews .swiper-slide {
        padding-left: 0px;
        box-sizing: unset
    }

    .swiper_MPVCustomerReviews .swiper-slide:last-child {
        padding-right: 0px;
        box-sizing: unset
    }

    .swiper_MPVCustomerReviews .swiper-slide img {
        opacity: 0.7
    }

    .swiper_MPVCustomerReviews .swiper-slide.swiper-slide-active img {
        opacity: 1
    }

    .swiper_MPVCustomerReviews {
        padding-bottom: 40px;
        overflow: visible;
    }
}

@media (min-width: 760px) {
    .swiper_MPVCustomerReviews {
        overflow: visible;
        padding-top: 80px;
    }
}