/*
 * Perfect Ratings — Frontend Widget Styles v1.10.5
 *
 * Font, text colour, and font-size inherit from your theme automatically.
 * Override anything via CSS variables on .prtgs-wrap or any parent element.
 *
 * Quick override reference (paste into Appearance → Additional CSS):
 *
 *   body .prtgs-wrap { --prtgs-star-color:      #fed500; }   Star fill colour
 *   body .prtgs-wrap { --prtgs-star-empty:      #ececec; }   Empty star colour
 *   body .prtgs-wrap { --prtgs-star-size:       22px;    }   Star width & height
 *   body .prtgs-wrap { --prtgs-gap:             10px;    }   Gap between stars and meta text
 *   body .prtgs-wrap { --prtgs-status-bg:       #3a9e6e; }   Success badge background
 *   body .prtgs-wrap { --prtgs-status-error-bg: #c0392b; }   Error badge background
 *   body .prtgs-wrap { --prtgs-status-color:    #fff;    }   Badge text colour
 *
 *   .prtgs-meta { color: #333; }          Override meta text colour
 *   .prtgs-meta { font-size: 13px; }      Override meta font size
 */

.prtgs-wrap {
    --prtgs-star-color:      #fed500;
    --prtgs-star-empty:      #ececec;
    --prtgs-star-size:       22px;
    --prtgs-gap:             10px;
    --prtgs-status-bg:       #3a9e6e;
    --prtgs-status-error-bg: #c0392b;
    --prtgs-status-color:    #fff;

    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--prtgs-gap);
    line-height: 1;
    vertical-align: middle;
}

/* ── Star row ─────────────────────────────────────────────────────────────── */

.prtgs-stars {
    position: relative;   /* contains the absolutely-positioned fill layer */
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/*
 * Individual star = a transparent hit-area. It carries the click / keyboard /
 * hover interaction and reserves the star's box in the row; the visible star is
 * painted by the single .prtgs-fill layer below. No colour or SVG of its own,
 * so there is no second painted star layer to mis-align.
 */
.prtgs-star {
    display: inline-flex;
    cursor: pointer;
    width: var(--prtgs-star-size);
    height: var(--prtgs-star-size);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Percentage fill — single masked-gradient layer ──────────────────────────
 *
 * All five stars are ONE painted element. A horizontal gradient paints the fill
 * colour from 0 up to --prtgs-fill, then the empty colour beyond it; five copies
 * of the star shape, used as a CSS mask, cut that gradient into star shapes.
 * Because there is only one painted layer, there are no two independent layouts
 * to mis-align — the sub-pixel seam two stacked layers produced on WebKit/Safari
 * cannot occur. The fill fraction is exactly avg/5 of the row width, identical to
 * the old overlay, so the partial star lands on the same pixel.
 *
 * --prtgs-fill is the only value PHP/JS set (the average %, or a whole-star % on
 * hover). The mask is the SAME star path used previously, encoded as a colourless
 * data-URI; the colour comes entirely from the gradient (your --prtgs-star-color /
 * --prtgs-star-empty variables, read natively in CSS — no JS colour injection).
 * The +2px in mask-position is the inter-star gap and must match .prtgs-stars gap.
 */
.prtgs-fill {
    --prtgs-fill: 0%;
    --prtgs-star-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMuNjEyIDE1LjQ0M2MtLjM4Ni4xOTgtLjgyNC0uMTQ5LS43NDYtLjU5MmwuODMtNC43M0wuMTczIDYuNzY1Yy0uMzI5LS4zMTQtLjE1OC0uODg4LjI4My0uOTVsNC44OTgtLjY5Nkw3LjUzOC43OTJjLjE5Ny0uMzkuNzMtLjM5LjkyNyAwbDIuMTg0IDQuMzI3IDQuODk4LjY5NmMuNDQxLjA2Mi42MTIuNjM2LjI4Mi45NWwtMy41MjIgMy4zNTYuODMgNC43M2MuMDc4LjQ0My0uMzYuNzktLjc0Ni41OTJMOCAxMy4xODdsLTQuMzg5IDIuMjU2eiIvPjwvc3ZnPg==");

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;   /* clicks pass through to the .prtgs-star hit-areas */

    background: linear-gradient( 90deg,
        var(--prtgs-star-color) 0,
        var(--prtgs-star-color) var(--prtgs-fill),
        var(--prtgs-star-empty) var(--prtgs-fill),
        var(--prtgs-star-empty) 100% );

    -webkit-mask-image: var(--prtgs-star-mask), var(--prtgs-star-mask), var(--prtgs-star-mask), var(--prtgs-star-mask), var(--prtgs-star-mask);
            mask-image: var(--prtgs-star-mask), var(--prtgs-star-mask), var(--prtgs-star-mask), var(--prtgs-star-mask), var(--prtgs-star-mask);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: var(--prtgs-star-size) var(--prtgs-star-size);
            mask-size: var(--prtgs-star-size) var(--prtgs-star-size);
    -webkit-mask-position:
        calc( (var(--prtgs-star-size) + 2px) * 0 ) 0,
        calc( (var(--prtgs-star-size) + 2px) * 1 ) 0,
        calc( (var(--prtgs-star-size) + 2px) * 2 ) 0,
        calc( (var(--prtgs-star-size) + 2px) * 3 ) 0,
        calc( (var(--prtgs-star-size) + 2px) * 4 ) 0;
            mask-position:
        calc( (var(--prtgs-star-size) + 2px) * 0 ) 0,
        calc( (var(--prtgs-star-size) + 2px) * 1 ) 0,
        calc( (var(--prtgs-star-size) + 2px) * 2 ) 0,
        calc( (var(--prtgs-star-size) + 2px) * 3 ) 0,
        calc( (var(--prtgs-star-size) + 2px) * 4 ) 0;
}

/* ── Meta text ────────────────────────────────────────────────────────────── */
/* Inherits font, colour, and size from theme. Override with .prtgs-meta { } */
.prtgs-meta {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    line-height: 1;
}

/* Inner flex container — wraps score, dash and count */
.prtgs-meta-inner {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.prtgs-dash { white-space: pre; }

.prtgs-score {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Hide score group when no votes exist — prevents stray /5 showing next to "Be the first to rate!" */
.prtgs-meta:not(.prtgs-has-votes) .prtgs-score { display: none; }

/* Brackets via pseudo-elements on outer wrapper — outside flex context, sit flush */
.prtgs-meta.prtgs-has-votes::before { content: '['; }
.prtgs-meta.prtgs-has-votes::after  { content: ']'; }

/* ── Info row ─────────────────────────────────────────────────────────────── */
.prtgs-info {
    display: contents;
}

/* ── Status badge ─────────────────────────────────────────────────────────── */
.prtgs-status {
    display: none;
    font-size: .8em;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--prtgs-status-bg);
    color: var(--prtgs-status-color);
    pointer-events: none;
    white-space: nowrap;
}

.prtgs-status-visible {
    display: inline-block;
}

.prtgs-status-error { background: var(--prtgs-status-error-bg); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* On very narrow viewports, info row drops below stars cleanly */
@media ( max-width: 380px ) {
    .prtgs-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Spinner (shown during vote submission) ──────────────────────────────── */
.prtgs-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--prtgs-star-empty);
    border-top-color: var(--prtgs-star-color);
    border-radius: 50%;
    animation: prtgs-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes prtgs-spin {
    to { transform: rotate(360deg); }
}