body {
  font-family: 'Montserrat', sans-serif;
}

:root {
  --blascor-blue: #3a56a3;
  --blascor-yellow: #fff212;
}

.text-blascor-blue {
  color: var(--blascor-blue);
}

.bg-blascor-blue {
  background-color: var(--blascor-blue);
}

.bg-blascor-yellow {
  background-color: var(--blascor-yellow);
}

.text-blascor-yellow {
  color: var(--blascor-yellow);
}

/* Estilos do menu/drawer */
#submenu-utilitarios,
#submenu-produtos {
  background-color: #3a56a3 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

#menu-utilitarios:hover>a,
#menu-produtos:hover>a {
  color: var(--blascor-yellow);
}

#submenu-utilitarios a:hover,
#submenu-produtos a:hover {
  color: var(--blascor-yellow) !important;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

#mobile-drawer {
  background-color: #3a56a3;
  border-left: 2px solid #fff212;
}

.translate-x-full {
  transform: translateX(100%);
}

.translate-x-0 {
  transform: translateX(0);
}

.transition-transform {
  transition: transform 0.3s ease;
}

body.drawer-open {
  overflow: hidden;
}

body.drawer-open #drawer-overlay {
  display: block;
}

#drawer-overlay {
  display: none;
}

/* static/css/detalhe_produto.css */

/* Adicione este bloco no final do arquivo */
.active-thumbnail {
  border-color: var(--blascor-blue); /* Usa a cor azul da sua marca */
  border-width: 3px !important;     /* Garante que a borda seja visível */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* static/css/editarProduto.css */

/* Adicione no final do arquivo */
.chip-card-embalagem {
    display: grid;
    grid-template-areas:
        "image name remove"
        "image action action";
    grid-template-columns: 60px 1fr auto;
    gap: 8px 12px;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    background: var(--glass);
    border: var(--border);
    width: 100%;
}

.chip-card-embalagem img {
    grid-area: image;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: var(--border);
    background: var(--bg);
}

.chip-card-embalagem .name {
    grid-area: name;
    font-weight: 500;
}

.chip-card-embalagem .remove {
    grid-area: remove;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--danger);
    font-size: 16px;
    line-height: 1;
}

.chip-card-embalagem .action-label {
    grid-area: action;
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    border-radius: 8px;
    background-color: var(--primary);
    color: white;
}
.chip-card-embalagem .action-label:hover {
    background-color: var(--primary-600);
}
.chip-card-embalagem .action-label.loading {
    cursor: not-allowed;
    background-color: var(--muted);
}

    /* Estilos específicos para o botão de coração nesta página */
    .like-btn .fa-heart {
      color: #9ca3af; /* Cor cinza padrão (Tailwind gray-400) */
      font-weight: 400; /* Garante que o ícone comece "vazio" */
      transition: all 0.2s ease-in-out; /* Adicionado para uma transição suave */
    }

    .like-btn.liked .fa-heart {
      color: #e31b23 !important;   /* VERMELHO */
      font-weight: 900 !important; /* SÓLIDO (preenchido) */
    }

    /* Opcional: Efeito de hover */
    .like-btn:hover .fa-heart {
        transform: scale(1.2); /* Aumenta um pouco ao passar o mouse */
        color: #e31b23; /* Já fica vermelho no hover, mesmo se não estiver liked */
    }