.strpgn-rating-container {
display: flex;
flex-direction: column; align-items: center;
justify-content: center;
margin: 20px 0;
}
.strpgn-star-rating {
display: flex; justify-content: center;
margin-bottom: 10px;
}
#thank-you-message {
color: #111111;
font-weight: bold;
margin-bottom: 10px; text-align: center; font-size: 1.2rem; display: none; letter-spacing: 2.5px;
text-transform: capitalize;
}
.strpgn-rating-content {
display: flex;
align-items: center; }
.strpgn-average-rating {
font-size: 4.7rem; font-weight: bold;
margin-right: 20px;
}
.strpgn-rating-details {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.strpgn-stars {
display: flex;
justify-content: flex-start;
margin-bottom: 5px;
}
.strpgn-star {
color: #9d9d9d; font-size: 2.5rem; margin: 0 2px;
cursor: pointer;
transition: color 0.4s ease; } .strpgn-star:active {
transform: scale(1.2); }
.strpgn-star-filled {
color: #26f553; }
.strpgn-star-empty {
color: #9d9d9d; }
.strpgn-star:hover {
color: #ffed25; }
.strpgn-total-ratings {
font-size: 16px;
color: #555;
margin-top: 4px;
padding-left: 22px;
}
#strpgn-message-container {
margin-bottom: 10px;
}
.strpgn-success-message, .strpgn-error-message {
padding: 10px;
border-radius: 5px;
text-align: center;
}
.strpgn-success-message {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.strpgn-error-message {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.strpgn-star-rating {
display: none;
} @media (max-width: 768px) {
.strpgn-rating-container {
flex-direction: column;
}
.strpgn-average-rating {
font-size: 3rem;
margin-right: 0;
margin-bottom: 10px;
}
.strpgn-star {
font-size: 2rem;
}
}