/*
	 * Modern Customizable Select Implementation for input_6_16
	 *
	 * This implementation uses the latest CSS customizable select features as documented in:
	 * - Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
	 * - Gravity Forms Documentation: https://docs.gravityforms.com/
	 *
	 * Key Features Implemented:
	 * 1. appearance: base-select - Opts into the new customizable select functionality
	 * 2. ::picker(select) - Targets the dropdown picker container
	 * 3. ::picker-icon - Styles the dropdown arrow with smooth rotation animation
	 * 4. option styling - Full control over individual option appearance
	 * 5. :checked pseudo-class - Highlights the currently selected option
	 * 6. ::checkmark - Custom checkmark for selected options
	 * 7. Popover animations - Smooth fade in/out transitions
	 * 8. Anchor positioning - Proper positioning relative to the select button
	 * 9. Progressive enhancement - Fallback support for older browsers
	 * 10. Dark theme support - Consistent with existing form theming
	 *
	 * Browser Support:
	 * - Modern browsers with customizable select support get enhanced experience
	 * - Older browsers fall back to enhanced traditional select styling
	 *
	 * Gravity Forms Integration:
	 * - Targets specific field using both #input_6_16 and #field_6_16 selectors
	 * - Maintains compatibility with existing Gravity Forms CSS architecture
	 * - Integrates with form-component--dark theme variant
	 *
	 * Usage:
	 * This styling will automatically apply to the select field with ID input_6_16
	 * in Gravity Forms form #6, field #16. No additional markup changes required.
	 */

	/* Modern Customizable Select for specific Gravity Forms field input_6_16 */
	/* Using the latest CSS features as per Mozilla documentation */
	#input_6_16,
	#field_6_16 select {
		/* Opt into the new customizable select functionality */
		appearance: base-select;

		border-radius: 0;

		/* Match existing form field styling */
		font-size: 16px;
		line-height: 20px;
		border: 0;
		padding: 15px;
		width: 100%;
		background: white;
		height: 70px;
		color: #333;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: all 0.2s ease;
		cursor: pointer;

		/* Remove default background image */
		background-image: none;

		display: flex;
		align-items: center;
	}

	#input_6_16:hover,
	#input_6_16:focus,
	#field_6_16 select:hover,
	#field_6_16 select:focus {
		border: 1px solid #6366f1;
	}

	/* Target the picker dropdown for input_6_16 */
	#input_6_16::picker(select),
	#field_6_16 select::picker(select) {
		/* Opt the picker into customizable select */
		appearance: base-select;

		/* Match form styling with enhanced dropdown shadow */
		border: 0;
		background: white;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
		border-radius: 0;
		margin-top: 2px;
	}

	/* Style the picker icon (dropdown arrow) for input_6_16 */
	#input_6_16::picker-icon,
	#field_6_16 select::picker-icon {
		color: #999;
		transition: 0.2s rotate;
		font-size: 1em;
	}

	/* Rotate the icon when select is open */
	#input_6_16:open::picker-icon,
	#field_6_16 select:open::picker-icon {
		rotate: 180deg;
	}

	/* Style individual options in the dropdown */
	#input_6_16 option,
	#field_6_16 select option {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		border: none;
		background: white;
		padding: 15px;
		transition: all 0.15s ease;
		font-size: 16px;
		color: #333;
		min-height: 50px;
	}

	#input_6_16 option:first-of-type,
	#field_6_16 select option:first-of-type {
		border-radius: 0;
	}

	#input_6_16 option:last-of-type,
	#field_6_16 select option:last-of-type {
		border-radius: 0;
	}

	#input_6_16 option:only-of-type,
	#field_6_16 select option:only-of-type {
		border-radius: 0;
	}

	#input_6_16 option:hover,
	#input_6_16 option:focus,
	#field_6_16 select option:hover,
	#field_6_16 select option:focus {
		background: #f8f9fa;
	}

	/* Style the currently selected option */
	#input_6_16 option:checked,
	#field_6_16 select option:checked {
		font-weight: 600;
		background: rgba(99, 102, 241, 0.1);
		color: #6366f1;
	}

	/* Style the checkmark for the selected option */
	#input_6_16 option::checkmark,
	#field_6_16 select option::checkmark {
		order: 1;
		margin-left: auto;
		content: "✓";
		color: #6366f1;
		font-weight: 600;
		font-size: 1em;
	}

	/* Animate the picker using popover states */
	#input_6_16::picker(select),
	#field_6_16 select::picker(select) {
		opacity: 0;
		transform: translateY(-4px);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			overlay 0.2s allow-discrete,
			display 0.2s allow-discrete;
	}

	#input_6_16::picker(select):popover-open,
	#field_6_16 select::picker(select):popover-open {
		opacity: 1;
		transform: translateY(0);
	}

	/* Define the starting state for the animation */
	@starting-style {
		#input_6_16::picker(select):popover-open,
		#field_6_16 select::picker(select):popover-open {
			opacity: 0;
			transform: translateY(-4px);
		}
	}

	/* Position the picker using anchor positioning */
	#input_6_16::picker(select),
	#field_6_16 select::picker(select) {
		top: calc(anchor(bottom) + 4px);
		left: anchor(start);
		width: anchor-size(width);
	}

	/* Dark theme support matching existing form styles */
	.form-component--dark #input_6_16,
	.form-component--dark #field_6_16 select {
		background: rgba(0, 0, 0, 0.1);
		border: 1px solid #B4ADF3;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.07);
		color: #FFFFFF;
	}

	.form-component--dark #input_6_16::picker(select),
	.form-component--dark #field_6_16 select::picker(select) {
		background: rgba(0, 0, 0, 0.9);
		border: 1px solid #B4ADF3;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	}

	.form-component--dark #input_6_16::picker-icon,
	.form-component--dark #field_6_16 select::picker-icon {
		color: #B4ADF3;
	}

	.form-component--dark #input_6_16 option,
	.form-component--dark #field_6_16 select option {
		background: rgba(0, 0, 0, 0.8);
		color: #FFFFFF;
	}

	.form-component--dark #input_6_16 option:hover,
	.form-component--dark #input_6_16 option:focus,
	.form-component--dark #field_6_16 select option:hover,
	.form-component--dark #field_6_16 select option:focus {
		background: rgba(51, 49, 69, 0.6);
	}

	.form-component--dark #input_6_16 option:checked,
	.form-component--dark #field_6_16 select option:checked {
		background: rgba(51, 49, 69, 0.8);
		color: #B4ADF3;
	}

	.form-component--dark #input_6_16 option::checkmark,
	.form-component--dark #field_6_16 select option::checkmark {
		color: #B4ADF3;
	}

	/* Fallback support for browsers that don't support customizable selects */
	@supports not (appearance: base-select) {
		#input_6_16,
		#field_6_16 select {
			/* Match existing select styling */
			-webkit-appearance: none;
			appearance: none;
			background-image: url('/images/select-dropdown-arrow.svg');
			background-size: auto;
			background-position: 97% 50%;
			background-repeat: no-repeat;
		}

		.form-component--dark #input_6_16,
		.form-component--dark #field_6_16 select {
			background-image: url('/images/select-dropdown-arrow.svg');
			background-repeat: no-repeat;
			background-position: calc(100% - 2rem) 50%;
		}
	}