<?php

if ( ! defined( 'ABSPATH' ) ) { exit; }

// -- Location context --------------------------------------------------------
if ( ! isset( $yatoon_location ) ) { $yatoon_location = null;
}
if ( $yatoon_location && ! empty( $yatoon_location->color_accent ) ) {
    // 4.6.2: was esc_attr( $yatoon_location->color_accent ), then interpolated
    // six times into a <style> block.
    //
    // esc_attr() escapes for an HTML *attribute*: it handles & < > " ' and leaves
    // ; { } ( ) : / untouched, because none of those end an attribute value. All
    // of them are meaningful inside a CSS declaration block, so esc_attr() is
    // simply the wrong escaper for this context - a value of
    //   red;}  .sbs-booking-container *{background:url(//evil/x)
    // survives it intact and closes the rule early.
    //
    // Not currently exploitable: class-yatoon-locations.php:114 runs
    // sanitize_hex_color() on the way into the database, so nothing but #rgb /
    // #rrggbb can be stored. That is one guard, on one write path, and it is not
    // this file's guard - a future import, migration, REST write or direct
    // $wpdb->update() would bypass it silently and this output would not notice.
    // Escape at the point of output, in the escaper that matches the context.
    //
    // sanitize_hex_color() returns null for anything that is not a valid hex
    // colour, and an unusable accent is a reason to emit nothing at all rather
    // than a broken rule: the stylesheet defaults then apply, which is the same
    // thing that happens when a location has no accent set.
    $yatoon_location_accent = sanitize_hex_color( $yatoon_location->color_accent );
    if ( $yatoon_location_accent ) {
        echo '<style>.sbs-booking-container{--primary-color:' . esc_html( $yatoon_location_accent ) . ';--primary-hover:' . esc_html( $yatoon_location_accent ) . ';--sbs-primary:' . esc_html( $yatoon_location_accent ) . ';--sbs-secondary:' . esc_html( $yatoon_location_accent ) . ';--y4-primary:' . esc_html( $yatoon_location_accent ) . ';--y4-primary-strong:' . esc_html( $yatoon_location_accent ) . ';}</style>';
    }
}
// Button labels from admin settings.
//
// FIX (4.4.3): these used get_option( $name, $default ) directly, but that
// default only applies when the option ROW IS ABSENT. Once the settings form
// has been saved with a blank field the option exists as an empty string, and
// get_option() dutifully returns ''. Every affected button then rendered as
// `<button class="sbs-book-btn"></button>` -- a coloured rectangle with no
// text at all, and no accessible name for screen readers. Observed live: the
// service cards' Add button was blank on the booking form.
//
// class-yatoon-frontend.php already guarded the same values with `?:` when
// building btnLabels for JS, so the two paths disagreed. Use the same guard
// here. Falling back on an empty string is always right for a button label:
// an invisible button is never the intent.
$_sbs_lbl_add     = esc_html( trim( (string) get_option( 'yatoon_add_btn_label',      'Add' ) )                  ?: 'Add' );
$_sbs_lbl_back    = esc_html( trim( (string) get_option( 'yatoon_back_btn_label',     'Back' ) )                 ?: 'Back' );
$_sbs_lbl_cont    = esc_html( trim( (string) get_option( 'yatoon_continue_btn_label', 'Continue' ) )             ?: 'Continue' );
$_sbs_lbl_more    = esc_html( trim( (string) get_option( 'yatoon_addmore_btn_label',  '+ Add More Services' ) )  ?: '+ Add More Services' );
$_sbs_lbl_more2   = esc_html( trim( (string) get_option( 'yatoon_addmore2_btn_label', '+ Add More Services' ) )  ?: '+ Add More Services' );
$_sbs_lbl_confirm = esc_html( trim( (string) get_option( 'yatoon_confirm_btn_label',  'Confirm Booking' ) )      ?: '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.', 'yatoon-booking-system' ));
$_sbs_success_deposit_text = get_option('yatoon_success_deposit_text', __( 'Your deposit is recorded and applied to your visit.', 'yatoon-booking-system' ));
$_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.', 'yatoon-booking-system' ));
$_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); ?> yatoon-booking-mode-<?php echo esc_attr( $atts['mode'] ?? 'standard' ); ?><?php echo $yatoon_test_mode_active ? ' yatoon-test-mode' : ''; ?>" data-preselect-service="<?php echo esc_attr( absint( $atts['service_id'] ?? 0 ) ); ?>" data-preselect-staff="<?php echo esc_attr( absint( $atts['staff_id'] ?? 0 ) ); ?>" data-preselect-category="<?php echo esc_attr( sanitize_text_field( $atts['category'] ?? '' ) ); ?>">
    <?php if ($yatoon_test_mode_active) : ?>
        <div class="yatoon-test-ribbon"><?php esc_html_e( 'Test booking mode', 'yatoon-booking-system' ); ?></div>
    <?php endif; ?>
    <!--
      4.5.0 accessibility: this wizard swaps its whole visible panel on every
      step change and reports validation failures by injecting a .sbs-error
      div. A sighted user sees both instantly; a screen reader user previously
      got no announcement for either, because neither the panel nor the error
      lives in a live region. One polite region here, updated by the step
      router and the error path in frontend.js, covers both without the
      chattiness of marking every panel aria-live.
    -->
    <div id="sbs-a11y-status" class="screen-reader-text" role="status" aria-live="polite" aria-atomic="true"></div>
    <div id="sbs-a11y-alert" class="screen-reader-text" role="alert" aria-live="assertive" aria-atomic="true"></div>
    <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 sbs-progress-bar-reserved" style="display:none;" role="navigation" aria-label="<?php esc_attr_e( 'Booking steps', 'yatoon-booking-system' ); ?>">
                <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"><?php esc_html_e( 'Service', 'yatoon-booking-system' ); ?></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"><?php esc_html_e( 'Options', 'yatoon-booking-system' ); ?></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"><?php esc_html_e( 'Staff', 'yatoon-booking-system' ); ?></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"><?php esc_html_e( 'Date & Time', 'yatoon-booking-system' ); ?></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"><?php esc_html_e( 'Details', 'yatoon-booking-system' ); ?></span>
                </button>
            </div>

            <!-- My Appointments top banner -->
            <?php
            // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
            $portal_banner_enabled = '1' === (string) get_option('yatoon_show_portal_banner', '1');
            $portal_url            = class_exists( 'YATOON_Customer_Portal' ) ? YATOON_Customer_Portal::portal_url() : get_option('yatoon_portal_url', '');
            $portal_label          = get_option('yatoon_portal_label', 'My Appointments');
            $portal_prompt         = class_exists( 'YATOON_Apple_Identity' ) ? YATOON_Apple_Identity::customer_banner_prompt() : __( 'Your appointments', 'yatoon-booking-system' );
            $portal_new_tab        = get_option('yatoon_portal_new_tab', '0');
            $portal_customer       = class_exists( 'YATOON_Customer_Portal' ) && YATOON_Customer_Portal::get_instance() ? (array) YATOON_Customer_Portal::get_instance()->current_customer() : array();
            $portal_return_url     = ( is_ssl() ? 'https://' : 'http://' ) . sanitize_text_field( wp_unslash( $_SERVER['HTTP_HOST'] ?? '' ) ) . sanitize_text_field( wp_unslash( $_SERVER['REQUEST_URI'] ?? '/' ) );
            $portal_signin_menu    = class_exists( 'YATOON_Apple_Identity' ) && empty( $portal_customer ) ? YATOON_Apple_Identity::customer_menu_html( $portal_return_url, $portal_url ) : '';
            $portal_banner_visible = $portal_banner_enabled && ( $portal_signin_menu || ( $portal_url && $portal_customer ) );
            // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
            if ($portal_banner_visible) : ?>
            <div class="sbs-portal-banner">
                <div class="sbs-portal-banner-copy">
                    <strong class="sbs-portal-banner-text"><?php echo esc_html( $portal_customer ? sprintf( __( 'Welcome back, %s', 'yatoon-booking-system' ), ! empty( $portal_customer['name'] ) ? $portal_customer['name'] : __( 'there', 'yatoon-booking-system' ) ) : $portal_prompt ); ?></strong>
                    <span class="sbs-portal-banner-subtext"><?php echo esc_html( $portal_customer ? __( 'View and manage your appointments.', 'yatoon-booking-system' ) : YATOON_Apple_Identity::customer_banner_subtext( $portal_url ) ); ?></span>
                </div>
                <?php if ( $portal_signin_menu ) : ?>
                    <?php echo $portal_signin_menu; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- escaped by helper. ?>
                <?php else : ?>
                    <div class="sbs-portal-banner-actions">
                        <a href="<?php echo esc_url($portal_url); ?>" class="sbs-portal-banner-link sbs-portal-manage-link">&#128100; <?php echo esc_html( $portal_label ); ?> &rarr;</a>
                        <form class="sbs-portal-banner-signout-form" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
                            <input type="hidden" name="action" value="yatoon_portal_logout_return">
                            <input type="hidden" name="return_url" value="<?php echo esc_url( $portal_return_url ); ?>">
                            <?php wp_nonce_field( 'yatoon_portal_logout_return' ); ?>
                            <button type="submit" class="sbs-portal-banner-signout" title="<?php esc_attr_e( 'Sign out and use a different customer account', 'yatoon-booking-system' ); ?>"><?php esc_html_e( 'Sign out', 'yatoon-booking-system' ); ?></button>
                        </form>
                    </div>
                <?php endif; ?>
            </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" role="group" aria-labelledby="sbs-step-1-label" aria-hidden="false"><span id="sbs-step-1-label" class="screen-reader-text"><?php esc_html_e( 'Choose service', 'yatoon-booking-system' ); ?></span>
                <?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(
                                            /* translators: %d: Maximum number of guests. */
                                            esc_html__( 'up to %d guests', 'yatoon-booking-system' ),
                                            $_sbs_max_guests
                                        );
                                    /* translators: %s: Guest-count description, such as "up to 2 guests". */
                                    printf( esc_html__( 'Add %s; everyone starts together', 'yatoon-booking-system' ), esc_html( $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', __('Not sure what to book?', 'yatoon-booking-system')));
                // Exact historical option values; comparison keys are intentionally not translated.
                if (in_array($yatoon_ai_frontend_title, array('AI Style Assistant', 'Need help choosing?', 'Need Help Booking? Let AI Help'), true)) { $yatoon_ai_frontend_title = __('Not sure what to book?', 'yatoon-booking-system'); }
                if ($yatoon_ai_frontend_title === '') { $yatoon_ai_frontend_title = __('Not sure what to book?', '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', __('Please do not include medical, payment, or other sensitive information.', 'yatoon-booking-system')));
                if (in_array($yatoon_ai_privacy_note, array('Privacy note: Please avoid sensitive, medical, or payment details.', 'For your privacy, please avoid sharing sensitive or payment information.'), true)) { $yatoon_ai_privacy_note = __('Please do not include medical, payment, or other sensitive information.', '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'); ?>"><?php esc_html_e( '&times;', 'yatoon-booking-system' ); ?></button>
                            <span><?php esc_html_e('Describe the look you want, your occasion, length, budget, or concerns. We will match you with 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" aria-label="<?php esc_attr_e( 'Describe the look you want', 'yatoon-booking-system' ); ?>" 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; ?>
                    <p class="yatoon-ai-provider-consent"><label><input type="checkbox" id="yatoon-ai-provider-consent" value="1"> <?php esc_html_e('I agree that this request may be sent to the AI provider configured by this site. I have not included medical, payment, or account details.', 'yatoon-booking-system'); ?></label></p>
                <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('Find My Best Match', '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">
                        <?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)); ?>">
                                <?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">
                            <?php esc_html_e( 'More &#8964;', 'yatoon-booking-system' ); ?>
                        </button>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="sbs-service-search-wrap">
                    <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">
                    <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;"><?php esc_html_e( '&times;', 'yatoon-booking-system' ); ?></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">
                                        <?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
                        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 = '';

                        // 4.6.2: LCP. Every service-card image shipped loading="lazy",
                        // including the two or three that are inside the first viewport on
                        // step 1. A lazy image above the fold is strictly worse than an
                        // eager one: the browser must finish layout before it will even
                        // start the request, which pushes the largest contentful paint out
                        // by a full round trip. The first cards are marked eager +
                        // fetchpriority="high" below; everything past the fold stays lazy.
                        $yatoon_eager_cards = 3;
                        $yatoon_card_index  = 0;

                        // 4.6.2: srcset. The markup declared width="640" and no srcset, so
                        // every device downloaded the full-size file for a thumbnail that
                        // never renders wider than ~112 CSS px. Whether we can fix that
                        // depends on where the URL came from, and services.image_url holds
                        // both kinds:
                        //   - Square catalogue sync (class-yatoon-cron.php ~line 610) stores
                        //     the raw Square CDN URL. That file is not in this site's media
                        //     library, WordPress has no resized variants of it, and no
                        //     srcset can be generated for it. Those cards get the
                        //     eager/fetchpriority treatment only.
                        //   - The admin media picker (class-yatoon-admin.php ~line 4597)
                        //     stores a local uploads URL. Those DO have generated sizes, so
                        //     a real srcset is available.
                        // The uploads base URL is read once here rather than per card, and
                        // the prefix test below keeps attachment_url_to_postid() - which is
                        // an uncached DB query - off every Square URL. Local URLs still cost
                        // one query each on a cold object cache; that is paid once per
                        // distinct image and buys back a full-size download per card on
                        // mobile, which is the far larger number.
                        $yatoon_uploads_base = '';
                        if ( function_exists( 'wp_get_upload_dir' ) ) {
                            $yatoon_upload_dir   = wp_get_upload_dir();
                            $yatoon_uploads_base = $yatoon_upload_dir['baseurl'] ?? '';
                        }
                        $yatoon_srcset_cache = array();

                        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 <?php echo empty($service->image_url) ? 'yatoon-service-no-image' : 'yatoon-service-has-image'; ?>"
                                 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-tax-rate="<?php echo esc_attr( null === $service->tax_rate ? '' : $service->tax_rate ); ?>"
                                 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->require_policy)) : ?>
                                                    <span><?php esc_html_e( 'Policy applies', 'yatoon-booking-system' ); ?></span>
                                                <?php endif; ?>
                                                <?php if (!empty($service->require_consent)) : ?>
                                                    <span><?php esc_html_e( 'Consent required', 'yatoon-booking-system' ); ?></span>
                                                <?php endif; ?>
                                                <?php if ($yatoon_deposit_on) : ?>
                                                    <span><?php esc_html_e( 'Deposit ready', 'yatoon-booking-system' ); ?></span>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                        <!-- Right side: image + Add button -->
                                        <div class="sbs-service-right-col">
                                            <div class="sbs-service-img-wrap">
                                                <?php if (!empty($service->image_url)) : ?>
                                                    <?php
                                                    $yatoon_card_index++;
                                                    $yatoon_img_eager = ( $yatoon_card_index <= $yatoon_eager_cards );

                                                    // Only local uploads can have a srcset - see the note above the loop.
                                                    $yatoon_img_srcset = '';
                                                    if ( $yatoon_uploads_base && 0 === strpos( $service->image_url, $yatoon_uploads_base ) ) {
                                                        if ( array_key_exists( $service->image_url, $yatoon_srcset_cache ) ) {
                                                            $yatoon_img_srcset = $yatoon_srcset_cache[ $service->image_url ];
                                                        } else {
                                                            $yatoon_att_id = attachment_url_to_postid( $service->image_url );
                                                            $yatoon_img_srcset = $yatoon_att_id
                                                                ? (string) wp_get_attachment_image_srcset( $yatoon_att_id, 'full' )
                                                                : '';
                                                            $yatoon_srcset_cache[ $service->image_url ] = $yatoon_img_srcset;
                                                        }
                                                    }
                                                    // sizes is written by hand rather than taken from
                                                    // wp_get_attachment_image_sizes(), which would emit
                                                    // "(max-width: 640px) 100vw, 640px" - a claim that the
                                                    // thumbnail fills the viewport, which would undo the
                                                    // saving. The real slot is .sbs-service-img-wrap:
                                                    // clamp(78px, 24vw, 112px), 92px on desktop, smaller on
                                                    // narrow phones. 112px is the widest it ever gets.
                                                    ?>
                                                    <img src="<?php echo esc_url($service->image_url); ?>"
                                                         alt="<?php echo esc_attr($service->name); ?>"
                                                         width="640" height="480" decoding="async"
                                                         <?php if ( $yatoon_img_srcset ) : ?>srcset="<?php echo esc_attr( $yatoon_img_srcset ); ?>" sizes="(max-width: 600px) 96px, 112px"
                                                         <?php endif; ?>loading="<?php echo $yatoon_img_eager ? 'eager' : 'lazy'; ?>"<?php echo $yatoon_img_eager ? ' fetchpriority="high"' : ''; ?>>
                                                <?php else : ?>
                                                    <div class="sbs-service-image-fallback" aria-hidden="true">
                                                        <span><?php echo esc_html( mb_substr( trim( (string) $service->name ), 0, 1 ) ); ?></span>
                                                    </div>
                                                <?php endif; ?>
                                                <?php if (!empty($service->is_featured)) : ?>
                                                    <span class="sbs-service-popular-label"><?php echo esc_html($_sbs_popular_label); ?></span>
                                                <?php endif; ?>
                                            </div>
                                            <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" role="group" aria-labelledby="sbs-step-2-label" aria-hidden="true"><span id="sbs-step-2-label" class="screen-reader-text"><?php esc_html_e( 'Choose options', 'yatoon-booking-system' ); ?></span>
                <h2 class="sbs-step-section-title"><?php esc_html_e('Choose an option', 'yatoon-booking-system'); ?></h2>
                <div class="sbs-options-container">
                    <div class="sbs-loading"><span class="spinner"></span> <?php esc_html_e( 'Loading options...', 'yatoon-booking-system' ); ?></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" role="group" aria-labelledby="sbs-step-3-label" aria-hidden="true"><span id="sbs-step-3-label" class="screen-reader-text"><?php esc_html_e( 'Choose staff', 'yatoon-booking-system' ); ?></span>
                <h2><?php esc_html_e( 'Select Staff Member', 'yatoon-booking-system' ); ?></h2>
                <div class="sbs-staff-grid">
                    <div class="sbs-loading"><span class="spinner"></span> <?php esc_html_e( 'Loading staff...', 'yatoon-booking-system' ); ?></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" role="group" aria-labelledby="sbs-step-4-label" aria-hidden="true"><span id="sbs-step-4-label" class="screen-reader-text"><?php esc_html_e( 'Choose date and time', 'yatoon-booking-system' ); ?></span>
                <h2><?php esc_html_e( 'Select Date &amp; Time', 'yatoon-booking-system' ); ?></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"><?php esc_html_e( 'Week', 'yatoon-booking-system' ); ?></button>
                            <button type="button" class="sbs-view-toggle" data-view="month"><?php esc_html_e( 'Month', 'yatoon-booking-system' ); ?></button>
                        </div>
                        <div class="sbs-week-view active">
                            <div class="sbs-week-navigation">
                                <button type="button" class="sbs-week-prev" aria-label="<?php echo esc_attr__( 'Previous week', 'yatoon-booking-system' ); ?>">&lt;</button>
                                <span class="sbs-week-range"></span>
                                <button type="button" class="sbs-week-next" aria-label="<?php echo esc_attr__( 'Next week', 'yatoon-booking-system' ); ?>">&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"><?php esc_html_e( 'Select a date above to see available times', 'yatoon-booking-system' ); ?></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" role="group" aria-labelledby="sbs-step-5-label" aria-hidden="true"><span id="sbs-step-5-label" class="screen-reader-text"><?php esc_html_e( 'Review and confirm', 'yatoon-booking-system' ); ?></span>
                <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>
                </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">
                        <?php $yatoon_identity_customer = class_exists( 'YATOON_Customer_Portal' ) && YATOON_Customer_Portal::get_instance() ? (array) YATOON_Customer_Portal::get_instance()->current_customer() : array(); ?>
                        <?php if ( empty( $yatoon_identity_customer ) && class_exists( 'YATOON_Apple_Identity' ) ) { echo YATOON_Apple_Identity::customer_menu_html( $portal_return_url, $portal_url, true ); } // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- escaped by helper. ?>
                        <label for="sbs-customer-name"><?php esc_html_e( 'Your Name *', 'yatoon-booking-system' ); ?></label>
                        <input type="text" id="sbs-customer-name" name="customer_name" value="<?php echo esc_attr( $yatoon_identity_customer['name'] ?? '' ); ?>" required>
                    </div>
                    <div class="sbs-form-group">
                        <label for="sbs-customer-email"><?php esc_html_e( 'Email *', 'yatoon-booking-system' ); ?></label>
                        <input type="email" id="sbs-customer-email" name="customer_email" value="<?php echo esc_attr( $yatoon_identity_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" value="<?php echo esc_attr( $yatoon_identity_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" value="<?php echo esc_attr( $yatoon_identity_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"><?php esc_html_e( 'Comments or Requests', 'yatoon-booking-system' ); ?></label>
                        <textarea id="sbs-customer-notes" name="notes" rows="3" placeholder="<?php echo esc_attr__( 'Any special requests, notes, or preferences?', 'yatoon-booking-system' ); ?>"></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=""><?php esc_html_e( '- Select -', 'yatoon-booking-system' ); ?></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"><?php esc_html_e( 'Custom', 'yatoon-booking-system' ); ?></button>
                            <button type="button" class="sbs-tip-btn" data-pct="0"><?php esc_html_e( 'No tip', 'yatoon-booking-system' ); ?></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" aria-label="<?php esc_attr_e( 'Custom tip amount', 'yatoon-booking-system' ); ?>" placeholder="0.00" style="width:100px;padding:7px 10px;border:1px solid var(--sbs-line-strong);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:var(--sbs-muted);"></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" aria-label="<?php esc_attr_e( 'Gift card code', 'yatoon-booking-system' ); ?>" placeholder="<?php echo esc_attr__( 'Enter gift card code (e.g. A3B7-K9P2-X1Z4)', 'yatoon-booking-system' ); ?>" 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
                    // 4.6.2: the policy and consent boxes below used to carry their palette
                    // inline: #fde68a / #fffbeb / #92400e / #78350f on the policy box and
                    // #e5e7eb / #f9fafb / #374151 on the consent box. Inline styles sit above
                    // every stylesheet in the cascade, so nothing a merchant configured could
                    // reach them - set the brand accent to blue and the cancellation notice
                    // was still yellow. They now read --sbs-warn-* / --sbs-* tokens declared
                    // in assets/css/frontend.css.
                    // The warning palette deliberately has its OWN tokens rather than being
                    // derived from --primary-color: a warning that repaints itself in the
                    // merchant's brand colour stops reading as a warning. Values are unchanged,
                    // so this moves ownership without moving a pixel.
                    ?>
                    <?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 var(--sbs-warn-line);border-radius:8px;padding:14px;background:var(--sbs-warn-bg);display:none;">
                        <h3 style="font-size:16px;margin:0 0 8px;color:var(--sbs-warn-ink);"><?php echo esc_html($_sbs_policy_title); ?></h3>
                        <div style="font-size:13px;line-height:1.6;color:var(--sbs-warn-ink-2);background:var(--sbs-surface);border:1px solid var(--sbs-warn-line);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:var(--sbs-ink);">
                            <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 var(--sbs-line);border-radius:8px;padding:14px;background:var(--sbs-surface-alt);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:var(--sbs-ink-2);background:var(--sbs-surface);border:1px solid var(--sbs-line);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:var(--sbs-ink);">
                            <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; ?>
                    <?php
                    // -- 4.6.1 Card on file ---------------------------------
                    // Shown only when the salon has switched it on and Stripe
                    // is configured. The card is collected by Stripe Elements
                    // in an iframe, so no card data touches this page or this
                    // server -- what comes back is a token we can charge later.
                    $yatoon_cof_on = class_exists( 'YATOON_Card_On_File' ) && YATOON_Card_On_File::is_enabled();
                    if ( $yatoon_cof_on ) :
                        $yatoon_cof_required = 'required' === YATOON_Card_On_File::capture_mode();
                        ?>
                        <div class="sbs-form-group yatoon-cof-box" id="yatoon-cof-box"
                             data-required="<?php echo esc_attr( $yatoon_cof_required ? '1' : '0' ); ?>">
                            <h3 class="yatoon-cof-title"><?php echo $yatoon_cof_required
                                ? esc_html__( 'Card to hold your appointment', 'yatoon-booking-system' )
                                : esc_html__( 'Save a card (optional)', 'yatoon-booking-system' ); ?></h3>
                            <p class="yatoon-cof-policy"><?php echo esc_html( YATOON_Card_On_File::policy_text() ); ?></p>
                            <div id="yatoon-cof-element" class="yatoon-cof-element"></div>
                            <label class="yatoon-cof-consent">
                                <input type="checkbox" id="yatoon-cof-consent" name="cof_consent" value="1">
                                <span><?php esc_html_e( 'I agree to the cancellation policy above and authorise this card to be charged under it.', 'yatoon-booking-system' ); ?></span>
                            </label>
                            <button type="button" class="sbs-btn yatoon-cof-save" id="yatoon-cof-save"><?php esc_html_e( 'Save card', 'yatoon-booking-system' ); ?></button>
                            <p class="yatoon-cof-status" id="yatoon-cof-status" role="status" aria-live="polite"></p>
                            <input type="hidden" name="cof_saved" id="yatoon-cof-saved" value="0">
                        </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'))); ?>"
                             width="72" height="72" decoding="async" loading="lazy"
                             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> <span id="sbs-success-booking-word"><?php esc_html_e( 'Booking', 'yatoon-booking-system' ); ?></span> <?php esc_html_e( 'Confirmed!', 'yatoon-booking-system' ); ?></h3>
                    <p><?php esc_html_e( 'You\'re booked. Confirmation', 'yatoon-booking-system' ); ?> <span id="sbs-success-email-word">email</span> <span id="sbs-success-have-word">has</span> <?php esc_html_e( 'been sent to your email address.', 'yatoon-booking-system' ); ?></p>
                    <div id="sbs-success-booking-summary" class="sbs-success-booking-summary" style="display:none;"></div>
                    <?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: var(--sbs-muted); 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): ?>
                            <?php
                            // 4.6.2: was style="color:#ec4899" - the plugin's default pink, hard-coded
                            // into the success screen, so this link stayed pink no matter what accent
                            // the merchant picked. --primary-color is the same variable the location
                            // accent block at the top of this file writes into.
                            ?>
                            <a href="<?php echo esc_url($biz_website); ?>" target="_blank" style="color: var(--primary-color);"><?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"><?php esc_html_e( 'Get directions', 'yatoon-booking-system' ); ?></a>
                    <?php endif; ?>
                    <div id="sbs-success-actions" class="sbs-success-actions" style="display:none;"></div>
                    <div class="sbs-success-cal-row" id="sbs-success-cal-row" style="display:none;">
                        <p class="sbs-success-cal-label"><?php esc_html_e('Add to your calendar', 'yatoon-booking-system'); ?></p>
                        <div class="sbs-success-cal-btns">
                            <a id="sbs-cal-google" href="#" target="_blank" rel="noopener" class="sbs-cal-btn sbs-cal-google">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M3 9h18" stroke="currentColor" stroke-width="1.8"/><path d="M8 2v4M16 2v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                                <?php esc_html_e('Google Calendar', 'yatoon-booking-system'); ?>
                            </a>
                            <a id="sbs-cal-ics" href="#" class="sbs-cal-btn sbs-cal-apple">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M3 9h18" stroke="currentColor" stroke-width="1.8"/><path d="M8 2v4M16 2v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                                <?php esc_html_e('Apple / Outlook (.ics)', 'yatoon-booking-system'); ?>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right sidebar summary -->
        <div class="sbs-booking-sidebar">
            <div id="sbs-step-accordion" class="sbs-step-accordion" aria-label="<?php esc_attr_e( 'Booking steps', 'yatoon-booking-system' ); ?>"></div>

            <div class="sbs-sidebar-header">
                <h3 class="sbs-sidebar-title"><?php esc_html_e( 'Appointment summary', 'yatoon-booking-system' ); ?></h3>
                <button type="button" id="sbs-sidebar-edit-cart" class="sbs-sidebar-edit-cart-btn" style="display:none;">
                    <?php esc_html_e( 'Edit Cart', 'yatoon-booking-system' ); ?>
                </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"><?php esc_html_e( 'No services yet', 'yatoon-booking-system' ); ?></p>
                <p class="sbs-sidebar-empty-sub"><?php esc_html_e( 'Select a service from the list to see your booking summary here.', 'yatoon-booking-system' ); ?></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 class="sbs-summary-copy">
                        <div class="sbs-summary-label"><?php esc_html_e( 'Service', 'yatoon-booking-system' ); ?></div>
                        <span id="sbs-summary-service" class="sbs-summary-muted"><?php esc_html_e( 'No services added yet', 'yatoon-booking-system' ); ?></span>
                    </div>
                    <div class="sbs-summary-actions">
                        <button type="button" class="sbs-summary-edit-btn" data-goto="1"
                                id="sbs-edit-service-btn" style="display:none;" title="<?php echo esc_attr__( 'Change service', 'yatoon-booking-system' ); ?>" aria-label="<?php echo esc_attr__( 'Change service', 'yatoon-booking-system' ); ?>">&#9998;</button>
                    </div>
                </div>

                <!-- Options row -->
                <div class="sbs-summary-item" id="sbs-summary-options-container" style="display:none;">
                    <div class="sbs-summary-copy">
                        <div class="sbs-summary-label"><?php esc_html_e( 'Options', 'yatoon-booking-system' ); ?></div>
                        <span id="sbs-summary-options">-</span>
                    </div>
                    <div class="sbs-summary-actions">
                        <button type="button" class="sbs-summary-edit-btn" data-goto="2" title="<?php echo esc_attr__( 'Change options', 'yatoon-booking-system' ); ?>" aria-label="<?php echo esc_attr__( 'Change options', 'yatoon-booking-system' ); ?>">&#9998;</button>
                    </div>
                </div>

                <!-- Staff row -->
                <div class="sbs-summary-item" id="sbs-summary-row-staff">
                    <div class="sbs-summary-copy">
                        <div class="sbs-summary-label"><?php esc_html_e( 'Staff', 'yatoon-booking-system' ); ?></div>
                        <span id="sbs-summary-staff" class="sbs-summary-muted"><?php esc_html_e( 'Not selected', 'yatoon-booking-system' ); ?></span>
                    </div>
                    <div class="sbs-summary-actions">
                        <button type="button" class="sbs-summary-edit-btn" data-goto="3"
                                id="sbs-edit-staff-btn" style="display:none;" title="<?php echo esc_attr__( 'Change staff', 'yatoon-booking-system' ); ?>" aria-label="<?php echo esc_attr__( 'Change staff', 'yatoon-booking-system' ); ?>">&#9998;</button>
                    </div>
                </div>

                <!-- Date & Time row -->
                <div class="sbs-summary-item" id="sbs-summary-row-datetime">
                    <div class="sbs-summary-copy">
                        <div class="sbs-summary-label"><?php esc_html_e( 'Date &amp; Time', 'yatoon-booking-system' ); ?></div>
                        <span id="sbs-summary-datetime" class="sbs-summary-muted"><?php esc_html_e( 'Not selected', 'yatoon-booking-system' ); ?></span>
                    </div>
                    <div class="sbs-summary-actions">
                        <button type="button" class="sbs-summary-edit-btn" data-goto="4"
                                id="sbs-edit-datetime-btn" style="display:none;" title="<?php echo esc_attr__( 'Change date/time', 'yatoon-booking-system' ); ?>" aria-label="<?php echo esc_attr__( 'Change date and time', 'yatoon-booking-system' ); ?>">&#9998;</button>
                    </div>
                </div>

                <!-- Duration -->
                <div class="sbs-summary-item" id="sbs-summary-row-duration">
                    <div class="sbs-summary-copy">
                        <div class="sbs-summary-label"><?php esc_html_e( 'Appointment Length', 'yatoon-booking-system' ); ?></div>
                        <span id="sbs-summary-duration">-</span>
                    </div>
                </div>

                <!-- Total -->
                <div class="sbs-summary-item sbs-summary-total" id="sbs-summary-row-total">
                    <strong><?php esc_html_e( 'Total', 'yatoon-booking-system' ); ?></strong>
                    <span id="sbs-summary-total">$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;"><?php esc_html_e( 'Times synced in real time with Square', 'yatoon-booking-system' ); ?></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="<?php echo esc_attr__( 'Selected services cart', 'yatoon-booking-system' ); ?>"><span class="sbs-cart-icon" aria-hidden="true"></span><span class="sbs-cart-count">0</span></div>
    <div id="sbs-cart-info" role="button" tabindex="0" aria-label="<?php echo esc_attr__( 'View selected services', 'yatoon-booking-system' ); ?>">
        <div id="sbs-cart-name"><?php esc_html_e( 'Selected services', 'yatoon-booking-system' ); ?></div>
        <div id="sbs-cart-meta"><?php esc_html_e( 'Tap to view cart', 'yatoon-booking-system' ); ?></div>
    </div>
    <button type="button" id="sbs-cart-expand-btn" aria-label="<?php echo esc_attr__( 'View booking summary', 'yatoon-booking-system' ); ?>">&#8964;</button>
    <button type="button" id="sbs-cart-next-btn" style="display:none;"><?php esc_html_e( 'Next', 'yatoon-booking-system' ); ?></button>
</div>

<?php if (get_option('yatoon_text_us_enabled', '1') === '1') : ?>
<?php
// 4.6.2: the Text-Us and waitlist modals below were the densest cluster of inline
// hex in this template (greys, the #ef4444 required-field asterisks, the #10B981
// confirmation disc). All swapped for --sbs-* tokens. These modals render OUTSIDE
// .sbs-booking-container, which is why the tokens are declared on :root in
// frontend.css rather than scoped to the container.
// Two literals are kept on purpose:
//   - `color:#fff` on the green confirmation disc: white here is the contrast
//     partner of the disc's own background, not a brand colour. Tokenising it
//     invites someone to "theme" it and break the pairing.
//   - `accent-color:var(--primary-color,#ec4899)` on the checkboxes/radios: those
//     already resolve through the brand variable; the hex is only a fallback.
?>
<!-- Text Us floating button (desktop + mobile) -->
<button type="button" id="sbs-text-us-btn" aria-label="<?php echo esc_attr__( 'Text us', 'yatoon-booking-system' ); ?>">
    <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><?php esc_html_e( 'Text us', 'yatoon-booking-system' ); ?></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:var(--sbs-surface-mute);">
                <?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); ?>" width="96" height="96" decoding="async" loading="lazy" style="width:100%; height:100%; object-fit:cover;">
                <?php else : ?>
                    <span style="font-size:20px; font-weight:bold; color:var(--sbs-faint);">
                        <?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:var(--sbs-muted);"><?php esc_html_e( 'We\'ll respond as soon as we can', 'yatoon-booking-system' ); ?></p>
            </div>
            <button type="button" class="sbs-text-modal-close" aria-label="<?php echo esc_attr__( 'Close', 'yatoon-booking-system' ); ?>"><?php esc_html_e( '&times;', 'yatoon-booking-system' ); ?></button>
        </div>
        <form id="sbs-text-us-form" class="sbs-text-modal-body">
            <input type="text" name="name" aria-label="<?php esc_attr_e( 'Your name', 'yatoon-booking-system' ); ?>" placeholder="<?php echo esc_attr__( 'Name', 'yatoon-booking-system' ); ?>" required>
            <input type="tel" name="phone" aria-label="<?php esc_attr_e( 'Phone number', 'yatoon-booking-system' ); ?>" placeholder="<?php echo esc_attr__( 'Phone number', 'yatoon-booking-system' ); ?>" required>
            <textarea name="message" aria-label="<?php esc_attr_e( 'Your message', 'yatoon-booking-system' ); ?>" placeholder="<?php echo esc_attr__( 'Message', 'yatoon-booking-system' ); ?>" rows="4" required></textarea>
            <button type="submit" class="sbs-text-submit-btn"><?php esc_html_e( 'Send message', 'yatoon-booking-system' ); ?></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:var(--sbs-success-solid); 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;"><?php esc_html_e( 'Message sent!', 'yatoon-booking-system' ); ?></h3>
                <p style="margin:0; color:var(--sbs-muted); font-size:14px;"><?php esc_html_e( 'We\'ll get back to you soon.', 'yatoon-booking-system' ); ?></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:var(--sbs-surface-mute); 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); ?>" width="96" height="96" decoding="async" loading="lazy" style="width:100%; height:100%; object-fit:cover;">
                <?php else : ?>
                    <span style="font-size:20px; font-weight:bold; color:var(--sbs-faint);"><?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 esc_html_e( 'Join the Waitlist', 'yatoon-booking-system' ); ?></h3>
                <p style="margin:2px 0 0; font-size:12px; color:var(--sbs-muted);"><?php esc_html_e( 'We\'ll notify you when a spot opens up', 'yatoon-booking-system' ); ?></p>
            </div>
            <button type="button" class="sbs-text-modal-close" aria-label="<?php echo esc_attr__( 'Close', 'yatoon-booking-system' ); ?>"><?php esc_html_e( '&times;', 'yatoon-booking-system' ); ?></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:var(--sbs-muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;"><?php esc_html_e( 'Your Information', 'yatoon-booking-system' ); ?></p>
                <input type="text"  name="name"  aria-label="<?php esc_attr_e( 'Full name', 'yatoon-booking-system' ); ?>" placeholder="<?php echo esc_attr__( 'Full name *', 'yatoon-booking-system' ); ?>"    required style="margin-bottom:8px;">
                <input type="email" name="email" aria-label="<?php esc_attr_e( 'Email address', 'yatoon-booking-system' ); ?>" placeholder="<?php echo esc_attr__( 'Email address *', 'yatoon-booking-system' ); ?>" required style="margin-bottom:8px;">
                <input type="tel"   name="phone" aria-label="<?php esc_attr_e( 'Phone number', 'yatoon-booking-system' ); ?>" placeholder="<?php echo esc_attr__( 'Phone number *', 'yatoon-booking-system' ); ?>"  required>
            </div>

            <!-- Service Multi-Select -->
            <div style="margin-bottom:16px;">
                <p style="font-size:12px; font-weight:600; color:var(--sbs-muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;"><?php esc_html_e( 'Services you\'re interested in', 'yatoon-booking-system' ); ?> <span style="color:var(--sbs-danger);">*</span></p>
                <p style="font-size:12px; color:var(--sbs-faint); margin:0 0 10px;"><?php esc_html_e( 'Select one or more services', 'yatoon-booking-system' ); ?></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
                    $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:var(--sbs-faint); 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 var(--sbs-line); 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:var(--sbs-muted);">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:var(--sbs-muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;"><?php esc_html_e( 'Preferred Date', 'yatoon-booking-system' ); ?> <span style="color:var(--sbs-danger);">*</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 var(--sbs-line); 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:var(--sbs-ink-2);">
                    <input type="checkbox" name="flexible_dates" value="1" checked style="width:16px;height:16px;accent-color:var(--primary-color,#ec4899);">
                    <?php esc_html_e( 'I\'m flexible with dates (7 days)', 'yatoon-booking-system' ); ?>
                </label>
            </div>

            <!-- Time Preference -->
            <div style="margin-bottom:16px;">
                <p style="font-size:12px; font-weight:600; color:var(--sbs-muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;"><?php esc_html_e( 'Preferred Time of Day', 'yatoon-booking-system' ); ?></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 var(--sbs-line); 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:var(--sbs-faint); 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:var(--sbs-ink-2);">
                    <input type="checkbox" name="flexible_times" value="1" checked style="width:16px;height:16px;accent-color:var(--primary-color,#ec4899);">
                    <?php esc_html_e( 'I\'m flexible with times', 'yatoon-booking-system' ); ?>
                </label>
            </div>

            <!-- Notes -->
            <div style="margin-bottom:16px;">
                <p style="font-size:12px; font-weight:600; color:var(--sbs-muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;"><?php esc_html_e( 'Additional notes', 'yatoon-booking-system' ); ?></p>
                <textarea name="notes" aria-label="<?php esc_attr_e( 'Notes for the salon', 'yatoon-booking-system' ); ?>" placeholder="<?php echo esc_attr__( 'Any specific requests or additional info...', 'yatoon-booking-system' ); ?>" rows="3" style="width:100%; padding:10px 12px; border:1.5px solid var(--sbs-line); 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%;"><?php esc_html_e( 'Join Waitlist &rarr;', 'yatoon-booking-system' ); ?></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:var(--sbs-success-solid); 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;"><?php esc_html_e( 'You\'re on the list!', 'yatoon-booking-system' ); ?></h3>
                <p style="margin:0; color:var(--sbs-muted); font-size:14px;"><?php esc_html_e( 'We\'ll contact you as soon as a spot becomes available.', 'yatoon-booking-system' ); ?></p>
            </div>
        </div>
    </div>
</div>
