/**
 * Correções de layout do Univer Bundle & Price.
 *
 * Arquivo à parte porque o CSS do plugin vive num pacote compilado
 * (dist/frontend/index.css) sem código-fonte disponível — editar lá seria
 * perdido no próximo build. Carregado DEPOIS dele, então vence por ordem.
 */

/* ── Card único desalinhado ──
 * Com um só card (produto em Oferta em Dobro, que esconde as faixas de
 * quantidade), a regra original fixa a coluna em 560px e centraliza. O título
 * "Escolha sua Oferta" e a linha do botão ocupam a largura toda, então sobra
 * um vão à esquerda que cresce junto com a tela: ~70px a 1440 e ~320px a 1920.
 *
 * Aqui o card único passa a ocupar a largura inteira, encostando nas mesmas
 * margens do título e do botão. */
.ubap-bundle .ubap-bundle__cards:has(> .ubap-bundle__qb-card:only-child) {
	grid-template-columns: minmax(0, 1fr) !important;
	justify-content: stretch !important;
	justify-items: stretch !important;
}

.ubap-bundle .ubap-bundle__qb-card:only-child {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	justify-self: stretch !important;
}

/* Navegador sem :has() mantém o comportamento antigo em vez de quebrar:
 * o seletor acima é simplesmente ignorado e nada além disso muda. */

/* ══════════════════════════════════════════════════════════════════
   BARRA DE ESCASSEZ — "% vendido"

   O markup vem do bundle compilado; o número vem dos Gatilhos de
   Escassez (Oferta em Dobro). Aqui é só a pele.

   Intenção de design: comunicar urgência sem parecer alarme de loja
   barata. Progressão quente da esquerda (âmbar) para a direita
   (vermelho), brilho lento percorrendo, e o número em destaque — o
   olho lê primeiro "78%" e depois entende o porquê.
   ══════════════════════════════════════════════════════════════════ */

.ubap-bundle .ubap-bundle__qb-urg {
	grid-column: 1 / -1;
	width: 100%;
	box-sizing: border-box;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px dashed var(--ubap-border);
}

.ubap-bundle .ubap-bundle__qb-urg-hd {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.ubap-bundle .ubap-bundle__qb-urg-label {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ubap-fg-soft);
}

/* O número é o herói da informação: maior, mais pesado, tabular para
   não "dançar" quando muda de 9% para 10%. */
.ubap-bundle .ubap-bundle__qb-urg-sold {
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #dc2626;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ubap-bundle .ubap-bundle__qb-urg-track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--ubap-bg-3);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .10);
	overflow: hidden;
}

.ubap-bundle .ubap-bundle__qb-urg-track > i {
	display: block;
	height: 100%;
	border-radius: 999px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #fbbf24 0%, #f97316 48%, #ef4444 100%);
	box-shadow: 0 0 12px -2px rgba(239, 68, 68, .55);
	/* Sem animação de entrada aqui de propósito: a largura é inline, e animar
	   por escala deixava a barra presa em scaleX(0) — vazia — quando o card
	   nascia oculto. Barra que às vezes não preenche é pior que barra estática. */
}

/* Brilho lento atravessando o preenchimento. Lento de propósito:
   rápido demais vira pisca-pisca e o cliente desconfia. */
.ubap-bundle .ubap-bundle__qb-urg-track > i::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, .5) 50%, transparent 82%);
	transform: translateX(-100%);
	animation: ubap-urg-shine 2.8s cubic-bezier(.4, 0, .2, 1) 1.1s infinite;
}

@keyframes ubap-urg-shine { to { transform: translateX(100%); } }

/* Encerrada: cinza, sem brilho, sem promessa. */
.ubap-bundle .ubap-bundle__qb-urg--expired {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 12px;
	margin-top: 14px;
	border-top: 0;
	border-radius: var(--ubap-radius-sm);
	background: var(--ubap-bg-3);
}
.ubap-bundle .ubap-bundle__qb-urg-explabel {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ubap-fg-mute);
}

@media (max-width: 480px) {
	.ubap-bundle .ubap-bundle__qb-urg-label { font-size: 11.5px; }
	.ubap-bundle .ubap-bundle__qb-urg-sold  { font-size: 12.5px; }
	.ubap-bundle .ubap-bundle__qb-urg-track { height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.ubap-bundle .ubap-bundle__qb-urg-track > i::after { animation: none; }
}

/* ── Onde a barra aparece ──
 * O CSS original só a exibe quando o card é único (`:only-child`). Na prática
 * ela pertence ao card de 1 unidade, que é o primeiro — com ou sem faixas de
 * quantidade ao lado. Aqui liberamos o primeiro card e mantemos os demais
 * ocultos, para não repetir o mesmo percentual quatro vezes. */
.ubap-bundle .ubap-bundle__qb-card:first-child .ubap-bundle__qb-urg {
	display: block !important;
}
.ubap-bundle .ubap-bundle__qb-card:not(:first-child) .ubap-bundle__qb-urg {
	display: none !important;
}
.ubap-bundle .ubap-bundle__qb-card:first-child .ubap-bundle__qb-urg--expired {
	display: flex !important;
}

/* ── Posição da barra dentro do card ──
 * No DOM ela nasce logo depois do rádio, antes da imagem, então subia para o
 * topo — acima do preço. `order` vale para flex e para a auto-colocação do
 * grid, e joga a barra para o fim em qualquer um dos layouts do card. */
.ubap-bundle .ubap-bundle__qb-card .ubap-bundle__qb-urg,
.ubap-bundle .ubap-bundle__qb-card .ubap-bundle__qb-urg--expired {
	order: 99 !important;
	width: 100%;
	box-sizing: border-box;
}

/* Até 720px o card vira `flex-direction: row`, e aí só `order` não basta: a
 * barra entraria como mais uma COLUNA ao lado do preço, estreita. Precisa
 * quebrar linha.
 *
 * A regra fica presa a esta faixa de propósito. Acima de 720px o card é
 * `flex-direction: column`, e `flex-wrap: wrap` ali divide o conteúdo em
 * COLUNAS — o card despencou de 484px para 151px quando apliquei sem limite. */
@media (max-width: 720px) {
	.ubap-bundle .ubap-bundle__qb-card:has(> .ubap-bundle__qb-urg) {
		flex-wrap: wrap !important;
	}
	.ubap-bundle .ubap-bundle__qb-card .ubap-bundle__qb-urg {
		flex: 0 0 100% !important;
	}
}