<?php

/**
 * Field Container Settings.
 *
 * @since   4.4.0
 * @package Extra Product Options for WooCommerce
 *
 * Available Variables (from element-form.php):
 * @var array  $epofw_field_data        The field/element data array.
 * @var string $epofw_field_type        The field type (text, select, etc.).
 * @var string $epofw_field_name_prefix The form field name prefix.
 * @var string $epofw_field_id          The field ID/key.
 */
if ( !defined( 'ABSPATH' ) ) {
    exit;
}
// Field Container Settings.
$epofw_field_container_settings = epofw_check_array_key_exists( 'field_container_settings', $epofw_field_data );
if ( empty( $epofw_field_container_settings ) || !is_array( $epofw_field_container_settings ) ) {
    $epofw_field_container_settings = array();
}
// FREE Settings.
$epofw_field_container_background_color = epofw_check_array_key_exists( 'background_color', $epofw_field_container_settings );
// Handle simple padding for free users.
$epofw_padding_value = epofw_check_array_key_exists( 'padding', $epofw_field_container_settings );
if ( is_array( $epofw_padding_value ) ) {
    // Advanced padding is stored, don't show in simple field.
    $epofw_field_container_padding = '';
} else {
    // Simple padding value.
    $epofw_field_container_padding = $epofw_padding_value;
}
// Handle simple margin for free users.
$epofw_margin_value = epofw_check_array_key_exists( 'margin', $epofw_field_container_settings );
if ( is_array( $epofw_margin_value ) ) {
    // Advanced margin is stored, don't show in simple field.
    $epofw_field_container_margin = '';
} else {
    // Simple margin value.
    $epofw_field_container_margin = $epofw_margin_value;
}
// Handle advanced padding: check if it's a simple value or advanced array.
$epofw_field_container_padding_settings = epofw_check_array_key_exists( 'padding', $epofw_field_container_settings );
if ( is_array( $epofw_field_container_padding_settings ) && !empty( $epofw_field_container_padding_settings ) ) {
    // Advanced padding is stored.
    $epofw_field_container_padding_top = epofw_check_array_key_exists( 'top', $epofw_field_container_padding_settings );
    $epofw_field_container_padding_right = epofw_check_array_key_exists( 'right', $epofw_field_container_padding_settings );
    $epofw_field_container_padding_bottom = epofw_check_array_key_exists( 'bottom', $epofw_field_container_padding_settings );
    $epofw_field_container_padding_left = epofw_check_array_key_exists( 'left', $epofw_field_container_padding_settings );
    $epofw_field_container_padding_units = epofw_check_array_key_exists( 'units', $epofw_field_container_padding_settings );
    // Ensure units has a default value.
    if ( empty( $epofw_field_container_padding_units ) ) {
        $epofw_field_container_padding_units = 'px';
    }
} else {
    // Simple padding or empty, advanced fields should be empty.
    $epofw_field_container_padding_top = '';
    $epofw_field_container_padding_right = '';
    $epofw_field_container_padding_bottom = '';
    $epofw_field_container_padding_left = '';
    $epofw_field_container_padding_units = 'px';
}
// Handle margin: check if it's a simple value or advanced array.
$epofw_field_container_margin_settings = epofw_check_array_key_exists( 'margin', $epofw_field_container_settings );
if ( is_array( $epofw_field_container_margin_settings ) && !empty( $epofw_field_container_margin_settings ) ) {
    // Advanced margin is stored.
    $epofw_field_container_margin_top = epofw_check_array_key_exists( 'top', $epofw_field_container_margin_settings );
    $epofw_field_container_margin_right = epofw_check_array_key_exists( 'right', $epofw_field_container_margin_settings );
    $epofw_field_container_margin_bottom = epofw_check_array_key_exists( 'bottom', $epofw_field_container_margin_settings );
    $epofw_field_container_margin_left = epofw_check_array_key_exists( 'left', $epofw_field_container_margin_settings );
    $epofw_field_container_margin_units = epofw_check_array_key_exists( 'units', $epofw_field_container_margin_settings );
    // Ensure units has a default value.
    if ( empty( $epofw_field_container_margin_units ) ) {
        $epofw_field_container_margin_units = 'px';
    }
} else {
    // Simple margin or empty, advanced fields should be empty.
    $epofw_field_container_margin_top = '';
    $epofw_field_container_margin_right = '';
    $epofw_field_container_margin_bottom = '';
    $epofw_field_container_margin_left = '';
    $epofw_field_container_margin_units = 'px';
}
// Custom CSS.
$epofw_field_container_custom_css = epofw_check_array_key_exists( 'custom_css', $epofw_field_container_settings );
// Check if field container is enabled.
$epofw_field_container_enabled = epofw_check_array_key_exists( 'enabled', $epofw_field_container_settings );
// Explicitly check: if key exists and equals 'on', then enabled. Otherwise disabled.
$epofw_field_container_enabled = ( 'on' === $epofw_field_container_enabled ? 'on' : '' );
// Check if this is a premium field type and user is not premium.
$epofw_is_premium_field_type = epofw_is_premium_field_type( $epofw_field_type );
$epofw_is_premium_user_fcs = false;
$epofw_show_premium_preview = $epofw_is_premium_field_type && !$epofw_is_premium_user_fcs;
// Get premium field data for disabled state when showing premium field types to free users.
$epofw_prem_data_fcs = ( $epofw_show_premium_preview ? epofw_get_premium_field_data() : array(
    'class'      => '',
    'badge'      => '',
    'disabled'   => '',
    'is_premium' => true,
) );
?>
<div class="epofw-tab-content" data-tab="field-container-settings">
	<!-- Enable/Disable Toggle -->
	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data_fcs['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_enabled_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Enable Field Container Styling', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( $epofw_show_premium_preview ? $epofw_prem_data_fcs['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Enable this to apply custom styling to the field container. If disabled, the container will use default theme styles.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<input type="checkbox" 
			<?php 
if ( !$epofw_is_premium_field_type ) {
    echo 'name="' . esc_attr( $epofw_field_name_prefix ) . '[field_container_settings][enabled]"';
} else {
}
?>
			id="field_container_enabled_<?php 
echo esc_attr( $epofw_field_id );
?>" value="on" <?php 
checked( $epofw_field_container_enabled, 'on' );
?> class="epofw-has-sub" data-nextfe="field_container_settings_content"<?php 
echo esc_attr( $epofw_prem_data_fcs['disabled'] );
?>>
			<label for="field_container_enabled_<?php 
echo esc_attr( $epofw_field_id );
?>" class="toggle-switch"></label>
		</div>
	</div>

	<!-- Field Container Settings Content -->
	<div id="field_container_settings_content" style="display: <?php 
echo ( 'on' === $epofw_field_container_enabled ? 'block' : 'none' );
?>;">
	<!-- FREE Features -->
	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data_fcs['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_background_color_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Background Color', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( $epofw_show_premium_preview ? $epofw_prem_data_fcs['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Choose a background color for the field container.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<input type="text" 
			<?php 
if ( !$epofw_is_premium_field_type ) {
    echo 'name="' . esc_attr( $epofw_field_name_prefix ) . '[field_container_settings][background_color]"';
} else {
}
?>
			id="field_container_background_color_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( $epofw_field_container_background_color );
?>" class="epofw_colorpicker"<?php 
echo esc_attr( $epofw_prem_data_fcs['disabled'] );
?>>
		</div>
	</div>

	<?php 
// Get premium field data for disabled state.
$epofw_prem_data = epofw_get_premium_field_data();
$epofw_is_premium_user = $epofw_prem_data['is_premium'];
?>

	<?php 
if ( !$epofw_is_premium_user || $epofw_show_premium_preview ) {
    ?>
		<!-- FREE: Simple Padding (one value for all sides) -->
		<div class="epofw-form-group<?php 
    echo esc_attr( $epofw_prem_data_fcs['class'] );
    ?>">
			<div class="epofw-field-label">
				<label for="field_container_padding_<?php 
    echo esc_attr( $epofw_field_id );
    ?>"><?php 
    esc_html_e( 'Padding', 'extra-product-options-for-woocommerce' );
    echo wp_kses( ( $epofw_show_premium_preview ? $epofw_prem_data_fcs['badge'] : '' ), epofw_get_badge_allowed_html() );
    ?></label>
				<div class="epofw-field-description">
					<?php 
    esc_html_e( 'Set the inner spacing for all sides of the field container. Same value will be applied to all sides (in px).', 'extra-product-options-for-woocommerce' );
    ?>
				</div>
			</div>
			<div class="epofw-field-input">
				<input type="number" 
				<?php 
    if ( !$epofw_is_premium_field_type ) {
        echo 'name="' . esc_attr( $epofw_field_name_prefix ) . '[field_container_settings][padding]"';
    } else {
    }
    ?>
				id="field_container_padding_<?php 
    echo esc_attr( $epofw_field_id );
    ?>" value="<?php 
    echo esc_attr( $epofw_field_container_padding );
    ?>" placeholder="0" min="0" step="1"<?php 
    echo esc_attr( $epofw_prem_data_fcs['disabled'] );
    ?>>
			</div>
		</div>

		<!-- FREE: Simple Margin (one value for all sides) -->
		<div class="epofw-form-group<?php 
    echo esc_attr( $epofw_prem_data_fcs['class'] );
    ?>">
			<div class="epofw-field-label">
				<label for="field_container_margin_<?php 
    echo esc_attr( $epofw_field_id );
    ?>"><?php 
    esc_html_e( 'Margin', 'extra-product-options-for-woocommerce' );
    echo wp_kses( ( $epofw_show_premium_preview ? $epofw_prem_data_fcs['badge'] : '' ), epofw_get_badge_allowed_html() );
    ?></label>
				<div class="epofw-field-description">
					<?php 
    esc_html_e( 'Set the outer spacing for all sides of the field container. Same value will be applied to all sides (in px).', 'extra-product-options-for-woocommerce' );
    ?>
				</div>
			</div>
			<div class="epofw-field-input">
				<input type="number" 
				<?php 
    if ( !$epofw_is_premium_field_type ) {
        echo 'name="' . esc_attr( $epofw_field_name_prefix ) . '[field_container_settings][margin]"';
    } else {
    }
    ?>
				id="field_container_margin_<?php 
    echo esc_attr( $epofw_field_id );
    ?>" value="<?php 
    echo esc_attr( $epofw_field_container_margin );
    ?>" placeholder="0" min="0" step="1"<?php 
    echo esc_attr( $epofw_prem_data_fcs['disabled'] );
    ?>>
			</div>
		</div>
	<?php 
}
?>

	<!-- Border Settings - PRO for free users -->
	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_border_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Border', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( !$epofw_is_premium_user ? $epofw_prem_data['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Configure the border for the field container.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<div class="epofw-border-inputs">
				<div class="epofw-border-input">
					<label for="field_container_border_color_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Color', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="text" 
					<?php 
?>
					id="field_container_border_color_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( ( isset( $epofw_field_container_border_color ) ? $epofw_field_container_border_color : '' ) );
?>" class="epofw_colorpicker"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-border-input">
					<label for="field_container_border_width_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Width (px)', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number" 
					<?php 
?>
					id="field_container_border_width_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( ( isset( $epofw_field_container_border_width ) ? $epofw_field_container_border_width : '' ) );
?>" placeholder="0" min="0" step="1"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-border-input epofw-border-style-input">
					<label for="field_container_border_style_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Style', 'extra-product-options-for-woocommerce' );
?></label>
					<select 
					<?php 
?>
					id="field_container_border_style_<?php 
echo esc_attr( $epofw_field_id );
?>" class="epofw-form-control"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
						<?php 
$epofw_fc_border_style_val = ( isset( $epofw_field_container_border_style ) ? $epofw_field_container_border_style : '' );
foreach ( epofw_field_container_border_style_data() as $epofw_border_val => $epofw_border_label ) {
    echo '<option value="' . esc_attr( $epofw_border_val ) . '" ' . selected( $epofw_fc_border_style_val, $epofw_border_val, false ) . '>' . esc_html( $epofw_border_label ) . '</option>';
}
?>
					</select>
				</div>
				<div class="epofw-border-input">
					<label for="field_container_border_radius_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Radius (px)', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number" 
					<?php 
?>
					id="field_container_border_radius_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( ( isset( $epofw_field_container_border_radius ) ? $epofw_field_container_border_radius : '' ) );
?>" placeholder="0" min="0" step="1"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
			</div>
		</div>
	</div>

	<!-- Padding - PRO for free users (4-side controls) -->
	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_padding_top_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Padding', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( !$epofw_is_premium_user ? $epofw_prem_data['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Set individual padding values for each side of the field container.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<div class="epofw-spacing-inputs">
				<div class="epofw-spacing-input">
					<label for="field_container_padding_top_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Top', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number"
					<?php 
?>
					id="field_container_padding_top_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( $epofw_field_container_padding_top );
?>" placeholder="0"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-spacing-input">
					<label for="field_container_padding_right_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Right', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number"
					<?php 
?>
					id="field_container_padding_right_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( $epofw_field_container_padding_right );
?>" placeholder="0"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-spacing-input">
					<label for="field_container_padding_bottom_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Bottom', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number"
					<?php 
?>
					id="field_container_padding_bottom_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( $epofw_field_container_padding_bottom );
?>" placeholder="0"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-spacing-input">
					<label for="field_container_padding_left_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Left', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number"
					<?php 
?>
					id="field_container_padding_left_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( $epofw_field_container_padding_left );
?>" placeholder="0"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-spacing-input epofw-units-input">
					<label for="field_container_padding_units_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Units', 'extra-product-options-for-woocommerce' );
?></label>
					<select 
					<?php 
?>
					id="field_container_padding_units_<?php 
echo esc_attr( $epofw_field_id );
?>" class="epofw-form-control"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
						<?php 
foreach ( epofw_field_container_spacing_units_data() as $epofw_units_val => $epofw_units_label ) {
    echo '<option value="' . esc_attr( $epofw_units_val ) . '" ' . selected( $epofw_field_container_padding_units, $epofw_units_val, false ) . '>' . esc_html( $epofw_units_label ) . '</option>';
}
?>
					</select>
				</div>
			</div>
		</div>
	</div>

	<!-- Margin - PRO for free users (4-side controls) -->
	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_margin_top_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Margin', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( !$epofw_is_premium_user ? $epofw_prem_data['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Set individual margin values for each side of the field container.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<div class="epofw-spacing-inputs">
				<div class="epofw-spacing-input">
					<label for="field_container_margin_top_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Top', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number"
					<?php 
?>
					id="field_container_margin_top_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( $epofw_field_container_margin_top );
?>" placeholder="0"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-spacing-input">
					<label for="field_container_margin_right_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Right', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number"
					<?php 
?>
					id="field_container_margin_right_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( $epofw_field_container_margin_right );
?>" placeholder="0"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-spacing-input">
					<label for="field_container_margin_bottom_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Bottom', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number"
					<?php 
?>
					id="field_container_margin_bottom_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( $epofw_field_container_margin_bottom );
?>" placeholder="0"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-spacing-input">
					<label for="field_container_margin_left_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Left', 'extra-product-options-for-woocommerce' );
?></label>
					<input type="number"
					<?php 
?>
					id="field_container_margin_left_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( $epofw_field_container_margin_left );
?>" placeholder="0"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
				</div>
				<div class="epofw-spacing-input epofw-units-input">
					<label for="field_container_margin_units_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Units', 'extra-product-options-for-woocommerce' );
?></label>
					<select 
					<?php 
?>
					id="field_container_margin_units_<?php 
echo esc_attr( $epofw_field_id );
?>" class="epofw-form-control"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
						<?php 
foreach ( epofw_field_container_spacing_units_data() as $epofw_units_val => $epofw_units_label ) {
    echo '<option value="' . esc_attr( $epofw_units_val ) . '" ' . selected( $epofw_field_container_margin_units, $epofw_units_val, false ) . '>' . esc_html( $epofw_units_label ) . '</option>';
}
?>
					</select>
				</div>
			</div>
		</div>
	</div>

	<!-- Width Settings - PRO for free users -->
	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_width_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Width (%)', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( !$epofw_is_premium_user ? $epofw_prem_data['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Set the width of the field container. Useful when label position is "Above Field".', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<input type="number" 
			<?php 
?>
			id="field_container_width_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( ( isset( $epofw_field_container_width ) ? $epofw_field_container_width : '' ) );
?>" placeholder="100" min="0" step="1"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
		</div>
	</div>

	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_max_width_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Max Width (%)', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( !$epofw_is_premium_user ? $epofw_prem_data['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Set the maximum width of the field container.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<input type="number" 
			<?php 
?>
			id="field_container_max_width_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( ( isset( $epofw_field_container_max_width ) ? $epofw_field_container_max_width : '' ) );
?>" placeholder="100" min="0" step="1"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
		</div>
	</div>

	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_min_width_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Min Width (px)', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( !$epofw_is_premium_user ? $epofw_prem_data['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Set the minimum width of the field container.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<input type="number" 
			<?php 
?>
			id="field_container_min_width_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( ( isset( $epofw_field_container_min_width ) ? $epofw_field_container_min_width : '' ) );
?>" placeholder="0" min="0" step="1"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
		</div>
	</div>

	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_gap_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Gap Between Label and Input (px)', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( !$epofw_is_premium_user ? $epofw_prem_data['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Set the spacing between the label and input field.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<input type="number" 
			<?php 
?>
			id="field_container_gap_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( ( isset( $epofw_field_container_gap ) ? $epofw_field_container_gap : '' ) );
?>" placeholder="0" min="0" step="1"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
		</div>
	</div>

	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_box_shadow_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Box Shadow', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( !$epofw_is_premium_user ? $epofw_prem_data['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Set the box shadow for the field container. Format: x-offset y-offset blur spread color (e.g., 0 2px 4px rgba(0,0,0,0.1)).', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<input type="text" 
			<?php 
?>
			id="field_container_box_shadow_<?php 
echo esc_attr( $epofw_field_id );
?>" value="<?php 
echo esc_attr( ( isset( $epofw_field_container_box_shadow ) ? $epofw_field_container_box_shadow : '' ) );
?>" placeholder="0 2px 4px rgba(0,0,0,0.1)" class="epofw-form-control"<?php 
echo esc_attr( $epofw_prem_data['disabled'] );
?>>
		</div>
	</div>

	<div class="epofw-form-group<?php 
echo esc_attr( $epofw_prem_data_fcs['class'] );
?>">
		<div class="epofw-field-label">
			<label for="field_container_custom_css_<?php 
echo esc_attr( $epofw_field_id );
?>"><?php 
esc_html_e( 'Custom CSS', 'extra-product-options-for-woocommerce' );
echo wp_kses( ( $epofw_show_premium_preview ? $epofw_prem_data_fcs['badge'] : '' ), epofw_get_badge_allowed_html() );
?></label>
			<div class="epofw-field-description">
				<?php 
esc_html_e( 'Add custom CSS styles for this field container. These styles will be scoped to this field container only. Use this for advanced styling that cannot be achieved through the standard settings.', 'extra-product-options-for-woocommerce' );
?>
			</div>
		</div>
		<div class="epofw-field-input">
			<textarea 
			<?php 
if ( !$epofw_is_premium_field_type ) {
} else {
}
?>
			id="field_container_custom_css_<?php 
echo esc_attr( $epofw_field_id );
?>" rows="6" class="epofw-form-control" placeholder=".epofw_field_container { /* Your CSS here */ }"<?php 
echo esc_attr( $epofw_prem_data_fcs['disabled'] );
?>><?php 
echo esc_textarea( $epofw_field_container_custom_css );
?></textarea>
		</div>
	</div>
	</div><!-- End field_container_settings_content -->
</div>

