/* ===== ch_feedback_card_html (HTML form, scoped) =====
   Loaded from anvil.yaml native_deps.head_html.

   The root is <div class="rs-feedback-card">, a wrapper around the card and the review modal.
   Every rule scopes on it at zero specificity; the root itself declares nothing.
   The textarea's min-height is request_services.css's section-wide .ch-textarea rule. */

/* Review Modal Styles */
:where(.rs-feedback-card) .ch-review-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ch-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ch-z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ch-transition-normal), visibility var(--ch-transition-normal);
}

:where(.rs-feedback-card) .ch-review-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

:where(.rs-feedback-card) .ch-review-modal {
  background: var(--ch-bg-card);
  border-radius: var(--ch-radius-lg);
  box-shadow: var(--ch-shadow-lg);
  max-width: 400px;
  width: 90%;
  transform: scale(0.95);
  transition: transform var(--ch-transition-normal);
}

:where(.rs-feedback-card) .ch-review-modal-overlay.visible .ch-review-modal {
  transform: scale(1);
}

:where(.rs-feedback-card) .ch-review-modal-header {
  padding: var(--ch-space-md);
  border-bottom: 1px solid var(--ch-border);
}

:where(.rs-feedback-card) .ch-review-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ch-text-primary);
}

:where(.rs-feedback-card) .ch-review-modal-body {
  padding: var(--ch-space-md);
}

:where(.rs-feedback-card) .ch-review-modal-body p {
  margin: 0 0 var(--ch-space-sm) 0;
  color: var(--ch-text-secondary);
  font-size: 14px;
}

:where(.rs-feedback-card) .ch-review-modal-body p:last-child {
  margin-bottom: 0;
}

:where(.rs-feedback-card) .ch-review-modal-footer {
  padding: var(--ch-space-md);
  border-top: 1px solid var(--ch-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--ch-space-sm);
}

:where(.rs-feedback-card) .ch-review-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: var(--ch-radius-md);
  cursor: pointer;
  transition: opacity var(--ch-transition-fast), transform var(--ch-transition-fast), background-color var(--ch-transition-fast), color var(--ch-transition-fast), border-color var(--ch-transition-fast), box-shadow var(--ch-transition-fast);
}

:where(.rs-feedback-card) .ch-review-btn-secondary {
  background: var(--ch-bg-secondary);
  color: var(--ch-text-secondary);
}

:where(.rs-feedback-card) .ch-review-btn-secondary:hover {
  background: var(--ch-border);
}

:where(.rs-feedback-card) .ch-review-btn-primary {
  background: var(--ch-accent-primary);
  color: var(--ch-text-inverse);
}

:where(.rs-feedback-card) .ch-review-btn-primary:hover {
  background: var(--ch-accent-primary-hover);
}