/* ==========================================================================
   EMPRESA DESTAQUE - FOLHA DE ESTILOS PRINCIPAL
   VERSÃO FINAL, COMPLETA E RESPONSIVA (MOBILE FIRST)
   ========================================================================== */

/* * ÍNDICE:
 * 1. CONFIGURAções GLOBAIS E TEMA
 * 2. COMPONENTES REUTILIZÁVEIS
 * 3. LAYOUT PRINCIPAL (Header, Navegação Mobile, Footer)
 * 4. PÁGINAS E COMPONENTES GERAIS
 * 5. COMPONENTES DO PERFIL (INCLUINDO CARROSSEL)
 * 6. PAINÉIS E FORMULÁRIOS DINÂMICOS
 * 7. MEDIA QUERIES (Ajustes para Desktop)
*/

/* ==========================================================================
   1. CONFIGURAÇÕES GLOBAIS E TEMA
   ========================================================================== */

:root {
  /* TEMA ESCURO (Padrão) */
  --cor-primaria: #0cc0df;
  --cor-primaria-hover: #00a5c2;
  --cor-fundo: #121212;
  --cor-fundo-card: #1d1d1d;
  --cor-fundo-input: #2c2c2c;
  --cor-texto-principal: #e0e0e0;
  --cor-texto-secundario: #a0a0a0;
  --cor-borda-sutil: #333;
  --cor-sucesso: #28a745;
  --cor-erro: #dc3545;
  --sombra-card: 0 4px 15px rgba(0, 0, 0, 0.2);
  --cor-whatsapp: #25d366;
  --cor-whatsapp-hover: #128c7e;
}

:root.light-theme {
  /* TEMA CLARO */
  --cor-fundo: #f4f6f8;
  --cor-fundo-card: #ffffff;
  --cor-fundo-input: #fdfdfd;
  --cor-texto-principal: #212529;
  --cor-texto-secundario: #6c757d;
  --cor-borda-sutil: #dee2e6;
  --cor-primaria: #007bff;
  --cor-primaria-hover: #0056b3;
  --sombra-card: 0 4px 15px rgba(0, 0, 0, 0.05);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--cor-fundo);
  color: var(--cor-texto-secundario);
  line-height: 1.6;
  padding-bottom: 80px; /* Espaço para o menu mobile inferior */
  transition: background-color 0.3s, color 0.3s;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--cor-primaria);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--cor-primaria-hover);
}

h1,
h2,
h3,
h4 {
  color: var(--cor-texto-principal);
  margin-bottom: 1rem;
  line-height: 1.3;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   2. COMPONENTES REUTILIZÁVEIS
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent;
}
.btn-primario {
  background-color: var(--cor-primaria);
  color: #fff;
}
.btn-primario:hover {
  background-color: var(--cor-primaria-hover);
  transform: translateY(-2px);
}
.btn-secundario {
  background-color: transparent;
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
.btn-secundario:hover {
  background-color: var(--cor-primaria);
  color: #fff;
}


.alert {
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.alert-success {
  background-color: rgba(40, 167, 69, 0.1);
  color: var(--cor-sucesso);
  border-color: var(--cor-sucesso);
}
.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  color: var(--cor-erro);
  border-color: var(--cor-erro);
}

.perfil-card {
  background-color: var(--cor-fundo-card);
  padding: 10px;
  border-radius: 12px;
  box-shadow: var(--sombra-card);
  margin-bottom: 10px;
  text-decoration: none;
  list-style-type: none;
  list-style: none;
}

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 12px;
  background-color: var(--cor-fundo-input);
  color: var(--cor-texto-principal);
  border: 1px solid var(--cor-borda-sutil);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 10px;
}
textarea {
  resize: vertical;
  min-height: 100px;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(12, 192, 223, 0.2);
}

/* ==========================================================================
   3. LAYOUT PRINCIPAL
   ========================================================================== */

.header {
  background-color: var(--cor-fundo-card);
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--cor-borda-sutil);
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo img {
  max-height: 100px;
  width: auto;
}
.desktop-nav {
  display: none;
}
.desktop-nav a {
  color: var(--cor-texto-principal);
  margin-left: 25px;
  font-weight: 500;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.theme-toggle-btn {
  background: none;
  border: 1px solid var(--cor-borda-sutil);
  color: var(--cor-texto-secundario);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: color 0.2s, border-color 0.2s;
  margin: 0;
}
.theme-toggle-btn:hover {
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
.theme-toggle-btn .theme-icon {
  width: 20px;
  height: 20px;
}

:root #theme-icon-sun {
  display: none;
}
:root #theme-icon-moon {
  display: block;
}
:root.light-theme #theme-icon-sun {
  display: block;
}
:root.light-theme #theme-icon-moon {
  display: none;
}

.mobile-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--cor-fundo-card);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  border-top: 1px solid var(--cor-borda-sutil);
}
.mobile-nav-item {
  flex-grow: 1;
  text-align: center;
  padding: 10px 5px;
  color: var(--cor-texto-secundario);
  font-size: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mobile-nav-item.active {
  color: var(--cor-primaria);
}
.mobile-nav-item svg {
  width: 24px;
  height: 24px;
}

.btn-whatsapp-flutuante {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: var(--cor-whatsapp);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 999;
  transition: all 0.3s;
}
.btn-whatsapp-flutuante:hover {
  background-color: var(--cor-whatsapp-hover);
  transform: scale(1.1);
}
.btn-whatsapp-flutuante svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}

/* ==========================================================================
   4. PÁGINAS E COMPONENTES GERAIS
   ========================================================================== */

.hero {
  text-align: center;
  padding: 40px 0;
}
.search-form {
  display: flex;
  max-width: 600px;
  margin: 20px auto 0;
}
.search-form input {
  flex-grow: 1;
  border-radius: 8px 0 0 8px;
  border-right: none;
}
.search-form button {
  border-radius: 0 8px 8px 0;
}

button {
  margin-bottom: 10px;
}

.card-grid-destaque {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}
.empresa-card-destaque {
  background-color: var(--cor-fundo-card);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--sombra-card);
}
.empresa-card-destaque:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.empresa-card-destaque img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 15px;
  object-fit: cover;
}
.empresa-card-destaque h3 {
  font-size: 1rem;
  margin-bottom: 5px;
}
.empresa-card-destaque .rating-display {
  font-size: 0.9rem;
  font-weight: bold;
}

.auth-card {
  background-color: var(--cor-fundo-card);
  border-radius: 15px;
  padding: 30px;
  max-width: 400px;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sombra-card);
  min-height: 540px;
  transition: min-height 0.6s ease-in-out;
}
.auth-card.is-register-active {
  min-height: 620px;
}
.form-container {
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}
.form-container.form-register {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  transform: translateX(100%);
  opacity: 0;
}
.auth-card.is-register-active .form-login {
  transform: translateX(-100%);
  opacity: 0;
}
.auth-card.is-register-active .form-register {
  transform: translateX(0);
  opacity: 1;
}

/* ==========================================================================
   5. COMPONENTES DO PERFIL (INCLUINDO CARROSSEL)
   ========================================================================== */

/* --- CÓDIGO NOVO ADICIONADO AQUI --- */
.banner-carousel-section,
.banner-default {
  width: 100%;
  height: 200px; /* Altura para mobile */
  background-color: var(--cor-fundo-card);
  position: relative;
  overflow: hidden;
}
.banner-default {
  background-size: cover;
  background-position: center center;
}
.banner-carousel-section .swiper {
  width: 100%;
  height: 100%;
}
.banner-carousel-section .swiper-slide {
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
}
.slide-caption {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
}
.banner-carousel-section .swiper-button-next,
.banner-carousel-section .swiper-button-prev {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.banner-carousel-section .swiper-button-next:after,
.banner-carousel-section .swiper-button-prev:after {
  font-size: 1.2rem;
  font-weight: bold;
}
.banner-carousel-section .swiper-pagination-bullet-active {
  background-color: #fff;
}
/* --- FIM DO CÓDIGO NOVO --- */

.perfil-header {
  text-align: center;
  margin: -60px auto 30px auto; /* Margem negativa para puxar para cima */
  position: relative; /* Garante que fique sobre outros elementos */
  z-index: 10;
}

.perfil-header h1 {
  font-size: 1.4rem;  
}

.perfil-logo img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--cor-fundo);
  box-shadow: var(--sombra-card);
  margin: 0 auto 15px;
  padding: 0;
}

.selo-verificado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: rgba(12, 192, 223, 0.1);
  color: var(--cor-primaria);
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
}

.rating-geral {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.nota-media {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--cor-texto-principal);
}
.estrelas-display {
  color: #f39c12;
}

/* ==========================================================================
   6. PAINÉIS E FORMULÁRIOS DINÂMICOS
   ========================================================================== */

.painel-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.painel-menu {
  display: flex;
  overflow-x: auto;
  background-color: var(--cor-fundo-card);
  border-radius: 8px;
  padding: 5px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.painel-menu::-webkit-scrollbar {
  display: none;
}
.painel-menu a {
  padding: 10px 15px;
  color: var(--cor-texto-secundario);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  font-size: 0.9rem;
}
.painel-menu a.ativo {
  color: var(--cor-primaria);
  border-bottom-color: var(--cor-primaria);
}
.painel-area-conteudo {
  flex-grow: 1;
}
.painel-conteudo {
  display: none;
}
.painel-conteudo:first-of-type {
  display: block;
} /* Mostra a primeira aba por padrão */

/* ==========================================================================
   7. MEDIA QUERIES (Ajustes para Desktop)
   ========================================================================== */
@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
  .mobile-nav {
    display: none;
  }
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  /* --- CÓDIGO NOVO ADICIONADO AQUI --- */
  .banner-carousel-section,
  .banner-default {
    height: 350px; /* Altura maior para desktop */
  }
  /* --- FIM DO CÓDIGO NOVO --- */

  h1 {
    font-size: 2.5rem;
  }

  .perfil-header {
    margin-top: -60px;
  }

  .painel-container {
    flex-direction: row;
  }
  .painel-menu {
    flex-direction: column;
    overflow-x: visible;
    width: 220px;
    flex-shrink: 0;
    padding: 10px;
  }
  .painel-menu a {
    border-bottom: none;
    border-left: 3px solid transparent;
  }
  .painel-menu a.ativo {
    border-left-color: var(--cor-primaria);
    border-bottom-color: transparent;
  }

  .btn-whatsapp-flutuante {
    bottom: 30px;
    right: 30px;
  }
}

hr {
  border-style: none;
}

/* ==========================================================================
   [CORREÇÃO] AJUSTE DE ALTURA PARA O CARD DE LOGIN/REGISTO
   ========================================================================== */

.auth-card {
  /* Define uma altura mínima inicial para o card, baseada no formulário de login */
  min-height: 540px;
  /* Adiciona uma transição suave para a propriedade de altura */
  transition: min-height 0.6s ease-in-out;
}

/* Quando o formulário de registo está ativo... */
.auth-card.is-register-active {
  /* Aumenta a altura mínima do card para acomodar o formulário maior */
  min-height: 700px;
}

/* ==========================================================================
   7. ESTILOS ESPECÍFICOS DO PAINEL (NOVO)
   ========================================================================== */

.painel-header-aba {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.grid-produtos-painel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.card-produto-painel {
  background-color: var(--cor-fundo-card);
  border-radius: 12px;
  box-shadow: var(--sombra-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card-produto-painel:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.card-produto-painel-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background-color: var(--cor-fundo-input);
}

.card-produto-painel-body {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-produto-painel-body h4 {
  font-size: 1rem;
  margin-bottom: 5px;
  color: var(--cor-texto-principal);
}

.card-produto-painel-body .preco {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--cor-primaria);
  margin-bottom: 15px;
}

.card-produto-painel-footer {
  padding: 15px;
  border-top: 1px solid var(--cor-borda-sutil);
  display: flex;
  gap: 10px;
}
.card-produto-painel-footer .btn {
  flex-grow: 1;
  padding: 8px;
  font-size: 0.8rem;
}


img {
  border-radius: 20px;
  padding: 10px;
}
.preview-imagem {
  border-radius: 100%;
  width: 150px;
  height: auto;
}
/* ==========================================================================
   8. ESTILOS MELHORADOS PARA A ABA "SOBRE NÓS"
   ========================================================================== */

.lista-contatos-moderna,
.lista-horarios-moderna {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaçamento entre os itens */
}

.item-contato,
.item-horario {
    display: flex;
    justify-content: space-between; /* Alinha o texto nas extremidades */
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--cor-borda-sutil);
}

.item-contato:last-child,
.item-horario:last-child {
    border-bottom: none; /* Remove a borda do último item */
}

.item-contato strong,
.item-horario .dia-semana {
    color: var(--cor-texto-principal);
    font-weight: 600;
    margin-right: 15px; /* Espaço entre o rótulo e o valor */
}

.item-contato span,
.item-contato a,
.item-horario .horario-status {
    color: var(--cor-texto-secundario);
    text-align: right;
}

.lista-redes-sociais {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.btn-rede-social {
    background-color: var(--cor-fundo-input);
    color: var(--cor-texto-secundario);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-rede-social:hover {
    background-color: var(--cor-primaria);
    color: #fff;
    transform: translateY(-2px);
}

/* ==========================================================================
   9. ESTILOS MELHORADOS PARA O CATÁLOGO DE PRODUTOS
   ========================================================================== */

/* A grelha que vai conter os cartões de produto */
.grid-produtos {
    display: grid;
    /* Cria colunas responsivas: no mínimo 200px, mas podem crescer para preencher o espaço */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px; /* Espaçamento entre os cartões */
    margin-top: 20px;
}

/* O cartão individual do produto (agora é um link) */
.card-produto {
    background-color: var(--cor-fundo); /* Um pouco mais escuro que o card principal para dar profundidade */
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    overflow: hidden; /* Garante que a imagem não saia dos cantos arredondados */
    display: flex;
    flex-direction: column; /* Organiza o conteúdo em coluna */
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none; /* Remove o sublinhado do link */
    color: inherit; /* Faz com que o texto herde a cor, em vez de ficar azul */
}

.card-produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* Efeito hover para o título do produto */
.card-produto:hover h4 {
    color: var(--cor-primaria);
}

.card-produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* A imagem do produto */
.card-produto-img {
    width: 100%;
    height: 150px; /* Altura fixa para todas as imagens */
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
    border-bottom: 1px solid var(--cor-borda-sutil);
}

/* O corpo do cartão, com o texto */
.card-produto-body {
    padding: 15px;
    flex-grow: 1; /* Faz esta área crescer para preencher o espaço, empurrando o footer para baixo */
}

.card-produto-body h4 {
    font-size: 1rem;
    margin: 0 0 8px 0;
    color: var(--cor-texto-principal);
}

.card-produto-body p {
    font-size: 0.85rem;
    margin: 0;
    color: var(--cor-texto-secundario);
    line-height: 1.5;
}

/* O rodapé do cartão, para o preço */
.card-produto-footer {
    padding: 0 15px 15px 15px;
    margin-top: auto; /* Empurra o footer para a parte de baixo do cartão */
}

.card-produto .produto-preco {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cor-primaria);
}

/* Remove a div antiga para não haver conflito */
.produto-card-perfil {
    display: none;
}

/* ==========================================================================
   10. ESTILOS MELHORADOS PARA A PÁGINA DE DETALHES DO PRODUTO
   ========================================================================== */

.detalhe-produto-card {
    background-color: var(--cor-fundo-card);
    border-radius: 12px;
    box-shadow: var(--sombra-card);
    overflow: hidden;
}

.detalhe-produto-imagem-container {
    background-color: var(--cor-fundo);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detalhe-produto-imagem {
    max-height: 300px;
    width: auto;
    object-fit: contain;
    border-radius: 8px; /* Remove o padding da imagem e adiciona cantos arredondados */
    padding: 0; /* Remove padding interno da imagem */
}

.detalhe-produto-info {
    padding: 25px;
}

.detalhe-produto-info h1 {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.vendido-por {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 20px;
}

.vendido-por a {
    font-weight: 600;
}

.detalhe-produto-preco {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cor-primaria);
    margin-bottom: 20px;
}

.detalhe-produto-divisor {
    border: 0;
    height: 1px;
    background-color: var(--cor-borda-sutil);
    margin: 25px 0;
}

.detalhe-produto-info h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--cor-texto-principal);
}

.detalhe-produto-descricao {
    line-height: 1.7;
    color: var(--cor-texto-secundario);
}

@media (min-width: 768px) {
    .detalhe-produto-card {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Duas colunas em desktop */
        align-items: start;
    }

    .detalhe-produto-imagem-container {
        padding: 30px;
    }

    .detalhe-produto-info {
        padding: 30px;
    }

    .detalhe-produto-info h1 {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   11. ESTILOS MELHORADOS PARA OS PAINÉIS DE GESTÃO (MOBILE FIRST)
   ========================================================================== */

/* Remove margens e sombras desnecessárias dentro das abas */
.painel-conteudo .perfil-card {
    box-shadow: none;
    padding: 15px;
    margin-bottom: 25px;
}

/* Título da Aba com botão */
.painel-header-aba {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
}
.painel-header-aba h3 {
    margin-bottom: 0;
}
.painel-header-aba .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}

/* Formulários Inline (para adicionar categorias, por exemplo) */
.form-add-inline {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.form-add-inline .form-group {
    flex-grow: 1;
    margin-bottom: 0;
}
.form-add-inline input {
    margin-bottom: 0;
}
.form-add-inline button {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Subtítulos dentro dos cards */
h5.subtitulo-painel {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 25px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--cor-borda-sutil);
}

/* Estrutura base da lista de itens gerenciáveis */
.lista-itens-painel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Item individual na lista */
.item-painel {
    background-color: var(--cor-fundo-card);
    padding: 15px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    box-shadow: var(--sombra-card);
}

/* Item com imagem */
.item-painel.com-imagem img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    padding: 0;
    margin: 0;
}

.item-painel-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.item-painel-info span {
    color: var(--cor-texto-principal);
    font-weight: 500;
}
.item-painel-info small {
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
}

/* Botões de Ação (Editar/Apagar) */
.item-painel-acoes {
    display: flex;
    gap: 10px;
}
.btn-editar-item, .btn-apagar-item {
    display: block;
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.btn-editar-item:hover, .btn-apagar-item:hover {
    opacity: 1;
}

/* Ícones SVG para os botões (cores adaptáveis ao tema) */
.btn-editar-item {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a0a0a0'%3E%3Cpath d='M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z'/%3E%3Cpath fill-rule='evenodd' d='M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.btn-apagar-item {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a0a0a0'%3E%3Cpath fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
:root.light-theme .btn-editar-item {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236c757d'%3E%3Cpath d='M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z'/%3E%3Cpath fill-rule='evenodd' d='M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
:root.light-theme .btn-apagar-item {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Melhorias no formulário de informações da empresa */
.horarios-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.horario-dia-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.horario-dia-item .checkbox-label {
    flex-basis: 60px; /* Largura fixa para o dia da semana */
    flex-shrink: 0;
}
.horario-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
}
.horario-inputs input[type="time"] {
    margin-bottom: 0;
}

/* ==========================================================================
   12. ESTILOS GERAIS ADICIONAIS PARA PAINÉIS
   ========================================================================== */

/* Botão pequeno para ações em cartões */
.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

/* Lista de interações (avaliações, reclamações) */
.lista-interacoes {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Cartão base para uma interação */
.card-interacao, .card-interacao-link {
    background-color: var(--cor-fundo-card);
    border-radius: 10px;
    padding: 15px;
    display: block;
    text-decoration: none;
    box-shadow: var(--sombra-card);
    transition: box-shadow 0.2s, transform 0.2s;
}

.card-interacao-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.card-interacao-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 8px;
}

.card-interacao-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--cor-texto-principal);
}

.card-interacao-conteudo {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
}

.card-interacao-meta {
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
}

.card-interacao-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--cor-borda-sutil);
}

/* Badges de Status (para reclamações) */
.status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.status-aberta { background-color: rgba(255, 165, 0, 0.2); color: #ffa500; }
.status-em-análise { background-color: rgba(0, 123, 255, 0.2); color: var(--cor-primaria); }
.status-respondida { background-color: rgba(40, 167, 69, 0.2); color: var(--cor-sucesso); }
.status-resolvida { background-color: rgba(40, 167, 69, 0.2); color: var(--cor-sucesso); }
.status-não-resolvida { background-color: rgba(220, 53, 69, 0.2); color: var(--cor-erro); }

/* Estilos para a aba de Imagens */
.form-upload-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.form-group-upload label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}
.preview-container {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.preview-imagem-redonda {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    padding: 0;
    border: 2px solid var(--cor-borda-sutil);
}
/* ==========================================================================
   13. ESTILOS PARA FORMULÁRIO DE AVALIAÇÃO (ESTRELAS)
   ========================================================================== */

.criterios-avaliacao {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 25px 0;
    padding: 20px;
    background-color: var(--cor-fundo);
    border-radius: 8px;
}

.criterio {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 15px;
}

.criterio label {
    margin: 0;
    font-weight: 500;
    color: var(--cor-texto-principal);
}

.estrelas {
    display: flex;
}

.estrelas i {
    font-size: 1.8rem;
    color: var(--cor-borda-sutil);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    padding: 0 4px;
}

.estrelas i:hover {
    transform: scale(1.2);
}

/* Estilo para estrelas preenchidas e com hover */
.estrelas i.fas,
.estrelas:hover i.far {
    color: #f39c12; /* Cor dourada para estrelas */
}

/* Efeito de hover: pinta a estrela e as que estão "antes" dela */
.estrelas i.far:hover ~ i.far {
    color: var(--cor-borda-sutil);
}

/* ==========================================================================
   13. ESTILOS PARA FORMULÁRIO DE AVALIAÇÃO (ESTRELAS)
   ========================================================================== */

.criterios-avaliacao {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 25px 0;
    padding: 20px;
    background-color: var(--cor-fundo);
    border-radius: 8px;
}

.criterio {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 15px;
}

.criterio label {
    margin: 0;
    font-weight: 500;
    color: var(--cor-texto-principal);
}

.estrelas {
    display: flex;
    /* Inverte a ordem visual dos elementos */
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.estrelas i {
    font-size: 1.8rem;
    color: var(--cor-borda-sutil);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    padding: 0 4px;
}

.estrelas i:hover,
.estrelas i:hover ~ i {
    transform: scale(1.1);
    color: #f39c12; /* Cor dourada para estrelas */
}

/* Estilo para estrelas permanentemente preenchidas */
.estrelas i.fas {
    color: #f39c12;
}

/* ==========================================================================
   14. ESTILOS MELHORADOS PARA O FEED DO CLIENTE
   ========================================================================== */

.lista-feed-cliente {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 700px; /* Largura máxima para melhor legibilidade */
    margin: 0 auto;
}

.card-feed {
    background-color: var(--cor-fundo-card);
    border-radius: 12px;
    box-shadow: var(--sombra-card);
    overflow: hidden;
}

.card-feed-header {
    padding: 15px;
    border-bottom: 1px solid var(--cor-borda-sutil);
}

.card-feed-header .empresa-info {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.card-feed-header .empresa-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    padding: 0; /* Remove padding extra da imagem */
}

.card-feed-header .empresa-info-texto strong {
    color: var(--cor-texto-principal);
    font-weight: 600;
}

.card-feed-header .empresa-info-texto small {
    color: var(--cor-texto-secundario);
    font-size: 0.8rem;
}

.card-feed-body {
    padding: 15px;
}

.card-feed-body p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: var(--cor-texto-secundario);
}

.card-feed-imagem {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Cantos arredondados na imagem */
    margin-top: 15px;
    padding: 0; /* Remove padding extra da imagem */
}

/* Remove estilos antigos para evitar conflitos */
.publicacao-card {
    display: none;
}

/* ==========================================================================
   15. ESTILOS MELHORADOS PARA O FEED DO PERFIL DA EMPRESA
   ========================================================================== */

.lista-feed-perfil {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 700px; /* Largura máxima para melhor legibilidade */
    margin: 0 auto;
}
/* ==========================================================================
   16. ESTILOS MELHORADOS PARA A ABA DE VAGAS
   ========================================================================== */

.lista-vagas-container {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna em mobile */
    gap: 20px;
}

.card-vaga {
    background-color: var(--cor-fundo-card);
    border-radius: 12px;
    box-shadow: var(--sombra-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-vaga:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.card-vaga-body {
    padding: 20px;
    flex-grow: 1;
}

.card-vaga-body h3 {
    font-size: 1.2rem;
    color: var(--cor-texto-principal);
    margin-top: 0;
}

.vaga-localizacao {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 15px;
}

.vaga-descricao {
    font-size: 0.95rem;
    line-height: 1.6;
}

.card-vaga-footer {
    padding: 20px;
    background-color: var(--cor-fundo);
    text-align: center;
}

/* Ajustes para ecrãs maiores */
@media (min-width: 768px) {
    .lista-vagas-container {
        /* Duas colunas em desktop */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   17. ESTILOS PARA A PÁGINA DE CONQUISTAS
   ========================================================================== */

.lista-conquistas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.conquista-item {
    background-color: var(--cor-fundo-card);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--sombra-card);
    transition: transform 0.2s, box-shadow 0.2s;
}

.conquista-icone i {
    font-size: 4rem; /* Tamanho do ícone */
    margin-bottom: 15px;
    color: var(--cor-primaria);
}

.conquista-item.bloqueada .conquista-icone i {
    color: inherit; /* Remove a cor primária quando bloqueado */
}

.conquista-item h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: var(--cor-texto-principal);
}

.conquista-item p {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 15px;
}

.conquista-item small {
    font-size: 0.8rem;
    font-weight: 600;
}

/* Estilo para conquista já obtida */
.conquista-item.conquistada small {
    color: var(--cor-sucesso);
}

/* Estilo para conquista ainda não obtida */
.conquista-item.bloqueada {
    opacity: 0.6;
}

.conquista-item.bloqueada img {
    filter: grayscale(100%);
}

.conquista-item.bloqueada small {
    color: var(--cor-erro);
}

/* ==========================================================================
   18. ESTILOS MELHORADOS PARA A PÁGINA INICIAL (HOME)
   ========================================================================== */

.home-section {
    margin-bottom: 40px;
}

.home-section-title {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.6rem;
}

.selo-verificado {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230cc0df'%3E%3Cpath fill-rule='evenodd' d='M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a.75.75 0 00-1.06-1.06L9 10.939 7.56 9.5a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: contain;
}

.empresa-card-destaque h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.rating-display-vazio {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
}

.grid-categorias-home {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.card-categoria-home {
    background-color: var(--cor-fundo-card);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--cor-texto-secundario);
    border: 1px solid var(--cor-borda-sutil);
}

.card-categoria-home:hover {
    background-color: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
    transform: translateY(-2px);
}

.card-lista-home {
    background-color: var(--cor-fundo-card);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-lista-home {
    display: block;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.item-lista-home:hover {
    background-color: var(--cor-fundo);
}

.item-lista-home strong {
    color: var(--cor-texto-principal);
    display: block;
    margin-bottom: 2px;
}

.item-lista-home small {
    color: var(--cor-texto-secundario);
    font-size: 0.8rem;
}

.card-cta-home {
    background-color: var(--cor-fundo-card);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
}
/* ==========================================================================
   19. MELHORIA PARA NOMES LONGOS NOS CARTÕES (VERSÃO CORRIGIDA)
   ========================================================================== */

/* O H3 continua a ser um flex container para centralizar o nome e o selo */
.empresa-card-destaque h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* A nova SPAN que contém o nome da empresa */
.empresa-card-nome {
    /* Limita o nome a uma única linha */
    white-space: nowrap;
    /* Esconde o texto que ultrapassar o limite */
    overflow: hidden;
    /* Adiciona "..." no final do texto cortado */
    text-overflow: ellipsis;
    /* Garante que o corte funcione dentro do flex container */
    min-width: 0;
}

/* ==========================================================================
   21. ESTILOS MELHORADOS PARA A PÁGINA DE BUSCA
   ========================================================================== */

.search-form-page {
  display: flex;
  margin-bottom: 25px;
}

.search-form-page input {
  flex-grow: 1;
  border-radius: 8px 0 0 8px;
  border-right: none;
  margin-bottom: 0; /* Remove a margem padrão */
}

.search-form-page button {
  border-radius: 0 8px 8px 0;
  margin-bottom: 0; /* Remove a margem padrão */
}

.resultados-count {
  margin-bottom: 20px;
  font-weight: 500;
  color: var(--cor-texto-principal);
}

.resultados-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.empresa-card-busca {
  display: flex;
  gap: 15px;
  background-color: var(--cor-fundo-card);
  padding: 15px;
  border-radius: 12px;
  box-shadow: var(--sombra-card);
  transition: transform 0.2s, box-shadow 0.2s;
  align-items: center;
}

.empresa-card-busca:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.empresa-card-busca img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  padding: 0; /* Remove o padding padrão de imagens */
}

.empresa-card-info h3 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  color: var(--cor-texto-principal);
}

.empresa-card-info p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cor-texto-secundario);
}

.empresa-card-info .rating-display {
  margin-top: 8px;
  font-weight: bold;
}

/* Paginação */
.paginacao {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}
.paginacao a {
    padding: 8px 14px;
    border: 1px solid var(--cor-borda-sutil);
    border-radius: 8px;
    color: var(--cor-texto-secundario);
    font-weight: 500;
}
.paginacao a:hover {
    background-color: var(--cor-fundo-card);
    border-color: var(--cor-primaria);
}
.paginacao a.active {
    background-color: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}

/* ==========================================================================
   22. ESTILOS PARA O ÍCONE DE NOTIFICAÇÕES
   ========================================================================== */

.notification-btn {
  position: relative;
  background: none;
  border: 1px solid var(--cor-borda-sutil);
  color: var(--cor-texto-secundario);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: color 0.2s, border-color 0.2s;
}

.notification-btn:hover {
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.notification-btn svg {
  width: 20px;
  height: 20px;
}

.notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background-color: var(--cor-erro);
  border-radius: 50%;
  border: 2px solid var(--cor-fundo-card);
}

/* ==========================================================================
   23. ESTILO PARA A ABA ATIVA NOS MENUS
   ========================================================================== */

/* Estilo do link da aba ativa */
.painel-menu-link.active {
  color: var(--cor-primaria);
  font-weight: 600;
  border-bottom: 2px solid var(--cor-primaria);
}

/* Em ecrãs pequenos, o menu de abas é horizontal. Vamos ajustar o estilo */
@media (max-width: 767px) {
  .painel-menu {
    border-bottom: 1px solid var(--cor-borda-sutil);
  }

  .painel-menu-link {
    border-bottom: 2px solid transparent; /* Remove a borda padrão */
    padding-bottom: 10px;
    margin-bottom: -1px; /* Alinha a borda com a borda do menu */
  }
}

/* ==========================================================================
   24. ESTILOS PARA O MODAL DE NOTIFICAÇÕES
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none; /* Escondido por defeito */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-overlay.ativo {
  display: flex;
}
.modal-content {
  background-color: var(--cor-fundo-card);
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--cor-borda-sutil);
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.modal-header h3 { margin: 0; }
.modal-fechar {
  background: none; border: none; font-size: 1.8rem; cursor: pointer; color: var(--cor-texto-secundario);
}
.modal-acoes-globais {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.btn-erro { background-color: var(--cor-erro); color: #fff; }
.lista-notificacoes {
  overflow-y: auto;
  max-height: calc(80vh - 150px);
}
.notificacao-item {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--cor-borda-sutil);
}
.notificacao-item.nao-lida {
  background-color: var(--cor-fundo);
}
.notificacao-conteudo p {
  margin: 0; font-size: 0.9rem; color: var(--cor-texto-principal);
}
.notificacao-conteudo small {
  font-size: 0.75rem; color: var(--cor-texto-secundario);
}
.notificacao-acoes { display: flex; gap: 10px; }
.btn-notificacao { background: none; border: none; cursor: pointer; padding: 5px; }
.btn-notificacao svg { width: 18px; height: 18px; }

/* ==========================================================================
   25. ANIMAÇÃO PARA O PONTO DE NOTIFICAÇÃO
   ========================================================================== */

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

.notification-dot {
  animation: pulse 2s infinite;
}
/* ==========================================================================
   26. ESTILO PARA BOTÃO DE REMOVER ITEM EM FORMULÁRIOS
   ========================================================================== */

.btn-remover-item {
    background-color: transparent;
    border: none;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a0a0a0'%3E%3Cpath fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    font-size: 0; /* Esconde qualquer texto residual */
    flex-shrink: 0; /* Impede que o botão encolha */
    margin-bottom: 10px;
}

.btn-remover-item:hover {
    opacity: 1;
    transform: scale(1.1);
    /* Muda a cor do ícone para vermelho no hover */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc3545'%3E%3Cpath fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* ==========================================================================
   27. ESTILOS PARA O LINK DO CARD DE FEED
   ========================================================================== */

.card-feed-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Garante que o link ocupe todo o espaço do cartão */
}

.card-feed-link .card-feed {
    transition: box-shadow 0.2s, transform 0.2s;
}

.card-feed-link:hover .card-feed {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   28. ESTILO DEFINITIVO PARA COMENTÁRIOS E RESPOSTAS
   ========================================================================== */

/* --- Estilos do post (mantidos) --- */
.post-detalhe-card { background-color: var(--cor-fundo-card); border-radius: 12px; box-shadow: var(--sombra-card); overflow: hidden; max-width: 700px; margin: 20px auto; }
.post-empresa-header { padding: 15px 20px; border-bottom: 1px solid var(--cor-borda-sutil); display: flex; align-items: center; gap: 12px; }
.post-empresa-header a { text-decoration: none; color: inherit; display: contents; }
.empresa-logo-pequena { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; padding: 0; }
.post-info-meta { display: flex; flex-direction: column; }
.post-info-meta span { line-height: 1.2; font-weight: 600; color: var(--cor-texto-principal); }
.post-info-meta small { font-size: 0.8rem; color: var(--cor-texto-secundario); }
.post-conteudo-completo { padding: 25px; }
.post-imagem-destaque { width: 100%; height: auto; border-radius: 8px; margin-bottom: 25px; padding: 0; }
.post-texto { line-height: 1.8; font-size: 1.05rem; color: var(--cor-texto-secundario); }
.post-comentarios { padding: 25px; border-top: 1px solid var(--cor-borda-sutil); background-color: var(--cor-fundo); }
.post-comentarios h2 { margin: 0 0 20px 0; font-size: 1.3rem; }

/* --- Comentários e Respostas --- */
.lista-comentarios { margin-top: 30px; display: flex; flex-direction: column; gap: 25px; }
.comentario-item { display: flex; gap: 15px; align-items: flex-start; }
.comentario-avatar img { width: 40px; height: 40px; border-radius: 50%; padding: 0; }
.comentario-body { flex-grow: 1; }
.comentario-conteudo { background-color: var(--cor-fundo-card); border-radius: 12px; padding: 12px 15px; }
.comentario-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.comentario-autor { font-weight: 600; font-size: 0.9rem; color: var(--cor-texto-principal); }
.comentario-data { font-size: 0.75rem; color: var(--cor-texto-secundario); }
.comentario-texto { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.selo-empresa { font-size: 0.7rem; background-color: var(--cor-primaria); color: white; padding: 2px 6px; border-radius: 4px; font-weight: bold; }

/* Ações e formulário de resposta */
.form-comentario { margin-top: 15px; }
.form-comentario form { display: flex; gap: 10px; align-items: flex-start; }
.form-comentario textarea { flex-grow: 1; min-height: 50px; margin-bottom: 0; }
.form-comentario button { margin-bottom: 0; flex-shrink: 0; }
.comentario-acoes { padding-left: 15px; margin-top: 5px; }
.btn-responder { background: none; border: none; color: var(--cor-texto-secundario); font-weight: bold; font-size: 0.8rem; cursor: pointer; padding: 5px; }
.btn-responder:hover { color: var(--cor-primaria); }
.form-resposta { display: none; margin-top: 10px; padding-left: 15px; }
.form-resposta form { display: flex; gap: 10px; }
.form-resposta textarea { font-size: 0.9rem; min-height: 40px; height: 40px; }

/* ==========================================================================
   29. ESTILO DE COMENTÁRIOS ANINHADOS (ESTILO INSTAGRAM REFINADO)
   ========================================================================== */

/* Remove qualquer padding indesejado dos comentários principais */
.comentario-thread.level-0 {
    padding-left: 0;
}

/* O container que agrupa um bloco de respostas */
.respostas-container {
    /* A margem esquerda empurra o bloco de respostas para a direita.
       O valor de 20px é metade da largura do avatar do comentário pai (40px),
       posicionando a futura linha vertical no centro desse avatar. */
    margin-left: 20px;

    /* O padding esquerdo cria o espaço entre a linha vertical e o conteúdo da resposta.
       Isto garante que o avatar da resposta não fique colado à linha. */
    padding-left: 25px; 

    /* Desenha a linha vertical cinzenta que conecta as respostas ao comentário pai. */
    border-left: 2px solid #e0e0e0; /* Usando uma cor sutil como var(--cor-borda-sutil) */

    /* Garante um bom espaçamento vertical entre o comentário pai e a primeira resposta */
    margin-top: 15px;

    /* Organiza as respostas em coluna com espaçamento entre elas */
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

/* Oculta a linha vertical do último comentário de um bloco para um acabamento limpo. 
   Isto é um detalhe visual opcional, mas que refina a aparência. */
.comentario-thread:last-child > .respostas-container {
    /* Se quiser que a linha vá até ao fim, pode remover este bloco. */
}