/* 评分容器和静态显示区域 (无变化) */
.my-rating-container { border: 1px solid #ddd; padding: 15px; border-radius:0 0 5px 5px; background-color: #f9f9f9; margin-bottom: 20px; }
.my-rating-summary, .my-rating-display-only { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.my-rating-trigger { cursor: pointer; }
.my-rating-text-summary {display: flex; align-items: center; font-size: 16px; line-height: 1.4; }
.my-rating-average { font-weight: bold; color: #e67e22; }
.my-user-rating-status { display: block; font-size: 12px; color: #27ae60; margin-top: 4px; }
.my-stars-display { display: flex; font-size: 24px; color: #fdd017; }
.star-icon { display: inline-block; }
.star-empty { color: #ccc; }
.star-half { position: relative; display: inline-block; color: #ccc; }
.star-half .star-half-icon { position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #fdd017; }

/* 模态框容器 (无变化) */
.my-rating-modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.my-rating-modal-content { background-color: #fff; padding: 20px 30px; width: 90%; max-width: 400px; border-radius: 8px; text-align: center; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.my-rating-modal-close { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }
.my-rating-modal-close:hover { color: black; }

/* ------------------------------------------------------------------ */
/* !! 核心修正: 稳定、无抖动、完美对齐的交互式星星样式 !! */
/* ------------------------------------------------------------------ */
.my-rating-stars-wrapper { margin: 20px 0; display: inline-flex; gap: 4px; }

/* 每个星星的容器，设定固定尺寸和相对定位 */
.my-star-interactive {
    display: inline-block;
    cursor: pointer;
    font-size: 36px;
    position: relative;
    width: 1em;
    height: 1em;
    line-height: 1em;
}

/* 内部的三个图层：绝对定位强制重叠，并添加平滑过渡 */
.my-star-interactive .star-icon-interactive {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.1s ease-in-out;
}

/* 默认状态：只有空星(opacity:1)可见，其他两个图层(opacity:0)透明 */
.my-star-interactive .star-icon-interactive.star-half,
.my-star-interactive .star-icon-interactive.star-full {
    opacity: 0;
}
.my-star-interactive .star-icon-interactive.star-empty {
    opacity: 1;
}

/* 通过JS添加类来控制状态 */
/* 半星状态: 隐藏空星，显示半星 */
.my-star-interactive.is-half .star-icon-interactive.star-empty { opacity: 0; }
.my-star-interactive.is-half .star-icon-interactive.star-half { opacity: 1; }

/* 满星状态: 隐藏空星，显示满星 */
.my-star-interactive.is-full .star-icon-interactive.star-empty { opacity: 0; }
.my-star-interactive.is-full .star-icon-interactive.star-full { opacity: 1; }

/* 星星图层的具体视觉样式 (与静态展示的完全一致) */
.my-star-interactive .star-icon-interactive.star-full { color: #fdd017; }
.my-star-interactive .star-icon-interactive.star-empty { color: #ccc; }
.my-star-interactive .star-icon-interactive.star-half { position: relative; color: #ccc; }
.my-star-interactive .star-icon-interactive.star-half .star-half-icon { position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #fdd017; }

/* 反馈和按钮 (无变化) */
.my-rating-feedback { font-size: 18px; margin-bottom: 20px; color: #555; }
.my-current-rating-value { font-weight: bold; }
/* .my-rating-submit-btn { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } */
/* .my-rating-submit-btn:hover { background-color: #2980b9; } */
.my-rating-submit-btn:disabled { background-color: #bdc3c7; cursor: not-allowed; }

/* Toast提示框 (无变化) */
#my-rating-toast-notification-wrapper { position: fixed; bottom: 20px; left: 0; width: 100%; text-align: center; z-index: 9999; pointer-events: none; }
#my-rating-toast-notification { display: inline-block; background-color: #007cff; color: white; padding: 12px 25px; border-radius: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); font-size: 16px; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
#my-rating-toast-notification.show { opacity: 1; transform: translateY(0); }

.rating-ulike-container {
    display:flex;
}
.rating-ulike-container span{
    font-size: 14px;
    /* color:#555; */
}