/* ===== BELS Search – CSS compatível com o shortcode/JS atuais ===== */

.bels { --gap:18px; --radius:16px; --muted:#666; --border:#e7e4dc; font-family: inherit; }

/* Barra */
.bels .bels-bar{ display:flex; gap:var(--gap); max-width:1100px; margin:24px auto 14px; padding:0 24px; }
.bels .bels-bar input#bels-q{
  flex:1; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; outline:none;
}
.bels .bels-bar .bels-btn{
  padding:12px 16px; border-radius:var(--radius); border:1px solid var(--border);
  background:#111; color:#fff; cursor:pointer; transition:transform .06s ease, opacity .15s;
}
.bels .bels-bar .bels-btn:hover{ transform:translateY(-1px); opacity:.95; }

/* Status */
.bels .bels-status{ max-width:1100px; margin:6px auto 10px; padding:0 24px; color:var(--muted); font-size:.95rem; }

/* Grid de resultados (equivalente ao .bels-results-grid antigo) */
.bels .bels-results{
  max-width:1100px; margin:40px auto 80px; padding:0 24px;
  display:grid; gap:18px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){ .bels .bels-results{grid-template-columns:repeat(2,1fr);} }
@media (max-width:580px){ .bels .bels-results{grid-template-columns:1fr;} }

/* Card (equivalente aos .br-*) */
.bels .bels-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; color:inherit; box-shadow:0 10px 30px rgba(0,0,0,.06);
  text-decoration:none;
}
.bels .bels-thumb{ aspect-ratio:16/9; background:#f2efe8; display:block; width:100%; height:auto; object-fit:cover; }
.bels .bels-body{ padding:14px; display:flex; flex-direction:column; gap:6px; }
.bels .bels-meta{ font-size:12px; color:var(--muted); }
.bels .bels-title{ font-weight:700; line-height:1.25; }
.bels .bels-excerpt{ font-size:14px; color:#444; }
.bels .bels-link{ margin-top:auto; font-size:.9rem; text-decoration:underline; color:#111; }

/* Estados */
.bels .bels-empty, .bels .bels-error{
  max-width:1100px; margin:24px auto; padding:0 24px; color:var(--muted); grid-column:1 / -1; text-align:center;
}

/* Skeleton (se você usar depois) */
.bels .bels-skeleton{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; animation: belsPulse 1.2s infinite; }
.bels .bels-skeleton .thumb{ width:100%; aspect-ratio:16/9; background:#f2f3f5; }
.bels .bels-skeleton .lines{ padding:12px; }
.bels .bels-skeleton .line{ height:10px; background:#eceef1; margin:8px 0; border-radius:999px; }
@keyframes belsPulse{ 0%{opacity:.85} 50%{opacity:.55} 100%{opacity:.85} }

/* Pequenos ajustes pra temas que estilizam inputs/links globalmente */
.bels a{ color:inherit; text-decoration:none; }
.bels a:hover .bels-title{ text-decoration:underline; }
.bels input, .bels button{ font: inherit; }