.cf7rf-items-wrapper .cf7rf-row {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin-bottom: 10px;
	align-items: center; /* centra verticalmente inputs y botón "✕" entre sí */
	width: 100%;
	padding-right: 52px; /* reserva espacio fijo para el botón "✕" en posición absoluta */
	box-sizing: border-box;
}

/* Los 3 campos se reparten el espacio disponible y se encogen si hace falta,
   en vez de saltar de línea (que es lo que hacía "column-third" del theme). */
.cf7rf-items-wrapper .cf7rf-row .cf7rf-field {
	flex: 1 1 0;
	min-width: 0; /* permite que los inputs se encojan dentro del flex sin desbordar */
}

.cf7rf-items-wrapper .cf7rf-row .cf7rf-field p,
.cf7rf-items-wrapper .cf7rf-row .cf7rf-field input {
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

/* Botón eliminar: oculto SIEMPRE en la primera fila, visible desde la segunda.
   Se controla por CSS (no por JS) para que sea a prueba de fallos.
   Usamos !important porque muchos themes estilizan "button" de forma global
   con más especificidad que una simple clase, y pisaban esta regla. */
.cf7rf-items-wrapper .cf7rf-row .cf7rf-remove-row {
	background: #171b26 !important;
	color: #fff !important;
	border-width: 0px 0px 0px 0px !important;
	border-style: solid !important;
	border-radius: 50% !important;
	box-sizing: border-box !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	max-width: 42px !important;
	min-height: 42px !important;
	max-height: 42px !important;
	padding: 10px 10px 10px 10px !important;
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1 !important;
	cursor: pointer;
	flex-shrink: 0;
	/* Posicionado en absoluto y centrado matemáticamente respecto a la fila,
	   así no depende de cómo el theme calcule el align-items del flex. */
	position: absolute !important;
	right: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
}

.cf7rf-items-wrapper .cf7rf-row:not(:first-child) .cf7rf-remove-row {
	display: flex !important;
}

.cf7rf-remove-row:hover {
	background: #a4262c;
}

/* En pantallas pequeñas sí permitimos que baje a columna, para no romper el layout. */
@media (max-width: 600px) {
	.cf7rf-items-wrapper .cf7rf-row {
		flex-wrap: wrap;
	}
	.cf7rf-items-wrapper .cf7rf-row .cf7rf-field {
		flex: 1 1 100%;
	}
}

.cf7rf-add-row {
	background: #2271b1;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	cursor: pointer;
	margin-top: 8px;
}

.cf7rf-add-row:hover {
	background: #135e96;
}

.cf7rf-add-row:disabled {
	background: #999;
	cursor: not-allowed;
}