/* ============================================================
   Reviews (NPF_Job_Reviews) — the shared section.

   Two pages print it: a service page, where it shows the reviews
   left for that one service, and a public profile, where it shows
   every review left for that freelancer. Same markup, same design,
   so it lives in its own file and both pages enqueue it rather
   than either one owning it.

   SCOPING
   -------
   Every selector is scoped to `.npf-reviews`, the section's own
   wrapper, rather than to a page — that is what lets it travel.
   The rules moved here from npf-single-job.css, where they were
   scoped `.npf-detail X`; `.npf-reviews X` carries the identical
   specificity, so nothing on the service page changed weight.
   ============================================================ */

.npf-reviews.npf-reviews { font-family: var(--npf-font-body, "Inter", system-ui, sans-serif); }

.npf-reviews .npf-reviews__title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #020b18;
}

.npf-reviews .npf-reviews__summary {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 28px;
  align-items: center;
  padding: 20px 22px;
  margin-bottom: 26px;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  background: #f9fbff;
}

@media (max-width: 640px) {
  .npf-reviews .npf-reviews__summary { grid-template-columns: 1fr; gap: 18px; }
}

.npf-reviews .npf-reviews__score { display: grid; gap: 6px; justify-items: start; }

.npf-reviews .npf-reviews__average {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: #020b18;
}

.npf-reviews .npf-reviews__count { font-size: 13px; color: #677489; }

.npf-reviews .npf-reviews__breakdown { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }

.npf-reviews .npf-reviews__bar-row {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  color: #4c5563;
}

.npf-reviews .npf-reviews__bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: #e4e7e9;
  overflow: hidden;
}

.npf-reviews .npf-reviews__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #f5a623;
}

.npf-reviews .npf-reviews__bar-count { text-align: right; color: #677489; }

/* ---------- The reviews ---------- */

.npf-reviews .npf-reviews__list { margin: 0; padding: 0; list-style: none; }

.npf-reviews .npf-review {
  padding: 20px 0;
  border-top: 1px solid #eef1f6;
}
.npf-reviews .npf-review:first-child { border-top: 0; padding-top: 0; }
.npf-reviews .npf-review.is-hidden { display: none; }

.npf-reviews .npf-review__who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.npf-reviews .npf-review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
}
.npf-reviews .npf-review__avatar--sm { width: 32px; height: 32px; }

.npf-reviews .npf-review__name { font-weight: 600; font-size: 15px; color: #020b18; }

.npf-reviews .npf-review__reply-tag {
  font-size: 11px;
  font-weight: 600;
  color: #677489;
  background: #eef1f6;
  border-radius: 999px;
  padding: 3px 9px;
}

.npf-reviews .npf-review__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 0;
  font-size: 13px;
  color: #677489;
}

.npf-reviews .npf-review__grade { font-weight: 700; color: #f5a623; }

.npf-reviews .npf-review__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4c5563;
  white-space: pre-line;
}

/* The service a review was left for. Only printed on a profile, where the
   reviews span everything the freelancer sells and the grade alone does not
   say what was bought. */
.npf-reviews .npf-review__for {
  margin: 8px 0 0;
  font-size: 13px;
  color: #677489;
}

.npf-reviews .npf-review__for a { color: #4f84c3; }
.npf-reviews .npf-review__for a:hover { text-decoration: underline; }

.npf-reviews .npf-review__reply {
  margin: 14px 0 0 50px;
  padding: 14px 16px;
  border-left: 3px solid #e4e7e9;
  background: #fafafa;
  border-radius: 0 10px 10px 0;
}
.npf-reviews .npf-review__reply .npf-review__text { font-size: 14px; }

@media (max-width: 640px) {
  .npf-reviews .npf-review__reply { margin-left: 0; }
}

/* ---------- Stars ---------- */

.npf-reviews .npf-reviews__stars { display: inline-flex; align-items: center; gap: 1.5px; }
.npf-reviews .npf-reviews__stars .npf-star { display: block; width: 15px; height: 15px; flex: none; }
.npf-reviews .npf-reviews__stars .npf-star__track { fill: #e4e7e9; }
.npf-reviews .npf-reviews__stars .npf-star__fill { fill: #f5a623; }

/* ---------- Show more ---------- */

.npf-reviews .npf-reviews__more {
  margin-top: 18px;
  padding: 11px 20px;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #020b18;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.npf-reviews .npf-reviews__more:hover { background: #f9fbff; border-color: #4f84c3; }

/* ---------- No reviews yet ---------- */

.npf-reviews .npf-reviews__none {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 24px;
  text-align: center;
  border: 1px dashed #e4e7e9;
  border-radius: 12px;
  background: #f9fbff;
}

.npf-reviews .npf-reviews__none-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
  border-radius: 999px;
  background: #eef1f6;
  color: #8a94a3;
}
.npf-reviews .npf-reviews__none-icon svg { width: 22px; height: 22px; }

.npf-reviews .npf-reviews__none-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #020b18;
}

.npf-reviews .npf-reviews__none-text {
  margin: 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.55;
  color: #677489;
}

/* ============================================================
   Placement on the public profile.

   The section is appended to the bottom of the wide right-hand
   column, below Portfolio and Jobs — the theme's own sections
   there are `.content-wrapper`, and this takes the same class so
   it sits in the same rhythm rather than needing its own margin
   rules. Everything below is spacing only; the section's own
   design is the block above, unchanged.
   ============================================================ */

body.npf-profile .npf-profile-reviews {
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid #eef1f6;
}

/* The theme separates each right-column section with a rule of its own; two
   in a row would read as an empty section between them. */
body.npf-profile .npf-profile-reviews:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}