:root {
  --pm-fb: #1877f2;
  --pm-share: #2563eb;
  --pm-line: #06c755;
  --pm-insta: #db2777;
  --pm-whatsapp: #16a34a;
  --pm-youtube: #dc2626;
  --pm-app: #1e40af;
  --gray-text: #6b7280;
}

.pm-social-container {
  max-width: 1100px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

.pm-social-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-text);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Grid de 6 colunas para divisões de 2 e 3 itens */
.pm-social-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.2rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.7rem;
  text-decoration: none;
  transition:
    transform 0.2s,
    filter 0.2s;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.social-button:active {
  transform: scale(0.97);
}

/* Mobile Layout: 3 Linhas */
/* Linha 1: 2 itens (span 3) */
.btn-share {
  grid-column: span 3;
  background-color: var(--pm-share);
  color: white;
}
.btn-share-fb {
  grid-column: span 3;
  background-color: var(--pm-fb);
  color: white;
}

/* Linha 2: 3 itens (span 2) */
.btn-share-line {
  grid-column: span 2;
  background-color: var(--pm-line);
  color: white;
}
.btn-whats {
  grid-column: span 2;
  background-color: #f0fdf4;
  color: var(--pm-whatsapp);
  border-color: #bbf7d0;
}
.btn-app {
  grid-column: span 2;
  background-color: #eff6ff;
  color: var(--pm-app);
  border-color: #bfdbfe;
  font-size: 0.55rem;
}

/* Linha 3: 3 itens (span 2) */
.btn-fb {
  grid-column: span 2;
  background-color: #f0f7ff;
  color: var(--pm-fb);
  border-color: #cce4ff;
  font-size: 0.7rem;
}
.btn-insta {
  grid-column: span 2;
  background-color: #fdf2f8;
  color: var(--pm-insta);
  border-color: #fbcfe8;
}
.btn-yt {
  grid-column: span 2;
  background-color: #fef2f2;
  color: var(--pm-youtube);
  border-color: #fecaca;
}

/* Ícone aumentado para 1.1rem para melhor legibilidade */
.icon-svg {
  width: 1.4rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.icon-p {
  background-color: var(--pm-app);
  color: white;
  padding: 1px 3px;
  border-radius: 2px;
  font-size: 8px;
  font-weight: 900;
}

/* Desktop Layout: Linha Única */
@media (min-width: 992px) {
  .pm-social-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .social-button {
    flex: 1;
    font-size: 0.72rem;
    padding: 0.75rem 0.25rem;
    white-space: nowrap;
  }
  /* Prioridade visual no desktop */
  .btn-share {
    order: -2;
  }
  .btn-share-fb {
    order: -1;
  }
  .btn-app {
    font-size: 0.72rem;
  }
  .btn-fb {
    font-size: 0.72rem;
  }
}
/* 2026-01-30 — Variante mini (apenas 2 botões) */
.pm-social--mini .pm-social-grid {
  grid-template-columns: repeat(2, 1fr);
}

.pm-social--mini .btn-share,
.pm-social--mini .btn-share-fb {
  grid-column: auto;
}

/* Se algum botão extra aparecer por engano, esconde */
.pm-social--mini .btn-share-line,
.pm-social--mini .btn-whats,
.pm-social--mini .btn-app,
.pm-social--mini .btn-fb,
.pm-social--mini .btn-insta,
.pm-social--mini .btn-yt {
  display: none !important;
}