/* Enhanced Time Field Styling - Scoped to Auto Form Builder only */

/* Visual styles applied dynamically from form customize settings */

.auto-form-builder-form .time-field-wrapper {
	position: relative;
	display: block;
	width: 100%;
	cursor: pointer;
	min-height: 40px;
	pointer-events: auto !important;
}

.auto-form-builder-form .time-field-wrapper input[type="time"] {
	cursor: pointer;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	pointer-events: auto;
}

.auto-form-builder-form .time-field-wrapper input[type="time"]:focus {
	outline: none;
}

/* Better visual feedback for clickable area */
.auto-form-builder-form .time-field-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 0;
	transition: all 0.2s ease;
	opacity: 0;
}

.auto-form-builder-form .time-field-wrapper:hover::before {
	background: rgb(34 113 177 / 2%);
	opacity: 1;
}

/* Form builder specific styling */
.auto-form-builder-form .form-builder__canvas .time-field-wrapper {
	margin: 2px 0;
}

.auto-form-builder-form .form-preview-field .time-field-wrapper {
	width: 100% !important;
}

/* Mobile optimizations */
@media (width <= 768px) {
	.auto-form-builder-form .time-field-wrapper {
		min-height: 44px;
	}

	.auto-form-builder-form .time-field-wrapper input[type="time"] {
		min-height: 44px;
		font-size: 16px;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.auto-form-builder-form .time-field-wrapper:hover::before {
		background: rgb(255 255 255 / 5%);
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.auto-form-builder-form .time-field-wrapper {
		border: 2px solid transparent;
	}

	.auto-form-builder-form .time-field-wrapper:hover {
		border-color: currentcolor;
	}
}

/* Animation for better UX feedback */
@keyframes afbTimeFieldFocus {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.02);
	}

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

.auto-form-builder-form .time-field-wrapper:active {
	animation: afbTimeFieldFocus 0.15s ease;
}

/* Field state styling - colors applied dynamically from form customize settings */
.auto-form-builder-form .form-field[data-field-type="time"] .time-field-wrapper input[type="time"]:invalid {
	/* Invalid state border-color applied dynamically */
}

.auto-form-builder-form .form-field[data-field-type="time"] .time-field-wrapper input[type="time"]:valid {
	/* Valid state border-color applied dynamically */
}

/* Loading state (for when default time is being calculated) */
.auto-form-builder-form .time-field-wrapper.loading {
	opacity: 0.7;
	pointer-events: none;
}

.auto-form-builder-form .time-field-wrapper.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 40px;
	width: 16px;
	height: 16px;
	border: 2px solid #ccc;
	border-top: 2px solid #2271b1;
	border-radius: 50%;
	animation: afbSpin 1s linear infinite;
	transform: translateY(-50%);
}

@keyframes afbSpin {
	0% { transform: translateY(-50%) rotate(0deg); }
	100% { transform: translateY(-50%) rotate(360deg); }
}