/* EdgeRoster Verified Lock seal — reusable badge component */
.er-vl-seal {
  --er-vl-teal: #00fbda;
  --er-vl-graphite: #0e151b;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.9rem 0.55rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 251, 218, 0.45);
  background:
    linear-gradient(135deg, rgba(0, 251, 218, 0.10), rgba(14, 21, 27, 0.95)),
    var(--er-vl-graphite);
  box-shadow:
    0 0 0 1px rgba(0, 251, 218, 0.08),
    0 0 22px rgba(0, 251, 218, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #f3f6f8;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 100%;
}

.er-vl-seal__mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 251, 218, 0.45));
}

.er-vl-seal__mark-fallback {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 251, 218, 0.5);
  background: rgba(0, 251, 218, 0.12);
  color: var(--er-vl-teal);
  font-family: "Orbitron", "Inter", system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.er-vl-seal__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.er-vl-seal__title {
  color: var(--er-vl-teal);
  font-family: "Orbitron", "Inter", system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.er-vl-seal__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  color: #9aa7b2;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.er-vl-seal__checks span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.er-vl-seal__checks .ok {
  color: var(--er-vl-teal);
  font-weight: 800;
}

.er-vl-seal--compact {
  padding: 0.4rem 0.7rem 0.4rem 0.5rem;
  gap: 0.45rem;
}

.er-vl-seal--compact .er-vl-seal__mark,
.er-vl-seal--compact .er-vl-seal__mark-fallback {
  width: 22px;
  height: 22px;
  font-size: 0.55rem;
}

.er-vl-seal--compact .er-vl-seal__title {
  font-size: 0.62rem;
}

.er-vl-seal--empty {
  opacity: 0.72;
  box-shadow:
    0 0 0 1px rgba(0, 251, 218, 0.05),
    0 0 14px rgba(0, 251, 218, 0.12);
}

@media (max-width: 520px) {
  .er-vl-seal {
    border-radius: 14px;
    align-items: flex-start;
  }
  .er-vl-seal__title {
    white-space: normal;
  }
}