.spectro-feedback-form {
  margin-top: 20px;
}
.spectro-feedback-form .spectro-q {
  margin-bottom: 15px;
}
.spectro-feedback-form button {
  background: #0073aa;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* --- Overall container --- */
.spectro-feedback-form {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* --- Headings --- */
.spectro-feedback-form h2 {
  font-size: 1.8em;
  font-weight: 700;
  text-align: center;
  color: #333;
  margin-bottom: 10px;
}
.spectro-feedback-form p.intro {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
}

/* --- Question blocks --- */
.spectro-question {
  margin-bottom: 40px;
}
.spectro-question label.question-title {
  font-weight: 600;
  color: #222;
  display: block;
  margin-bottom: 15px;
}

/* --- Rating scale layout --- */
.spectro-rating-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.spectro-rating-scale .scale-label {
  font-size: 0.9em;
  font-weight: 500;
  color: #666;
}

.spectro-rating-scale .scale-options {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* --- Radio buttons --- */
.spectro-rating-scale input[type="radio"] {
  display: none;
}
/* 
.spectro-rating-scale label.scale-option {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
 */
/* --- Radio scale with gradient color coding --- */
.spectro-rating-scale label.scale-option {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Color-coded positions */
.scale-options input[id$="_1"] + label.scale-option {
  border-color: #b58aff; /* light purple */
}
.scale-options input[id$="_2"] + label.scale-option {
  border-color: #a694ff;
}
.scale-options input[id$="_3"] + label.scale-option {
  border-color: #7ea8ff;
}
.scale-options input[id$="_4"] + label.scale-option {
  border-color: #69c4a5;
}
.scale-options input[id$="_5"] + label.scale-option {
  border-color: #55d88a; /* green */
}

/* Hover and checked state */
.scale-options label.scale-option:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
}

.scale-options input[type="radio"]:checked + label.scale-option {
  background: radial-gradient(circle at center, currentColor 45%, transparent 47%);
  box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.15);
  transform: scale(1.05);
}

/* Automatically inherit border color to fill color */
.scale-options input[id$="_1"]:checked + label.scale-option { color: #b58aff; }
.scale-options input[id$="_2"]:checked + label.scale-option { color: #a694ff; }
.scale-options input[id$="_3"]:checked + label.scale-option { color: #7ea8ff; }
.scale-options input[id$="_4"]:checked + label.scale-option { color: #69c4a5; }
.scale-options input[id$="_5"]:checked + label.scale-option { color: #55d88a; }




.spectro-rating-scale label.scale-option:hover {
  transform: scale(1.1);
  border-color: #6c63ff;
}

.spectro-rating-scale input[type="radio"]:checked + label.scale-option {
  border-color: #6c63ff;
  background: radial-gradient(circle at center, #6c63ff 40%, transparent 41%);
}

/* --- Open-ended textareas --- */
.spectro-feedback-form textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  font-size: 1em;
  margin-top: 10px;
  resize: vertical;
  transition: border 0.2s ease;
}

.spectro-feedback-form textarea:focus {
  border-color: #6c63ff;
  outline: none;
}

/* --- Submit button --- */
.spectro-feedback-form button.submit-btn {
  display: block;
  width: 100%;
  background: #6c63ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.spectro-feedback-form button.submit-btn:hover {
  background: #574bdb;
}

/* --- Thank you message --- */
.spectro-feedback-thanks {
  text-align: center;
  font-size: 1.2em;
  color: #444;
}


/* Hide LearnDash "Mark Complete" button when feedback form is active */
body.single-sfwd-lessons .ld-content-actions {
  display: none;
}

body.spectro-feedback-submitted .ld-content-actions {
  display: block !important;
}