/* ============================================================
   PedeFi — Design System canônico de modais (desktop + mobile)

   ============================================================ */

/* Fonte visual: modal "Novo pedido manual".
   Responsabilidade: identidade visual e infraestrutura comum.
   A geometria fullscreen mobile pertence exclusivamente a
   components/mobile-modal-fullscreen.css.

   Notificações, perfil, popovers, menus e tooltips não participam
   destes seletores.
   ============================================================ */

:root {
  --pedefi-modal-accent: #ff6500;
  --pedefi-modal-accent-hover: #e85c00;
  --pedefi-modal-accent-soft: rgba(255, 101, 0, 0.08);
  --pedefi-modal-focus: rgba(255, 101, 0, 0.18);
  --pedefi-modal-ink: #111827;
  --pedefi-modal-muted: #667085;
  --pedefi-modal-label: #344054;
  --pedefi-modal-border: #e1e5eb;
  --pedefi-modal-divider: #edf0f4;
  --pedefi-modal-surface: #ffffff;
  --pedefi-modal-surface-soft: #f8fafc;
  --pedefi-modal-radius: 18px;
  --pedefi-modal-control-radius: 10px;
  --pedefi-modal-control-height: 45px;
  --pedefi-modal-textarea-min-height: 96px;
  --pedefi-modal-label-gap: 6px;
  --pedefi-modal-field-gap: 14px;
  --pedefi-modal-close-size: 44px;
  --pedefi-modal-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  --pedefi-modal-motion: var(--pedefi-panel-motion);
  --pedefi-modal-motion-duration: var(--pedefi-panel-motion-duration);
  --pedefi-modal-motion-easing: var(--pedefi-panel-motion-easing);
  --pedefi-modal-backdrop-bg: rgba(15, 23, 42, 0.55);
  --pedefi-modal-backdrop-filter: blur(5px);
}

/* Desktop: o contexto da pagina permanece nitido e recebe apenas uma camada
   escura discreta. O seletor inclui IDs dos modais legados para que esta fonte
   canonica vença as antigas regras especificas sem depender de novos hacks em
   cada pagina. */
@media (min-width: 761px) {
  :root {
    --pedefi-modal-backdrop-bg: rgba(15, 23, 42, 0.32);
    --pedefi-modal-backdrop-filter: none;
  }

  html body[data-admin-shell][data-admin-pagina] :is(
    #modalPedidoManual:not(.oculto),
    #modalProduto:not(.oculto):not(.produto-pagina-editor),
    #modalGruposSabores:not(.oculto),
    #qrCodeModal.ativo,
    .modal:not(.oculto),
    .produtos-modal:not(.oculto),
    .admin-confirm-overlay:not(.oculto),
    .produtos-confirm-modal:not(.oculto),
    .chamado-detalhe-modal:not(.oculto),
    .cupons-modal-overlay:not(.oculto),
    .promocoes-modal-overlay:not(.oculto),
    .promocao-opcoes-overlay:not(.oculto),
    .pedefi-product-crop-modal:not(.oculto),
    .pedefi-dialog-overlay:not([hidden]),
    .pedefi-suporte-modal.is-open,
    .pedefi-support-submodal.is-open,
    .pedefi-terms-modal.is-open,
    .qr-modal.ativo,
    .checkout-modal:not(.oculto),
    .customer-identify-modal:not(.oculto),
    .modal-produto:not(.oculto),
    .pedefi-audio-modal:not([hidden]),
    .pedefi-ds-modal-overlay.is-open,
    .promocao-modal:not([hidden]),
    .pedefi-subscription-modal
  ):not(.pedefi-modal-closing) {
    background: var(--pedefi-modal-backdrop-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .admin-form-modal:not(.oculto):not(.pedefi-modal-closing)::before {
    background: var(--pedefi-modal-backdrop-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  /* O editor dedicado reutiliza o antigo #modalProduto apenas como estrutura
     de pagina. Ele nunca deve receber o backdrop de um modal aberto. */
  html body[data-admin-shell][data-admin-pagina="produtos"].produto-editor-aberto
  #modalProduto {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
}

/* No fechamento desktop, o backdrop sai junto com o clique e somente o shell
   conserva o movimento lateral. */
@media (min-width: 761px) {
  html body[data-admin-shell][data-admin-pagina] :is(
    #modalPedidoManual,
    #modalProduto,
    #modalGruposSabores,
    #qrCodeModal,
    .modal,
    .produtos-modal,
    .admin-confirm-overlay,
    .produtos-confirm-modal,
    .chamado-detalhe-modal,
    .cupons-modal-overlay,
    .promocoes-modal-overlay,
    .promocao-opcoes-overlay,
    .pedefi-product-crop-modal,
    .pedefi-dialog-overlay,
    .pedefi-suporte-modal,
    .pedefi-support-submodal,
    .pedefi-terms-modal,
    .qr-modal,
    .checkout-modal,
    .customer-identify-modal,
    .modal-produto,
    .pedefi-audio-modal,
    .pedefi-ds-modal-overlay,
    .promocao-modal,
    .pedefi-subscription-modal
  ).pedefi-modal-closing {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: none !important;
  }

  html body[data-admin-shell][data-admin-pagina]
  .admin-form-modal.pedefi-modal-closing::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 0 !important;
    transition: none !important;
  }
}

/* Backdrop compartilhado: somente modais e diálogos reais. */
:is(
  .modal:not(.oculto):not(.storefront-primary-view),
  .produtos-modal:not(.oculto),
  .admin-confirm-overlay:not(.oculto),
  .produtos-confirm-modal:not(.oculto),
  .chamado-detalhe-modal:not(.oculto),
  .cupons-modal-overlay:not(.oculto),
  .promocoes-modal-overlay:not(.oculto),
  .promocao-opcoes-overlay:not(.oculto),
  .pedefi-product-crop-modal:not(.oculto),
  .pedefi-dialog-overlay:not([hidden]),
  .pedefi-suporte-modal.is-open,
  .pedefi-support-submodal.is-open,
  .pedefi-terms-modal.is-open,
  .qr-modal.ativo,
  .checkout-modal:not(.oculto),
  .customer-identify-modal:not(.oculto),
  .modal-produto:not(.oculto),
  .pedefi-audio-modal:not([hidden]),
  .pedefi-ds-modal-overlay.is-open,
  .promocao-modal:not([hidden]),
  body.cardapio-publico-page #modalProduto.modal-produto:not(.oculto)
) {
  position: fixed !important;
  inset: 0 !important;
  background: var(--pedefi-modal-backdrop-bg);
  -webkit-backdrop-filter: var(--pedefi-modal-backdrop-filter) !important;
  backdrop-filter: var(--pedefi-modal-backdrop-filter) !important;
  filter: none !important;
  opacity: 1;
  animation: pedefi-modal-backdrop-in 100ms ease-in-out both;
  transition: background-color 100ms ease-in-out;
}

/* Overrides legados criavam uma segunda camada sobre o backdrop do wrapper. */
:is(
  .modal:not(.oculto):not(.produtos-confirm-modal):not(.admin-confirm-modal),
  .produtos-modal:not(.oculto)
)::before,
:is(
  .modal:not(.oculto):not(.produtos-confirm-modal):not(.admin-confirm-modal),
  .produtos-modal:not(.oculto)
)::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* Formulários administrativos usam uma única camada própria de backdrop. */
.admin-form-modal:not(.oculto)::before {
  content: "" !important;
  display: block !important;
  background: var(--pedefi-modal-backdrop-bg) !important;
  -webkit-backdrop-filter: var(--pedefi-modal-backdrop-filter) !important;
  backdrop-filter: var(--pedefi-modal-backdrop-filter) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* No mobile o painel usa a mesma composição persistente do drawer. O antigo
   backdrop no body criava uma superfície separada que, durante a entrada,
   podia ser composta como um frame branco antes de rasterizar a página. */
@media (max-width: 760px) {
  :is(
    body[data-admin-pagina="categorias"]:has(#formCategoria:not(.oculto)),
    body[data-admin-pagina="grupos"]:has(#formGrupo:not(.oculto)),
    body[data-admin-pagina="adicionais"]:has(#formAdicional:not(.oculto))
  )::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  .admin-form-modal:not(.oculto)::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* O formulário administrativo é simultaneamente backdrop e shell. */
.admin-form-modal:not(.oculto) {
  color: var(--pedefi-modal-ink);
  font-family: var(--pedefi-admin-font-family, var(--pedefi-ds-font-family, "DM Sans", Roboto, sans-serif));
  animation: pedefi-modal-shell-in var(--pedefi-modal-motion) both;
  transition:
    opacity var(--pedefi-modal-motion-duration) var(--pedefi-modal-motion-easing),
    transform var(--pedefi-modal-motion-duration) var(--pedefi-modal-motion-easing);
}

/* Shells com regiões explícitas seguem header/body/footer sem scroll duplo. */
:is(
  .modal-content,
  .produtos-modal-content,
  .chamado-detalhe-dialog,
  .cupons-modal-card,
  .promocoes-modal-card,
  .promocao-opcoes-modal,
  .pedefi-product-crop-dialog,
  .pedefi-suporte-modal__dialog,
  .pedefi-support-submodal__dialog,
  .pedefi-terms-modal__dialog,
  .checkout-content,
  .pedefi-mesas-modal
) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

:is(
  .admin-form-modal-body,
  .modal-body,
  .produtos-form-grid,
  .chamado-detalhe-corpo,
  .promocoes-modal-body,
  .promocao-opcoes-conteudo,
  .pedefi-product-crop-body,
  .pedefi-suporte-modal__grid,
  .pedefi-support-submodal__body,
  .pedefi-terms-modal__body,
  .modal-produto-body,
  .modal-info-body,
  .carrinho-corpo,
  .pedefi-mesas-modal__body
) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: var(--pedefi-modal-surface) !important;
}

/* A prioridade adicional de Mesas fica isolada para não elevar a
   especificidade do seletor compartilhado acima. */
body[data-admin-pagina="mesas"] #modalMesaForm .pedefi-mesas-modal__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: var(--pedefi-modal-surface) !important;
}

/* Shell compartilhado. Larguras específicas continuam com cada fluxo. */
:is(
  .modal-content,
  .produtos-modal-content,
  .produtos-confirm-box,
  .admin-confirm-box,
  .admin-confirm-card,
  .chamado-detalhe-dialog,
  .cupons-modal-card,
  .promocoes-modal-card,
  .promocao-opcoes-modal,
  .pedefi-product-crop-dialog,
  .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog,
  .pedefi-support-submodal__dialog,
  .pedefi-terms-modal__dialog,
  .qr-modal-card,
  .checkout-content,
  .customer-identify-content,
  .modal-produto-content,
  .pedefi-audio-modal-card,
  .pedefi-mesas-modal,
  .produtos-grupos-sabores-modal
) {
  box-sizing: border-box;
  color: var(--pedefi-modal-ink);
  font-family: var(--pedefi-admin-font-family, var(--pedefi-ds-font-family, "DM Sans", Roboto, sans-serif));
  background: var(--pedefi-modal-surface) !important;
  border: 1px solid var(--pedefi-modal-border) !important;
  border-radius: var(--pedefi-modal-radius) !important;
  box-shadow: var(--pedefi-modal-shadow) !important;
  animation: pedefi-modal-shell-in var(--pedefi-modal-motion) both;
  transition:
    opacity var(--pedefi-modal-motion-duration) var(--pedefi-modal-motion-easing),
    transform var(--pedefi-modal-motion-duration) var(--pedefi-modal-motion-easing);
}

/* Confirmações estáticas e dinâmicas compartilham a mesma anatomia. */
[data-pedefi-confirm] > :is(.produtos-confirm-box, .admin-confirm-box, .admin-confirm-card),
.pedefi-dialog-card {
  position: relative;
}

[data-pedefi-confirm] .pedefi-confirm-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}

[data-pedefi-confirm] :is(.produtos-confirm-icon, .admin-confirm-icon, .cupons-confirm-icon) {
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
}

[data-pedefi-confirm] .cupons-confirm-eyebrow {
  display: block !important;
}

[data-pedefi-confirm][data-pedefi-confirm-variant="danger"] :is(.produtos-confirm-icon, .admin-confirm-icon, .cupons-confirm-icon) {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

[data-pedefi-confirm] [data-pedefi-confirm-cancel] {
  border: 1px solid var(--pedefi-modal-border) !important;
  background: var(--pedefi-modal-surface-soft) !important;
  color: #475467 !important;
  box-shadow: none !important;
}

[data-pedefi-confirm][data-pedefi-confirm-variant="danger"] [data-pedefi-confirm-action] {
  border-color: #dc2626 !important;
  background: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18) !important;
}

[data-pedefi-confirm][data-pedefi-confirm-variant="danger"] [data-pedefi-confirm-action]:not(:disabled):hover {
  border-color: #b91c1c !important;
  background: #b91c1c !important;
  color: #fff !important;
}

/* Cabeçalho: permite kicker, título e subtítulo opcionais. */
:is(
  .admin-form-modal-header,
  .modal-header,
  .produtos-modal-header,
  .chamado-detalhe-header,
  .pedefi-product-crop-header,
  .pedefi-suporte-modal__header,
  .pedefi-support-submodal__header,
  .pedefi-terms-modal__header,
  .checkout-header,
  .modal-produto-header,
  .modal-info-header,
  .carrinho-header,
  .pedefi-mesas-modal__header,
  body[data-admin-pagina="mesas"] #modalMesaForm .pedefi-mesas-modal__header,
  .promocao-opcoes-modal > header
) {
  box-sizing: border-box;
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0;
  margin: 0;
  padding: 16px 18px !important;
  color: var(--pedefi-modal-ink) !important;
  background: var(--pedefi-modal-surface) !important;
  border-bottom: 1px solid var(--pedefi-modal-divider) !important;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02) !important;
}

:is(
  .admin-form-modal-header,
  .modal-header,
  .produtos-modal-header,
  .chamado-detalhe-header,
  .pedefi-product-crop-header,
  .pedefi-suporte-modal__header,
  .pedefi-support-submodal__header,
  .pedefi-terms-modal__header,
  .modal-produto-header,
  .modal-info-header,
  body[data-admin-pagina="mesas"] #modalMesaForm .pedefi-mesas-modal__header,
  .promocao-opcoes-modal > header
) > :first-child {
  min-width: 0;
}

:is(
  .admin-form-modal-header,
  .modal-header,
  .produtos-modal-header,
  .chamado-detalhe-header,
  .pedefi-product-crop-header,
  .pedefi-suporte-modal__header,
  .pedefi-support-submodal__header,
  .pedefi-terms-modal__header,
  .modal-produto-header,
  .modal-info-header,
  body[data-admin-pagina="mesas"] #modalMesaForm .pedefi-mesas-modal__header,
  .promocao-opcoes-modal > header
) :is(.pedido-manual-cabecalho-texto > span, .modal-produto-eyebrow, .modal-info-eyebrow, .pedefi-product-crop-eyebrow, .qr-modal-eyebrow, .pedefi-dialog-eyebrow, div > span:first-child) {
  display: block;
  margin: 0 0 3px;
  color: var(--pedefi-modal-accent) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

:is(
  .admin-form-modal-header,
  .modal-header,
  .produtos-modal-header,
  .chamado-detalhe-header,
  .pedefi-product-crop-header,
  .pedefi-suporte-modal__header,
  .pedefi-support-submodal__header,
  .pedefi-terms-modal__header,
  .modal-produto-header,
  .modal-info-header,
  body[data-admin-pagina="mesas"] #modalMesaForm .pedefi-mesas-modal__header,
  .promocao-opcoes-modal > header
) :is(h1, h2, h3) {
  margin: 0;
  color: var(--pedefi-modal-ink) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.018em !important;
  overflow-wrap: break-word;
}

:is(
  .admin-form-modal-header,
  .modal-header,
  .produtos-modal-header,
  .chamado-detalhe-header,
  .pedefi-product-crop-header,
  .pedefi-suporte-modal__header,
  .pedefi-support-submodal__header,
  .pedefi-terms-modal__header,
  .modal-produto-header,
  .modal-info-header,
  body[data-admin-pagina="mesas"] #modalMesaForm .pedefi-mesas-modal__header,
  .promocao-opcoes-modal > header
) p {
  margin: 4px 0 0;
  color: var(--pedefi-modal-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* Mesas usa um wrapper estrutural no header; ele não deve virar um segundo card. */
body[data-admin-pagina="mesas"] .pedefi-mesas-modal__header .mesas-modal-header-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Formulários simples ficam diretos no body, sem card/seção numerada decorativa. */
:is(
  body[data-admin-pagina="mesas"] #modalMesaForm .mesas-modal-mesa-grid,
  body[data-admin-pagina="categorias"] #formCategoria .categorias-form-section,
  body[data-admin-pagina="grupos"] #formGrupo .categorias-form-section,
  body[data-admin-pagina="adicionais"] #formAdicional .categorias-form-section,
  body[data-admin-pagina="cupons"] #formCupom .cupons-form-section
) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(
  body[data-admin-pagina="mesas"] #modalMesaForm .mesas-modal-section-heading,
  body[data-admin-pagina="categorias"] #formCategoria .categorias-section-title,
  body[data-admin-pagina="grupos"] #formGrupo .categorias-section-title,
  body[data-admin-pagina="adicionais"] #formAdicional .categorias-section-title,
  body[data-admin-pagina="cupons"] #formCupom .cupons-section-title
) {
  display: none !important;
}

/* Um único padrão visual para todos os X; handlers permanecem independentes. */
:is(
  .storefront-modal-close,
  .admin-form-modal-close,
  .modal-close,
  .fechar-modal,
  .mesas-modal-close,
  .pedefi-product-crop-close,
  .pedefi-suporte-modal__fechar,
  .pedefi-support-submodal__fechar,
  .pedefi-terms-modal__fechar,
  .customer-identify-close,
  .checkout-fechar,
  .promocao-modal__fechar,
  .promocao-opcoes-modal > header [data-fechar-opcoes],
  body[data-admin-pagina="mesas"] .pedefi-mesas-modal__header .mesas-modal-close,
  .chamado-detalhe-header > button
) {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--pedefi-modal-close-size) !important;
  width: var(--pedefi-modal-close-size) !important;
  min-width: var(--pedefi-modal-close-size) !important;
  max-width: var(--pedefi-modal-close-size) !important;
  height: var(--pedefi-modal-close-size) !important;
  min-height: var(--pedefi-modal-close-size) !important;
  max-height: var(--pedefi-modal-close-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f7f8fa !important;
  color: #697180 !important;
  font: inherit;
  font-size: 0 !important;
  line-height: 1;
  appearance: none;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, color 140ms ease, transform 100ms ease, box-shadow 140ms ease;
}

:is(
  .storefront-modal-close,
  .admin-form-modal-close,
  .modal-close,
  .fechar-modal,
  .mesas-modal-close,
  .pedefi-product-crop-close,
  .pedefi-suporte-modal__fechar,
  .pedefi-support-submodal__fechar,
  .pedefi-terms-modal__fechar,
  .customer-identify-close,
  .checkout-fechar,
  .promocao-modal__fechar,
  .promocao-opcoes-modal > header [data-fechar-opcoes],
  body[data-admin-pagina="mesas"] .pedefi-mesas-modal__header .mesas-modal-close,
  .chamado-detalhe-header > button
) > :is(i, svg) {
  display: block;
  width: 23px !important;
  height: 23px !important;
  margin: 0;
  color: currentColor;
  stroke: currentColor;
  stroke-width: 2 !important;
  pointer-events: none;
}

:is(
  .storefront-modal-close,
  .admin-form-modal-close,
  .modal-close,
  .fechar-modal,
  .mesas-modal-close,
  .pedefi-product-crop-close,
  .pedefi-suporte-modal__fechar,
  .pedefi-support-submodal__fechar,
  .pedefi-terms-modal__fechar,
  .customer-identify-close,
  .checkout-fechar,
  .promocao-modal__fechar,
  .promocao-opcoes-modal > header [data-fechar-opcoes],
  body[data-admin-pagina="mesas"] .pedefi-mesas-modal__header .mesas-modal-close,
  .chamado-detalhe-header > button
):hover {
  background: #eef0f3 !important;
  color: #596273 !important;
}

:is(
  .storefront-modal-close,
  .admin-form-modal-close,
  .modal-close,
  .fechar-modal,
  .mesas-modal-close,
  .pedefi-product-crop-close,
  .pedefi-suporte-modal__fechar,
  .pedefi-support-submodal__fechar,
  .pedefi-terms-modal__fechar,
  .customer-identify-close,
  .checkout-fechar,
  .promocao-modal__fechar,
  .promocao-opcoes-modal > header [data-fechar-opcoes],
  body[data-admin-pagina="mesas"] .pedefi-mesas-modal__header .mesas-modal-close,
  .chamado-detalhe-header > button
):active {
  background: #e7e9ed !important;
  color: #4b5563 !important;
  transform: scale(0.96) !important;
}

:is(
  .storefront-modal-close,
  .admin-form-modal-close,
  .modal-close,
  .fechar-modal,
  .mesas-modal-close,
  .pedefi-product-crop-close,
  .pedefi-suporte-modal__fechar,
  .pedefi-support-submodal__fechar,
  .pedefi-terms-modal__fechar,
  .customer-identify-close,
  .checkout-fechar,
  .promocao-modal__fechar,
  .promocao-opcoes-modal > header [data-fechar-opcoes],
  body[data-admin-pagina="mesas"] .pedefi-mesas-modal__header .mesas-modal-close,
  .chamado-detalhe-header > button
):focus-visible {
  outline: 3px solid rgba(255, 101, 0, 0.24) !important;
  outline-offset: 2px !important;
}

/* Formulários internos: não toca em checkbox, radio, range ou file. */
:is(
  .admin-form-modal,
  .modal-content,
  .produtos-modal-content,
  .cupons-modal-card,
  .promocoes-modal-card,
  .promocao-opcoes-modal,
  .pedefi-product-crop-dialog,
  .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog,
  .pedefi-support-submodal__dialog,
  .pedefi-terms-modal__dialog,
  .checkout-content,
  .customer-identify-content
) label {
  color: var(--pedefi-modal-label) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* Ritmo dos formulários: o grid não distribui espaço livre pelos controles. */
:is(
  .admin-form-modal,
  .modal-content,
  .produtos-modal-content,
  .cupons-modal-card,
  .promocoes-modal-card,
  .promocao-opcoes-modal,
  .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog,
  .pedefi-support-submodal__dialog,
  .checkout-content,
  .customer-identify-content
) :is(.admin-form-field, .produtos-field, .pedido-manual-campo, .pedefi-dialog-field) {
  align-self: start;
  align-content: start;
  min-width: 0;
  gap: var(--pedefi-modal-label-gap) !important;
}

:is(.admin-form-modal-body, .produtos-form-grid, .cupons-form-grid) {
  align-content: start !important;
  gap: var(--pedefi-modal-field-gap) !important;
}

/* Overrides antigos destes formulários pintam o body de cinza no mobile.
   A superfície branca aprovada permanece separada da regra de flex. */
:is(
  body[data-admin-pagina="categorias"] #formCategoria,
  body[data-admin-pagina="grupos"] #formGrupo,
  body[data-admin-pagina="adicionais"] #formAdicional,
  body[data-admin-pagina="cupons"] #formCupom
) > .admin-form-modal-body {
  background: var(--pedefi-modal-surface) !important;
}

:is(
  .admin-form-modal,
  .modal-content,
  .produtos-modal-content,
  .cupons-modal-card,
  .promocoes-modal-card,
  .promocao-opcoes-modal,
  .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog,
  .pedefi-support-submodal__dialog,
  .checkout-content,
  .customer-identify-content
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.pedefi-ds-input), select:not(.pedefi-ds-select), textarea:not(.pedefi-ds-textarea)) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--pedefi-modal-border) !important;
  border-radius: var(--pedefi-modal-control-radius) !important;
  background-color: var(--pedefi-modal-surface) !important;
  color: #1f2937 !important;
  font-family: var(--pedefi-admin-font-family, var(--pedefi-ds-font-family, "DM Sans", Roboto, sans-serif)) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

:is(
  .admin-form-modal,
  .modal-content,
  .produtos-modal-content,
  .cupons-modal-card,
  .promocoes-modal-card,
  .promocao-opcoes-modal,
  .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog,
  .pedefi-support-submodal__dialog,
  .checkout-content,
  .customer-identify-content
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.pedefi-ds-input), select:not(.pedefi-ds-select)) {
  height: var(--pedefi-modal-control-height) !important;
  min-height: var(--pedefi-modal-control-height) !important;
  max-height: var(--pedefi-modal-control-height) !important;
  padding: 0 13px;
}

:is(
  .admin-form-modal,
  .modal-content,
  .produtos-modal-content,
  .cupons-modal-card,
  .promocoes-modal-card,
  .promocao-opcoes-modal,
  .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog,
  .pedefi-support-submodal__dialog,
  .checkout-content,
  .customer-identify-content
) textarea:not(.pedefi-ds-textarea) {
  align-self: start;
  height: auto !important;
  min-height: var(--pedefi-modal-textarea-min-height) !important;
  max-height: 240px;
  padding: 11px 13px;
  resize: vertical;
}

:is(
  .admin-form-modal,
  .modal-content,
  .produtos-modal-content,
  .cupons-modal-card,
  .promocoes-modal-card,
  .promocao-opcoes-modal,
  .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog,
  .pedefi-support-submodal__dialog,
  .checkout-content,
  .customer-identify-content
) :is(input:not(.pedefi-ds-input), select:not(.pedefi-ds-select), textarea:not(.pedefi-ds-textarea))::placeholder {
  color: #98a2b3;
  opacity: 1;
  font-weight: 400;
}

:is(
  .admin-form-modal,
  .modal-content,
  .produtos-modal-content,
  .cupons-modal-card,
  .promocoes-modal-card,
  .promocao-opcoes-modal,
  .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog,
  .pedefi-support-submodal__dialog,
  .checkout-content,
  .customer-identify-content
) :is(input:not(.pedefi-ds-input), select:not(.pedefi-ds-select), textarea:not(.pedefi-ds-textarea)):focus {
  border-color: rgba(255, 101, 0, 0.5) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--pedefi-modal-focus) !important;
}

/* Custom selects já existentes: apenas linguagem visual compartilhada. */
:is(.pedefi-admin-custom-select-button:not(.pedefi-ds-combobox-trigger), .admin-custom-select-button, .pedido-manual-select-trigger, .pedefi-custom-select__trigger) {
  height: var(--pedefi-modal-control-height) !important;
  min-height: var(--pedefi-modal-control-height) !important;
  max-height: var(--pedefi-modal-control-height) !important;
  background: var(--pedefi-modal-surface) !important;
  border-color: var(--pedefi-modal-border) !important;
  border-radius: var(--pedefi-modal-control-radius) !important;
  color: #1f2937 !important;
}

/* No desktop, o formulário administrativo é um overlay; seu body deve medir
   o conteúdo, não crescer para preencher a viewport e esticar as linhas. */
@media (min-width: 761px) {
  .admin-form-modal:not(.oculto) > .admin-form-modal-body {
    flex: 0 1 auto !important;
  }

  /* Cards que reutilizam as três regiões administrativas devem ocupar
     toda a largura do próprio shell, sem herdar o limite do overlay-form. */
  .cupons-modal-card > :is(.admin-form-modal-header, .admin-form-modal-body, .admin-form-modal-footer) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

:is(.pedefi-admin-custom-select-menu, .admin-custom-select-menu, .pedido-manual-select-menu, .pedefi-custom-select__menu) {
  background: var(--pedefi-modal-surface) !important;
  border: 1px solid var(--pedefi-modal-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14) !important;
}

:is(.pedefi-admin-custom-select-menu > button, .admin-custom-select-option, .pedido-manual-select-option, .pedefi-custom-select__option) {
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(.pedefi-admin-custom-select-menu > button, .admin-custom-select-option, .pedido-manual-select-option, .pedefi-custom-select__option)::before,
:is(.pedefi-admin-custom-select-menu > button, .admin-custom-select-option, .pedido-manual-select-option, .pedefi-custom-select__option)::after {
  display: none !important;
  content: none !important;
}

:is(.pedefi-admin-custom-select-menu > button, .admin-custom-select-option, .pedido-manual-select-option, .pedefi-custom-select__option)[aria-selected="true"],
:is(.admin-custom-select-option, .pedido-manual-select-option, .pedefi-custom-select__option).is-selected {
  color: #9a3412 !important;
  background: var(--pedefi-modal-accent-soft) !important;
  box-shadow: none !important;
}

/* Footer e ações comuns. */
:is(
  .admin-form-modal-footer,
  .modal-footer,
  .produtos-modal-footer,
  .chamado-detalhe-acoes,
  .produtos-confirm-actions,
  .admin-confirm-actions,
  .pedefi-product-crop-footer,
  .pedefi-support-submodal__footer,
  .pedefi-terms-modal__footer,
  .checkout-footer,
  .modal-produto-footer,
  .carrinho-footer-fixo,
  .pedefi-mesas-modal__footer,
  .promocao-opcoes-modal > footer,
  .pedefi-dialog-actions,
  .pedido-manual-acoes
) {
  box-sizing: border-box;
  flex: 0 0 auto;
  gap: 10px;
  background: var(--pedefi-modal-surface) !important;
  border-top-color: var(--pedefi-modal-divider) !important;
  box-shadow: none !important;
}

:is(
  .admin-form-modal-footer,
  .modal-footer,
  .produtos-modal-footer,
  .chamado-detalhe-acoes,
  .produtos-confirm-actions,
  .admin-confirm-actions,
  .pedefi-product-crop-footer,
  .pedefi-support-submodal__footer,
  .pedefi-terms-modal__footer,
  .pedefi-mesas-modal__footer,
  .promocao-opcoes-modal > footer,
  .pedefi-dialog-actions,
  .pedido-manual-acoes
) :is(button, .button, .btn):not(.pedefi-ds-btn) {
  min-height: 45px !important;
  border-radius: 10px !important;
  font-family: var(--pedefi-admin-font-family, var(--pedefi-ds-font-family, "DM Sans", Roboto, sans-serif)) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
}

:is(
  .admin-form-modal-save,
  .produtos-modal-save,
  .btn-admin-primary,
  .pedefi-dialog-btn--primary,
  .pedefi-support-btn--primary,
  #btnSalvarPedidoManual,
  #btnAplicarOpcoes,
  [data-crop-acao="salvar"]
):not(.pedefi-ds-btn) {
  border-color: var(--pedefi-modal-accent) !important;
  background: var(--pedefi-modal-accent) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(255, 101, 0, 0.18) !important;
}

:is(
  .admin-form-modal-save,
  .produtos-modal-save,
  .btn-admin-primary,
  .pedefi-dialog-btn--primary,
  .pedefi-support-btn--primary,
  #btnSalvarPedidoManual,
  #btnAplicarOpcoes,
  [data-crop-acao="salvar"]
):not(.pedefi-ds-btn):not(:disabled):hover {
  border-color: var(--pedefi-modal-accent-hover) !important;
  background: var(--pedefi-modal-accent-hover) !important;
  color: #fff !important;
}

:is(
  .admin-form-modal-cancel,
  .produtos-modal-cancel,
  .btn-admin-secondary,
  .pedefi-dialog-btn--secondary,
  .pedefi-support-btn--secondary,
  #btnCancelarPedidoManual
):not(.pedefi-ds-btn) {
  border: 1px solid var(--pedefi-modal-border) !important;
  background: var(--pedefi-modal-surface-soft) !important;
  color: #475467 !important;
  box-shadow: none !important;
}

:is(
  .admin-form-modal-cancel,
  .produtos-modal-cancel,
  .btn-admin-secondary,
  .pedefi-dialog-btn--secondary,
  .pedefi-support-btn--secondary,
  #btnCancelarPedidoManual
):not(.pedefi-ds-btn):not(:disabled):hover {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #344054;
}

:is(
  .admin-form-modal-footer,
  .modal-footer,
  .produtos-modal-footer,
  .chamado-detalhe-acoes,
  .produtos-confirm-actions,
  .admin-confirm-actions,
  .pedefi-product-crop-footer,
  .pedefi-support-submodal__footer,
  .pedefi-terms-modal__footer,
  .pedefi-mesas-modal__footer,
  .promocao-opcoes-modal > footer,
  .pedefi-dialog-actions,
  .pedido-manual-acoes
) :is(button, .button, .btn):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--pedefi-modal-focus);
}

:is(
  .admin-form-modal-footer,
  .modal-footer,
  .produtos-modal-footer,
  .chamado-detalhe-acoes,
  .produtos-confirm-actions,
  .admin-confirm-actions,
  .pedefi-product-crop-footer,
  .pedefi-support-submodal__footer,
  .pedefi-terms-modal__footer,
  .pedefi-mesas-modal__footer,
  .promocao-opcoes-modal > footer,
  .pedefi-dialog-actions,
  .pedido-manual-acoes
) :is(button, .button, .btn):not(:disabled):active {
  transform: translateY(1px);
}

:is(
  .admin-form-modal-footer,
  .modal-footer,
  .produtos-modal-footer,
  .chamado-detalhe-acoes,
  .produtos-confirm-actions,
  .admin-confirm-actions,
  .pedefi-product-crop-footer,
  .pedefi-support-submodal__footer,
  .pedefi-terms-modal__footer,
  .pedefi-mesas-modal__footer,
  .promocao-opcoes-modal > footer,
  .pedefi-dialog-actions,
  .pedido-manual-acoes
) :is(button, .button, .btn):disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  box-shadow: none;
}

@keyframes pedefi-modal-backdrop-in {
  from { background-color: transparent; }
  to { background-color: var(--pedefi-modal-backdrop-bg); }
}

@keyframes pedefi-modal-shell-in {
  from { opacity: 1; transform: translateX(-100vw); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pedefi-modal-shell-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(-100vw); }
}

/* Todos os shells, inclusive os legados com animação própria, usam o
   mesmo deslocamento lateral do drawer da sidebar. */
:is(
  .modal-content, .produtos-modal-content, .produtos-confirm-box,
  .admin-confirm-box, .admin-confirm-card, .chamado-detalhe-dialog,
  .cupons-modal-card, .promocoes-modal-card, .promocao-opcoes-modal,
  .pedefi-product-crop-dialog, .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog, .pedefi-support-submodal__dialog,
  .pedefi-terms-modal__dialog, .qr-modal-card, .checkout-content,
  .customer-identify-content, .modal-produto-content,
  .pedefi-audio-modal-card, .pedefi-mesas-modal,
  .produtos-grupos-sabores-modal, .pedefi-ds-modal
) {
  animation: pedefi-modal-shell-in var(--pedefi-modal-motion) both !important;
}

.admin-form-modal:not(.oculto) {
  animation: pedefi-modal-shell-in var(--pedefi-modal-motion) both !important;
}

@media (min-width: 761px) {
  /*
   * Compatibilidade estrutural: os formulários administrativos antigos
   * não têm um wrapper interno; header/body/footer formam juntos o shell.
   * A geometria continua no componente administrativo, enquanto toda a
   * aparência final destes três segmentos vem desta fonte.
   */
  .admin-form-modal:not(.oculto) > .admin-form-modal-header {
    border: 1px solid var(--pedefi-modal-border) !important;
    border-bottom: 1px solid var(--pedefi-modal-divider) !important;
    border-radius: var(--pedefi-modal-radius) var(--pedefi-modal-radius) 0 0 !important;
    box-shadow: var(--pedefi-modal-shadow) !important;
  }

  .admin-form-modal:not(.oculto) > .admin-form-modal-body {
    background: var(--pedefi-modal-surface) !important;
    border-right: 1px solid var(--pedefi-modal-border) !important;
    border-left: 1px solid var(--pedefi-modal-border) !important;
  }

  .admin-form-modal:not(.oculto) > .admin-form-modal-footer {
    border: 1px solid var(--pedefi-modal-border) !important;
    border-top: 1px solid var(--pedefi-modal-divider) !important;
    border-radius: 0 0 var(--pedefi-modal-radius) var(--pedefi-modal-radius) !important;
  }
}

@media (max-width: 760px) {
  /* Somente ajustes de ritmo. A geometria vive na fonte canônica mobile. */
  .admin-form-modal:not(.oculto) {
    background: var(--pedefi-modal-surface) !important;
  }

  .admin-form-modal:not(.oculto) > :is(.admin-form-modal-header, .admin-form-modal-body, .admin-form-modal-footer) {
    border-radius: 0 !important;
  }

  :is(
    .admin-form-modal-header,
    .modal-header,
    .produtos-modal-header,
    .chamado-detalhe-header,
    .pedefi-product-crop-header,
    .pedefi-suporte-modal__header,
    .pedefi-support-submodal__header,
    .pedefi-terms-modal__header,
    .checkout-header,
    .modal-produto-header,
    .modal-info-header,
    .carrinho-header,
    .pedefi-mesas-modal__header,
    .promocao-opcoes-modal > header
  ) {
    padding-inline: 16px;
  }

  :is(
    .modal-content,
    .produtos-modal-content,
    .produtos-confirm-box,
    .admin-confirm-box,
    .admin-confirm-card,
    .chamado-detalhe-dialog,
    .cupons-modal-card,
    .promocoes-modal-card,
    .promocao-opcoes-modal,
    .pedefi-product-crop-dialog,
    .pedefi-dialog-card,
    .pedefi-suporte-modal__dialog,
    .pedefi-support-submodal__dialog,
    .pedefi-terms-modal__dialog,
    .qr-modal-card,
    .checkout-content,
    .customer-identify-content,
    .modal-produto-content,
    .pedefi-audio-modal-card,
    .pedefi-mesas-modal,
    .produtos-grupos-sabores-modal
  ) {
    box-shadow: none;
    /* Substitui também animações legadas de bottom-sheet com !important. */
    animation: pedefi-modal-mobile-in var(--pedefi-modal-motion) both !important;
  }
}

@keyframes pedefi-modal-mobile-in {
  from { opacity: 1; transform: translateX(-100vw); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 760px) {
  /* Compatibilidade com o antigo bottom-sheet público, cuja declaração
     específica usava translateY(100%) e !important. */
  body.cardapio-publico-page #modalProduto.modal-produto:not(.oculto) .modal-produto-content.modal-produto-app,
  body.cardapio-publico-page #modalPromocaoPublica.promocao-modal:not([hidden]) .modal-produto-content {
    animation: pedefi-modal-mobile-in var(--pedefi-modal-motion) both !important;
  }

  /* No fechamento, o produto abandona integralmente o keyframe de entrada e
     passa a usar a mesma transição de transform do carrinho. */
  body.cardapio-publico-page #modalProduto.modal-produto.pedefi-modal-closing .modal-produto-content.modal-produto-app {
    animation: none !important;
    transform: translateX(-100%) !important;
    transition: transform var(--pedefi-modal-motion) !important;
  }

  /* A promoção segue a mesma saída do produto e do carrinho: nenhum keyframe
     concorrente, somente a transição horizontal canônica. */
  body.cardapio-publico-page #modalPromocaoPublica.promocao-modal.pedefi-modal-closing .modal-produto-content {
    animation: none !important;
    transform: translateX(-100%) !important;
    transition: transform var(--pedefi-modal-motion) !important;
  }
}

/*
 * Saída canônica. A classe permanece no overlay durante toda a transição;
 * somente depois o JavaScript restaura hidden/oculto/remove o nó.
 */
:is(
  .modal, .produtos-modal, .admin-form-modal, .admin-confirm-overlay,
  .produtos-confirm-modal, .chamado-detalhe-modal, .cupons-modal-overlay,
  .promocoes-modal-overlay, .promocao-opcoes-overlay, .pedefi-product-crop-modal,
  .pedefi-dialog-overlay, .pedefi-suporte-modal, .pedefi-support-submodal,
  .pedefi-terms-modal, .qr-modal, .checkout-modal, .customer-identify-modal,
  .modal-produto, .pedefi-audio-modal, .pedefi-ds-modal-overlay,
  .promocao-modal
).pedefi-modal-closing {
  opacity: 1 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  pointer-events: none !important;
  transition: none !important;
}

/* O backdrop desaparece no mesmo frame do clique. Somente o shell continua
   animando para a esquerda durante o fechamento. */
:is(
  .modal, .produtos-modal, .admin-form-modal, .admin-confirm-overlay,
  .produtos-confirm-modal, .chamado-detalhe-modal, .cupons-modal-overlay,
  .promocoes-modal-overlay, .promocao-opcoes-overlay, .pedefi-product-crop-modal,
  .pedefi-dialog-overlay, .pedefi-suporte-modal, .pedefi-support-submodal,
  .pedefi-terms-modal, .qr-modal, .checkout-modal, .customer-identify-modal,
  .modal-produto, .pedefi-audio-modal, .pedefi-ds-modal-overlay,
  .promocao-modal
).pedefi-modal-closing::before,
:is(
  .modal, .produtos-modal, .admin-form-modal, .admin-confirm-overlay,
  .produtos-confirm-modal, .chamado-detalhe-modal, .cupons-modal-overlay,
  .promocoes-modal-overlay, .promocao-opcoes-overlay, .pedefi-product-crop-modal,
  .pedefi-dialog-overlay, .pedefi-suporte-modal, .pedefi-support-submodal,
  .pedefi-terms-modal, .qr-modal, .checkout-modal, .customer-identify-modal,
  .modal-produto, .pedefi-audio-modal, .pedefi-ds-modal-overlay,
  .promocao-modal
).pedefi-modal-closing::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transition: none !important;
}

:is(
  .modal, .produtos-modal, .admin-confirm-overlay, .produtos-confirm-modal,
  .chamado-detalhe-modal, .cupons-modal-overlay, .promocoes-modal-overlay,
  .promocao-opcoes-overlay, .pedefi-product-crop-modal, .pedefi-dialog-overlay,
  .pedefi-suporte-modal, .pedefi-support-submodal, .pedefi-terms-modal,
  .qr-modal, .checkout-modal, .customer-identify-modal, .modal-produto,
  .pedefi-audio-modal, .pedefi-ds-modal-overlay, .promocao-modal
).pedefi-modal-closing :is(
  .modal-content, .produtos-modal-content, .produtos-confirm-box,
  .admin-confirm-box, .admin-confirm-card, .chamado-detalhe-dialog,
  .cupons-modal-card, .promocoes-modal-card, .promocao-opcoes-modal,
  .pedefi-product-crop-dialog, .pedefi-dialog-card,
  .pedefi-suporte-modal__dialog, .pedefi-support-submodal__dialog,
  .pedefi-terms-modal__dialog, .qr-modal-card, .checkout-content,
  .customer-identify-content, .modal-produto-content,
  .pedefi-audio-modal-card, .pedefi-mesas-modal,
  .produtos-grupos-sabores-modal, .pedefi-ds-modal
) {
  animation: pedefi-modal-shell-out var(--pedefi-modal-motion) both !important;
  opacity: 1 !important;
  transition: none !important;
}

.admin-form-modal.pedefi-modal-closing {
  animation: pedefi-modal-shell-out var(--pedefi-modal-motion) both !important;
  opacity: 1 !important;
  transition: none !important;
}

@media (max-width: 760px) {
  :is(
    .modal, .produtos-modal, .admin-confirm-overlay, .produtos-confirm-modal,
    .chamado-detalhe-modal, .cupons-modal-overlay, .promocoes-modal-overlay,
    .promocao-opcoes-overlay, .pedefi-product-crop-modal, .pedefi-dialog-overlay,
    .pedefi-suporte-modal, .pedefi-support-submodal, .pedefi-terms-modal,
    .qr-modal, .checkout-modal, .customer-identify-modal, .modal-produto,
    .pedefi-audio-modal, .pedefi-ds-modal-overlay, .promocao-modal
  ).pedefi-modal-closing :is(
    .modal-content, .produtos-modal-content, .produtos-confirm-box,
    .admin-confirm-box, .admin-confirm-card, .chamado-detalhe-dialog,
    .cupons-modal-card, .promocoes-modal-card, .promocao-opcoes-modal,
    .pedefi-product-crop-dialog, .pedefi-dialog-card,
    .pedefi-suporte-modal__dialog, .pedefi-support-submodal__dialog,
    .pedefi-terms-modal__dialog, .qr-modal-card, .checkout-content,
    .customer-identify-content, .modal-produto-content,
    .pedefi-audio-modal-card, .pedefi-mesas-modal,
    .produtos-grupos-sabores-modal, .pedefi-ds-modal
  ),
  .admin-form-modal.pedefi-modal-closing {
    animation: pedefi-modal-shell-out var(--pedefi-modal-motion) both !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .admin-form-modal:not(.oculto) {
    animation: pedefi-modal-mobile-in var(--pedefi-modal-motion) both !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .modal:not(.oculto), .produtos-modal:not(.oculto),
    .admin-form-modal:not(.oculto), .admin-confirm-overlay:not(.oculto),
    .produtos-confirm-modal:not(.oculto), .chamado-detalhe-modal:not(.oculto),
    .cupons-modal-overlay:not(.oculto), .promocoes-modal-overlay:not(.oculto),
    .promocao-opcoes-overlay:not(.oculto), .pedefi-product-crop-modal:not(.oculto),
    .pedefi-dialog-overlay:not([hidden]), .pedefi-suporte-modal.is-open,
    .pedefi-support-submodal.is-open, .pedefi-terms-modal.is-open,
    .qr-modal.ativo, .checkout-modal:not(.oculto),
    .customer-identify-modal:not(.oculto), .modal-produto:not(.oculto),
    .pedefi-audio-modal:not([hidden])
  ),
  :is(
    .modal-content, .produtos-modal-content, .produtos-confirm-box,
    .admin-confirm-box, .admin-confirm-card, .chamado-detalhe-dialog,
    .cupons-modal-card, .promocoes-modal-card, .promocao-opcoes-modal,
    .pedefi-product-crop-dialog, .pedefi-dialog-card,
    .pedefi-suporte-modal__dialog, .pedefi-support-submodal__dialog,
    .pedefi-terms-modal__dialog, .qr-modal-card, .checkout-content,
    .customer-identify-content, .modal-produto-content,
    .pedefi-audio-modal-card, .pedefi-mesas-modal,
    .produtos-grupos-sabores-modal
  ) {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }

  .pedefi-modal-closing,
  .pedefi-modal-closing * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Compatibilidade canônica — formulários de Catálogo

   Categoria, Opção e Adicional nasceram sem um shell interno: o form era
   simultaneamente backdrop e painel. A infraestrutura cria este wrapper
   preservando os mesmos campos e handlers, e somente ele recebe movimento.
   ============================================================ */
.admin-form-modal:not(.oculto),
.admin-form-modal.pedefi-modal-closing {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.pedefi-admin-form-modal-shell {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  width: min(620px, calc(100vw - 40px)) !important;
  max-width: 620px !important;
  max-height: calc(100dvh - 40px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  animation: pedefi-modal-shell-in var(--pedefi-modal-motion) both !important;
}

.pedefi-admin-form-modal-shell > :is(
  .admin-form-modal-header,
  .admin-form-modal-body,
  .admin-form-modal-footer
) {
  width: 100% !important;
  max-width: 100% !important;
}

.pedefi-admin-form-modal-shell > .admin-form-modal-header {
  border: 1px solid var(--pedefi-modal-border) !important;
  border-bottom-color: var(--pedefi-modal-divider) !important;
  border-radius: var(--pedefi-modal-radius) var(--pedefi-modal-radius) 0 0 !important;
  box-shadow: var(--pedefi-modal-shadow) !important;
}

.pedefi-admin-form-modal-shell > .admin-form-modal-body {
  background: var(--pedefi-modal-surface) !important;
  border-right: 1px solid var(--pedefi-modal-border) !important;
  border-left: 1px solid var(--pedefi-modal-border) !important;
}

.pedefi-admin-form-modal-shell > .admin-form-modal-footer {
  border: 1px solid var(--pedefi-modal-border) !important;
  border-top-color: var(--pedefi-modal-divider) !important;
  border-radius: 0 0 var(--pedefi-modal-radius) var(--pedefi-modal-radius) !important;
}

.admin-form-modal.pedefi-modal-closing::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
}

.admin-form-modal.pedefi-modal-closing > .pedefi-admin-form-modal-shell {
  animation: pedefi-modal-shell-out var(--pedefi-modal-motion) both !important;
}

@media (max-width: 760px) {
  .pedefi-admin-form-modal-shell {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
  }

  .pedefi-admin-form-modal-shell > :is(
    .admin-form-modal-header,
    .admin-form-modal-body,
    .admin-form-modal-footer
  ) {
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pedefi-admin-form-modal-shell {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Movimento mobile idêntico ao drawer da sidebar: shell sempre montado,
   transform controlado pelos estados opening/closing e transição simétrica. */
@media (max-width: 760px) {
  :is(
    .pedefi-admin-form-modal-shell,
    .modal-content,
    .produtos-modal-content,
    .produtos-confirm-box,
    .admin-confirm-box,
    .admin-confirm-card,
    .chamado-detalhe-dialog,
    .cupons-modal-card,
    .promocoes-modal-card,
    .promocao-opcoes-modal,
    .pedefi-product-crop-dialog,
    .pedefi-dialog-card,
    .pedefi-suporte-modal__dialog,
    .pedefi-support-submodal__dialog,
    .pedefi-terms-modal__dialog,
    .qr-modal-card,
    .checkout-content,
    .customer-identify-content,
    .modal-produto-content,
    .pedefi-audio-modal-card,
    .pedefi-mesas-modal,
    .produtos-grupos-sabores-modal,
    .pedefi-ds-modal
  ) {
    animation: none !important;
    transform: translateX(0);
    transition: transform var(--pedefi-modal-motion) !important;
    will-change: transform;
  }

  :is(
    .modal, .produtos-modal, .admin-form-modal, .admin-confirm-overlay,
    .produtos-confirm-modal, .chamado-detalhe-modal, .cupons-modal-overlay,
    .promocoes-modal-overlay, .promocao-opcoes-overlay, .pedefi-product-crop-modal,
    .pedefi-dialog-overlay, .pedefi-suporte-modal, .pedefi-support-submodal,
    .pedefi-terms-modal, .qr-modal, .checkout-modal, .customer-identify-modal,
    .modal-produto, .pedefi-audio-modal, .pedefi-ds-modal-overlay,
    .promocao-modal
  ):is(.pedefi-modal-opening, .pedefi-modal-closing) :is(
    .pedefi-admin-form-modal-shell,
    .modal-content,
    .produtos-modal-content,
    .produtos-confirm-box,
    .admin-confirm-box,
    .admin-confirm-card,
    .chamado-detalhe-dialog,
    .cupons-modal-card,
    .promocoes-modal-card,
    .promocao-opcoes-modal,
    .pedefi-product-crop-dialog,
    .pedefi-dialog-card,
    .pedefi-suporte-modal__dialog,
    .pedefi-support-submodal__dialog,
    .pedefi-terms-modal__dialog,
    .qr-modal-card,
    .checkout-content,
    .customer-identify-content,
    .modal-produto-content,
    .pedefi-audio-modal-card,
    .pedefi-mesas-modal,
    .produtos-grupos-sabores-modal,
    .pedefi-ds-modal
  ) {
    animation: none !important;
    transform: translateX(-100%) !important;
    transition: transform var(--pedefi-modal-motion) !important;
  }
}

@keyframes pedefi-modal-backdrop-in {
  from { background-color: transparent; }
  to { background-color: var(--pedefi-modal-backdrop-bg); }
}

@keyframes pedefi-modal-backdrop-out {
  from { background-color: var(--pedefi-modal-backdrop-bg); }
  to { background-color: transparent; }
}

@keyframes pedefi-modal-canonical-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pedefi-modal-canonical-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.985); }
}

@keyframes pedefi-modal-canonical-mobile-in {
  from { opacity: 1; transform: translateX(var(--pedefi-panel-mobile-closed-x)); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pedefi-modal-canonical-mobile-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(var(--pedefi-panel-mobile-closed-x)); }
}

/* Contrato final de camada e saída. A especificidade é deliberada para
   neutralizar z-index/backdrops históricos sem tocar nos layouts legados. */
html body [data-pedefi-modal-managed="true"] {
  z-index: var(--pedefi-modal-stack-z, var(--z-modal-overlay, 2600)) !important;
}

html body [data-pedefi-modal-managed="true"].pedefi-modal-closing:not(.admin-form-modal) {
  background-color: transparent !important;
  transition: background-color var(--pedefi-modal-motion) !important;
}

[data-pedefi-modal-managed="true"].admin-form-modal[data-pedefi-modal-backdrop-owner].pedefi-modal-closing::before {
  display: block !important;
  content: "" !important;
  opacity: 0 !important;
  background: var(--pedefi-modal-backdrop-bg) !important;
  transition: opacity var(--pedefi-modal-motion) !important;
}

/* Ordem final intencional: o lifecycle canônico vence animações históricas. */
[data-pedefi-modal-managed="true"] {
  --pedefi-modal-layer-base: var(--z-modal-overlay, 2600);
  z-index: var(--pedefi-modal-stack-z, var(--pedefi-modal-layer-base)) !important;
}

[data-pedefi-modal-managed="true"]:is(.admin-confirm-overlay, .produtos-confirm-modal, .pedefi-dialog-overlay, [data-pedefi-confirm]) {
  --pedefi-modal-layer-base: var(--z-confirm-overlay, 3000);
}

[data-pedefi-modal-managed="true"][data-pedefi-modal-backdrop-owner]:not(.admin-form-modal) {
  background: var(--pedefi-modal-backdrop-bg) !important;
  -webkit-backdrop-filter: var(--pedefi-modal-backdrop-filter) !important;
  backdrop-filter: var(--pedefi-modal-backdrop-filter) !important;
}

[data-pedefi-modal-managed="true"][data-pedefi-modal-covered] {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

[data-pedefi-modal-managed="true"].admin-form-modal {
  background: transparent !important;
}

[data-pedefi-modal-managed="true"].admin-form-modal::before {
  display: block !important;
  content: "" !important;
  opacity: 0;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

[data-pedefi-modal-managed="true"].admin-form-modal[data-pedefi-modal-backdrop-owner]::before {
  opacity: 1;
  background: var(--pedefi-modal-backdrop-bg) !important;
  -webkit-backdrop-filter: var(--pedefi-modal-backdrop-filter) !important;
  backdrop-filter: var(--pedefi-modal-backdrop-filter) !important;
}

[data-pedefi-modal-managed="true"]:is(.pedefi-modal-opening, .pedefi-modal-closing) {
  pointer-events: none !important;
}

[data-pedefi-modal-managed="true"].pedefi-modal-opening[data-pedefi-modal-backdrop-owner] {
  animation: pedefi-modal-backdrop-in var(--pedefi-modal-motion) both !important;
}

[data-pedefi-modal-managed="true"].pedefi-modal-closing:not(.admin-form-modal) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: pedefi-modal-backdrop-out var(--pedefi-modal-motion) both !important;
  transition: none !important;
}

[data-pedefi-modal-managed="true"].admin-form-modal.pedefi-modal-opening::before {
  animation: pedefi-modal-backdrop-in var(--pedefi-modal-motion) both !important;
}

[data-pedefi-modal-managed="true"].admin-form-modal.pedefi-modal-closing::before {
  display: block !important;
  content: "" !important;
  animation: pedefi-modal-backdrop-out var(--pedefi-modal-motion) both !important;
}

[data-pedefi-modal-managed="true"] :is(.pedefi-admin-form-modal-shell, .modal-content, .produtos-modal-content, .produtos-confirm-box, .admin-confirm-box, .admin-confirm-card, .pedefi-dialog-card) {
  animation: none !important;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: none !important;
  will-change: transform, opacity;
}

[data-pedefi-modal-managed="true"].pedefi-modal-opening :is(.pedefi-admin-form-modal-shell, .modal-content, .produtos-modal-content, .produtos-confirm-box, .admin-confirm-box, .admin-confirm-card, .pedefi-dialog-card) {
  animation: pedefi-modal-canonical-in var(--pedefi-modal-motion) both !important;
}

[data-pedefi-modal-managed="true"].pedefi-modal-closing :is(.pedefi-admin-form-modal-shell, .modal-content, .produtos-modal-content, .produtos-confirm-box, .admin-confirm-box, .admin-confirm-card, .pedefi-dialog-card) {
  animation: pedefi-modal-canonical-out var(--pedefi-modal-motion) both !important;
}

@media (max-width: 760px) {
  [data-pedefi-modal-managed="true"].admin-form-modal::before {
    display: none !important;
  }

  [data-pedefi-modal-managed="true"].pedefi-modal-opening :is(.pedefi-admin-form-modal-shell, .modal-content, .produtos-modal-content, .produtos-confirm-box, .admin-confirm-box, .admin-confirm-card, .pedefi-dialog-card) {
    animation-name: pedefi-modal-canonical-mobile-in !important;
  }

  [data-pedefi-modal-managed="true"].pedefi-modal-closing :is(.pedefi-admin-form-modal-shell, .modal-content, .produtos-modal-content, .produtos-confirm-box, .admin-confirm-box, .admin-confirm-card, .pedefi-dialog-card) {
    animation-name: pedefi-modal-canonical-mobile-out !important;
  }
}