/* ===========================
   0. RESET E BASE
   =========================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: #eef1f5;
  color: #333;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================
   CONTAINER PRINCIPAL
   =========================== */
.content {
  flex: 1;
  max-width: 1000px;
  width: 92%;
  margin: 120px auto 40px auto; /* Margem no topo para o header fixo */
  padding: 28px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

/* TEXTOS */
h1, h2, h3 { color: #0056b3; margin-bottom: 12px; }
p { margin-bottom: 12px; }

/* ===================================== */
/* ✨ CORREÇÃO DE ALINHAMENTO AQUI ✨    */
/* ===================================== */
.text-center {
  text-align: center;
}

/* BOTÕES */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  background: #0056b3;
  font-weight: 600;
}
.btn:hover { background: #004494; }
.btn.farmacias { background-color: #28a745; } /* Estilo do botão Farmácia Popular */

/* ===========================
   1. HEADER / MENU
   =========================== */
header {
  background: #0056b3;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px; /* Altura do header fixo */
  z-index: 1200;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.logo-container-svg {
  height: 50px;
  width: auto;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 14px;
  align-items: center;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
}
nav a:hover, nav a.active { background: rgba(255,255,255,0.06); }

/* SUBMENU */
nav ul li.has-submenu { position: relative; }
nav ul li .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #0056b3;
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  z-index: 80;
}
nav ul li.has-submenu:hover > .submenu { display: block; }
nav ul li .submenu li { display: block; }
nav ul li .submenu li a { display: block; padding: 10px 14px; color: #fff; }
nav ul li .submenu li a:hover { background: rgba(255,255,255,0.06); }

/* BOTÃO MOBILE */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 2000;
}

/* ===========================
   2. INTRO / HERO (reaproveitado)
   =========================== */
.intro-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 20px;
}
.intro-text { flex: 2; min-width: 300px; }
.intro-image {
  flex: 1;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===========================
   3. PBM (BUSCA, TABELA, MODAL)
   =========================== */
#buscaPBM { text-align: center; margin: 24px auto; }

#buscaPBM input {
  width: 60%;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
}

#buscaPBM button {
  padding: 12px 18px;
  border-radius: 8px;
  background: #0056b3;
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
}
#buscaPBM button:hover { background:#004494; }

/* Bloco do Anúncio (AdSense) */
.adsense-block {
    margin: 30px auto;
    width: 100%;
    max-width: 728px; 
    min-height: 90px;
    text-align: center;
}

#tabelaPBM { width: 100%; border-collapse: collapse; margin-top: 20px; }
#tabelaPBM th, #tabelaPBM td {
  padding: 10px;
  border: 1px solid #ddd;
}
#tabelaPBM th {
  background: #0056b3;
  color: #fff;
}
#tabelaPBM th:first-child,
#tabelaPBM td:first-child { display: none; }

/* MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 1500;
  padding: 18px;
}
#detalhes.modal {
  background: #eef4ff;
  border: 1px solid #0056b3;
  padding: 20px;
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
}
.modal-close-btn {
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 1.6rem;
  cursor: pointer;
  color: #333;
}

/* ===========================
   4. PÁGINA FARMÁCIA POPULAR
   =========================== */
.fp-container {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.fp-texto { flex: 2; min-width: 260px; }
.fp-imagem { flex: 1; max-width: 300px; }
.fp-imagem img { width: 100%; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); display:block; }

.lista-medicamentos, .fp-lista { padding-left: 20px; }
.lista-medicamentos li, .fp-lista li { margin-bottom: 10px; }

/* ===========================
   5. FORMULÁRIO DE CONTATO
   =========================== */
.contato-info p { margin-bottom: 10px; font-size: 1.05rem; }
.contato-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}
.contato-form input,
.contato-form textarea {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #d0d7df;
  font-size: 1rem;
  width: 100%;
}
.contato-form button {
  width: fit-content;
  padding: 12px 18px;
  border-radius: 8px;
  background: #0056b3;
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

/* Mensagens de Sucesso/Erro */
.success-message, .error-message {
  display: none;
  padding: 15px;
  border-radius: 5px;
  margin-top: 15px;
  text-align: center;
  color: white;
  font-weight: 500;
  animation: fadeIn 0.4s ease-in-out;
}
.success-message { background-color: #28a745; }
.error-message { background-color: #d93025; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===========================
   6. BLOG / ARTIGOS
   =========================== */
.article-list .article-item { padding: 22px 0; border-bottom: 1px solid #eee; }
.article-list .article-item h2 { margin-bottom: 8px; font-size: 1.2rem; }
.article-list .article-item h2 a { color: #0056b3; text-decoration: none; }
.article-list .article-item p { color: #555; margin-bottom: 8px; }
.read-more { color: #0056b3; font-weight: 700; text-decoration: none; }
.icon { font-weight: bold; color: #0056b3; }

/* ===========================
   7. RODAPÉ
   =========================== */
.footer {
  background: #0056b3;
  color: #fff;
  text-align: center;
  padding: 28px 16px;
  margin-top: auto;
  border-top: 4px solid rgba(255,255,255,0.15);
}
.footer-content { 
  display: flex; 
  gap: 20px; 
  justify-content: center; 
  align-items: center; 
  flex-wrap: wrap; 
}
.footer-social a { 
  color: #fff; 
  padding: 8px 14px; 
  border: 1px solid #fff; 
  border-radius: 20px; 
  text-decoration: none; 
}
.footer-social a:hover { background: #fff; color: #0056b3; }

/* ===========================
   8. UTILITÁRIOS E AVISOS
   =========================== */
.disclaimer {
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
  border-left: 5px solid #ffe58f;
  border-radius: 5px;
  padding: 15px;
  margin: 20px 0;
  line-height: 1.5;
  color: #594b1a;
}
.disclaimer strong { color: #333; }

.info-bloco {
  background: #f8f9fa;
  border-left: 4px solid #28a745;
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.info-bloco p {
  margin: 0;
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
}

.content p a {
  color: #0056b3;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}
.content p a:hover {
  color: #28a745;
  text-decoration: none;
}

.logo-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 25px auto;
  width: 100%;
  max-width: 1200px;
}
.logo-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Página 'Lojas Próximas' */
.farmacia-popular { font-weight: bold; font-size: 1.05rem; }
.farmacia-popular.sim { color: #28a745; }
.flag-icon {
  height: 1em; 
  width: auto;
  margin-right: 10px;
  vertical-align: -0.15em; 
}

/* ===========================
   9. "PEGADINHA" (HONEYPOT)
   =========================== */
.hidden-field {
  display: none;
}

/* ===========================
   10. ACESSIBILIDADE
   =========================== */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid rgba(0,86,179,0.18);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===========================
   11. RESPONSIVIDADE (UNIFICADO)
   =========================== */
@media (max-width: 1024px) {
  .content { width: 95%; padding: 22px; }
  .logo-container-svg { height: 46px; }
}

@media (max-width: 768px) {
  
  /* Header / Nav (Seu novo menu compacto) */
  .logo-container-svg { height: 40px; }
  .hamburger-btn { display: block; z-index: 2000; }
  nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #0056b3;
    padding-top: 50px;
    display: flex;
    justify-content: flex-start;
    transition: left 0.25s ease;
    overflow-y: auto; 
    z-index: 1100;
  }
  nav.active { left: 0; }
  nav ul { flex-direction: column; width: 100%; gap: 6px; padding: 0 10px; }
  nav ul li { width: 100%; text-align: center; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  nav ul li:last-child { border-bottom: none; }
  nav ul li a { font-size: 17px; font-weight: 600; display: block; width: 100%; color: white; }
  
  /* Submenu Mobile (compacto) */
  nav ul li .submenu {
    position: static;
    display: none;
    background: rgba(255,255,255,0.08);
    padding: 5px 0;
    border-radius: 4px;
    margin-top: 4px;
    box-shadow: none;
  }
  nav ul li.has-submenu.open > .submenu { display: block; }
  nav ul li .submenu li a {
    font-size: 15px;
    padding: 8px 0;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  nav ul li .submenu li:last-child a { border-bottom: none; }

  /* Ajustes de conteúdo */
  .content { width: 95%; margin: 90px auto 20px auto; padding: 18px; }
  .intro-block { flex-direction: column; }
  .intro-image { max-width: 100%; }

  /* Farmácia popular (imagem abaixo) */
  .fp-container { flex-direction: column-reverse; }
  .fp-imagem { max-width: 100%; margin-top: 12px; }

  /* Busca PBM (Mobile) */
  #buscaPBM {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 95%;
  }
  #buscaPBM input {
      width: 100%;
      margin-right: 0;
      margin-bottom: 10px;
      font-size: 0.95rem;
  }
  #buscaPBM button {
      width: 100%;
  }

  /* Tabela PBM (Mobile) */
  #tabelaPBM thead { display:none; }
  #tabelaPBM tr { 
      display:block; 
      margin-bottom:12px; 
      border-radius:8px; 
      border:1px solid #e0e7ef; 
      overflow:hidden; 
  }
  #tabelaPBM td { 
      display:block; 
      padding:10px; 
      position:relative; 
      border-bottom: 1px solid #eee; 
      text-align: right; /* Alinha o valor */
  }
  #tabelaPBM td[data-label]:before {
    content: attr(data-label);
    position:absolute; left:10px; top:10px; font-weight:700; color:#0056b3;
    text-align: left; /* Alinha o "título" */
    width: calc(50% - 20px); /* Dá espaço */
  }
  #tabelaPBM td { padding-left: 50%; } /* Dá espaço para o "título" */
  #tabelaPBM td:last-child { 
      padding-left:10px; 
      text-align:center; 
      border-bottom: 0; 
  }
  #tabelaPBM td .btn-detalhes {
      padding: 6px 12px;
      font-size: 1rem;
  }

  .footer-content { flex-direction: column; gap: 25px; }
}

@media (max-width: 360px) {
  body { font-size: 14px; }
}

/* ===========================
   12. PÁGINA "LOJAS" (NOVO GRID)
   =========================== */

.lojas-grid {
    display: grid;
    /* Cria colunas automáticas de 280px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
    margin-bottom: 40px; /* Separar do resto da lista */
}

.loja-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column; /* Organiza o conteúdo verticalmente */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.loja-item h3 {
    margin-bottom: 10px;
    color: #0056b3;
}

.loja-item p {
    flex-grow: 1; /* Faz o parágrafo "empurrar" o botão para baixo */
    color: #555;
    font-size: 0.95rem;
}

.loja-item .btn {
    margin-top: 15px;
    text-align: center; /* Centraliza o texto do botão */
    background-color: #0056b3;
}
.loja-item .btn:hover {
    background-color: #004494;
}

/* Destaque para sua loja (Exemplo) */
.loja-item.loja-destaque {
    border-color: #0056b3;
    background-color: #f8faff;
}
.loja-item.loja-destaque .btn {
    background-color: #28a745; /* Botão verde */
}
.loja-item.loja-destaque .btn:hover {
    background-color: #218838;
}