/* ============================================================
   JochPlus ERP — Cores da marca nas páginas públicas do Frappe
   (loja, portal e formulários web)

   As páginas da loja são geradas pela app Webshop e não por nós, por
   isso aqui só se aplicam cores e espaçamentos sobre a estrutura que
   ela produz. Nada de mexer em posições: se a Webshop mudar o HTML
   numa actualização, as cores continuam a aplicar-se e no pior caso
   ficam sem efeito, sem partir a página.
   ============================================================ */

:root {
  --jp-azul:     #003087;
  --jp-azul-c:   #0057B8;
  --jp-dourado:  #C8A84B;
  --jp-fundo:    #F8F9FA;
  --jp-texto:    #1A1A1A;
  --jp-cinza:    #6C757D;
  --jp-borda:    #E3E8EF;
}

/* Variáveis do próprio Frappe: apanha os componentes que as respeitam
   sem ser preciso conhecer cada classe da Webshop */
:root {
  --primary:            var(--jp-azul);
  --primary-color:      var(--jp-azul);
  --text-color:         var(--jp-texto);
  --heading-color:      var(--jp-azul);
  --btn-primary-bg:     var(--jp-azul);
  --navbar-height:      60px;
}

body { color: var(--jp-texto); background: #fff; }

/* --- Barra de navegação --- */
.navbar,
.website-navbar {
  background: var(--jp-azul) !important;
  border-bottom: 3px solid var(--jp-dourado);
  box-shadow: 0 2px 12px rgba(0, 48, 135, .25);
}
.navbar .nav-link,
.navbar .navbar-brand,
.navbar a { color: #fff !important; }
.navbar .nav-link:hover { color: var(--jp-dourado) !important; }
/* item activo: sublinhado dourado em vez de fundo cinzento */
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
  color: var(--jp-dourado) !important;
  border-bottom: 2px solid var(--jp-dourado);
}

/* --- Títulos e ligações --- */
h1, h2, h3, h4 { color: var(--jp-azul); font-weight: 700; }
a { color: var(--jp-azul-c); }
a:hover { color: var(--jp-azul); }

/* --- Botões --- */
.btn-primary,
.btn-dark {
  background-color: var(--jp-azul) !important;
  border-color: var(--jp-azul) !important;
  color: #fff !important;
  font-weight: 600;
}
.btn-primary:hover,
.btn-dark:hover {
  background-color: var(--jp-azul-c) !important;
  border-color: var(--jp-azul-c) !important;
}
.btn-outline-primary {
  color: var(--jp-azul) !important;
  border-color: var(--jp-azul) !important;
}
.btn-outline-primary:hover {
  background-color: var(--jp-azul) !important;
  color: #fff !important;
}

/* --- Cartões de produto --- */
.card,
.product-card,
.item-card {
  border: 1px solid var(--jp-borda);
  border-radius: 12px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover,
.product-card:hover,
.item-card:hover {
  box-shadow: 0 8px 28px rgba(0, 48, 135, .12);
  transform: translateY(-3px);
  border-color: var(--jp-azul-c);
}

/* Espaço da imagem: fundo suave em vez do cinzento vazio com as
   iniciais, enquanto os artigos não têm fotografia */
.product-image,
.website-image-placeholder,
.placeholder-div {
  background: linear-gradient(135deg, var(--jp-fundo) 0%, #EDF1F7 100%) !important;
  color: var(--jp-cinza) !important;
  border-radius: 10px;
}

/* --- Preço --- */
.product-price,
.item-price,
.price {
  color: var(--jp-azul) !important;
  font-weight: 800;
}

/* --- Migalhas de navegação --- */
.breadcrumb-container,
.breadcrumb { background: transparent; padding-left: 0; }
.breadcrumb a { color: var(--jp-azul-c); }

/* --- Filtros laterais --- */
.filter-section,
.filters-section {
  border: 1px solid var(--jp-borda);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

/* --- Campo de pesquisa --- */
input.form-control:focus,
.search-box input:focus {
  border-color: var(--jp-azul-c);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, .15);
}

/* --- Rodapé --- */
.web-footer,
footer.footer {
  background: var(--jp-azul);
  color: #fff;
  border-top: 3px solid var(--jp-dourado);
}
.web-footer a,
footer.footer a { color: #fff; }
.web-footer a:hover,
footer.footer a:hover { color: var(--jp-dourado); }