<?php
/**
 * Product Booking Modal Template - Modern Design
 *
 * @package WahraRentalsBookings
 */

defined('ABSPATH') || exit;

global $product;

if (!$product) {
    return;
}

$product_id = $product->get_id();
$booking_mode = get_post_meta($product_id, '_wahrb_booking_mode', true) ?: 'day';
$base_price = get_post_meta($product_id, '_wahrb_base_price', true) ?: $product->get_price();
$min_duration = get_post_meta($product_id, '_wahrb_min_duration', true) ?: 1;
$max_duration = get_post_meta($product_id, '_wahrb_max_duration', true) ?: 365;
$total_units = get_post_meta($product_id, '_wahrb_total_units', true) ?: 1;
$security_deposit = get_post_meta($product_id, '_wahrb_security_deposit', true);

$currency_symbol = html_entity_decode(get_woocommerce_currency_symbol(), ENT_QUOTES, 'UTF-8');

// Get dynamic colors for this product/vendor
$vendor_id = get_post_field('post_author', $product_id);
$colors = class_exists('WAHRB_Color_Settings') ? WAHRB_Color_Settings::get_all_colors($product_id, $vendor_id) : [
    'header_gradient_start' => '#1e40af',
    'header_gradient_end'   => '#3b82f6',
    'button_primary'        => '#2563eb',
    'button_primary_hover'  => '#1d4ed8',
    'button_secondary'      => '#f1f5f9',
    'accent_color'          => '#10b981',
];

// Get vendor customizable texts (with fallbacks to translated defaults)
$vendor_settings = get_user_meta($vendor_id, '_wahrb_vendor_settings', true) ?: [];
$client_texts = $vendor_settings['client_texts'] ?? [];

$text_book_button = !empty($client_texts['book_button']) ? $client_texts['book_button'] : __('Book Now', 'wahra-rentals-bookings');
$text_modal_title = !empty($client_texts['modal_title']) ? $client_texts['modal_title'] : __('Booking Request', 'wahra-rentals-bookings');
$text_success_title = !empty($client_texts['success_title']) ? $client_texts['success_title'] : __('Request sent!', 'wahra-rentals-bookings');
$text_success_message = !empty($client_texts['success_message']) ? $client_texts['success_message'] : __('The owner will contact you very soon to confirm your booking.', 'wahra-rentals-bookings');
$text_terms = !empty($client_texts['terms_text']) ? $client_texts['terms_text'] : __('I accept the booking terms and conditions', 'wahra-rentals-bookings');
$text_submit_button = !empty($client_texts['submit_button']) ? $client_texts['submit_button'] : __('Send request', 'wahra-rentals-bookings');
?>

<!-- Dynamic Color Variables -->
<?php
$calendar_css_1 = ':root{'
    . '--wahrb-header-start:' . esc_attr($colors['header_gradient_start']) . ';'
    . '--wahrb-header-end:' . esc_attr($colors['header_gradient_end']) . ';'
    . '--wahrb-btn-primary:' . esc_attr($colors['button_primary']) . ';'
    . '--wahrb-btn-primary-hover:' . esc_attr($colors['button_primary_hover']) . ';'
    . '--wahrb-btn-secondary:' . esc_attr($colors['button_secondary']) . ';'
    . '--wahrb-accent:' . esc_attr($colors['accent_color']) . ';'
    . '}';
wp_add_inline_style('wahrb-calendar-styles', $calendar_css_1);
?>

<!-- Booking Card -->
<div class="wahrb-booking-card">
    <div class="wahrb-booking-body">
        <?php if ($booking_mode === 'day' && ($min_duration > 1 || $max_duration < 365)): ?>
            <div class="wahrb-duration-info">
                <?php if ($min_duration > 1): ?>
                    <?php /* translators: %d: minimum number of days */ ?>
                    <span class="wahrb-info-chip"><?php printf(esc_html__('Min %d days', 'wahra-rentals-bookings'), absint($min_duration)); ?></span>
                <?php endif; ?>
                <?php if ($max_duration < 365): ?>
                    <?php /* translators: %d: maximum number of days */ ?>
                    <span class="wahrb-info-chip"><?php printf(esc_html__('Max %d days', 'wahra-rentals-bookings'), absint($max_duration)); ?></span>
                <?php endif; ?>
            </div>
        <?php elseif ($booking_mode === 'slot'): 
            $min_hours = get_post_meta($product_id, '_wahrb_min_duration_hours', true) ?: 1;
            $max_hours = get_post_meta($product_id, '_wahrb_max_duration_hours', true) ?: 8;
        ?>
            <div class="wahrb-duration-info">
                <?php if ($min_hours > 1): ?>
                    <?php /* translators: %d: minimum number of hours */ ?>
                    <span class="wahrb-info-chip"><?php printf(esc_html__('Min %d hours', 'wahra-rentals-bookings'), absint($min_hours)); ?></span>
                <?php endif; ?>
                <?php if ($max_hours < 24): ?>
                    <?php /* translators: %d: maximum number of hours */ ?>
                    <span class="wahrb-info-chip"><?php printf(esc_html__('Max %d hours', 'wahra-rentals-bookings'), absint($max_hours)); ?></span>
                <?php endif; ?>
            </div>
        <?php elseif ($booking_mode === 'service'):
            $service_duration = get_post_meta($product_id, '_wahrb_service_duration_minutes', true) ?: 60;
        ?>
            <div class="wahrb-duration-info">
                <?php /* translators: %d: session duration in minutes */ ?>
                <span class="wahrb-info-chip"><?php printf(esc_html__('Duration: %d min', 'wahra-rentals-bookings'), absint($service_duration)); ?></span>
            </div>
        <?php endif; ?>
        
        <button type="button" class="wahrb-cta-button wahrb-open-modal" data-product-id="<?php echo esc_attr($product_id); ?>">
            <span class="wahrb-cta-text"><?php echo esc_html($text_book_button); ?></span>
            <span class="wahrb-cta-arrow">&rarr;</span>
        </button>

        <?php if ($security_deposit && $security_deposit > 0): ?>
            <div class="wahrb-security-badge">
                <?php /* translators: %s: security deposit amount */ ?>
                <span><?php printf(wp_kses_post(__('Security deposit: %s', 'wahra-rentals-bookings')), wp_kses_post(wc_price($security_deposit))); ?></span>
            </div>
        <?php endif; ?>
    </div>
    
    <div class="wahrb-booking-footer">
        <div class="wahrb-trust-signals">
            <span class="wahrb-trust-item"><?php esc_html_e('Quick response', 'wahra-rentals-bookings'); ?></span>
            <span class="wahrb-trust-item"><?php esc_html_e('Secure payment', 'wahra-rentals-bookings'); ?></span>
        </div>
    </div>
</div>

<!-- Modern Modal -->
<div class="wahrb-modal-overlay" id="wahrb-booking-modal" style="display: none;">
    <div class="wahrb-modal-modern">
        <!-- Modal Header with Gradient -->
        <div class="wahrb-modal-top">
            <div class="wahrb-modal-brand">
                <span class="wahrb-modal-icon">🏠</span>
                <div>
                    <h3><?php echo esc_html($text_modal_title); ?></h3>
                    <p><?php echo esc_html($product->get_name()); ?></p>
                </div>
            </div>
            <button type="button" class="wahrb-close-btn">&times;</button>
        </div>

        <!-- Progress Steps -->
        <div class="wahrb-steps-bar">
            <div class="wahrb-step active" data-step="1">
                <span class="wahrb-step-num">1</span>
                <span class="wahrb-step-label"><?php esc_html_e('Dates', 'wahra-rentals-bookings'); ?></span>
            </div>
            <div class="wahrb-step-connector"></div>
            <div class="wahrb-step" data-step="2">
                <span class="wahrb-step-num">2</span>
                <span class="wahrb-step-label"><?php esc_html_e('Details', 'wahra-rentals-bookings'); ?></span>
            </div>
            <div class="wahrb-step-connector"></div>
            <div class="wahrb-step" data-step="3">
                <span class="wahrb-step-num">3</span>
                <span class="wahrb-step-label"><?php esc_html_e('Confirm', 'wahra-rentals-bookings'); ?></span>
            </div>
        </div>
        
        <!-- Modal Content -->
        <div class="wahrb-modal-content">
            <form class="wahrb-booking-form" data-product-id="<?php echo esc_attr($product_id); ?>">
                
                <!-- Step 1: Dates -->
                <div class="wahrb-form-step active" data-step="1">
                    <div class="wahrb-section-header">
                        <span class="wahrb-section-icon">📅</span>
                        <h4><?php esc_html_e('Choose your dates', 'wahra-rentals-bookings'); ?></h4>
                    </div>
                    
                    <div class="wahrb-dates-grid">
                        <div class="wahrb-input-group">
                            <label><?php esc_html_e('Check-in', 'wahra-rentals-bookings'); ?></label>
                            <div class="wahrb-input-wrapper">
                                <span class="wahrb-input-icon">🗓️</span>
                                <input type="text" id="wahrb-start-date" name="wahrb_start_date" required 
                                       placeholder="<?php esc_attr_e('Select', 'wahra-rentals-bookings'); ?>" readonly>
                            </div>
                        </div>
                        
                        <?php if ($booking_mode === 'day'): ?>
                        <div class="wahrb-input-group">
                            <label><?php esc_html_e('Check-out', 'wahra-rentals-bookings'); ?></label>
                            <div class="wahrb-input-wrapper">
                                <span class="wahrb-input-icon">🗓️</span>
                                <input type="text" id="wahrb-end-date" name="wahrb_end_date" required 
                                       placeholder="<?php esc_attr_e('Select', 'wahra-rentals-bookings'); ?>" readonly>
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>
                    
                    <?php if ($booking_mode === 'slot'): 
                        $slot_duration = get_post_meta($product_id, '_wahrb_slot_duration_minutes', true) ?: 60;
                        $min_hours = get_post_meta($product_id, '_wahrb_min_duration_hours', true) ?: 1;
                        $max_hours = get_post_meta($product_id, '_wahrb_max_duration_hours', true) ?: 8;
                    ?>
                    <!-- Time Slot Selection (Hourly Mode) -->
                    <div class="wahrb-time-slots-section" style="display:none;">
                        <div class="wahrb-section-header">
                            <span class="wahrb-section-icon">⏰</span>
                            <h4><?php esc_html_e('Select time slot', 'wahra-rentals-bookings'); ?></h4>
                        </div>
                        <p class="wahrb-slot-info">
                            <?php 
                            /* translators: %d: slot duration in minutes */
                            printf(esc_html__('Each slot: %d minutes', 'wahra-rentals-bookings'), absint($slot_duration)); 
                            ?>
                        </p>
                        <div class="wahrb-time-slots-grid" id="wahrb-time-slots">
                            <!-- Time slots will be loaded here via AJAX -->
                            <div class="wahrb-slots-loading">
                                <div class="wahrb-pulse-loader"></div>
                                <span><?php esc_html_e('Loading available slots...', 'wahra-rentals-bookings'); ?></span>
                            </div>
                        </div>
                        <input type="hidden" id="wahrb-slot-start" name="wahrb_slot_start" value="">
                        <input type="hidden" id="wahrb-slot-end" name="wahrb_slot_end" value="">
                    </div>
                    <?php endif; ?>
                    
                    <?php if ($booking_mode === 'service'): 
                        $service_duration = get_post_meta($product_id, '_wahrb_service_duration_minutes', true) ?: 60;
                        $capacity = get_post_meta($product_id, '_wahrb_capacity_per_slot', true) ?: 1;
                    ?>
                    <!-- Appointment Selection (Service Mode) -->
                    <div class="wahrb-appointment-section" style="display:none;">
                        <div class="wahrb-section-header">
                            <span class="wahrb-section-icon">🕐</span>
                            <h4><?php esc_html_e('Select appointment time', 'wahra-rentals-bookings'); ?></h4>
                        </div>
                        <div class="wahrb-service-info">
                            <span class="wahrb-info-chip">
                                ⏱️ <?php 
                                /* translators: %d: service duration in minutes */
                                printf(esc_html__('Duration: %d min', 'wahra-rentals-bookings'), absint($service_duration)); 
                                ?>
                            </span>
                            <?php if ($capacity > 1): ?>
                            <span class="wahrb-info-chip">
                                👥 <?php 
                                /* translators: %d: remaining spots available */
                                printf(esc_html__('%d spots available', 'wahra-rentals-bookings'), absint($capacity)); 
                                ?>
                            </span>
                            <?php endif; ?>
                        </div>
                        <div class="wahrb-appointments-grid" id="wahrb-appointments">
                            <!-- Appointment slots will be loaded here via AJAX -->
                            <div class="wahrb-slots-loading">
                                <div class="wahrb-pulse-loader"></div>
                                <span><?php esc_html_e('Loading available times...', 'wahra-rentals-bookings'); ?></span>
                            </div>
                        </div>
                        <input type="hidden" id="wahrb-appointment-time" name="wahrb_appointment_time" value="">
                    </div>
                    <?php endif; ?>
                    
                    <?php if ($total_units > 1): ?>
                    <div class="wahrb-qty-selector">
                        <label><?php esc_html_e('Quantity', 'wahra-rentals-bookings'); ?></label>
                        <div class="wahrb-qty-controls">
                            <button type="button" class="wahrb-qty-btn wahrb-qty-minus">−</button>
                            <input type="number" id="wahrb-qty" name="wahrb_qty" value="1" min="1" max="<?php echo esc_attr($total_units); ?>" readonly>
                            <button type="button" class="wahrb-qty-btn wahrb-qty-plus">+</button>
                        </div>
                        <?php /* translators: %d: number of available units */ ?>
                        <span class="wahrb-qty-info"><?php printf(esc_html__('%d available', 'wahra-rentals-bookings'), absint($total_units)); ?></span>
                    </div>
                    <?php endif; ?>
                    
                    <!-- Availability Status -->
                    <div class="wahrb-availability-box">
                        <div class="wahrb-avail-checking" style="display: none;">
                            <div class="wahrb-pulse-loader"></div>
                            <span><?php esc_html_e('Checking...', 'wahra-rentals-bookings'); ?></span>
                        </div>
                        <div class="wahrb-avail-success" style="display: none;">
                            <span class="wahrb-avail-icon">✅</span>
                            <div class="wahrb-avail-text">
                                <strong><?php esc_html_e('Available!', 'wahra-rentals-bookings'); ?></strong>
                                <span class="wahrb-avail-dates"></span>
                            </div>
                        </div>
                        <div class="wahrb-avail-error" style="display: none;">
                            <span class="wahrb-avail-icon">❌</span>
                            <span class="wahrb-avail-reason"></span>
                        </div>
                    </div>
                    
                    <!-- Price Preview -->
                    <div class="wahrb-price-preview" style="display: none;">
                        <div class="wahrb-price-lines"></div>
                        <div class="wahrb-price-total">
                            <span><?php esc_html_e('Estimated total', 'wahra-rentals-bookings'); ?></span>
                            <strong class="wahrb-total-value"></strong>
                        </div>
                    </div>
                    
                    <div class="wahrb-step-actions">
                        <button type="button" class="wahrb-btn-next" disabled>
                            <?php esc_html_e('Continue', 'wahra-rentals-bookings'); ?>
                            <span>→</span>
                        </button>
                    </div>
                </div>
                
                <!-- Step 2: Contact -->
                <div class="wahrb-form-step" data-step="2" style="display: none;">
                    <div class="wahrb-section-header">
                        <span class="wahrb-section-icon">👤</span>
                        <h4><?php esc_html_e('Your details', 'wahra-rentals-bookings'); ?></h4>
                    </div>
                    
                    <div class="wahrb-contact-grid">
                        <div class="wahrb-input-group full">
                            <label><?php esc_html_e('Full name', 'wahra-rentals-bookings'); ?> <span class="required">*</span></label>
                            <div class="wahrb-input-wrapper">
                                <span class="wahrb-input-icon">👤</span>
                                <input type="text" id="wahrb-name" name="wahrb_name" required 
                                       placeholder="<?php esc_attr_e('Your name', 'wahra-rentals-bookings'); ?>">
                            </div>
                        </div>
                        
                        <div class="wahrb-input-group full">
                            <label><?php esc_html_e('Email', 'wahra-rentals-bookings'); ?> <span class="required">*</span></label>
                            <div class="wahrb-input-wrapper">
                                <span class="wahrb-input-icon">✉️</span>
                                <input type="email" id="wahrb-email" name="wahrb_email" required 
                                       placeholder="<?php esc_attr_e('email@example.com', 'wahra-rentals-bookings'); ?>">
                            </div>
                        </div>
                        
                        <div class="wahrb-input-group full">
                            <label><?php esc_html_e('Phone', 'wahra-rentals-bookings'); ?></label>
                            <div class="wahrb-phone-container">
                                <input type="tel" id="wahrb-phone" name="wahrb_phone_display" 
                                       placeholder="<?php esc_attr_e('XX XXX XXX', 'wahra-rentals-bookings'); ?>"
                                       autocomplete="tel">
                                <!-- Hidden input stores full international number -->
                                <input type="hidden" id="wahrb-phone-full" name="wahrb_phone" value="">
                            </div>
                            <small class="wahrb-phone-hint"><?php esc_html_e('Country detected automatically', 'wahra-rentals-bookings'); ?></small>
                        </div>
                        
                        <div class="wahrb-input-group full">
                            <label><?php esc_html_e('Message (optional)', 'wahra-rentals-bookings'); ?></label>
                            <textarea id="wahrb-message" name="wahrb_message" rows="3" 
                                      placeholder="<?php esc_attr_e('Any questions or special requests?', 'wahra-rentals-bookings'); ?>"></textarea>
                        </div>
                    </div>

                    <?php
                    // ── Custom Form Fields (Form Builder) ──
                    $form_builder_settings = get_option('wahrb_settings_form_builder', ['enabled' => false, 'show_in_calendar' => true]);
                    if (!empty($form_builder_settings['enabled']) && !empty($form_builder_settings['show_in_calendar'])) {
                        $custom_fields_html = WAHRB_Form_Builder::instance()->render_fields_html($product_id);
                        if ($custom_fields_html) {
                            echo $custom_fields_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- HTML escaped in render_fields_html()
                        }
                    }

                    // ── Coupon Code Field ──
                    $coupon_settings = get_option('wahrb_settings_coupons', ['enabled' => false, 'show_coupon_field' => true]);
                    if (!empty($coupon_settings['enabled']) && !empty($coupon_settings['show_coupon_field'])):
                    ?>
                    <div class="wahrb-coupon-section">
                        <div class="wahrb-section-header">
                            <span class="wahrb-section-icon">&#x1f3ab;</span>
                            <h4><?php esc_html_e('Coupon code', 'wahra-rentals-bookings'); ?></h4>
                        </div>
                        <div class="wahrb-coupon-input-row">
                            <div class="wahrb-input-wrapper" style="flex: 1;">
                                <span class="wahrb-input-icon">&#x1f3ab;</span>
                                <input type="text" id="wahrb-coupon-code" name="wahrb_coupon_code"
                                       placeholder="<?php esc_attr_e('Enter coupon code', 'wahra-rentals-bookings'); ?>"
                                       autocomplete="off">
                            </div>
                            <button type="button" id="wahrb-apply-coupon" class="wahrb-btn-apply-coupon" disabled>
                                <?php esc_html_e('Apply', 'wahra-rentals-bookings'); ?>
                            </button>
                        </div>
                        <div class="wahrb-coupon-result" style="display: none;">
                            <div class="wahrb-coupon-success" style="display: none;">
                                <span>&#x2705;</span> <span class="wahrb-coupon-message"></span>
                                <span class="wahrb-coupon-discount"></span>
                                <button type="button" class="wahrb-remove-coupon" title="<?php esc_attr_e('Remove coupon', 'wahra-rentals-bookings'); ?>">&#x2715;</button>
                            </div>
                            <div class="wahrb-coupon-error" style="display: none;">
                                <span>&#x274c;</span> <span class="wahrb-coupon-error-msg"></span>
                            </div>
                        </div>
                        <input type="hidden" id="wahrb-coupon-validated" name="wahrb_coupon_validated" value="">
                        <input type="hidden" id="wahrb-coupon-discount-amount" name="wahrb_coupon_discount" value="0">
                    </div>
                    <?php endif; ?>
                    
                    <div class="wahrb-step-actions two-buttons">
                        <button type="button" class="wahrb-btn-back">
                            <span>←</span>
                            <?php esc_html_e('Back', 'wahra-rentals-bookings'); ?>
                        </button>
                        <button type="button" class="wahrb-btn-next">
                            <?php esc_html_e('Continue', 'wahra-rentals-bookings'); ?>
                            <span>→</span>
                        </button>
                    </div>
                </div>
                
                <!-- Step 3: Confirm -->
                <div class="wahrb-form-step" data-step="3" style="display: none;">
                    <div class="wahrb-section-header">
                        <span class="wahrb-section-icon">📋</span>
                        <h4><?php esc_html_e('Summary', 'wahra-rentals-bookings'); ?></h4>
                    </div>
                    
                    <div class="wahrb-summary-card">
                        <div class="wahrb-summary-row">
                            <span class="wahrb-summary-label">📅 <?php esc_html_e('Dates', 'wahra-rentals-bookings'); ?></span>
                            <span class="wahrb-summary-value wahrb-summary-dates"></span>
                        </div>
                        <div class="wahrb-summary-row">
                            <span class="wahrb-summary-label">👤 <?php esc_html_e('Client', 'wahra-rentals-bookings'); ?></span>
                            <span class="wahrb-summary-value wahrb-summary-client"></span>
                        </div>
                        <div class="wahrb-summary-row total">
                            <span class="wahrb-summary-label">💰 <?php esc_html_e('Total', 'wahra-rentals-bookings'); ?></span>
                            <span class="wahrb-summary-value wahrb-summary-total"></span>
                        </div>
                    </div>
                    
                    <div class="wahrb-terms-box">
                        <label class="wahrb-checkbox-label">
                            <input type="checkbox" id="wahrb-accept-terms" required>
                            <span class="wahrb-checkmark"></span>
                            <span><?php echo esc_html($text_terms); ?></span>
                        </label>
                    </div>
                    
                    <div class="wahrb-step-actions two-buttons">
                        <button type="button" class="wahrb-btn-back">
                            <span>←</span>
                            <?php esc_html_e('Back', 'wahra-rentals-bookings'); ?>
                        </button>
                        <button type="submit" class="wahrb-btn-submit">
                            <span class="wahrb-btn-text"><?php echo esc_html($text_submit_button); ?></span>
                            <span class="wahrb-btn-icon">🚀</span>
                        </button>
                    </div>
                </div>
                
                <!-- Success State -->
                <div class="wahrb-form-success" style="display: none;">
                    <div class="wahrb-success-animation">
                        <div class="wahrb-success-circle">
                            <span>✓</span>
                        </div>
                    </div>
                    <h4><?php echo esc_html($text_success_title); ?></h4>
                    <p><?php echo esc_html($text_success_message); ?></p>
                    <button type="button" class="wahrb-btn-close-success"><?php esc_html_e('Close', 'wahra-rentals-bookings'); ?></button>
                </div>
            </form>
        </div>
    </div>
</div>

<?php
$calendar_css_2 = '
/* Booking Card */
.wahrb-booking-card{background:#fff;border-radius:12px;border:1px solid #e2e8f0;overflow:hidden;margin:1.5rem 0;}
.wahrb-booking-body{padding:1.25rem;}
.wahrb-duration-info{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1rem;}
.wahrb-info-chip{background:#f1f5f9;padding:6px 12px;border-radius:6px;font-size:0.8rem;color:#475569;}
.wahrb-cta-button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;background:var(--wahrb-btn-primary, #2563eb);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;}
.wahrb-cta-button:hover{background:var(--wahrb-btn-primary-hover, #1d4ed8);}
.wahrb-cta-arrow{font-size:1.1rem;}
.wahrb-security-badge{display:block;margin-top:10px;font-size:0.8rem;color:#64748b;text-align:center;}
.wahrb-booking-footer{padding:0.75rem 1.25rem;background:#f8fafc;border-top:1px solid #e2e8f0;}
.wahrb-trust-signals{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.wahrb-trust-item{font-size:0.75rem;color:#64748b;}
.wahrb-trust-item::before{content:"\2713 ";color:#10b981;}

/* Modal */
.wahrb-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.6);z-index:999999;display:flex;align-items:center;justify-content:center;padding:1rem;}
.wahrb-modal-modern{background:#fff;border-radius:12px;max-width:480px;width:100%;max-height:90vh;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.2);}
.wahrb-modal-top{background:var(--wahrb-btn-primary, #2563eb);padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;}
.wahrb-modal-brand{display:flex;align-items:center;gap:12px;color:#fff;}
.wahrb-modal-icon{font-size:1.5rem;}
.wahrb-modal-brand h3{margin:0;font-size:1.1rem;font-weight:700;}
.wahrb-modal-brand p{margin:2px 0 0;font-size:0.8rem;opacity:0.85;}
.wahrb-close-btn{background:rgba(255,255,255,0.2);border:none;color:#fff;font-size:1.5rem;width:36px;height:36px;border-radius:50%;cursor:pointer;line-height:1;}
.wahrb-close-btn:hover{background:rgba(255,255,255,0.3);}

/* Steps Bar */
.wahrb-steps-bar{display:flex;align-items:center;justify-content:center;padding:1rem 1.5rem;background:#f8fafc;border-bottom:1px solid #e2e8f0;}
.wahrb-step{display:flex;align-items:center;gap:6px;opacity:0.4;}
.wahrb-step.active,.wahrb-step.completed{opacity:1;}
.wahrb-step-num{width:28px;height:28px;background:#e2e8f0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;color:#64748b;}
.wahrb-step.active .wahrb-step-num{background:#2563eb;color:#fff;}
.wahrb-step.completed .wahrb-step-num{background:#10b981;color:#fff;}
.wahrb-step-label{font-size:0.8rem;font-weight:500;color:#64748b;}
.wahrb-step.active .wahrb-step-label{color:#1e293b;}
.wahrb-step-connector{width:30px;height:2px;background:#e2e8f0;margin:0 8px;}

/* Modal Content */
.wahrb-modal-content{padding:1.5rem;max-height:calc(90vh - 180px);overflow-y:auto;}
.wahrb-section-header{display:flex;align-items:center;gap:10px;margin-bottom:1.25rem;}
.wahrb-section-icon{font-size:1.5rem;}
.wahrb-section-header h4{margin:0;font-size:1.1rem;font-weight:600;color:#1e293b;}

/* Form Inputs */
.wahrb-dates-grid,.wahrb-contact-grid{display:grid;gap:1rem;}
.wahrb-dates-grid{grid-template-columns:1fr 1fr;}
.wahrb-contact-grid{grid-template-columns:1fr;}
.wahrb-input-group.full{grid-column:1 / -1;}
.wahrb-input-group label{display:block;font-size:0.85rem;font-weight:600;color:#475569;margin-bottom:6px;}
.wahrb-input-group label .required{color:#ef4444;}
.wahrb-input-wrapper{position:relative;}
.wahrb-input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none;}
.wahrb-input-wrapper input{width:100%;padding:12px 12px 12px 40px;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;background:#fff;}
.wahrb-input-wrapper input:focus{outline:none;border-color:var(--wahrb-btn-primary, #2563eb);}
.wahrb-input-group textarea{width:100%;padding:12px;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;resize:vertical;font-family:inherit;background:#fff;}
.wahrb-input-group textarea:focus{outline:none;border-color:var(--wahrb-btn-primary, #2563eb);}

/* Quantity */
.wahrb-qty-selector{margin-top:1rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.wahrb-qty-selector label{font-weight:600;color:#475569;}
.wahrb-qty-controls{display:flex;align-items:center;background:#f1f5f9;border-radius:8px;overflow:hidden;}
.wahrb-qty-btn{width:40px;height:40px;border:none;background:transparent;font-size:1.25rem;cursor:pointer;color:#475569;}
.wahrb-qty-btn:hover{background:#e2e8f0;}
.wahrb-qty-controls input{width:50px;text-align:center;border:none;background:transparent;font-size:1rem;font-weight:600;}
.wahrb-qty-info{font-size:0.8rem;color:#64748b;}

/* Availability */
.wahrb-availability-box{margin-top:1.25rem;padding:1rem;border-radius:8px;background:#f8fafc;min-height:60px;}
.wahrb-avail-checking{display:flex;align-items:center;justify-content:center;gap:10px;color:#64748b;}
.wahrb-pulse-loader{width:20px;height:20px;border:3px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:wahrb-spin 1s linear infinite;}
@keyframes wahrb-spin{to{transform:rotate(360deg);}}
.wahrb-avail-success{display:flex;align-items:center;gap:10px;background:#ecfdf5;padding:1rem;border-radius:8px;color:#047857;}
.wahrb-avail-error{display:flex;align-items:center;gap:10px;background:#fef2f2;padding:1rem;border-radius:8px;color:#b91c1c;}
.wahrb-avail-icon{font-size:1.5rem;}
.wahrb-avail-text strong{display:block;}
.wahrb-avail-dates{font-size:0.85rem;opacity:0.8;}

/* Price Preview */
.wahrb-price-preview{margin-top:1rem;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:1rem;}
.wahrb-price-lines{font-size:0.85rem;color:#0369a1;margin-bottom:0.75rem;}
.wahrb-price-total{display:flex;justify-content:space-between;align-items:center;padding-top:0.75rem;border-top:1px dashed #7dd3fc;}
.wahrb-price-total span{font-weight:500;color:#0369a1;}
.wahrb-total-value{font-size:1.25rem;color:#0c4a6e;}

/* Action Buttons */
.wahrb-step-actions{margin-top:1.5rem;display:flex;gap:12px;}
.wahrb-step-actions.two-buttons{justify-content:space-between;}
.wahrb-btn-next,.wahrb-btn-submit{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;background:var(--wahrb-btn-primary, #2563eb);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;}
.wahrb-btn-next:hover:not(:disabled),.wahrb-btn-submit:hover:not(:disabled){background:var(--wahrb-btn-primary-hover, #1d4ed8);}
.wahrb-btn-next:disabled{background:#cbd5e1;cursor:not-allowed;}
.wahrb-btn-back{display:flex;align-items:center;gap:6px;padding:14px 20px;background:#f1f5f9;color:#475569;border:none;border-radius:8px;font-size:0.95rem;font-weight:500;cursor:pointer;}
.wahrb-btn-back:hover{background:#e2e8f0;}

/* Summary */
.wahrb-summary-card{background:#f8fafc;border-radius:8px;padding:1rem;margin-bottom:1rem;}
.wahrb-summary-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e2e8f0;}
.wahrb-summary-row:last-child{border-bottom:none;}
.wahrb-summary-row.total{padding-top:12px;margin-top:4px;}
.wahrb-summary-label{color:#64748b;font-size:0.9rem;}
.wahrb-summary-value{font-weight:600;color:#1e293b;}
.wahrb-summary-row.total .wahrb-summary-value{font-size:1.1rem;color:#2563eb;}

/* Terms & Success */
.wahrb-terms-box{margin-bottom:1rem;}
.wahrb-checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.9rem;color:#475569;}
.wahrb-checkbox-label input{display:none;}
.wahrb-checkmark{width:22px;height:22px;border:2px solid #cbd5e1;border-radius:4px;display:flex;align-items:center;justify-content:center;}
.wahrb-checkbox-label input:checked + .wahrb-checkmark{background:#2563eb;border-color:#2563eb;}
.wahrb-checkbox-label input:checked + .wahrb-checkmark::after{content:"\2713";color:#fff;font-size:0.8rem;}
.wahrb-form-success{text-align:center;padding:2rem 1rem;}
.wahrb-success-animation{margin-bottom:1.5rem;}
.wahrb-success-circle{width:80px;height:80px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;}
.wahrb-success-circle span{font-size:2.5rem;color:#fff;}
.wahrb-form-success h4{font-size:1.5rem;color:#1e293b;margin:0 0 0.5rem;}
.wahrb-form-success p{color:#64748b;margin:0 0 1.5rem;}
.wahrb-btn-close-success{padding:12px 32px;background:#f1f5f9;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;}
.wahrb-btn-close-success:hover{background:#e2e8f0;}

/* Phone */
.wahrb-phone-container{position:relative;}
.wahrb-phone-hint{display:block;margin-top:4px;font-size:0.75rem;color:#94a3b8;}

/* Responsive */
@media (max-width:480px){
.wahrb-dates-grid,.wahrb-contact-grid{grid-template-columns:1fr;}
.wahrb-modal-modern{border-radius:12px 12px 0 0;max-height:95vh;}
.wahrb-steps-bar{padding:0.75rem 1rem;}
.wahrb-step-label{display:none;}
}

/* Date picker z-index */
.flatpickr-calendar,.ui-datepicker,.datepicker,.daterangepicker,.picker,.picker__holder{z-index:9999999 !important;}
.flatpickr-calendar.open{z-index:9999999 !important;}

/* Slot & Service */
.wahrb-time-slots-grid,.wahrb-appointments-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:0.75rem;}
.wahrb-slot-info{font-size:0.85rem;color:#64748b;margin:0 0 0.5rem;}
.wahrb-service-info{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0.75rem;}
.wahrb-slots-loading{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;padding:1.5rem;color:#64748b;}
';
wp_add_inline_style('wahrb-calendar-styles', wp_strip_all_tags($calendar_css_2));
?>

<?php wp_nonce_field('wahrb_availability_nonce', 'wahrb_nonce', false); ?>
