/**
 * Kadence Query Loop – 4 małe brązowe kropki (zamiast gif / rozciągniętego spinnera).
 */

:root {
  --qsuli-loader-dot: #9a7b6a;
  --qsuli-loader-dot-alt: #b8957d;
  --qsuli-loader-dot-size: 6px;
  --qsuli-loader-dot-gap: 8px;
  --qsuli-loader-width: calc(
    4 * var(--qsuli-loader-dot-size) + 3 * var(--qsuli-loader-dot-gap)
  );
}

@keyframes qsuli-query-dot-pulse {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 4 kropki – jeden element 6×6 px + 3× box-shadow */
.wp-block-kadence-query.loading .infinite-scroll-trigger::before,
.wp-block-kadence-query.animation-spinner.loading .wp-block-kadence-query-card > .overlay::after,
.wp-block-kadence-query.animation-infinite.loading .wp-block-kadence-query-card > .overlay::after {
  content: "";
  display: block;
  width: var(--qsuli-loader-dot-size);
  height: var(--qsuli-loader-dot-size);
  border-radius: 50%;
  background-color: var(--qsuli-loader-dot);
  box-shadow:
    calc(var(--qsuli-loader-dot-size) + var(--qsuli-loader-dot-gap)) 0 0 var(--qsuli-loader-dot-alt),
    calc(2 * (var(--qsuli-loader-dot-size) + var(--qsuli-loader-dot-gap))) 0 0 var(--qsuli-loader-dot),
    calc(3 * (var(--qsuli-loader-dot-size) + var(--qsuli-loader-dot-gap))) 0 0 var(--qsuli-loader-dot-alt);
  animation: qsuli-query-dot-pulse 1.1s ease-in-out infinite;
  transform-origin: center center;
}

/* Infinite scroll – pusty kontener (Kadence daje height:40px + gif – nadpisujemy) */
.wp-block-kadence-query.loading .infinite-scroll-trigger {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--qsuli-loader-width) !important;
  height: 28px !important;
  min-height: 0 !important;
  margin: 22px auto 14px !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  background-size: 0 !important;
  border: none !important;
  overflow: visible !important;
}

/* Overlay przy paginacji */
.wp-block-kadence-query.animation-spinner.loading .wp-block-kadence-query-card > .overlay,
.wp-block-kadence-query.animation-infinite.loading .wp-block-kadence-query-card > .overlay {
  animation: none !important;
  background: rgba(255, 255, 255, 0.72) !important;
  background-image: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}