.gf-family-members-field,
.gf-family-members-admin-field {
	margin-bottom: 1em;
}

.gf-family-members-rows {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
}

.gf-family-members-row {
	padding: 0 0 1rem;
}

/* Aligne en-tête + lignes sur 4 colonnes + actions, avec vrai espacement.
   Sélecteurs assez spécifiques pour gagner face au thème Orbital / gform-grid. */
.gf-family-members-field .gf-family-members-columns-header,
.gf-family-members-field .gf-family-members-row-fields {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
}

.gf-family-members-field .gf-family-members-header-cell,
.gf-family-members-field .gf-family-members-field-wrap {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.gf-family-members-field .gf-family-members-header-cell--actions,
.gf-family-members-field .gf-family-members-remove {
	flex: 0 0 auto;
	align-self: center;
}

.gf-family-members-field .gf-family-members-header-label {
	display: inline-block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.gf-family-members-field-wrap label.gf-family-members-subfield-label {
	display: inline-block;
	font-size: inherit;
	font-weight: inherit;
	margin-bottom: 0.35rem;
}

.gf-family-members-field-wrap--date .ginput_container_date {
	width: 100%;
}

.gf-family-members-field-wrap--date .gf-fm-birth-date {
	width: 100%;
	max-width: 100%;
}

.gf-family-members-field-wrap input,
.gf-family-members-field-wrap select {
	width: 100%;
	max-width: 100%;
}

/*
 * Neutralise le style « champ rempli / autofill » (fond gris, texte blanc)
 * appliqué par le navigateur ou le thème sur prénom / nom.
 */
.gf-family-members-field input.gf-fm-first-name,
.gf-family-members-field input.gf-fm-last-name,
.gf-family-members-field input.gf-fm-first-name:hover,
.gf-family-members-field input.gf-fm-last-name:hover,
.gf-family-members-field input.gf-fm-first-name:focus,
.gf-family-members-field input.gf-fm-last-name:focus,
.gf-family-members-field input.gf-fm-first-name:not(:placeholder-shown),
.gf-family-members-field input.gf-fm-last-name:not(:placeholder-shown) {
	background-color: #fff !important;
	color: #1d2327 !important;
	-webkit-text-fill-color: #1d2327 !important;
	caret-color: #1d2327;
}

.gf-family-members-field input.gf-fm-first-name:-webkit-autofill,
.gf-family-members-field input.gf-fm-last-name:-webkit-autofill,
.gf-family-members-field input.gf-fm-first-name:-webkit-autofill:hover,
.gf-family-members-field input.gf-fm-last-name:-webkit-autofill:hover,
.gf-family-members-field input.gf-fm-first-name:-webkit-autofill:focus,
.gf-family-members-field input.gf-fm-last-name:-webkit-autofill:focus,
.gf-family-members-field input.gf-fm-first-name:-webkit-autofill:active,
.gf-family-members-field input.gf-fm-last-name:-webkit-autofill:active {
	-webkit-text-fill-color: #1d2327 !important;
	caret-color: #1d2327;
	box-shadow: 0 0 0 1000px #fff inset !important;
	transition: background-color 99999s ease-out;
}

.gf-family-members-add {
	margin-top: 0.5rem;
}

.gf-family-members-remove {
	justify-self: start;
	background: transparent;
	border: 0;
	color: #2271b1;
	cursor: pointer;
	padding: 0.25rem 0;
	text-decoration: underline;
	white-space: nowrap;
}

.gf-family-members-remove:hover,
.gf-family-members-remove:focus {
	color: #135e96;
}

.gf-family-members-field .gf-fm-row-error {
	flex: 1 1 100%;
	margin: 0.35rem 0 0;
	color: #b32d2e;
	font-size: 13px;
	font-weight: 600;
}

.gf-family-members-row--invalid .gf-family-members-field-wrap input[type="text"] {
	border-color: #b32d2e;
}

/* Le select garde toujours son apparence par défaut (pas de bordure foncée / rouge en alerte). */
.gf-family-members-field select.gf-fm-relationship,
.gf-family-members-field select.gf-fm-relationship:hover,
.gf-family-members-field select.gf-fm-relationship:focus,
.gf-family-members-field select.gf-fm-relationship:active,
.gf-family-members-row--invalid select.gf-fm-relationship,
.gf-family-members-row--invalid select.gf-fm-relationship:focus {
	outline: 1px solid #e5e5e5 !important;
	border-color: transparent !important;
	border-right-color: transparent !important;
	box-shadow: none !important;
}

.gf-family-members-editor-placeholder {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	border: 1px dashed #ccc;
	border-radius: 4px;
	color: #666;
	background: #f9f9f9;
}

/*
 * Gravity Forms ne fournit pas la règle jQuery UI de base qui masque le conteneur
 * partagé. Sans elle, un redraw (ex. datepicker('option')) laisse le calendrier
 * visible en bas de page.
 */
#ui-datepicker-div {
	display: none;
}

.gf-family-members-merge-grid {
	width: 100%;
	margin: 8px 0;
}

.gf-family-members-grid-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: 100%;
}

.gf-family-members-grid-cell,
.gf-family-members-grid-cell--header {
	padding: 8px 10px;
	box-sizing: border-box;
	word-break: break-word;
}

.gf-family-members-grid-cell--header {
	font-weight: 700;
}

@media (max-width: 782px) {
	.gf-family-members-field .gf-family-members-columns-header {
		display: none !important;
	}

	.gf-family-members-field .gf-family-members-row-fields {
		flex-wrap: wrap;
	}

	.gf-family-members-field .gf-family-members-field-wrap {
		flex: 1 1 calc(50% - 0.75rem);
		min-width: 140px;
	}

	.gf-family-members-field .gf-family-members-remove {
		flex: 1 1 100%;
		align-self: flex-start;
	}

	.gf-family-members-grid-row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.gf-family-members-field .gf-family-members-field-wrap {
		flex: 1 1 100%;
	}
}