/**
 * Gravity Forms Widget - front-end styles.
 *
 * Everything user-configurable is generated by Elementor from the widget
 * controls. This file only holds the structural rules those controls rely on.
 */

.gfw-form-wrapper {
	width: 100%;
}

.gfw-form {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* Legacy (pre-2.5) markup renders fields as a list. */
.gfw-form .gform_wrapper ul.gform_fields,
.gfw-form .gform_wrapper ul.gform_fields li {
	list-style: none;
}

/* Let the Alignment / Width controls position the submit button exactly. */
.gfw-form .gform_wrapper .gform_footer input.button,
.gfw-form .gform_wrapper .gform_footer input[type="submit"],
.gfw-form .gform_wrapper .gform_footer .gform_button {
	margin: 0;
}

/* Custom title & description replaces Gravity Forms' own heading. */
.gfw-form.gfw-heading-hide .gform_wrapper .gform_heading {
	display: none;
}

.gfw-form-heading {
	margin-bottom: 20px;
}

.gfw-form-heading .gfw-form-title {
	margin: 0 0 8px;
}

.gfw-form-heading .gfw-form-description > :last-child {
	margin-bottom: 0;
}

/* Labels: Hide */
.gfw-form.gfw-labels-hide .gform_wrapper .gfield .gfield_label,
.gfw-form.gfw-labels-hide .gform_wrapper .gfield legend.gfield_label,
.gfw-form.gfw-labels-hide .gform_wrapper .gfield .ginput_complex label,
.gfw-form.gfw-labels-hide .gform_wrapper .gfield .gform-field-label--type-sub {
	display: none !important;
}

/*
 * Placeholder follows the input. Gravity Forms' Orbital theme sets the
 * placeholder font from its own CSS variables, so a font size set on the
 * input would otherwise leave the placeholder at the theme's size. The
 * widget's Placeholder typography control overrides this.
 */
.gfw-form .gform_wrapper input::placeholder,
.gfw-form .gform_wrapper textarea::placeholder {
	font-size: inherit;
	font-family: inherit;
}
.gfw-form .gform_wrapper input::-webkit-input-placeholder,
.gfw-form .gform_wrapper textarea::-webkit-input-placeholder {
	font-size: inherit;
	font-family: inherit;
}

/* Placeholder: Hide */
.gfw-form.gfw-placeholder-hide .gform_wrapper input::placeholder,
.gfw-form.gfw-placeholder-hide .gform_wrapper textarea::placeholder {
	color: transparent !important;
	opacity: 0;
}
.gfw-form.gfw-placeholder-hide .gform_wrapper input::-webkit-input-placeholder,
.gfw-form.gfw-placeholder-hide .gform_wrapper textarea::-webkit-input-placeholder {
	color: transparent !important;
	opacity: 0;
}
.gfw-form.gfw-placeholder-hide .gform_wrapper input::-moz-placeholder,
.gfw-form.gfw-placeholder-hide .gform_wrapper textarea::-moz-placeholder {
	color: transparent !important;
	opacity: 0;
}

/* Errors: Hide (classes are set on the widget wrapper by prefix_class). */
.gfw-error-messages-hide .gfw-form .gform_wrapper .validation_message {
	display: none !important;
}
.gfw-validation-errors-hide .gfw-form .gform_wrapper .validation_error,
.gfw-validation-errors-hide .gfw-form .gform_wrapper .gform_validation_errors {
	display: none !important;
}

/* Submit button: Full Width */
.gfw-button-full-width .gfw-form .gform_footer .gform_button,
.gfw-button-full-width .gfw-form .gfield--type-submit .gform_button,
.gfw-button-full-width .gfw-form .gform_page_footer .gform_button,
.gfw-button-full-width .gfw-form .gform_body .gform-button:not(.gform-datepicker-toggle) {
	width: 100% !important;
	max-width: 100%;
}

/* Multi-page progress bar should span the form. */
.gfw-form .gform_wrapper .gf_progressbar {
	width: 100% !important;
}

/* Scrolling-text section descriptions. */
.gfw-form .gform_wrapper .gf_scroll_text .gsection_description {
	margin: 0;
}

/* File upload buttons. */
.gfw-form .ginput_container_fileupload input[type="file"]::file-selector-button,
.gfw-form .ginput_container_fileupload .button {
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.gfw-form .ginput_container_fileupload input[type="file"]::-webkit-file-upload-button {
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/*
 * Custom checkbox / radio. The native control is replaced by a box whose
 * ::before fills on :checked, so size, colours, border and radius can all be
 * driven from the widget controls. appearance:none is forced so Gravity Forms'
 * Orbital theme (which also draws its own controls) does not fight it.
 */
.gfw-custom-checkbox-yes .gfw-form .gform_wrapper input[type="checkbox"],
.gfw-custom-radio-yes .gfw-form .gform_wrapper input[type="radio"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	flex: none;
	min-width: 1px;
	width: 15px;
	height: 15px;
	margin: 0 8px 0 0;
	padding: 3px;
	border-style: solid;
	border-width: 0;
	border-color: transparent;
	outline: none;
	background: #ddd;
	background-image: none !important;
	cursor: pointer;
}

.gfw-custom-checkbox-yes .gfw-form .gform_wrapper input[type="checkbox"]::before,
.gfw-custom-radio-yes .gfw-form .gform_wrapper input[type="radio"]::before {
	content: "";
	display: block;
	position: static;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 1;
	transform: none;
	background: transparent;
	background-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
	transition: background-color 0.25s linear;
}

.gfw-custom-checkbox-yes .gfw-form .gform_wrapper input[type="checkbox"]::after,
.gfw-custom-radio-yes .gfw-form .gform_wrapper input[type="radio"]::after {
	content: none !important;
	display: none !important;
}

.gfw-custom-checkbox-yes .gfw-form .gform_wrapper input[type="checkbox"]:checked::before,
.gfw-custom-radio-yes .gfw-form .gform_wrapper input[type="radio"]:checked::before {
	background-color: #999;
}

.gfw-custom-radio-yes .gfw-form .gform_wrapper input[type="radio"],
.gfw-custom-radio-yes .gfw-form .gform_wrapper input[type="radio"]::before {
	border-radius: 50%;
}

/* Editor-only notices (no form selected, Gravity Forms inactive, ...). */
.gfw-editor-notice {
	padding: 14px 16px;
	border: 1px dashed #c4c4c4;
	border-radius: 4px;
	background: #fafafa;
	color: #555;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}