.elementor-176 .elementor-element.elementor-element-a53168c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-176 .elementor-element.elementor-element-54f07d3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-176 .elementor-element.elementor-element-1a9b768{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-176 .elementor-element.elementor-element-3c71d6b .elementor-button{background-color:transparent;background-image:linear-gradient(180deg, #B6915F 0%, #FFDA91 100%);}.elementor-176 .elementor-element.elementor-element-8c3413c .elementor-button{background-color:transparent;background-image:linear-gradient(180deg, #B6915F 0%, #FFDA91 100%);}.elementor-176 .elementor-element.elementor-element-034a565 .elementor-button{background-color:transparent;background-image:linear-gradient(180deg, #B6915F 0%, #FFDA91 100%);}.elementor-176 .elementor-element.elementor-element-dff7d9d .elementor-button{background-color:transparent;background-image:linear-gradient(180deg, #B6915F 0%, #FFDA91 100%);}.elementor-176 .elementor-element.elementor-element-8e01ca2 .elementor-button{background-color:transparent;background-image:linear-gradient(180deg, #B6915F 0%, #FFDA91 100%);}.elementor-176 .elementor-element.elementor-element-e15ced1 .elementor-button{background-color:transparent;background-image:linear-gradient(180deg, #B6915F 0%, #FFDA91 100%);}.elementor-176 .elementor-element.elementor-element-67efd26{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-176 .elementor-element.elementor-element-6134732 .elementor-heading-title{color:#E18C19;}.elementor-176 .elementor-element.elementor-element-8728c6e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-176 .elementor-element.elementor-element-5ef0d9b{--e-rating-justify-content:center;--e-rating-icon-font-size:58px;--e-rating-gap:0px;--e-rating-icon-marked-color:#FFE636;--e-rating-icon-color:#FFFFFF;}body.elementor-page-176:not(.elementor-motion-effects-element-type-background), body.elementor-page-176 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://akufei.yclass.ir/wp-content/uploads/2026/01/کرمی.webp");}@media(max-width:1024px){.elementor-176 .elementor-element.elementor-element-1a9b768{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-176 .elementor-element.elementor-element-54f07d3{--width:33.3333%;}.elementor-176 .elementor-element.elementor-element-67efd26{--width:66.6666%;}}@media(max-width:767px){.elementor-176 .elementor-element.elementor-element-1a9b768{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سیستم امتیازدهی</title>
    <style>
        /* کد CSS اینجا قرار بگیرد */
        .rating-container {
            direction: rtl;
            text-align: center;
            padding: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin: 20px auto;
        }
        
        .rating-stars {
            font-size: 3rem;
            margin: 15px 0;
            cursor: pointer;
        }
        
        .star {
            color: #ddd;
            transition: all 0.2s ease;
            padding: 0 5px;
        }
        
        .star:hover,
        .star:hover ~ .star {
            color: #ffcc00;
        }
        
        .star.active {
            color: #ffcc00;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
        }
        
        .rating-result {
            font-size: 1.2rem;
            margin: 15px 0;
            color: #333;
        }
        
        #selected-rating {
            font-weight: bold;
            color: #ff6600;
        }
        
        #submit-rating {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 25px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        #submit-rating:hover:not(:disabled) {
            background: #45a049;
        }
        
        #submit-rating:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <!-- کد HTML -->
    <div class="rating-container">
        <h3>امتیاز دهید:</h3>
        <div class="rating-stars">
            <span class="star" data-value="1">☆</span>
            <span class="star" data-value="2">☆</span>
            <span class="star" data-value="3">☆</span>
            <span class="star" data-value="4">☆</span>
            <span class="star" data-value="5">☆</span>
        </div>
        <div class="rating-result">
            امتیاز شما: <span id="selected-rating">0</span> از 5
        </div>
        <button id="submit-rating" disabled>ثبت امتیاز</button>
    </div>

    <script>
        // کد JavaScript
        document.addEventListener('DOMContentLoaded', function() {
            const stars = document.querySelectorAll('.star');
            const ratingResult = document.getElementById('selected-rating');
            const submitBtn = document.getElementById('submit-rating');
            let selectedRating = 0;

            stars.forEach(star => {
                star.addEventListener('click', function() {
                    selectedRating = parseInt(this.getAttribute('data-value'));
                    
                    stars.forEach(s => {
                        if (parseInt(s.getAttribute('data-value')) <= selectedRating) {
                            s.classList.add('active');
                            s.textContent = '★';
                        } else {
                            s.classList.remove('active');
                            s.textContent = '☆';
                        }
                    });
                    
                    ratingResult.textContent = selectedRating;
                    submitBtn.disabled = false;
                });
                
                star.addEventListener('mouseover', function() {
                    const hoverValue = parseInt(this.getAttribute('data-value'));
                    
                    stars.forEach(s => {
                        if (parseInt(s.getAttribute('data-value')) <= hoverValue) {
                            s.style.color = '#ffcc00';
                        } else {
                            s.style.color = '#ddd';
                        }
                    });
                });
                
                star.addEventListener('mouseout', function() {
                    stars.forEach(s => {
                        if (!s.classList.contains('active')) {
                            s.style.color = '#ddd';
                        }
                    });
                });
            });

            submitBtn.addEventListener('click', function() {
                alert(`امتیاز ${selectedRating} شما ثبت شد!`);
                // ریست کردن سیستم
                stars.forEach(s => {
                    s.classList.remove('active');
                    s.textContent = '☆';
                    s.style.color = '#ddd';
                });
                ratingResult.textContent = '0';
                submitBtn.disabled = true;
                selectedRating = 0;
            });
        });
    </script>
</body>
</html>/* End custom CSS */