<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Port of the reference builder embed_html/route.ts field renderers (Inputs group).
 * Source line ranges are listed on each method. See docs/renderer-port.md for porting rules.
 */
trait WPVFB_FP_Fields_Inputs {
    /** renderAddressField — route.ts lines 3331-3545 */
    public function render_address_field( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
        $g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); };

        $input_border_color = $J::or_( $f( 'inputBorderColor' ), $g( 'inputBorderColor' ), '#D1D5DB' );
        $hover_border_color = $J::or_( $f( 'hoverBorderColor' ), $g( 'hoverBorderColor' ), '#6B7280' );
        $focus_border_color = $J::or_( $f( 'focusBorderColor' ), $g( 'focusBorderColor' ), '#3B82F6' );
        $input_background_color = $J::or_( $f( 'inputBackgroundColor' ), $g( 'inputBackgroundColor' ), '#F9FAFB' );
        $placeholder_text_color = $J::or_( $f( 'placeholderTextColor' ), $g( 'placeholderTextColor' ), '#9CA3AF' );
        $text_color = $J::or_( $f( 'textColor' ), $g( 'inputTextColor' ), $g( 'primaryTextColor' ), '#000000' );
        $description_color = $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), '#9CA3AF' );

        $visibility_style = $this->inputs_should_hide( $field ) ? 'display: none;' : '';
        $custom_class = $J::truthy( $f( 'cssClassName' ) ) ? ' ' . $J::str( $f( 'cssClassName' ) ) : '';
        $label_class = 'left' === $g( 'labelPlacement' ) ? 'flex items-start space-x-4 w-full' : 'flex flex-col';

        $has_icon = $J::truthy( $f( 'fieldIcon' ) ) && 'none' !== $f( 'fieldIcon' );
        $icon_position = $J::or_( $f( 'iconPosition' ), 'left' );
        $icon_color = $J::or_( $f( 'iconColor' ), '#6B7280' );

        $input_padding = $has_icon
            ? ( 'left' === $icon_position ? '8px 8px 8px 32px' : '8px 32px 8px 8px' )
            : '8px';

        $input_style = '
    background-color: ' . $J::str( $input_background_color ) . ';
    border-color: ' . $J::str( $input_border_color ) . ';
    border-width: ' . $J::str( $J::or_( $g( 'inputSettings.borderWidth' ), 1 ) ) . 'px;
    border-radius: ' . $J::str( $J::or_( $g( 'inputSettings.borderRadius' ), 4 ) ) . 'px;
    color: ' . $J::str( $text_color ) . ';
    font-size: ' . $J::str( $g( 'fontSize' ) ) . 'px;
    line-height: ' . $J::str( $g( 'lineHeight' ) ) . 'px;
    letter-spacing: ' . $J::str( $g( 'letterSpacing' ) ) . 'px;
    padding: ' . $input_padding . ';
    width: 100%;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    outline: none;
    box-shadow: none;
  ';

        $sel = 'input[name^="' . $this->css( $f( 'id' ) ) . '["]';
        $ph = $this->css( $placeholder_text_color );
        $placeholder_styles = "
    {$sel}::placeholder {
      color: {$ph} !important;
    }
    {$sel}:-ms-input-placeholder {
      color: {$ph} !important;
    }
    {$sel}::-ms-input-placeholder {
      color: {$ph} !important;
    }
  ";

        $icon_html = $has_icon ? '<i class="' . $this->a( $f( 'fieldIcon' ) ) . '" style="' . $this->a( '
          position: absolute;
          ' . ( 'left' === $icon_position ? 'left: 12px;' : 'right: 12px;' ) . '
          top: 50%;
          transform: translateY(-50%);
          color: ' . $J::str( $icon_color ) . ';
          z-index: 10;
          pointer-events: none;
          font-size: 14px;
        ' ) . '"></i>' : '';

        $required_attr = $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '';
        $handlers = $this->inputs_border_handlers( $focus_border_color, $input_border_color, $hover_border_color );
        $sub_label = function ( $label ) {
            return '<span style="font-size: 12px; line-height: 16px; color: #4B5563; margin-top: 4px; display: block;">
        ' . $this->t( $label ) . '
      </span>';
        };

        $render_input = function ( $key, $placeholder, $value, $label ) use ( $J, $field, $f, $icon_html, $required_attr, $input_style, $handlers, $sub_label ) {
            return '
    <div class="flex-1">
      <div class="relative w-full">
        ' . $icon_html . '
        <input
          type="text"
          name="' . $this->a( $this->name_attr( $field, '[' . $key . ']' ) ) . '"
          id="' . $this->a( $J::str( $f( 'id' ) ) . '-' . $key ) . '"
          ' . $required_attr . '
          placeholder="' . $this->a( $placeholder ) . '"
          value="' . $this->a( $J::or_( $value, '' ) ) . '"
          style="' . $this->a( $input_style ) . '"
          class="w-full border rounded-md transition-all"
          ' . $handlers . '
        />
      </div>
      ' . $sub_label( $label ) . '
    </div>
  ';
        };

        $render_select = function ( $value, $label ) use ( $J, $field, $f, $icon_html, $required_attr, $input_style, $handlers, $sub_label ) {
            $options = '';
            foreach ( WPVFB_FP_Renderer::COUNTRY_LIST as $c ) {
                $options .= '<option value="' . $this->a( $c ) . '" ' . ( $J::eq( $c, $value ) ? 'selected' : '' ) . '>' . $this->t( $c ) . '</option>';
            }
            return '
    <div class="flex-1">
      <div class="relative w-full">
        ' . $icon_html . '
        <select
          name="' . $this->a( $this->name_attr( $field, '[country]' ) ) . '"
          id="' . $this->a( $J::str( $f( 'id' ) ) . '-country' ) . '"
          ' . $required_attr . '
          style="' . $this->a( $input_style ) . '"
          class="w-full border rounded-md transition-all"
          ' . $handlers . '
        >
          <option value="">Select Country</option>
          ' . $options . '
        </select>
      </div>
      ' . $sub_label( $label ) . '
    </div>
  ';
        };

        $subfields = $J::or_( $f( 'subfields' ), array() );
        $default_vals = $J::or_( $f( 'defaultValues' ), array() );
        $margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $padding = $J::or_( $f( 'padding' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $p = function ( $k ) use ( $padding ) { return WPVFB_JS::str( WPVFB_JS::get( $padding, $k ) ); };

        $sf = function ( $k ) use ( $subfields ) { return WPVFB_JS::get( $subfields, $k ); };
        $dv = function ( $k ) use ( $default_vals ) { return WPVFB_JS::get( $default_vals, $k ); };
        $visible = function ( $k ) use ( $sf ) { return false !== $sf( $k . '.isVisible' ); };
        $sub_input = function ( $k, $def ) use ( $J, $sf, $dv, $visible, $render_input ) {
            if ( ! $visible( $k ) ) {
                return '';
            }
            return $render_input( $k, $J::or_( $sf( $k . '.placeholder' ), $def ), $J::or_( $dv( $k ), '' ), $J::or_( $sf( $k . '.label' ), $def ) );
        };

        $label_html = '';
        if ( 'none' !== $g( 'labelPlacement' ) && 'hidden' !== $f( 'labelVisibility' ) ) {
            $label_html = '<label for="' . $this->a( $f( 'id' ) ) . '" class="block text-sm font-medium mb-1"
                      style="' . $this->a( 'color:' . $J::str( $J::or_( $f( 'labelTextColor' ), $text_color ) ) . ';
                      ' . $this->inputs_label_font( $field, $gs ) . '
                      letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;
                      ' . $this->inputs_label_box( $field, $gs ) ) . '">
                      ' . $this->t( $J::or_( $f( 'name' ), 'Address' ) ) . ' ' . $this->inputs_red_asterisk( $field ) . '
                   </label>';
        }

        $width = $this->a( $J::or_( $f( 'width' ), '100%' ) );
        $country = $visible( 'country' ) ? $render_select( $J::or_( $dv( 'country' ), '' ), $J::or_( $sf( 'country.label' ), 'Country' ) ) : '';

        return '
    <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $this->inputs_margin_style( $visibility_style, $margin ) ) . '">
      ' . $this->add_inline_css( $placeholder_styles ) . '
      <div class="flex items-center relative transition-all duration-200 group border-transparent" style="' . $this->a( '
        padding: ' . $p( 'top' ) . 'px ' . $p( 'right' ) . 'px ' . $p( 'bottom' ) . 'px ' . $p( 'left' ) . 'px;
      ' ) . '">
        <div class="w-full">
          <div class="relative cursor-default">
            <div class="' . $label_class . '">
              ' . $label_html . '

              <div class="flex flex-col w-full justify-center">

                ' . $this->inputs_desc_simple( 'above', $field, $gs, $description_color ) . '

                <div class="space-y-4">

                  ' . $sub_input( 'street', 'Street Address' ) . '

                  ' . $sub_input( 'address2', 'Address Line 2' ) . '

                  <div class="flex space-x-2" style="width: ' . $width . ';">
                    ' . $sub_input( 'city', 'City' ) . '
                    ' . $sub_input( 'state', 'State / Province / Region' ) . '
                  </div>

                  <div class="flex space-x-2" style="width: ' . $width . ';">
                    ' . $sub_input( 'zip', 'ZIP / Postal Code' ) . '
                    ' . $country . '
                  </div>
                </div>

                ' . $this->inputs_desc_simple( 'below', $field, $gs, $description_color ) . '
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  ';
    }

    /** renderTextareaField — route.ts lines 3546-3846 */
    public function render_textarea_field( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
        $g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); };

        $input_border_color = $J::or_( $f( 'inputBorderColor' ), $g( 'inputBorderColor' ), '#D1D5DB' );
        $hover_border_color = $J::or_( $f( 'hoverBorderColor' ), $g( 'hoverBorderColor' ), '#6B7280' );
        $focus_border_color = $J::or_( $f( 'focusBorderColor' ), $g( 'focusBorderColor' ), '#3B82F6' );
        $input_background_color = $J::or_( $f( 'inputBackgroundColor' ), $g( 'inputBackgroundColor' ), '#F9FAFB' );
        $placeholder_text_color = $J::or_( $f( 'placeholderTextColor' ), $g( 'placeholderTextColor' ), $g( 'globalColorScheme.placeholderTextColor' ), '#9CA3AF' );
        $text_color = $J::or_( $f( 'textColor' ), $g( 'inputTextColor' ), $g( 'primaryTextColor' ), '#000000' );

        $visibility_style = $this->inputs_should_hide( $field ) ? 'display: none;' : '';
        $custom_class = $J::truthy( $f( 'cssClassName' ) ) ? ' ' . $J::str( $f( 'cssClassName' ) ) : '';
        $label_class = 'left' === $g( 'labelPlacement' ) ? 'flex items-start space-x-4' : 'flex flex-col';

        $pad = function ( $side, $gkey, $def ) use ( $f, $g, $J ) {
            $v = $f( 'padding.' . $side );
            if ( $J::truthy( $f( 'padding' ) ) && ! $J::is_undef( $v ) && $J::to_number( $v ) > 0 ) {
                return $v;
            }
            return $J::or_( $g( 'inputSettings.' . $gkey ), $def );
        };
        $textarea_padding = $J::str( $pad( 'top', 'paddingTop', 8 ) ) . 'px ' . $J::str( $pad( 'right', 'paddingRight', 12 ) ) . 'px ' . $J::str( $pad( 'bottom', 'paddingBottom', 8 ) ) . 'px ' . $J::str( $pad( 'left', 'paddingLeft', 12 ) ) . 'px';

        $border_width = $J::str( $J::or_( $g( 'inputSettings.borderWidth' ), 1 ) );
        $g_radius = $J::str( $J::or_( $g( 'inputSettings.borderRadius' ), 4 ) );
        $radius = $J::defined( $field, 'borderRadius' ) ? $J::str( $f( 'borderRadius' ) ) : $g_radius;
        $line_height = $J::truthy( $f( 'lineHeight' ) ) ? $J::str( $f( 'lineHeight' ) ) . 'px' : $J::str( $J::or_( $g( 'lineHeight' ), 20 ) ) . 'px';
        $width = $J::str( $J::or_( $f( 'width' ), '100%' ) );
        $textarea_styles = '
    background-color: ' . $J::str( $input_background_color ) . ';
    border-color: ' . $J::str( $input_border_color ) . ';
    border-width: ' . $border_width . 'px;
    border-radius: ' . $radius . 'px;
    border-style: solid !important;
    font-family: inherit !important;
    color: ' . $J::str( $text_color ) . ';
    font-size: ' . $J::str( $g( 'fontSize' ) ) . 'px;
    line-height: ' . $line_height . ';
    letter-spacing: ' . $J::str( $g( 'letterSpacing' ) ) . 'px;
    width: ' . $width . ';
    padding: ' . $textarea_padding . ';
    height: ' . $J::str( $J::or_( $f( 'textareaHeight' ), 100 ) ) . 'px;
    resize: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  ';

        $c = function ( $v ) { return $this->css( $v ); };
        $sel = '#' . $c( $f( 'id' ) );
        $ph = $c( $placeholder_text_color );
        $placeholder_styles = "
    {$sel}::placeholder {
      color: {$ph} !important;
    }
  ";

        $bw = $c( $border_width );
        $ib = $c( $input_border_color );
        $bg = $c( $input_background_color );
        $fs = $c( $g( 'fontSize' ) );
        $glh = $c( $g( 'lineHeight' ) );
        $ls = $c( $g( 'letterSpacing' ) );
        $tc = $c( $text_color );
        $quill_wrapper_styles = '
    .quill-wrapper {
      border: ' . $bw . 'px solid ' . $ib . ';
      border-radius: ' . $c( $g_radius ) . 'px;
      background-color: ' . $bg . ';
      transition: border-color 0.2s ease-in-out;
      outline: none;
      box-shadow: none;
      width: ' . $c( $width ) . ';
    }

    .quill-wrapper:hover {
      border-color: ' . $c( $hover_border_color ) . ';
    }

    .quill-wrapper:focus-within {
      border-color: ' . $c( $focus_border_color ) . ';
      outline: none;
      box-shadow: none;
    }

    .ql-toolbar.ql-snow {
      border: none !important;
      box-shadow: none !important;
    }

    .ql-container {
      border: none !important;
      border-top: 1px solid ' . $ib . ' !important;
    }

    .ql-container .ql-editor.ql-blank::before {
      color: ' . $ph . ';
      font-size: ' . $fs . 'px;
      font-style: normal;
      line-height: ' . $glh . 'px;
      letter-spacing: ' . $ls . 'px;
    }

    .ql-editor.ql-blank::before {
      content: attr(data-placeholder);
      position: absolute;
      top: 0px;
      left: 0px;
      padding: 8px;
      color: ' . $ph . ';
      font-size: ' . $fs . 'px;
      font-style: normal;
      line-height: ' . $glh . 'px;
      letter-spacing: ' . $ls . 'px;
      pointer-events: none;
    }

    .ql-editor {
      font-size: ' . $fs . 'px;
      line-height: ' . $glh . 'px;
      letter-spacing: ' . $ls . 'px;
      padding: 8px;
      color: ' . $tc . ' !important;
    }
  ';

        $rich = $J::truthy( $f( 'useRichTextEditor' ) );
        // Rich text: assets/js/wpvfb-fp-runtime.js starts the editor from data-wpvfb-rich (no inline script).
        $rich_config = '';
        if ( $rich ) {
            $this->needs_rich_text = true;
            $rich_config = ' data-wpvfb-rich="' . $this->a( wp_json_encode( array(
                'placeholder'  => WPVFB_JS::str( $J::or_( $f( 'placeholder' ), 'Enter text' ) ),
                'value'        => WPVFB_JS::str( $J::or_( $f( 'defaultValue' ), '' ) ),
                'borderColor'  => WPVFB_JS::str( $input_border_color ),
                'textColor'    => WPVFB_JS::str( $text_color ),
            ) ) ) . '"';
        }

        $margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $description_color = $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), '#9CA3AF' );

        $label_html = '';
        if ( 'none' !== $g( 'labelPlacement' ) && 'hidden' !== $f( 'labelVisibility' ) ) {
            $label_html = '<label for="' . $this->a( $f( 'id' ) ) . '" class="block text-sm font-medium mb-1"
                      style="' . $this->a( 'color:' . $J::str( $J::or_( $f( 'labelTextColor' ), $g( 'labelTextColor' ), $g( 'primaryTextColor' ) ) ) . ';
                      ' . $this->inputs_label_font( $field, $gs ) . '
                      letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;
                      ' . $this->inputs_label_box( $field, $gs ) ) . '">
                        ' . $this->t( $J::or_( $f( 'name' ), 'Unnamed Field' ) ) . ' ' . $this->required_asterisk( $field, $gs ) . '
                    </label>';
        }

        $required_attr = $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '';
        if ( $rich ) {
            $control = '<div class="field-container">
                        <div class="quill-wrapper">
                          <div id="editor-container-' . $this->a( $f( 'id' ) ) . '" class="quill-editor"' . $rich_config . '></div>
                          <input type="hidden"
                            id="' . $this->a( $f( 'id' ) ) . '"
                            name="' . $this->a( $this->name_attr( $field ) ) . '"
                            ' . $required_attr . '
                            data-quill="true"
                            value="' . $this->a( $J::or_( $f( 'defaultValue' ), '' ) ) . '" />
                        </div>
                      </div>';
        } else {
            $fb = $this->a( $focus_border_color );
            $ibc = $this->a( $input_border_color );
            $hb = $this->a( $hover_border_color );
            $control = '<textarea id="' . $this->a( $f( 'id' ) ) . '"
                        name="' . $this->a( $this->name_attr( $field ) ) . '"
                        ' . $required_attr . '
                        placeholder="' . $this->a( $J::or_( $f( 'placeholder' ), 'Enter text' ) ) . '"
                        style="' . $this->a( $textarea_styles ) . '"
                        class="w-full px-4 py-2 rounded-md border transition-all"
                        rows="3"
                        data-wpvfb-border="' . $fb . '|' . $ibc . '|' . $hb . '"
                      >' . $this->t( $J::or_( $f( 'defaultValue' ), '' ) ) . '</textarea>';
        }

        return '
    <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $this->inputs_margin_style( $visibility_style, $margin ) ) . '">
      ' . $this->add_inline_css( $placeholder_styles . $quill_wrapper_styles ) . '
      <div class="flex items-center relative transition-all duration-200 group border-transparent" style="
        padding: 0px;
      ">
        <div class="w-full">
          <div class="relative cursor-default">
            <div class="' . $label_class . '">
              ' . $label_html . '
              <div class="flex flex-col w-full justify-center">
                ' . $this->inputs_desc_full( 'above', $field, $gs, $description_color ) . '

                ' . $control . '

                ' . $this->inputs_desc_full( 'below', $field, $gs, $description_color ) . '

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  ';
    }

    /** renderDropdownField — route.ts lines 3847-4160 */
    public function render_dropdown_field( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
        $g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); };

        $input_border_color = $J::or_( $f( 'inputBorderColor' ), $g( 'inputBorderColor' ), '#D1D5DB' );
        $hover_border_color = $J::or_( $f( 'hoverBorderColor' ), $g( 'hoverBorderColor' ), '#6B7280' );
        $focus_border_color = $J::or_( $f( 'focusBorderColor' ), $g( 'focusBorderColor' ), '#3B82F6' );
        $input_background_color = $J::or_( $f( 'inputBackgroundColor' ), $g( 'inputBackgroundColor' ), '#F9FAFB' );
        $placeholder_text_color = $J::or_( $f( 'placeholderTextColor' ), $g( 'placeholderTextColor' ), $g( 'globalColorScheme.placeholderTextColor' ), '#9CA3AF' );
        $text_color = $J::or_( $f( 'textColor' ), $g( 'inputTextColor' ), $g( 'primaryTextColor' ), '#000000' );
        $selected_value_color = $J::or_( $f( 'selectedValueColor' ), $g( 'selectedValueColor' ), '#2563EB' );

        $visibility_style = $this->inputs_should_hide( $field ) ? 'display: none;' : '';
        $custom_class = $J::truthy( $f( 'cssClassName' ) ) ? ' ' . $J::str( $f( 'cssClassName' ) ) : '';
        $label_class = 'left' === $g( 'labelPlacement' ) ? 'flex items-start space-x-4' : 'flex flex-col';
        $is_multi = $J::or_( $f( 'isMulti' ), false );
        $multi = $J::truthy( $is_multi );

        $description_color = $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), '#9CA3AF' );

        $has_icon = $J::truthy( $f( 'fieldIcon' ) ) && 'none' !== $f( 'fieldIcon' );
        $icon_position = $J::or_( $f( 'iconPosition' ), 'left' );
        $icon_color = $J::or_( $f( 'iconColor' ), '#6B7280' );

        $options_html = '';
        foreach ( $J::arr( $f( 'options' ) ) as $opt ) {
            $price = $J::defined( $opt, 'price' ) ? $J::get( $opt, 'price' ) : 0;
            $options_html .= '<option value="' . $this->a( $J::get( $opt, 'value' ) ) . '" data-price="' . $this->a( $price ) . '">' . $this->t( $J::get( $opt, 'label' ) ) . '</option>';
        }

        $border_width = $J::str( $J::or_( $g( 'inputSettings.borderWidth' ), 1 ) );
        $radius = $J::str( $J::or_( $g( 'inputSettings.borderRadius' ), 4 ) );
        $select_styles = '
    background-color: ' . $J::str( $input_background_color ) . ';
    border-color: ' . $J::str( $input_border_color ) . ';
    border-width: ' . $border_width . 'px;
    border-radius: ' . $radius . 'px;
    color: ' . $J::str( $text_color ) . ';
    font-size: ' . $J::str( $g( 'fontSize' ) ) . 'px;
    line-height: ' . $J::str( $g( 'lineHeight' ) ) . 'px;
    letter-spacing: ' . $J::str( $g( 'letterSpacing' ) ) . 'px;
    width: ' . $J::str( $J::or_( $f( 'width' ), '100%' ) ) . ';
    padding: 8px;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  ';

        $c = function ( $v ) { return $this->css( $v ); };
        $bg = $c( $input_background_color );
        $fs = $c( $g( 'fontSize' ) );
        $ib = $c( $input_border_color );
        $tc = $c( $text_color );
        $placeholder_styles = '
    .choices__placeholder {
      color: ' . $c( $placeholder_text_color ) . ' !important;
      font-size: ' . $fs . 'px !important;
      opacity: 1 !important;
    }
    .choices__input--cloned {
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    .choices__inner:has(.choices__list--multiple .choices__item) .choices__input--cloned {
      background-color: transparent !important;
      width: 1px !important;
      min-width: 1px !important;
    }
    .choices__inner:has(.choices__list--multiple .choices__item) .choices__input--cloned::placeholder {
      color: transparent !important;
    }
    .choices__inner[aria-expanded="true"] .choices__input--cloned {
      background-color: ' . $bg . ' !important;
      width: auto !important;
      min-width: 14ch !important;
    }
  ';

        $icon_css = $has_icon ? '
    .dropdown-single.has-icon-left .choices__inner {
      padding-left: 32px !important;
    }
    .dropdown-single.has-icon-right .choices__inner {
      padding-right: 32px !important;
    }
    .dropdown-multi.has-icon-left .choices__inner {
      padding-left: 32px !important;
    }
    .dropdown-multi.has-icon-right .choices__inner {
      padding-right: 32px !important;
    }
    ' : '';

        $choices_styles = '
    .choices.is-focused {
      box-shadow: none !important;
      outline: none !important;
    }
    .choices:focus,
    .choices:focus-within,
    .choices.is-focused {
      box-shadow: none !important;
      outline: none !important;
    }

    .choices__inner {
      background-color: ' . $bg . ' !important;
      border-color: ' . $ib . ' !important;
      border-width: ' . $c( $border_width ) . 'px !important;
      border-radius: ' . $c( $radius ) . 'px !important;
      color: ' . $tc . ' !important;
      font-size: ' . $fs . 'px !important;
      transition: border-color 0.2s ease-in-out;
      position: relative;
      min-height: 38px !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      display: flex !important;
      align-items: center !important;
    }
    .dropdown-multi .choices__inner {
      padding: 2px 4px 2px 6px !important;
      min-height: 38px !important;
    }
    .dropdown-single .choices__inner {
      padding: 2px 4px 2px 6px !important;
      min-height: 38px !important;
    }
    ' . $icon_css . '
    .choices__inner::after {
      content: \'\';
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid ' . $tc . ';
      pointer-events: none;
    }
    .choices__inner:hover {
      border-color: ' . $c( $hover_border_color ) . ' !important;
    }
    .choices__inner:focus-within {
      border-color: ' . $c( $focus_border_color ) . ' !important;
    }
    .choices__list--dropdown {
      background-color: ' . $bg . ' !important;
      border-color: ' . $ib . ' !important;
      color: ' . $tc . ' !important;
      z-index: 35 !important;
      position: absolute !important;
    }
    .choices {
      position: relative;
      z-index: 30;
    }
    .choices.is-open {
      z-index: 35 !important;
    }
    .choices.is-open .choices__list--dropdown {
      z-index: 35 !important;
      position: absolute !important;
    }
    .choices__list--dropdown .choices__item--selectable:hover {
      background-color: ' . $c( $J::or_( $g( 'globalColorScheme.hoverBackgroundColor' ), '#f0f0f0' ) ) . ' !important;
    }
    .dropdown-multi .choices__list--multiple .choices__item {
      margin-right: 6px !important;
      margin-bottom: 4px !important;
      padding: 2px 8px !important;
      border-radius: 4px !important;
      background-color: ' . $c( $selected_value_color ) . ' !important;
      color: #ffffff !important;
    }
    .choices__list--multiple .choices__item:last-child {
      margin-right: 0 !important;
    }
    .field-container .dropdown-field-icon {
      z-index: 10002 !important;
      position: absolute !important;
    }
    .field-container:has(.choices.is-open) .dropdown-field-icon {
      z-index: 10002 !important;
    }
    .choices.is-open {
      position: relative;
    }
    .choices.is-open + .dropdown-field-icon,
    .field-container .choices.is-open ~ .dropdown-field-icon {
      z-index: 10002 !important;
    }
  ';

        $margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $padding = $J::or_( $f( 'padding' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $p = function ( $k ) use ( $padding ) { return WPVFB_JS::str( WPVFB_JS::get( $padding, $k ) ); };

        $label_html = '';
        if ( 'none' !== $g( 'labelPlacement' ) && 'hidden' !== $f( 'labelVisibility' ) ) {
            $label_html = '<label for="' . $this->a( $f( 'id' ) ) . '" class="block text-sm font-medium mb-1"
                      style="' . $this->a( 'color:' . $J::str( $J::or_( $f( 'labelTextColor' ), $g( 'labelTextColor' ), $g( 'primaryTextColor' ) ) ) . ';
                      ' . $this->inputs_label_font( $field, $gs ) . '
                      letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;
                      ' . $this->inputs_label_box( $field, $gs ) ) . '">
                        ' . $this->t( $J::or_( $f( 'name' ), 'Dropdown Field' ) ) . ' ' . $this->inputs_red_asterisk( $field ) . '
                    </label>';
        }

        $icon_html = $has_icon ? '<i class="' . $this->a( $J::str( $f( 'fieldIcon' ) ) . ' dropdown-field-icon' ) . '" style="' . $this->a( '
                    position: absolute;
                    ' . ( 'left' === $icon_position ? 'left: 12px;' : 'right: 12px;' ) . '
                    top: 50%;
                    transform: translateY(-50%);
                    color: ' . $J::str( $icon_color ) . ';
                    z-index: 10002 !important;
                    pointer-events: none;
                    font-size: 14px;
                  ' ) . '"></i>' : '';

        $default_value = $J::or_( $f( 'defaultValue' ), $multi ? array() : '' );
        $fb = $this->a( $focus_border_color );
        $ibc = $this->a( $input_border_color );
        $hb = $this->a( $hover_border_color );
        $q = 'this.parentElement.querySelector(\'.choices__inner\')';
        $wrapper_class = 'relative' . $J::str( $custom_class ) . ' ' . ( $multi ? 'dropdown-multi' : 'dropdown-single' ) . ' ' . ( $has_icon ? ( 'left' === $icon_position ? 'has-icon-left' : 'has-icon-right' ) : '' );

        return '
    <div class="' . $this->a( $wrapper_class ) . '" data-field-type="dropdown" data-field-id="' . $this->a( $f( 'id' ) ) . '" style="' . $this->a( $this->inputs_margin_style( $visibility_style, $margin ) ) . '">
      ' . $this->add_inline_css( $placeholder_styles . $choices_styles ) . '
      <div class="flex items-center relative transition-all duration-200 group border-transparent" style="' . $this->a( '
        padding: ' . $p( 'top' ) . 'px ' . $p( 'right' ) . 'px ' . $p( 'bottom' ) . 'px ' . $p( 'left' ) . 'px;
      ' ) . '">
        <div class="w-full">
          <div class="relative cursor-default">
            <div class="' . $label_class . '">
              ' . $label_html . '
              <div class="flex flex-col w-full justify-center">
                ' . $this->inputs_desc_full( 'above', $field, $gs, $description_color ) . '

                <div class="field-container relative dropdown-field-wrapper" style="margin-bottom: 0px; z-index: 30; position: relative;">
                  ' . $icon_html . '
                  <select id="' . $this->a( $f( 'id' ) ) . '" name="' . $this->a( $this->name_attr( $field, $multi ? '[]' : '' ) ) . '" ' . ( $multi ? 'multiple' : '' ) . '
                    data-choices
                    ' . ( $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '' ) . '
                    data-placeholder="' . $this->a( $J::or_( $f( 'placeholder' ), 'Please select' ) ) . '"
                    data-default-value=\'' . $this->a( $this->inputs_json( $default_value ) ) . '\'
                    style="' . $this->a( $select_styles ) . '"
                    class="w-full rounded-md border transition-all"
                    data-wpvfb-border="' . $fb . '|' . $ibc . '|' . $hb . '" data-wpvfb-border-target="choices"
                  >
                    ' . $options_html . '
                  </select>
                </div>

                ' . $this->inputs_desc_full( 'below', $field, $gs, $description_color ) . '
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  ';
    }

    // ------------------------------------------------------------------
    // Private helpers (Inputs group)
    // ------------------------------------------------------------------

    /** field.visibility hidden/administrative or unmet conditional logic. */
    protected function inputs_should_hide( $field ) {
        $v = WPVFB_JS::get( $field, 'visibility' );
        return 'hidden' === $v || 'administrative' === $v
            || ( WPVFB_JS::truthy( WPVFB_JS::get( $field, 'enableConditionalLogic' ) ) && ! WPVFB_JS::truthy( WPVFB_JS::get( $field, 'conditionalLogicMet' ) ) );
    }

    /** `${visibilityStyle} margin: top right bottom(15) left;` */
    protected function inputs_margin_style( $visibility_style, $margin ) {
        $m = function ( $k ) use ( $margin ) { return WPVFB_JS::str( WPVFB_JS::get( $margin, $k ) ); };
        $bottom = WPVFB_JS::defined( $margin, 'bottom' ) ? $m( 'bottom' ) : '15';
        return $visibility_style . ' margin: ' . $m( 'top' ) . 'px ' . $m( 'right' ) . 'px ' . $bottom . 'px ' . $m( 'left' ) . 'px;';
    }

    /** Hard-coded red asterisk used by file/address/dropdown (not renderRequiredAsterisk). */
    protected function inputs_red_asterisk( $field ) {
        return WPVFB_JS::truthy( WPVFB_JS::get( $field, 'required' ) ) ? '<span class="text-red-500" style="color: #ef4444 !important;">*</span>' : '';
    }

    /** Label font-size/weight/style/line-height declarations (labelFontSize… resolution shared by address/textarea/dropdown). */
    protected function inputs_label_font( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
        $g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); };
        $size = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) ) ? $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) : $J::or_( $g( 'labelFontSize' ), 15 );
        $lh_value = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelLineHeight' ), $f( 'lineHeight' ) ) ) ? $J::nc( $f( 'wpvfbLabelLineHeight' ), $f( 'lineHeight' ) ) : $J::or_( $g( 'labelLineHeight' ), $g( 'lineHeight' ), 1.5 );
        $lh = ( is_int( $lh_value ) || is_float( $lh_value ) ) ? $J::str( $lh_value ) . 'px' : $lh_value;
        $weight = $J::defined( $field, 'labelFontWeight' ) ? $f( 'labelFontWeight' ) : $J::or_( $g( 'labelFontWeight' ), 600 );
        $style = $J::or_( $f( 'labelFontStyle' ), 'normal' );
        return 'font-size:' . $J::str( $size ) . 'px;
                      font-weight:' . $J::str( $weight ) . ';
                      font-style:' . $J::str( $style ) . ';
                      line-height:' . $J::str( $lh ) . ';';
    }

    /** Label width/min/max/text-align/wrap/margins declarations. */
    protected function inputs_label_box( $field, $gs ) {
        $J = 'WPVFB_JS';
        $left = 'left' === $J::get( $gs, 'labelPlacement' );
        $lm = function ( $k ) use ( $field ) { return WPVFB_JS::str( WPVFB_JS::or_( WPVFB_JS::get( $field, 'labelMargin.' . $k ), 0 ) ); };
        $lm_bottom = $J::defined( $field, 'labelMargin.bottom' ) ? $J::str( $J::get( $field, 'labelMargin.bottom' ) ) : '10';
        return 'width:' . ( $left ? '130px' : 'auto' ) . ';
                      min-width:' . ( $left ? '130px' : 'auto' ) . ';
                      max-width:' . ( $left ? '130px' : 'none' ) . ';
                      text-align:left;
                      overflow-wrap: break-word; white-space: normal;
                      margin-top: ' . $lm( 'top' ) . 'px; margin-right: ' . $lm( 'right' ) . 'px; margin-bottom: ' . $lm_bottom . 'px; margin-left: ' . $lm( 'left' ) . 'px;';
    }

    /** Description <p> used by file/address (mb-2/mt-2, global font size). */
    protected function inputs_desc_simple( $where, $field, $gs, $color ) {
        $J = 'WPVFB_JS';
        if ( $where !== $J::get( $gs, 'descriptionPlacement' ) || ! $J::truthy( $J::get( $field, 'description' ) ) ) {
            return '';
        }
        return '<p class="text-sm ' . ( 'above' === $where ? 'mb-2' : 'mt-2' ) . '" style="' . $this->a( 'color:' . $J::str( $color ) . ';
                        font-size:' . $J::str( $J::get( $gs, 'fontSize' ) ) . 'px;
                        line-height:' . $J::str( $J::or_( $J::get( $gs, 'labelLineHeight' ), $J::get( $gs, 'lineHeight' ) ) ) . 'px;
                        letter-spacing:' . $J::str( $J::get( $gs, 'letterSpacing' ) ) . 'px;' ) . '">
                        ' . $this->t( $J::get( $field, 'description' ) ) . '
                    </p>';
    }

    /** Description <p> used by textarea/dropdown (description font settings). */
    protected function inputs_desc_full( $where, $field, $gs, $color ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
        $g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); };
        if ( $where !== $g( 'descriptionPlacement' ) || ! $J::truthy( $f( 'description' ) ) ) {
            return '';
        }
        $size = ! $J::is_nullish( $f( 'descriptionFontSize' ) ) ? $f( 'descriptionFontSize' ) : $J::or_( $g( 'descriptionFontSize' ), $g( 'fontSize' ), 14 );
        $lh_value = ! $J::is_nullish( $f( 'descriptionLineHeight' ) ) ? $f( 'descriptionLineHeight' ) : $J::or_( $g( 'lineHeight' ), 20 );
        $lh = ( is_int( $lh_value ) || is_float( $lh_value ) ) ? $J::str( $lh_value ) . 'px' : $lh_value;
        $weight = $J::defined( $field, 'descriptionFontWeight' ) ? $f( 'descriptionFontWeight' ) : 400;
        $style = $J::or_( $f( 'descriptionFontStyle' ), 'normal' );
        $above = 'above' === $where;
        return '<p class="text-sm ' . ( $above ? 'mb-1' : 'mt-1' ) . '" style="' . $this->a( 'color:' . $J::str( $color ) . ';
                        font-size:' . $J::str( $size ) . 'px;
                        line-height:' . $J::str( $lh ) . ';
                        font-weight:' . $J::str( $weight ) . ';
                        font-style:' . $J::str( $style ) . ';
                        letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;
                        margin: ' . ( $above ? '0 0 4px 0' : '4px 0 0 0' ) . ';
                        padding: 0;' ) . '">
                        ' . $this->t( $f( 'description' ) ) . '
                      </p>';
    }

    /** onfocus/onblur/onmouseover/onmouseout border handlers of the address sub-inputs. */
    protected function inputs_border_handlers( $focus, $border, $hover ) {
        $fb = $this->a( $focus );
        $ib = $this->a( $border );
        $hb = $this->a( $hover );
        return 'data-wpvfb-border="' . $fb . '|' . $ib . '|' . $hb . '"';
    }

    /** JSON.stringify(v) for strings/numbers/booleans/arrays. */
    protected function inputs_json( $v ) {
        if ( WPVFB_JS::is_undef( $v ) ) {
            return 'undefined';
        }
        $json = json_encode( $v, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS );
        return false === $json ? 'null' : $json;
    }

}