/* Namespace simples: tudo com prefixo .af- e !important quando necessário */
.af-wrap { max-width: 1100px !important; margin: 0 auto !important; padding: 8px 10px !important; }

.af-filtros { background:#fff !important; border:1px solid #e5e7eb !important; border-radius:14px !important; padding:10px !important; box-shadow:0 2px 10px rgba(2,6,23,.04) !important; }
.af-toggle { display:flex !important; gap:8px !important; align-items:center !important; font-size:14px !important; border:1px solid #e5e7eb !important; padding:8px 12px !important; border-radius:10px !important; background:#f9fafb !important; cursor:pointer !important; }
.af-form { margin-top:10px !important; }
.af-grid { display:grid !important; grid-template-columns: repeat(12,1fr) !important; gap:10px !important; }
.af-col { grid-column: span 3 !important; }
.af-col-flags { grid-column: span 6 !important; display:flex !important; flex-wrap:wrap !important; gap:8px !important; align-items:center !important; }
.af-actions { grid-column: span 12 !important; display:flex !important; gap:10px !important; justify-content:flex-end !important; }

@media (max-width: 900px) {
  .af-col { grid-column: span 6 !important; }
  .af-col-flags { grid-column: span 12 !important; }
}
@media (max-width: 640px) {
  .af-col, .af-col-flags { grid-column: span 12 !important; }
}

.af-label { font-weight:600 !important; color:#374151 !important; font-size:.9rem !important; margin-bottom:4px !important; display:block !important; }
.af-input, .af-select { width:100% !important; border:1px solid #d1d5db !important; border-radius:10px !important; padding:10px 12px !important; font-size:.95rem !important; background:#fff !important; }
.af-chip { display:inline-flex !important; gap:6px !important; align-items:center !important; border:1px solid #e5e7eb !important; border-radius:999px !important; padding:6px 10px !important; background:#f8fafc !important; font-size:.9rem !important; cursor:pointer !important; }
.af-chip input { display:none !important; }

.af-btn { border-radius:10px !important; padding:8px 12px !important; border:1px solid transparent !important; font-size:.95rem !important; }
.af-btn-primary { background:#0ea5e9 !important; color:#fff !important; }
.af-btn-link { background:transparent !important; border-color:#e5e7eb !important; color:#111827 !important; }

.af-result-info { max-width:1100px !important; margin:10px auto 8px !important; color:#4b5563 !important; font-size:.95rem !important; }

.af-grid-cards { display:grid !important; grid-template-columns: repeat(12,1fr) !important; gap:12px !important; max-width:1100px !important; margin: 0 auto !important; }
.af-card { grid-column: span 4 !important; background:#fff !important; border:1px solid #e5e7eb !important; border-radius:14px !important; overflow:hidden !important; box-shadow:0 1px 6px rgba(2,6,23,.05) !important; display:flex !important; flex-direction:column !important; }
@media (max-width: 900px){ .af-card{ grid-column: span 6 !important; } }
@media (max-width: 640px){ .af-card{ grid-column: span 12 !important; } }

.af-card-media img { width:100% !important; height:150px !important; object-fit:cover !important; display:block !important; background:#f3f4f6 !important; }
.af-card-body { padding:10px 12px !important; display:flex !important; flex-direction:column !important; gap:8px !important; }
.af-card-title { font-size:1rem !important; line-height:1.2 !important; margin:0 !important; color:#111827 !important; font-weight:700 !important; }

.af-card-meta { display:flex !important; flex-wrap:wrap !important; gap:6px !important; }
.af-badge { font-size:.75rem !important; background:#e0f2fe !important; color:#075985 !important; padding:4px 8px !important; border-radius:999px !important; border:1px solid #bae6fd !important; }
.af-badge-muted { background:#f3f4f6 !important; color:#374151 !important; border-color:#e5e7eb !important; }

.af-desc { color:#4b5563 !important; font-size:.92rem !important; margin:0 !important; }

.af-line { display:flex !important; gap:8px !important; color:#374151 !important; font-size:.9rem !important; align-items:flex-start !important; }
.af-line i { margin-top:2px !important; }

.af-contacts { display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
.af-contact { display:inline-flex !important; gap:6px !important; align-items:center !important; padding:6px 10px !important; border:1px solid #e5e7eb !important; border-radius:10px !important; background:#f9fafb !important; font-size:.9rem !important; color:#0f172a !important; text-decoration:none !important; }

.af-flags { display:flex !important; flex-wrap:wrap !important; gap:6px !important; }
.af-flag { display:inline-flex !important; gap:6px !important; align-items:center !important; background:#f1f5f9 !important; color:#0f172a !important; border:1px solid #e2e8f0 !important; padding:4px 8px !important; border-radius:999px !important; font-size:.8rem !important; }

.af-footer { display:flex !important; align-items:center !important; justify-content:space-between !important; margin-top:4px !important; }
.af-rating i { font-size:.95rem !important; color:#f59e0b !important; }
.af-rating-num, .af-rating-cnt { color:#475569 !important; font-size:.9rem !important; }
.af-social { display:flex !important; gap:10px !important; }
.af-social-link { color:#0f172a !important; font-size:1.1rem !important; }

.af-pager { display:flex !important; gap:8px !important; justify-content:center !important; margin:16px 0 8px !important; }
.af-page { padding:6px 10px !important; border:1px solid #e5e7eb !important; border-radius:8px !important; text-decoration:none !important; color:#0f172a !important; }
.af-page.is-active { background:#0ea5e9 !important; color:#fff !important; border-color:#0ea5e9 !important; }



/* === HOTFIX: Filtro invisível sob Kubio === */
.af-filtros * { 
  opacity: 1 !important;
  color: #0f172a !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.af-filtros { 
  background:#ffffff !important; 
  border:1px solid #dadee3 !important; 
  box-shadow:0 2px 10px rgba(2,6,23,.06) !important; 
}

.af-toggle {
  display:flex !important; align-items:center !important; gap:8px !important;
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  padding:10px 14px !important;
  font-weight:600 !important;
  box-shadow:0 1px 6px rgba(2,6,23,.08) !important;
  z-index: 5 !important;
}
.af-toggle i, .af-toggle span { color:#0f172a !important; }
.af-toggle:hover { background:#f3f4f6 !important; border-color:#b6c2cf !important; }

.af-label { color:#111827 !important; }
.af-input, .af-select { color:#111827 !important; background:#fff !important; }

/* === Ajuste selects iOS/iPhone === */
.af-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  min-height: 42px !important;   /* altura confortável para toque */
  line-height: 1.4 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background-color: #fff !important;
  background-image: none !important;
}

.af-select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%230f172a' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5.25 7.5l4.75 4.75L14.75 7.5z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 36px !important; /* espaço para a setinha */
}