/* =========================
   Paleta e elementos gerais
   ========================= */
.header-bottom,
.modal-header,
.bg-primary,
.footer-top .link-heading:after,
.chosen-container .chosen-results li.highlighted,
.page-index header.navbar-shrink,
.steps ul li.first a,
.steps ul li.checked a {
  background: #0B84E5 !important;
}

a,
.text-muted,
.h1, .h2, .h3, .h4, .h5, .h6,
h3.title,
.btn-addtocart,
.card-product:hover .service-name,
.page-link,
ul.nav-pills.flex-nowrap .nav-link.active,
.double-border h5 {
  color: #000;
}

.text-muted { opacity: 0.8; }

.modal-menu .modal-header,
.cartminiview .badge-success,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
button.btn.btn-primary,
.wizard .actions li a,
.bg-secondary,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.navbar-expand-lg .navbar-nav .nav-item .nav-link:not(.bg-secondary)::before {
  background: #00BDFE !important;
  color: #fff;
}

.themedefault { background-image: linear-gradient(90deg, #0d83e5 0%, #04befe 100%); }

.bg-light { background: #0d83e51a !important; }

.card-product:hover,
ul.nav-pills.flex-nowrap .nav-link.active,
h3.title span,
.price-details table td.double-border {
  border-color: #00BDFE;
}

.form-control:focus {
  border-color: #0B84E5;
  box-shadow: 0 0 0 0.2rem rgba(13, 131, 229, 0.18);
}

.header-color { background: #0B84E5eb; }

/* ==========================================
   Saldo (apenas aqui o texto fica em branco)
   ========================================== */
/* Estrutura típica: .app-content-header .current-balance h3 .balance */
.app-content-header .current-balance h3,
.app-content-header .current-balance .balance {
  color: #ffffff !important;
}

.app-content-header .current-balance small {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================
   Status dos pedidos (texto em MAIÚSCULAS)
   ========================================== */
.statusA,  /* SUCESSO */
.statusR,  /* REJEITADO */
.statusP,  /* PENDENTE */
.statusY { /* EM ANDAMENTO (exemplo) */
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: 600;
  padding: 2px 6px;
  display: inline-block;
  line-height: 1.2;
}

/* SUCESSO: letras verdes (fundo clarinho para destacar) */
.statusA {
  background: #e9fce9 !important;
  color: #28a745 !important;
  border: 1px solid #28a745 !important;
}

/* REJEITADO: mantém padrão branco no texto com fundo vermelho */
.statusR {
  background: #dc3545 !important;
  color: #ffffff !important;
  border: 1px solid #dc3545 !important;
}

/* PENDENTE: mantém padrão branco no texto com fundo azul */
.statusP {
  background: #007bff !important;
  color: #ffffff !important;
  border: 1px solid #007bff !important;
}

/* EM ANDAMENTO (ou equivalente): branco no texto com fundo laranja */
.statusY {
  background: #fd7e14 !important;
  color: #ffffff !important;
  border: 1px solid #fd7e14 !important;
}

/* =================================================
   Rodapé: esconder "Powered by Dhru Fusion" (div.cn)
   ================================================= */
div.cn {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* =========================
   Botão flutuante WhatsApp
   ========================= */
.btn-whatsapp {
  position: fixed;
  bottom: 70px;   /* ajuste para “o mais em baixo possível” sem colar no canto */
  right: 10px;
  background: #25D366;
  color: #fff;
  font-size: 16px;
  padding: 12px 18px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-whatsapp:hover {
  background: #1ebe5d;
  color: #fff;
  text-decoration: none;
}

/* ===== LOGO 2x (sem mexer no menu) – SEM ANIMAÇÃO ===== */

/* tamanhos ideais (ajuste se quiser) */
:root{
  --logo-h-desktop: 90px;   /* dobre aqui: 80–100px */
  --logo-h-mobile:  64px;   /* menor no mobile pra não estourar a barra */
}

/* pega as variações comuns do tema */
header .navbar-brand > img,
.header-bottom .navbar-brand > img,
.header-color .navbar-brand > img,
.navbar .navbar-brand > img,
a.navbar-brand > img,
.navbar-brand img,
.logo img {
  height: var(--logo-h-desktop) !important;
  max-height: var(--logo-h-desktop) !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* mobile: reduz um pouco para não quebrar o header */
@media (max-width: 992px){
  header .navbar-brand > img,
  .header-bottom .navbar-brand > img,
  .header-color .navbar-brand > img,
  .navbar .navbar-brand > img,
  a.navbar-brand > img,
  .navbar-brand img,
  .logo img {
    height: var(--logo-h-mobile) !important;
    max-height: var(--logo-h-mobile) !important;
  }
}

/* ================================
   CORREÇÃO ABAS NAV-PILLS (GERAL)
   ================================ */

/* estilo base das abas */
ul.nav-pills.flex-nowrap .nav-link {
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #555a6b !important;       /* texto cinza quando NÃO está ativo */
  background: transparent !important;
  border: 1px solid transparent;
}

/* aba ATIVA – fica com fundo azul e texto branco, funciona em fundo branco também */
ul.nav-pills.flex-nowrap .nav-link.active,
ul.nav-pills.flex-nowrap .show > .nav-link {
  background: #0B84E5 !important;  /* azul cheio */
  border-color: #0B84E5 !important;
  color: #ffffff !important;       /* texto branco */
}


/* ==========================================
   VIEW ORDER – Valor e Quantidade em destaque
   ========================================== */

/* Valor da ordem (ex.: R$ 99,50) */
.view-order-amount {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid #0B84E5;   /* borda azul */
  border-radius: 6px;
  background: #ffffff;          /* fundo branco */
  color: #000000;               /* texto preto */
  font-weight: 700;
  font-size: 16px;
}

/* Quantidade (ex.: QTY: 1) */
.view-order-qty {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid #0B84E5;   /* borda azul mais fina */
  border-radius: 4px;
  background: #ffffff;
  color: #000000;
  font-weight: 600;
  font-size: 13px;
  margin-left: 6px;            /* pequeno espaçamento do valor */
}


/* ==========================================
   VIEW ORDER – Valor e QTY em destaque
   (força dentro dos modais)
   ========================================== */

/* Qualquer texto azul dentro do MODAL vira preto com borda azul */
.modal .text-info,
.modal .text-primary {
  display: inline-block;
  padding: 3px 10px;
  border: 2px solid #0B84E5;   /* borda azul */
  border-radius: 6px;
  background: #ffffff;          /* fundo branco */
  color: #000000 !important;    /* texto preto */
  font-weight: 700;
  text-shadow: none !important; /* tira o glow azul */
}
/* ==========================================
   VIEW ORDER – Forçar textos do modal em preto
   ========================================== */

/* Deixa TUDO que está no corpo do modal em preto, sem brilho azul */
.modal .modal-body,
.modal .modal-body * {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Se o valor/QTY estiverem em h3/h4/h5, reforça o destaque */
.modal .modal-body h3,
.modal .modal-body h4 {
  font-weight: 700;
}

/* Opcional: se quiser borda azul nos números (QTY e Valor), 
   normalmente são os maiores textos dentro do modal  */
.modal .modal-body h3,
.modal .modal-body h4 {
  display: inline-block;
  padding: 3px 10px;
  border: 2px solid #0B84E5;
  border-radius: 6px;
  background: #ffffff;
}

/* Garante que os badges de status continuem com as cores certas */
.modal .statusA,
.modal .statusR,
.modal .statusP,
.modal .statusY {
  color: #ffffff !impor

/* Esconde qualquer opção de "Modo de tema" que tenha preview escuro/preto */
.modal-theme-settings img[src*="dark"],
.modal-theme-settings [class*="dark-preview"],
.modal-theme-settings .theme-mode-dark {
  display: none !important;
}

/* Esconde qualquer opção de "Modo de tema" que tenha preview escuro/preto */
.modal-theme-settings img[src*="dark"],
.modal-theme-settings [class*="dark-preview"],
.modal-theme-settings .theme-mode-dark {
  display: none !important;
}

/* fallback visual: 2º item do primeiro grupo (Modo de tema) */
.modal-theme-settings .card:first-of-type .col-6:nth-child(2),
.modal-theme-settings .card:first-of-type [class*="col"]:nth-child(2) {
  display: none !important;
}