<?php
// phpcs:ignoreFile -- WordPress.org free package uses custom booking tables and template-scoped variables.
if ( ! defined( 'ABSPATH' ) ) { exit; }

// -- Location context --------------------------------------------------------
if ( ! isset( $yatoon_location ) ) $yatoon_location = null;
if ( $yatoon_location && ! empty( $yatoon_location->color_accent ) ) {
    echo '<style>.sbs-btn-submit,.sbs-btn-add,.sbs-book-btn{background:' . esc_attr( $yatoon_location->color_accent ) . '!important;border-color:' . esc_attr( $yatoon_location->color_accent ) . '!important;}</style>';
}
// Button labels from admin settings
$_sbs_lbl_add     = esc_html(get_option('yatoon_add_btn_label',     'Add'));
$_sbs_lbl_back    = esc_html(get_option('yatoon_back_btn_label',    'Back'));
$_sbs_lbl_cont    = esc_html(get_option('yatoon_continue_btn_label','Continue'));
$_sbs_lbl_more    = esc_html(get_option('yatoon_addmore_btn_label',  '+ Add More Services'));
$_sbs_lbl_more2   = esc_html(get_option('yatoon_addmore2_btn_label', '+ Add More Services'));
$_sbs_lbl_confirm = esc_html(get_option('yatoon_confirm_btn_label', 'Confirm Booking'));
// Multi-appointment mode
$_sbs_multi_appt  = get_option('yatoon_multi_appointment', '1') === '1';
$_sbs_consent_enabled = get_option('yatoon_consent_enabled', '0') === '1';
$_sbs_consent_title = get_option('yatoon_consent_title', 'Consent & Release');
$_sbs_consent_text = get_option('yatoon_consent_text', 'I understand the nature of the selected service(s), have disclosed any relevant allergies, sensitivities, medical conditions, or concerns, and agree to receive the service(s).');
$_sbs_consent_signature_label = get_option('yatoon_consent_signature_label', 'Type your full name as your signature');
$_sbs_policy_enabled = get_option('yatoon_policy_enabled', '0') === '1';
$_sbs_policy_require_ack = get_option('yatoon_policy_require_ack', '1') === '1';
$_sbs_policy_title = get_option('yatoon_policy_title', 'Cancellation & No-Show Policy');
$_sbs_policy_text = get_option('yatoon_policy_text', 'Please let us know as soon as possible if you need to cancel or reschedule. This helps us offer the time to another customer. At this time, we do not charge cancellation or no-show fees.');
$_sbs_policy_ack_label = get_option('yatoon_policy_ack_label', 'I have read and understand the cancellation and no-show policy.');
$_sbs_show_success_next = get_option('yatoon_show_success_next', '1') === '1';
$_sbs_success_next_title = get_option('yatoon_success_next_title', 'What happens next');
$_sbs_success_pay_later_text = get_option('yatoon_success_pay_later_text', 'Please pay at the salon after your service is completed.');
$_sbs_success_deposit_text = get_option('yatoon_success_deposit_text', 'Your deposit is recorded and applied to your visit.');
$_sbs_success_followup_text = get_option('yatoon_success_followup_text', 'You can add this visit to your calendar, manage the booking, or book again below.');
$_sbs_show_availability_source_note = get_option('yatoon_show_availability_source_note', '1') === '1';
$_sbs_popular_label = get_option('yatoon_service_popular_label', 'Popular');
$_sbs_any_service_policy = false;
$_sbs_any_service_consent = false;
foreach ((array) $services as $_sbs_service_rule) {
    if (!empty($_sbs_service_rule->require_policy)) {
        $_sbs_any_service_policy = true;
    }
    if (!empty($_sbs_service_rule->require_consent)) {
        $_sbs_any_service_consent = true;
    }
}
$_sbs_render_policy = $_sbs_policy_enabled || $_sbs_any_service_policy;
$_sbs_render_consent = $_sbs_consent_enabled || $_sbs_any_service_consent;

if (!function_exists('yatoon_service_option_summary')) {
    function yatoon_service_option_summary($service) {
        global $wpdb;

        $base_price    = floatval($service->price ?? 0);
        $base_duration = intval($service->duration_minutes ?? 0);
        $prices        = array();
        $durations     = array();

        $options = $wpdb->get_results($wpdb->prepare(
            "SELECT price_modifier, duration_minutes, group_name, is_required
             FROM {$wpdb->prefix}yatoon_service_options
             WHERE service_id = %d
             ORDER BY sort_order ASC, id ASC",
            intval($service->id)
        ));

        foreach ((array) $options as $option) {
            $group_name = strtolower(trim((string) ($option->group_name ?? '')));
            $is_addon   = (strpos($group_name, 'add') !== false || strpos($group_name, 'extra') !== false);

            // Service cards should preview the primary variations, not optional add-ons.
            if ($is_addon && empty($option->is_required)) {
                continue;
            }

            $price = $base_price + floatval($option->price_modifier ?? 0);
            if ($price > 0) {
                $prices[] = $price;
            }

            $duration = intval($option->duration_minutes ?? 0);
            if ($duration > 0) {
                $durations[] = $duration;
            }
        }

        if (empty($prices) && $base_price > 0) {
            $prices[] = $base_price;
        }
        if (empty($durations) && $base_duration > 0) {
            $durations[] = $base_duration;
        }

        $duration_label = $base_duration > 0 ? $base_duration . ' min+' : '';
        if (!empty($durations)) {
            $min_duration = min($durations);
            $max_duration = max($durations);
            $duration_label = $min_duration === $max_duration
                ? $min_duration . ' min'
                : $min_duration . '-' . $max_duration . ' min';
        }

        $price_label = __('Price varies', 'yatoon-booking-system');
        if (!empty($prices)) {
            $min_price = min($prices);
            $max_price = max($prices);
            if ($min_price > 0 && $min_price === $max_price) {
                $price_label = '$' . number_format($min_price, 0);
            } elseif ($min_price > 0) {
                $price_label = 'from $' . number_format($min_price, 0);
            }
        }

        return array(
            'duration_label' => $duration_label,
            'price_label'    => $price_label,
        );
    }
}
?>
<?php
$yatoon_booking_template = sanitize_key((string) get_option('yatoon_booking_template', 'beauty'));
if (!in_array($yatoon_booking_template, array('clean', 'beauty', 'luxury'), true)) {
    $yatoon_booking_template = 'beauty';
}
$yatoon_test_mode_active = get_option('yatoon_test_booking_mode', '0') === '1'
    && current_user_can('manage_options')
    && !empty($_GET['yatoon_test_booking']);
?>
<div class="sbs-booking-container yatoon-template-<?php echo esc_attr($yatoon_booking_template); ?><?php echo $yatoon_test_mode_active ? ' yatoon-test-mode' : ''; ?>">
    <?php if ($yatoon_test_mode_active) : ?>
        <div class="yatoon-test-ribbon">Test booking mode</div>
    <?php endif; ?>
    <div class="sbs-booking-layout">
        <!-- Left main content -->
        <div class="sbs-booking-main">

            <!-- Progress bar (hidden on step 1, visible step 2+, clickable to go back) -->
            <div id="sbs-progress-bar" class="sbs-progress-bar" style="display:none;">
                <button type="button" class="sbs-prog-step" data-go="1" aria-label="<?php esc_attr_e('Go to service step', 'yatoon-booking-system'); ?>">
                    <span class="sbs-prog-dot">1</span>
                    <span class="sbs-prog-label">Service</span>
                </button>
                <div class="sbs-prog-line"></div>
                <button type="button" class="sbs-prog-step" data-go="2" aria-label="<?php esc_attr_e('Go to options step', 'yatoon-booking-system'); ?>">
                    <span class="sbs-prog-dot">2</span>
                    <span class="sbs-prog-label">Options</span>
                </button>
                <div class="sbs-prog-line"></div>
                <button type="button" class="sbs-prog-step" data-go="3" aria-label="<?php esc_attr_e('Go to staff step', 'yatoon-booking-system'); ?>">
                    <span class="sbs-prog-dot">3</span>
                    <span class="sbs-prog-label">Staff</span>
                </button>
                <div class="sbs-prog-line"></div>
                <button type="button" class="sbs-prog-step" data-go="4" aria-label="<?php esc_attr_e('Go to date and time step', 'yatoon-booking-system'); ?>">
                    <span class="sbs-prog-dot">4</span>
                    <span class="sbs-prog-label">Date & Time</span>
                </button>
                <div class="sbs-prog-line"></div>
                <button type="button" class="sbs-prog-step" data-go="5" aria-label="<?php esc_attr_e('Go to details step', 'yatoon-booking-system'); ?>">
                    <span class="sbs-prog-dot">5</span>
                    <span class="sbs-prog-label">Details</span>
                </button>
            </div>

            <!-- My Appointments top banner -->
            <?php
            // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
            $portal_banner_enabled = get_option('yatoon_show_portal_banner', '1') === '1';
            $portal_url            = get_option('yatoon_portal_url', '');
            $portal_label          = get_option('yatoon_portal_label', 'My Appointments');
            $portal_prompt         = get_option('yatoon_portal_banner_prompt', 'Already booked with us?');
            $portal_new_tab        = get_option('yatoon_portal_new_tab', '0');
            // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
            if ($portal_banner_enabled && $portal_url) : ?>
            <div class="sbs-portal-banner">
                <span class="sbs-portal-banner-text"><?php echo esc_html($portal_prompt); ?></span>
                <a href="<?php echo esc_url($portal_url); ?>"
                   <?php if ($portal_new_tab === '1') : ?>target="_blank" rel="noopener"<?php endif; ?>
                   class="sbs-portal-banner-link">
                    &#128100; <?php echo esc_html($portal_label); ?> &rarr;</a>
            </div>
            <?php endif; ?>

            <?php
            // Fresha-style customer-facing venue header.
            // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
            $yatoon_show_venue   = get_option('yatoon_show_venue_hero', '1') === '1';
            $yatoon_venue_kicker = get_option('yatoon_venue_kicker', 'Book online');
            $yatoon_venue_name    = get_option('yatoon_business_name', get_bloginfo('name'));
            $yatoon_venue_address = get_option('yatoon_business_address', get_option('sbs_business_address', ''));
            $yatoon_venue_phone   = get_option('yatoon_business_phone', get_option('yatoon_contact_phone', ''));
            $yatoon_venue_rating  = get_option('yatoon_public_rating_label', 'Trusted local salon');
            $yatoon_pay_later     = get_option('yatoon_venue_pay_later_label', 'Book now, pay later');
            $yatoon_deposit_label = get_option('yatoon_venue_deposit_label', 'Secure deposit available');
            $yatoon_deposit_on    = yatoon_is_pro() && get_option('yatoon_deposit_enabled', '0') === '1';
            $yatoon_service_count = is_array($services) ? count($services) : 0;
            $yatoon_price_values  = array();
            foreach ((array) $services as $yatoon_price_service) {
                if (isset($yatoon_price_service->price) && floatval($yatoon_price_service->price) > 0) {
                    $yatoon_price_values[] = floatval($yatoon_price_service->price);
                }
            }
            $yatoon_from_price = !empty($yatoon_price_values) ? min($yatoon_price_values) : 0;
            // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
            ?>
            <?php if ($yatoon_show_venue) : ?>
            <section class="sbs-venue-hero" aria-label="<?php esc_attr_e('Booking venue', 'yatoon-booking-system'); ?>">
                <div class="sbs-venue-hero-main">
                    <span class="sbs-venue-kicker"><?php echo esc_html($yatoon_venue_kicker); ?></span>
                    <h2><?php echo esc_html($yatoon_venue_name ? $yatoon_venue_name : __('Book your visit', 'yatoon-booking-system')); ?></h2>
                    <div class="sbs-venue-meta">
                        <?php if ($yatoon_venue_address) : ?>
                            <span><?php echo esc_html($yatoon_venue_address); ?></span>
                        <?php endif; ?>
                        <?php if ($yatoon_venue_phone) : ?>
                            <span><?php echo esc_html($yatoon_venue_phone); ?></span>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="sbs-venue-proof">
                    <span><?php echo esc_html($yatoon_venue_rating); ?></span>
                    <span><?php echo esc_html($yatoon_service_count); ?> <?php esc_html_e('services', 'yatoon-booking-system'); ?></span>
                    <?php if ($yatoon_from_price > 0) : ?>
                        <span><?php esc_html_e('From', 'yatoon-booking-system'); ?> $<?php echo esc_html(number_format($yatoon_from_price, 0)); ?></span>
                    <?php endif; ?>
                    <span><?php echo esc_html($yatoon_deposit_on ? $yatoon_deposit_label : $yatoon_pay_later); ?></span>
                </div>
            </section>
            <div class="sbs-venue-trust-strip" aria-label="<?php esc_attr_e('Booking highlights', 'yatoon-booking-system'); ?>">
                <div>
                    <strong><?php esc_html_e('Fast booking', 'yatoon-booking-system'); ?></strong>
                    <span><?php esc_html_e('Choose service, staff, and time in minutes', 'yatoon-booking-system'); ?></span>
                </div>
                <div>
                    <strong><?php esc_html_e('Clear pricing', 'yatoon-booking-system'); ?></strong>
                    <span><?php esc_html_e('Review your total before confirming', 'yatoon-booking-system'); ?></span>
                </div>
                <div>
                    <strong><?php esc_html_e('Easy changes', 'yatoon-booking-system'); ?></strong>
                    <span><?php esc_html_e('Manage appointment details after booking', 'yatoon-booking-system'); ?></span>
                </div>
            </div>
            <?php endif; ?>

            <!-- Title -->
            <h1 id="sbs-main-title" class="sbs-page-title"><?php esc_html_e('Book your visit', 'yatoon-booking-system'); ?></h1>

            <?php if ( $yatoon_location && ( ! empty( $yatoon_location->description ) || ! empty( $yatoon_location->address ) ) ) : ?>
            <div class="sbs-location-banner">
                <span class="sbs-location-pin" aria-hidden="true">&#128205;</span>
                <div>
                    <strong class="sbs-location-title"><?php echo esc_html( $yatoon_location->name ); ?></strong>
                    <?php if ( ! empty( $yatoon_location->description ) ) : ?>
                    <p class="sbs-location-desc"><?php echo esc_html( $yatoon_location->description ); ?></p>
                    <?php endif; ?>
                    <?php if ( ! empty( $yatoon_location->address ) ) : ?>
                    <p class="sbs-location-address"><?php echo esc_html( $yatoon_location->address ); ?></p>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>

            <!-- Step 1: Select Service -->
            <div class="sbs-form-step sbs-step-1 active">
                <?php
                // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template-scoped local variables in included view file.
                // Category order & labels: read from admin Brand & Colors setting
                $saved_order = get_option('yatoon_category_order', '');
                $cat_label_map = array(); // db_name => display_label
                // Defensive: option might be stored as array in some configurations
                if (is_array($saved_order)) {
                    $saved_order = implode("
", $saved_order);
                }
                if ($saved_order && is_string($saved_order)) {
                    $raw_lines = array_filter(array_map('trim', explode("
", $saved_order)));
                    $category_order = array();
                    foreach ($raw_lines as $line) {
                        if (strpos($line, '|') !== false) {
                            list($label, $db) = explode('|', $line, 2);
                            $db = trim($db); $label = trim($label);
                            $category_order[] = $db;
                            $cat_label_map[$db] = $label;
                        } else {
                            $category_order[] = trim($line);
                        }
                    }
                } else {
                    $category_order = array('Enhancements','Manicures','Pedicures','Polish Change','Add On',"Kid's Menu");
                }

                // Collect categories that actually exist in the database
                $existing_cats = array();
                foreach ($services as $service) {
                    if ($service->category && !in_array($service->category, $existing_cats)) {
                        $existing_cats[] = $service->category;
                    }
                }

                // Sort by specified order, append any unrecognised categories at end
                $categories = array();
                foreach ($category_order as $ordered_cat) {
                    foreach ($existing_cats as $existing) {
                        if (strcasecmp(trim($existing), trim($ordered_cat)) === 0) {
                            $categories[] = $existing;
                            break;
                        }
                    }
                }
                // Append any remaining unmatched categories
                foreach ($existing_cats as $existing) {
                    if (!in_array($existing, $categories)) {
                        $categories[] = $existing;
                    }
                }

                // Re-sort $services in category order
                $sorted_services = array();
                foreach ($categories as $cat) {
                    foreach ($services as $service) {
                        if (strcasecmp(trim($service->category), trim($cat)) === 0) {
                            $sorted_services[] = $service;
                        }
                    }
                }
                foreach ($services as $service) {
                    if (empty($service->category)) {
                        $sorted_services[] = $service;
                    }
                }
                $services = $sorted_services;
                // Read max guests directly to avoid scope issues
                $_sbs_max_guests = max( 0, min( 10, intval( get_option( 'yatoon_max_guests_together', 2 ) ) ) );
                ?>
                <!-- Appointment type selector: shown ABOVE category tabs -->
                <div class="sbs-appt-type-wrap" id="sbs-appt-type-wrap" data-max-guests="<?php echo esc_attr( $_sbs_max_guests ); ?>"><?php if ( $_sbs_max_guests <= 0 ) : ?><style>#sbs-appt-type-wrap{display:none!important}</style><?php endif; ?>
                    <div class="sbs-appt-type-label"><?php esc_html_e( 'Appointment type', 'yatoon-booking-system' ); ?></div>
                    <div class="sbs-appt-type-cards">
                        <button type="button" class="sbs-appt-type-card active" data-type="solo" id="sbs-appt-solo">
                            <span class="sbs-appt-type-icon" aria-hidden="true">&#128100;</span>
                            <span class="sbs-appt-type-text">
                                <span class="sbs-appt-type-title"><?php esc_html_e( 'Just me', 'yatoon-booking-system' ); ?></span>
                                <span class="sbs-appt-type-sub"><?php esc_html_e( 'Book services for yourself', 'yatoon-booking-system' ); ?></span>
                            </span>
                            <span class="sbs-appt-type-check" aria-hidden="true"></span>
                        </button>
                        <button type="button" class="sbs-appt-type-card" data-type="group" id="sbs-appt-group">
                            <span class="sbs-appt-type-icon" aria-hidden="true">&#128101;</span>
                            <span class="sbs-appt-type-text">
                                <span class="sbs-appt-type-title"><?php esc_html_e( 'Group appointment', 'yatoon-booking-system' ); ?></span>
                                <span class="sbs-appt-type-sub" id="sbs-appt-group-sub">
                                    <?php
                                    // Fallback text rendered server-side; JS will overwrite with correct value from yatoonData
                                    $guest_word = $_sbs_max_guests === 1
                                        ? esc_html__( '1 guest', 'yatoon-booking-system' )
                                        : sprintf( esc_html__( 'up to %d guests', 'yatoon-booking-system' ), $_sbs_max_guests );
                                    printf( esc_html__( 'Add %s; everyone starts together', 'yatoon-booking-system' ), $guest_word );
                                    ?>
                                </span>
                            </span>
                            <span class="sbs-appt-type-check" aria-hidden="true"></span>
                        </button>
                    </div>
                    <div class="sbs-appt-type-hint" id="sbs-appt-group-hint" style="display:none;">
                        <?php esc_html_e( 'Select your service first, then add services for your guests.', 'yatoon-booking-system' ); ?>
                    </div>
                </div>

                <?php if (get_option('yatoon_ai_service_helper_enabled', '1') === '1') : ?>
                    <?php
                    $yatoon_ai_available = class_exists('YATOON_AI') && YATOON_AI::is_text_available();
                    $yatoon_ai_status    = class_exists('YATOON_AI') ? YATOON_AI::status_message() : __('AI requires WordPress 7.0 or newer.', 'yatoon-booking-system');
                $yatoon_ai_display_mode = get_option('yatoon_ai_display_mode', 'collapsed');
                $yatoon_ai_frontend_title = trim((string) get_option('yatoon_ai_frontend_title', __('Need help choosing?', 'yatoon-booking-system')));
                if ($yatoon_ai_frontend_title === 'AI Style Assistant') { $yatoon_ai_frontend_title = __('Need help choosing?', 'yatoon-booking-system'); }
                if ($yatoon_ai_frontend_title === '') { $yatoon_ai_frontend_title = __('Need help choosing?', 'yatoon-booking-system'); }
                $yatoon_ai_font_size = min(24, max(11, absint(get_option('yatoon_ai_frontend_font_size', 14))));
                $yatoon_ai_text_color = sanitize_hex_color(get_option('yatoon_ai_frontend_text_color', '#111827')) ?: '#111827';
                $yatoon_ai_bg_color = sanitize_hex_color(get_option('yatoon_ai_frontend_bg_color', '#f8fafc')) ?: '#f8fafc';
                $yatoon_ai_privacy_note = trim((string) get_option('yatoon_ai_privacy_note', __('Privacy note: Please avoid sensitive, medical, or payment details.', 'yatoon-booking-system')));
                $yatoon_ai_style_attr = sprintf('--yatoon-ai-title-size:%dpx;--yatoon-ai-title-color:%s;--yatoon-ai-toggle-bg:%s;', $yatoon_ai_font_size, $yatoon_ai_text_color, $yatoon_ai_bg_color);
                    ?>
                    <div class="yatoon-ai-helper yatoon-ai-collapsible <?php echo $yatoon_ai_display_mode === 'collapsed' ? 'is-collapsed' : 'is-expanded'; ?>" id="yatoon-ai-service-helper" style="<?php echo esc_attr($yatoon_ai_style_attr); ?>">
                        <div class="yatoon-ai-helper-header">
                            <strong><?php echo esc_html($yatoon_ai_frontend_title); ?></strong>
                        <button type="button" class="yatoon-ai-collapse" aria-label="<?php esc_attr_e('Collapse AI Assistant', 'yatoon-booking-system'); ?>">&times;</button>
                            <span><?php esc_html_e('Tell us the style, length, occasion, budget, or concerns you have. Our AI assistant will suggest services from this menu.', 'yatoon-booking-system'); ?></span>
                        </div>
                    <?php if ($yatoon_ai_display_mode === 'collapsed') : ?>
                    <button type="button" class="yatoon-ai-toggle" aria-expanded="false"><?php echo esc_html($yatoon_ai_frontend_title); ?></button>
                    <?php endif; ?>
                    <div class="yatoon-ai-helper-body">
                        <?php if (!$yatoon_ai_available) : ?>
                            <p class="yatoon-ai-notice"><?php echo esc_html($yatoon_ai_status); ?></p>
                        <?php endif; ?>
                        <textarea id="yatoon-ai-service-need" rows="2" placeholder="<?php esc_attr_e('Example: soft pink almond nails for a wedding, medium length, with simple nail art', 'yatoon-booking-system'); ?>" <?php disabled(!$yatoon_ai_available); ?>></textarea>
                        <?php if ($yatoon_ai_privacy_note !== '') : ?>
                            <p class="yatoon-ai-privacy-note"><?php echo esc_html($yatoon_ai_privacy_note); ?></p>
                        <?php endif; ?>
                        <div class="yatoon-ai-helper-actions">
                            <button type="button" class="sbs-btn" id="yatoon-ai-service-submit" <?php disabled(!$yatoon_ai_available); ?>><?php esc_html_e('Ask AI for Recommendations', 'yatoon-booking-system'); ?></button>
                            <span id="yatoon-ai-service-status" aria-live="polite"></span>
                        </div>
                        <div class="yatoon-ai-result" id="yatoon-ai-service-result" style="display:none;"></div>
                                        </div>
                </div>
                <?php endif; ?>

                <?php
                // Customer-friendly popular picks rail. Uses featured services first, then fills with the first visible services.
                $yatoon_show_popular_picks = (int) get_option('yatoon_show_popular_picks', 1) === 1;
                $yatoon_popular_mobile_count = (int) get_option('yatoon_popular_picks_mobile_count', 4);
                $yatoon_popular_desktop_count = (int) get_option('yatoon_popular_picks_desktop_count', 6);
                $yatoon_popular_mobile_count = max(1, min(12, $yatoon_popular_mobile_count));
                $yatoon_popular_desktop_count = max(1, min(12, $yatoon_popular_desktop_count));
                $yatoon_popular_limit = max($yatoon_popular_mobile_count, $yatoon_popular_desktop_count);
                $yatoon_popular_selected_raw = get_option('yatoon_popular_pick_service_ids', array());
                if (!is_array($yatoon_popular_selected_raw)) {
                    $yatoon_popular_selected_raw = explode(',', (string) $yatoon_popular_selected_raw);
                }
                $yatoon_popular_selected_ids = array_values(array_filter(array_map('absint', $yatoon_popular_selected_raw)));
                $yatoon_services_by_id = array();
                foreach ((array) $services as $pick_service) {
                    $yatoon_services_by_id[(int) $pick_service->id] = $pick_service;
                }
                $yatoon_popular_picks = array();
                if ($yatoon_show_popular_picks) {
                    if (!empty($yatoon_popular_selected_ids)) {
                        foreach ($yatoon_popular_selected_ids as $selected_service_id) {
                            if (isset($yatoon_services_by_id[$selected_service_id])) {
                                $yatoon_popular_picks[] = $yatoon_services_by_id[$selected_service_id];
                            }
                            if (count($yatoon_popular_picks) >= $yatoon_popular_limit) {
                                break;
                            }
                        }
                    } else {
                        foreach ((array) $services as $pick_service) {
                            if (!empty($pick_service->is_featured)) {
                                $yatoon_popular_picks[] = $pick_service;
                            }
                            if (count($yatoon_popular_picks) >= $yatoon_popular_limit) {
                                break;
                            }
                        }
                        if (count($yatoon_popular_picks) < 3) {
                            foreach ((array) $services as $pick_service) {
                                $already_added = false;
                                foreach ($yatoon_popular_picks as $existing_pick) {
                                    if ((int) $existing_pick->id === (int) $pick_service->id) {
                                        $already_added = true;
                                        break;
                                    }
                                }
                                if (!$already_added) {
                                    $yatoon_popular_picks[] = $pick_service;
                                }
                                if (count($yatoon_popular_picks) >= $yatoon_popular_limit) {
                                    break;
                                }
                            }
                        }
                    }
                }
                ?>
                <?php if (!empty($yatoon_popular_picks)) : ?>
                <section class="sbs-popular-picks sbs-popular-mobile-<?php echo esc_attr($yatoon_popular_mobile_count); ?> sbs-popular-desktop-<?php echo esc_attr($yatoon_popular_desktop_count); ?>" aria-label="<?php esc_attr_e('Popular services', 'yatoon-booking-system'); ?>">
                    <div class="sbs-popular-picks-head">
                        <div>
                            <span><?php esc_html_e('Popular picks', 'yatoon-booking-system'); ?></span>
                            <strong><?php esc_html_e('Start with a customer favorite', 'yatoon-booking-system'); ?></strong>
                        </div>
                    </div>
                    <div class="sbs-popular-picks-rail">
                        <?php foreach ($yatoon_popular_picks as $pick_index => $pick_service) :
                            $pick_summary = yatoon_service_option_summary($pick_service);
                            $pick_position = $pick_index + 1;
                            $pick_classes = array('sbs-popular-pick');
                            if ($pick_position > $yatoon_popular_desktop_count) {
                                $pick_classes[] = 'sbs-popular-pick-desktop-hidden';
                            }
                            if ($pick_position > $yatoon_popular_mobile_count) {
                                $pick_classes[] = 'sbs-popular-pick-mobile-hidden';
                            }
                            ?>
                            <button type="button" class="<?php echo esc_attr(implode(' ', $pick_classes)); ?>" data-scroll-service="<?php echo esc_attr($pick_service->id); ?>">
                                <span class="sbs-popular-pick-name"><?php echo esc_html($pick_service->name); ?></span>
                                <span class="sbs-popular-pick-meta"><?php echo esc_html($pick_summary['duration_label']); ?> &bull; <?php echo esc_html($pick_summary['price_label']); ?></span>
                            </button>
                        <?php endforeach; ?>
                    </div>
                </section>
                <?php endif; ?>

                <?php if (!empty($categories)) :
                $visible_limit = 4;
                ?>
                <!-- Category sticky tabs (below appointment type) -->
                <div class="sbs-category-tabs-wrap">
                    <div class="sbs-category-tabs" role="group" aria-label="<?php esc_attr_e( 'Jump to a service category', 'yatoon-booking-system' ); ?>">
                        <?php foreach ($categories as $i => $cat) : ?>
                            <button type="button"
                                    class="sbs-cat-tab <?php echo esc_html( $i === 0 ? 'active' : '' ); ?> <?php echo esc_html( $i >= $visible_limit ? 'sbs-cat-overflow' : '' ); ?>"
                                    data-cat="<?php echo esc_attr(sanitize_title($cat)); ?>"
                                    aria-pressed="<?php echo esc_attr( $i === 0 ? 'true' : 'false' ); ?>">
                                <?php echo esc_html(isset($cat_label_map[$cat]) ? $cat_label_map[$cat] : $cat); ?>
                            </button>
                        <?php endforeach; ?>
                        <?php if (count($categories) > $visible_limit) : ?>
                        <!-- More button: sits inside tab row, dropdown rendered outside -->
                        <button type="button" class="sbs-cat-tab sbs-cat-more-btn" id="sbs-cat-more-btn"
                                aria-expanded="false" aria-controls="sbs-cat-more-dropdown"
                                aria-label="<?php esc_attr_e( 'More service categories', 'yatoon-booking-system' ); ?>">
                            More &#8964;
                        </button>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="sbs-service-search-wrap">
                    <label class="sbs-visually-hidden" for="sbs-service-search"><?php esc_html_e( 'Search services', 'yatoon-booking-system' ); ?></label>
                    <svg class="sbs-service-search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
                        <line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                    <input type="text" id="sbs-service-search" class="sbs-service-search-input"
                           placeholder="<?php esc_attr_e('Search services...', 'yatoon-booking-system'); ?>"
                           autocomplete="off" aria-describedby="sbs-service-search-empty">
                    <button type="button" id="sbs-service-search-clear" class="sbs-service-search-clear" aria-label="<?php esc_attr_e('Clear search', 'yatoon-booking-system'); ?>" style="display:none;">&times;</button>
                </div>
                <p id="sbs-service-search-empty" class="sbs-service-search-empty" style="display:none;"><?php esc_html_e('No services match your search.', 'yatoon-booking-system'); ?></p>
                <?php if (count($categories) > $visible_limit) : ?>
                <!-- Dropdown rendered outside overflow container to avoid clipping -->
                <div id="sbs-cat-more-dropdown" class="sbs-cat-more-dropdown" role="region" aria-label="<?php esc_attr_e( 'More service categories', 'yatoon-booking-system' ); ?>">
                    <?php ?>
                    <?php foreach ($categories as $i => $cat) : if ($i < $visible_limit) continue; ?>
                    <button type="button"
                            class="sbs-cat-dropdown-item"
                            data-cat="<?php echo esc_attr(sanitize_title($cat)); ?>">
                        <?php echo esc_html(isset($cat_label_map[$cat]) ? $cat_label_map[$cat] : $cat); ?>
                    </button>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
                <?php endif; ?>

                <div class="sbs-services-list">
                    <?php if (!empty($services)) :
                        // -- Bulk-fetch service ratings (one query for all services) --
                        // phpcs:disable WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotPrepared
                        global $wpdb;
                        $ybs_ratings_table_sq = $wpdb->prefix . 'yatoon_reviews';
                        $ybs_show_ratings_sq  = get_option('yatoon_show_ratings_on_cards', '1') === '1';
                        $ybs_show_next_op_sq  = get_option('yatoon_show_next_opening', '1') === '1';
                        $ybs_ratings_map_sq   = array();
                        if ($ybs_show_ratings_sq) {
                            $ybs_rating_rows_sq = $wpdb->get_results(
                                "SELECT service_name, AVG(rating) AS avg_rating, COUNT(*) AS rating_count
                                 FROM {$ybs_ratings_table_sq}
                                 WHERE status = 'approved' AND rating > 0
                                 GROUP BY service_name"
                            );
                            if (is_array($ybs_rating_rows_sq)) {
                                foreach ($ybs_rating_rows_sq as $rr) {
                                    $ybs_ratings_map_sq[$rr->service_name] = array(
                                        'avg'   => round((float)$rr->avg_rating, 1),
                                        'count' => (int)$rr->rating_count,
                                    );
                                }
                            }
                        }
                        // phpcs:enable
                    ?>
                        <?php
                        // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                        $current_category = '';
                        foreach ($services as $service) :
                            $service_summary = yatoon_service_option_summary($service);
                            $svc_rating_sq = $ybs_ratings_map_sq[$service->name] ?? null;
                            if ($service->category != $current_category) {
                                $current_category = $service->category;
                        // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                        ?>
                            <h2 id="cat-<?php echo esc_attr(sanitize_title($current_category)); ?>"
                                class="sbs-category-title">
                                <?php echo esc_html(isset($cat_label_map[$current_category]) ? $cat_label_map[$current_category] : $current_category); ?>
                            </h2>
                        <?php } ?>
                            <div class="sbs-service-item"
                                 data-service-id="<?php echo esc_attr($service->id); ?>"
                                 data-service-name="<?php echo esc_attr($service->name); ?>"
                                 data-service-price="<?php echo esc_attr($service->price); ?>"
                                 data-service-duration="<?php echo esc_attr($service->duration_minutes); ?>"
                                 data-service-desc="<?php echo esc_attr( wp_strip_all_tags( $service->description ?? '' ) ); ?>"
                                 data-service-image="<?php echo esc_url( $service->image_url ?? '' ); ?>"
                                 data-square-id="<?php echo esc_attr($service->square_id ?? ''); ?>"
                                 data-require-policy="<?php echo esc_html( !empty($service->require_policy) ? '1' : '0' ); ?>"
                                 data-require-consent="<?php echo esc_html( !empty($service->require_consent) ? '1' : '0' ); ?>"
                                 data-allow-staff-select="<?php echo esc_html( isset($service->allow_staff_select) ? intval($service->allow_staff_select) : 1 ); ?>"
                                 data-allow-design-upload="<?php echo esc_attr( !empty($service->allow_design_upload) ? '1' : '0' ); ?>"
                                 data-category="<?php echo esc_attr($service->category ?: 'uncategorized'); ?>">
                                <div class="sbs-service-content">
                                    <div class="sbs-service-header">
                                        <div style="flex:1; min-width:0;">
                                            <h4 class="sbs-service-name"><?php echo esc_html($service->name); ?></h4>
                                            <div class="sbs-service-details">
                                                <span class="sbs-service-duration">
                                                    <?php echo esc_html($service_summary['duration_label']); ?>
                                                </span>
                                                <?php if ($svc_rating_sq && $svc_rating_sq['count'] > 0) : ?>
                                                    <span class="ybs-inline-rating">&starf; <?php echo esc_html($svc_rating_sq['avg']); ?> <span class="ybs-pill-count">(<?php echo esc_html($svc_rating_sq['count']); ?>)</span></span>
                                                <?php endif; ?>
                                            </div>
                                            <?php if ($service->description) : ?>
                                                <?php
                                                $clean_desc = wp_strip_all_tags($service->description);
                                                $char_limit = 58;
                                                $need_more  = mb_strlen($clean_desc) > $char_limit;
                                                $short_desc = $need_more ? mb_substr($clean_desc, 0, $char_limit) . '...' : $clean_desc;
                                                ?>
                                                <div class="sbs-service-desc-wrap">
                                                    <span class="sbs-desc-short"><?php echo esc_html($short_desc); ?></span>
                                                    <?php if ($need_more) : ?>
                                                        <span class="sbs-desc-full" id="sbs-desc-<?php echo esc_attr( $service->id ); ?>" hidden><?php echo esc_html($clean_desc); ?></span>
                                                        <a href="#"
                                                                class="sbs-read-more"
                                                                aria-expanded="false"
                                                                aria-controls="sbs-desc-<?php echo esc_attr( $service->id ); ?>"
                                                                data-read-more="<?php echo esc_attr__( 'Read more', 'yatoon-booking-system' ); ?>"
                                                                data-show-less="<?php echo esc_attr__( 'Show less', 'yatoon-booking-system' ); ?>"><?php esc_html_e('Read more', 'yatoon-booking-system'); ?></a>
                                                    <?php endif; ?>
                                                </div>
                                            <?php endif; ?>
                                            <div class="sbs-service-price-row">
                                                <span class="sbs-service-price"><?php echo esc_html($service_summary['price_label']); ?></span>
                                            </div>
                                            <?php if ($ybs_show_next_op_sq): ?>
                                            <div class="ybs-next-opening" data-svc-id="<?php echo esc_attr($service->id); ?>" aria-live="polite">
                                                <span class="ybs-next-opening-dot"></span>
                                                <span class="ybs-next-opening-text"><?php esc_html_e('Checking availability...', 'yatoon-booking-system'); ?></span>
                                            </div>
                                            <?php endif; ?>
                                            <div class="sbs-service-badges">
                                                <?php if (!empty($service->is_featured)) : ?>
                                                    <span><?php echo esc_html($_sbs_popular_label); ?></span>
                                                <?php endif; ?>
                                                <?php if (!empty($service->require_policy)) : ?>
                                                    <span>Policy applies</span>
                                                <?php endif; ?>
                                                <?php if (!empty($service->require_consent)) : ?>
                                                    <span>Consent required</span>
                                                <?php endif; ?>
                                                <?php if ($yatoon_deposit_on) : ?>
                                                    <span>Deposit ready</span>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                        <!-- Right side: image + Add button -->
                                        <div class="sbs-service-right-col">
                                            <?php if (!empty($service->image_url)) : ?>
                                                <div class="sbs-service-img-wrap">
                                                    <img src="<?php echo esc_url($service->image_url); ?>"
                                                         alt="<?php echo esc_attr($service->name); ?>"
                                                         loading="lazy">
                                                </div>
                                            <?php endif; ?>
                                            <button type="button" class="sbs-book-btn"><?php echo esc_html( $_sbs_lbl_add ); ?></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else : ?>
                        <p class="sbs-no-services"><?php esc_html_e('No services available at this time.', 'yatoon-booking-system'); ?></p>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Step 2: Select Options -->
            <div class="sbs-form-step sbs-step-2">
                <h2 class="sbs-step-section-title"><?php esc_html_e('Choose your options', 'yatoon-booking-system'); ?></h2>
                <div class="sbs-options-container">
                    <div class="sbs-loading"><span class="spinner"></span> Loading options...</div>
                </div>
                <?php if (get_option('yatoon_allow_design_upload', '1') === '1') : ?>
                <div class="yatoon-design-upload-group yatoon-design-upload-card">
                    <div class="yatoon-design-upload-copy">
                        <strong><?php esc_html_e('Upload a reference photo', 'yatoon-booking-system'); ?></strong>
                        <span><?php esc_html_e('Optional - choose a photo that shows the color, shape, or nail art you want. JPG, PNG, GIF, or WebP, up to 10 MB.', 'yatoon-booking-system'); ?></span>
                    </div>
                    <label class="yatoon-design-file-button" for="sbs-design-reference"><?php esc_html_e('Choose reference photo', 'yatoon-booking-system'); ?></label>
                    <input type="file" id="sbs-design-reference" name="design_reference" accept="image/jpeg,image/png,image/gif,image/webp">
                    <div id="sbs-design-preview" class="yatoon-design-preview" style="display:none;"></div>
                </div>
                <?php endif; ?>
                <div class="sbs-navigation-buttons">
                    <button type="button" class="sbs-btn sbs-btn-back"><?php echo esc_html( $_sbs_lbl_back ); ?></button>
                    <button type="button" class="sbs-btn sbs-btn-next"><?php echo esc_html( $_sbs_lbl_cont ); ?></button>
                </div>
            </div>

            <!-- Step 3: Select Staff -->
            <div class="sbs-form-step sbs-step-3">
                <h2>Select Staff Member</h2>
                <div class="sbs-staff-grid">
                    <div class="sbs-loading"><span class="spinner"></span> Loading staff...</div>
                </div>
                <div class="sbs-navigation-buttons">
                    <button type="button" class="sbs-btn sbs-btn-back"><?php echo esc_html( $_sbs_lbl_back ); ?></button>
                    <button type="button" class="sbs-btn sbs-btn-next sbs-staff-continue"><?php echo esc_html( $_sbs_lbl_cont ); ?></button>
                </div>
            </div>

            <!-- Step 4: Date & Time -->
            <div class="sbs-form-step sbs-step-4">
                <h2>Select Date &amp; Time</h2>
                <?php if ($_sbs_show_availability_source_note) : ?>
                <p class="sbs-step-helper">
                    <?php
                    $active_platform = get_option('yatoon_active_platform', 'local');
                    if ($active_platform === 'square'):
                        echo 'Times shown are in real-time from your Square calendar';
                    elseif ($active_platform === 'vagaro'):
                        echo 'Times shown are in real-time from your Vagaro calendar';
                    else:
                        echo 'Available times are based on our business hours';
                    endif;
                    ?>
                </p>
                <?php endif; ?>
                <div class="sbs-datetime-container">
                    <div class="sbs-date-shortcuts" aria-label="<?php esc_attr_e('Quick date choices', 'yatoon-booking-system'); ?>">
                        <button type="button" class="sbs-date-shortcut" data-offset="0"><?php esc_html_e('Today', 'yatoon-booking-system'); ?></button>
                        <button type="button" class="sbs-date-shortcut" data-offset="1"><?php esc_html_e('Tomorrow', 'yatoon-booking-system'); ?></button>
                        <button type="button" class="sbs-date-shortcut" data-offset="3"><?php esc_html_e('This week', 'yatoon-booking-system'); ?></button>
                    </div>
                    <div class="sbs-calendar-container">
                        <div class="sbs-calendar-header">
                            <button type="button" class="sbs-view-toggle active" data-view="week">Week</button>
                            <button type="button" class="sbs-view-toggle" data-view="month">Month</button>
                        </div>
                        <div class="sbs-week-view active">
                            <div class="sbs-week-navigation">
                                <button type="button" class="sbs-week-prev">&lt;</button>
                                <span class="sbs-week-range"></span>
                                <button type="button" class="sbs-week-next">&gt;</button>
                            </div>
                            <div class="sbs-week-days"></div>
                        </div>
                        <div class="sbs-month-view">
                            <!-- Month calendar rendered by JS -->
                        </div>
                    </div>
                    <div id="sbs-next-openings" class="sbs-next-openings" style="display:none;"></div>
                    <div class="sbs-time-slots">
                        <p class="sbs-times-hint">Select a date above to see available times</p>
                    </div>
                </div>
                <div class="sbs-navigation-buttons sbs-navigation-buttons-wrap">
                    <button type="button" class="sbs-btn sbs-btn-back"><?php echo esc_html( $_sbs_lbl_back ); ?></button>
                    <button type="button" class="sbs-btn sbs-btn-manage-services-calendar sbs-review-services-btn"><?php esc_html_e( 'Edit Services', 'yatoon-booking-system' ); ?></button>
                </div>
            </div>

            <!-- Step 5: Customer Details -->
            <div class="sbs-form-step sbs-step-5">
                <h2><?php esc_html_e('Review your booking', 'yatoon-booking-system'); ?></h2>
                <div class="sbs-checkout-trust-strip" aria-label="<?php esc_attr_e('Booking confidence', 'yatoon-booking-system'); ?>">
                    <span><?php esc_html_e('Review details before confirming', 'yatoon-booking-system'); ?></span>
                    <span><?php echo esc_html($yatoon_deposit_on ? __('Deposit shown before checkout', 'yatoon-booking-system') : __('Pay later available', 'yatoon-booking-system')); ?></span>
                    <span><?php esc_html_e('Manage changes after booking', 'yatoon-booking-system'); ?></span>
                </div>
                
                <!-- Cart list -->
                <div class="sbs-appointments-review">
                    <div class="sbs-step-header-row">
                        <h3><?php esc_html_e('Appointment details', 'yatoon-booking-system'); ?></h3>
                        <?php if ($_sbs_multi_appt) : ?>
                        <button type="button" class="sbs-btn sbs-btn-add-more sbs-add-more-service sbs-compact-action" id="sbs-add-another-appt-btn"><?php echo esc_html( $_sbs_lbl_more ); ?></button>
                        <?php endif; ?>
                    </div>
                    <div id="sbs-booking-cart-list"></div>
                </div>
                
                <!-- Customer info form -->
                <h3 class="sbs-step-section-title"><?php esc_html_e('Your Information', 'yatoon-booking-system'); ?></h3>
                <form id="sbs-customer-form" class="sbs-customer-form">
                    <div class="sbs-form-group">
                        <label for="sbs-customer-name">Your Name *</label>
                        <input type="text" id="sbs-customer-name" name="customer_name" required>
                    </div>
                    <div class="sbs-form-group">
                        <label for="sbs-customer-email">Email *</label>
                        <input type="email" id="sbs-customer-email" name="customer_email" required>
                    </div>
                    <div class="sbs-form-group">
                        <?php
                        $ybs_phone_required_sq = get_option('yatoon_phone_required','1') === '1';
                        $ybs_phone_mode_sq     = get_option('yatoon_phone_mode','us_only');
                        $ybs_phone_country_sq  = get_option('yatoon_phone_preset_country','us');
                        ?>
                        <label for="sbs-customer-phone">Phone<?php if($ybs_phone_required_sq): ?> *<?php endif; ?></label>
                        <?php if ($ybs_phone_mode_sq === 'us_only'): ?>
                            <input type="tel" id="sbs-customer-phone" name="customer_phone"
                                   placeholder="<?php echo esc_attr( $ybs_phone_required_sq ? '(555) 000-0000' : '10-digit phone number' ); ?>"
                                   <?php if($ybs_phone_required_sq) echo 'required'; ?>>
                        <?php else: ?>
                            <input type="hidden" id="sbs-customer-phone" name="customer_phone">
                            <input type="tel" id="sbs-phone-display" autocomplete="tel"
                                   style="width:100%;"
                                   <?php if($ybs_phone_required_sq) echo 'required'; ?>>
                            <script>
                            document.addEventListener('DOMContentLoaded',function(){
                                var display = document.getElementById('sbs-phone-display');
                                var hidden  = document.getElementById('sbs-customer-phone');
                                var mode    = '<?php echo esc_js($ybs_phone_mode_sq); ?>';
                                var preset  = '<?php echo esc_js($ybs_phone_country_sq); ?>';
                                if(typeof intlTelInput === 'undefined'){ return; }
                            var useIpGeo = !!(window.yatoonData && window.yatoonData.useIpGeo);
                            var iti = intlTelInput(display, {
                                initialCountry: mode==='intl_preset' ? preset : (useIpGeo ? 'auto' : 'us'),
                                    separateDialCode: true,
                                    allowDropdown: mode !== 'intl_preset'
                                });
                                function syncHidden(){
                                    hidden.value = iti.isValidNumber() ? iti.getNumber() : (iti.getNumber() || display.value);
                                }
                                display.addEventListener('input', syncHidden);
                                display.addEventListener('countrychange', syncHidden);
                                var form = display.closest('form');
                                if(form){ form.addEventListener('submit', syncHidden, true); }
                            });
                            </script>
                        <?php endif; ?>
                    </div>
                    <div class="sbs-form-group">
                        <label for="sbs-customer-notes">Comments or Requests</label>
                        <textarea id="sbs-customer-notes" name="notes" rows="3" placeholder="Any special requests, notes, or preferences?"></textarea>
                    </div>

                    <?php
                    // -- Custom form fields ----------------------------------
                    global $wpdb;
                    $custom_fields = $wpdb->get_results(
                        "SELECT * FROM {$wpdb->prefix}yatoon_form_fields WHERE is_active = 1 ORDER BY sort_order ASC, id ASC"
                    );
                    foreach ((array)$custom_fields as $cf):
                        $fid = 'sbs-cf-' . esc_attr($cf->field_key);
                        $opts = array_filter(array_map('trim', explode("\n", $cf->options ?? '')));
                    ?>
                    <div class="sbs-form-group">
                        <label for="<?php echo esc_attr($fid); ?>"><?php echo esc_html($cf->label); ?><?php echo $cf->required ? ' *' : ''; ?></label>
                        <?php if ($cf->type === 'textarea'): ?>
                            <textarea id="<?php echo esc_attr($fid); ?>" name="cf[<?php echo esc_attr($cf->field_key); ?>]" rows="3" placeholder="<?php echo esc_attr($cf->placeholder); ?>"<?php echo $cf->required ? ' required' : ''; ?>></textarea>
                        <?php elseif ($cf->type === 'select'): ?>
                            <select id="<?php echo esc_attr($fid); ?>" name="cf[<?php echo esc_attr($cf->field_key); ?>]"<?php echo $cf->required ? ' required' : ''; ?>>
                                <option value="">- Select -</option>
                                <?php foreach ($opts as $opt): ?>
                                <option value="<?php echo esc_attr($opt); ?>"><?php echo esc_html($opt); ?></option>
                                <?php endforeach; ?>
                            </select>
                        <?php elseif ($cf->type === 'checkbox'): ?>
                            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400;">
                                <input type="checkbox" id="<?php echo esc_attr($fid); ?>" name="cf[<?php echo esc_attr($cf->field_key); ?>]" value="Yes"<?php echo $cf->required ? ' required' : ''; ?>>
                                <?php echo esc_html($cf->placeholder ?: $cf->label); ?>
                            </label>
                        <?php elseif ($cf->type === 'radio'): ?>
                            <div style="display:flex;flex-direction:column;gap:6px;margin-top:4px;">
                            <?php foreach ($opts as $opt): ?>
                                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400;">
                                    <input type="radio" name="cf[<?php echo esc_attr($cf->field_key); ?>]" value="<?php echo esc_attr($opt); ?>"<?php echo $cf->required ? ' required' : ''; ?>>
                                    <?php echo esc_html($opt); ?>
                                </label>
                            <?php endforeach; ?>
                            </div>
                        <?php else: // text or url ?>
                            <input type="<?php echo $cf->type === 'url' ? 'url' : 'text'; ?>" id="<?php echo esc_attr($fid); ?>" name="cf[<?php echo esc_attr($cf->field_key); ?>]" placeholder="<?php echo esc_attr($cf->placeholder); ?>"<?php echo $cf->required ? ' required' : ''; ?>>
                        <?php endif; ?>
                    </div>
                    <?php endforeach; ?>

                    <?php
                    // -- Tip / Gratuity --------------------------------------
                    if (get_option('yatoon_tip_enabled', '1') === '1'):
                        $tip_presets = array_filter(array_map('trim', explode(',', get_option('yatoon_tip_presets', '15,18,20'))));
                        $tip_label   = get_option('yatoon_tip_label', 'Add a tip for your technician');
                    ?>
                    <div class="sbs-form-group sbs-tip-group" id="sbs-tip-group">
                        <label><?php echo esc_html($tip_label); ?></label>
                        <div class="sbs-tip-presets">
                            <?php foreach ($tip_presets as $pct): ?>
                            <button type="button" class="sbs-tip-btn" data-pct="<?php echo esc_attr($pct); ?>"><?php echo esc_html($pct); ?>%</button>
                            <?php endforeach; ?>
                            <button type="button" class="sbs-tip-btn" data-pct="custom">Custom</button>
                            <button type="button" class="sbs-tip-btn" data-pct="0">No tip</button>
                        </div>
                        <div id="sbs-tip-custom-wrap" style="display:none;margin-top:8px;">
                            <div style="display:flex;align-items:center;gap:6px;">
                                <span style="font-size:15px;font-weight:600;">$</span>
                                <input type="number" id="sbs-tip-custom-amount" min="0" step="0.50" placeholder="0.00" style="width:100px;padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;">
                            </div>
                        </div>
                        <input type="hidden" id="sbs-tip-amount" name="tip_amount" value="0">
                        <div id="sbs-tip-display" style="display:none;margin-top:6px;font-size:13px;color:#6b7280;"></div>
                    </div>
                    <?php endif; ?>

                    <!-- Gift card redemption -->
                    <?php if (yatoon_is_pro() && get_option('yatoon_gift_card_enabled', '1') === '1') : ?>
                    <div class="sbs-form-group sbs-gift-card-group" id="sbs-gift-card-group">
                        <label><?php esc_html_e('Gift Card', 'yatoon-booking-system'); ?></label>
                        <div class="sbs-gift-card-row">
                            <input type="text" id="sbs-gift-card-code" name="gift_card_code" placeholder="Enter gift card code (e.g. A3B7-K9P2-X1Z4)" style="text-transform:uppercase;letter-spacing:.05em;" autocomplete="off">
                            <button type="button" id="sbs-gift-card-apply" class="sbs-gift-card-btn"><?php esc_html_e('Apply', 'yatoon-booking-system'); ?></button>
                        </div>
                        <div id="sbs-gift-card-result" style="display:none;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:8px;"></div>
                        <input type="hidden" id="sbs-gift-card-code-confirmed" name="gift_card_code_confirmed" value="">
                    </div>
                    <?php endif; ?>

                    <div id="sbs-guest-contact-fields" class="sbs-guest-contact-fields" style="display:none;"></div>
                    <?php if (yatoon_is_pro() && get_option('yatoon_enable_coupons', '0') === '1') : ?>
                    <div class="sbs-form-group">
                        <label for="sbs-coupon-code"><?php esc_html_e('Coupon Code', 'yatoon-booking-system'); ?></label>
                        <div class="sbs-coupon-row" style="display:flex;gap:8px;">
                            <input type="text" id="sbs-coupon-code" name="coupon_code" autocomplete="off" style="text-transform:uppercase;flex:1;">
                            <button type="button" id="sbs-coupon-apply" class="sbs-gift-card-btn"><?php esc_html_e('Apply', 'yatoon-booking-system'); ?></button>
                        </div>
                        <div id="sbs-coupon-result" style="display:none;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:8px;"></div>
                        <input type="hidden" id="sbs-coupon-discount" name="coupon_discount" value="0">
                    </div>
                    <?php endif; ?>
                    <?php if ($_sbs_render_policy) : ?>
                    <div class="sbs-form-group sbs-policy-box" data-global-policy="<?php echo esc_html( $_sbs_policy_enabled ? '1' : '0' ); ?>" data-global-policy-ack="<?php echo esc_html( $_sbs_policy_require_ack ? '1' : '0' ); ?>" style="border:1px solid #fde68a;border-radius:8px;padding:14px;background:#fffbeb;display:none;">
                        <h3 style="font-size:16px;margin:0 0 8px;color:#92400e;"><?php echo esc_html($_sbs_policy_title); ?></h3>
                        <div style="font-size:13px;line-height:1.6;color:#78350f;background:#fff;border:1px solid #fde68a;border-radius:6px;padding:12px;">
                            <?php echo wp_kses_post( nl2br( esc_html( $_sbs_policy_text ) ) ); ?>
                        </div>
                        <label style="display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:13px;color:#111;">
                            <input type="checkbox" id="sbs-policy-acknowledged" name="policy_acknowledged" value="1" style="margin-top:3px;">
                            <span><?php echo esc_html($_sbs_policy_ack_label); ?></span>
                        </label>
                    </div>
                    <?php endif; ?>
                    <?php if ($_sbs_render_consent) : ?>
                    <div class="sbs-form-group sbs-consent-box" data-global-consent="<?php echo esc_html( $_sbs_consent_enabled ? '1' : '0' ); ?>" style="border:1px solid #e5e7eb;border-radius:8px;padding:14px;background:#f9fafb;display:none;">
                        <h3 style="font-size:16px;margin:0 0 8px;"><?php echo esc_html($_sbs_consent_title); ?></h3>
                        <div style="font-size:13px;line-height:1.6;color:#374151;background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:12px;max-height:180px;overflow:auto;">
                            <?php echo wp_kses_post( nl2br( esc_html( $_sbs_consent_text ) ) ); ?>
                        </div>
                        <label style="display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:13px;color:#111;">
                            <input type="checkbox" id="sbs-consent-accepted" name="consent_accepted" value="1" style="margin-top:3px;">
                            <span><?php esc_html_e( 'I have read and agree to the consent terms above.', 'yatoon-booking-system' ); ?></span>
                        </label>
                        <div style="margin-top:12px;">
                            <label for="sbs-consent-signature"><?php echo esc_html($_sbs_consent_signature_label); ?> *</label>
                            <input type="text" id="sbs-consent-signature" name="consent_signature" autocomplete="name">
                        </div>
                    </div>
                    <?php endif; ?>
                    <div class="sbs-navigation-buttons">
                        <button type="button" class="sbs-btn sbs-btn-back"><?php echo esc_html( $_sbs_lbl_back ); ?></button>
                        <button type="submit" class="sbs-btn sbs-btn-submit"><?php echo esc_html( $_sbs_lbl_confirm ); ?></button>
                    </div>
                </form>
            </div>

            <!-- Success -->
            <div class="sbs-form-step sbs-step-success" style="display:none;">
                <div class="sbs-success-message">
                    <?php $_sbs_logo = get_option('yatoon_business_logo'); ?>
                    <?php if ($_sbs_logo) : ?>
                    <div style="margin:0 auto 16px;width:72px;height:72px;">
                        <img src="<?php echo esc_url($_sbs_logo); ?>"
                             alt="<?php echo esc_attr(get_option('yatoon_business_name', get_bloginfo('name'))); ?>"
                             style="width:72px;height:72px;object-fit:contain;border-radius:16px;display:block;">
                    </div>
                    <?php else : ?>
                    <div class="sbs-success-icon">&#10003;</div>
                    <?php endif; ?>
                    <h3><span id="sbs-success-count">1</span> Booking(s) Confirmed!</h3>
                    <p>You're booked. Confirmation email(s) have been sent to your email address.</p>
                    <?php if ($_sbs_show_success_next) : ?>
                    <div class="sbs-success-next-card">
                        <strong><?php echo esc_html($_sbs_success_next_title); ?></strong>
                        <span><?php echo esc_html($yatoon_deposit_on ? $_sbs_success_deposit_text : $_sbs_success_pay_later_text); ?></span>
                        <span><?php echo esc_html($_sbs_success_followup_text); ?></span>
                    </div>
                    <?php endif; ?>
                    <p style="margin-top: 16px; color: #666; font-size: 14px;">
                        <?php
                        // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                        $biz_name    = get_option('yatoon_business_name', '');
                        $biz_address = get_option('yatoon_business_address', '');
                        $biz_phone   = get_option('yatoon_business_phone', get_option('yatoon_contact_phone', ''));
                        $biz_website = get_option('yatoon_business_website', '');
                        // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                        if ($biz_name): ?>
                            <strong><?php echo esc_html($biz_name); ?></strong><br>
                        <?php endif;
                        if ($biz_address): ?>
                            <?php echo esc_html($biz_address); ?><br>
                        <?php endif;
                        if ($biz_phone): ?>
                            <?php echo esc_html($biz_phone); ?><br>
                        <?php endif;
                        if ($biz_website): ?>
                            <a href="<?php echo esc_url($biz_website); ?>" target="_blank" style="color: #ec4899;"><?php echo esc_html(preg_replace('#^https?://#', '', $biz_website)); ?></a>
                        <?php endif; ?>
                    </p>
                    <?php if ($biz_address) : ?>
                        <a class="sbs-success-direction-link" href="https://www.google.com/maps/search/?api=1&query=<?php echo rawurlencode($biz_address); ?>" target="_blank" rel="noopener">Get directions</a>
                    <?php endif; ?>
                    <div id="sbs-success-actions" class="sbs-success-actions" style="display:none;"></div>
                </div>
            </div>
        </div>

        <!-- Right sidebar summary -->
        <div class="sbs-booking-sidebar">
            <div class="sbs-sidebar-header">
                <h3 class="sbs-sidebar-title">Appointment summary</h3>
                <button type="button" id="sbs-sidebar-edit-cart" class="sbs-sidebar-edit-cart-btn" style="display:none;">
                    Edit Cart
                </button>
            </div>

            <!-- Empty guide shown before any service is added -->
            <div id="sbs-sidebar-empty-guide" class="sbs-sidebar-empty-guide" style="display:none;">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="4" y="6" width="32" height="28" rx="4" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1.5"/>
                    <rect x="10" y="13" width="14" height="2.5" rx="1.25" fill="#d1d5db"/>
                    <rect x="10" y="18" width="10" height="2.5" rx="1.25" fill="#e5e7eb"/>
                    <circle cx="30" cy="28" r="6" fill="color-mix(in srgb, var(--primary-color, #ec4899) 15%, #fff)" stroke="var(--primary-color, #ec4899)" stroke-width="1.5"/>
                    <path d="M27.5 28h5M30 25.5v5" stroke="var(--primary-color, #ec4899)" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
                <p class="sbs-sidebar-empty-title">No services yet</p>
                <p class="sbs-sidebar-empty-sub">Select a service from the list to see your booking summary here.</p>
            </div>

            <div class="sbs-booking-summary" id="sbs-booking-summary-panel" style="display:block;">
                <!-- Service row -->
                <div class="sbs-summary-item" id="sbs-summary-row-service">
                    <div style="flex:1;">
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;font-weight:600;margin-bottom:2px;">Service</div>
                        <span id="sbs-summary-service" style="color:#9ca3af;font-size:14px;">No services added yet</span>
                    </div>
                    <div style="display:flex;gap:4px;align-items:center;">
                        <button type="button" class="sbs-summary-edit-btn" data-goto="1"
                                id="sbs-edit-service-btn" style="display:none;" title="Change service">&#9998;</button>
                    </div>
                </div>

                <!-- Options row -->
                <div class="sbs-summary-item" id="sbs-summary-options-container" style="display:none;">
                    <div style="flex:1;">
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;font-weight:600;margin-bottom:2px;">Options</div>
                        <span id="sbs-summary-options" style="font-size:14px;">-</span>
                    </div>
                    <div style="display:flex;gap:4px;align-items:center;">
                        <button type="button" class="sbs-summary-edit-btn" data-goto="2" title="Change options">&#9998;</button>
                    </div>
                </div>

                <!-- Staff row -->
                <div class="sbs-summary-item" id="sbs-summary-row-staff">
                    <div style="flex:1;">
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;font-weight:600;margin-bottom:2px;">Staff</div>
                        <span id="sbs-summary-staff" style="color:#9ca3af;font-size:14px;">Not selected</span>
                    </div>
                    <div style="display:flex;gap:4px;align-items:center;">
                        <button type="button" class="sbs-summary-edit-btn" data-goto="3"
                                id="sbs-edit-staff-btn" style="display:none;" title="Change staff">&#9998;</button>
                    </div>
                </div>

                <!-- Date & Time row -->
                <div class="sbs-summary-item" id="sbs-summary-row-datetime">
                    <div style="flex:1;">
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;font-weight:600;margin-bottom:2px;">Date &amp; Time</div>
                        <span id="sbs-summary-datetime" style="color:#9ca3af;font-size:14px;">Not selected</span>
                    </div>
                    <div style="display:flex;gap:4px;align-items:center;">
                        <button type="button" class="sbs-summary-edit-btn" data-goto="4"
                                id="sbs-edit-datetime-btn" style="display:none;" title="Change date/time">&#9998;</button>
                    </div>
                </div>

                <!-- Duration -->
                <div class="sbs-summary-item" id="sbs-summary-row-duration">
                    <div style="flex:1;">
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;font-weight:600;margin-bottom:2px;">Appointment Length</div>
                        <span id="sbs-summary-duration" style="font-size:14px;">-</span>
                    </div>
                </div>

                <!-- Total -->
                <div class="sbs-summary-item sbs-summary-total" id="sbs-summary-row-total" style="border-top:2px solid #f3f4f6;margin-top:4px;padding-top:14px;">
                    <strong style="font-size:15px;">Total</strong>
                    <span id="sbs-summary-total" style="font-size:18px;font-weight:700;color:#ec4899;">$0.00</span>
                </div>
            </div>
            <button type="button" id="sbs-sidebar-next-btn" class="sbs-btn sbs-btn-next"
                    style="width:100%;margin-top:20px;display:none;"><?php echo esc_html( $_sbs_lbl_cont ); ?></button>
            <p style="margin-top:20px;font-size:12px;color:var(--text-secondary);text-align:center;">
                <span id="sbs-sync-status" style="display:none;">Times synced in real time with Square</span>
            </p>
        </div>
    </div>

    <!-- Hidden inputs -->
    <input type="hidden" id="sbs-selected-service-id" value="">
    <input type="hidden" id="sbs-selected-staff-id" value="">
    <?php if ( $yatoon_location ) : ?>
    <input type="hidden" id="sbs-location-id" name="yatoon_location_id" value="<?php echo esc_attr( $yatoon_location->id ); ?>">
    <?php endif; ?>
    <input type="hidden" id="sbs-selected-start-at" value="">
    <input type="hidden" id="sbs-selected-options" value="">
</div>

<!-- Mobile bottom floating cart -->
<div id="sbs-drawer-backdrop"></div>

<div id="sbs-mobile-drawer" style="display:none">
    <div class="sbs-drawer-handle"></div>
    <div class="sbs-booking-summary">
        <!-- Content rendered dynamically by JS _renderDrawer() -->
    </div>
</div>

<div id="sbs-mobile-cart-bar" style="display:none">
    <div id="sbs-cart-avatar" aria-label="Selected services cart"><span class="sbs-cart-icon" aria-hidden="true"></span><span class="sbs-cart-count">0</span></div>
    <div id="sbs-cart-info">
        <div id="sbs-cart-name">Selected services</div>
        <div id="sbs-cart-meta">Tap to view cart</div>
    </div>
    <button type="button" id="sbs-cart-expand-btn" aria-label="View booking summary">&#8964;</button>
    <button type="button" id="sbs-cart-next-btn" style="display:none;">Next</button>
</div>

<?php if (get_option('yatoon_text_us_enabled', '1') === '1') : ?>
<!-- Text Us floating button (desktop + mobile) -->
<button type="button" id="sbs-text-us-btn" aria-label="Text us">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
    </svg>
    <span>Text us</span>
</button>

<!-- Text Us modal form -->
<div id="sbs-text-us-modal" class="sbs-text-modal">
    <div class="sbs-text-modal-content">
        <div class="sbs-text-modal-header">
            <div style="width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f3f4f6;">
                <?php 
                // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                $logo_url = get_option('yatoon_business_logo');
                $business_name = get_option('yatoon_business_name', 'Your Business');
                // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                if ($logo_url) :                 ?>
                    <img src="<?php echo esc_url($logo_url); ?>" alt="<?php echo esc_attr($business_name); ?>" style="width:100%; height:100%; object-fit:cover;">
                <?php else : ?>
                    <span style="font-size:20px; font-weight:bold; color:#9ca3af;">
                        <?php echo esc_html(substr($business_name, 0, 1)); ?>
                    </span>
                <?php endif; ?>
            </div>
            <div style="flex:1; margin-left:12px;">
                <h3 style="margin:0; font-size:16px; font-weight:700;"><?php echo esc_html($business_name); ?></h3>
                <p style="margin:2px 0 0; font-size:12px; color:#666;">We'll respond as soon as we can</p>
            </div>
            <button type="button" class="sbs-text-modal-close" aria-label="Close">&times;</button>
        </div>
        <form id="sbs-text-us-form" class="sbs-text-modal-body">
            <input type="text" name="name" placeholder="Name" required>
            <input type="tel" name="phone" placeholder="Phone number" required>
            <textarea name="message" placeholder="Message" rows="4" required></textarea>
            <button type="submit" class="sbs-text-submit-btn">Send message</button>
        </form>
        <div id="sbs-text-success" class="sbs-text-success" style="display:none;">
            <div style="text-align:center; padding:40px 20px;">
                <div style="width:60px; height:60px; background:#10B981; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:#fff; font-size:28px;">&#10003;</div>
                <h3 style="margin:0 0 8px; font-size:18px;">Message sent!</h3>
                <p style="margin:0; color:#666; font-size:14px;">We'll get back to you soon.</p>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Waitlist modal (Enhanced) -->
<div id="sbs-waitlist-modal" class="sbs-text-modal" style="display:none;">
    <div class="sbs-text-modal-content" style="max-width:520px; max-height:90vh; overflow-y:auto;">
        <div class="sbs-text-modal-header">
            <div style="width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f3f4f6; flex-shrink:0;">
                <?php 
                // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                $logo_url = get_option('yatoon_business_logo');
                $business_name = get_option('yatoon_business_name', 'Your Business');
                // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                if ($logo_url) : ?>
                    <img src="<?php echo esc_url($logo_url); ?>" alt="<?php echo esc_attr($business_name); ?>" style="width:100%; height:100%; object-fit:cover;">
                <?php else : ?>
                    <span style="font-size:20px; font-weight:bold; color:#9ca3af;"><?php echo esc_html(substr($business_name, 0, 1)); ?></span>
                <?php endif; ?>
            </div>
            <div style="flex:1; margin-left:12px;">
                <h3 style="margin:0; font-size:16px; font-weight:700;">Join the Waitlist</h3>
                <p style="margin:2px 0 0; font-size:12px; color:#666;">We'll notify you when a spot opens up</p>
            </div>
            <button type="button" class="sbs-text-modal-close" aria-label="Close">&times;</button>
        </div>

        <form id="sbs-waitlist-form" class="sbs-text-modal-body">
            <?php wp_nonce_field('yatoon_frontend_nonce', 'waitlist_nonce', false); ?>

            <!-- Contact Info -->
            <div style="margin-bottom:16px;">
                <p style="font-size:12px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;">Your Information</p>
                <input type="text"  name="name"  placeholder="Full name *"    required style="margin-bottom:8px;">
                <input type="email" name="email" placeholder="Email address *" required style="margin-bottom:8px;">
                <input type="tel"   name="phone" placeholder="Phone number *"  required>
            </div>

            <!-- Service Multi-Select -->
            <div style="margin-bottom:16px;">
                <p style="font-size:12px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;">Services you're interested in <span style="color:#ef4444;">*</span></p>
                <p style="font-size:12px; color:#9ca3af; margin:0 0 10px;">Select one or more services</p>
                <div id="waitlist-service-checkboxes" style="display:grid; gap:6px; max-height:200px; overflow-y:auto; padding:2px;">
                    <?php
                    global $wpdb;
                    // phpcs:disable WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
                    $wl_services = $wpdb->get_results("SELECT id, name, category, price FROM {$wpdb->prefix}yatoon_services WHERE is_active = 1 ORDER BY sort_order, name");
                    $wl_current_cat = null;
                    foreach ($wl_services as $wl_svc) :
                        if ($wl_svc->category && $wl_svc->category !== $wl_current_cat) :
                            $wl_current_cat = $wl_svc->category;
                    ?>
                        <p style="font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; margin:6px 0 2px; letter-spacing:.05em;"><?php echo esc_html($wl_svc->category); ?></p>
                    <?php endif; ?>
                        <label class="waitlist-service-label" style="display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid #e5e7eb; border-radius:8px; cursor:pointer; transition:all .15s; font-size:14px;">
                            <input type="checkbox" name="service_ids[]" value="<?php echo esc_html( $wl_svc->id ); ?>" class="waitlist-svc-chk" style="width:16px;height:16px;accent-color:var(--primary-color,#ec4899);">
                            <span style="flex:1;"><?php echo esc_html($wl_svc->name); ?></span>
                            <?php if ($wl_svc->price > 0) : ?>
                                <span style="font-size:12px; color:#6b7280;">from $<?php echo number_format($wl_svc->price, 0); ?></span>
                            <?php endif; ?>
                        </label>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- Date Preference -->
            <div style="margin-bottom:16px;">
                <p style="font-size:12px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;">Preferred Date <span style="color:#ef4444;">*</span></p>
                <input type="date" name="preferred_date" id="waitlist-date"
                       min="<?php echo esc_attr( gmdate('Y-m-d', strtotime('+1 day')) ); ?>"
                       required
                       style="width:100%; padding:10px 12px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:14px; box-sizing:border-box;">
                <label style="display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; margin-top:8px; color:#555;">
                    <input type="checkbox" name="flexible_dates" value="1" checked style="width:16px;height:16px;accent-color:var(--primary-color,#ec4899);">
                    I'm flexible with dates (7 days)
                </label>
            </div>

            <!-- Time Preference -->
            <div style="margin-bottom:16px;">
                <p style="font-size:12px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;">Preferred Time of Day</p>
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
                    <?php
                    $time_slots = array(
                        'morning'   => array('Morning', '10am - 12pm'),
                        'afternoon' => array('Afternoon', '12pm - 4pm'),
                        'late_afternoon' => array('Late Afternoon', '4pm - 7pm'),
                        'any'       => array('Any Time',  'No preference'),
                    );
                    foreach ($time_slots as $val => list($label, $range)) : ?>
                    <label class="waitlist-time-label" style="display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border:1.5px solid #e5e7eb; border-radius:8px; cursor:pointer; transition:all .15s;">
                        <div style="display:flex; align-items:center; gap:8px; width:100%;">
                            <input type="radio" name="preferred_time" value="<?php echo esc_attr( $val ); ?>" <?php echo esc_html( $val === 'any' ? 'checked' : '' ); ?> style="width:15px;height:15px;accent-color:var(--primary-color,#ec4899);">
                            <span style="font-size:13px; font-weight:600;"><?php echo esc_html( $label ); ?></span>
                        </div>
                        <span style="font-size:11px; color:#9ca3af; padding-left:23px;"><?php echo esc_html( $range ); ?></span>
                    </label>
                    <?php endforeach; ?>
                </div>
                <label style="display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; margin-top:8px; color:#555;">
                    <input type="checkbox" name="flexible_times" value="1" checked style="width:16px;height:16px;accent-color:var(--primary-color,#ec4899);">
                    I'm flexible with times
                </label>
            </div>

            <!-- Notes -->
            <div style="margin-bottom:16px;">
                <p style="font-size:12px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;">Additional notes</p>
                <textarea name="notes" placeholder="Any specific requests or additional info..." rows="3" style="width:100%; padding:10px 12px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:14px; resize:vertical; box-sizing:border-box;"></textarea>
            </div>

            <button type="submit" class="sbs-text-submit-btn" style="width:100%;">Join Waitlist &rarr;</button>
        </form>

        <div id="sbs-waitlist-success" style="display:none;">
            <div style="text-align:center; padding:40px 20px;">
                <div style="width:60px; height:60px; background:#10B981; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:#fff; font-size:28px;">&#10003;</div>
                <h3 style="margin:0 0 8px; font-size:18px;">You're on the list!</h3>
                <p style="margin:0; color:#666; font-size:14px;">We'll contact you as soon as a spot becomes available.</p>
            </div>
        </div>
    </div>
</div>
