/* Dropdown Field Fixes - Scoped to Auto Form Builder only */

/* Fix for dropdown fields being clipped when there are fields below */

/* Ensure form field containers don't clip dropdown lists */
.auto-form-builder-form .form-field,
.auto-form-builder-form .form-preview-field,
.auto-form-builder-form .form-builder__field {
	overflow: visible !important;
	position: relative;
}

/* Specifically target dropdown field containers */
.auto-form-builder-form .form-field[data-field-type="dropdown"],
.auto-form-builder-form .form-field.form-field-dropdown,
.auto-form-builder-form .form-preview-field:has([class*="searchable-dropdown"]),
.auto-form-builder-form .form-builder__field[data-field-type="dropdown"] {
	overflow: visible !important;
	position: relative !important;
	z-index: auto !important;
}

/* Ensure dropdown containers have proper stacking context */
.auto-form-builder-form .form-field[data-field-type="dropdown"],
.auto-form-builder-form .form-preview-field:has(select),
.auto-form-builder-form .form-builder__field[data-field-type="dropdown"] {
	overflow: visible !important;
	z-index: auto;
}

/* Ensure dropdown lists appear above subsequent fields */
.auto-form-builder-form .form-field[data-field-type="dropdown"] .searchable-dropdown,
.auto-form-builder-form .form-preview-field .searchable-dropdown,
.auto-form-builder-form .form-builder__field[data-field-type="dropdown"] .searchable-dropdown {
	position: relative;
	z-index: auto;
}

/* Dropdown list should have highest z-index and proper positioning */
.auto-form-builder-form .searchable-dropdown [style*="position: absolute"][style*="zIndex: 9999"] {
	z-index: 99999 !important;
	position: absolute !important;
}

/* Ensure form containers don't interfere with dropdown positioning */
.auto-form-builder-form .form-builder__canvas,
.auto-form-builder-form .form-builder__canvas-content,
.auto-form-builder-form .form-fields-container,
.auto-form-builder-form .form-preview-form {
	overflow: visible !important;
}

/* Special handling for form builder canvas fields */
.auto-form-builder-form .form-builder__canvas .form-builder__field {
	overflow: visible !important;
	position: relative;
	z-index: auto;
}

.auto-form-builder-form .form-builder__canvas .form-builder__field.is-selected {
	z-index: 1 !important;
}

/* When a dropdown field is focused/open, increase its z-index */
.auto-form-builder-form .form-builder__canvas .form-builder__field[data-field-type="dropdown"]:focus-within,
.auto-form-builder-form .form-builder__canvas .form-builder__field[data-field-type="dropdown"].dropdown-open,
.auto-form-builder-form .form-field[data-field-type="dropdown"].dropdown-open,
.auto-form-builder-form .form-preview-field.dropdown-open {
	z-index: 100 !important;
	overflow: visible !important;
}

/* Ensure dropdown options are always visible */
.auto-form-builder-form .searchable-dropdown-list {
	position: absolute !important;
	background: white !important;
	border: 1px solid #e1e4e8 !important;
	border-radius: 0 0 6px 6px !important;
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%), 0 4px 8px rgb(0 0 0 / 8%) !important;
	max-height: 200px !important;
	overflow-y: auto !important;
	z-index: 99999 !important;
}

/* Special handling for multiple dropdowns */
.auto-form-builder-form .searchable-dropdown.is-open {
	z-index: auto !important;
	position: relative !important;
}

.auto-form-builder-form .searchable-dropdown.is-open .searchable-dropdown-list {
	z-index: 10000 !important;
}

/* Fix for form preview specifically */
.auto-form-builder-form .form-preview-field {
	position: relative !important;
	overflow: visible !important;
}

.auto-form-builder-form .form-preview-field select,
.auto-form-builder-form .form-preview-field .searchable-dropdown {
	position: relative !important;
	z-index: auto !important;
}

/* Better stacking context management for multiple dropdowns */
.auto-form-builder-form .form-field[data-field-type="dropdown"]:not(.dropdown-open) {
	z-index: auto !important;
}

.auto-form-builder-form .form-field[data-field-type="dropdown"].dropdown-open,
.auto-form-builder-form .form-field[data-field-type="dropdown"]:has(.searchable-dropdown.is-open) {
	z-index: 1000 !important;
	position: relative !important;
}

/* Ensure form field containers create proper stacking context */
.auto-form-builder-form .form-field {
	position: relative !important;
}

/* Multiple dropdown fix - ensure subsequent fields don't overlap */
.auto-form-builder-form .form-field[data-field-type="dropdown"] + .form-field,
.auto-form-builder-form .form-builder__field[data-field-type="dropdown"] + .form-builder__field {
	margin-top: 10px !important;
}

/* Responsive fixes */
@media (width <= 768px) {
	.auto-form-builder-form .searchable-dropdown [style*="position: absolute"] {
		z-index: 99999 !important;
		position: fixed !important;
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
	}

	/* Reduce spacing on mobile */
	.auto-form-builder-form .form-field[data-field-type="dropdown"].dropdown-open + .form-field,
	.auto-form-builder-form .form-builder__field[data-field-type="dropdown"].dropdown-open + .form-builder__field {
		margin-top: 200px !important;
	}
}