/**
 * Cuadro "Información de pago" de la ficha del vehículo.
 *
 * Marcado propio del plugin (.idt-paybox), no el del antiguo snippet. Eso quita
 * de en medio la guerra de especificidad que había: el snippet ponía sus
 * estilos, Elementor los sobrescribía con bordes rojos y naranjas, y cualquier
 * ajuste obligaba a escalar selectores. Con clases nuestras no hay nada con lo
 * que competir.
 *
 * Mismo lenguaje visual que el resumen del carrito y de finalizar compra: el
 * total como referencia en gris, lo que se paga hoy en verde y lo que queda en
 * ámbar.
 */

.idt-paybox {
	--idt-verde: #0b7a5c;
	--idt-verde-claro: #eef7f2;
	--idt-ambar: #d9730d;
	--idt-tinta: #1c2733;
	--idt-gris: #5b6875;

	box-sizing: border-box;
	margin: 16px 0;
	padding: 16px;
	border: 1px solid #e7ebf0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	color: var(--idt-tinta);
	font-size: 14px;
	line-height: 1.5;
}

.idt-paybox[hidden] {
	display: none;
}

.idt-paybox__title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--idt-tinta);
}

/* ── Filas ──────────────────────────────────────────────────────────────── */

.idt-paybox__row {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f2f5f8;
}

.idt-paybox__label {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
	color: var(--idt-gris);
}

.idt-paybox__value {
	flex: 0 0 auto;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
	color: var(--idt-tinta);
}

.idt-paybox__pill {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--idt-verde-claro);
	color: var(--idt-verde);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* Lo que se paga hoy: la cifra que decide en esta pantalla. */
.idt-paybox__row--now {
	margin: 4px -12px;
	padding: 12px;
	border-bottom: none;
	border-radius: 10px;
	background: var(--idt-verde-claro);
}

.idt-paybox__row--now .idt-paybox__label,
.idt-paybox__row--now .idt-paybox__value {
	color: var(--idt-verde);
	font-weight: 700;
}

.idt-paybox__row--now .idt-paybox__value {
	font-size: 16px;
}

.idt-paybox__row--now .idt-paybox__pill {
	background: #fff;
}

/* Lo pendiente: ámbar. Avisa sin alarmar, sin la franja roja de antes. */
.idt-paybox__row--later {
	margin: 4px -12px 0;
	padding: 12px;
	border-bottom: none;
	border-radius: 10px;
	background: #fff8ec;
}

.idt-paybox__row--later .idt-paybox__label,
.idt-paybox__row--later .idt-paybox__value {
	color: var(--idt-ambar);
	font-weight: 700;
}

.idt-paybox__row--later .idt-paybox__value {
	font-size: 15px;
}

/* ── Nota ───────────────────────────────────────────────────────────────── */

.idt-paybox__note {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #f7f9fc;
	color: var(--idt-gris);
	font-size: 12.5px;
	line-height: 1.55;
}

@media (max-width: 600px) {
	.idt-paybox {
		padding: 14px;
	}

	.idt-paybox__row--now,
	.idt-paybox__row--later {
		margin-left: -10px;
		margin-right: -10px;
		padding: 11px 10px;
	}
}