/* =============================
   Star Rating Styles
   ============================= */

/* Star rating */
.star-rating{
    display:flex;
    gap:6px;
    align-items:center;
    padding:8px 0;
    touch-action:none; /* Prevent browser touch gestures */
    user-select:none;
}
.star{
    font-size:32px;
    cursor:pointer;
    color:#d1d5db;
    transition:all 0.15s ease;
    user-select:none;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    /* Increase touch target size without changing visual size */
    padding:4px;
    margin:-4px;
}
.star:hover{transform:scale(1.15);color:var(--rating-star)}
.star:active{transform:scale(1.05);} /* Provide feedback on touch/click */
.star.filled{color:var(--rating-star);text-shadow:0 2px 4px rgba(0,0,0,.15);}
.star.half{position:relative;color:#d4d4d8}
.star.half::before{
    content:'★';
    position:absolute;
    left:4px; /* Account for parent padding */
    top:4px; /* Account for parent padding */
    color:#fbbf24;
    overflow:hidden;
    width:calc(50% - 4px); /* 50% minus the left offset to get true half */
}
.star-rating-display{display:flex;gap:3px;align-items:center}
.star-rating-display .star{font-size:22px;cursor:default;padding:0;margin:0;}
/* Fix half star alignment for display-only stars (no padding) */
.star-rating-display .star.half::before{
    left:0;
    top:0;
    width:50%;
}