/* Pet Nobre — seletor de localização sempre preso à janela visível. */
html,
body {
  width: 100%;
  max-width: 100%;
}

html.location-panel-open,
body.location-panel-open {
  overscroll-behavior: none;
}

/*
 * A animação de entrada das páginas aplica transform no body. Isso faz um
 * elemento position: fixed usar o documento inteiro como referência. Quando
 * o seletor de CEP está aberto, removemos esse contexto para que o modal seja
 * centralizado na tela atual, mesmo depois de rolar a página.
 */
body.location-panel-open {
  overflow: hidden !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
}

body.location-panel-open::before,
body.location-panel-open::after {
  transform: none !important;
  filter: none !important;
}

body.location-panel-open #overlay,
body.location-panel-open .overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 100090 !important;
}

#cepModal {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(500px, calc(100vw - 30px)) !important;
  max-width: calc(100vw - 30px) !important;
  max-height: calc(100vh - 30px) !important;
  max-height: calc(100dvh - 30px) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  isolation: isolate;
  z-index: 100110 !important;
  transform: translate3d(-50%, -46%, 0) scale(.97) !important;
  transform-origin: center !important;
}

#cepModal.active {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
}

#cepModal:not(.active) {
  pointer-events: none !important;
}

#cepModal .field-action {
  min-width: 0;
}

#cepModal input {
  min-width: 0;
}

@media (max-width: 560px) {
  #cepModal {
    top: 50% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cepModal {
    transition: none !important;
  }
}