/* ==========================================================================
   YayReviews — shared empty state ("nothing here yet" / "nothing matches")
   Markup: templates/partials/empty-state.php and its JS mirror
   assets/js/frontend/empty-state.js. Used by product reviews, Q&A, the All
   Reviews and Happy Customers widgets, related reviews, store reviews, the
   vendor dashboard and the My Account reviews and rewards tabs.
   ========================================================================== */

.yayrev-empty-state {
    --yayrev-empty-state-accent: var(--yayrev-tone-primary, var(--yayrev-primary, var(--wp--preset--color--brandy-primary, #111111)));
    --yayrev-empty-state-text: var(--yayrev-tone-text, #111827);
    --yayrev-empty-state-muted: var(--yayrev-tone-text-muted, #6b7280);
    --yayrev-empty-state-border: var(--yayrev-tone-border, #e5e7eb);
    padding: 32px 16px;
    text-align: center;
    color: var(--yayrev-empty-state-text);
}

.yayrev-empty-state .yayrev-empty-state__art {
    display: block;
    margin: 0 auto 12px;
    color: var(--yayrev-empty-state-accent);
}

.yayrev-empty-state .yayrev-empty-state__title {
    margin: 0 0 4px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--yayrev-empty-state-text);
}

.yayrev-empty-state .yayrev-empty-state__text {
    margin: 0 auto;
    max-width: 360px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--yayrev-empty-state-muted);
}

.yayrev-empty-state .yayrev-empty-state__action {
    display: inline-block;
    box-sizing: border-box;
    margin: 16px 0 0;
    padding: 8px 16px;
    border: 1px solid var(--yayrev-empty-state-border);
    border-radius: 6px;
    background: var(--yayrev-tone-surface, #fff);
    color: var(--yayrev-empty-state-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.yayrev-empty-state .yayrev-empty-state__action:hover {
    background: var(--yayrev-tone-surface-muted, #f9fafb);
    color: var(--yayrev-empty-state-text);
}

.yayrev-empty-state .yayrev-empty-state__action:focus-visible {
    outline: 2px solid var(--yayrev-empty-state-accent);
    outline-offset: 2px;
}