/* --------------------- Prompt --------------------- */

.prompt__box {
  border-radius: 25px;
  padding: 50px;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.2s ease;
  user-select: none;
}

.prompt__box:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.prompt__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}

.prompt__title {
  margin: 0;
}

/* Kopieer-label — zelfde stijl als bij de kleuren: dark-green / light-green, inverteert op een dark-green vlak.
   Staat op dezelfde plek als de "Gekopieerd!"-feedback en wisselt daarmee af. */
.prompt__copy-hint {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: 'RecentGrotesk', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: .02em;
  background: var(--dark-green);
  color: var(--light-green);
  padding: 8px 18px;
  border-radius: 50px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.prompt__box:hover .prompt__copy-hint {
  opacity: 1;
  transform: translateY(0);
}

.prompt__box.is-copied .prompt__copy-hint {
  opacity: 0;
}

[style*="background-color:#002814"] .prompt__copy-hint,
[style*="background-color: #002814"] .prompt__copy-hint {
  background: var(--light-green);
  color: var(--dark-green);
}

.prompt__text {
  font-family: 'BricolageGrotesque', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.prompt__feedback {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--dark-green);
  color: var(--light-green);
  padding: 6px 16px;
  border-radius: 50px;
  font-family: 'RecentGrotesk', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.8em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

[style*="background-color:#002814"] .prompt__feedback,
[style*="background-color: #002814"] .prompt__feedback {
  background: var(--light-green);
  color: var(--dark-green);
}

.prompt__feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 900px) {
  .prompt__box { padding: 32px; }
}