/**
 * WCBelts Review Loop – Front-end styles
 * Only provides star rating glyphs and a utility avatar circle class.
 * Card/typography styling should live in your Elementor template.
 */

/* ── Star Rating ─────────────────────────────────────────── */

.wcb-stars {
    display: inline-flex;
    gap: 2px;
    line-height: 1;
}

.wcb-star {
    font-style: normal;
    font-size: 1.1em;
}

.wcb-star--on {
    color: #C9A84C; /* Championship Gold – matches your design system */
}

.wcb-star--off {
    color: #d4c5a3; /* muted gold for empty stars */
}

/* ── Initials Avatar Circle ──────────────────────────────── */
/*
 * Apply class "wcb-avatar-circle" to the Elementor Text widget
 * that uses the Reviewer Initials dynamic tag.
 *
 * In Elementor → Advanced → CSS Classes → wcb-avatar-circle
 */

.wcb-avatar-circle .elementor-widget-container {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #1a1a1a;   /* Forge Black */
    color: #C9A84C;               /* Championship Gold */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* ── Review Card (optional utility class) ────────────────── */
/*
 * Add "wcb-review-card" to the Loop Item section wrapper
 * via Elementor → Advanced → CSS Classes.
 */

.wcb-review-card {
    background: #ffffff;
    border: 1px solid #e8e2d9;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── Product Label (optional utility class) ──────────────── */
/*
 * Add "wcb-product-label" to the Text widget showing the product title.
 */

.wcb-product-label .elementor-widget-container {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C9A84C;
}

/* ── Review Body Italic + Opening Quote ─────────────────── */
/*
 * Add "wcb-review-body" to the Text Editor widget showing review content.
 */

.wcb-review-body .elementor-widget-container {
    font-style: italic;
    color: #2c2c2c;
    font-size: 0.95em;
    line-height: 1.65;
    position: relative;
    padding-left: 0;
}

.wcb-review-body .elementor-widget-container::before {
    content: '\201C'; /* Unicode left double quotation mark */
    font-size: 2.4em;
    line-height: 0.75;
    color: #C9A84C;
    font-family: Georgia, serif;
    display: block;
    margin-bottom: 4px;
}