/* Container Styles */
.grp-container {
    display: flex;
    flex-wrap: wrap;
}

/* Left Side Styles */
.grp-left {
    width: 20%; /* 20% on desktop */
    padding: 0px;
    text-align: left; /* Left-align content */
    order: 1; /* Default order for desktop */
}

/* Right Side Styles */
.grp-right {
    width: 80%; /* 80% on desktop */
    padding: 10px;
    order: 2; /* Default order for desktop */
}

/* Rating Styles */
.grp-rating {
    font-size: 2.5em;
    font-weight: bold;
    margin: 0;
    color: rgba(255, 255, 255, 0.7); /* Font color */
}

.grp-ratings-label {
    font-size: 1em;
    color: rgba(255, 255, 255, 0.7); /* Font color */
    margin-bottom: 20px;
}

/* Total Reviews Styles */
.grp-total-reviews {
    font-size: 2.5em !important;
    font-weight: bold;
    margin: 0;
    color: rgba(255, 255, 255, 0.7); /* Font color */
}

.grp-reviews-label {
    font-size: 1em;
    color: rgba(255, 255, 255, 0.7); /* Font color */
    margin-bottom: 20px;
}

/* Navigation Buttons */
.grp-navigation {
    margin-bottom: 20px; /* Space below navigation buttons */
    display: flex;
    gap: 10px; /* Space between buttons */
}

.grp-prev,
.grp-next {
    background-color: rgba(255, 255, 255, 0.2); /* Button color */
    color: rgba(255, 255, 255, 0.7); /* Font color */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Border color */
    border-radius: 50%; /* Round circle */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.grp-prev:hover,
.grp-next:hover {
    background-color: rgba(234, 179, 8, 1); /* Hover color */
}

/* All Reviews Button */
.grp-all-reviews {
    display: inline-block;
    padding: 10px 20px;
    background-color: rgba(234, 179, 8, 1); /* Button color */
    color: rgba(0, 0, 0, 1); /* Font color */
    text-decoration: none;
    border-radius: 5px;
    margin-bottom: 20px; /* Space below the button */
    transition: background-color 0.3s ease;
}

.grp-all-reviews:hover {
    background-color: rgba(234, 179, 8, 0.9); /* Hover color */
    color: rgba(0, 0, 0, 1); /* Font color on hover */
}

/* Review Styles */
.grp-review {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Border color */
    border-radius: 8px;
    margin: 10px;
    height: 350px; /* Fixed height for reviews */
}

.grp-author {
    font-weight: bold;
    margin-top: 10px; /* Space above reviewer name */
    color: rgba(255, 255, 255, 0.7); /* Font color */
}

.grp-text {
    margin: 10px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7); /* Font color */
}

.grp-time {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7); /* Font color */
}

/* Star Rating Styles */
.grp-star-rating {
    margin: 10px 0;
    font-size: 20px;
    color: #ccc; /* Default color for empty stars */
}

.grp-star {
    display: inline-block;
    margin-right: 5px;
}

.grp-star-filled {
    color: #ffcc00; /* Yellow color for filled stars */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .grp-left,
    .grp-right {
        width: 100%; /* Full width on mobile */
    }

    .grp-left {
        text-align: center; /* Center-align left content on mobile */
        order: 2; /* Move left side to the bottom */
    }

    .grp-right {
        order: 1; /* Move right side to the top */
    }

    .grp-navigation {
        justify-content: center; /* Center navigation buttons on mobile */
    }
}