/**
 * Gravity Forms styling for Choisir Ma Creche v2.
 *
 * Overrides GF defaults to match the brand design system.
 */

/* ──────────────────────────────────────────────
   Form container
   ────────────────────────────────────────────── */

.gform_wrapper {
	background-color: var(--wp--preset--color--white);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--gray);
}

/* Hide form title & description (handled by page template) */
.gform_wrapper .gform_heading {
	display: none;
}

/* Reset stale customizer CSS targeting specific field IDs */
.gform_wrapper .gfield_html {
	border-top: none !important;
	padding-top: 0 !important;
}

/* ──────────────────────────────────────────────
   Field grid layout (two-column support)
   ────────────────────────────────────────────── */

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.gform_wrapper .gform_fields .gfield--width-full,
.gform_wrapper .gform_fields .gsection,
.gform_wrapper .gform_fields .gfield_html {
	grid-column: 1 / -1;
}

.gform_wrapper .gform_fields .gfield--width-half {
	grid-column: span 1;
}

@media (max-width: 600px) {
	.gform_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}
}

/* ──────────────────────────────────────────────
   Base form elements
   ────────────────────────────────────────────── */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper .gform-datepicker,
.gform_wrapper textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid var(--wp--preset--color--gray);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--wp--preset--color--tertiary);
	box-shadow: 0 0 0 3px rgba(143, 176, 204, 0.25);
	outline: none;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper select {
	height: 50px;
	border-radius: 99px;
}

.gform_wrapper form .gform_body ul.gform_fields .gfield select {
	border: 2px solid var(--wp--preset--color--gray);
}

/* Labels */
.gform_wrapper label.gfield_label {
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.375rem;
}

.gform_wrapper label.gform-field-label.gform-field-label--type-sub {
	font-weight: 400;
	font-size: 1rem;
}

/* Required asterisk */
.gform_wrapper .gfield_required {
	color: var(--wp--preset--color--primary);
}

/* Description / help text */
.gform_wrapper .gfield_description {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted);
	margin-top: 0.25rem;
}

/* ──────────────────────────────────────────────
   Submit button
   ────────────────────────────────────────────── */

.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button {
	display: inline-block;
	padding: 0.875rem 2rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 99px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
	background: var(--wp--preset--color--primary);
}

/* ──────────────────────────────────────────────
   Validation
   ────────────────────────────────────────────── */

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: var(--wp--preset--color--error);
}

.gform_wrapper .gfield_error .gfield_label {
	color: var(--wp--preset--color--error);
}

.gform_wrapper .validation_message {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--error);
	margin-top: 0.25rem;
}

/* Confirmation message */
.gform_wrapper .gform_confirmation_message {
	padding: 1.5rem;
	background: var(--wp--preset--color--accent-extra-light);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* ──────────────────────────────────────────────
   Checkboxes & radios
   ────────────────────────────────────────────── */

.gform_wrapper .gchoice {
	margin-bottom: 0.5rem;
}

.gform_wrapper .gchoice label,
.gform_wrapper .gfield_consent_label,
.gform_wrapper .gform-field-label--type-inline {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
}

/* ──────────────────────────────────────────────
   Multi-page: step indicators
   ────────────────────────────────────────────── */

/* Hide default progress bar */
.gform_wrapper .gf_progressbar_wrapper {
	display: none;
}

/* Step indicators container */
.gform_wrapper .gf_page_steps {
	display: flex;
	justify-content: center;
	gap: 2rem;
	padding: 0 0 1.5rem;
	margin: 0 0 1.5rem;
	border-bottom: none;
}

/* Individual step */
.gform_wrapper .gf_step {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	opacity: 0.4;
}

.gform_wrapper .gf_step_active {
	opacity: 1;
}

.gform_wrapper .gf_step_completed {
	opacity: 0.7;
}

/* Step number circle */
.gform_wrapper .gf_step_number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.875rem;
	flex-shrink: 0;
}

/* Step label */
.gform_wrapper .gf_step_label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--primary);
}

/* Hide "Step X of Y" default text */
.gform_wrapper .gf_step_clear {
	display: none;
}

@media (max-width: 768px) {
	.gform_wrapper .gf_page_steps {
		gap: 1rem;
		justify-content: space-evenly !important;
	}

	.gform_wrapper .gf_step {
		margin: 0 !important;
		display: flex !important;
		gap: 5px !important;
	}

	.gform_wrapper .gf_step .gf_step_label {
		display: none !important;
		padding: 0 !important;
	}

	.gform_wrapper .gf_step_active .gf_step_label {
		display: inline !important;
	}

	.gform_wrapper .gf_step_number {
		width: 35px !important;
		height: 35px !important;
		font-size: 1.125rem !important;
		background-color: var(--wp--preset--color--primary) !important;
		color: var(--wp--preset--color--white) !important;
	}
}

/* ──────────────────────────────────────────────
   Multi-page: section titles
   ────────────────────────────────────────────── */

.gform_wrapper .gsection .gsection_title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.5rem;
}

/* ──────────────────────────────────────────────
   Multi-page: navigation buttons
   ────────────────────────────────────────────── */

.gform_wrapper .gform_page_footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 0;
	border-top: none;
}

.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
	display: inline-block;
	padding: 0.875rem 2.5rem;
	border: none;
	border-radius: 99px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.gform_wrapper .gform_next_button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.gform_wrapper .gform_next_button:hover {
	opacity: 0.9;
}

.gform_wrapper .gform_previous_button {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}

.gform_wrapper .gform_previous_button:hover {
	background: var(--wp--preset--color--accent-extra-light);
}

/* ──────────────────────────────────────────────
   Multi-page: labels (smaller for form fields)
   ────────────────────────────────────────────── */

.gform_wrapper .gform_page label.gfield_label {
	font-weight: 400;
	font-size: 1rem;
	color: var(--wp--preset--color--primary);
}

/* ──────────────────────────────────────────────
   Repeater field (children)
   ────────────────────────────────────────────── */

.gform_wrapper .gfield_repeater_wrapper {
	border: none;
	padding: 0;
}

/* Hide the repeater legend (section title is already in the form) */
.gform_wrapper .gfield_repeater > .gfield_label {
	display: none;
}

/* Each child item */
.gform_wrapper .gfield_repeater_item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1.5rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--gray);
}

.gform_wrapper .gfield_repeater_item:first-child {
	padding-top: 0;
}

.gform_wrapper .gfield_repeater_item:last-child {
	border-bottom: none;
}

/* Buttons row spans full width */
.gform_wrapper .gfield_repeater_buttons {
	grid-column: 1 / -1;
}

/* Match repeater inputs to global form input styles */
.gform_wrapper .gfield_repeater_cell .ginput_container input[type="text"] {
	width: 100% !important;
	padding: 0.75rem 1rem !important;
	border: 2px solid var(--wp--preset--color--gray) !important;
	border-radius: 99px !important;
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--text) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	height: 50px !important;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.gform_wrapper
	.gfield_repeater_cell
	.ginput_container
	input[type="text"]:focus {
	border-color: var(--wp--preset--color--tertiary) !important;
	box-shadow: 0 0 0 3px rgba(143, 176, 204, 0.25) !important;
	outline: none !important;
}

/* Match repeater labels to form label styles */
.gform_wrapper .gfield_repeater_cell .gfield_label,
.gform_wrapper .gfield_repeater_cell legend.gfield_label {
	font-weight: 400;
	font-size: 1rem;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.375rem;
	padding: 0;
	border: none;
}

/* Reset GF gravity-theme repeater cell padding */
.gform_wrapper.gravity-theme
	.gfield_repeater_items
	.gfield_repeater_cell:not(:first-child) {
	padding-top: 0 !important;
}

/* Repeater fieldsets (date fields) */
.gform_wrapper .gfield_repeater_cell fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

/* Buttons */
.gform_wrapper .gfield_repeater_buttons .add_repeater_item {
	display: inline-block;
	padding: 0.275rem 0.875rem !important;
	border: none;
	border-radius: 10px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 400 !important;
	font-size: 1rem !important;
	cursor: pointer;
	height: unset !important;
	transition: background-color 0.2s ease;
	background: transparent !important;
	color: var(--wp--preset--color--primary) !important;
	border: 1px solid var(--wp--preset--color--primary) !important;
}

.gform_wrapper .gfield_repeater_buttons .add_repeater_item:hover {
	background: var(--wp--preset--color--accent-extra-light);
}

.gform_wrapper .gfield_repeater_buttons .remove_repeater_item {
	display: inline-block;
	padding: 0.275rem 0.875rem !important;
	border: none;
	border-radius: 10px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 400 !important;
	font-size: 1rem !important;
	cursor: pointer;
	height: unset !important;
	transition: background-color 0.2s ease;
	background: transparent !important;
	color: var(--wp--preset--color--error, #c00) !important;
	border: 1px solid var(--wp--preset--color--error, #c00) !important;
}

.gform_wrapper .gfield_repeater_buttons .remove_repeater_item:hover {
	background: rgba(204, 0, 0, 0.05);
}

@media (max-width: 600px) {
	.gform_wrapper .gfield_repeater_item {
		grid-template-columns: 1fr;
	}
}

.form-help-info {
	background-color: var(--wp--preset--color--accent-extra-light);
	border-color: var(--wp--preset--color--accent-light);
	border-width: 2px;
	border-style: solid;
	border-radius: 1rem;
	margin: 1rem 0;
	padding: 0.875rem;
}

.form-help-info p:last-of-type {
	margin-bottom: 0;
}

.form-help-info .header-form-help-info {
	font-weight: 600;
	font-size: 1.125rem;
	display: flex;
	column-gap: 1rem;
	row-gap: 0.5rem;
	flex-direction: row;
	align-items: center;
}

.form-help-info .header-form-help-info img {
	width: 50px;
	height: 50px;
}

.form-help-info .header-form-help-info small {
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}
