/* Parcelamento Pro - frontend.
   Propositalmente discreto: herda a tipografia do tema e so organiza o espacamento. */

.wcpp-installments {
	margin: 8px 0;
	line-height: 1.5;
}

/* O wc_price() devolve <span class="woocommerce-Price-amount amount"><bdi>...</bdi></span>.
   Quase todo tema WooCommerce define cor, tamanho e peso nesse span. Como a regra do tema
   é mais específica que a herança, mudar a cor do container não mudava o preço.
   Aqui o span volta a herdar do pai — e os controles do Elementor, que são mais
   específicos ainda, continuam mandando quando o usuário mexe neles. */

.wcpp-installments .woocommerce-Price-amount,
.wcpp-installments .amount,
.wcpp-installments .woocommerce-Price-currencySymbol,
.wcpp-installments bdi {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-decoration: none;
	text-transform: none;
}

.wcpp-installments .amount {
	white-space: nowrap;
}

.wcpp-context-loop {
	margin: 4px 0 8px;
	font-size: 0.875em;
	opacity: 0.85;
}

.wcpp-toggle-table {
	display: inline;
	margin-left: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.875em;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	opacity: 0.75;
}

.wcpp-toggle-table:hover,
.wcpp-toggle-table:focus-visible {
	opacity: 1;
}

.wcpp-table {
	margin-top: 10px;
	max-width: 420px;
}

.wcpp-table[hidden] {
	display: none;
}

.wcpp-table table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9375em;
}

.wcpp-table th,
.wcpp-table td {
	padding: 6px 10px;
	border: 0;
	border-bottom: 1px solid rgba(127, 127, 127, 0.25);
	text-align: left;
	font-weight: 400;
}

.wcpp-table tr:last-child th,
.wcpp-table tr:last-child td {
	border-bottom: 0;
}

.wcpp-table th {
	width: 3.5em;
	font-weight: 600;
}

.wcpp-table__note {
	text-align: right;
	opacity: 0.7;
	font-size: 0.9em;
}

.wcpp-checkout-row .wcpp-select {
	width: 100%;
	max-width: 100%;
}

.wcpp-elementor-placeholder {
	padding: 14px 16px;
	border: 1px dashed rgba(127, 127, 127, 0.5);
	border-radius: 4px;
	font-size: 13px;
	opacity: 0.8;
}

/* Cada marcador do texto sai no seu proprio span, para poder
   ser estilizado sozinho pelo Elementor ou por CSS. */

.wcpp-token {
	display: inline;
}

/* Linha do desconto a vista */

.wcpp-discount {
	margin-top: 4px;
	line-height: 1.5;
}

.wcpp-context-loop .wcpp-discount {
	font-size: 0.95em;
}

/* Widget de desconto a vista */

.wcpp-discount-widget .wcpp-discount {
	margin-top: 0;
}

.wcpp-discount-widget--badge .wcpp-discount {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(20, 113, 58, 0.1);
	line-height: 1.4;
}

.wcpp-discount-widget--block .wcpp-discount {
	display: block;
	padding: 12px 16px;
	border-radius: 6px;
	background: rgba(20, 113, 58, 0.08);
}

.wcpp-token--strike del {
	text-decoration: line-through;
	opacity: 0.6;
}