/* =================================================================
   PLATFORMA — Public reviews widget + star picker
   Slice 11.PUB (2026-05-13)

   Konsulterede eksperter:
   - Senior UX Designer — clear hierarchy: headline metric first,
     distribution bars second, recent reviews last
   - Senior BI Dashboard Engineer — distribution bars use the same
     visual language as platforma-stats-row (left-aligned label,
     proportional fill, right-aligned count)
   - Senior Accessibility Engineer — focus rings preserved on the
     star-picker radios; keyboard navigation via Tab + arrow keys
     handled natively by radio group semantics
   - Senior Razor Theme-Switching Specialist — uses design tokens
     so the widget inherits the tenant's theme palette
   ================================================================= */

/* ── Widget container ─────────────────────────────────────────── */
.pf-reviews-widget {
    background: var(--platforma-bg-surface, #ffffff);
    border: 1px solid var(--platforma-border, #e5e7eb);
    border-radius: var(--platforma-radius-lg, 12px);
    padding: 1.5rem;
    margin: 1.5rem 0;
    color: var(--platforma-text-primary, #111827);
    font-family: var(--platforma-font-body, system-ui, sans-serif);
}

.pf-reviews-widget__head {
    margin-bottom: 1rem;
}

.pf-reviews-widget__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.pf-reviews-widget__empty {
    color: var(--platforma-text-muted, #6b7280);
    font-style: italic;
    margin: 0;
}

/* ── Summary row (headline metric) ────────────────────────────── */
.pf-reviews-widget__summary {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pf-reviews-widget__average {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.pf-reviews-widget__average-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--platforma-brand-primary, #b8101a);
    line-height: 1;
}

.pf-reviews-widget__average-out {
    font-size: 0.95rem;
    color: var(--platforma-text-muted, #6b7280);
}

.pf-reviews-widget__count {
    font-size: 0.9rem;
    color: var(--platforma-text-muted, #6b7280);
}

/* ── Distribution bars ────────────────────────────────────────── */
.pf-reviews-widget__distribution {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.pf-reviews-widget__dist-row {
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
}

.pf-reviews-widget__dist-label {
    color: var(--platforma-text-muted, #6b7280);
}

.pf-reviews-widget__dist-bar {
    background: var(--platforma-bg-muted, #f3f4f6);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    position: relative;
}

.pf-reviews-widget__dist-fill {
    background: var(--platforma-brand-primary, #b8101a);
    height: 100%;
    display: block;
    transition: width 0.3s ease;
}

.pf-reviews-widget__dist-count {
    text-align: right;
    color: var(--platforma-text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* ── Recent reviews list ──────────────────────────────────────── */
.pf-reviews-widget__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pf-reviews-widget__item {
    padding-top: 0.75rem;
    border-top: 1px solid var(--platforma-border, #e5e7eb);
}

.pf-reviews-widget__item-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.25rem;
}

.pf-reviews-widget__item-stars {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}

.pf-reviews-widget__star {
    font-size: 1rem;
}

.pf-reviews-widget__star--filled {
    color: #f59e0b;
}

.pf-reviews-widget__star--empty {
    color: var(--platforma-border, #e5e7eb);
}

.pf-reviews-widget__item-author {
    font-weight: 600;
    font-size: 0.95rem;
}

.pf-reviews-widget__item-date {
    color: var(--platforma-text-muted, #6b7280);
    font-size: 0.85rem;
    margin-left: auto;
}

.pf-reviews-widget__item-comment {
    color: var(--platforma-text-primary, #374151);
    line-height: 1.5;
    margin: 0.25rem 0 0 0;
    /* Defense in depth: even if a malicious script slipped through Razor,
       overflow-wrap prevents single-token comment-bombs from breaking layout. */
    overflow-wrap: anywhere;
}

/* ── Footer CTA ───────────────────────────────────────────────── */
.pf-reviews-widget__foot {
    margin-top: 1rem;
    text-align: right;
}

.pf-reviews-widget__cta {
    color: var(--platforma-brand-primary, #b8101a);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.pf-reviews-widget__cta:hover {
    text-decoration: underline;
}

/* ── Star-picker (submission form) ────────────────────────────── */
.pf-reviews-star-picker {
    display: inline-flex;
    gap: 0.25rem;
    direction: rtl;  /* enables :hover-cascade for star highlight */
}

.pf-reviews-star-picker__option {
    cursor: pointer;
    line-height: 1;
    user-select: none;
}

/* Hide the radio input but keep it focusable via TAB.
   Focus-visible drops the dotted outline onto the star sibling. */
.pf-reviews-star-picker__option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.pf-reviews-star-picker__star {
    font-size: 2rem;
    color: var(--platforma-border, #e5e7eb);
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-block;
}

/* Light-up cascade: checked star + all stars after it (RTL flip means
   "after" visually = "before" in DOM order, which is what we want). */
.pf-reviews-star-picker__option input:checked ~ .pf-reviews-star-picker__star,
.pf-reviews-star-picker__option input:checked + .pf-reviews-star-picker__star,
.pf-reviews-star-picker__option:hover .pf-reviews-star-picker__star,
.pf-reviews-star-picker__option:hover ~ .pf-reviews-star-picker__option .pf-reviews-star-picker__star {
    color: #f59e0b;
}

/* Focus indicator — landed onto the star image since the input itself
   is visually-hidden. WCAG 2.1 SC 2.4.7. */
.pf-reviews-star-picker__option input:focus-visible + .pf-reviews-star-picker__star {
    outline: 2px solid var(--platforma-focus, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}

.pf-reviews-star-picker__option:active .pf-reviews-star-picker__star {
    transform: scale(1.1);
}

/* ── Mobile-first responsive ──────────────────────────────────── */
@media (max-width: 600px) {
    .pf-reviews-widget {
        padding: 1rem;
    }
    .pf-reviews-widget__item-date {
        margin-left: 0;
        flex-basis: 100%;
        order: 99;
    }
    .pf-reviews-star-picker__star {
        font-size: 2.25rem; /* WCAG 2.5.5 touch target — bigger on mobile */
    }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pf-reviews-widget__dist-fill,
    .pf-reviews-star-picker__star {
        transition: none;
    }
    .pf-reviews-star-picker__option:active .pf-reviews-star-picker__star {
        transform: none;
    }
}