.versio-social-proof-container {
  width: 100%;
  background-color: var(--versio-bg-color);
  border-radius: var(--versio-border-radius);
  border: var(--versio-border-width, 0px) var(--versio-border-style, solid)
    var(--versio-border-color, transparent);
  padding: var(--versio-padding);
  margin-top: var(--versio-margin-top);
  margin-bottom: var(--versio-margin-bottom);
}

.versio-social-proof-content {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.versio-social-proof-images {
  display: flex;
  position: relative;
  overflow: hidden;
}

.versio-social-proof-images.versio-carousel {
  overflow: hidden;
}

.versio-social-proof-track {
  display: flex;
  align-items: center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.versio-social-proof-images.versio-carousel .versio-social-proof-image:nth-child(n + 4) {
  opacity: 0;
}

.versio-bounce-in-right {
  animation: versioBounceInRight 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform;
}

.versio-bounce-out-left {
  animation: versioBounceOutLeft 900ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
  will-change: transform;
}

@keyframes versioBounceInRight {
  0% {
    opacity: 0;
    transform: translate3d(48px, 0, 0) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes versioBounceOutLeft {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  20% {
    transform: translate3d(8px, 0, 0) scale(1.01);
  }
  100% {
    opacity: 0;
    transform: translate3d(-64px, 0, 0) scale(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .versio-bounce-in-right {
    animation: none;
  }
  .versio-bounce-out-left {
    animation: none;
  }
  .versio-social-proof-images.versio-carousel .versio-social-proof-image:nth-child(n + 4) {
    opacity: 1;
  }
}

.versio-social-proof-image {
  position: relative;
  width: var(--versio-image-size);
  height: var(--versio-image-size);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffffff;
  background-color: #f0f0f0;
}

.versio-social-proof-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.versio-social-proof-image + .versio-social-proof-image {
  margin-left: -12px;
}

.versio-social-proof-image {
  z-index: 1;
}

.versio-social-proof-image:nth-child(1) {
  z-index: 5;
}

.versio-social-proof-image:nth-child(2) {
  z-index: 4;
}

.versio-social-proof-image:nth-child(3) {
  z-index: 3;
}

.versio-social-proof-image:nth-child(4) {
  z-index: 2;
}

.versio-social-proof-text {
  color: var(--versio-text-color);
  font-size: var(--versio-font-size);
  line-height: 1.4;
  flex: 1;
  min-width: 200px;
}

.versio-verified-name {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
}

.versio-verified-badge {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}

.versio-additional-text {
  font-weight: normal;
}

@media (max-width: 768px) {
  .versio-social-proof-container {
    border-radius: var(--versio-border-radius-mobile);
    padding: var(--versio-padding-mobile);
  }

  .versio-social-proof-content {
    gap: 8px;
  }

  .versio-social-proof-text {
    font-size: var(--versio-font-size-mobile);
    min-width: 150px;
  }

  .versio-social-proof-image {
    width: var(--versio-image-size-mobile);
    height: var(--versio-image-size-mobile);
  }

  .versio-social-proof-image + .versio-social-proof-image {
    margin-left: -8px;
  }
}