/**
 * Libraria - Preços: bloco de preço, vitrine, item e formas de pagamento do carrinho e do checkout.
 *
 * = O Que =
 * O bloco do modelo A (parcela em destaque, "sem juros · total", Pix em verde, botão) e a linha abaixo do total do
 * carrinho e do checkout.
 *
 * = Como =
 * Cores nas variáveis `--lprc-*` (o roxo dos botões do site, #6648F0, e o verde do Pix). Quando o bloco entra no lugar
 * do botão de compra do MasterStudy, o contêiner dele (`.masterstudy-buy-button`) perde o fundo e o tamanho fixo, só
 * quando contém o bloco (`:has()`), e o link dele vira o botão do bloco. Nada usa `!important`.
 *
 * = Porque =
 * Modelo A aprovado pelo Douglas (2026-10-24).
 *
 * @package Libraria_Precos
 * @since 1.0.0
 * @since 1.1.0 Vitrine compacta, hover do botão do MasterStudy, item do carrinho e "Como você pode pagar".
 * @since 1.2.1 Quadro da forma escolhida com o valor à direita e um pouco menor.
 * @since 1.3.0 Campanhas: selo, porcentagem, contagem e "de" riscado.
 * @since 1.4.0 Cupons das campanhas no bloco e no item do carrinho.
 * @since 1.7.0 Plano extra lado a lado (`.lprc-planos`).
 * @since 1.10.1 Hover do botão contornado (o plano que não está em destaque): fundo lilás clarinho.
 * @since 1.11.0 Selo pendurado na borda no bloco sozinho com o selo do widget ou do shortcode.
 */

.lprc-plano {
	--lprc-cor: #6648f0;
	--lprc-cor-hover: #5435e0;
	--lprc-parcela: #3c3489;
	--lprc-parcela-suave: #534ab7;
	--lprc-pix: #0f6e56;
	--lprc-pix-fundo: #e1f5ee;
	--lprc-pix-texto: #085041;
	--lprc-cinza: #6b7280;
	--lprc-selo-fundo: #eeedfe;
	box-sizing: border-box;
	width: 100%;
	padding: 18px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
	color: #1f1f29;
	text-align: left;
}

.lprc-plano--destaque {
	border: 2px solid var(--lprc-cor);
}

.lprc-plano p {
	margin: 0;
	line-height: 1.3;
}

/* Campanha (modelo A, 1.3.0): selo com a cor da campanha, porcentagem, contagem e o preço normal riscado. */
.lprc-plano .lprc-plano__campanha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.lprc-plano__campanha-selo {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--lprc-campanha-cor, #1f1f29);
	color: var(--lprc-campanha-texto, #ffffff);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.lprc-plano__campanha-pct {
	display: inline-block;
	padding: 3px 7px;
	border-radius: 4px;
	background: #fcebeb;
	color: #a32d2d;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.lprc-plano .lprc-plano__contagem {
	margin-bottom: 6px;
	color: #a32d2d;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.lprc-plano .lprc-plano__de {
	color: var(--lprc-cinza);
	font-size: 14px;
	text-decoration: line-through;
}

.lprc-plano .lprc-plano__titulo {
	margin-bottom: 8px;
	color: var(--lprc-cinza);
	font-size: 14px;
}

.lprc-plano__selo {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--lprc-selo-fundo);
	color: var(--lprc-parcela);
	font-size: 12px;
	font-weight: 600;
	vertical-align: 1px;
}

.lprc-plano .lprc-plano__vezes {
	color: var(--lprc-parcela);
	font-size: 15px;
}

.lprc-plano .lprc-plano__valor {
	color: var(--lprc-parcela);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
}

.lprc-plano .lprc-plano__total {
	margin: 4px 0 12px;
	color: var(--lprc-parcela-suave);
	font-size: 14px;
}

/* Com juros e sem desconto no Pix: a taxa e o total a prazo, e o valor à vista colado logo abaixo (CDC, art. 52). */
.lprc-plano .lprc-plano__total--juros:has(+ .lprc-plano__vista) {
	margin-bottom: 2px;
}

.lprc-plano .lprc-plano__vista {
	margin: 0 0 12px;
	color: var(--lprc-cinza);
	font-size: 14px;
}

.lprc-plano .lprc-plano__pix {
	color: var(--lprc-pix);
	font-size: 18px;
	font-weight: 600;
}

.lprc-plano__off {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 4px;
	/* Valores de reserva: o selo também aparece fora do bloco, na lista "Como você pode pagar". */
	background: var(--lprc-pix-fundo, #e1f5ee);
	color: var(--lprc-pix-texto, #085041);
	font-size: 12px;
	font-weight: 600;
	vertical-align: 2px;
}

/* O botão: link comum (produto, curso) ou o link do MasterStudy dentro do bloco. */
.lprc-plano .lprc-plano__botao,
.lprc-plano .masterstudy-buy-button__link.lprc-plano__botao {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin-top: 16px;
	padding: 13px 16px;
	border: 1px solid var(--lprc-cor);
	border-radius: 4px;
	background: var(--lprc-cor);
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.lprc-plano .lprc-plano__botao:hover,
.lprc-plano .lprc-plano__botao:focus {
	border-color: var(--lprc-cor-hover);
	background: var(--lprc-cor-hover);
	color: #ffffff;
}

.lprc-plano .lprc-plano__botao--contornado,
.lprc-plano .masterstudy-buy-button__link.lprc-plano__botao--contornado {
	background: transparent;
	color: var(--lprc-cor);
}

.lprc-plano .lprc-plano__botao--contornado:hover,
.lprc-plano .lprc-plano__botao--contornado:focus {
	background: var(--lprc-selo-fundo);
	color: var(--lprc-cor);
}

/*
 * No lugar do botão de compra do MasterStudy: o contêiner dele só segura o bloco. O hover dele (fundo roxo do
 * MasterStudy, `body .masterstudy-buy-button:hover`) aparecia nos quatro cantos atrás do bloco arredondado.
 */
.masterstudy-buy-button:has(> .lprc-plano, > .lprc-planos),
body .masterstudy-buy-button:has(> .lprc-plano, > .lprc-planos):hover {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/*
 * Vitrine da página inicial (carrossel de curso único do MasterStudy): bloco compacto, sem caixa, com "12x de R$ X"
 * numa linha, "sem juros · R$ total" fino embaixo, o Pix e o botão; a linha das aulas fica perto do título, o
 * conteúdo fica centralizado na altura da imagem, alinhado à esquerda com o título, e a lista de desejos vai para
 * baixo do bloco (pedido do Douglas, 2026-10-25). Os
 * seletores repetem o caminho do carrossel porque o CSS dele (`vc_modules/single_course_carousel/style_1.css`) é
 * específico assim.
 */
.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item:has(.lprc-plano) {
	align-items: center;
}

.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item:has(.lprc-plano) .stm_lms_single_course_carousel_item__content .stm_lms_courses__single__buttons {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item:has(.lprc-plano) .stm_lms_single_course_carousel_item__content .stm_lms_courses__single__buttons .stm-lms-wishlist {
	margin: 0;
}

.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item__content .stm_lms_courses__single__buy:has(.lprc-plano) {
	width: 100%;
	max-width: 380px;
}

/* Imagem um pouco maior que o conteúdo, só lado a lado (abaixo de 770 px o MasterStudy empilha). */
@media (min-width: 770px) {
	.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item:has(.lprc-plano) .stm_lms_single_course_carousel_item__image {
		width: 47%;
	}

	.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item:has(.lprc-plano) .stm_lms_single_course_carousel_item__content {
		width: 48%;
		padding-top: 0;
	}
}

.stm_lms_single_course_carousel_item .lprc-plano {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.stm_lms_single_course_carousel_item .lprc-plano .lprc-plano__titulo {
	display: none;
}

/* Título e linha das aulas mais juntos (o MasterStudy separa com 27 px). */
.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item:has(.lprc-plano) .stm_lms_single_course_carousel_item__content h2 {
	margin-bottom: 8px;
}

.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item:has(.lprc-plano) .stm_lms_single_course_carousel_item__content .stm_lms_courses__single--info_meta {
	margin-bottom: 20px;
}

.stm_lms_single_course_carousel_item .lprc-plano .lprc-plano__parcela {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.stm_lms_single_course_carousel_item .lprc-plano .lprc-plano__valor {
	font-size: 30px;
}

.stm_lms_single_course_carousel_item .lprc-plano .lprc-plano__total {
	margin: 2px 0 8px;
}

.stm_lms_single_course_carousel_item .lprc-plano .lprc-plano__botao {
	margin-top: 14px;
}

/* Item do carrinho (coluna "Total"): a parcela primeiro, o total e o Pix embaixo (1.1.0). */
.lprc-item {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	line-height: 1.3;
	text-align: right;
}

.lprc-item__parcela {
	color: #3c3489;
	font-size: 17px;
	font-weight: 700;
}

.lprc-item__total {
	color: #534ab7;
	font-size: 13px;
	font-weight: 400;
}

.lprc-item__pix {
	color: #0f6e56;
	font-size: 13px;
	font-weight: 600;
}

/* "Como você pode pagar" no resumo do carrinho e do checkout (1.1.0). */
/* `table tr … td.…` ganha do `.woocommerce-cart .cart_totals table td { text-align: right }` do addon Carrinho. */
table tr.lprc-opcoes td.lprc-opcoes__celula {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
}

/* Celular: o tema põe as linhas dos totais em "flex" (`.cart_totals .cart-totals_wrap table tbody tr td`); a lista fica em pé. */
@media (max-width: 575.98px) {
	.cart_totals .cart-totals_wrap table tbody tr.lprc-opcoes,
	.cart_totals .cart-totals_wrap table tbody tr.lprc-opcoes td.lprc-opcoes__celula {
		display: block;
		width: 100%;
	}
}

.lprc-opcoes .lprc-opcoes__titulo {
	margin: 0 0 8px;
	text-align: left;
	color: #1f1f29;
	font-size: 14px;
	font-weight: 600;
}

.lprc-opcoes__linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 6px 0;
	padding: 9px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #ffffff;
	font-size: 14px;
	line-height: 1.3;
}

.lprc-opcoes__linha--pix {
	border-color: #0f6e56;
	background: #f2fbf7;
}

.lprc-opcoes__meio {
	color: #1f1f29;
	font-weight: 600;
}

.lprc-opcoes__valor {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: #1f1f29;
	font-weight: 600;
	text-align: right;
}

.lprc-opcoes__valor--pix {
	color: #0f6e56;
}

.lprc-opcoes__parcela {
	color: #3c3489;
}

.lprc-opcoes__detalhe {
	color: #6b7280;
	font-size: 12px;
	font-weight: 400;
}

/* Carrinho: com a lista "Como você pode pagar", a linha "Total" some (confundia com o valor do Pix; 1.2.0). */
.cart_totals table:has(tr.lprc-opcoes) tr.order-total {
	display: none;
}

/* Checkout: quadro da forma escolhida e botões das outras (1.2.0). */
table tr.lprc-escolha td.lprc-escolha__celula {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
}

/* O rótulo à esquerda; o valor e o detalhe à direita, como as outras linhas do resumo (1.2.1). */
.lprc-escolha__ativa {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 2px;
	padding: 12px 14px;
	border: 2px solid #6648f0;
	border-radius: 8px;
	background: #f6f4ff;
	line-height: 1.3;
}

.lprc-escolha__ativa--pix {
	border-color: #0f6e56;
	background: #f2fbf7;
}

.lprc-escolha__rotulo {
	grid-column: 1;
	grid-row: 1 / span 2;
	color: #534ab7;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.lprc-escolha__ativa--pix .lprc-escolha__rotulo,
.lprc-escolha__ativa--pix .lprc-escolha__valor {
	color: #0f6e56;
}

.lprc-escolha__valor {
	grid-column: 2;
	grid-row: 1;
	color: #3c3489;
	font-size: 19px;
	font-weight: 700;
	text-align: right;
}

.lprc-escolha__detalhe {
	grid-column: 2;
	grid-row: 2;
	color: #6b7280;
	font-size: 13px;
	text-align: right;
}

/* Celular: o rótulo numa linha própria em cima; o valor e o detalhe continuam à direita. */
@media (max-width: 480px) {
	.lprc-escolha__ativa {
		grid-template-columns: minmax(0, 1fr);
	}

	.lprc-escolha__rotulo {
		grid-row: 1;
	}

	.lprc-escolha__valor,
	.lprc-escolha__detalhe {
		grid-column: 1;
	}

	.lprc-escolha__valor {
		grid-row: 2;
	}

	.lprc-escolha__detalhe {
		grid-row: 3;
	}
}

.lprc-escolha__outra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-top: 8px;
	padding: 10px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #ffffff;
	color: #1f1f29;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.lprc-escolha__outra:hover,
.lprc-escolha__outra:focus-visible {
	border-color: #6648f0;
}

.lprc-escolha__outra--pix:hover,
.lprc-escolha__outra--pix:focus-visible {
	border-color: #0f6e56;
}

.lprc-escolha__outra-valor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	color: #3c3489;
	text-align: right;
}

.lprc-escolha__outra--pix .lprc-escolha__outra-valor {
	color: #0f6e56;
}

.lprc-escolha__outra-valor .lprc-plano__off {
	margin-left: 0;
}

.lprc-escolha__outra-detalhe {
	color: #6b7280;
	font-size: 12px;
	font-weight: 400;
}

/* Cupons das campanhas no bloco e no item do carrinho (1.4.0). */

.lprc-plano .lprc-plano__cupom {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: center;
	margin: 10px 0 0;
	padding: 8px 10px;
	border: 1px dashed #b9b3f5;
	border-radius: 4px;
	background: #f7f6fe;
	font-size: 13px;
	line-height: 1.4;
}

.lprc-plano__cupom-codigo {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lprc-plano__cupom-desconto {
	color: #0f6e56;
	font-weight: 700;
}

.lprc-plano__cupom-preco {
	color: #1f1f29;
}

.lprc-plano__cupom-estado {
	flex-basis: 100%;
	color: #6b7280;
	font-size: 12px;
}

.lprc-plano__cupom-estado--ok {
	color: #0f6e56;
	font-weight: 600;
}

.lprc-plano__cupom-estado--erro {
	color: #a32d2d;
}

.lprc-plano__cupom-botao,
.lprc-item__cupom-botao {
	padding: 5px 10px;
	border: 1px solid #6648f0;
	border-radius: 4px;
	background: #ffffff;
	color: #6648f0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.lprc-plano__cupom-botao:hover,
.lprc-item__cupom-botao:hover {
	background: #6648f0;
	color: #ffffff;
}

.lprc-plano__cupom-botao[disabled],
.lprc-item__cupom-botao[disabled] {
	opacity: 0.6;
	cursor: default;
}

.lprc-item__cupom {
	font-size: 12px;
}

.lprc-item__cupom--ok {
	color: #0f6e56;
	font-weight: 600;
}

.lprc-item .lprc-item__cupom-botao {
	max-width: 100%;
	margin-top: 4px;
	white-space: normal;
	text-align: right;
}

/* ---------------------------------------------------------------------------
 * Plano extra ao lado (1.7.0, modelo 3): o curso e o vitalício lado a lado, cada um com o preço e o botão.
 * ------------------------------------------------------------------------- */
.lprc-planos {
	display: grid;
	/* Lado a lado quando cabe (cada cartão com pelo menos 210 px); senão, um embaixo do outro. */
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	align-items: stretch;
	width: 100%;
}

.lprc-planos > .lprc-plano {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0;
}

/* O "N% off" desce para a linha de baixo quando o cartão é estreito, e o botão quebra o texto em vez de vazar. */
.lprc-planos .lprc-plano__pix {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
}

.lprc-planos .lprc-plano__off {
	margin-left: 0;
}

.lprc-planos .lprc-plano__botao,
.lprc-planos .masterstudy-buy-button__link {
	white-space: normal;
	text-align: center;
}

/*
 * O botão vai para o pé do cartão, para os dois ficarem na mesma linha, e fica fino como no modelo 3 aprovado
 * (1.9.0: antes tinha 47 px e encostava no Pix, porque o `margin-top: auto` zerava o respiro no cartão mais alto).
 */
.lprc-planos > .lprc-plano > .lprc-plano__botao,
.lprc-planos > .lprc-plano > .masterstudy-buy-button__link.lprc-plano__botao {
	margin-top: auto;
	padding: 8px 14px;
	font-size: 15px;
	font-weight: 500;
}

/* O respiro acima do botão fica no que vem antes dele, para valer também no cartão mais alto. */
.lprc-planos > .lprc-plano > :has(+ .lprc-plano__botao) {
	margin-bottom: 14px;
}

/* O selo fica pendurado na borda de cima, à direita, como no modelo 3 (1.9.0). */
.lprc-planos .lprc-plano__selo {
	position: absolute;
	top: -10px;
	right: 12px;
	margin: 0;
	padding: 2px 8px;
	background: var(--lprc-cor);
	color: #ffffff;
	font-size: 11px;
	line-height: 1.4;
	vertical-align: baseline;
}

.lprc-planos:has(.lprc-plano__selo) {
	padding-top: 10px;
}

/* 1.11.0: bloco sozinho com o selo do widget ou do shortcode (ex.: o vitalício numa landing page), pendurado na borda. */
.lprc-plano.lprc-plano--selo-borda {
	position: relative;
	margin-top: 10px;
}

.lprc-planos > .lprc-plano.lprc-plano--selo-borda {
	margin-top: 0;
}

.lprc-plano--selo-borda .lprc-plano__selo {
	position: absolute;
	top: -10px;
	right: 12px;
	margin: 0;
	padding: 2px 8px;
	background: var(--lprc-cor);
	color: #ffffff;
	font-size: 11px;
	line-height: 1.4;
	vertical-align: baseline;
}

/* Com o plano extra em destaque, o botão do outro fica contornado (um só botão cheio). */
.lprc-planos:has(> .lprc-plano--destaque) > .lprc-plano:not(.lprc-plano--destaque) .lprc-plano__botao,
.lprc-planos:has(> .lprc-plano--destaque) > .lprc-plano:not(.lprc-plano--destaque) .masterstudy-buy-button__link {
	border: 1px solid var(--lprc-cor);
	background: #ffffff;
	color: var(--lprc-cor);
}

/* Hover do botão contornado: fundo lilás clarinho, o mesmo do selo (o branco de cima tinha mais força que o hover). */
.lprc-planos:has(> .lprc-plano--destaque) > .lprc-plano:not(.lprc-plano--destaque) .lprc-plano__botao:hover,
.lprc-planos:has(> .lprc-plano--destaque) > .lprc-plano:not(.lprc-plano--destaque) .lprc-plano__botao:focus,
.lprc-planos:has(> .lprc-plano--destaque) > .lprc-plano:not(.lprc-plano--destaque) .masterstudy-buy-button__link:hover,
.lprc-planos:has(> .lprc-plano--destaque) > .lprc-plano:not(.lprc-plano--destaque) .masterstudy-buy-button__link:focus {
	border-color: var(--lprc-cor);
	background: var(--lprc-selo-fundo);
	color: var(--lprc-cor);
}

/* Na vitrine, os dois planos voltam a ter caixa (o bloco sozinho fica sem caixa) e o título aparece. */
.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item__content .stm_lms_courses__single__buy:has(.lprc-planos) {
	max-width: 560px;
}

/* O tema prende o botão do MasterStudy em 360 px na vitrine; com os dois planos, ele ocupa a coluna toda. */
.stm_lms_single_course_carousel_wrapper .stm_lms_single_course_carousel .stm_lms_single_course_carousel_item__content .stm_lms_courses__single__buy .masterstudy-buy-button:has(> .lprc-planos) {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
}

.stm_lms_single_course_carousel_item .lprc-planos > .lprc-plano {
	padding: 14px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
}

.stm_lms_single_course_carousel_item .lprc-planos > .lprc-plano--destaque {
	border: 2px solid var(--lprc-cor);
}

.stm_lms_single_course_carousel_item .lprc-planos > .lprc-plano .lprc-plano__titulo {
	display: block;
}

.stm_lms_single_course_carousel_item .lprc-planos > .lprc-plano .lprc-plano__valor {
	font-size: 24px;
}