/* CourseFeedbackForm — fine-corso, 3 domande gate-by-feedback.
   Riusa .pf-overlay/.pf-backdrop/.pf-panel/.pf-close/.pf-hero da patto-v1.css:
   qui solo i campi specifici del form. */

.cf-panel { max-width: 620px; }

.cf-fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }

.cf-field { display: flex; flex-direction: column; gap: 6px; }

.cf-question {
  font-weight: 600;
  color: var(--lp-text, #f6f8ff);
  font-size: 0.98rem;
}

.cf-hint {
  color: var(--lp-text-muted, rgba(246, 248, 255, 0.6));
  font-size: 0.84rem;
}

.cf-textarea {
  resize: vertical;
  min-height: 64px;
  border-radius: 12px;
  border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.14));
  background: var(--lp-surface, rgba(255, 255, 255, 0.04));
  color: var(--lp-text, #f6f8ff);
  padding: 10px 12px;
  font: inherit;
}

.cf-textarea:focus-visible {
  outline: 2px solid var(--lp-accent, #6C3CE1);
  outline-offset: 2px;
}

.cf-error {
  color: var(--lp-accent-danger, #f87171);
  font-size: 0.88rem;
  margin: 0 0 14px;
}

.cf-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.cf-skip-btn {
  background: transparent;
  border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.14));
  color: var(--lp-text-muted, rgba(246, 248, 255, 0.7));
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}

.cf-skip-btn:hover { color: var(--lp-text, #f6f8ff); border-color: var(--lp-border-strong, rgba(255, 255, 255, 0.22)); }

@media (prefers-reduced-motion: reduce) {
  .cf-textarea { transition: none; }
}