/* ===== Painel Conta & Loja: visual Youzify ===== */

.recifes-account-panel { margin-bottom: 20px; font-family: inherit; }
.recifes-account-panel .youzify-widget-title i { margin-right: 8px; }

/* lista vertical */
.recifes-yz-list { list-style: none; margin: 8px 0 0; padding: 0; }
.recifes-yz-row  { margin: 0; padding: 0; }

.recifes-yz-link{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f7; 
  text-decoration: none;
}

.recifes-yz-link:hover{ background: #f8fafc; }

.recifes-yz-badge{
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex: 0 0 38px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.recifes-yz-badge i{ font-size: 16px; line-height: 1; }

.recifes-yz-label{
  color: #243b53; font-weight: 600; font-size: 14.5px; line-height: 1.2;
  letter-spacing: .1px; font-family: inherit;
}

/* Paleta agradável, inspirada no Youzify */
.yzc-blue   { background: #3b82f6; }
.yzc-indigo { background: #6366f1; }
.yzc-teal   { background: #14b8a6; }
.yzc-green  { background: #10b981; }
.yzc-purple { background: #8b5cf6; }
.yzc-orange { background: #f59e0b; }
.yzc-pink   { background: #ec4899; }
.yzc-yellow { background: #eab308; color:#111827; } /* contraste melhor */
.yzc-cyan   { background: #06b6d4; }
.yzc-slate  { background: #475569; }

/* remove borda da última linha */
.recifes-yz-list .recifes-yz-row:last-child .recifes-yz-link{ border-bottom: 0; }

/* Botão seguir/favoritar — força estilo mesmo com resets do tema */
.rec-soc-follow-wrap { display:inline-flex; align-items:center; gap:.5rem; }

.rec-soc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:6px 14px;
  border:1px solid #cbd5e1 !important;
  border-radius:999px !important;
  background:#ffffff !important;
  color:#0f172a !important;
  font-weight:600; line-height:1; text-decoration:none;
  cursor:pointer; white-space:nowrap;
}

.rec-soc-btn:hover{ background:#f8fafc !important; border-color:#94a3b8 !important; }

.rec-soc-btn[data-state="on"]{
  background:#0ea5e9 !important;
  border-color:#0ea5e9 !important;
  color:#ffffff !important;
}

.rec-soc-follow-count{ font-size:.95rem; opacity:.85; }

/* ===== Ajustes extras para Tema Escuro ===== */
body.dark-mode .recifes-yz-link {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode .recifes-yz-link:hover {
  background: rgba(255,255,255,0.05);
}

body.dark-mode .recifes-yz-label {
  color: #f1f5f9; /* texto claro */
}

body.dark-mode .recifes-yz-badge {
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Ocultar estatísticas padrão do Youzify no header (Posts/Comentários/Visualizações do blog) */
/* .youzify-profile-header .youzify-user-statistics, */
/* .youzify-profile-header .youzify-user-stats { display: none !important; } */

/* Bloco novo: Postagens no Feed */
.rec-soc-stat-box{
  display:inline-flex; flex-direction:column; align-items:center;
  min-width:90px; margin-left:16px; padding:6px 10px;
  background: rgba(255,255,255,.08); border-radius:10px;
}
.rec-soc-stat-num{
  font-weight:800; font-size:22px; line-height:1; color:#fff;
}
.rec-soc-stat-label{
  margin-top:2px; font-size:11px; letter-spacing:.6px;
  color:rgba(255,255,255,.85);
}

/* Tema claro (se o header for claro) */
body:not(.dark-mode) .rec-soc-stat-box{
  background: rgba(15,23,42,.06);
}
body:not(.dark-mode) .rec-soc-stat-num{ color:#0f172a; }

.rec-soc-statbar{
  margin: 12px 0 0;
}
.rec-soc-stat-box{
  display:inline-flex; flex-direction:column; align-items:center;
  min-width:90px; margin-right:12px; padding:6px 10px;
  background: rgba(15,23,42,.06);
  border-radius:10px;
}
.rec-soc-stat-num{ font-weight:800; font-size:22px; line-height:1; color:#0f172a; }
.rec-soc-stat-label{ margin-top:2px; font-size:11px; letter-spacing:.6px; color:#334155; }

/* modo escuro */
body.dark-mode .rec-soc-stat-box{ background: rgba(255,255,255,.08); }
body.dark-mode .rec-soc-stat-num{ color:#fff; }
body.dark-mode .rec-soc-stat-label{ color:rgba(255,255,255,.85); }

/* ==== Cards de Atividade (Empresa / Produto) ==== */
.rec-soc-card{ display:flex; gap:14px; padding:12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.rec-soc-card-media{ flex:0 0 96px; }
.rec-soc-card-thumb{ width:96px; height:96px; border-radius:10px; object-fit:cover; background:#f1f5f9; }
.rec-soc-thumb-placeholder{ background:linear-gradient(135deg,#e2e8f0,#f8fafc); }

.rec-soc-card-body{ display:flex; flex-direction:column; gap:6px; }
.rec-soc-card-title{ font-weight:700; font-size:16px; color:#0f172a; }
.rec-soc-card-cta{ color:#334155; font-size:14px; }
.rec-soc-card-actions{ display:flex; align-items:center; gap:10px; margin-top:6px; }

.rec-soc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:6px 14px; border:1px solid #cbd5e1; border-radius:999px;
  background:#ffffff; color:#0f172a; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap;
}
.rec-soc-btn:hover{ background:#f8fafc; border-color:#94a3b8; }
.rec-soc-btn[data-state="on"]{ background:#0ea5e9; border-color:#0ea5e9; color:#fff; }
.rec-soc-follow-count{ font-size:.95rem; opacity:.85; }

body.dark-mode .rec-soc-card{ background:#0b1220; border-color:#1f2a44; }
body.dark-mode .rec-soc-card-title{ color:#e5e7eb; }
body.dark-mode .rec-soc-card-cta{ color:#cbd5e1; }

/* ===== Card Empresa 80/20 ===== */
.rec-card{ border:1px solid #e5e7eb; border-radius:14px; background:#fff; padding:14px; }
.rec-card.twocol{
  display:grid; grid-template-columns: 4fr 1fr; gap:16px; align-items:center;
}
.rec-card__col--left{ min-width:0; }
.rec-card__title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rec-card__title a{ font-weight:800; font-size:16px; color:#0f172a; text-decoration:none; }
.rec-card__cta{ margin-top:6px; color:#334155; font-size:14px; line-height:1.45; }

.rec-badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  border-radius:999px; font-size:11px; letter-spacing:.3px; font-weight:700;
  background:#eff6ff; color:#1d4ed8; border:1px solid #dbeafe;
}

/* Coluna direita (20%) */
.rec-card__col--right{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.rec-card__media{ display:block; width:100%; }
.rec-card__logo{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:5%; /* pedido: 5% */
  background:#f1f5f9;
}
.rec-card__logo--ph{ background:linear-gradient(135deg,#e2e8f0,#f8fafc); }

.rec-card__actions{ display:flex; flex-direction:column; gap:8px; width:100%; align-items:center; }
.rec-soc-follow-count{ font-size:12.5px; color:#64748b; }

/* Botão primário (mesmo estilo do "Adicionar ao Carrinho") */
.rec-soc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:8px 14px; border:1px solid #cbd5e1; border-radius:999px;
  background:#ffffff; color:#0f172a; font-weight:700; line-height:1; text-decoration:none; cursor:pointer;
  width:100%;
}
.rec-soc-btn--primary{ background:#0ea5e9; border-color:#0ea5e9; color:#fff; }
.rec-soc-btn--primary:hover{ filter:brightness(0.95); }
.rec-soc-btn[data-state="on"]{ background:#0ea5e9; border-color:#0ea5e9; color:#fff; } /* mantém cheio quando já segue */

/* Responsivo: empilha abaixo de 768px */
@media (max-width: 768px){
  .rec-card.twocol{ grid-template-columns: 1fr; }
  .rec-card__col--right{ align-items:flex-start; }
  .rec-card__logo{ width:140px; }
  .rec-soc-btn{ width:auto; }
}

/* Dark mode (se usar .dark-mode no body) */
body.dark-mode .rec-card{ background:#0b1220; border-color:#1f2a44; }
body.dark-mode .rec-card__title a{ color:#e5e7eb; }
body.dark-mode .rec-card__cta{ color:#cbd5e1; }
body.dark-mode .rec-badge{ background:rgba(59,130,246,.15); color:#bfdbfe; border-color:rgba(59,130,246,.25); }