/* IGotAPro — native reviews (Phase 2, 2026-10-28).
   Loaded only by pro pages, the Spa profile, and /reviews/.
   Design system: the site's teal + sun-yellow palette, Fraunces serif
   display type, and the check-up report's letterhead polish (white
   cards, deep-green borders, a circular score medallion). Type runs a
   size larger than the claim form on purpose — homeowners read this on
   a phone, often in sunlight. */

/* ---------- pro page pieces ---------- */
.profile-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 6px;
  font-size: 20px;
  color: var(--ink);
}
.profile-rating .pro-stars { font-size: 22px; }
.profile-about-text {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 68ch;
}
.profile-services { font-size: 16px; color: var(--ink-soft); }
.profile-photo--initials {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(237, 198, 106, 0.28), transparent 52%),
    linear-gradient(150deg, var(--green-2), var(--green) 58%, var(--ink));
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-initials {
  font: 600 96px/1 var(--serif);
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.25);
}

/* ---------- reviews section ---------- */
.reviews-section {
  background:
    radial-gradient(ellipse at 96% 0%, rgba(220, 233, 221, 0.8), transparent 46%),
    #f2f1e7;
  border-top: 1px solid var(--line);
}
.reviews-head { max-width: 720px; }
.reviews-head h2 { margin-bottom: 10px; }
.reviews-power {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.reviews-block { margin-top: 30px; }
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.reviews-medallion {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--green);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow);
}
.reviews-medallion .num {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: var(--green);
}
.reviews-medallion .den {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.reviews-summary-text strong {
  display: block;
  font: 600 22px var(--serif);
  color: var(--ink);
}
.reviews-summary-text span { color: var(--muted); font-size: 14.5px; }
.reviews-list {
  display: grid;
  gap: 14px;
  max-width: 780px;
}
.review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 8px 26px rgba(25, 53, 46, 0.06);
}
.review-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.review-card .pro-stars { font-size: 18px; }
.review-service {
  background: var(--mint);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.review-text {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 10px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.review-meta { font-size: 14px; color: var(--muted); margin: 0; }
.review-meta strong { color: var(--ink-soft); }

/* ---------- success panel ---------- */
.review-success {
  max-width: 780px;
  margin-top: 26px;
  background: #eef5ea;
  border: 1px solid #cfe0c8;
  border-left: 5px solid var(--green-2);
  border-radius: 14px;
  padding: 20px 22px;
}
.review-success h3 { margin: 0 0 6px; font: 600 21px var(--serif); }
.review-success p { margin: 0 0 12px; font-size: 15.5px; color: var(--ink-soft); }
.review-success textarea {
  width: 100%;
  border: 1px solid #dce2d9;
  border-radius: 10px;
  background: #fff;
  padding: 12px 13px;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 12px;
}
.review-success-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- the form ---------- */
.review-form-card {
  max-width: 780px;
  margin-top: 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--green);
  border-radius: 21px;
  padding: 30px 30px 26px;
  box-shadow: var(--shadow);
}
.review-form-card h3 {
  font: 600 26px var(--serif);
  margin: 0 0 6px;
  color: var(--ink);
}
.review-form-sub {
  font-size: 15.5px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.55;
}
.review-form .hp-field { display: none; }
.review-form .rf-label {
  display: block;
  color: #465b50;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}
.review-form .req { color: var(--coral-dark); }
.review-form input:not([type="radio"]):not([type="checkbox"]),
.review-form textarea {
  display: block;
  width: 100%;
  border: 1px solid #dce2d9;
  border-radius: 12px;
  background: #fbfcf8;
  padding: 14px 15px;
  margin-top: 7px;
  color: var(--ink);
  font-size: 16px;
  outline: none;
}
.review-form input:focus,
.review-form textarea:focus {
  border-color: #7eaa87;
  box-shadow: 0 0 0 3px rgba(126, 170, 135, 0.18);
}
.review-form textarea { resize: vertical; line-height: 1.55; }
.review-form input::placeholder,
.review-form textarea::placeholder { color: #a3ada5; }
.review-form .optional { color: #96a098; font-weight: 500; margin-left: 4px; }
.review-form .rf-note {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.star-field {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}
.star-field legend {
  color: #465b50;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
  margin-bottom: 6px;
}
.star-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
}
.star-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.star-input label {
  font-size: 46px;
  line-height: 1;
  padding: 4px 5px;
  min-width: 52px;
  text-align: center;
  color: #d8dccf;
  cursor: pointer;
  border-radius: 10px;
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--sun); }
.star-input input:focus-visible + label { outline: 3px solid rgba(232, 119, 91, 0.42); }
.star-word {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-2);
  min-height: 21px;
}
.rf-check {
  display: flex !important;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  line-height: 1.5;
  margin-bottom: 18px !important;
  cursor: pointer;
}
.rf-check input {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--green-2);
}
.review-error {
  background: #fbe9e2 !important;
  color: #8c3a24 !important;
  font-size: 14px !important;
  margin: 0 0 16px;
}
.review-submit {
  width: 100%;
  padding: 16px 20px;
  font-size: 17px;
  border-radius: 14px;
}
.review-form .privacy-note { font-size: 12.5px; margin-top: 14px; }
.review-form .privacy-note a { text-decoration: underline; }

/* ---------- /reviews/ rules page ---------- */
.rules-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--green);
  border-radius: 21px;
  padding: 30px;
  box-shadow: var(--shadow);
  max-width: 820px;
}
.rules-card h3 { font: 600 22px var(--serif); margin: 22px 0 8px; }
.rules-card h3:first-child { margin-top: 0; }
.rules-card p, .rules-card li {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.rules-card ul { padding-left: 22px; margin: 8px 0; }
.rules-card li { margin-bottom: 7px; }

@media (max-width: 700px) {
  .review-form-card { padding: 24px 20px 22px; }
  .review-form .form-row { grid-template-columns: 1fr; }
  .profile-initials { font-size: 72px; }
  .star-input label { font-size: 42px; min-width: 48px; }
  .reviews-medallion { width: 84px; height: 84px; }
  .reviews-medallion .num { font-size: 31px; }
  .review-card { padding: 18px; }
}

/* ---------- source tiles (added with the spec restorations) ---------- */
.source-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 720px;
  margin-top: 20px;
}
.source-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.source-tile--native { border-color: var(--green-2); border-width: 1.5px; }
.source-tile-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.source-tile--native .source-tile-label { color: var(--green-2); }
.source-tile .pro-stars { font-size: 19px; }
.source-tile-line { font-size: 15px; font-weight: 700; color: var(--ink); }
.review-form select {
  display: block;
  width: 100%;
  border: 1px solid #dce2d9;
  border-radius: 12px;
  background: #fbfcf8;
  padding: 14px 15px;
  margin-top: 7px;
  color: var(--ink);
  font-size: 16px;
  outline: none;
}
.review-form select:focus {
  border-color: #7eaa87;
  box-shadow: 0 0 0 3px rgba(126, 170, 135, 0.18);
}
[data-paused-notice] h3 { font: 600 24px var(--serif); margin: 0 0 8px; }
[data-paused-notice] p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- confirm.php pages ---------- */
.confirm-top {
  background: var(--green);
  color: #fff;
  padding: 16px 0;
}
.confirm-top .shell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.confirm-top .brand-word { color: #fff; font-size: 24px; }
.confirm-top-note {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sun);
}
.confirm-main { padding: 42px 0 60px; }
.confirm-card { margin: 0 auto; }
.confirm-foot {
  max-width: 820px;
  margin: 18px auto 0;
  font-size: 14px;
  color: var(--muted);
}
.confirm-foot a { text-decoration: underline; }
.confirm-review { margin: 16px 0; box-shadow: none; }
.confirm-stars { font-size: 21px; color: var(--sun); letter-spacing: 2px; }
.confirm-second-door { margin: 22px 0 6px; }
.confirm-second-door h4, .confirm-edit h4 {
  font: 600 20px var(--serif);
  margin: 0 0 6px;
  color: var(--ink);
}
.confirm-second-door p, .confirm-edit p, .confirm-note {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.copy-text {
  width: 100%;
  border: 1px solid #dce2d9;
  border-radius: 10px;
  background: #fbfcf8;
  padding: 12px 13px;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 12px;
}
.confirm-edit {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
@media (max-width: 700px) {
  .source-tiles { grid-template-columns: 1fr; }
}
.review-response {
  margin-top: 12px;
  background: #f2f6ee;
  border-left: 4px solid var(--green-2);
  border-radius: 0 12px 12px 0;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- audit-fix additions (2026-10-28) ---------- */
/* "Rating changed from 5★ to 1★" under an edited review (fix C2). */
.review-edited-note {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  margin: 6px 0 0;
}
/* "N reviews removed under the rules" on a pro page (fix H5);
   reviews.js only creates it when the count is above zero. */
.reviews-removed-note {
  max-width: 780px;
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted);
}