html,
body {
  margin: 0;
  padding: 0;
}

html.dark,
html.dark body,
body.dark {
  background-color: #000 !important;
  color: #fff;
}

html.light,
html.light body,
body.light {
  background-color: #fff;
  color: #111;
}

.top-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.top-esquerda {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-instagram,
.btn-tema,
.carrinho-area {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  position: relative;
}

.icon-topo,
.btn-tema img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.menu-bottom {
  background: #fff;
  border-top: 1px solid #ddd;
}

.menu-item .icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.menu-item span {
  color: #111;
}

.menu-item.active span {
  color: #ff0000;
}

/* DARK */
html.dark,
body.dark {
  background: #000000 !important;
  color: #fff;
}

body.dark .topo,
body.dark .categorias,
body.dark #statusLoja,
body.dark .menu-bottom {
  background: #000000 !important;
}

body.dark .card-produto {
  background: #1d1d1f !important;
  color: #fff !important;
}

body.dark .info-produto p {
  color: #cfcfcf !important;
}

body.dark .btn-instagram,
body.dark .btn-tema,
body.dark .carrinho-area {
  background: #1d1d1d;
}

body.dark .menu-bottom {
  border-top: 1px solid #2a2a2a;
}

body.dark .menu-item span {
  color: #fff;
}

body.dark .menu-item.active span {
  color: #ff5b00;
}

/* REMOVE FUNDO BRANCO */
body.dark {
  background: #000 !important;
}

/* ÁREA DOS PRODUTOS */
body.dark .lista-produtos {
  background: #000 !important;
}

/* CATEGORIAS */
body.dark .categorias {
  background: #000 !important;
  border-bottom: 1px solid #1f1f1f;
}

/* TEXO DAS CATEGORIAS */
body.dark .categorias button {
  color: #fff !important;
}

/* CATEGORIA ATIVA */
body.dark .categorias button.active {
  color: #ff5b00 !important;
  border-bottom: 2px solid #ff5b00;
}

/* MENU */
body.dark .menu-bottom {
  background: #0f0f0f !important;
}

/* ÍCONES MENU */
body.dark .menu-item span {
  color: #fff !important;
}

body.dark .menu-item.active span {
  color: #ff5b00 !important;
}

body.dark .card-produto {
  background: linear-gradient(
    180deg,
    #1a1a1d,
    #121214
  ) !important;

  border: 1px solid #232323;
}

/* REMOVE ÁREA BRANCA */
body.dark .app {
  background: #000 !important;
  min-height: 100vh;
}

/* QUALQUER CONTAINER CLARO */
body.dark main,
body.dark section,
body.dark div,
body.dark nav {
  border-color: #222;
}

/* LINHA ABAIXO DO ABERTO */
body.dark #statusLoja {
  border-bottom: 1px solid #2a2a2a !important;
}

/* REMOVE LINHA BRANCA */
body.dark hr {
  border-color: #2a2a2a !important;
  background: #2a2a2a !important;
}
html.dark .app,
body.dark .app {
  background: #000 !important;
}
body.dark #statusLoja {
  border-bottom: 1px solid #333 !important;
}



/* =========================
   PRODUTO - DARK MODE
========================= */

body.dark .produto-container,
body.dark .produto-card,
body.dark .produto-detalhes,
body.dark .produto-info,
body.dark .area-observacao,
body.dark .grupo-adicionais,
body.dark .card-adicional,
body.dark .modal-produto,
body.dark .conteudo-produto {
  background: #161618 !important;
  color: #fff !important;
  border-color: #2d2d2d !important;
}

/* descrição */
body.dark .produto-info p,
body.dark .produto-descricao,
body.dark .descricao-produto {
  color: #d0d0d0 !important;
}

/* textarea */
body.dark textarea,
body.dark .textarea-observacao {
  background: #1f1f22 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}

body.dark textarea::placeholder {
  color: #9e9e9e !important;
}

/* adicionais */
body.dark .btn-adicionais,
body.dark .titulo-adicionais {
  background: #232326 !important;
  color: #fff !important;
}

/* inputs quantidade */
body.dark input {
  background: #1f1f22 !important;
  color: #fff !important;
}

/* linha */
body.dark hr {
  border-color: #2a2a2a !important;
}

/* fundo da página */
body.dark .app,
body.dark body,
body.dark html {
  background: #000 !important;
}

/* FUNDO PRINCIPAL DO PRODUTO */
body.dark .container-produto,
body.dark .produto-wrapper,
body.dark .produto-box,
body.dark .produto-content,
body.dark .produto-main {
  background: #121214 !important;
}

/* CARD GRANDE */
body.dark .produto-card {
  background: #1a1a1d !important;
}

/* ÁREA BRANCA EMBAIXO */
body.dark .produto-infos,
body.dark .produto-acoes,
body.dark .area-finalizacao {
  background: #1a1a1d !important;
}
body.dark .card {
  background: #1a1a1d !important;
  border: 1px solid #2a2a2a !important;
}
/* BOTÃO VOLTAR */
body.dark .btn-voltar,
body.dark .voltar,
body.dark .icone-voltar,
body.dark .seta-voltar {
  color: #fff !important;
  fill: #fff !important;
}

/* CASO SEJA IMG */
body.dark .btn-voltar img,
body.dark .voltar img {
  filter: brightness(0) invert(1);
}

/* CARRINHO LARANJA */
body.dark .carrinho-area img,
body.dark #iconeCarrinho {
  filter:
    brightness(0)
    saturate(100%)
    invert(52%)
    sepia(97%)
    saturate(1818%)
    hue-rotate(360deg)
    brightness(101%)
    contrast(103%);
}

/* =========================
   MODAL CARRINHO - DARK
========================= */

body.dark .modal-conteudo {
  background: #151518 !important;
  color: #fff !important;
  border: 1px solid #2a2a2a;
}

body.dark .modal-topo {
  border-bottom: 1px solid #2a2a2a;
}

body.dark .modal-topo h3,
body.dark .modal-topo button {
  color: #fff !important;
}

body.dark .item-carrinho-modal {
  border-bottom: 1px solid #2a2a2a !important;
}

body.dark .item-carrinho-modal p,
body.dark .item-carrinho-modal span,
body.dark .item-carrinho-modal strong {
  color: #fff !important;
}

body.dark .modal-total {
  border-top: 1px solid #2a2a2a;
  color: #fff !important;
}

body.dark .btn-finalizar-carrinho {
  background: #ff5b00 !important;
  color: #fff !important;
}

body.dark #fecharCarrinho {
  color: #fff !important;
}

/* fundo escuro atrás */
body.dark .modal-carrinho {
  background: rgba(0,0,0,.7);
}


/* =========================
   CARRINHO - DARK MODE
========================= */

body.dark .conteudo-carrinho,
body.dark .card-dados,
body.dark .box-pagamento,
body.dark .resumo-carrinho,
body.dark .item-carrinho,
body.dark .area-total,
body.dark .pagamento-item,
body.dark .tipo-entrega,
body.dark .campo,
body.dark .linha-campos {
  background: #151518 !important;
  color: #fff !important;
  border-color: #2a2a2a !important;
}

/* INPUTS */
body.dark input,
body.dark textarea,
body.dark select {
  background: #1d1d1f !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}

/* PLACEHOLDER */
body.dark input::placeholder,
body.dark textarea::placeholder {
  color: #9e9e9e !important;
}

/* TOTAL */
body.dark .areaTotalCarrinho,
body.dark #areaTotalCarrinho,
body.dark .resumo-total {
  background: #151518 !important;
  color: #fff !important;
}

/* ITENS */
body.dark .item-carrinho {
  background: #1b1b1f !important;
}

/* TEXTOS */
body.dark .item-carrinho p,
body.dark .item-carrinho span,
body.dark .item-carrinho strong,
body.dark .box-pagamento p,
body.dark .box-pagamento span,
body.dark .box-pagamento h3,
body.dark .titulo-carrinho {
  color: #fff !important;
}

/* LINHAS */
body.dark hr {
  border-color: #2a2a2a !important;
}

/* BOTÃO FINALIZAR */
body.dark .btn-finalizar,
body.dark .btn-enviar-pedido,
body.dark #btnEnviarPedido {
  background: #ff5b00 !important;
  color: #fff !important;
}

/* ENTREGA/RETIRADA */
body.dark .tipo-entrega button {
  background: #1d1d1f !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}

body.dark .tipo-entrega button.active {
  background: #ff5b00 !important;
  color: #fff !important;
}

/* BOTÃO EDITAR */
body.dark .btn-editar {
  background: #232326 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}

/* ÁREA PAGAMENTO */
body.dark .box-pagamento,
body.dark .forma-pagamento,
body.dark .pagamento-box,
body.dark .lista-pagamentos {
  background: #151518 !important;
  border: 1px solid #2a2a2a !important;
}

/* ITEM PAGAMENTO */
body.dark .pagamento-item,
body.dark .opcao-pagamento,
body.dark .item-pagamento {
  background: #1b1b1f !important;
  border-bottom: 1px solid #2a2a2a !important;
}

/* TEXTOS */
body.dark .pagamento-item h4,
body.dark .pagamento-item p,
body.dark .pagamento-item span {
  color: #fff !important;
}

/* ÍCONE SETA */
body.dark .pagamento-item i,
body.dark .pagamento-item svg {
  color: #ff5b00 !important;
}

body.dark .pagamento h3,
body.dark .forma-pagamento h3,
body.dark .pagamento-box h3 {
  background: #151518 !important;
  color: #fff !important;
  border-bottom: 1px solid #2a2a2a !important;
}

body.dark .pagamento {
  background: #151518 !important;
  overflow: hidden;
}

body.dark .opcao-pagamento {
  background: #1b1b1f !important;
  color: #fff !important;
}

body.dark .opcao-pagamento strong {
  color: #fff !important;
}

body.dark .opcao-pagamento small {
  color: #aaa !important;
}

/* BOTÃO EDITAR */
body.dark .editar,
body.dark .btn-editar {
  background: transparent !important;
  border: none !important;
  color: #ff5b00 !important;
  box-shadow: none !important;
}

/* LIXEIRA */
body.dark .btn-lixeira,
body.dark .btn-excluir {
  color: #fff !important;
  filter: brightness(0) invert(1);
  background: transparent !important;
  border: none !important;
}

/* CONTROLE QUANTIDADE */
body.dark .controle-qtd {
  background: transparent !important;
  border: 1px solid #2a2a2a !important;
}

/* NÚMERO */
body.dark .controle-qtd span {
  color: #fff !important;
}

/* + e - */
body.dark .controle-qtd button {
  background: transparent !important;
  color: #ff5b00 !important;
  border: none !important;
}
/* ÍCONES INPUTS NO DARK */
body.dark .icon-input {
  filter: brightness(0) invert(1);
}

body.dark .tipo-entrega button.ativo {
  background: #ff5b00 !important;
  color: #fff !important;
  border-color: #ff5b00 !important;
}

.tipo-entrega button.ativo {
  background: #ff5b00 !important;
  color: #fff !important;
  border-color: #ff5b00 !important;
}

/* =========================
   PEDIDOS - DARK MODE
========================= */

/* CARD PEDIDO */
body.dark .pedido-card,
body.dark .card-pedido,
body.dark .pedido-item {
  background: #151518 !important;
  color: #fff !important;
  border: 1px solid #2a2a2a !important;
}

/* TEXTOS */
body.dark .pedido-card h3,
body.dark .pedido-card p,
body.dark .pedido-card span,
body.dark .pedido-card strong {
  color: #fff !important;
}

/* LINHAS */
body.dark .pedido-card hr {
  border-color: #2a2a2a !important;
}

/* STATUS */
body.dark .status-label {
  color: #cfcfcf !important;
}

/* BOTOES */
body.dark .btn-whatsapp,
body.dark .btn-localizacao,
body.dark .btn-concluir {
  border: none !important;
}

body.dark .btn-whatsapp,
body.dark .btn-localizacao {
  background: #232326 !important;
  color: #fff !important;
}

body.dark .btn-concluir {
  background: #ff5b00 !important;
  color: #fff !important;
}

/* AVISO */
body.dark .alerta-pedido,
body.dark .aviso-pedido {
  background: rgba(255,91,0,.08) !important;
  border: 1px solid #ff5b00 !important;
  color: #ffb27d !important;
}

/* TABS */
body.dark .tabs button,
body.dark .filtro-pedidos button {
  background: #1d1d1f !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}

body.dark .tabs button.active,
body.dark .filtro-pedidos button.active,
body.dark .tabs button.ativo,
body.dark .filtro-pedidos button.ativo {
  background: #ff5b00 !important;
  color: #fff !important;
  border-color: #ff5b00 !important;
}

/* =========================
   PERFIL - DARK MODE
========================= */

body.dark .perfil-card,
body.dark .card-perfil,
body.dark .perfil-info,
body.dark .item-perfil,
body.dark .menu-perfil {
  background: #151518 !important;
  color: #fff !important;
  border: 1px solid #2a2a2a !important;
}

/* TEXTOS */
body.dark .perfil-card h2,
body.dark .perfil-card p,
body.dark .perfil-card span,
body.dark .item-perfil span {
  color: #fff !important;
}

/* ÍCONES */
body.dark .item-perfil img,
body.dark .perfil-card img,
body.dark .icone-perfil {
  filter: brightness(0) invert(1);
}

/* BOTÃO EDITAR */
body.dark .btn-editar-perfil,
body.dark .editar-perfil {
  background: #232326 !important;
  color: #ff5b00 !important;
  border: 1px solid #333 !important;
}

/* BOTÃO SAIR */
body.dark .btn-sair {
  background: #c40000 !important;
  color: #fff !important;
}

body.dark .pedido-card h3,
body.dark .card-pedido h3 {
  color: #ff5b00 !important;
}

/* BADGES */
.badge,
.badge-menu,
#badgeCarrinho,
#badgePedidos {
  color: #fff !important;
  font-weight: 700;
}

/* LOGIN*/
.login-tema {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 999;
}

body.dark .container,
body.dark .login-box {
  background: #000 !important;
  color: #fff !important;
}

body.dark .input-group {
  background: #151518 !important;
  border: 1px solid #333 !important;
}

body.dark .input-group input {
  background: transparent !important;
  color: #fff !important;
}

body.dark .input-group input::placeholder {
  color: #aaa !important;
}

body.dark .input-group i {
  color: #fff !important;
}

body.dark .btn-primary {
  background: #ff5b00 !important;
  color: #fff !important;
}
body.dark .btn-register{
  background: #ff5b00 !important;
  color: #fff !important;
}
/* LOGIN - DARK */
body.dark .login-box {
  background: #000 !important;
}

body.dark .input-group {
  height: 46px;
  padding: 0 12px;
  border-radius: 8px;
  background: #151518 !important;
  border: 1px solid #333 !important;

  display: flex;
  align-items: center;
  gap: 10px;
}

body.dark .input-group input {
  width: 100%;
  height: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 16px;
}

body.dark .input-group input::placeholder {
  color: #aaa !important;
}

body.dark .input-group i {
  color: #fff !important;
}

body.dark h2 {
  color: #fff !important;
}

body.dark .btn-primary {
  background: #ff5b00 !important;
  color: #fff !important;
  border: none !important;
}

body.dark .link-esqueceu {
  color: #ff5b00 !important;
}
/* REMOVE AUTOFILL BRANCO */
body.dark input:-webkit-autofill,
body.dark input:-webkit-autofill:hover,
body.dark input:-webkit-autofill:focus,
body.dark input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #151518 inset !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  transition: background-color 9999s ease-in-out 0s;
}
body.dark .link,
body.dark .esqueci-senha,
body.dark a[href*="senha"] {
  color: #ff5b00 !important;
}

/* MODAL TERMOS - DARK */
body.dark .modal-content {
  background: #151518 !important;
  color: #fff !important;
  border: 1px solid #2a2a2a !important;
}

body.dark .modal-header,
body.dark .modal-footer {
  border-color: #2a2a2a !important;
}

body.dark .modal-body {
  background: #151518 !important;
  color: #fff !important;
}

body.dark .modal-body p,
body.dark .modal-body h4,
body.dark .modal-body h5 {
  color: #fff !important;
}

body.dark .fechar {
  color: #fff !important;
}

body.dark .btn-aceitar-termos {
  background: #ff5b00 !important;
  color: #fff !important;
}

body.dark .terms-box span {
  background: transparent !important;
  color: #ff5b00 !important;
}

/* BOTÃO ADICIONAIS */
body.dark .grupo-adicional button,
body.dark .btn-adicionais,
body.dark .toggle-adicionais {
  background: #ff5b00 !important;
  color: #fff !important;
  border: none !important;
}

/* CARD ADICIONAIS */
body.dark .item-adicional,
body.dark .adicional-item {
  background: #151518 !important;
  border: 1px solid #2a2a2a !important;
  color: #fff !important;
}

/* TEXTO ADICIONAL */
body.dark .item-adicional p,
body.dark .adicional-item p,
body.dark .item-adicional span,
body.dark .adicional-item span {
  color: #fff !important;
}

/* PREÇO */
body.dark .preco-adicional {
  color: #fff !important;
}

/* CONTADOR */
body.dark .controle-adicional {
  background: transparent !important;
  border: 1px solid #333 !important;
}

body.dark .controle-adicional button {
  background: transparent !important;
  color: #ff5b00 !important;
  border: none !important;
}

body.dark .controle-adicional span {
  color: #fff !important;
}

/* FECHAR ADICIONAIS */
body.dark .btn-fechar-adicionais {
  color: #ff5b00 !important;
}

/* TEXTAREA */
body.dark textarea {
  background: #151518 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}

/* LINHA DOS ADICIONAIS */
body.dark .linha-adicional {
  background: #151518 !important;
  color: #fff !important;
  border: 1px solid #2a2a2a !important;
}

body.dark .linha-adicional strong,
body.dark .linha-adicional span {
  color: #fff !important;
}

/* CONTROLE + E - */
body.dark .linha-adicional .controle-qtd {
  background: transparent !important;
  border: 1px solid #333 !important;
}

body.dark .linha-adicional .controle-qtd button {
  background: transparent !important;
  color: #ff5b00 !important;
  border: none !important;
}

body.dark .linha-adicional .controle-qtd span {
  color: #fff !important;
}


/* SWEETALERT - DARK MODE */
body.dark .swal2-popup {
  background: #151518 !important;
  color: #fff !important;
  border: 1px solid #2a2a2a !important;
}

body.dark .swal2-title {
  color: #fff !important;
}

body.dark .swal2-html-container {
  color: #dcdcdc !important;
}

body.dark .swal2-input,
body.dark .swal2-select,
body.dark .swal2-textarea {
  background: #1d1d1f !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}

body.dark .swal2-input::placeholder,
body.dark .swal2-textarea::placeholder {
  color: #999 !important;
}

body.dark .swal2-confirm {
  background: #ff5b00 !important;
  color: #fff !important;
}

body.dark .swal2-cancel,
body.dark .swal2-deny {
  background: #333 !important;
  color: #fff !important;
}

body.dark .swal2-icon.swal2-success {
  border-color: #00c853 !important;
  color: #00c853 !important;
}

body.dark .swal2-icon.swal2-question {
  border-color: #ff5b00 !important;
  color: #ff5b00 !important;
}

body.dark .swal2-icon.swal2-warning {
  border-color: #ffb300 !important;
  color: #ffb300 !important;
}


html.dark,
html.dark body,
body.dark {
  background-color: #000 !important;
}

html.dark .app,
body.dark .app {
  background-color: #000 !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* FORÇA O TEMA CLARO A LIMPAR O DARK */
html.light,
html.light body,
body.light {
  background: #fff !important;
  color: #111 !important;
}

html.light .app,
body.light .app,
html.light .topo,
body.light .topo,
html.light .categorias,
body.light .categorias,
html.light #statusLoja,
body.light #statusLoja,
html.light .lista-produtos,
body.light .lista-produtos,
html.light .menu-bottom,
body.light .menu-bottom {
  background: #fff !important;
  color: #111 !important;
  border-color: #ddd !important;
}

html.light .menu-item span,
body.light .menu-item span {
  color: #111 !important;
}

html.light .menu-item.active span,
body.light .menu-item.active span {
  color: #d00000 !important;
}

html.light .btn-instagram,
html.light .btn-tema,
html.light .carrinho-area,
body.light .btn-instagram,
body.light .btn-tema,
body.light .carrinho-area {
  background: #fff !important;
}

html.light .card-produto,
body.light .card-produto {
  background: #fff !important;
  color: #111 !important;
  border-color: transparent !important;
}

/* AVISO STATUS - DARK */
body.dark .aviso-status {
  background: linear-gradient(
    180deg,
    #1d1d1f,
    #121214
  ) !important;

  border: 1px solid #ff5b00 !important;
  color: #c29f88 !important;
  box-shadow: 0 0 10px rgba(255, 91, 0, 0.15);
}