/* ══════════════════════════════════════════════════════════════
   RMV Comments — Plugin Styles
   CSP-safe external stylesheet (no inline styles needed)
   ══════════════════════════════════════════════════════════════ */

#rmvc-comments {
  margin-top: 2.5rem;
}

/* Honeypot — hidden from real users */
.rmvc-hp {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Comment body formatting */
.rmvc-comment-body {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Subject line styling */
.rmvc-comment-subject {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Button styling */
#rmvc-comments .btn-primary {
  background-color: var(--rmvc-btn-bg, #0d6efd);
  border-color: var(--rmvc-btn-bg, #0d6efd);
  color: var(--rmvc-btn-text, #ffffff);
}

/* Heading color */
#rmvc-comments h4 {
  color: var(--rmvc-heading-color, inherit);
}

/* Leave a Comment button spacing */
.rmvc-toggle-btn {
  margin-top: 1rem;
}

/* Collapse toggle icon rotation */
.rmvc-toggle-icon {
  transition: transform 0.3s ease;
  display: inline-block;
}
.rmvc-toggle-btn:not(.collapsed) .rmvc-toggle-icon {
  transform: rotate(180deg);
}

/* Comment card styling — light theme */
.rmvc-comment-list .rmvc-comment-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border-radius: var(--rmvc-comment-radius, var(--rmvc-card-radius, 0.375rem));
  border-color: var(--rmvc-comment-border, var(--rmvc-card-border, rgba(0,0,0,.125)));
  color: var(--rmvc-comment-text, inherit);
  font-size: var(--rmvc-comment-font-size, inherit);
  font-weight: var(--rmvc-comment-font-weight, inherit);
}

/* Comment card body padding */
.rmvc-comment-list .rmvc-comment-card .card-body {
  padding: var(--rmvc-comment-padding, 0.5rem 1rem) !important;
}

/* Comment wrapper spacing */
.rmvc-comment-list .rmvc-comment-wrapper {
  margin-bottom: var(--rmvc-comment-gap, 0.5rem) !important;
}

/* Comment striping — applied to wrapper so admin replies don't break counting */
.rmvc-comment-list .rmvc-comment-wrapper:nth-child(odd) > .rmvc-comment-card {
  background-color: var(--rmvc-stripe-odd, #f8f9fa);
}
.rmvc-comment-list .rmvc-comment-wrapper:nth-child(even) > .rmvc-comment-card {
  background-color: var(--rmvc-stripe-even, #ffffff);
}

/* Comment card shadow — dark theme */
[data-bs-theme="dark"] .rmvc-comment-list .rmvc-comment-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Comment form card — large shadow, light theme */
#rmvc-form-collapse .card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-radius: var(--rmvc-card-radius, 0.375rem);
}

/* Comment form card — large shadow, dark theme */
[data-bs-theme="dark"] #rmvc-form-collapse .card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Comment striping — dark theme */
[data-bs-theme="dark"] .rmvc-comment-list .rmvc-comment-wrapper:nth-child(odd) > .rmvc-comment-card {
  background-color: var(--rmvc-stripe-odd, #2b2f33);
}
[data-bs-theme="dark"] .rmvc-comment-list .rmvc-comment-wrapper:nth-child(even) > .rmvc-comment-card {
  background-color: var(--rmvc-stripe-even, #212529);
}

/* Admin reply card */
.rmvc-comment-list .card.rmvc-admin-reply {
  background-color: var(--rmvc-reply-bg, #f0f4ff);
  border-color: var(--rmvc-reply-border, var(--rmvc-card-border, rgba(0,0,0,.125)));
  border-radius: var(--rmvc-reply-radius, var(--rmvc-card-radius, 0.375rem));
}
.rmvc-admin-reply .card-body {
  background-color: transparent;
  color: var(--rmvc-reply-text, inherit);
  font-size: var(--rmvc-reply-font-size, inherit);
  font-weight: var(--rmvc-reply-font-weight, inherit);
  padding: var(--rmvc-reply-padding, 0.5rem 1rem) !important;
}
.rmvc-admin-reply .badge {
  background-color: var(--rmvc-reply-accent, #0d6efd) !important;
}

/* Admin reply card — dark theme */
[data-bs-theme="dark"] .rmvc-comment-list .card.rmvc-admin-reply {
  background-color: var(--rmvc-reply-bg, #1a2332);
  border-color: var(--rmvc-reply-border, var(--rmvc-card-border, rgba(255,255,255,.175)));
}

/* Toast positioning — anchored near the form */
.rmvc-toast-wrapper {
  position: relative;
}
.rmvc-toast-container {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1055;
}