.mda-af-card-item {
	list-style: none;
}

.mda-af-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}

/* Quando o card esta dentro da entrada de activity do BuddyBoss, o container
   (borda, fundo, espacamento) ja e do BuddyBoss — o card nao repete isso para
   nao criar "caixa dentro de caixa". */
.mda-af-card--embedded {
	background: none;
	border: 0;
	border-radius: 0;
	margin-bottom: 0;
}

.mda-af-card--embedded .mda-af-card__body {
	padding: 12px 0 0;
}

.mda-af-card--embedded .mda-af-card__image {
	border-radius: 8px;
	overflow: hidden;
}

/* ---- Cabecalho (avatar + autoria) ---- */

.mda-af-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
}

.mda-af-card__avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
}

.mda-af-card__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.mda-af-card__action {
	font-size: 13px;
	opacity: 0.7;
}

/* ---- Imagem: formato fixo 580x279 ----
   O aspect-ratio + object-fit garantem o formato no navegador mesmo para
   imagens antigas, que nao tem o arquivo 580x279 gerado no servidor. */

.mda-af-card__image {
	display: block;
	line-height: 0;
	width: 100%;
	max-width: 580px;
	aspect-ratio: 580 / 279;
	background: rgba(0, 0, 0, 0.04);
	margin: 0 auto;
}

.mda-af-card__image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* Fallback para navegadores sem aspect-ratio: altura proporcional a 580x279. */
@supports not (aspect-ratio: 1) {
	.mda-af-card__image {
		position: relative;
		padding-top: 48.1%;
	}

	.mda-af-card__image img {
		position: absolute;
		inset: 0;
	}
}

/* ---- Corpo (badge + titulo) ---- */

.mda-af-card__body {
	padding: 14px;
}

.mda-af-card__badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	margin-bottom: 8px;
}

.mda-af-card__title {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
}

.mda-af-card__title a {
	text-decoration: none;
}

.mda-af-card__title a:hover {
	text-decoration: underline;
}

/* ---- Anuncios ---- */

.mda-af-ad-item {
	list-style: none;
}

/* Wrapper do shortcode: mesmo bloco, mas fora da <ul> do feed. Nao impoe
   largura nem margem para se adaptar ao container onde foi embutido
   (sidebar, coluna do Elementor, conteudo de pagina). */
.mda-af-ad-embed {
	display: block;
}

/* ---- Bloco embutido encostando nas bordas do container ----

   O criativo deve ocupar toda a largura do widget, sem respiro em volta. Os
   !important existem porque o padding vem do tema, com especificidade maior que
   a de uma classe simples. */
.mda-af-ad-embed,
.mda-af-ad-embed * {
	padding: 0 !important;
}

/* O :has() limita o efeito ao widget que realmente contem um anuncio: zerar
   padding e fundo em .widget direto atingiria todos os widgets da sidebar.

   Alem do fundo, saem borda e sombra: sozinhas elas continuariam desenhando a
   moldura do card que o fundo transparente deveria eliminar. */
.widget:has(.mda-af-ad-embed),
.widget_block:has(.mda-af-ad-embed) {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* O editor de blocos deixa <p> vazios em volta do shortcode. Eles nao tem
   conteudo, mas somam a altura da entrelinha e afastam o criativo das bordas. */
.widget:has(.mda-af-ad-embed) > p:empty,
.widget_block:has(.mda-af-ad-embed) > p:empty {
	display: none !important;
}

/* Como todo padding foi zerado acima, o respiro dos pontos em relacao ao
   criativo passa a vir de margin. */
.mda-af-ad-embed .mda-af-ad__dots {
	margin-top: 10px;
}

/* Sem moldura: o criativo do anunciante ja traz o proprio fundo e cantos
   arredondados, entao um card do plugin em volta viraria borda dupla. Quem
   define a aparencia da caixa e o container onde o bloco esta (item do feed,
   widget da sidebar, coluna do Elementor). */
.mda-af-ad {
	background: none;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 16px;
	/* Zera a entrelinha herdada do tema: sem isso sobram alguns pixels de faixa
	   branca abaixo da imagem. As imagens sao display:block, entao normalmente
	   isso nem seria necessario — fica como garantia contra tema que reintroduza
	   o espaco. */
	line-height: 0;
}

/* Restaura entrelinha nos trechos com texto de verdade. */
.mda-af-ad__heading,
.mda-af-ad__fallback,
.mda-af-ad__native-body {
	line-height: 1.4;
}

.mda-af-ad__banner {
	display: block;
	line-height: 0;
}

/* Ocupa 100% da largura disponivel, sem limite de 580px: dentro do feed isso
   faz o criativo encostar nas bordas do card, sem faixa branca nas laterais.
   A altura segue a proporcao do arquivo enviado — banner unico nao precisa de
   crop forcado, porque nao ha outros criativos ao lado para igualar altura. */
.mda-af-ad__banner img {
	width: 100%;
	height: auto;
	display: block;
}

.mda-af-ad__fallback {
	display: block;
	padding: 12px 0;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.mda-af-ad__heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.6;
	/* Alinhado com a borda do criativo: sem moldura, recuo lateral deixaria o
	   titulo desalinhado da imagem. */
	padding: 0 0 8px;
}

/* ---- Tipo: Grade ---- */

/* Sem padding: o espacamento interno existia por causa da moldura do card, que
   nao existe mais. O gap entre os criativos continua. */
.mda-af-ad__grid {
	display: grid;
	grid-template-columns: repeat(var(--mda-af-columns, 2), minmax(0, 1fr));
	gap: 10px;
}

.mda-af-ad__grid-item {
	display: block;
	line-height: 0;
}

.mda-af-ad__grid-item img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---- Proporcao unica (bloco com varios criativos juntos) ----

   Aplicada pelo renderizador so quando o bloco mostra mais de um criativo ao
   mesmo tempo, onde alturas diferentes desalinhariam a grade / o carrossel. Num
   bloco de anuncio unico o recorte nao alinha nada e apenas corta a arte do
   anunciante, o que fica pior ainda em container estreito (sidebar).

   height: auto e obrigatorio: com height: 100% o navegador tenta resolver a
   altura contra um pai sem altura definida, o resultado briga com o
   aspect-ratio e o slide colapsa (fazendo o seguinte aparecer sobreposto). */
.mda-af-ad--uniform .mda-af-ad__slide img,
.mda-af-ad--uniform .mda-af-ad__grid-item img {
	height: auto;
	aspect-ratio: 580 / 279;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 600px) {
	.mda-af-ad__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Tipo: Slide ---- */

.mda-af-ad__slider {
	position: relative;
	line-height: 0;
}

/* Rolagem nativa com scroll-snap: desliza com o dedo no celular sem precisar
   de biblioteca de carrossel.
   align-items: flex-start impede que um criativo mais alto estique os outros
   (era o que deixava faixa branca embaixo dos slides menores). */
.mda-af-ad__track {
	display: flex;
	align-items: flex-start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.mda-af-ad__track.is-dragging {
	cursor: grabbing;
	/* Durante o arraste o snap e desligado pelo JS; sem isso a rolagem pularia
	   para o ponto de encaixe a cada pixel de movimento. */
	scroll-snap-type: none;
	user-select: none;
}

.mda-af-ad__track::-webkit-scrollbar {
	display: none;
}

.mda-af-ad__slide {
	flex: 0 0 100%;
	max-width: 100%;
	scroll-snap-align: start;
	display: block;
	line-height: 0;
}

/* Por padrao o criativo aparece na proporcao em que foi enviado, sem recorte —
   o recorte para proporcao unica fica na regra .mda-af-ad--uniform mais abaixo,
   aplicada so quando ha varios criativos visiveis juntos. */
.mda-af-ad__slide img {
	width: 100%;
	height: auto;
	display: block;
	/* Sem isso, arrastar a imagem dispara o drag-and-drop nativo do navegador
	   (com a miniatura fantasma) em vez de rolar o carrossel. */
	-webkit-user-drag: none;
	user-select: none;
}

/* ---- Navegacao por pontos ----
   Fica abaixo do criativo, entao nao cobre a arte do anunciante (era o problema
   das setas sobrepostas). Os !important e o reset de appearance existem porque o
   botao herda o estilo de botao do tema do BuddyBoss (fundo azul, cantos retos,
   padding e min-width), cuja especificidade e maior que a de uma classe simples. */
.mda-af-ad__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	padding: 10px 0 2px;
	line-height: 0;
}

.mda-af-ad .mda-af-ad__dot {
	-webkit-appearance: none;
	appearance: none;
	width: 8px !important;
	height: 8px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	/* Azul claro no inativo e azul cheio no ativo. Cores explicitas em vez de
	   opacidade: o resultado nao muda conforme o fundo atras do bloco. */
	background: #8080ff !important;
	box-shadow: none !important;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.mda-af-ad .mda-af-ad__dot:hover {
	background: #4d4dff !important;
}

.mda-af-ad .mda-af-ad__dot.is-active {
	background: #0000ff !important;
	transform: scale(1.3);
}

.mda-af-ad .mda-af-ad__dot:focus-visible {
	outline: 2px solid #0000ff !important;
	outline-offset: 3px;
}

/* ---- Tipo: Nativo ---- */

.mda-af-ad__native-image {
	display: block;
	line-height: 0;
	width: 100%;
	aspect-ratio: 580 / 279;
	background: rgba(0, 0, 0, 0.04);
}

.mda-af-ad__native-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.mda-af-ad__native-body {
	/* Sem recuo lateral, para o texto alinhar com a borda da imagem. */
	padding: 12px 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.mda-af-ad__native-title {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
}

.mda-af-ad__native-title a {
	text-decoration: none;
}

.mda-af-ad__cta {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}