/* Custom Star Rating Field - Filament Radio Style */
[data-star-rating="true"] {
    --star-size: 36px;
    --star-color-empty: #d1d5db;
    --star-color-filled: #fbbf24;
    --star-color-hover: #f59e0b;
}

/* Target the grid container inside radio - target any direct child */
[data-star-rating="true"] > * {
    display: flex !important;
    gap: 8px !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
}

/* Also target nested containers */
[data-star-rating="true"] div {
    display: flex !important;
    gap: 8px !important;
    grid-template-columns: none !important;
}

/* Hide radio button circles */
[data-star-rating="true"] input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Style labels as stars */
[data-star-rating="true"] label {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--star-size) !important;
    height: var(--star-size) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide text spans inside labels */
[data-star-rating="true"] label span,
[data-star-rating="true"] label > * {
    display: none !important;
}

/* Add star icon - SOLID (filled) version */
[data-star-rating="true"] label::before {
    content: '';
    display: block;
    width: var(--star-size);
    height: var(--star-size);
    background-color: currentColor;
    color: var(--star-color-empty);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z' clip-rule='evenodd' /%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z' clip-rule='evenodd' /%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    transition: all 0.2s ease;
}

/* Hover effect - scale on hover */
[data-star-rating="true"] label:hover::before {
    transform: scale(1.15);
}

/* When hovering, highlight this and all previous stars */
[data-star-rating="true"] label:hover::before,
[data-star-rating="true"] label:hover ~ label::before {
    color: var(--star-color-hover);
}

/* When radio is checked - fill stars using pure CSS */
/* Using :has() selector for modern browsers and :checked state */

/* Fill first star when value 1,2,3,4 or 5 is checked */
[data-star-rating="true"]:has(input[value="1"]:checked) label:nth-child(1)::before,
[data-star-rating="true"]:has(input[value="2"]:checked) label:nth-child(1)::before,
[data-star-rating="true"]:has(input[value="3"]:checked) label:nth-child(1)::before,
[data-star-rating="true"]:has(input[value="4"]:checked) label:nth-child(1)::before,
[data-star-rating="true"]:has(input[value="5"]:checked) label:nth-child(1)::before {
    color: var(--star-color-filled);
}

/* Fill first 2 stars when value 2,3,4 or 5 is checked */
[data-star-rating="true"]:has(input[value="2"]:checked) label:nth-child(2)::before,
[data-star-rating="true"]:has(input[value="3"]:checked) label:nth-child(2)::before,
[data-star-rating="true"]:has(input[value="4"]:checked) label:nth-child(2)::before,
[data-star-rating="true"]:has(input[value="5"]:checked) label:nth-child(2)::before {
    color: var(--star-color-filled);
}

/* Fill first 3 stars when value 3,4 or 5 is checked */
[data-star-rating="true"]:has(input[value="3"]:checked) label:nth-child(3)::before,
[data-star-rating="true"]:has(input[value="4"]:checked) label:nth-child(3)::before,
[data-star-rating="true"]:has(input[value="5"]:checked) label:nth-child(3)::before {
    color: var(--star-color-filled);
}

/* Fill first 4 stars when value 4 or 5 is checked */
[data-star-rating="true"]:has(input[value="4"]:checked) label:nth-child(4)::before,
[data-star-rating="true"]:has(input[value="5"]:checked) label:nth-child(4)::before {
    color: var(--star-color-filled);
}

/* Fill all 5 stars when value 5 is checked */
[data-star-rating="true"]:has(input[value="5"]:checked) label:nth-child(5)::before {
    color: var(--star-color-filled);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    [data-star-rating="true"] {
        --star-color-empty: #4b5563;
        --star-color-filled: #fbbf24;
        --star-color-hover: #f59e0b;
    }
}

/* Responsive sizing */
@media (max-width: 640px) {
    [data-star-rating="true"] {
        --star-size: 32px;
    }
}