// Form.
.elementor-widget-form {
	// Base Theme Widget Styles.
	&.vamtam-has-theme-widget-styles {
		.flatpickr-mobile {
			&:is([type=date],[type=time]) {
				-webkit-appearance: initial;
			}
		}
		input[type="hidden"].elementor-date-field.flatpickr-input,
		input[type="hidden"].elementor-time-field.flatpickr-input {
			&[value=""], &:not([value]) {
				+ .flatpickr-mobile {
					&:is([type=date],[type=time]) {
						-webkit-appearance: initial;

						// Placeholder state.
						&::before {
							color:rgba(53, 53, 53, .65);
							content:attr(placeholder);
						}
					}
				}
			}
		}

		.elementor-select-wrapper {
			.select-caret-down-wrapper {
				font-size: 8px;
				right: 20px;

				svg {
					aspect-ratio: 1 / 1.5;
				}

				+ select {
					padding-right: 40px;
				}
			}
		}

		&.vamtam-footer-contact-form .elementor-form-fields-wrapper {
			align-items: start;
		}

		.elementor-form .elementor-message {
			padding-top: 1em;
		}

		// Steps progress indicator styles
		.e-form__indicators {
			> .e-form__indicators__indicator--state-completed {
				> [class*="e-form__indicators__indicator"] {
					border-color: var(--e-global-color-vamtam_accent_2);
				}
				+.e-form__indicators__indicator__separator {
					background-color: var(--e-global-color-vamtam_accent_2);
				}
			}
			> :not(.e-form__indicators__indicator--state-completed) {
				> [class*="e-form__indicators__indicator"] {
					border-color: var(--e-global-color-vamtam_accent_4);
				}
				+.e-form__indicators__indicator__separator {
					background-color: var(--e-global-color-vamtam_accent_4);
				}
			}
		}

		// iOS-only
		:is(body.e--ua-mac, .ios-safari) & input[type=file]::file-selector-button {
			color: black;
			border-color: black;
		}

		&.vamtam-input-fields {
			[type="checkbox"] {
				&:not(:checked)+label {
					position: relative;
					padding-left: 2.3em;
					cursor: pointer;
				}
				&:checked+label {
					position: relative;
					padding-left: 2.3em;
					cursor: pointer;
				}
			}
			[type="radio"] {
				&:not(:checked)+label {
					position: relative;
					padding-left: 2.3em;
					cursor: pointer;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: -4.5px;
						width: 1.8em;
						height: 1.8em;
						border: solid 1px var(--vamtam-accent-color-7);
						transition: all 275ms;
						border-radius: 100px;
					}
				}

				&:checked+label {
					position: relative;
					padding-left: 2.3em;
					cursor: pointer;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: -4.5px;
						width: 1.8em;
						height: 1.8em;
						background: var(--vamtam-accent-color-2);
						border: solid 1px var(--vamtam-accent-color-2);
						transition: all 275ms;
						border-radius: 100px;
					}

					&:after {
						font-family: theme-icons;
						content: var(--vamtam-icon-check);
						position: absolute;
						top: .6em;
						left: .5em;
						font-size: .9em;
						color: var(--vamtam-accent-color-5);
						line-height: 0;
						transition: all .2s;
						opacity: 1;
						transform: scale(1);
					}
				}
			}
			input[type="checkbox"] {
				&:not(:checked)+label {
					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: -3.5px;
						width: 1.75em;
						height: 1.75em;
						border-radius: 0px;
						border: solid 1px var(--vamtam-accent-color-1);
						background-color: var(--vamtam-accent-color-1);
						transition: all 275ms;
					}
					&:after {
						font-family: 'theme-icons';
						content: var(--vamtam-icon-check);
						position: absolute;
						top: .7em;
						left: .25em;
						font-size: 0.9em;
						color: var(--vamtam-accent-color-6);
						line-height: 0;
						transition: all .2s;
						opacity: 0;
						transform: scale(0);
					}
				}
				&:checked+label {
					position: relative;
					padding-left: 2.3em;
					cursor: pointer;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: -3.5px;
						width: 1.75em;
						height: 1.75em;
						border-radius: 0px;
						border: solid 1px var(--vamtam-accent-color-2);
						background-color: var(--vamtam-accent-color-2);
						transition: all 275ms;
					}
					&:after {
						font-family: theme-icons;
						content: var(--vamtam-icon-check);
						position: absolute;
						top: .7em;
						left: .45em;
						font-size: .9em;
						color: var(--vamtam-accent-color-5);
						line-height: 0;
						transition: all .2s;
						opacity: 1;
						transform: scale(1);
					}
				}
			}
			input[type="radio"] {
				&:not(:checked)+label {
					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 1.3em;
						height: 1.3em;
						border-radius: 4px;
						border: solid 2px var(--vamtam-accent-color-6);
						transition: all .275s;
						border-radius: 100px;
					}
					&:after {
						font-family: 'theme-icons';
						content: var(--vamtam-icon-check);
						position: absolute;
						top: .7em;
						left: .25em;
						font-size: 0.9em;
						color: var(--vamtam-accent-color-6);
						line-height: 0;
						transition: all .2s;
						opacity: 0;
						transform: scale(0);
					}
				}
				&:checked+label {
					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 1.3em;
						height: 1.3em;
						border-radius: 4px;
						border: solid 2px var(--vamtam-accent-color-6);
						transition: all .275s;
						border-radius: 100px;
					}
					&:after {
						font-family: 'theme-icons';
						content: var(--vamtam-icon-check);
						position: absolute;
						top: .7em;
						left: .25em;
						font-size: 0.9em;
						color: var(--vamtam-accent-color-6);
						line-height: 0;
						transition: all .2s;
						opacity: 1;
						transform: scale(1);
						color: var(--vamtam-accent-color-1);
					}
				}
			}

			// Making the whole radio/checkbox area clickable.
			:is(
				.elementor-field-type-radio,
				.elementor-field-type-checkbox,
				.elementor-field-type-acceptance
			) {
				&.elementor-field-group {
					.elementor-field-subgroup {
						gap: 12px;
					}
				}
				.elementor-field-option {
					position: relative;

					:is(input[type="radio"], input[type="checkbox"]) {
						z-index: 1;
						cursor: pointer;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						opacity: 0;

						+label {
							z-index: 1;
						}
					}
 				}
			}
		}

		@media (any-pointer:fine) {
			&.vamtam-has-underline-anim {
				.elementor-button {
					@tran-time: .5s; // If changed, please update the timeout timer value in the JS handler as well.
					@width: var(--vamtam-underline-width, var(--vamtam-global-underline-width, 1px));
					@spacing: var(--vamtam-underline-spacing, var(--vamtam-global-underline-spacing, 1px));
					@color: linear-gradient(var(--vamtam-underline-bg-color, var(--vamtam-global-underline-bg-color, currentColor)) 0 0);

					.vamtam-btn-text {
						position: relative;

						@keyframes vamtam-underline-anim-left {
							0% {
								transform: scaleX(0);
							}

							100% {
								transform: scale(1);
							}
						}

						@keyframes vamtam-underline-anim-right {
							0% {
								transform: scaleX(.8);
							}

							100% {
								transform: scaleX(0);
							}
						}

						&::after,
						&::before {
							content: "";
							display: block;
							position: absolute;
							width: 100%;
							top: 100%;
							margin-top: @spacing;
							height: @width;
							background: @color;
							will-change: transform;
						}
						&::before {
							transform-origin: left;
						}
						&::after {
							transform: scaleX(0);
							transform-origin: right;
						}
					}

					@media (any-pointer: fine) {
						// This class is added from the JS hadler of the widget (handleBtnUnderlineAnimation() function).
						&.hovered {
							.vamtam-btn-text {
								&::before {
									animation: vamtam-underline-anim-left calc(@tran-time + 0.15s) ease forwards;
								}

								&::after {
									animation: vamtam-underline-anim-right @tran-time ease forwards;
								}
							}
						}
					}
				}
			}
		}
	}
}
