/* VeriEats — Public reviews page styling
 * @since 2.7.0
 *
 * Stars use a two-layer stacked-text technique for arbitrary
 * fractional fills (4.3, 4.7, etc.). Robust across browsers:
 *   - .vfk-stars__bg renders 5 stars in muted gray (the empty layer)
 *   - .vfk-stars__fg renders 5 stars in gold, absolutely positioned
 *     over the bg, with width:N% to clip the right edge
 * Result: any % fill renders precisely, no SVG, no half-star glyphs.
 */

.vfk-reviews {
    max-width: 800px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
}

.vfk-reviews__header {
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.vfk-reviews__title {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
}
.vfk-reviews__aggregate {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #374151;
}
.vfk-reviews__avg-value {
    font-weight: 600;
}
.vfk-reviews__count--empty {
    font-style: italic;
    color: #9ca3af;
}

/* ─── Stars ─────────────────────────────────────────────────────── */
.vfk-stars {
    position: relative;
    display: inline-block;
    font-size: 1.25em;
    line-height: 1;
    color: #d1d5db;          /* empty (background) color */
    /* v2.7.1: was letter-spacing: 1px; that 1px gap between glyphs
     * combined with the gold-to-gray color transition at the fill
     * boundary made e.g. a 4-of-5 row look like "3 + 1 + 1" groups.
     * Zero letter-spacing reads as a single continuous row. The
     * stars themselves already have natural spacing built into the
     * glyph metrics. */
    letter-spacing: 0;
}
.vfk-stars__bg,
.vfk-stars__fg {
    display: inline-block;
}
.vfk-stars__fg {
    position: absolute;
    top: 0;
    left: 0;
    color: #f59e0b;          /* filled (foreground) color */
    overflow: hidden;
    white-space: nowrap;
    /* width is set inline per render. */
}

/* ─── Submission form ─────────────────────────────────────────── */
.vfk-rev-form {
    margin: 0 0 28px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.vfk-rev-form h3 {
    margin: 0 0 10px;
    font-size: 17px;
}

/* v6.1.4: Honeypot field — must be visually invisible but parseable
 * by bots. Position offscreen rather than display:none, because some
 * bots skip display:none elements. Position-based hiding still keeps
 * the input in the DOM where bots see + fill it; the submit handler
 * rejects any submission where this field is non-empty. */
.vfk-rev-form__hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.vfk-rev-form--login,
.vfk-rev-form--no-cap,
.vfk-rev-form--no-slug {
    color: #6b7280;
    font-size: 14px;
}
.vfk-rev-form__flash {
    padding: 10px 12px;
    border-radius: 6px;
    margin: 0 0 12px;
    font-size: 14px;
}
.vfk-rev-form__flash--ok {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.vfk-rev-form__flash--err {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.vfk-rev-form__rating {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
    /* v6.0.4: legend + stars now sit on one line. align-items center
     * keeps the legend baseline visually tied to the star row.
     * Stars are 1→5 in source order; JS handles "fill 1..N" hover/
     * click painting via .is-filled. */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
}
.vfk-rev-form__rating legend {
    /* v6.0.4: legend goes inline with the stars instead of forcing a
     * line break (was: width: 100%, margin-bottom: 6px). Right margin
     * gives a small gap between "Your rating *" and the first star. */
    width: auto;
    margin: 0 12px 0 0;
    padding: 0;
    font-weight: 600;
    /* float:left is the cross-browser fix for fieldset legends not
     * participating in flex layouts (Safari quirk). */
    float: left;
}
.vfk-rev-form__required {
    color: #dc2626;
}
.vfk-rev-form__star {
    display: inline-block;
    cursor: pointer;
    line-height: 1;
    /* Position the radio off-screen but keep it focusable + tabbable
     * (display:none would remove it from the focus order, breaking
     * keyboard accessibility). */
    position: relative;
}
.vfk-rev-form__star input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.vfk-rev-form__star span {
    display: inline-block;
    font-size: 32px;
    color: #d1d5db;          /* default empty */
    line-height: 1;
    padding: 2px 1px;
    /* No transition — instant repaint on hover so users see snappy
     * feedback while sweeping across the row. */
}
.vfk-rev-form__star.is-filled span {
    color: #f59e0b;          /* filled gold */
}
.vfk-rev-form__star input:focus-visible + span {
    /* Keyboard focus ring. */
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
}
.vfk-rev-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}
.vfk-rev-form__submit {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.vfk-rev-form__submit:hover {
    background: #1d4ed8;
}
.vfk-rev-form__existing-photo {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #6b7280;
}
.vfk-rev-form__existing-photo img {
    display: inline-block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 4px;
}
.vfk-rev-form__photo-remove {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #4b5563;
}

/* ─── Review list ─────────────────────────────────────────────── */
.vfk-reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vfk-reviews__item {
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 0;
}
.vfk-reviews__item:last-child {
    border-bottom: 0;
}
.vfk-rev__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}
.vfk-rev__author {
    font-weight: 600;
    color: #111827;
}
.vfk-rev__date {
    color: #6b7280;
    margin-left: auto;
}
.vfk-rev__edited {
    color: #9ca3af;
}
.vfk-rev__photo {
    margin: 8px 0;
}
.vfk-rev__photo img {
    max-width: 220px;
    border-radius: 6px;
    display: block;
}
.vfk-rev__body {
    font-size: 15px;
    line-height: 1.55;
    color: #1f2937;
}
.vfk-rev__body p {
    margin: 0 0 0.8em;
}
.vfk-rev__body p:last-child {
    margin-bottom: 0;
}
.vfk-rev__flag {
    display: inline-block;
    margin-top: 6px;
}
.vfk-rev__flag-btn {
    background: none;
    border: 0;
    color: #9ca3af;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
}
.vfk-rev__flag-btn:hover {
    color: #dc2626;
}

.vfk-reviews__empty {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 24px 0;
}

.vfk-reviews--not-found,
.vfk-reviews--no-slug {
    padding: 20px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    color: #4b5563;
}
.vfk-reviews--not-found h2 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #1f2937;
}