/**
 * Winkbuy — aparencia do popup de frete do ALD.
 *
 * Estas regras nasceram no product.css e vieram para ca em 2026-09-11, porque
 * o popup nao pertence a pagina de produto: o ALD o move para um holder que
 * fica direto no body, e o carrinho lateral pode abri-lo em qualquer pagina.
 * Enquanto viveram la, o mesmo popup tinha duas aparencias — uma na pagina de
 * produto, outra nas demais.
 *
 * E havia um efeito pior. Os tokens (--wb-cta e companhia) sao declarados em
 * .wb-product; fora desse escopo nao resolvem. Como as regras do botao de
 * confirmar usam !important, venciam qualquer outra e aplicavam um background
 * invalido: texto branco sobre fundo branco, botao "OK" invisivel no carrinho
 * lateral da pagina de produto. Dai a declaracao de tokens logo abaixo, no
 * proprio modal — e o que faz var() resolver onde o popup de fato vive.
 *
 * O gatilho (a linha clicavel dentro do buybox) continua no product.css:
 * aquele sim e da pagina de produto.
 *
 * Classes do ALD 2.3.3. Renomeadas pelo plugin, estas regras deixam de casar e
 * o popup volta ao visual de fabrica — degrada sem quebrar.
 */

/* Os mesmos valores de .wb-product, repetidos aqui porque o modal vive fora
 * dele. Se a identidade mudar la, mudar aqui tambem. */
.vi-wad-item-shipping-select-popup-modal {
	--wb-accent: #4d4df8;
	--wb-cta: #4d4df8;
	--wb-cta-hover: #6868fa;
	--wb-success: #00a650;
	--wb-text: #1a1a1a;
	--wb-text-muted: #737373;
	--wb-text-faint: #999;
	--wb-surface: #fff;
	--wb-bg: #f2f2f2;
	--wb-border: #e6e6e6;
	--wb-radius: 10px;
	--wb-radius-sm: 6px;
	--wb-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .05);
	--wb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Modal de seleção */
.vi-wad-item-shipping-select-popup-modal {
	font-family: var(--wb-font);
	color: var(--wb-text);
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-overlay {
	background: rgba(0, 0, 0, .45);
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-main {
	border-radius: var(--wb-radius);
	box-shadow: var(--wb-shadow);
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-header,
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content-item.vi-wad-item-shipping-select-popup-content-head,
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-footer {
	background: var(--wb-surface);
	border-color: var(--wb-border) !important;
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-header .vi-wad-item-shipping-select-popup-header-content {
	/* Seletor com .header no meio pra bater a especificidade da regra
	 * original do plugin (.modal .header .header-content) — só ".modal
	 * .header-content" perde a briga de especificidade e o padding nunca
	 * chega a aplicar de verdade, mesmo estando no CSS.
	 * Empurra o título bem pra baixo, deixando o "X" (absoluto, ancorado no
	 * topo) claramente separado dele, como se fosse outra faixa. */
	padding: 64px 16px 14px;
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-title {
	color: var(--wb-text);
	font-weight: 600;
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content-item,
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content-item.vi-wad-item-shipping-select-popup-content-item-company {
	text-align: left;
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content-item.vi-wad-item-shipping-select-popup-content-head {
	color: var(--wb-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .02em;
	text-align: left;
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content-item input[type="radio"] {
	accent-color: var(--wb-accent);
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content-item-tracking-availability-yes {
	color: var(--wb-success) !important;
	font-weight: 600;
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content-item-tracking-availability-no {
	color: var(--wb-text-faint) !important;
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-close {
	top: 8px !important;
	right: 8px !important;
	width: 38px !important;
	height: 38px !important;
	background: var(--wb-bg);
	border-radius: 50%;
	color: var(--wb-text-muted);
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-close:before {
	/* O CSS do plugin usa font-size:30px num alvo de 30x30 — o "✕" ficava
	 * encostado na borda do círculo de fundo que adicionamos. */
	font-size: 20px;
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-close:hover {
	background: var(--wb-border);
	color: var(--wb-text);
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-confirm {
	background: var(--wb-cta) !important;
	border-radius: var(--wb-radius-sm) !important;
	font-weight: 600;
	padding: 10px 24px !important;
}
.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-confirm:hover {
	background: var(--wb-cta-hover) !important;
	opacity: 1 !important;
}

/* Responsivo: o modal do plugin não tem max-width — em telas estreitas a
 * grade de colunas (prazo/custo/transportadora/rastreio) pode ficar mais
 * larga que a viewport. Trava só a largura do modal; a rolagem horizontal
 * já existente em .vi-wad-item-shipping-select-popup-main (overflow:auto,
 * no CSS do próprio plugin) cobre o resto — não duplicar overflow aqui:
 * o cabeçalho da grade usa position:sticky relativo a esse contêiner, e
 * criar outro contêiner de rolagem mais próximo (no .content) quebra o
 * sticky e sobrepõe cabeçalho com os dados. */
@media (max-width: 640px) {
	/* Aproveita ao máximo a largura disponível — só uma margem mínima pra
	 * não colar nas bordas da tela. */
	.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-main {
		min-width: 0 !important;
		width: calc(100vw - 12px);
	}
	.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-header-content,
	.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-footer {
		padding-left: 12px;
		padding-right: 12px;
	}
	.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-title { font-size: 16px; }

	/* Colunas encolhem e o texto quebra linha dentro da célula, em vez de
	 * empurrar a grade pra mais larga que a tela (o que ativaria a rolagem
	 * horizontal do .popup-main). Mantém os rótulos reais (traduzíveis pelo
	 * TranslatePress) em vez de recriar como texto fixo via CSS. */
	.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content {
		grid-template-columns: minmax(0, auto) repeat(3, minmax(0, 1fr)) !important;
		grid-gap: 4px 8px;
		padding: 0 12px 10px;
	}
	.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content.vi-wad-item-shipping-select-popup-content-show-tracking {
		grid-template-columns: minmax(0, auto) repeat(4, minmax(0, 1fr)) !important;
	}
	.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content-item {
		font-size: 12px;
		word-break: break-word;
		white-space: normal;
	}
	.vi-wad-item-shipping-select-popup-modal .vi-wad-item-shipping-select-popup-content-item.vi-wad-item-shipping-select-popup-content-head {
		font-size: 10px;
		/* position:sticky + linha quebrando em 2 (coluna estreita) fazia a
		 * grade calcular a altura da linha errado e sobrepor com os dados
		 * abaixo. Sem sticky no mobile — modal já é curto, não faz falta. */
		position: static !important;
	}
}