/**
 * Element "Bảng màu sản phẩm" (nma_color_swatches).
 * Nhãn thuộc tính + hàng chấm tròn màu, tick chọn bằng radio thuần CSS.
 */
.nma-swatches {
    --nma-sw-size: 30px;
    margin: 10px 0;
}
.nma-swatches__label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}
.nma-swatches__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Mỗi ô màu = label bọc radio ẩn + chấm tròn */
.nma-swatch {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
    line-height: 0;
}
.nma-swatch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
.nma-swatch__dot {
    box-sizing: border-box;
    display: block;
    width: var(--nma-sw-size);
    height: var(--nma-sw-size);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 0 2px #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nma-swatch:hover .nma-swatch__dot {
    transform: scale(1.08);
}

/* Trạng thái được chọn: vòng viền đậm + dấu tích trắng ở giữa */
.nma-swatch input:checked + .nma-swatch__dot {
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--primary-color, #2496ea);
}
.nma-swatch input:checked + .nma-swatch__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--nma-sw-size) * 0.2);
    height: calc(var(--nma-sw-size) * 0.38);
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}

/* Bàn phím: hiện vòng focus cho khả năng truy cập */
.nma-swatch input:focus-visible + .nma-swatch__dot {
    outline: 2px solid var(--primary-color, #2496ea);
    outline-offset: 2px;
}

/* Chỉ đọc màn hình */
.nma-swatch .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Thông báo khi chưa có thuộc tính màu (chỉ hiện trong UX Builder) */
.nma-swatches--empty {
    font-size: 13px;
    color: #888;
    font-style: italic;
}