/* Mobile city confirmation bubble: keep it visually attached to the city pill and close it on page scroll from Vue. */
@media (max-width: 767.98px), ((max-width: 1023.98px) and (hover: none) and (pointer: coarse)) {
  body > .site-location-confirm,
  .site-location-confirm {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147482600 !important;
    max-width: calc(100dvw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    overflow: visible !important;
    will-change: opacity !important;
  }

  body > .site-location-confirm::before,
  .site-location-confirm::before {
    content: '' !important;
    position: absolute !important;
    top: -5px !important;
    left: 42px !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    background: #484848 !important;
    border: 0 !important;
    transform: rotate(45deg) !important;
  }

  body > .site-location-confirm.site-location-confirm-fade-enter-from,
  body > .site-location-confirm.site-location-confirm-fade-leave-to,
  .site-location-confirm.site-location-confirm-fade-enter-from,
  .site-location-confirm.site-location-confirm-fade-leave-to {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
  }
}