/* Tire Rating Block — Frontend Styles v1.5.0 */
.trb-wrap *{box-sizing:border-box;margin:0;padding:0}
.trb-wrap{font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;background:#fff;border:1px solid #e4e2db;border-radius:14px;overflow:hidden;max-width:680px;margin:2rem auto;box-shadow:0 2px 20px rgba(0,0,0,.08)}

/* Header */
.trb-header{padding:1.4rem 1.75rem 1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.trb-badge{display:inline-block;background:#ef9f27;color:#1a1a2e;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-bottom:6px}
.trb-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2}
.trb-subtitle{color:rgba(255,255,255,.6);font-size:12px;margin-top:3px}

/* Body */
.trb-body{display:grid;grid-template-columns:190px 1fr}
@media(max-width:540px){.trb-body{grid-template-columns:1fr}}

/* Score panel */
.trb-score-panel{background:#f8f7f4;border-right:1px solid #e4e2db;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem;gap:.5rem}
@media(max-width:540px){.trb-score-panel{border-right:none;border-bottom:1px solid #e4e2db;padding:1.5rem}}
.trb-big-score{font-size:72px;font-weight:800;color:#1a1a2e;line-height:1;letter-spacing:-3px}

/* ── Half-star display ──────────────────────────────────────────
   Two layers of 5 star characters stacked via position:absolute.
   Bottom: ☆☆☆☆☆  color #ddd  (always full width)
   Top:    ★★★★★  color gold  (width = starCount / 5 × 100%)
   Result: any 0.5-step value renders correctly, e.g.
     4.5 → top layer 90% wide → 4 full + 1 half gold star visible.
   No SVG, no images, no extra elements needed.
─────────────────────────────────────────────────────────────── */
.trb-stars{
    position:relative;
    display:inline-block;
    font-size:26px;
    letter-spacing:3px;
    line-height:1;
    margin:.3rem 0;
}
.trb-stars-empty{
    display:block;
    color:#ddd;
    white-space:nowrap;
}
.trb-stars-filled{
    position:absolute;
    top:0;
    left:0;
    display:block;
    overflow:hidden;
    white-space:nowrap;
    color:#ef9f27;
    /* width is set inline by PHP: width:(starCount/5*100)% */
}

.trb-out-of{font-size:11px;color:#aaa;text-transform:uppercase;letter-spacing:.08em}
.trb-verdict-pill{margin-top:.85rem;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 14px;border-radius:100px}

/* Bars */
.trb-bars{padding:1.25rem 1.75rem;display:flex;flex-direction:column;justify-content:center}
.trb-bar-row{display:grid;grid-template-columns:140px 1fr 38px;align-items:center;gap:12px;padding:.6rem 0;border-bottom:1px solid #f0ede6}
.trb-bar-row:last-child{border-bottom:none}
.trb-bar-label{font-size:13px;color:#444;font-weight:500;white-space:nowrap}
.trb-bar-track{background:#ede9e0;border-radius:100px;height:8px;overflow:hidden}
.trb-bar-fill{height:8px;border-radius:100px;width:0%;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.trb-bar-num{font-size:13px;font-weight:700;color:#1a1a2e;text-align:right}

/* Footer */
.trb-footer{background:#f8f7f4;border-top:1px solid #e4e2db;padding:.8rem 1.75rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.trb-footer-note{font-size:11px;color:#aaa;letter-spacing:.03em}
.trb-footer-brand{font-size:11px;color:#888;font-weight:700;letter-spacing:.05em;text-transform:uppercase}