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

/**
 * Port of the reference builder embed_html/route.ts field renderers (Choice group).
 * Source line ranges are listed on each method. See docs/renderer-port.md for porting rules.
 */
trait WPVFB_FP_Fields_Choice {
    /** renderNumberField — route.ts lines 4161-4413 */
    public function render_number_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' );
        $description_color = $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), $g( 'globalColorScheme.descriptionColor' ), '#9CA3AF' );

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

        $label_font_size = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) ) ? $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) : $J::or_( $g( 'labelFontSize' ), 15 );
        $label_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 );
        $label_line_height = ( is_int( $label_lh_value ) || is_float( $label_lh_value ) ) ? $J::str( $label_lh_value ) . 'px' : $label_lh_value;
        $label_font_weight = $J::defined( $field, 'labelFontWeight' ) ? $f( 'labelFontWeight' ) : $J::or_( $g( 'labelFontWeight' ), 600 );
        $label_font_style = $J::or_( $f( 'labelFontStyle' ), 'normal' );

        $desc_font_size = ! $J::is_nullish( $f( 'descriptionFontSize' ) ) ? $f( 'descriptionFontSize' ) : $J::or_( $g( 'descriptionFontSize' ), $g( 'fontSize' ), 14 );
        $desc_lh_value = ! $J::is_nullish( $f( 'descriptionLineHeight' ) ) ? $f( 'descriptionLineHeight' ) : $J::or_( $g( 'lineHeight' ), 20 );
        $desc_line_height = ( is_int( $desc_lh_value ) || is_float( $desc_lh_value ) ) ? $J::str( $desc_lh_value ) . 'px' : $desc_lh_value;
        $desc_font_weight = $J::defined( $field, 'descriptionFontWeight' ) ? $f( 'descriptionFontWeight' ) : 400;
        $desc_font_style = $J::or_( $f( 'descriptionFontStyle' ), 'normal' );

        $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';

        $value = $J::truthy( $f( 'value' ) ) ? $J::str( $J::to_number( $f( 'value' ) ) ) : '';

        $input_styles = '
    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;
    border-style: solid !important;
    font-family: inherit !important;
    color: ' . $J::str( $J::or_( $f( 'textColor' ), $g( 'inputTextColor' ), $g( 'primaryTextColor' ) ) ) . ';
    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: ' . $input_padding . ';
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -moz-appearance: textfield;
    appearance: textfield;
  ';

        $webkit_spinner_styles = '
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  ';

        $sel = '#' . $this->css( $f( 'id' ) );
        $ph = $this->css( $placeholder_text_color );
        $placeholder_styles = "
    {$sel}::placeholder {
      color: {$ph} !important;
      opacity: 1;
    }
    {$sel}:-ms-input-placeholder {
      color: {$ph} !important;
    }
    {$sel}::-ms-input-placeholder {
      color: {$ph} !important;
    }
  ";

        $padding = $J::or_( $f( 'padding' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $outer_style = $this->choice_outer_style( $visibility_style, $margin );
        $id = $f( 'id' );

        if ( 'stepper-slider' === $f( 'numberStyle' ) ) {
            $def = $f( 'defaultValue' );
            $has_min = ! $J::is_nullish( $f( 'min' ) );
            $num_value = ( ! $J::is_undef( $def ) && '' !== $def ) ? $J::to_number( $def ) : ( $has_min ? $J::to_number( $f( 'min' ) ) : 1 );
            $min_val = $has_min ? $J::to_number( $f( 'min' ) ) : 1;
            $max_val = ! $J::is_nullish( $f( 'max' ) ) ? $J::to_number( $f( 'max' ) ) : 10;
            $step_val = ! $J::is_nullish( $f( 'step' ) ) ? $J::to_number( $f( 'step' ) ) : 1;
            $accent = $J::or_( $g( 'submitBackgroundColor' ), '#EA580C' );
            $pct = $max_val > $min_val ? ( ( $num_value - $min_val ) / ( $max_val - $min_val ) ) * 100 : 0;

            $id_s = $J::str( $id );
            $nv = $J::str( $num_value );
            $mn = $J::str( $min_val );
            $mx = $J::str( $max_val );
            $st = $J::str( $step_val );
            $ac = $J::str( $accent );
            $btn_style = 'width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: bold; color: #374151; display: flex; align-items: center; justify-content: center;';
            $pct_s = $J::str( $pct );

            return '
    <div class="relative' . $this->a( $custom_class ) . '" data-field-type="number" data-field-id="' . $this->a( $id ) . '" style="' . $this->a( $outer_style ) . '">
      <div data-wpvfb-stepper="' . $this->a( $id_s ) . '" data-accent="' . $this->a( $ac ) . '" style="' . $this->a( 'background-color: ' . $J::str( $J::or_( $f( 'backgroundColor' ), '#F9FAFB' ) ) . '; border: 1px solid ' . $J::str( $J::or_( $f( 'borderColor' ), '#E5E7EB' ) ) . '; border-radius: ' . $J::str( $J::or_( $f( 'borderRadius' ), 16 ) ) . 'px; padding: 16px;' ) . '">
        <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
          <div>
            <label class="block text-xs font-black text-gray-800 uppercase tracking-wider" style="' . $this->a( 'color: ' . $J::str( $J::or_( $f( 'labelTextColor' ), '#18181B' ) ) . '; font-weight: 900; font-size: ' . $J::str( $label_font_size ) . 'px; letter-spacing: ' . $J::str( $g( 'letterSpacing' ) ) . 'px; margin-bottom: 2px;' ) . '">
              ' . $this->t( $J::or_( $f( 'label' ), $f( 'name' ), '2. Project Pages / Assets' ) ) . ' ' . $this->choice_red_asterisk( $field ) . '
            </label>
            ' . ( $J::truthy( $f( 'description' ) ) ? '<span style="color: #6B7280; font-size: 11px; display: block;">' . $this->t( $f( 'description' ) ) . '</span>' : '' ) . '
          </div>
          <div style="display: flex; align-items: center; gap: 6px; background-color: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
            <button type="button" data-wpvfb-step="-1" style="' . $btn_style . '">—</button>
            <span id="' . $this->a( $id_s . '-val' ) . '" style="' . $this->a( 'width: 24px; text-align: center; font-size: 14px; font-weight: 900; color: ' . $ac . ';' ) . '">' . $this->t( $nv ) . '</span>
            <button type="button" data-wpvfb-step="1" style="' . $btn_style . '">+</button>
          </div>
        </div>
        <div style="margin-top: 14px;">
          <input type="hidden" id="' . $this->a( $id ) . '" name="' . $this->a( $this->name_attr( $field ) ) . '" value="' . $this->a( $nv ) . '" ' . ( $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '' ) . ' data-number-field data-default-value="' . $this->a( $nv ) . '" data-min="' . $this->a( $mn ) . '" data-max="' . $this->a( $mx ) . '" data-step="' . $this->a( $st ) . '" />
          <input type="range" id="' . $this->a( $id_s . '-slider' ) . '" min="' . $this->a( $mn ) . '" max="' . $this->a( $mx ) . '" step="' . $this->a( $st ) . '" value="' . $this->a( $nv ) . '" data-wpvfb-range="' . $this->a( $id_s ) . '" style="' . $this->a( 'width: 100%; accent-color: ' . $ac . '; height: 8px; border-radius: 8px; cursor: pointer; background: linear-gradient(to right, ' . $ac . ' 0%, ' . $ac . ' ' . $pct_s . '%, #E5E7EB ' . $pct_s . '%, #E5E7EB 100%);' ) . '" />
        </div>
      </div>
    </div>
    ';
        }

        $label_html = '';
        if ( 'none' !== $g( 'labelPlacement' ) && 'hidden' !== $f( 'labelVisibility' ) ) {
            $label_html = '<label for="' . $this->a( $id ) . '" class="block text-sm font-medium mb-1"
                       style="' . $this->a( $this->choice_label_style( $field, $gs, $label_font_size, $label_font_weight, $label_font_style, $label_line_height ) ) . '">
                         ' . $this->t( $J::or_( $f( 'name' ), 'Number Field' ) ) . ' ' . $this->choice_red_asterisk( $field ) . '
                       </label>';
        }

        $desc = function ( $where ) use ( $J, $f, $g, $description_color, $desc_font_size, $desc_line_height, $desc_font_weight, $desc_font_style ) {
            if ( $where !== $g( 'descriptionPlacement' ) || ! $J::truthy( $f( 'description' ) ) ) {
                return '';
            }
            $above = 'above' === $where;
            return '<p class="text-sm ' . ( $above ? 'mb-1' : 'mt-1' ) . '" style="' . $this->a( 'color:' . $J::str( $description_color ) . ';
                         font-size:' . $J::str( $desc_font_size ) . 'px;
                         line-height:' . $J::str( $desc_line_height ) . ';
                         font-weight:' . $J::str( $desc_font_weight ) . ';
                         font-style:' . $J::str( $desc_font_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>';
        };

        $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>' : '';

        $fb = $this->a( $focus_border_color );
        $ib = $this->a( $input_border_color );
        $hb = $this->a( $hover_border_color );

        return '
    <div class="relative' . $this->a( $custom_class ) . '" data-field-type="number" data-field-id="' . $this->a( $id ) . '" style="' . $this->a( $outer_style ) . '">
      ' . $this->add_inline_css( $placeholder_styles . $webkit_spinner_styles ) . '
      <div class="flex items-center relative transition-all duration-200 group border-transparent" style="' . $this->a( $this->choice_padding_style( $padding ) ) . '">
        <div class="w-full">
          <div class="relative cursor-default">
            <div class="' . $label_class . '">
              ' . $label_html . '
              <div class="flex flex-col w-full ' . ( $left ? 'justify-center' : '' ) . '">
                ' . $desc( 'above' ) . '
                <div class="input-wrapper" style="position: relative;">
                  <div class="relative w-full">
                    ' . $icon_html . '
                    <input type="number" id="' . $this->a( $id ) . '" name="' . $this->a( $this->name_attr( $field ) ) . '"
                      placeholder="' . $this->a( $J::or_( $f( 'placeholder' ), 'Enter a number' ) ) . '"
                      data-number-field
                      ' . ( $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '' ) . '
                      data-default-value="' . $this->a( $value ) . '"
                      ' . ( $J::defined( $field, 'min' ) ? 'data-min="' . $this->a( $f( 'min' ) ) . '"' : '' ) . '
                      ' . ( $J::defined( $field, 'max' ) ? 'data-max="' . $this->a( $f( 'max' ) ) . '"' : '' ) . '
                      ' . ( $J::defined( $field, 'step' ) ? 'data-step="' . $this->a( $f( 'step' ) ) . '"' : '' ) . '
                      style="' . $this->a( $input_styles ) . ' outline: none; box-shadow: none;"
                      class="w-full rounded-md border transition-all"
                      data-wpvfb-border="' . $fb . '|' . $ib . '|' . $hb . '">
                  </div>
                </div>
                ' . $desc( 'below' ) . '
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  ';
    }

    /** renderCheckboxField — route.ts lines 4414-4646 */
    public function render_checkbox_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 ); };

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

        $raw_options = $f( 'options' );
        $options = array();
        if ( $J::is_array( $raw_options ) && count( $raw_options ) > 0 ) {
            foreach ( $raw_options as $index => $option ) {
                $o = function ( $p ) use ( $option ) { return WPVFB_JS::get( $option, $p ); };
                $options[] = array(
                    'value' => $J::or_( $o( 'value' ), 'option_' . ( $index + 1 ) ),
                    'label' => $J::or_( $o( 'label' ), 'Option ' . ( $index + 1 ) ),
                    'price' => $J::defined( $option, 'price' ) ? $o( 'price' ) : 0,
                    'points' => $J::defined( $option, 'points' ) ? $o( 'points' ) : 0,
                    'description' => $o( 'description' ),
                    'labelFontWeight' => $o( 'labelFontWeight' ),
                    'labelFontStyle' => $o( 'labelFontStyle' ),
                    'labelTextColor' => $o( 'labelTextColor' ),
                    'fontSize' => $o( 'fontSize' ),
                    'lineHeight' => $o( 'lineHeight' ),
                );
            }
        } else {
            $u = $J::undef();
            $options[] = array( 'value' => 'option_1', 'label' => 'Option 1', 'price' => 0, 'points' => 0, 'description' => $u, 'labelFontWeight' => $u, 'labelFontStyle' => $u, 'labelTextColor' => $u, 'fontSize' => $u, 'lineHeight' => $u );
        }

        $default_values = $J::arr( $f( 'defaultValue' ) );

        $selected = $J::or_( $f( 'checkboxSelectedColor' ), $g( 'checkboxSelectedColor' ), $g( 'globalColorScheme.checkboxSelectedColor' ), '#2563EB' );
        $raw_unselected = $J::or_( $f( 'checkboxUnselectedColor' ), $g( 'checkboxUnselectedColor' ), $g( 'globalColorScheme.checkboxUnselectedColor' ) );
        $unselected = ( $J::truthy( $raw_unselected ) && '#E2E8F0' !== strtoupper( $J::str( $raw_unselected ) ) && '#D1D5DB' !== strtoupper( $J::str( $raw_unselected ) ) ) ? $raw_unselected : '#71717a';
        $sel_s = $J::str( $selected );
        $cb_vars = '--checkbox-selected-color: ' . $sel_s . '; --checkbox-unselected-color: ' . $J::str( $unselected ) . '; cursor: pointer;';
        $required_attr = $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '';
        $id_s = $J::str( $f( 'id' ) );

        $options_html = '';
        foreach ( $options as $index => $opt ) {
            $is_checked = false;
            foreach ( $default_values as $dv ) {
                if ( $J::eq( $dv, $opt['value'] ) ) {
                    $is_checked = true;
                    break;
                }
            }

            $option_text_color = ! $J::is_nullish( $opt['labelTextColor'] ) ? $opt['labelTextColor'] : $J::or_( $f( 'textColor' ), $g( 'inputTextColor' ), $g( 'primaryTextColor' ) );
            $fs_value = ! $J::is_nullish( $opt['fontSize'] ) ? $opt['fontSize'] : ( ! $J::is_nullish( $f( 'fontSize' ) ) ? $f( 'fontSize' ) : $g( 'fontSize' ) );
            $option_font_size = ( is_int( $fs_value ) || is_float( $fs_value ) ) ? $J::str( $fs_value ) . 'px' : $J::or_( $fs_value, $J::str( $g( 'fontSize' ) ) . 'px' );
            $lh_value = ! $J::is_nullish( $opt['lineHeight'] ) ? $opt['lineHeight'] : ( ! $J::is_nullish( $f( 'lineHeight' ) ) ? $f( 'lineHeight' ) : $g( 'lineHeight' ) );
            $option_line_height = ( is_int( $lh_value ) || is_float( $lh_value ) ) ? $J::str( $lh_value ) . 'px' : $J::or_( $lh_value, $J::str( $g( 'lineHeight' ) ) . 'px' );
            $option_font_weight = ! $J::is_nullish( $opt['labelFontWeight'] ) ? $opt['labelFontWeight'] : ( $J::defined( $field, 'labelFontWeight' ) ? $f( 'labelFontWeight' ) : $J::or_( $g( 'labelFontWeight' ), 400 ) );
            $option_font_style = $J::or_( $opt['labelFontStyle'], $f( 'labelFontStyle' ), 'normal' );

            $cb_id = 'checkbox-' . $id_s . '-' . $index;
            $data_price = $J::is_undef( $opt['price'] ) ? 0 : $opt['price'];
            $data_points = $J::is_undef( $opt['points'] ) ? 0 : $opt['points'];

            if ( 'card' === $f( 'checkboxStyle' ) ) {
                $clean_title = preg_replace( '/\s*[—–-]\s*[+]?\$[\d,.]+$/u', '', $J::str( $opt['label'] ) );
                $card_style = 'display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid ' . ( $is_checked ? $sel_s : '#E5E7EB' ) . '; border-radius: 10px; background-color: ' . ( $is_checked ? 'rgba(255, 247, 237, 0.5)' : '#FFFFFF' ) . '; box-shadow: ' . ( $is_checked ? '0 0 0 1px ' . $sel_s : '0 1px 2px rgba(0,0,0,0.03)' ) . '; cursor: pointer; transition: all 0.15s ease;';
                $price_html = ! $J::is_nullish( $opt['price'] ) ? '<span style="' . $this->a( 'color: ' . $sel_s . '; font-weight: 900; font-size: 12px; white-space: nowrap; flex-shrink: 0;' ) . '">+' . $this->t( $this->choice_price( $opt['price'] ) ) . '</span>' : '';
                $options_html .= '
      <div class="checkbox-card" style="' . $this->a( $card_style ) . '" data-wpvfb-card="checkbox">
        <div style="display: flex; align-items: center; gap: 10px; min-width: 0;">
          <input type="checkbox"
            id="' . $this->a( $cb_id ) . '"
            name="' . $this->a( $this->name_attr( $field, '[]' ) ) . '"
            value="' . $this->a( $opt['value'] ) . '"
            data-price="' . $this->a( $data_price ) . '"
            data-points="' . $this->a( $data_points ) . '"
            ' . ( $is_checked ? 'checked' : '' ) . '
            ' . $required_attr . '
            style="' . $this->a( '--checkbox-selected-color: ' . $sel_s . '; --checkbox-unselected-color: ' . $J::str( $unselected ) . '; cursor: pointer; width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;' ) . '"
            data-wpvfb-paint="checkbox-card" data-selected-color="' . $this->a( $sel_s ) . '">
          <div style="flex: 1; min-width: 0;">
            <div style="' . $this->a( 'color: ' . $J::str( $option_text_color ) . '; font-size: ' . $J::str( $option_font_size ) . '; line-height: 1.3; font-weight: ' . $J::str( $J::or_( $option_font_weight, '700' ) ) . '; font-style: ' . $J::str( $option_font_style ) . '; letter-spacing: ' . $J::str( $g( 'letterSpacing' ) ) . 'px;' ) . '">' . $this->t( $clean_title ) . '</div>
            ' . ( $J::truthy( $opt['description'] ) ? '<p style="color: #6B7280; font-size: 11px; line-height: 1.3; margin: 2px 0 0 0; font-weight: 400;">' . $this->t( $opt['description'] ) . '</p>' : '' ) . '
          </div>
        </div>
        ' . $price_html . '
      </div>
    ';
                continue;
            }

            $options_html .= '
      <div class="flex items-center space-x-2">
        <input type="checkbox"
          id="' . $this->a( $cb_id ) . '"
          name="' . $this->a( $this->name_attr( $field, '[]' ) ) . '"
          value="' . $this->a( $opt['value'] ) . '"
          data-price="' . $this->a( $data_price ) . '"
          data-points="' . $this->a( $data_points ) . '"
          ' . ( $is_checked ? 'checked' : '' ) . '
          ' . $required_attr . '
          style="' . $this->a( $cb_vars ) . '"' . $this->contrast_checkmark_attr( $selected ) . '
         >
        <label for="' . $this->a( $cb_id ) . '" style="' . $this->a( 'cursor: pointer;
                 color: ' . $J::str( $option_text_color ) . ';
                 font-size: ' . $J::str( $option_font_size ) . ';
                 line-height: ' . $J::str( $option_line_height ) . ';
                 font-weight: ' . $J::str( $option_font_weight ) . ';
                 font-style: ' . $J::str( $option_font_style ) . ';
                 letter-spacing: ' . $J::str( $g( 'letterSpacing' ) ) . 'px;' ) . '">
          ' . $this->t( $opt['label'] ) . '
        </label>
      </div>
    ';
        }

        $grid_styles = '
    display: grid;
    grid-template-columns: repeat(' . $J::str( $J::or_( $f( 'checkboxRowColumns' ), '1' ) ) . ', minmax(0, 1fr));
    gap: 8px;
    width: ' . $J::str( $J::or_( $f( 'width' ), '100%' ) ) . ';
  ';

        $responsive = '
    @media (max-width: 768px) {
      .checkbox-group {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }
    }
  ';

        $padding = $J::or_( $f( 'padding' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );

        $label_font_size = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) ) ? $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) : $J::or_( $g( 'labelFontSize' ), 15 );
        $label_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 );
        $label_line_height = ( is_int( $label_lh_value ) || is_float( $label_lh_value ) ) ? $J::str( $label_lh_value ) . 'px' : $label_lh_value;
        $label_font_weight = $J::defined( $field, 'labelFontWeight' ) ? $f( 'labelFontWeight' ) : $J::or_( $g( 'labelFontWeight' ), 600 );
        $label_font_style = $J::or_( $f( 'labelFontStyle' ), 'normal' );

        $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( $this->choice_label_style( $field, $gs, $label_font_size, $label_font_weight, $label_font_style, $label_line_height ) ) . '">
                        ' . $this->t( $J::or_( $f( 'name' ), 'Checkbox Field' ) ) . ' ' . $this->choice_red_asterisk( $field ) . '
                    </label>';
        }

        return '
    ' . $this->add_inline_css( $responsive ) . '
    <div class="relative' . $this->a( $custom_class ) . '" data-field-type="checkbox" data-field-id="' . $this->a( $f( 'id' ) ) . '" style="' . $this->a( $this->choice_outer_style( $visibility_style, $margin ) ) . '">
      <div class="flex items-center relative transition-all duration-200 group border-transparent" style="' . $this->a( $this->choice_padding_style( $padding ) ) . '">
        <div class="w-full">
          <div class="relative cursor-default">
            <div class="' . $label_class . '">
              ' . $label_html . '
              <div class="flex flex-col w-full ' . ( $left ? 'justify-center' : '' ) . '">
                ' . $this->choice_simple_desc( $field, $gs, 'above' ) . '

                <div class="checkbox-group" style="' . $this->a( $grid_styles ) . '">
                  ' . $options_html . '
                </div>

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

    /** renderSwitchField — route.ts lines 4647-4819 */
    public function render_switch_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 ); };

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

        $on_value = $J::or_( $f( 'switchOnValue' ), 'on' );
        $off_value = $J::or_( $f( 'switchOffValue' ), 'off' );
        $dv = $f( 'defaultValue' );
        $default_value = $J::is_array( $dv ) ? ( count( $dv ) ? $dv[0] : $J::undef() ) : $dv;
        $switch_value = $J::eq( $default_value, 'true' ) || $J::eq( $default_value, 'on' ) || $J::eq( $default_value, $on_value );

        if ( ! $J::is_nullish( $f( 'switchPrice' ) ) ) {
            $resolved_price = $J::or_( $J::parse_float( $J::str( $f( 'switchPrice' ) ) ), 0 );
        } else {
            $src = $J::str( $J::or_( $f( 'label' ), $f( 'name' ), '' ) );
            $resolved_price = preg_match( '/\+\$(\d+(?:\.\d+)?)/', $src, $mm ) ? $J::parse_float( $mm[1] ) : 0;
        }

        $on_color = $J::or_( $f( 'switchOnColor' ), $g( 'checkboxSelectedColor' ), $g( 'globalColorScheme.checkboxSelectedColor' ), '#2563EB' );
        $off_color = $J::or_( $f( 'switchOffColor' ), $g( 'checkboxUnselectedColor' ), $g( 'globalColorScheme.checkboxUnselectedColor' ), '#D1D5DB' );
        $on_s = $J::str( $on_color );
        $off_s = $J::str( $off_color );

        $padding = $J::or_( $f( 'padding' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );

        $label_font_size = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) ) ? $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) : $J::or_( $g( 'labelFontSize' ), 15 );
        $label_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 );
        $label_line_height = ( is_int( $label_lh_value ) || is_float( $label_lh_value ) ) ? $J::str( $label_lh_value ) . 'px' : $label_lh_value;
        $label_font_weight = $J::defined( $field, 'labelFontWeight' ) ? $f( 'labelFontWeight' ) : $J::or_( $g( 'labelFontWeight' ), 600 );
        $label_font_style = $J::or_( $f( 'labelFontStyle' ), 'normal' );

        $hidden_input_style = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none;';
        $track_style = 'position: relative; display: inline-block; width: 44px; height: 24px; min-width: 44px; min-height: 24px; border-radius: 9999px; background-color: ' . ( $switch_value ? $on_s : $off_s ) . '; transition: background-color 0.2s ease-in-out; cursor: pointer; flex-shrink: 0; box-sizing: border-box;';
        $thumb_style = 'position: absolute; top: 2px; left: 0; width: 20px; height: 20px; min-width: 20px; min-height: 20px; background: #ffffff !important; background-color: #ffffff !important; border-radius: 9999px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease-in-out; transform: ' . ( $switch_value ? 'translateX(20px)' : 'translateX(2px)' ) . '; pointer-events: none; display: block; z-index: 2; box-sizing: border-box;';
        $required_attr = $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '';
        $outer_style = $this->choice_outer_style( $visibility_style, $margin );

        if ( 'card' === $f( 'switchStyle' ) ) {
            $clean_label = preg_replace( '/\s*\([+]?\$[\d,.]+\)\s*$/u', '', $J::str( $J::or_( $f( 'name' ), 'Switch' ) ) );
            $description_color = $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), '#9CA3AF' );
            $card_style = 'border: 1.5px solid ' . ( $switch_value ? $on_s : '#E2E8F0' ) . '; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: all 0.15s ease; cursor: pointer; ' . ( $switch_value ? 'box-shadow: 0 0 0 1px ' . $on_s . ';' : '' );
            $span_style = 'color:' . $J::str( $J::or_( $f( 'labelTextColor' ), $g( 'labelTextColor' ), $g( 'primaryTextColor' ) ) ) . '; font-size:' . $J::str( $label_font_size ) . 'px; font-weight:' . $J::str( $label_font_weight ) . '; font-style:' . $J::str( $label_font_style ) . '; line-height:' . $J::str( $label_line_height ) . '; letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;';
            $price_html = ! $J::is_nullish( $f( 'switchPrice' ) ) ? '<span style="' . $this->a( 'color: ' . $on_s . '; font-weight: 600;' ) . '">+' . $this->t( $this->choice_price( $f( 'switchPrice' ) ) ) . '</span>' : '';
            return '
    <div class="relative' . $this->a( $custom_class ) . '" data-field-type="switch" data-field-id="' . $this->a( $f( 'id' ) ) . '" style="' . $this->a( $outer_style ) . '">
      <div class="switch-card" style="' . $this->a( $card_style ) . '" data-wpvfb-card="switch">
        <div style="flex: 1;">
          <span style="' . $this->a( $span_style ) . '">' . $this->t( $clean_label ) . ' ' . $this->choice_red_asterisk( $field ) . '</span>
          ' . ( $J::truthy( $f( 'description' ) ) ? '<p style="' . $this->a( 'font-size: 13px; color: ' . $J::str( $description_color ) . '; margin-top: 2px;' ) . '">' . $this->t( $f( 'description' ) ) . '</p>' : '' ) . '
        </div>
        <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
          ' . $price_html . '
          <label class="switch-toggle" style="position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none;">
            <input
              type="checkbox"
              id="' . $this->a( $f( 'id' ) ) . '"
              name="' . $this->a( $this->name_attr( $field ) ) . '"
              value="' . $this->a( $on_value ) . '"
              data-off-value="' . $this->a( $off_value ) . '"
              data-switch-price="' . $this->a( $resolved_price ) . '"
              ' . ( $switch_value ? 'checked' : '' ) . '
              ' . $required_attr . '
              class="switch-input"
              data-wpvfb-paint="switch" data-on-color="' . $this->a( $on_s ) . '" data-off-color="' . $this->a( $off_s ) . '"
              style="' . $hidden_input_style . '"
            />
            <div
              class="switch-track"
              style="' . $this->a( $track_style ) . '"
            >
              <div
                class="switch-thumb"
                style="' . $this->a( $thumb_style ) . '"
              ></div>
            </div>
          </label>
        </div>
      </div>
    </div>
    ';
        }

        $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( $this->choice_label_style( $field, $gs, $label_font_size, $label_font_weight, $label_font_style, $label_line_height ) ) . '">
                        ' . $this->t( $J::or_( $f( 'name' ), 'Switch Field' ) ) . ' ' . $this->choice_red_asterisk( $field ) . '
                    </label>';
        }

        return '
    <div class="relative' . $this->a( $custom_class ) . '" data-field-type="switch" data-field-id="' . $this->a( $f( 'id' ) ) . '" style="' . $this->a( $outer_style ) . '">
      <div class="flex items-center relative transition-all duration-200 group border-transparent" style="' . $this->a( $this->choice_padding_style( $padding ) ) . '">
        <div class="w-full">
          <div class="relative cursor-default">
            <div class="' . $label_class . '">
              ' . $label_html . '
              <div class="flex flex-col w-full ' . ( $left ? 'justify-center' : '' ) . '">
                ' . $this->choice_simple_desc( $field, $gs, 'above' ) . '

                <div class="flex items-center" style="display: flex; align-items: center;">
                  <label class="switch-toggle" style="position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none;">
                    <input
                      type="checkbox"
                      id="' . $this->a( $f( 'id' ) ) . '"
                      name="' . $this->a( $this->name_attr( $field ) ) . '"
                      value="' . $this->a( $on_value ) . '"
                      data-off-value="' . $this->a( $off_value ) . '"
                      data-switch-price="' . $this->a( $resolved_price ) . '"
                      ' . ( $switch_value ? 'checked' : '' ) . '
                      ' . $required_attr . '
                      class="switch-input"
                      data-wpvfb-paint="switch" data-on-color="' . $this->a( $on_s ) . '" data-off-color="' . $this->a( $off_s ) . '"
                      style="' . $hidden_input_style . '"
                    />
                    <div
                      class="switch-track"
                      style="' . $this->a( $track_style ) . '"
                    >
                      <div
                        class="switch-thumb"
                        style="' . $this->a( $thumb_style ) . '"
                      ></div>
                    </div>
                  </label>
                </div>

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

    /** renderHiddenField — route.ts lines 5314-5336 */
    public function render_hidden_field( $field ) {
        $J = 'WPVFB_JS';
        if ( $J::truthy( $J::get( $field, 'enableConditionalLogic' ) ) && ! $J::truthy( $J::get( $field, 'conditionalLogicMet' ) ) ) {
            return '';
        }
        $custom_class = $J::truthy( $J::get( $field, 'cssClassName' ) ) ? ' ' . $J::str( $J::get( $field, 'cssClassName' ) ) : '';
        return '
    <div class="hidden-field' . $this->a( $custom_class ) . '" style="display: none;">
      <input type="hidden" id="' . $this->a( $J::get( $field, 'id' ) ) . '" name="' . $this->a( $this->name_attr( $field ) ) . '" value="' . $this->a( $J::or_( $J::get( $field, 'defaultValue' ), '' ) ) . '">
    </div>
  ';
    }

    // ------------------------------------------------------------------
    // Private helpers (Choice group)
    // ------------------------------------------------------------------

    /** shouldHideField (visibility hidden/administrative or unmet conditional logic). */
    protected function choice_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 when undefined) left;` */
    protected function choice_outer_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;';
    }

    protected function choice_padding_style( $padding ) {
        $p = function ( $k ) use ( $padding ) { return WPVFB_JS::str( WPVFB_JS::get( $padding, $k ) ); };
        return '
        padding: ' . $p( 'top' ) . 'px ' . $p( 'right' ) . 'px ' . $p( 'bottom' ) . 'px ' . $p( 'left' ) . 'px;
      ';
    }

    /** The literal red asterisk used by these renderers (not renderRequiredAsterisk). */
    protected function choice_red_asterisk( $field ) {
        return WPVFB_JS::truthy( WPVFB_JS::get( $field, 'required' ) ) ? '<span class="text-red-500" style="color: #ef4444 !important;">*</span>' : '';
    }

    /** Shared top-label inline style of number/checkbox/switch. */
    protected function choice_label_style( $field, $gs, $font_size, $font_weight, $font_style, $line_height ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
        $left = 'left' === $J::get( $gs, 'labelPlacement' );
        $lm_bottom = $J::defined( $field, 'labelMargin.bottom' ) ? $f( 'labelMargin.bottom' ) : 10;
        return 'color:' . $J::str( $J::or_( $f( 'labelTextColor' ), $J::get( $gs, 'labelTextColor' ), $J::get( $gs, 'primaryTextColor' ) ) ) . ';
                      font-size:' . $J::str( $font_size ) . 'px;
                      font-weight:' . $J::str( $font_weight ) . ';
                      font-style:' . $J::str( $font_style ) . ';
                      line-height:' . $J::str( $line_height ) . ';
                      letter-spacing:' . $J::str( $J::get( $gs, 'letterSpacing' ) ) . 'px;
                      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: ' . $J::str( $J::or_( $f( 'labelMargin.top' ), 0 ) ) . 'px; margin-right: ' . $J::str( $J::or_( $f( 'labelMargin.right' ), 0 ) ) . 'px; margin-bottom: ' . $J::str( $lm_bottom ) . 'px; margin-left: ' . $J::str( $J::or_( $f( 'labelMargin.left' ), 0 ) ) . 'px;';
    }

    /** Description paragraph of checkbox/switch (mb-2 / mt-2 variant). */
    protected function choice_simple_desc( $field, $gs, $where ) {
        $J = 'WPVFB_JS';
        if ( $where !== $J::get( $gs, 'descriptionPlacement' ) || ! $J::truthy( $J::get( $field, 'description' ) ) ) {
            return '';
        }
        $style = 'color:' . $J::str( $J::or_( $J::get( $field, 'descriptionColor' ), $J::get( $gs, 'descriptionColor' ), '#9CA3AF' ) ) . ';
                        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;';
        return '<p class="text-sm ' . ( 'above' === $where ? 'mb-2' : 'mt-2' ) . '" style="' . $this->a( $style ) . '">
                        ' . $this->t( $J::get( $field, 'description' ) ) . '
                      </p>';
    }

    /**
     * `$${Number.isInteger(Number(p)) ? Number(p).toLocaleString() : Number(p).toLocaleString('en-US', {min/max 2 fraction digits})}`
     */
    protected function choice_price( $p ) {
        $n = WPVFB_JS::to_number( $p );
        if ( is_float( $n ) && is_nan( $n ) ) {
            return '$NaN';
        }
        if ( is_float( $n ) && is_infinite( $n ) ) {
            return '$' . ( $n > 0 ? '∞' : '-∞' );
        }
        if ( is_int( $n ) || floor( $n ) == $n ) {
            return '$' . number_format( $n, 0, '.', ',' );
        }
        return '$' . number_format( $n, 2, '.', ',' );
    }

}