.bef-map {
  --bef-map-accent: #8a5518;
  --bef-map-ink: #10233f;

  overflow: hidden;
  border: 1px solid #d9d4ca;
  border-radius: 1rem;
  background: #f4f0e8;
}

.bef-map__header {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
}

.bef-map__header h2,
.bef-map__header p {
  margin: 0;
}

.bef-map__provider {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid #d9d4ca;
}

.bef-map__provider p {
  flex: 1 1 28rem;
  max-width: 75ch;
  font-size: 0.9rem;
}

.bef-map__consent,
.bef-map__fallback-control {
  min-height: 2.75rem;
  padding: 0.6rem 0.95rem;
  border: 2px solid var(--bef-map-ink);
  border-radius: 0.55rem;
  background: var(--bef-map-ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bef-map__fallback-control {
  background: transparent;
  color: var(--bef-map-ink);
}

.bef-map__consent:hover,
.bef-map__consent:focus-visible {
  background: #203c62;
}

.bef-map__fallback-control:hover,
.bef-map__fallback-control:focus-visible {
  background: #fff;
}

.bef-map__consent:focus-visible,
.bef-map__fallback-control:focus-visible {
  outline: 3px solid var(--bef-map-accent);
  outline-offset: 3px;
}

.bef-map__consent:disabled {
  cursor: wait;
  opacity: 0.65;
}

.bef-map__configuration-note {
  padding: 0.7rem 0.85rem;
  border-inline-start: 0.3rem solid #9a6700;
  background: #fff8df;
}

.bef-map__canvas {
  position: relative;
  min-height: var(--bef-map-height, 30rem);
  background-color: #dbe5df;
  background-image:
    linear-gradient(
      30deg,
      rgb(16 35 63 / 8%) 12%,
      transparent 12.5%,
      transparent 87%,
      rgb(16 35 63 / 8%) 87.5%
    ),
    linear-gradient(
      150deg,
      rgb(16 35 63 / 8%) 12%,
      transparent 12.5%,
      transparent 87%,
      rgb(16 35 63 / 8%) 87.5%
    );
  background-size: 3rem 5.2rem;
}

.bef-map__canvas.is-empty {
  display: grid;
  place-items: center;
}

.is-google-active .bef-map__canvas {
  background: #dbe5df;
}

.bef-map.is-unavailable {
  border-color: #9a6700;
}

.bef-map__marker {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--bef-map-ink);
  box-shadow: 0 0.25rem 0.8rem rgb(16 35 63 / 28%);
  color: #fff;
  text-decoration: none;
  translate: -50% -50%;
}

.bef-map__marker:focus-visible {
  outline: 3px solid var(--bef-map-accent);
  outline-offset: 3px;
}

.bef-map__popover {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  display: none;
  width: 13rem;
  padding: 0.65rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 0.4rem 1rem rgb(16 35 63 / 25%);
  color: var(--bef-map-ink);
  translate: -50% 0;
}

.bef-map__marker:hover .bef-map__popover,
.bef-map__marker:focus .bef-map__popover {
  display: grid;
}

.bef-map__google-popover {
  display: grid;
  gap: 0.25rem;
  max-width: 14rem;
  color: var(--bef-map-ink);
  font: inherit;
}

.bef-map__google-popover strong {
  line-height: 1.25;
}

.bef-map__google-popover small {
  color: #5c6470;
  font-weight: 700;
}

.is-map-active {
  outline: 3px solid var(--bef-map-accent);
  outline-offset: 3px;
}

.bef-map [hidden] {
  display: none !important;
}

@media (width <= 48rem) {
  .bef-map__canvas {
    min-height: min(var(--bef-map-height, 24rem), 70vh);
  }

  .bef-map__provider {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bef-map__marker,
  .is-map-active {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .bef-map__marker,
  .bef-map__consent,
  .bef-map__fallback-control {
    border: 2px solid ButtonText;
  }
}