/* ===========================
   General Styles for Post Rating
   =========================== */

/* Container for the rating section */
#post-rating {
    background-color: #ffffff;
    border-radius: 1.5rem;
    padding-bottom: 1px;
    margin: 3rem auto;
    padding: 1.3rem 1rem;
}

/* Centered heading within the rating section */
#post-rating h2 span , #post-rating  .post-rating-tite {
    text-align: center;
    padding-bottom: 15px;
    margin: 0px !important;
    margin-top: 0px !important;
    padding-top: 0px !important;
    font-size: 22px !important;
    font-weight: 700;
}


/* ===========================
   Star Rating Styles
   =========================== */

/* Star rating container styling */
.star-rating {
    direction: rtl; /* Reverses the order for right-to-left star display */
    unicode-bidi: bidi-override; /* Ensures the stars are displayed in reverse order */
    display: flex;
    justify-content: center;
    font-size: 2rem; /* Size of the stars */
}

/* Hide the radio buttons */
.star-rating input[type="radio"] {
    display: none;
}

/* Styling for star labels */
.star-rating label {
    color: #6b63ff73;
    cursor: pointer;
    transition: color 0.3s ease; /* Smooth transition when hovering or selecting */
    padding: 0 5px; /* Spacing between stars */
    font-size: 1.4rem; /* Size of the stars */
}

/* Unicode for a filled star */
.star-rating label:before {
    content: "\2605"; /* Unicode for a filled star */
}

/* Styling for selected stars */
.star-rating input[type="radio"]:checked ~ label {
    color: #f5b301; /* Color of the selected stars */
}

/* Styling for hovered stars */
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #f5b301; /* Color when hovering over stars */
}

/* ===========================
   Rating Form Styles
   =========================== */

/* Form container within the rating section */
#post-rating #rating-form {
    display: grid;
    justify-items: center;
    gap: 20px; /* Space between form elements */
}

/* ===========================
   Submit Button Styles
   =========================== */

/* Styling for the submit button */
#post-rating .submit-button-post-rating {
    text-transform: capitalize !important;
    font-size: 11px !important;
    padding: 6px 11px !important;
    border: 2px solid #ffffff !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: 2px solid #6b63ff !important;
}

/* Styling for the submit button on hover */
.submit-button-post-rating:hover {
    opacity: 0.6;
}

/* ===========================
   Average Rating Display
   =========================== */

/* Container for the average rating display */
.average-rating {
    font-size: 17px;
    text-align: center;
    display: grid;
    justify-items: center;
    margin-top: 30px;
    margin-bottom: 0px;
}

/* Container for the stars in the average rating display */
.average-rating-stars {
    display: flex;
    align-items: center;
    margin-top: 5px;
    justify-content: center;
}

/* Styling for individual stars in the average rating display */
.average-rating-stars .star {
    font-size: 1.5rem;
    color: #f5b301; /* Color for filled stars */
    margin-right: 5px; /* Space between stars */
}

/* Styling for empty stars in the average rating display */
.average-rating-stars .empty-star {
    color: #ccc; /* Color for empty (unfilled) stars */
}

/* ===========================
   Thank You Message
   =========================== */

/* Styling for the thank you message displayed after rating submission */
.thanks-message {
    color: #6b63ff;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}