#custom-review-section {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#custom-review-section h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    color: white;
    background: linear-gradient(45deg, #0060d4, #3ac4d6, #1edee90f);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
    transition: all 0.3s ease;
}

#custom-review-section h3:hover {
    background: linear-gradient(255deg, #296dc1, #3ac4d6, #e91e63);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}

#custom-review-section form {
    margin-bottom: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#custom-review-section label[for="rating"] {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

#custom-review-section label[for="review"] {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

#custom-review-section label[for="review_image"] {
    margin-right: 30px;
    padding: 5px;
    background-color: aliceblue;
    border-radius: 20%;
    width: fit-content;
}

#custom-review-section textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    font-size: 16px;
    resize: vertical;
}

#custom-review-section select,
#custom-review-section input[type="file"],
#custom-review-section button {
    margin: 20px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    width: 94%;
    font-size: 16px;
}

#custom-review-section button {
    background-color: #0073aa;
    display: flex;
    color: white;
    cursor: pointer;
    border: none;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
}

#custom-review-section button:hover {
    background-color: #005177;
}

/* استایل نظرات */
.review-item {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.review-author-name {
    font-weight: bold;
    color: #0073aa;
}

.review-reply {
    background: linear-gradient(352deg, #e6faf087, #bfd8d694, #dca8f682);
    border-left: 3px solid #7A5CFA;
    padding: 10px 30px 15px 10px;
    margin-bottom: 10px;
    border-radius: 15px;
    color: #4B0082;
}

/* تغییر رنگ نام ریپلای‌کننده به قرمز */
.review-reply .review-author-name {
    color: red;
}

.review-item p {
    margin: 5px 0;
}

/* استایل ستاره‌ها */
.review-rating {
    font-size: 20px;
    color: #f1c40f;
}

.star {
    margin: 0 2px;
    font-size: 20px;
}

.full-star {
    color: #f39c12;
}

.empty-star {
    color: #ccc;
}

/* استایل لینک پاسخ */
.comment-reply-link {
    font-size: 14px;
    color: #0073aa;
    text-decoration: none;
}

.comment-reply-link:hover {
    color: #005177;
}

.rating-stars {
    display: flex;
    padding: 15px;
    gap: 10px;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

.rating-stars input {
    display: none; /* مخفی کردن دکمه‌های radio */
}

/* استایل اولیه ستاره‌ها */
.rating-stars label {
    font-size: 40px;
    color: #ccc; /* رنگ خاکی اولیه */
    cursor: pointer;
    transition: color 0.3s ease; /* انیمیشن برای تغییر رنگ */
}

/* زمانی که موس روی ستاره‌ها می‌رود */
.rating-stars label:hover {
    color: #f39c12; /* رنگ طلایی هنگام hover */
}

/* وقتی امتیاز انتخاب شده باشد، رنگ‌ها باید ثابت باشند */
.rating-stars input:checked ~ label {
    color: #f39c12; /* ستاره‌های طلایی وقتی انتخاب شده‌اند */
}

.rating-stars label:hover,
.rating-stars label:hover ~ label {
    color: #f39c12; /* رنگ ستاره‌ها هنگام hover */
}

/* استایل جعبه پیام */
#review-messages {
    text-align: center;
    font-size: 16px;
    padding: 15px;
    margin-bottom: 20px;
}

#review-messages p {
    margin: 0;
}

#review-messages p.success {
    color: green;
}

#review-messages p.error {
    color: red;
}

.review_image {
    color: red;
}

.review_image label {
    padding: 10px;
}

.reply-status {
    color: #28a745;  /* رنگ سبز */
    font-weight: bold;
    margin-right: 10px;
    display: inline-block;
}

/* ===== استایل‌های منتقل شده از JS ===== */

/* استایل‌های توست */
.vote-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    border-radius: 4px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.vote-toast-success {
    background-color: #4CAF50;
}

.vote-toast-error {
    background-color: #F44336;
}

.vote-toast-visible {
    opacity: 1;
}

.voted-btn {
    background-color: #e0f7fa;
    font-weight: bold;
}

.vote-loader {
    margin-right: 10px;
    animation: spin 1s infinite linear;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* استایل‌های پیش‌نمایش تصویر */
#image-preview {
    margin: 10px 0;
    position: relative;
    display: inline-block;
}

#image-preview img {
    max-width: 200px;
    max-height: 200px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

.remove-preview {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ff5252;
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
}

/* استایل‌های پیام‌ها */
.review-message {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.review-message.success {
    background-color: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #2e7d32;
}

.review-message.error {
    background-color: #ffebee;
    border: 1px solid #ef9a9a;
    color: #c62828;
}

/* افزودن استایل‌های پاسخگویی (responsive) */
@media only screen and (max-width: 768px) {
    #custom-review-section {
        padding: 10px;
    }
    
    #custom-review-section h3 {
        font-size: 20px;
    }
    
    #custom-review-section select,
    #custom-review-section input[type="file"],
    #custom-review-section button {
        width: 90%;
        margin: 10px auto;
    }
    
    .rating-stars label {
        font-size: 30px; /* کاهش اندازه ستاره‌ها در صفحات کوچک */
    }
    
    #image-preview img {
        max-width: 100%; /* اجازه دهید تصویر پیش‌نمایش عرض کامل را در موبایل پر کند */
    }
    
    .vote-toast {
        left: 20px;
        right: 20px;
        bottom: 20px;
        text-align: center;
    }
}

/* RTL improvements for mobile */
@media only screen and (max-width: 768px) {
    .review-reply {
        padding: 10px;
    }
    
    #custom-review-section label[for="review_image"] {
        margin-right: 10px;
    }
}

/* استایل دکمه آکاردئون */
.review-form-toggle {
    cursor: pointer;
    margin-bottom: 15px;
}

.form-toggle-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 15px;
    transition: 0.3s;
}

.toggle-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.review-form-toggle.active .toggle-icon {
    transform: rotate(45deg);
}

#custom-review-form-container {
    overflow: hidden;
    transition: all 0.3s ease-out;
}

/* تغییر استایل h3 برای آکاردئون */
#custom-review-section h3.form-toggle-button:hover {
    background: linear-gradient(255deg, #296dc1, #3ac4d6, #e91e63);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
    cursor: pointer;
}



/* استایل اختصاصی هدر فرم ثبت دیدگاه (دکمه آکاردئون) */
#custom-review-section h3.form-toggle-button {
    background: linear-gradient(45deg, #16a085, #2ecc71, #27ae60); /* رنگ سبز */
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
    display: flex;
    justify-content: center; /* وسط‌چین کردن محتوای هدر */
    align-items: center;
    cursor: pointer;
    position: relative; /* برای قرار دادن دقیق آیکون فلش */
    padding: 12px 40px; /* پدینگ اضافه در سمت راست برای آیکون */
}

/* حالت هاور هدر فرم */
#custom-review-section h3.form-toggle-button:hover {
    background: linear-gradient(45deg, #27ae60, #2ecc71, #16a085); /* جهت معکوس گرادیانت */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
}

/* حالت فعال هدر فرم */
#custom-review-section .review-form-toggle.active h3.form-toggle-button {
    background: linear-gradient(45deg, #27ae60, #16a085, #2ecc71); /* رنگ کمی متفاوت */
    box-shadow: 0 3px 10px rgba(46, 204, 113, 0.5);
    transform: translateY(0);
}

/* استایل اختصاصی هدر لیست دیدگاه‌ها */
#custom-review-section #custom-reviews h3 {
    background: linear-gradient(45deg, #8e44ad, #9b59b6, #3498db); /* رنگ بنفش به آبی */
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.3);
}

/* حالت هاور هدر لیست دیدگاه‌ها */
#custom-review-section #custom-reviews h3:hover {
    background: linear-gradient(45deg, #3498db, #9b59b6, #8e44ad); /* جهت معکوس گرادیانت */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(142, 68, 173, 0.4);
}

/* استایل آیکون تاگل *//* استایل آیکون فلش رو به پایین */
#custom-review-section .toggle-icon {
    font-size: 22px;
    font-weight: normal;
    transition: transform 0.3s ease;
    position: absolute;
    right: 15px; /* فاصله از سمت راست */
}

/* چرخش فلش در حالت باز */
#custom-review-section .review-form-toggle.active .toggle-icon {
    transform: rotate(90deg);
}
/* استایل برای نمایش میانگین امتیازات */
.review-average-rating {
    margin-bottom: 25px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.review-average-rating h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.average-stars {
    font-size: 24px;
    margin-bottom: 5px;
}

.average-stars .star {
    margin: 0 2px;
}

.average-stars .full-star {
    color: #f39c12;
}

.average-stars .half-star {
    color: #f39c12;
    position: relative;
    display: inline-block;
}

.average-stars .half-star:after {
    content: "★";
    color: #f39c12;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
}

.average-stars .empty-star {
    color: #ccc;
}

.average-value {
    font-size: 16px;
    color: #666;
    margin-left: 5px;
}

.review-count {
    margin: 5px 0 0 0;
    color: #666;
    font-size: 14px;
}

/* افزودن استایل به دکمه امتیاز ووکامرس */
.scroll-to-review-master {
    cursor: pointer;
}

.scroll-to-review-master:hover .star {
    color: #e67e22 !important;
}

.review-with-avatar img {
    border-radius: 42%;
    vertical-align: middle;
    margin-left: 8px;
    object-fit: cover;
}