/*
 * Convite de login exibido no lugar do preço ("logar para ver preço").
 *
 * Visual único para TODAS as superfícies — bloco de preço da PDP, card de listagem, grade de
 * quantidade por opção, grade fechada, Compre Junto, carrinho e mini-carrinho. Antes cada uma
 * tinha o próprio estilo (botão do tema aqui, link solto ali, alerta do Bootstrap acolá) e a
 * mesma frase aparecia de três jeitos diferentes na mesma loja.
 *
 * Vive num arquivo próprio, e NÃO em `login_to_view_price.css`: aquele esconde botões de compra
 * com `!important`, e carregá-lo na tela do carrinho derrubaria "Finalizar compra" junto.
 *
 * Cores neutras de propósito — o bloco aparece em 4 temas e nos overrides de loja, então herdar
 * a paleta de qualquer um deles quebraria nos outros.
 */

.ltvp-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #e6e8ec;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
	text-decoration: none;
	color: #101828;
	/* O tema põe `text-transform: uppercase` nos botões de produto, e o convite é uma frase
	   escrita pelo lojista — em caixa alta virava grito. */
	text-transform: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ltvp-notice:hover,
.ltvp-notice:focus-visible {
	border-color: #d0d5dd;
	box-shadow: 0 4px 12px rgba(16, 24, 40, .08);
	transform: translateY(-1px);
	text-decoration: none;
	color: #101828;
}

.ltvp-notice__icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f2f4f7;
	color: #475467;
	font-size: 1rem;
	line-height: 1;
}

.ltvp-notice__text {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
	text-align: left;
	/* O texto vem de campo livre do painel: sem isto, um valor longo estoura a largura. */
	overflow-wrap: anywhere;
}

.ltvp-notice__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	color: #98a2b3;
	font-size: 1.35rem;
	line-height: 1;
	transition: transform .15s ease, color .15s ease;
}

.ltvp-notice:hover .ltvp-notice__arrow {
	transform: translateX(2px);
	color: #475467;
}

/* ------------------------------------------------------------------ *
 * Variante compacta — card de listagem e rodapés estreitos
 *
 * Mesma linguagem, menos peso: numa grade de 4 colunas o card cheio dominaria o produto, e a
 * altura extra desalinharia as linhas. Sem seta, que a essa largura só rouba espaço do texto.
 * ------------------------------------------------------------------ */

.ltvp-notice--compact {
	gap: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	box-shadow: none;
}

.ltvp-notice--compact:hover,
.ltvp-notice--compact:focus-visible {
	box-shadow: 0 2px 6px rgba(16, 24, 40, .06);
	transform: none;
}

.ltvp-notice--compact .ltvp-notice__icon {
	width: 26px;
	height: 26px;
	font-size: .8rem;
}

.ltvp-notice--compact .ltvp-notice__text {
	font-size: .82rem;
	font-weight: 600;
}