/* CF Q&A layout (kept minimal; only essential tweaks added) */
.cfqna-wrap {
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 900px;
  margin-inline: auto;
}
.cfqna-user { margin-bottom: 0.5rem; opacity: 0.8; }

.cfqna-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
#cfqna-question {
  flex: 1;
  min-height: 80px;
  width: 100%;
  padding: 0.5rem;
}
#cfqna-submit {
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.cfqna-error { color: #b91c1c; margin-top: 0.5rem; }
.cfqna-notice {
  padding: 1rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 0.5rem;
  color: #000
}

/* Controls */
.cfqna-controls {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0;
}
.cfqna-controls label { font-size: 0.95rem; opacity: 0.8; }

/* Select (kept from earlier, compact) */
.cfqna-controls select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: 1px solid var(--body-button-border-color);
  color: var(--body-text-color);
  font-weight: var(--font-weight-heavy);
  background-color: var(--body-button-bg-color);
  border-radius: .4em;
  display: inline-block;
  padding: .2em 2em .2em .6em;
  margin: .5em;
  transition: background-color .3s;
  cursor: pointer;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' \
fill='none' stroke='%23eee' stroke-width='2' \
stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat: no-repeat;
  background-position: right .6em center;
  background-size: 12px 12px;
}
.cfqna-controls select:hover { filter: brightness(1.05); }
.cfqna-controls select:focus {
  border-color: var(--body-button-border-color, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}
.cfqna-controls select:disabled { opacity: .5; cursor: not-allowed; }
.cfqna-controls select::-ms-expand { display: none; }

/* List */
.cfqna-list-wrap { position: relative; }
.cfqna-list {
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
  height: 60vh;
  overflow-y: auto;
}
.cfqna-loading { opacity: 0.6; }

/* Submit button spinner (unique selector so it can’t get “stuck”) */
.cfqna-submit-spinner {
  width: 20px; height: 20px;
  border: 3px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: cfqna-spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
}
@keyframes cfqna-spin { to { transform: rotate(360deg); } }

/* Items */
.cfqna-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--body-button-border-color);
}
.cfqna-item:first-child { border-top: none; }
.cfqna-main { flex: 1 1 auto; width: 75%; }
.cfqna-content { font-size: 1rem; line-height: 1.4; }
.cfqna-meta { color: inherit; font-size: .92em; margin-top: .25rem; opacity: .8; }

.cfqna-actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.cfqna-icon-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.25rem;
}
.cfqna-icon-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Vote badge + subtle bump on change */
.cfqna-vote-wrap { position: relative; display: inline-flex; }
.cfqna-vote-badge {
  position: absolute;
  top: -.2em; right: -.2em;
  min-width: 1em; height: 1em; line-height: 1em;
  padding: 0 .2em;
  color: inherit;
  font-size: .9em; /* fix typo from earlier */
  text-align: center;
  font-weight: 600;
  transform-origin: center;
  transition: transform 150ms ease;
}
.cfqna-badge-bump { animation: cfqna-bump 260ms ease; }
@keyframes cfqna-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* New item: calm background fade (no resize) */
.cfqna-highlight {
  animation: cfqna-bg-fade 2000ms ease-out;
}
@keyframes cfqna-bg-fade {
  from { background: var(--body-button-border-color, #f3f4f6); }
  to   { background: transparent; }
}

/* Remove animation (delete/answered) */
.cfqna-removing { animation: cfqna-remove 0.22s ease-in forwards; }
@keyframes cfqna-remove {
  to { opacity: 0; transform: translateY(-6px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cfqna-highlight, .cfqna-removing, .cfqna-badge-bump { animation: none !important; }
}

/* Page-specific tweaks you had */
.single-cf_qna #header { display: none; }
.single-cf_qna h1 { text-align: center; }
body.single-cf_qna .page-container { margin-block-start: 0; }
.single-cf_qna footer.ease3 { display: none; }

/* narrow */

@media screen and (max-width: 720px) {
	.cfqna-item {
		flex-direction: column;
	}
	
	.cfqna-main {
		width: 100%;
	}
}