/**
 * Small loading spinner shown on rule-bearing panels until the display rules
 * JS resolves their visibility.
 */

.vpdr-loading {
  position: relative;
  overflow: hidden;
  min-height: 120px;
}

/* Keep the panel's layout space but hide its content while loading. */
.vpdr-loading > * {
  visibility: hidden;
}

.vpdr-loading ~ .vpdr-loading,
:has(.vpdr-loading) ~ .vpdr-loading,
:has(.vpdr-loading) ~ * .vpdr-loading {
  display: none;
}

.vpdr-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 3px solid rgba(120, 130, 110, 0.35);
  border-top-color: #394034;
  animation: vpdr-spin 0.9s linear infinite;
}

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

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .vpdr-loading::before {
    animation-duration: 2.5s;
  }
}