/**
 * ConjureUI styles — minimal, theme-agnostic interactive-state treatments.
 * Inherits site colors via currentColor / CSS variables where possible so it
 * blends with whatever palette the build chose. Override freely in styles.css.
 */
.conjure-loading,
.conjure-error,
.conjure-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}

.conjure-loading { opacity: 0.7; }

.conjure-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.5;
  animation: conjure-spin 0.8s linear infinite;
}

@keyframes conjure-spin { to { transform: rotate(360deg); } }

.conjure-error {
  color: var(--color-error, #c0392b);
  border-radius: 8px;
  background: rgba(192, 57, 43, 0.06);
}

.conjure-empty { opacity: 0.6; }

.conjure-retry,
.conjure-empty-action,
.conjure-demo-exit {
  font: inherit;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
}

.conjure-retry:hover,
.conjure-empty-action:hover,
.conjure-demo-exit:hover { opacity: 0.8; }

.conjure-demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  font-size: 14px;
  background: var(--color-accent, #2d6cdf);
  color: #fff;
}

.conjure-demo-exit {
  border-color: rgba(255, 255, 255, 0.6);
  padding: 4px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .conjure-spinner { animation: none; }
}