/* Quiz Container */
#ktpa-quiz-container {
  max-width: 600px;
  margin: 0 auto;
}

/* Quiz Steps */
.quiz-step {
  display: none;
}
.quiz-step.active {
  display: block;
}

/* Progress Bar */
.progress-bar {
  background: #eee;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}
.progress-fill {
  background: #0073aa;
  height: 100%;
  width: 0%;
  transition: width 0.3s ease;
}

/* Chips */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.chip {
  padding: 8px 12px;
  background: #f0f0f0;
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
}
.chip.selected {
  background: #0073aa;
  color: #fff;
}

/* Buttons */
.next-step,
.submit-quiz,
.ktpa-button {
  padding: 10px 20px;
  background: #0073aa;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.next-step:disabled,
.submit-quiz:disabled,
.ktpa-button:disabled {
  background: #ccc;
  cursor: default;
}

/* Results List */
.experience-list {
  margin-top: 20px;
}
.exp-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  position: relative;
  background: #fff;
}
.exp-card h3 {
  margin-top: 0;
  color: #e65c00;
}
.exp-card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px 0;
}
.exp-card p {
  margin: 12px 0;
}
.exp-card small {
  display: block;
  margin-bottom: 8px;
  color: #666;
}
.exp-card .remove-exp {
  color: #d00;
  text-decoration: none;
  font-weight: bold;
  position: absolute;
  top: 16px;
  right: 16px;
}
.exp-card .remove-exp:hover {
  text-decoration: underline;
}

/* + Add Experience Button */
#ktpa-add-experience {
  display: inline-block;
  margin-bottom: 16px;
}

/* Modal content padding */
.ktpa-modal-content {
  padding: 20px;
}

/* Display whe Attive */
#ktpa-overlay.active,
#ktpa-modal.active {
  display: block;
}

/* Modal Content */
.modal-content {
  background: #fff;
  margin: auto;               /* center horizontally */
  width: 90%;
  max-width: 700px;
  max-height: calc(100vh - 120px); /* viewport minus padding */
  overflow-y: auto;           /* 👈 scroll inside the box */
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  padding: 20px;
  box-sizing: border-box;
}

/* Close Button */
.close-button {
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  top: 12px; right: 16px;
}
.close-button:hover {
  color: #000;
}

/* Checkbox labels */
.modal-exp-label {
  display: block;
  margin-bottom: 0.5rem;
}

/* .modal-exp-label,
.ktpa-modal-body label {
  display: block;
  margin: 8px 0;
} */

/* Responsive adjustments */
@media (max-width: 600px) {
  .modal-content {
    width: 95%;
    padding: 16px;
    margin: 20% auto;
  }
}