.dark-mode-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  user-select: none;
}

.dark-mode-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dark-mode-track {
  position: relative;
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.2s ease;
}

.dark-mode-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.24);
  transition: transform 0.2s ease;
}

.dark-mode-control input:checked + .dark-mode-track {
  background: #f97316;
}

.dark-mode-control input:checked + .dark-mode-track::after {
  transform: translateX(22px);
}

.page-header.has-dark-mode-toggle,
.pdv-header.has-dark-mode-toggle,
.topo.has-dark-mode-toggle,
.home-header.has-dark-mode-toggle,
header.has-dark-mode-toggle {
  gap: 16px;
}

body.hangoo-dark-mode {
  --ink: #f8fafc;
  --text: #f8fafc;
  --muted: #e5e7eb;
  --text-muted: #e5e7eb;
  --subtitle: #e5e7eb;
  --label: #f8fafc;
  --line: rgba(255, 255, 255, 0.16);
  background: #0f172a !important;
  color: #e5e7eb !important;
}

body.hangoo-dark-mode .dark-mode-control {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
}

body.hangoo-dark-mode .page-header,
body.hangoo-dark-mode .pdv-header,
body.hangoo-dark-mode .section-top,
body.hangoo-dark-mode .painel-head,
body.hangoo-dark-mode .card,
body.hangoo-dark-mode [class*="-card"],
body.hangoo-dark-mode [class*="Card"],
body.hangoo-dark-mode .dashboard-grid article,
body.hangoo-dark-mode .chart-card,
body.hangoo-dark-mode .caixa-kpi,
body.hangoo-dark-mode .quick-card,
body.hangoo-dark-mode .config-geral-card,
body.hangoo-dark-mode .method-toggle,
body.hangoo-dark-mode .logo-card,
body.hangoo-dark-mode .logo-preview-wrap,
body.hangoo-dark-mode .rede-item,
body.hangoo-dark-mode .tema,
body.hangoo-dark-mode .bgs button,
body.hangoo-dark-mode .cardLocalizacao,
body.hangoo-dark-mode .panel,
body.hangoo-dark-mode .box,
body.hangoo-dark-mode .modal,
body.hangoo-dark-mode .modal-content,
body.hangoo-dark-mode .modal-conteudo,
body.hangoo-dark-mode .grafico-modal-box,
body.hangoo-dark-mode .popup,
body.hangoo-dark-mode .popup-content,
body.hangoo-dark-mode .popup-box,
body.hangoo-dark-mode .pagamento-detalhes,
body.hangoo-dark-mode .modal-caixa-online-box,
body.hangoo-dark-mode .modal-online-hero,
body.hangoo-dark-mode .modal-online-grid div,
body.hangoo-dark-mode .modal-online-retiradas,
body.hangoo-dark-mode .modal-online-retirada-item,
body.hangoo-dark-mode .form-card,
body.hangoo-dark-mode .lista-card,
body.hangoo-dark-mode .settings-card,
body.hangoo-dark-mode .config-card,
body.hangoo-dark-mode .produto-card,
body.hangoo-dark-mode .produto-card-admin,
body.hangoo-dark-mode #listaProdutos > div,
body.hangoo-dark-mode .pedido,
body.hangoo-dark-mode .pedido-card,
body.hangoo-dark-mode .card-historico,
body.hangoo-dark-mode .detalhes-pedido,
body.hangoo-dark-mode .pedido-detalhes,
body.hangoo-dark-mode .pedido-tempo div,
body.hangoo-dark-mode .pedido-info,
body.hangoo-dark-mode .item-pedido,
body.hangoo-dark-mode .pedido-total,
body.hangoo-dark-mode .cupom-card,
body.hangoo-dark-mode .entrega-card,
body.hangoo-dark-mode .entregador-card,
body.hangoo-dark-mode .card-entregador,
body.hangoo-dark-mode .entrega-item,
body.hangoo-dark-mode .modal-summary div,
body.hangoo-dark-mode .acerto-card,
body.hangoo-dark-mode .caixa-card,
body.hangoo-dark-mode .caixa-section,
body.hangoo-dark-mode .caixa-status,
body.hangoo-dark-mode .caixa-abertura,
body.hangoo-dark-mode .caixa-fechamento,
body.hangoo-dark-mode .caixa-relatorios,
body.hangoo-dark-mode .caixa-resumo-grid > div,
body.hangoo-dark-mode .mesa-card,
body.hangoo-dark-mode .mesa-pedidos-card,
body.hangoo-dark-mode .mesa-pedidos-card *,
body.hangoo-dark-mode .mesa-aberta-card,
body.hangoo-dark-mode .fechamento-card,
body.hangoo-dark-mode .produto,
body.hangoo-dark-mode .produto-item,
body.hangoo-dark-mode .adicional-card,
body.hangoo-dark-mode .add-card,
body.hangoo-dark-mode .upload-panel,
body.hangoo-dark-mode .preview-item,
body.hangoo-dark-mode .ad-upload-box,
body.hangoo-dark-mode .ad-preview,
body.hangoo-dark-mode .ad-preview-item,
body.hangoo-dark-mode .ad-games-toggle,
body.hangoo-dark-mode .ad-progress,
body.hangoo-dark-mode .checkbox-item,
body.hangoo-dark-mode .rule-card,
body.hangoo-dark-mode .message-card,
body.hangoo-dark-mode .message-item,
body.hangoo-dark-mode .conversa-card,
body.hangoo-dark-mode .chat-card,
body.hangoo-dark-mode .qr-card,
body.hangoo-dark-mode .qr-item,
body.hangoo-dark-mode .filtros-periodo,
body.hangoo-dark-mode .caixa-toolbar,
body.hangoo-dark-mode .grafico-linha-resumo,
body.hangoo-dark-mode table,
body.hangoo-dark-mode form {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #e5e7eb !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(10px);
}

body.hangoo-dark-mode .pdv-sidebar,
body.hangoo-dark-mode .pedidos-online-sidebar,
body.hangoo-dark-mode .sidebar {
  background: #020617 !important;
  color: #f8fafc !important;
}

body.hangoo-dark-mode h1,
body.hangoo-dark-mode h2,
body.hangoo-dark-mode h3,
body.hangoo-dark-mode strong,
body.hangoo-dark-mode label,
body.hangoo-dark-mode legend,
body.hangoo-dark-mode caption {
  color: #f8fafc !important;
}

body.hangoo-dark-mode p,
body.hangoo-dark-mode span,
body.hangoo-dark-mode small,
body.hangoo-dark-mode td,
body.hangoo-dark-mode th,
body.hangoo-dark-mode dt,
body.hangoo-dark-mode dd,
body.hangoo-dark-mode li,
body.hangoo-dark-mode b,
body.hangoo-dark-mode em,
body.hangoo-dark-mode i,
body.hangoo-dark-mode output,
body.hangoo-dark-mode summary {
  color: #f8fafc !important;
}

body.hangoo-dark-mode .hint,
body.hangoo-dark-mode .meta,
body.hangoo-dark-mode .muted,
body.hangoo-dark-mode .info,
body.hangoo-dark-mode .subtitle,
body.hangoo-dark-mode .description,
body.hangoo-dark-mode .descricao,
body.hangoo-dark-mode .field label,
body.hangoo-dark-mode .campo label,
body.hangoo-dark-mode .campo small,
body.hangoo-dark-mode .card-label,
body.hangoo-dark-mode .eyebrow,
body.hangoo-dark-mode .row dt,
body.hangoo-dark-mode .row dd,
body.hangoo-dark-mode [class*="hint"],
body.hangoo-dark-mode [class*="meta"],
body.hangoo-dark-mode [class*="muted"],
body.hangoo-dark-mode [class*="info"],
body.hangoo-dark-mode [class*="label"],
body.hangoo-dark-mode [class*="descricao"],
body.hangoo-dark-mode [class*="description"],
body.hangoo-dark-mode [class*="status-text"],
body.hangoo-dark-mode [class*="subtitle"] {
  color: #f8fafc !important;
  opacity: 1 !important;
}

body.hangoo-dark-mode [style*="color: #64748b"],
body.hangoo-dark-mode [style*="color:#64748b"],
body.hangoo-dark-mode [style*="color: #6b7280"],
body.hangoo-dark-mode [style*="color:#6b7280"],
body.hangoo-dark-mode [style*="color: #475569"],
body.hangoo-dark-mode [style*="color:#475569"],
body.hangoo-dark-mode [style*="color: #334155"],
body.hangoo-dark-mode [style*="color:#334155"] {
  color: #f8fafc !important;
}

body.hangoo-dark-mode .card *,
body.hangoo-dark-mode [class*="-card"] *,
body.hangoo-dark-mode [class*="Card"] *,
body.hangoo-dark-mode .dashboard-grid article *,
body.hangoo-dark-mode .chart-card *,
body.hangoo-dark-mode .caixa-kpi *,
body.hangoo-dark-mode .quick-card *,
body.hangoo-dark-mode .config-geral-card *,
body.hangoo-dark-mode .method-toggle *,
body.hangoo-dark-mode .logo-card *,
body.hangoo-dark-mode .logo-preview-wrap *,
body.hangoo-dark-mode .rede-item *,
body.hangoo-dark-mode .tema *,
body.hangoo-dark-mode .cardLocalizacao *,
body.hangoo-dark-mode .produto-card *,
body.hangoo-dark-mode .produto-card-admin *,
body.hangoo-dark-mode #listaProdutos > div *,
body.hangoo-dark-mode .pedido *,
body.hangoo-dark-mode .pedido-card *,
body.hangoo-dark-mode .card-historico *,
body.hangoo-dark-mode .detalhes-pedido *,
body.hangoo-dark-mode .pedido-detalhes *,
body.hangoo-dark-mode .cupom-card *,
body.hangoo-dark-mode .entrega-card *,
body.hangoo-dark-mode .entregador-card *,
body.hangoo-dark-mode .acerto-card *,
body.hangoo-dark-mode .caixa-card *,
body.hangoo-dark-mode .caixa-section *,
body.hangoo-dark-mode .caixa-status *,
body.hangoo-dark-mode .caixa-abertura *,
body.hangoo-dark-mode .caixa-fechamento *,
body.hangoo-dark-mode .caixa-relatorios *,
body.hangoo-dark-mode .caixa-resumo-grid > div *,
body.hangoo-dark-mode .mesa-card *,
body.hangoo-dark-mode .mesa-pedidos-card *,
body.hangoo-dark-mode .mesa-aberta-card *,
body.hangoo-dark-mode .fechamento-card *,
body.hangoo-dark-mode .adicional-card *,
body.hangoo-dark-mode .add-card *,
body.hangoo-dark-mode .upload-panel *,
body.hangoo-dark-mode .preview-item *,
body.hangoo-dark-mode .checkbox-item *,
body.hangoo-dark-mode .rule-card *,
body.hangoo-dark-mode .message-card *,
body.hangoo-dark-mode .message-item *,
body.hangoo-dark-mode .conversa-card *,
body.hangoo-dark-mode .chat-card *,
body.hangoo-dark-mode .qr-card *,
body.hangoo-dark-mode .qr-item *,
body.hangoo-dark-mode .modal-content *,
body.hangoo-dark-mode .modal-conteudo *,
body.hangoo-dark-mode .grafico-modal-box *,
body.hangoo-dark-mode .popup *,
body.hangoo-dark-mode .popup-content *,
body.hangoo-dark-mode .popup-box *,
body.hangoo-dark-mode .pagamento-detalhes *,
body.hangoo-dark-mode .modal-caixa-online-box *,
body.hangoo-dark-mode .modal-online-hero *,
body.hangoo-dark-mode .modal-online-grid div *,
body.hangoo-dark-mode .modal-online-retiradas *,
body.hangoo-dark-mode .filtros-periodo *,
body.hangoo-dark-mode .caixa-toolbar *,
body.hangoo-dark-mode .grafico-linha-resumo * {
  color: #f8fafc !important;
}

body.hangoo-dark-mode .produto-destaque {
  background: rgba(249, 115, 22, 0.2) !important;
  color: #fed7aa !important;
}

body.hangoo-dark-mode input,
body.hangoo-dark-mode select,
body.hangoo-dark-mode textarea {
  border-color: rgba(148, 163, 184, 0.34) !important;
  background: #020617 !important;
  color: #f8fafc !important;
}

body.hangoo-dark-mode input::placeholder,
body.hangoo-dark-mode textarea::placeholder {
  color: #94a3b8 !important;
}

body.hangoo-dark-mode button,
body.hangoo-dark-mode .btn,
body.hangoo-dark-mode .nav-btn {
  border-color: rgba(148, 163, 184, 0.28);
}

body.hangoo-dark-mode .card button:not(.btn-primary):not(.primary):not(.salvar):not(.btn-salvar):not(.btn-ai):not(.btn-editar):not(.btn-toggle):not(.btn-delete):not(.edit):not(.delete):not(.btn-excluir):not(.btn-danger):not(.danger):not(.pix):not(.card-pay):not(.btn-compartilhar-produto):not(.btn-editar-produto):not(.btn-excluir-produto),
body.hangoo-dark-mode [class*="-card"] button:not(.btn-primary):not(.primary):not(.salvar):not(.btn-salvar):not(.btn-ai):not(.btn-editar):not(.btn-toggle):not(.btn-delete):not(.edit):not(.delete):not(.btn-excluir):not(.btn-danger):not(.danger):not(.pix):not(.card-pay):not(.btn-compartilhar-produto):not(.btn-editar-produto):not(.btn-excluir-produto),
body.hangoo-dark-mode .modal-content button:not(.btn-primary):not(.primary):not(.btn-danger):not(.danger),
body.hangoo-dark-mode .modal-conteudo button:not(.btn-primary):not(.primary):not(.btn-danger):not(.danger),
body.hangoo-dark-mode .popup button:not(.btn-primary):not(.primary):not(.btn-danger):not(.danger),
body.hangoo-dark-mode .popup-content button:not(.btn-primary):not(.primary):not(.btn-danger):not(.danger),
body.hangoo-dark-mode .caixa-tools button,
body.hangoo-dark-mode .caixa-toolbar button,
body.hangoo-dark-mode .export-actions button,
body.hangoo-dark-mode .grafico-actions button,
body.hangoo-dark-mode .filtros-periodo button:not(.active),
body.hangoo-dark-mode .card-buttons button:not(.btn-editar):not(.btn-toggle):not(.btn-delete):not(.btn-excluir):not(.btn-danger):not(.danger),
body.hangoo-dark-mode .rule-actions button:not(.edit):not(.delete):not(.btn-danger):not(.danger),
body.hangoo-dark-mode .message-meta button:not(.btn-danger):not(.danger),
body.hangoo-dark-mode .btn-danger-soft,
body.hangoo-dark-mode .btn-remover-destaque,
body.hangoo-dark-mode .btn-remover-add-imagem,
body.hangoo-dark-mode .mesa-toggle-btn {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

body.hangoo-dark-mode .filtros-periodo button.active,
body.hangoo-dark-mode .caixa-toolbar button.active {
  background: #f97316 !important;
  color: #ffffff !important;
  border-color: #f97316 !important;
}

body.hangoo-dark-mode .btn-primary,
body.hangoo-dark-mode .primary,
body.hangoo-dark-mode .salvar,
body.hangoo-dark-mode .btn-salvar,
body.hangoo-dark-mode .btn-ai,
body.hangoo-dark-mode .btn-editar,
body.hangoo-dark-mode .btn-toggle,
body.hangoo-dark-mode .btn-delete,
body.hangoo-dark-mode .btn-excluir,
body.hangoo-dark-mode .btn-danger,
body.hangoo-dark-mode .danger,
body.hangoo-dark-mode .edit,
body.hangoo-dark-mode .delete,
body.hangoo-dark-mode .btn-compartilhar-produto,
body.hangoo-dark-mode .btn-editar-produto,
body.hangoo-dark-mode .btn-excluir-produto,
body.hangoo-dark-mode .quick-card.pix,
body.hangoo-dark-mode .quick-card.card-pay,
body.hangoo-dark-mode .modal-actions button.danger,
body.hangoo-dark-mode .modal-actions button:not(.secondary),
body.hangoo-dark-mode .caixa-fechamento button,
body.hangoo-dark-mode .caixa-abertura button,
body.hangoo-dark-mode .retirada-form button,
body.hangoo-dark-mode .pagamentos button:not(.secondary),
body.hangoo-dark-mode .acoes button:not(.secondary) {
  color: #ffffff !important;
}

body.hangoo-dark-mode .btn-primary,
body.hangoo-dark-mode .primary,
body.hangoo-dark-mode .salvar,
body.hangoo-dark-mode .btn-salvar,
body.hangoo-dark-mode .btn-ai,
body.hangoo-dark-mode .btn-editar,
body.hangoo-dark-mode .btn-toggle,
body.hangoo-dark-mode .btn-delete,
body.hangoo-dark-mode .btn-excluir,
body.hangoo-dark-mode .btn-danger,
body.hangoo-dark-mode .danger,
body.hangoo-dark-mode .edit,
body.hangoo-dark-mode .delete,
body.hangoo-dark-mode .btn-compartilhar-produto,
body.hangoo-dark-mode .btn-editar-produto,
body.hangoo-dark-mode .btn-excluir-produto,
body.hangoo-dark-mode .quick-card.pix,
body.hangoo-dark-mode .quick-card.card-pay {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22) !important;
}

body.hangoo-dark-mode .btn-editar,
body.hangoo-dark-mode .btn-editar-produto,
body.hangoo-dark-mode .btn-toggle,
body.hangoo-dark-mode .edit {
  background: #2563eb !important;
}

body.hangoo-dark-mode .btn-excluir,
body.hangoo-dark-mode .btn-excluir-produto,
body.hangoo-dark-mode .btn-delete,
body.hangoo-dark-mode .btn-danger,
body.hangoo-dark-mode .danger,
body.hangoo-dark-mode .delete {
  background: #dc2626 !important;
}

body.hangoo-dark-mode .estado-vazio,
body.hangoo-dark-mode .empty-state,
body.hangoo-dark-mode .vazio {
  color: #f8fafc !important;
  background: rgba(15, 23, 42, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

body.hangoo-dark-mode a {
  color: #fb923c;
}

body.hangoo-dark-mode iframe {
  background: #0f172a;
}

/* Excecoes: controles pequenos e badges mantem leitura de modo claro. */
body.hangoo-dark-mode .btn-salvar-cat,
body.hangoo-dark-mode .btn-salvar-add {
  background: #dcfce7 !important;
  color: #047857 !important;
  border-color: rgba(4, 120, 87, 0.18) !important;
  box-shadow: none !important;
}

body.hangoo-dark-mode .btn-excluir-cat,
body.hangoo-dark-mode .btn-excluir-add {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.18) !important;
  box-shadow: none !important;
}

body.hangoo-dark-mode .status.entregue,
body.hangoo-dark-mode .status.entregue_e_pago {
  background: #dcfce7 !important;
  color: #047857 !important;
}

body.hangoo-dark-mode .status.cancelado {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

body.hangoo-dark-mode .gateway strong {
  color: #f8fafc !important;
}

body.hangoo-dark-mode .status.ativo,
body.hangoo-dark-mode .ativo {
  background: #dcfce7 !important;
  color: #047857 !important;
}

body.hangoo-dark-mode .status.inativo,
body.hangoo-dark-mode .inativo {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

body.hangoo-dark-mode .dia-item,
body.hangoo-dark-mode .dia-item * {
  background: #ffffff !important;
  color: #344054 !important;
}

body.hangoo-dark-mode .dia-item {
  border-color: var(--line, #d0d5dd) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

body.hangoo-dark-mode .dia-item.ativo {
  background: var(--accent-soft, #eef4ff) !important;
  border-color: rgba(37, 99, 235, 0.32) !important;
}

body.hangoo-dark-mode .dia-item.ativo * {
  background: transparent !important;
}

body.hangoo-dark-mode .mesa-card.livre .mesa-card-top span {
  background: #dcfce7 !important;
  color: #047857 !important;
}

body.hangoo-dark-mode .mesa-card.ocupada .mesa-card-top span {
  background: #ffedd5 !important;
  color: #9a3412 !important;
}

body.hangoo-dark-mode .caixa-card,
body.hangoo-dark-mode .caixa-resumo-grid > div,
body.hangoo-dark-mode .fechamento-card,
body.hangoo-dark-mode .retirada-caixa,
body.hangoo-dark-mode .retiradas-fechamento,
body.hangoo-dark-mode .retirada-item {
  background: rgba(15, 23, 42, 0.64) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body.hangoo-dark-mode .caixa-card strong,
body.hangoo-dark-mode .caixa-resumo-grid strong,
body.hangoo-dark-mode .fechamento-card strong,
body.hangoo-dark-mode .retirada-item b {
  color: #ffffff !important;
}

body.hangoo-dark-mode .fechamento-card.dinheiro strong,
body.hangoo-dark-mode .fechamento-card.pix strong,
body.hangoo-dark-mode .fechamento-card.cartao strong,
body.hangoo-dark-mode .fechamento-card.gaveta strong,
body.hangoo-dark-mode .caixa-resumo-grid > div strong,
body.hangoo-dark-mode .caixa-card strong,
body.hangoo-dark-mode .retirada-caixa strong {
  color: #86efac !important;
}

body.hangoo-dark-mode .fechamento-card.retirada strong,
body.hangoo-dark-mode .fechamento-card.frete strong,
body.hangoo-dark-mode .retirada-item b {
  color: #fca5a5 !important;
}

@media (max-width: 720px) {
  .dark-mode-control {
    width: max-content;
  }

  .dashboard-grid,
  .charts-grid,
  .caixa-resumo-grid,
  .caixa-analises-grid,
  .grid-entregas,
  .redes,
  .ad-upload-grid,
  .mesas-grid,
  .caixa-resumo-grid,
  .modal-online-grid,
  .mesa-detail-grid,
  .produto-grid,
  #listaProdutos,
  .lista-entregadores {
    grid-template-columns: 1fr !important;
  }

  .card-buttons,
  .produto-card-actions,
  .modal-actions,
  .mesa-modal-actions,
  .caixa-actions,
  .export-actions,
  .caixa-toolbar,
  .botoes-entrega,
  .ad-actions,
  .rule-actions {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .card-buttons button,
  .produto-card-actions button,
  .modal-actions button,
  .mesa-modal-actions button,
  .caixa-actions button,
  .export-actions button,
  .caixa-toolbar button,
  .botoes-entrega button,
  .ad-actions button,
  .rule-actions button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  body.hangoo-dark-mode .card,
  body.hangoo-dark-mode [class*="-card"],
  body.hangoo-dark-mode [class*="Card"],
  body.hangoo-dark-mode .modal-content,
  body.hangoo-dark-mode .modal-conteudo,
  body.hangoo-dark-mode .popup-content {
    max-width: 100%;
  }
}