/* ===========================================================
   RSM Medicals Ltd — feedback form styles
   =========================================================== */

.feedback-hero {
  padding: 200px 0 90px;
  background:
    linear-gradient(120deg, rgba(7, 26, 63, 0.92), rgba(11, 46, 107, 0.82) 55%, rgba(11, 46, 107, 0.6)),
    url("images/1773337_medium2000.jpg") center 20% / cover no-repeat;
  text-align: center;
  position: relative;
}

.feedback-hero .eyebrow { justify-content: center; color: #a9c2f0; }
.feedback-hero .eyebrow::before { background: #a9c2f0; }
.feedback-hero h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.feedback-hero p { color: #d7e0f5; max-width: 560px; margin: 0 auto; }
.feedback-hero p a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.feedback-section {
  position: relative;
  z-index: 1;
  padding: 0 0 110px;
  margin-top: -64px;
}

.feedback-shell {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 44px 46px 48px;
}

/* rating */

.rating-block {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.rating-block label.group-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 14px;
}

.star-rating {
  position: relative;
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
}

.star-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.star-rating label {
  font-size: 2.1rem;
  line-height: 1;
  color: #dfe3ec;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  margin: 0;
}

/* radios sit in reverse (5..1) DOM order, so the general-sibling combinator
   lights up every star up to and including the one hovered/checked */
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: #f2a93c;
  transform: scale(1.06);
}

.rating-caption { margin-top: 10px; font-size: 0.85rem; color: var(--muted); font-weight: 600; min-height: 1.2em; }

/* recommend toggle */

.recommend-block { margin-bottom: 30px; }

.recommend-block .group-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 14px;
}

.pill-toggle { position: relative; display: inline-flex; gap: 10px; }

.pill-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.pill-toggle label {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy-dark);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill-toggle label:hover { border-color: var(--navy-light); }

.pill-toggle input:checked + label {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* form actions */

.feedback-actions { display: flex; gap: 14px; margin-top: 8px; }

.feedback-actions .btn-primary { flex: 1; justify-content: center; }

.btn-clear {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--muted);
}

.btn-clear:hover { border-color: var(--navy-light); color: var(--navy-light); }

.required-note { font-size: 0.8rem; color: var(--muted); margin: -8px 0 26px; }

/* success state */

.feedback-success { text-align: center; padding: 30px 6px 10px; }

.feedback-success .check-circle {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #e9f6ec;
  color: var(--green);
  font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}

.feedback-success h2 { color: var(--navy-dark); }
.feedback-success p { color: var(--muted); }

@media (max-width: 640px) {
  .feedback-shell { padding: 32px 24px 36px; }
  .star-rating label { font-size: 1.7rem; }
  .feedback-actions { flex-direction: column; }
}