/* =========================
   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;
}

/* IMPORTANTE: Remover overrides genéricos que afetavam status
   (NÃO use estas regras!)
   .text-success { color:#fff !important; }
   .textgreen, .statusA { color:#fff !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;
}

/* ====== ANIMAÇÃO GANGORRA NA LOGO ====== */

/* Se sua logo está dentro de um elemento com classe .navbar-brand ou .logo, pode usar um desses: */
.navbar-brand img,
.logo img {
  animation: gangorra 3s ease-in-out infinite; /* duração média e looping infinito */
  transform-origin: center bottom; /* ponto de rotação */
}

/* Movimento de gangorra suave */
@keyframes gangorra {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}


/* ===== DOBRAR TAMANHO DA LOGO (mantendo menu no mesmo estilo) ===== */

.navbar-brand img,
.logo img {
  height: 100px !important;   /* ajuste conforme necessário: padrão anterior ≈50px */
  width: auto !important;
  object-fit: contain;
  transform-origin: center bottom;
  animation: gangorra 3s ease-in-out infinite;
}

/* mantém barra azul no mesmo estilo */
.header-bottom,
.header-color,
.page-index header.navbar-shrink,
.navbar {
  background: #0B84E5 !important;
  color: #fff !important;
}

/* mantém animação suave da logo */
@keyframes gangorra {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* ===== LOGO 2x (sem mexer no menu) + gangorra ===== */

/* 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;

  /* animação */
  animation: gangorra 3s ease-in-out infinite;
  transform-origin: center bottom;
}

/* 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;
  }
}

/* NÃO DUPLICAR: keyframes único da gangorra */
@keyframes gangorra {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}