.anch-athletes-widget{--anch-aw-accent:#d47745;--anch-aw-text:#182033;--anch-aw-muted:#6a7485;--anch-aw-line:#e9edf2;font-family:var(--anch-font-family,inherit)}
.anch-athletes-widget *{box-sizing:border-box}

/* Campo de busca por nome — só aparece quando a lista tem itens o
   suficiente pra valer a pena (ver Athletes_Widget::render_inner()). Filtra
   junto com a aba Atleta/Cavalo ativa (ver athletes-widget.js); se ainda
   sobrar página pra carregar, o próprio JS carrega o resto sozinho assim
   que a pessoa começa a digitar. */
.anch-athletes-widget-search{margin:0 0 14px}
.anch-athletes-widget-search-input{width:100%;padding:9px 14px 9px 34px;border:1px solid var(--anch-aw-line);border-radius:999px;font-size:14px;color:var(--anch-aw-text);background-color:#fbfbfc;background-repeat:no-repeat;background-position:12px center;background-size:13px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%238a8f98' width='14' height='14'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");font-family:var(--anch-font-family,inherit)}
.anch-athletes-widget-search-input:focus{outline:none;border-color:var(--anch-aw-accent)}
.anch-athletes-widget-search-empty{margin:10px 0 0;font-size:12.5px;color:var(--anch-aw-muted);text-align:center}

/* Abas em texto simples com sublinhado na ativa, separadas por uma linha
   fina embaixo — no estilo clássico de filtro de federação esportiva
   (tipo "All / Riders / Horses"), em vez de botões em cápsula cheios de
   fundo colorido. Mais discreto e, principalmente, cabe sem apertar numa
   coluna estreita, já que não carrega contador dentro do botão. */
.anch-athletes-widget-tabs{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:8px;padding:0 0 10px;margin:0 0 14px;border-bottom:1px solid var(--anch-aw-line)}
.anch-athletes-widget-tab{display:inline-flex;align-items:center;gap:8px;padding:0 0 11px;margin:0 0 -11px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--anch-aw-muted);font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease}
/* Aba ativa: ícone E texto na cor de destaque (não só o sublinhado) — pedido
   do Vini, pra ficar óbvio de relance qual filtro (Atleta/Cavalo) está
   selecionado, mesmo no chapéu do Atleta, que antes já era laranja o tempo
   todo (ativo ou não) e por isso não ajudava a diferenciar o estado. Os
   seletores de ícone (.anch-aw-icon, não .anch-aw-icon--cavaleiro/--cavalo)
   ficam escopados só dentro de .anch-athletes-widget-tab, então não mudam a
   cor do mesmo ícone usado no avatar de cada item da lista mais abaixo. */
.anch-athletes-widget-tab .anch-aw-icon{color:var(--anch-aw-muted)}
.anch-athletes-widget-tab.is-active{color:var(--anch-aw-accent);border-bottom-color:var(--anch-aw-accent)}
.anch-athletes-widget-tab.is-active .anch-aw-icon{color:var(--anch-aw-accent)}
/* Ao passar o mouse numa aba que não está ativa, texto e ícone também
   assumem a cor de destaque da marca (mesma laranja usada na aba ativa e
   no ícone de Atleta) — dá o mesmo feedback visual de "isso é clicável"
   que os links da lista logo abaixo. A ativa não muda no hover porque já
   está destacada (ícone, texto e sublinhado já laranja). */
.anch-athletes-widget-tab:not(.is-active):hover{color:var(--anch-aw-accent)}
.anch-athletes-widget-tab:not(.is-active):hover .anch-aw-icon{color:var(--anch-aw-accent)}

/* Indicador de tipo — ícone pictórico (chapéu de cowboy pra Atleta, cabeça
   de cavalo pra Cavalo), não emoji. O arquivo em si (includes/assets/img/)
   é só preto; aplicado via CSS "mask" (a imagem vira uma máscara de
   recorte, preenchida com "background-color:currentColor") pra herdar a
   cor certa de cada tipo/estado, do mesmo jeito que um SVG com
   "currentColor" faria. Usado nas abas de filtro (cor sobrescrita acima,
   pra refletir o estado ativo/inativo da aba) e também no avatar de cada
   item da lista (mais abaixo, cor fixa por tipo), no lugar da letra fixa
   (A/C) de antes. */
.anch-aw-icon{flex:0 0 auto;width:var(--anch-aw-tab-icon-size,32px);height:var(--anch-aw-tab-icon-size,32px);display:inline-block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.anch-aw-icon--cavaleiro{color:var(--anch-aw-accent)}
.anch-aw-icon--cavalo{color:#8f97a8}

/* Lista em "cartões" soltos (sem linhas divisórias), com avatar mostrando
   o mesmo ícone pictórico da aba (chapéu/cabeça de cavalo) num círculo de
   cor — visual mais parecido com um app moderno de contatos do que uma
   lista de links simples, e o tipo fica óbvio de relance mesmo sem ler o
   nome. */
.anch-athletes-widget-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.anch-athletes-widget-item.is-hidden{display:none}
.anch-athletes-widget-link{display:flex;align-items:center;gap:14px;padding:10px 8px;margin:0 -8px;border-radius:12px;color:var(--anch-aw-text);font-size:var(--anch-aw-name-size,15px);line-height:1.25;text-decoration:none;transition:background .15s ease,color .15s ease}
/* Ao passar o mouse num nome da lista, o nome e o ícone do avatar assumem
   a cor de destaque da marca (a mesma laranja das abas/ícone de Atleta),
   além do fundo cinza claro de sempre — deixa bem claro que é clicável. */
a.anch-athletes-widget-link:hover{background:#f4f5f8;color:var(--anch-aw-accent)}
a.anch-athletes-widget-link:hover .anch-aw-icon{color:var(--anch-aw-accent)}
span.anch-athletes-widget-link{color:var(--anch-aw-muted);cursor:default}

/* Tamanho vem de --anch-aw-avatar-size (tela "ANCH Suite → Aparência"); o
   ícone dentro da bolinha usa 70% desse tamanho, então cresce/encolhe junto
   sem precisar de um segundo número pra configurar. */
.anch-aw-avatar{flex:0 0 auto;width:var(--anch-aw-avatar-size,60px);height:var(--anch-aw-avatar-size,60px);border-radius:50%;display:flex;align-items:center;justify-content:center}
.anch-aw-avatar .anch-aw-icon{width:70%;height:70%}
.anch-aw-avatar--cavaleiro{background:#fbe9dd;color:var(--anch-aw-accent)}
.anch-aw-avatar--cavaleiro{background:color-mix(in srgb,var(--anch-aw-accent) 16%,#fff)}
.anch-aw-avatar--cavalo{background:#eef0f4;color:var(--anch-aw-muted)}

.anch-athletes-widget-name-wrap{min-width:0;display:flex;flex-direction:column;gap:0}
.anch-athletes-widget-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.anch-athletes-widget-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--anch-aw-type-size,12.5px);font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--anch-aw-muted)}

.anch-athletes-widget-more{display:block;width:100%;margin-top:14px;padding:10px 12px;border:1px solid var(--anch-aw-line);border-radius:999px;background:#fff;color:var(--anch-aw-text);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.anch-athletes-widget-more:hover{background:var(--anch-aw-text);border-color:var(--anch-aw-text);color:#fff}
.anch-athletes-widget-more[disabled]{opacity:.6;cursor:default}
.anch-athletes-widget-empty{color:var(--anch-aw-muted);font-size:13px}

/* Bloco pronto pra colar direto no conteúdo de uma página (perfil do
   atleta / perfil do animal) ou via shortcode numa coluna do construtor
   de página — pensado pra ficar numa coluna estreita ao lado do conteúdo
   principal, não esticado na largura toda. Barra degradê no topo +
   cabeçalho com "marca" de duas bolinhas dão uma identidade visual
   própria ao card, em vez de uma caixa branca genérica. */
.anch-athletes-widget-page-block{position:relative;overflow:hidden;max-width:360px;margin:0;padding:20px 18px 18px;border:1px solid #ecedf1;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(17,24,39,.06);font-family:var(--anch-font-family,inherit)}
.anch-athletes-widget-page-block::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--anch-aw-accent),#1f2a44)}
.anch-athletes-widget-heading{display:flex;align-items:center;gap:9px;margin:0 0 14px}
/* !important necessário aqui: alguns temas de construtor de página (ex.:
   Avada/Fusion Builder) aplicam a própria "tipografia responsiva" — com
   !important — em qualquer título h1-h6 colado dentro de um elemento de
   texto do construtor, inclusive este h2 quando a lista aparece via
   [anch_atletas_cavalos] colado manualmente numa coluna. Sem o !important
   aqui, o tamanho configurado em "Aparência" é ignorado nesses casos,
   mesmo com a variável CSS certa aplicada (visto direto no navegador: a
   variável chegava correta no elemento, mas o tema sobrescrevia por cima). */
.anch-athletes-widget-heading h2{margin:0;font-size:var(--anch-aw-heading-size,15px) !important;color:var(--anch-aw-text);font-weight:800;letter-spacing:-.01em}
/* Duas bolinhas lado a lado, sem sobrepor uma na outra — evita qualquer
   efeito de "mordida"/corte visual que um ícone de círculos sobrepostos
   podia dar em telas menores ou zoom diferente. */
.anch-aw-brand{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.anch-aw-brand::before,.anch-aw-brand::after{content:"";width:9px;height:9px;border-radius:50%}
.anch-aw-brand::before{background:var(--anch-aw-accent)}
.anch-aw-brand::after{background:var(--anch-aw-text)}

@media(max-width:480px){
	.anch-athletes-widget-tab{font-size:14.5px;padding:9px 8px}
	.anch-athletes-widget-link{font-size:var(--anch-aw-name-size-mobile,16px);padding:9px 8px}
	/* Nunca menor que 64px no celular, mesmo que o valor configurado em
	   "Aparência" seja menor — mas respeita um valor MAIOR configurado ali. */
	.anch-aw-avatar{width:max(var(--anch-aw-avatar-size,60px),64px);height:max(var(--anch-aw-avatar-size,60px),64px)}
	.anch-athletes-widget-page-block{padding:18px 16px 16px;max-width:none}
	/* Nunca menor que 15.5px no celular, mesmo que o valor configurado em
	   "Aparência" seja menor — mas respeita um valor MAIOR configurado ali. */
	.anch-athletes-widget-heading h2{font-size:max(var(--anch-aw-heading-size,15px),15.5px) !important}
}