/* =====================================================================
 * Ultrapack Changelog
 * Estilo escopado em .up-clog-wrap. Paleta e chrome de card alinhados ao
 * bloco "Atualizacoes Recentes" da home ([ultrapack_destaques]):
 *   texto #49546c | versao/pill #b7545b sobre rgba(183,84,91,.10)
 *   categoria #ac6066 | borda #eaeaea | radius 14 | hover sobe + borda rosa
 * ===================================================================== */

.up-clog-wrap {
	--up-clog-text: #49546c;
	--up-clog-muted: #8a8f9c;
	--up-clog-rose: #b7545b;
	--up-clog-rose-soft: rgba(183, 84, 91, .10);
	--up-clog-cat: #ac6066;
	--up-clog-border: #eaeaea;
	--up-clog-bg-soft: #f6f7f9;
	--up-clog-shadow: 0 0 19px -4px rgba(91, 91, 91, .16);
	--up-clog-shadow-hover: 0 12px 28px -8px rgba(91, 91, 91, .32);
	--up-clog-dl: #4d546c;
	--up-clog-dl-hover: #6d7285;
	/* Item que o usuario JA baixou: um passo acima do hover na mesma escala
	   (#4d546c -> #6d7285 -> #7d8192 -> #8d909f), com o hover dele um passo
	   adiante para o botao continuar respondendo ao mouse.

	   O repouso do "ja baixado" subiu de #6d7285 para #7d8192 em 07/09, a
	   pedido do Marcus. Alem de clarear, isso desempata com a pagina do item,
	   onde #6d7285 e o cinza transitorio de "Aguarde..." (ultrapack-single.js):
	   com os dois valores iguais, "baixando agora" e "ja baixado" pintavam o
	   botao da MESMA cor. Este e o mesmo valor de
	   `.single-bt-download.is-downloaded` no site-custom.css do child theme;
	   mudou aqui, muda la (papel registrado no DESIGN-SYSTEM.md). */
	--up-clog-dl-done: #7d8192;
	--up-clog-dl-done-hover: #8d909f;
	--up-clog-radius: 14px;
	color: var(--up-clog-text);
	box-sizing: border-box;
}

.up-clog-wrap *,
.up-clog-wrap *::before,
.up-clog-wrap *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* TOOLBAR                                                            */
/* ------------------------------------------------------------------ */
.up-clog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	margin-bottom: 22px;
	background: #fff;
	border: 1px solid var(--up-clog-border);
	border-radius: var(--up-clog-radius);
	box-shadow: var(--up-clog-shadow);
}

.up-clog-search {
	flex: 1 1 230px;
	min-width: 180px;
}

.up-clog-search-input {
	width: 100%;
	height: 42px;
	padding: 0 16px;
	font-size: 14px;
	color: var(--up-clog-text);
	background: var(--up-clog-bg-soft);
	border: 1px solid var(--up-clog-border);
	border-radius: 9px;
	outline: none;
	transition: border-color .15s ease, background .15s ease;
}

.up-clog-search-input:focus {
	border-color: var(--up-clog-rose);
}

.up-clog-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* --- Dropdowns --- */
.up-clog-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.up-clog-select-tag {
	font-size: 12px;
	color: var(--up-clog-muted);
}

.up-clog-select-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--up-clog-text);
	background: #fff;
	border: 1px solid var(--up-clog-border);
	border-radius: 9px;
	cursor: pointer;
	transition: background .3s ease, border-color .3s ease;
}

.up-clog-select-btn:hover {
	border-color: var(--up-clog-rose);
}

/* Chevron minimalista como BACKGROUND (SVG em data-URI): imune a regras
   globais de svg/path do tema, que deformavam as versoes anteriores.
   Fechado aponta pra baixo; aberto gira pra cima. Cor #885252 embutida. */
.up-clog-caret {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 L5 6.5 L8 3.5' fill='none' stroke='%23885252' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: 10px 10px;
	transition: transform .15s ease;
}

.up-clog-select.open .up-clog-caret {
	transform: rotate(180deg);
}

.up-clog-select-list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 190px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--up-clog-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(20, 24, 40, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 50;
}

.up-clog-select.open .up-clog-select-list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.up-clog-select-list a {
	display: block;
	padding: 9px 12px;
	font-size: 13px;
	color: var(--up-clog-text);
	text-decoration: none;
	border-radius: 7px;
	white-space: nowrap;
}

.up-clog-select-list a span {
	color: var(--up-clog-muted);
	font-size: 12px;
}

.up-clog-select-list a:hover {
	background: var(--up-clog-bg-soft);
}

.up-clog-select-list a.is-active {
	color: var(--up-clog-rose);
	font-weight: 700;
}

/* --- Botoes de layout (icones no estilo do catalogo nativo: grid 2x2, linhas,
   barras). Cor via currentColor: inativo #bcbcbc, ativo/hover #5d5d5d. --- */
.up-clog-views {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.up-clog-view {
	position: relative;
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: #bcbcbc;
	transition: color .2s ease;
}

.up-clog-view:hover,
.up-clog-view.is-active {
	color: #5d5d5d;
}

/* Boxed: grade 2x2 (4 quadrados via 1 quadrado base + 3 sombras) */
.up-clog-view-boxed::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: currentColor;
	box-shadow:
		10px 0 0 0 currentColor,
		0 10px 0 0 currentColor,
		10px 10px 0 0 currentColor;
}

/* List: 3 linhas horizontais */
.up-clog-view-list::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 11px;
	width: 18px;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	box-shadow: 0 -7px 0 0 currentColor, 0 7px 0 0 currentColor;
}

/* Full: 2 barras largas empilhadas */
.up-clog-view-full::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 6px;
	width: 20px;
	height: 5px;
	border-radius: 2px;
	background: currentColor;
	box-shadow: 0 8px 0 0 currentColor;
}

/* Disposicao: [icones | Filtrar | Ordenar]  [busca cresce]  [Total a direita].
   A busca (flex-grow) preenche o espaco e empurra o Total para a direita; por
   isso o Total NAO usa margin-left:auto aqui (conflitaria com o flex-grow). */
.up-clog-total {
	margin-left: 0;
	font-size: 13px;
	color: var(--up-clog-muted);
	white-space: nowrap;
}

/* Sem campo de busca: nao ha item que cresce, entao empurra o Total p/ direita. */
.up-clog-no-search .up-clog-total {
	margin-left: auto;
}

.up-clog-total strong {
	color: var(--up-clog-text);
}

/* ------------------------------------------------------------------ */
/* ELEMENTOS COMPARTILHADOS                                           */
/* ------------------------------------------------------------------ */
.up-clog-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--up-clog-text);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}

.up-clog-thumb {
	flex: 0 0 auto;
	width: 83px;
	height: 64px;
	padding: 3px;
	border-radius: 11px;
	object-fit: contain;
	background: var(--up-clog-bg-soft);
}

/* Pill de versao (igual home) */
.up-clog-ver {
	font-size: 12px;
	font-weight: 600;
	color: var(--up-clog-rose);
	background: var(--up-clog-rose-soft);
	border-radius: 6px;
	padding: 2px 8px;
	white-space: nowrap;
}

/* Categoria amigavel (igual home) */
.up-clog-itemcat {
	font-size: 12px;
	color: var(--up-clog-cat);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Categoria como LINK (list/full) */
.up-clog-wrap a.up-clog-itemcat {
	color: var(--up-clog-cat);
	text-decoration: none;
	transition: color .15s ease;
}

.up-clog-wrap a.up-clog-itemcat:hover {
	color: var(--up-clog-rose);
	text-decoration: underline;
}

/* No layout full (que tem link-cover), o link da categoria sobe acima do
   cover, como o botao de download. */
.up-clog-full a.up-clog-itemcat {
	position: relative;
	z-index: 3;
}

/* Icone UAU (igual home) */
.up-clog-uau {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 21px;
	padding: 0 5px;
	background: #d7e8f1;
	border-radius: 25px;
	opacity: .75;
}

.up-clog-uau img {
	display: block;
	width: 13px;
	height: 12px;
	object-fit: contain;
}

/* Badge "Desbloqueado": redondo, so icone (mesmo formato do UAU), com o verde
   "desbloqueado" do site. O rotulo vive no title/alt. */
.up-clog-unlock {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 21px;
	padding: 0 5px;
	background: #ccddb2;
	border-radius: 25px;
}

.up-clog-unlock img {
	display: block;
	width: 14px;
	height: 14px;
	object-fit: contain;
	opacity: .85;
}

/* Badge "Novo": mesma construcao visual da Nota de ativacao, preservando a
   paleta laranja que ja identificava itens recentes. */
.up-clog-wrap .new-item {
	display: inline-flex;
	align-items: center;
	height: 21px;
	padding: 0 9px 0 7px;
	border: 1px solid #e8c89a;
	border-radius: 25px;
	background: #f6e2c4;
	color: #a4633f;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.up-clog-wrap .new-item::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	margin-right: 5px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.up-clog-wrap .new-item__text {
	display: block;
	line-height: 1;
	transform: translateY(1px);
}

/* Nota de ativacao e Novo ficam acima do titulo. UAU e Desbloqueado
   permanecem na posicao original de cada layout. */
.up-clog-badges-v2 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 7px;
}

/* Cores amostradas da PROPRIA caixa de nota da pagina do item
   (.item-desbloqueado / #item-info, no legacy-base.css do child theme): fundo
   #ffffd9 e texto #4d546c sao os valores exatos dela; a borda #eaeab6 e a borda
   original da caixa (hoje comentada la). O badge e o atalho para essa caixa,
   entao usar a mesma paleta faz o destino ser reconhecido antes do clique. */
.up-clog-wrap a.up-clog-note-badge {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	height: 21px;
	padding: 0 9px 0 7px;
	border: 1px solid #eaeab6;
	border-radius: 25px;
	background: #ffffd9;
	color: #4d546c;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

/* Icone "!" (nao "i"): e a MESMA marca do icone da caixa de destino
   (info-icon.png, um "!" #4e556d em circulo claro) e casa com o "Atencao:" que
   abre o texto da nota.
   Desenho FINO (decisao do Marcus, v0.19.13): anel de 1px e glifo de texto a
   10px num circulo de 13px. O "!" e a borda saem explicitamente em #4d546c, a
   MESMA cor do texto do badge -- antes vinham de currentColor, que ja resolvia
   para esse mesmo valor; agora fica escrito, para nao depender de heranca.
   Nota: por ser traco de ~1px, o antialiasing de subpixel do LCD pinta uma
   coluna levemente alaranjada na lateral do traco. Isso e do rasterizador, nao
   da cor. Se um dia incomodar, o que resolve e espessura (anel >= 2px e o "!"
   como forma geometrica/SVG), nao trocar o valor da cor. */
.up-clog-wrap a.up-clog-note-badge::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	margin-right: 5px;
	border: 1px solid #4d546c;
	border-radius: 50%;
	color: #4d546c;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.up-clog-note-badge__text {
	display: block;
	line-height: 1;
	transform: translateY(1px);
}

.up-clog-wrap a.up-clog-note-badge:hover,
.up-clog-wrap a.up-clog-note-badge:focus {
	border-color: #d9d99f;
	background: #f7f7c4;
	color: #3c4257;
	text-decoration: none;
}

/* Como o "!" e o anel tem a cor ESCRITA (nao herdam mais via currentColor),
   o hover precisa reescrever os dois -- senao o texto escurece e o icone fica
   para tras, em azuis diferentes. */
.up-clog-wrap a.up-clog-note-badge:hover::before,
.up-clog-wrap a.up-clog-note-badge:focus::before {
	border-color: #3c4257;
	color: #3c4257;
}

.up-clog-date {
	font-size: 12px;
	color: var(--up-clog-muted);
}

.up-clog-date strong {
	color: var(--up-clog-text);
	font-weight: 600;
}

/* Botao de download */
.up-clog-dl {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 20px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #fff !important;
	background: var(--up-clog-dl);
	border-radius: 9px;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}

.up-clog-dl:hover {
	background: var(--up-clog-dl-hover);
	color: #fff !important;
}

/* Item que o usuario JA baixou (pelo site ou pelo auto-updater): repousa num
   tom mais claro, para ele separar de relance o que ja tem do que ainda nao
   pegou. A classe vem do servidor (up_clog_download_button) e o JS tambem a
   aplica no ato do clique, para o botao nao esperar um reload. */
.up-clog-dl.up-clog-dl-done {
	background: var(--up-clog-dl-done);
}

.up-clog-dl.up-clog-dl-done:hover {
	background: var(--up-clog-dl-done-hover);
}

.up-clog-dl.is-loading {
	opacity: .75;
	cursor: default;
}

/* Trava global durante um download: os DEMAIS botoes ficam inertes e
   esmaecidos ate a janela liberar (o clicado mantem o .is-loading). O JS
   tambem ignora cliques nesse periodo (cobre ativacao por teclado). */
.up-clog-dl-wait .up-clog-dl:not(.is-loading) {
	pointer-events: none;
	opacity: .45;
}

/* Links do item: SOMENTE no titulo e na imagem (nao ha mais cover cobrindo o
   card inteiro, entao o cursor fica normal no resto do card; so titulo, imagem,
   categoria e o botao de download mostram pointer). */
.up-clog-card-thumb,
.up-clog-full-thumb,
.up-clog-name-link {
	text-decoration: none;
}

.up-clog-name-link {
	color: inherit;
	transition: color .15s ease;
}

.up-clog-name-link:hover {
	color: var(--up-clog-rose);
}

/* ------------------------------------------------------------------ */
/* LAYOUT: BOXED (card no estilo do catalogo nativo, grade de 4 colunas) */
/* ------------------------------------------------------------------ */
.up-clog-results[data-layout="boxed"] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}

/* Card = replica de .new-post-display: moldura branca de 10px, cantos 18/22,
   halo suave; hover aumenta o halo (e satura a thumb). */
.up-clog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: center;
	background: #fff;
	border: 10px solid #fff;
	border-radius: 18px 18px 22px 22px;
	box-shadow: 0 0 0 4px rgba(64, 64, 91, .07);
	transition: box-shadow .2s ease;
}

.up-clog-card:hover {
	box-shadow: 0 0 0 6px rgb(211, 211, 211);
}

.up-clog-card-thumb {
	display: block;
	line-height: 0;
	border-radius: 10px;
	overflow: hidden;
}

.up-clog-card .up-clog-thumb {
	width: 100%;
	height: auto;
	display: block;
	padding: 0;
	background: transparent;
	border-radius: 10px;
	transition: filter .2s ease;
}

.up-clog-card:hover .up-clog-thumb {
	filter: saturate(1.8);
}

.up-clog-card .up-clog-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.1px;
	line-height: 1.5;
	color: #4c4c4c;
	margin: 16px 6px 10px;
}

.up-clog-card > .up-clog-badges-v2 {
	justify-content: center;
	margin: 14px 6px 7px;
}

.up-clog-card > .up-clog-badges-v2 + .up-clog-name {
	margin-top: 0;
}

/* Versao inline rosa (igual ao card nativo, dentro do titulo) */
.up-clog-cver {
	color: #b6555f;
	font-weight: 700;
	white-space: nowrap;
}

/* Icones (UAU + desbloqueado/novo) ao lado da versao, na propria linha do
   titulo. vertical-align: middle centra os badges (21px) na linha do texto. */
.up-clog-name-icons {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	vertical-align: middle;
	margin-left: 8px;
}

/* Linha propria da categoria, logo abaixo do titulo/versao. */
.up-clog-card-cat {
	margin-bottom: 10px;
	line-height: 1.3;
}

/* Categoria (boxed): link vermelho com o icone da categoria (WP) a esquerda,
   sem pilula -- estilo da home/segundo mockup. */
.up-clog-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-left: 24px;
	color: var(--up-clog-rose);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.1px;
}

.up-clog-chip::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	background: url(https://www.ultrapackv2.com/wp-content/uploads/2020/01/menu-icon-wp3.png) no-repeat center;
	background-size: contain;
	opacity: 1;
}

/* Chip como LINK (boxed): clicavel acima do link-cover; hover escurece o
   vermelho e sublinha. */
.up-clog-wrap a.up-clog-chip {
	z-index: 3;
	color: var(--up-clog-rose);
	text-decoration: none;
	transition: color .15s ease;
}

.up-clog-wrap a.up-clog-chip:hover {
	color: #8f3f46;
	text-decoration: underline;
}

.up-clog-card-date {
	margin-bottom: 12px;
	font-size: 12.5px;
}

.up-clog-card-date .up-clog-date,
.up-clog-card-date .up-clog-date strong {
	color: #5e5e5e;
}

.up-clog-card-foot {
	margin-top: auto;
}

.up-clog-card-foot .up-clog-dl {
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* LAYOUT: LIST (linha compacta)                                      */
/* ------------------------------------------------------------------ */
.up-clog-results[data-layout="list"] {
	display: block;
	background: #fff;
	border: 1px solid var(--up-clog-border);
	border-radius: var(--up-clog-radius);
	box-shadow: var(--up-clog-shadow);
	overflow: hidden;
}

.up-clog-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--up-clog-border);
}

.up-clog-row:last-child {
	border-bottom: 0;
}

.up-clog-row:hover {
	background: var(--up-clog-bg-soft);
}

.up-clog-row-date {
	/* min-width mantem as datas alinhadas; auto acomoda "N downloads" no modo
	   Mais Baixados sem cortar. */
	flex: 0 0 auto;
	min-width: 84px;
	font-size: 12px;
	color: var(--up-clog-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.up-clog-row-title {
	/* Nao cresce: as badges (versao/UAU/Novo/Desbloqueado/categoria) ficam
	   coladas no nome; o botao de download e empurrado p/ direita pelo
	   margin-left:auto do .up-clog-row-dl. */
	flex: 0 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--up-clog-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.up-clog-row-title:hover {
	color: var(--up-clog-rose);
}

.up-clog-row-main {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.up-clog-row-main .up-clog-badges-v2 {
	margin-bottom: 5px;
}

.up-clog-row-heading {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.up-clog-row-badges {
	flex: 0 0 auto;
	display: inline-flex;
	gap: 6px;
}

.up-clog-row .up-clog-itemcat {
	flex: 0 0 auto;
	max-width: 160px;
}

.up-clog-row-dl {
	flex: 0 0 auto;
	margin-left: auto;
}

.up-clog-row .up-clog-dl {
	height: 32px;
	padding: 0 16px;
	font-size: 12px;
}

/* ------------------------------------------------------------------ */
/* LAYOUT: FULL-WIDTH (linha larga horizontal)                        */
/* ------------------------------------------------------------------ */
.up-clog-results[data-layout="full"] {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.up-clog-full {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--up-clog-border);
	border-radius: var(--up-clog-radius);
	box-shadow: var(--up-clog-shadow);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.up-clog-full:hover {
	transform: translateY(-2px);
	box-shadow: var(--up-clog-shadow-hover);
	border-color: var(--up-clog-rose);
	background: #fffafa8a;
}

.up-clog-full-thumb {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.up-clog-full-thumb .up-clog-thumb {
	width: 108px;
	height: 84px;
	border-radius: 12px;
}

.up-clog-full-body {
	flex: 1 1 auto;
	min-width: 0;
}

.up-clog-full-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.up-clog-full-head .up-clog-name {
	-webkit-line-clamp: 1;
	font-size: 15.5px;
	min-width: 0;
}

.up-clog-full-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 7px;
}

.up-clog-full-sep {
	width: 1px;
	height: 12px;
	background: var(--up-clog-border);
}

.up-clog-full-actions {
	flex: 0 0 auto;
}

/* Divisoria de dia (somente no layout full): cabecalho de data que agrupa os
   itens do mesmo dia. Inserida pelo JS (applyDayDividers) varrendo o DOM, para
   manter a continuidade entre as paginas do scroll infinito. Rotulo a esquerda
   + linha fina preenchendo o resto. */
.up-clog-results[data-layout="full"] .up-clog-day-sep {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 30px 2px 0px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #4d546c;
}

.up-clog-results[data-layout="full"] .up-clog-day-sep:first-child {
	margin-top: 0;
}

.up-clog-results[data-layout="full"] .up-clog-day-sep span {
	flex: 0 0 auto;
}

.up-clog-results[data-layout="full"] .up-clog-day-sep::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--up-clog-border);
}

/* ------------------------------------------------------------------ */
/* SPINNER + ESTADO VAZIO                                             */
/* ------------------------------------------------------------------ */
.up-clog-spinner {
	display: flex;
	justify-content: center;
	padding: 26px 0;
}

.up-clog-spin {
	width: 28px;
	height: 28px;
	border: 3px solid var(--up-clog-border);
	border-top-color: var(--up-clog-rose);
	border-radius: 50%;
	animation: up-clog-spin .7s linear infinite;
}

@keyframes up-clog-spin {
	to { transform: rotate(360deg); }
}

.up-clog-empty {
	padding: 40px 0;
	text-align: center;
	color: var(--up-clog-muted);
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* "CARREGAR MAIS" + aviso de limite                                  */
/* ------------------------------------------------------------------ */
.up-clog-more {
	display: flex;
	justify-content: center;
	padding: 24px 0 6px;
}

.up-clog-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 34px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -.1px;
	text-transform: uppercase;
	color: #fff;
	background: var(--up-clog-dl);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s ease;
}

.up-clog-more-btn:hover {
	background: var(--up-clog-dl-hover);
}

.up-clog-more-cap {
	padding: 26px 16px 6px;
	text-align: center;
	color: var(--up-clog-muted);
	font-size: 13.5px;
}

.up-clog-more-cap a {
	color: var(--up-clog-rose);
	font-weight: 600;
	text-decoration: none;
}

.up-clog-more-cap a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* RESPONSIVO                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.up-clog-results[data-layout="boxed"] {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 782px) {
	.up-clog-search {
		flex: 1 1 100%;
		order: -1;
	}
	.up-clog-total {
		width: 100%;
		margin-left: 0;
	}
	.up-clog-select-tag {
		display: none;
	}
}

@media (max-width: 600px) {
	.up-clog-row {
		flex-wrap: wrap;
		gap: 6px 10px;
	}
	.up-clog-row-title {
		flex: 1 1 100%;
		white-space: normal;
	}
	.up-clog-row-main {
		flex: 1 1 100%;
	}
	.up-clog-row-dl {
		margin-left: 0;
	}
	.up-clog-full {
		flex-wrap: wrap;
	}
	.up-clog-full-thumb .up-clog-thumb {
		width: 72px;
		height: 60px;
	}
	.up-clog-full-actions {
		width: 100%;
	}
	.up-clog-full-actions .up-clog-dl {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.up-clog-results[data-layout="boxed"] {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================== */
/* TEMA DA TOOLBAR (ajustes do dono, 2026-06-10)                        */
/* Vem por ultimo de proposito: mesma especificidade = estas regras     */
/* vencem as bases acima.                                               */
/* ==================================================================== */

.up-clog-toolbar {
	background: #eaeaea;
	border: 2px solid rgb(209, 209, 209);
	box-shadow: 0 1px 12px 0 rgb(211, 211, 211);
	padding: 18px 30px;
	margin-bottom: 38px;
}

/* Campo de busca: SEM borda, fundo cinza claro (#f3f3f3) no normal/hover e branco
   apenas no FOCO. O cinza contrasta o toolbar #eaeaea sem precisar de borda; so
   ao focar (clicar) clareia para branco. Lupa antes do texto. Os seletores com
   #up-clog + !important vencem as regras do painel do Avada
   (.up-clog-search-input com background/border !important) e o input:focus do
   tema, que reescreviam o fundo/borda. */
#up-clog .up-clog-search {
	position: relative;
}

#up-clog .up-clog-search-input {
	background: #f3f3f3 !important;
	border: none !important;
	border-radius: 10px !important;
	/* Espaco a esquerda para a lupa (icone em 16px + respiro). */
	padding-left: 42px !important;
}

/* So no FOCO clareia para branco; o hover continua cinza (igual ao normal). */
#up-clog .up-clog-search-input:focus {
	background: #fff !important;
}

/* Placeholder e lupa na MESMA cor (var(--up-clog-muted) = #8a8f9c): a lupa fica
   igual ao texto "Buscar atualizacao...". opacity:1 evita o esmaecimento padrao
   do browser, garantindo o casamento exato com a cor do icone. */
#up-clog .up-clog-search-input::placeholder {
	color: var(--up-clog-muted);
	opacity: 1;
}
#up-clog .up-clog-search-input::-webkit-input-placeholder {
	color: var(--up-clog-muted);
	opacity: 1;
}

/* Lupa antes do texto (SVG inline, stroke #8a8f9c = var(--up-clog-muted)). */
#up-clog .up-clog-search::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238a8f9c'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cpath%20d='m21%2021-4.3-4.3'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
	pointer-events: none;
}

.up-clog-select-btn {
	background: #ebebeb;
	border: 2px solid #e2e2e2;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -.3px;
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase;
}

/* ID + !important: o painel do Avada ainda tem
   ".up-clog-select-btn { background: #ebebeb !important }" (estilos antigos
   colados la), e !important sem ID venceria um hover comum. */
#up-clog .up-clog-select-btn:hover {
	background: #f1f1f1 !important;
}

.up-clog-select-tag {
	color: #885252;
}

/* Neutraliza o snippet ANTIGO do painel do Avada
   (".up-clog-caret { border-top: 5px solid #885252 !important }", da epoca do
   triangulo): com !important la, ele desenhava um "quadradinho" sobre o
   chevron. ID + !important aqui vence (especificidade maior). A cor do chevron
   ja vem embutida no data-URI acima. */
#up-clog .up-clog-caret {
	border: 0 !important;
}

.up-clog-total strong {
	color: #885252;
}

/* Icones de layout sem arredondamento */
.up-clog-view-full::before,
.up-clog-view-list::before,
.up-clog-view-boxed::before {
	border-radius: 0;
}

/* --- Icone do botao Download (seta + bandeja, CSS puro) ------------- */
.up-clog-dl {
	gap: 8px;
}

.up-clog-dl-ico {
	position: relative;
	flex: 0 0 auto;
	width: 12px;
	height: 13px;
	border-bottom: 2px solid currentColor; /* bandeja */
}

.up-clog-dl-ico::before {
	/* haste */
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 2px;
	height: 6px;
	background: currentColor;
	transform: translateX(-50%);
}

.up-clog-dl-ico::after {
	/* ponta da seta */
	content: "";
	position: absolute;
	left: 50%;
	top: 1.5px;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateX(-50%) rotate(45deg);
}

/* --- "Aguarde..." com spinner ---------------------------------------
 * Enquanto o download e pedido, o proprio icone da seta VIRA o anel girando,
 * em vez de entrar um elemento novo ao lado: o botao nao muda de largura, entao
 * a fileira do card nao pula no meio do clique. Mesma linguagem do spinner da
 * pagina do item (.btn-download-loader): anel fino, topo branco, 1 volta/s.
 *
 * As duas pseudo (haste e ponta da seta) somem, e o `border` completo sobrescreve
 * a `border-bottom` que desenhava a bandeja.
 * ------------------------------------------------------------------ */
.up-clog-dl.is-loading .up-clog-dl-ico {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: up-clog-spin .8s linear infinite;
}

.up-clog-dl.is-loading .up-clog-dl-ico::before,
.up-clog-dl.is-loading .up-clog-dl-ico::after {
	display: none;
}

/* O @keyframes `up-clog-spin` NAO e redeclarado aqui: ele ja existe na secao
   "SPINNER + ESTADO VAZIO" (o anel da listagem) e keyframes e global, entao
   vale em qualquer lugar do arquivo. Redeclarar com o mesmo nome nao da erro --
   a ultima declaracao vence em silencio --, e e assim que alguem edita uma das
   duas e nao ve efeito nenhum. */

/* Quem pediu menos movimento no sistema nao ganha um anel girando na tela: o
   anel fica parado e o "Aguarde..." sozinho ja diz o que esta acontecendo. */
@media (prefers-reduced-motion: reduce) {
	.up-clog-dl.is-loading .up-clog-dl-ico {
		animation: none;
	}
}

/* ==================================================================== */
/* GATE / TEASER (visitante ou logado sem plano)                        */
/* Fade branco de protecao sobre o fim da lista + CTA de assinatura.    */
/* O .is-gated e adicionado pelo JS a partir de data.gated (AJAX), e o  */
/* servidor ja limita os itens; isto e a camada visual.                 */
/* ==================================================================== */
.up-clog-stage {
	position: relative;
}

/* Oculto por padrao; so aparece quando o JS confirma o gate. */
.up-clog-gate {
	display: none;
}

#up-clog.is-gated .up-clog-gate {
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Cobre a parte de baixo do teaser: transparente em cima (primeiras linhas
	   nitidas), dissolve de forma gradual e funde com a COR DE FUNDO DA PAGINA
	   (#f9f9f9, nao branco) ja na metade da faixa, de modo que os ultimos cards
	   somem por completo sem deixar um retangulo branco. A metade de baixo, na cor
	   do fundo, hospeda o CTA. */
	height: 520px;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 10px;
	background: linear-gradient(to bottom, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, .5) 26%, #f9f9f9 50%);
	/* Captura cliques: itens cobertos pelo fade ficam "travados"; as linhas
	   acima do fade seguem clicaveis (estao fora desta faixa). */
	pointer-events: auto;
	z-index: 4;
}

.up-clog-gate-card {
	max-width: 470px;
	padding: 0 18px;
	text-align: center;
}

.up-clog-gate-ico {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-bottom: 9px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23b7545b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='11'%20width='18'%20height='11'%20rx='2'/%3E%3Cpath%20d='M7%2011V7a5%205%200%200%201%2010%200v4'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

.up-clog-gate-title {
	display: block;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.2px;
	color: var(--up-clog-text);
	margin-bottom: 6px;
}

.up-clog-gate-sub {
	margin: 0 0 15px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--up-clog-muted);
}

.up-clog-gate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 30px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.1px;
	color: #fff;
	background: var(--up-clog-rose);
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 8px 20px -8px rgba(183, 84, 91, .7);
	transition: background .15s ease, transform .15s ease;
}

.up-clog-gate-btn:hover {
	background: #9f474e;
	color: #fff;
	transform: translateY(-1px);
}

/* Gated: o aviso de teto/legado nunca aparece (o fim e o fade + CTA). */
#up-clog.is-gated .up-clog-more-cap {
	display: none !important;
}

/* No gate, remove a SOMBRA (halo) dos cards/containers. O fade e um gradiente
   POR CIMA; a sombra do card nao se dissolve junto com o conteudo e ficava como
   um "fantasma" retangular na faixa do fade. Sem sombra, os cards se fundem
   limpos no fundo (#f9f9f9). A borda fina e mantida para definir o card.
   Inclui :hover para nao reintroduzir a sombra ao passar o mouse nos cards de
   cima (ainda clicaveis). */
#up-clog.is-gated .up-clog-full,
#up-clog.is-gated .up-clog-full:hover,
#up-clog.is-gated .up-clog-card,
#up-clog.is-gated .up-clog-card:hover,
#up-clog.is-gated .up-clog-results[data-layout="list"] {
	box-shadow: none;
}