/* NICHO Finanças · todos os kits: Debt payoff plan. Quase tudo vem de ferramentas-base.css; aqui só o próprio dela. */

/* Caixas das dívidas: nome na linha toda; saldo, juros e mínimo em 3 colunas. */
.nx-ft-div__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nx-ft-div__item {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--nx-line);
	border-radius: 14px;
	background: var(--nx-white, #fff);
}

.nx-ft-div__item legend {
	float: left;
	grid-column: 1 / -1;
	width: 100%;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--nx-ink);
}

.nx-ft-div__nome {
	grid-column: 1 / -1;
}

.nx-ft-div__item .nx-tool-field label {
	font-size: 13px;
}

.nx-ft-div__item .nx-tool-input {
	height: 52px;
	padding: 0 14px;
	font-size: 16px;
}

/* Os dois métodos: o que paga menos juros em tom claro da cor do site e em negrito. */
.nx-ft-div__plans {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nx-ft-div__plan {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--nx-soft, #FAFAFA);
}

.nx-ft-div__plan[hidden] {
	display: none;
}

.nx-ft-div__plan.is-best {
	background: color-mix(in oklab, var(--nx-accent) 10%, #fff);
}

.nx-ft-div__plan-name {
	font-size: 15px;
	font-weight: 600;
}

.nx-ft-div__plan.is-best .nx-ft-div__plan-name {
	font-weight: 800;
}

.nx-ft-div__plan strong {
	font-size: 17px;
	font-variant-numeric: tabular-nums;
}

.nx-ft-div__plan > span:last-child {
	font-size: 14px;
	color: var(--nx-muted);
}

/* Ordem de pagamento. */
.nx-ft-div__order-title {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nx-ink);
}

.nx-ft-div__order {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding-left: 20px;
	font-size: 16px;
}

.nx-ft-div__order:empty,
.nx-ft-div__msg:empty {
	display: none;
}

.nx-ft-div__msg {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nx-muted);
}

@media (max-width: 640px) {
	.nx-ft-div__item {
		grid-template-columns: 1fr;
	}

	.nx-ft-div__plan {
		grid-template-columns: 1fr 1fr;
	}

	.nx-ft-div__plan-name {
		grid-column: 1 / -1;
	}
}