.google-live-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: var(--color-map-placeholder, #d9eee7);
}

.kiosk-map.has-live-google-map .google-live-map {
  z-index: 1;
}

.kiosk-map.has-live-google-map .kiosk-map__grid,
.kiosk-map.has-live-google-map .kiosk-map__water,
.kiosk-map.has-live-google-map .kiosk-road,
.kiosk-map.has-live-google-map .kiosk-route-line,
.kiosk-map.has-live-google-map .kiosk-map-label,
.kiosk-map.has-live-google-map .kiosk-map-marker,
.kiosk-map.has-live-google-map .kiosk-route-stop-markers,
.kiosk-map.has-live-google-map .kiosk-route-step-markers {
  display: none;
}

.kiosk-map.has-live-google-map .kiosk-map__route-tools,
.kiosk-map.has-live-google-map .kiosk-zoom,
.kiosk-map.has-live-google-map .kiosk-location-status {
  z-index: 5;
}

.kiosk-photo.has-listing-image {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.kiosk-map.is-live-map-loading .kiosk-map__route-tools,
.kiosk-map.is-live-map-loading .kiosk-zoom,
.kiosk-map.is-live-map-loading .kiosk-location-status {
  visibility: hidden;
}

.google-live-map__loading,
.google-live-map__error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 58%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(255 255 255 / 58%) 1px, transparent 1px),
    var(--color-map-placeholder, #d9eee7);
  background-size: 3.25rem 3.25rem;
  color: var(--color-ink);
  text-align: left;
}

.google-live-map__state {
  display: grid;
  gap: var(--space-3, 0.75rem);
  width: min(100%, 24rem);
  min-height: 11rem;
  align-content: center;
  padding: var(--space-6, 1.5rem);
  border: 1px solid var(--color-border, rgb(17 17 17 / 14%));
  border-left: 0.35rem solid var(--color-info, #1e6098);
  border-radius: var(--radius-lg, 0.5rem);
  background: rgb(255 255 255 / 92%);
  box-shadow: var(--shadow-sm, 0 0.5rem 1.4rem rgb(17 17 17 / 12%));
}

.google-live-map__state strong {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 900;
  line-height: 1.2;
}

.google-live-map__state span:not(.skeleton) {
  color: var(--color-ink-soft, #4f5b57);
  font-weight: 700;
  line-height: 1.45;
}

.google-live-map__state .skeleton {
  display: block;
}

.google-live-map__state .skeleton--heading {
  width: min(70%, 18rem);
  min-height: 1.75rem;
}

.google-live-map__state .skeleton--line {
  width: 100%;
}

.google-live-map__state .skeleton--line-short {
  width: min(58%, 14rem);
}

.google-live-map__error {
  background: rgb(255 255 255 / 84%);
}

.google-live-map__error .google-live-map__state {
  border-left-color: var(--color-danger, #b3261e);
  background: var(--color-danger-soft, #fff2f1);
}

.google-live-map__error .google-live-map__state span {
  color: var(--color-danger-text, #8a1f1f);
}
