/* Visitor survey badge (replaces the JR collab badge; see survey-badge.js).
   Laid out in the same square box as collab-badge.webp (circle centre 50% / 48.4%, radius 29.3% of the width),
   so the existing position offsets still fit. The icon and the label are stacked in the middle of the circle. */
.svb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
}
.svb__circle {
  position: absolute;
  left: 20.7%;
  top: 19.1%;
  width: 58.6%;
  aspect-ratio: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2cqw;
  border: 0;
  border-radius: 50%;
  background: #4da4ff;
  /* feathers the outline a little; the mask clips the old glow shadow too, so it is gone */
  -webkit-mask-image: radial-gradient(closest-side, #000 calc(100% - 1.6cqw), transparent);
  mask-image: radial-gradient(closest-side, #000 calc(100% - 1.6cqw), transparent);
  overflow: hidden;
  isolation: isolate;
}
/* the map page's background texture (bg-v3.webp) with an extra blur that smooths out its grain.
   Pulled out past the circle so the blur's soft edge is clipped away; the white ring and label stand out against it. */
.svb__circle::before {
  content: "";
  position: absolute;
  inset: -8cqw;
  z-index: -1;
  background: url(../img/goods/bg-v3.webp) center / cover no-repeat;
  filter: blur(3cqw);
}
.svb__icon {
  width: 34%;
  height: auto;
  translate: 1.6cqw 0; /* the pencil makes the icon read left-heavy; nudge it right */
  color: #fff;
  overflow: visible;
}
.svb__title {
  color: #fff;
  margin-top: 2cqw;
  text-shadow: 0 0 1.6cqw rgba(0, 110, 200, .35);
  font-size: 4.8cqw;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .1em;
  padding-left: .1em;
  text-align: center;
  white-space: nowrap;
}