.anm-star-ratings-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 20px 0 !important;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}

/* 1. Căn trái (Left) */
.anm-star-ratings-wrapper.align-left {
    align-items: flex-start;
    text-align: left;
}

.anm-star-ratings-wrapper.align-left .anm-star-title,
.anm-star-ratings-wrapper.align-left .anm-star-legend,
.anm-star-ratings-wrapper.align-left .anm-star-msg {
    text-align: left;
    align-self: flex-start;
    justify-content: flex-start;
}

.anm-star-ratings-wrapper.align-left .anm-star-box {
    justify-content: flex-start;
    align-self: flex-start;
}

/* 2. Căn giữa (Center) */
.anm-star-ratings-wrapper.align-center {
    align-items: center;
    text-align: center;
}

.anm-star-ratings-wrapper.align-center .anm-star-title,
.anm-star-ratings-wrapper.align-center .anm-star-legend,
.anm-star-ratings-wrapper.align-center .anm-star-msg {
    text-align: center;
    align-self: center;
    justify-content: center;
}

.anm-star-ratings-wrapper.align-center .anm-star-box {
    justify-content: center;
    align-self: center;
}

/* 3. Căn phải (Right) */
.anm-star-ratings-wrapper.align-right {
    align-items: flex-end;
    text-align: right;
}

.anm-star-ratings-wrapper.align-right .anm-star-title,
.anm-star-ratings-wrapper.align-right .anm-star-legend,
.anm-star-ratings-wrapper.align-right .anm-star-msg {
    text-align: right;
    align-self: flex-end;
    justify-content: flex-end;
}

.anm-star-ratings-wrapper.align-right .anm-star-box {
    justify-content: flex-end;
    align-self: flex-end;
}

.anm-star-title {
    font-weight: 600;
    font-size: 15px;
    color: #374151;
    margin: 0;
    line-height: 1.4;
}

/* Khối sao & chú thích: Màn hình rộng hiển thị 1 hàng ngang, màn hình hẹp tự rớt dòng nguyên vẹn */
.anm-star-box {
    display: flex;
    align-items: center;
    gap: 6px 10px;
    flex-wrap: wrap;
    line-height: 1;
    max-width: 100%;
}

.anm-stars-track {
    position: relative;
    top: 2px;
    /* Đẩy cụm ngôi sao dịch xuống 6px so với hàng chữ theo đúng yêu cầu */
    display: inline-flex;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.anm-stars-bg,
.anm-stars-fill-inner {
    display: inline-flex;
    gap: 6px
}

.anm-stars-bg {
    color: #d1d5db;
}

.anm-star-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--star-size, 24px);
    height: var(--star-size, 24px);
    padding: 0 1px;
    transition: transform 0.15s ease;
}

.anm-star-item svg {
    overflow: visible;
}

.anm-stars-track:hover .anm-star-item:hover {
    transform: scale(1.15);
}

.anm-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.anm-stars-fill-inner {
    color: #f59e0b;
}

/* Khối thông tin vote (Legend) - luôn giữ nguyên vẹn 1 dòng không bao giờ bị bẻ đôi text */
.anm-star-ratings-wrapper .anm-star-legend,
.anm-star-ratings-wrapper.kk-star-ratings .kksr-legend {
    font-size: 16px;
    color: #4b5563;
    font-weight: 500;
    margin: 0 !important;
    padding: 0;
    white-space: nowrap !important;
    display: inline-block;
    flex-shrink: 0;
}

.anm-star-avg {
    font-weight: 700;
    color: #d97706;
}

/* Khối thông báo phản hồi - luôn chừa không gian cố định 32px để chống nhảy layout (Zero Layout Shift) */
.anm-star-msg {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-top: 4px;
    box-sizing: border-box;
    border: 1px solid transparent;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    max-width: 100%;
    pointer-events: none;
}

/* Kích hoạt hiển thị thông báo khi có class trạng thái */
.anm-star-msg.is-success,
.anm-star-msg.is-pending,
.anm-star-msg.is-error {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    animation: anmFadeIn 0.3s ease;
}

.anm-star-msg.is-success {
    background-color: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.anm-star-msg.is-pending {
    background-color: #fefce8;
    color: #854d0e;
    border-color: #fef08a;
}

.anm-star-msg.is-error {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.anm-star-ratings-wrapper.is-voted .anm-stars-track {
    cursor: default;
}

.anm-star-ratings-wrapper.is-voted .anm-star-item:hover {
    transform: none;
}

@keyframes anmFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scoped cho Gutenberg Editor Canvas */
.wp-block-anm-star-ratings {
    box-sizing: border-box;
    width: 100%;
}

.wp-block-anm-star-ratings .components-server-side-render {
    width: 100%;
}