/* ============================================================
   Feedback page — static comment section rebuild
   Extends styles.css — does not duplicate shared tokens/classes
   ============================================================ */

.sec-feedback-intro{
  padding: 100px var(--pad-desktop) 0;
  background: var(--bg-cream);
  text-align: center;
}
.feedback-head{
  max-width: 760px;
  margin: 0 auto;
}
.feedback-head .h2-heading{ text-align:center; }
.feedback-head .body-copy{ text-align:center; }

.sec-feedback-form{
  padding: 60px var(--pad-desktop) 100px;
  background: var(--bg-cream);
}
.feedback-panel{
  max-width: 760px;
  margin: 0 auto 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.feedback-form{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.feedback-form[hidden], .feedback-state[hidden]{ display: none; }
.feedback-state{
  font-family: var(--font-body); font-size: clamp(15px,1.1vw,17px); color: var(--text);
  margin: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.feedback-state p{ margin: 0; }
.feedback-state--done{ color: var(--success); }
.feedback-link{ display: inline-block; text-decoration: none; }
.form-row{
  display: flex;
  gap: 24px;
}
.form-field{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field--full{ width: 100%; }
.form-field label{
  font-family: var(--font-body);
  font-size: clamp(14px,1vw,16px);
  color: var(--text);
}
.form-field input,
.form-field textarea{
  font-family: var(--font-body);
  font-size: clamp(14px,1vw,16px);
  color: var(--text);
  background: var(--white);
  border: 1px solid #BCBCC0;
  border-radius: 20px;
  padding: 14px 20px;
  width: 100%;
}
.form-field textarea{ resize: vertical; }
.form-field input:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--secondary);
}
.feedback-submit{
  align-self: flex-start;
  background: var(--primary);
  color: var(--white);
  border: none;
  cursor: pointer;
  border-radius: 20px;
  padding: 16px 40px;
  font-family: var(--font-display);
  font-size: clamp(16px,1.2vw,18px);
  font-weight: 600;
  transition: background .2s;
}
.feedback-submit:hover{ background: var(--secondary); }
.form-notice{
  font-family: var(--font-body);
  font-size: clamp(14px,1vw,16px);
  color: var(--success);
  margin-top: 4px;
  display: none;
}
.form-notice.is-visible{ display: block; }
.form-notice.is-error{ color: var(--danger); }
.feedback-submit:disabled{ opacity: .6; cursor: default; }

.feedback-list{
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.feedback-item{
  border-top: 1px solid #E4E4E4;
  padding-top: 24px;
}
.feedback-name{
  font-family: var(--font-display);
  font-size: clamp(18px,1.6vw,22px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.feedback-meta{
  font-family: var(--font-body);
  font-size: clamp(13px,0.9vw,14px);
  color: var(--secondary);
  margin: 0 0 10px;
}
.feedback-comment{
  font-family: var(--font-body);
  font-size: clamp(15px,1.1vw,17px);
  color: var(--text);
  margin: 0;
}

@media (max-width: 720px){
  .sec-feedback-intro{ padding: 60px var(--pad-mobile) 0; }
  .sec-feedback-form{ padding: 40px var(--pad-mobile) 60px; }
  .form-row{ flex-direction: column; gap: 24px; }
}