/* Shield badge styles for the dynamic page */
.shield-badge {
  display: block;
  width: 112px;
  height: 112px;
}

.shield-badge__container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shield-badge__svg {
  width: 100%;
  height: 100%;
}

/* Shield badge elements */
.shield-badge__outline {
  transition: stroke 0.3s ease;
}

.shield-badge__main {
  transition: fill 0.3s ease;
}

.shield-badge__inner {
  transition: fill 0.3s ease;
}

.shield-badge__overlay-1 {
  mix-blend-mode: overlay;
}

/* Level-specific styles */
body.level-1 .shield-badge__outline {
  stroke: #00B131;
}

body.level-1 .shield-badge__main {
  fill: #1BD60B;
}

body.level-1 .shield-badge__inner {
  fill: #D3FFDF;
}

body.level-2 .shield-badge__outline {
  stroke: #00B131;
}

body.level-2 .shield-badge__main {
  fill: #1BD60B;
}

body.level-2 .shield-badge__inner {
  fill: #D3FFDF;
}

body.level-3 .shield-badge__outline {
  stroke: #00B131;
}

body.level-3 .shield-badge__main {
  fill: #1BD60B;
}

body.level-3 .shield-badge__inner {
  fill: #D3FFDF;
}

body.level-4 .shield-badge__outline {
  stroke: #00B131;
}

body.level-4 .shield-badge__main {
  fill: #1BD60B;
}

body.level-4 .shield-badge__inner {
  fill: #D3FFDF;
}

/* Loading animation */
.loading-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 177, 49, 0.3);
  border-radius: 50%;
  border-top-color: #00B131;
  animation: spin 1s ease-in-out infinite;
}

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