/* ----------  CSS VARIABLES (easy to theme)  ---------- */
:root{
  --primary: <?= $results->primary_color ?: '#0052cc' ?>;
  --primary-light: <?= colorBrightness($results->primary_color,0.8) ?: '#e5efff' ?>;
  --grey: #f8f9fa;
  --dark: #212529;
  --text: #495057;
  --muted: #6c757d;
  --border: #e9ecef;
  --radius: 12px;
  --shadow: 0 4px 18px rgba(0,0,0,.06);
}

/* ----------  SECTION  ---------- */
.reviews-section{ padding:80px 0; background:#fff; }
.section-head{ text-align:center; margin-bottom:50px; }
.section-head .title{ font-size:2rem; font-weight:700; color:var(--dark); margin-bottom:8px; }
.section-head .subtitle{ color:var(--muted); font-size:1.05rem; }

/* ----------  RATING CARD  ---------- */
.rating-card{ background:var(--grey); border-radius:var(--radius); box-shadow:var(--shadow); padding:35px 30px; margin-bottom:50px; }
.big-rating{ font-size:3.5rem; font-weight:800; color:var(--primary); line-height:1; }
.big-stars{ font-size:1.4rem; color:#ffa41b; margin:8px 0 5px; letter-spacing:2px; }
.review-count{ color:var(--muted); font-size:.95rem; }

.bar-row{ display:flex; align-items:center; margin-bottom:10px; }
.bar-label{ width:60px; font-size:.9rem; font-weight:600; }
.bar-track{ flex:1; height:10px; background:#e9ecef; border-radius:5px; overflow:hidden; margin:0 12px; }
.bar-fill{ height:100%; background:linear-gradient(90deg, #ffa41b, #ff8c00); border-radius:5px; }
.bar-count{ width:40px; text-align:right; font-weight:600; font-size:.9rem; color:var(--text); }

/* ----------  REVIEW CARD  ---------- */
.reviews-wrapper{ display:grid; gap:25px; }
.review-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:25px; box-shadow:var(--shadow); transition:.3s; }
.review-card:hover{ transform:translateY(-3px); box-shadow:0 8px 26px rgba(0,0,0,.07); }

.review-header{ display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.avatar{ width:44px; height:44px; border-radius:50%; background:var(--primary-light); color:var(--primary); font-weight:700; display:grid; place-items:center; font-size:1.1rem; }
.meta{ flex:1; }
.name{ margin:0; font-size:1rem; font-weight:600; }
.stars{ font-size:1rem; color:#e9ecef; }
.stars .active{ color:#ffa41b; }
.date{ font-size:.85rem; color:var(--muted); }

.review-title{ font-size:1.05rem; font-weight:600; margin-bottom:10px; }
.review-body{ color:var(--text); line-height:1.7; }
.review-body a.read-more{ font-weight:600; color:var(--primary); }

.review-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; }
.badge{ font-size:.75rem; padding:4px 8px; border-radius:4px; }
.badge.verified{ background:#d4edda; color:#155724; }
.badge.reviewer{ background:var(--grey); color:var(--muted); }

.helpful-btn{ background:none; border:1px solid var(--border); color:var(--muted); padding:5px 10px; border-radius:4px; font-size:.8rem; cursor:pointer; transition:.2s; }
.helpful-btn:hover{ border-color:var(--primary); color:var(--primary); }
.helpful-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

.builder-response{ margin-top:18px; padding:15px; background:var(--grey); border-left:4px solid var(--primary); border-radius:0 var(--radius) var(--radius) 0; font-size:.9rem; }
.builder-response strong{ display:block; margin-bottom:5px; }

/* ----------  FORM CARD  ---------- */
.review-form-card{ background:var(--grey); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.review-form-card h5{ margin-bottom:20px; font-weight:600; }
.form-control{ border-radius:6px; border:1px solid var(--border); padding:10px 14px; font-size:.95rem; }
.form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,82,204,.15); }
label span{ color:#e74c3c; }

.star-rating{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:8px; margin-bottom:20px; }
.star-rating input{ display:none; }
.star-rating label{ font-size:2rem; color:#e9ecef; cursor:pointer; transition:color .2s; }
.star-rating label:before{ content:'★'; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label{ color:#ffa41b; }

/* ----------  EMPTY STATE  ---------- */
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state i{ font-size:3.5rem; margin-bottom:15px; }
.empty-state h5{ font-weight:600; }

/* ----------  LOAD MORE BTN  ---------- */
#loadMoreReviews{ padding:8px 24px; border-radius:30px; font-weight:600; transition:.3s; }