/* Royal Plugins support-page feedback widget.
   End-of-article, two-step Stripe pattern. Brand tokens scoped to widget. */

.royal-support-feedback {
  --rpf-gold: #C9A227;
  --rpf-gold-dark: #B8960F;
  --rpf-cream: #FAF8F5;
  --rpf-white: #FFFFFF;
  --rpf-ink: #2C2C2C;
  --rpf-muted: #6B6B6B;
  --rpf-line: rgba(201, 162, 39, 0.15);
  --rpf-hover: rgba(201, 162, 39, 0.08);

  max-width: 800px;
  margin: 3rem auto 2rem;
  padding: 1.5rem 2rem;
  background: var(--rpf-white);
  border: 1px solid var(--rpf-line);
  border-left: 3px solid var(--rpf-gold);
  border-radius: 4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--rpf-ink);
  position: relative;
}

.royal-support-feedback .rpf-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.royal-support-feedback .rpf-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--rpf-ink);
  margin: 0;
}

.royal-support-feedback .rpf-buttons {
  display: flex;
  gap: 0.75rem;
}

.royal-support-feedback .rpf-btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--rpf-line);
  background: var(--rpf-white);
  color: var(--rpf-ink);
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.royal-support-feedback .rpf-btn:hover {
  border-color: var(--rpf-gold);
  background: var(--rpf-hover);
}

.royal-support-feedback .rpf-btn:focus-visible {
  outline: 2px solid var(--rpf-gold);
  outline-offset: 2px;
  border-color: var(--rpf-gold);
}

.royal-support-feedback .rpf-btn-submit {
  background: var(--rpf-ink);
  color: var(--rpf-white);
  border-color: var(--rpf-ink);
}

.royal-support-feedback .rpf-btn-submit:hover {
  background: var(--rpf-gold-dark);
  border-color: var(--rpf-gold-dark);
  color: var(--rpf-white);
}

.royal-support-feedback .rpf-btn-cancel {
  color: var(--rpf-muted);
}

.royal-support-feedback .rpf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.royal-support-feedback .rpf-chip {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--rpf-line);
  background: var(--rpf-white);
  color: var(--rpf-ink);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.royal-support-feedback .rpf-chip:hover {
  border-color: var(--rpf-gold);
}

.royal-support-feedback .rpf-chip:focus-visible {
  outline: 2px solid var(--rpf-gold);
  outline-offset: 2px;
  border-color: var(--rpf-gold);
}

.royal-support-feedback .rpf-chip-on {
  background: var(--rpf-gold);
  color: var(--rpf-white);
  border-color: var(--rpf-gold);
}

.royal-support-feedback .rpf-chip-on:hover {
  background: var(--rpf-gold-dark);
  border-color: var(--rpf-gold-dark);
}

.royal-support-feedback .rpf-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--rpf-line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--rpf-ink);
  background: var(--rpf-cream);
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}

.royal-support-feedback .rpf-textarea:focus {
  outline: 2px solid var(--rpf-gold);
  outline-offset: -1px;
  border-color: var(--rpf-gold);
}

/* Honeypot — off-screen for humans, bots fill every input */
.royal-support-feedback .rpf-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.royal-support-feedback .rpf-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.royal-support-feedback .rpf-thanks {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.125rem;
  color: var(--rpf-muted);
  font-style: italic;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .royal-support-feedback .rpf-btn,
  .royal-support-feedback .rpf-chip {
    transition: none;
  }
}

@media (max-width: 640px) {
  .royal-support-feedback {
    padding: 1.25rem;
    margin: 2rem auto 1.5rem;
  }
  .royal-support-feedback .rpf-heading {
    font-size: 1.125rem;
  }
  .royal-support-feedback .rpf-buttons {
    flex-direction: column;
  }
  .royal-support-feedback .rpf-btn {
    width: 100%;
  }
  .royal-support-feedback .rpf-actions {
    flex-direction: column-reverse;
  }
  .royal-support-feedback .rpf-actions .rpf-btn {
    width: 100%;
  }
}