/* Explore location permission — compact, private, and visually balanced.
   Placement remains owned by map-notice-universal-lane-v719.css. */

html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
body main.app-shell section.map-stage.map-focus
#locationBanner.location-banner.mappi-permission-card:not([hidden]) {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  box-sizing: border-box !important;
  min-height: 64px !important;
  max-height: 76px !important;
  height: auto !important;
  padding: 8px 10px !important;
  gap: 10px !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(7, 101, 96, 0.14) !important;
  border-radius: 18px !important;
  color: #073744 !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(155, 232, 205, 0.25), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 252, 0.98), rgba(241, 250, 246, 0.97)) !important;
  box-shadow:
    0 16px 36px rgba(3, 42, 49, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  text-align: center !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
body main.app-shell section.map-stage.map-focus
#locationBanner.location-banner.mappi-permission-card:not([hidden]) > img {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
body main.app-shell section.map-stage.map-focus
#locationBanner.location-banner.mappi-permission-card:not([hidden]) > div {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  min-width: 0 !important;
  width: 100% !important;
  gap: 2px !important;
  place-items: center !important;
  overflow: visible !important;
  text-align: center !important;
}

html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
body main.app-shell section.map-stage.map-focus
#locationBanner.location-banner.mappi-permission-card:not([hidden]) :is(strong, span) {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  color: inherit !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  -webkit-line-clamp: unset !important;
}

html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
body main.app-shell section.map-stage.map-focus
#locationBanner.location-banner.mappi-permission-card:not([hidden]) strong {
  font-size: 0.82rem !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
}

html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
body main.app-shell section.map-stage.map-focus
#locationBanner.location-banner.mappi-permission-card:not([hidden]) span {
  color: rgba(7, 55, 68, 0.68) !important;
  font-size: 0.66rem !important;
  line-height: 1.2 !important;
}

html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
body main.app-shell section.map-stage.map-focus
#locationBanner.location-banner.mappi-permission-card:not([hidden]) > button {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  min-width: 112px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  border-radius: 14px !important;
  color: #f8fffc !important;
  background: linear-gradient(135deg, #0b8b7b, #087484 58%, #176f98) !important;
  box-shadow:
    0 8px 18px rgba(5, 101, 108, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
body main.app-shell section.map-stage.map-focus
#locationBanner.location-banner.mappi-permission-card:not([hidden]) > button:is(:hover, :focus-visible) {
  background: linear-gradient(135deg, #0a7d71, #076678 58%, #155f86) !important;
  box-shadow:
    0 10px 22px rgba(5, 101, 108, 0.24),
    0 0 0 3px rgba(89, 221, 177, 0.18) !important;
}

html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
body main.app-shell section.map-stage.map-focus
#locationBanner.location-banner.mappi-permission-card:not([hidden]) > button:disabled {
  color: rgba(7, 55, 68, 0.58) !important;
  background: rgba(7, 83, 88, 0.09) !important;
  box-shadow: none !important;
}

@media (max-width: 420px) {
  html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
  body main.app-shell section.map-stage.map-focus
  #locationBanner.location-banner.mappi-permission-card:not([hidden]) {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 90px !important;
    max-height: 112px !important;
    padding: 8px 9px !important;
    gap: 4px 8px !important;
  }

  html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
  body main.app-shell section.map-stage.map-focus
  #locationBanner.location-banner.mappi-permission-card:not([hidden]) > img {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 36px !important;
    height: 36px !important;
  }

  html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
  body main.app-shell section.map-stage.map-focus
  #locationBanner.location-banner.mappi-permission-card:not([hidden]) > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
  body main.app-shell section.map-stage.map-focus
  #locationBanner.location-banner.mappi-permission-card:not([hidden]) > button {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: min(168px, 100%) !important;
    min-width: 44px !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html:not(#location-prompt-v721-a):not(#location-prompt-v721-b)
  body main.app-shell section.map-stage.map-focus
  #locationBanner.location-banner.mappi-permission-card:not([hidden]) {
    background: #f5fbf7 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}