<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reserva de Experiencia - Vinos Laberinto</title>
    <meta name="description" content="Reserva tu experiencia en Vinos Laberinto. Experiencias exclusivas y grupales disponibles.">
    <meta name="keywords" content="vinos laberinto, reserva, experiencia, degustación, viña">
    <meta name="author" content="Vinos Laberinto">
    <meta name="robots" content="index, follow">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: https://cdn.jsdelivr.net https://*.bootstrapcdn.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://*.bootstrapcdn.com; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://code.jquery.com; img-src 'self' data: https://*.netlify.app; connect-src 'self' https://*.netlify.app https://*.airtable.com; frame-ancestors 'none'; form-action 'self';">
    
    <!-- External CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/fonts.css" rel="stylesheet">
    
    <!-- Custom Styles -->
    <style>
        :root {
            /* Primary colors */
            --primary-white: #ffffff;
            --primary-black: #1A1A1A;
            --primary-light-gray: #e6e6e6;
            
            /* Secondary colors */
            --secondary-sage: #A9B3A0;
            --secondary-taupe: #95A18B;
            --secondary-gray: #8C949F;
            
            /* Accent color */
            --accent-sage-light: #C5CCBE;
            --accent-sage-dark: #95A18B;
            
            /* Bootstrap override */
            --bs-primary: var(--primary-black);
            --bs-primary-rgb: 169, 179, 160;
            --bs-secondary: #95A18B;
            --bs-secondary-rgb: 178, 158, 140;
            --bs-success: #28a745;
            --bs-success-rgb: 169, 179, 160;
            --bs-info: #17a2b8;
            --bs-info-rgb: 169, 179, 160;
            --bs-warning: #ffc107;
            --bs-warning-rgb: 169, 179, 160;
            --bs-danger: #dc3545;
            --bs-danger-rgb: 139, 115, 85;
        }

        body {
            background: linear-gradient(135deg, rgba(169, 179, 160, 0.1), rgba(169, 179, 160, 0.05));
            min-height: 100vh;
        }
        
        .form-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 2rem;
        }
        
        .form-logo {
            max-height: 120px;
            margin-bottom: 1.5rem;
        }
        
        /* Custom form styling */
        .steps-indicator {
            display: flex;
            margin-bottom: 2rem;
        }
        
        .step-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: var(--tertiary-light-gray);
            color: var(--text-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 0.5rem;
        }
        
        .step-circle.active {
            background-color: var(--secondary-sage);
            color: white;
        }
        
        /* Alert styling */
        .alert-info, .alert-warning, .alert-success {
            background-color: rgba(169, 179, 160, 0.15);
            border-color: var(--secondary-sage);
            color: #5A6452;
            border-left: 4px solid var(--secondary-sage);
        }
        
        .alert-danger {
            background-color: rgba(169, 179, 160, 0.15);
            border-color: #95A18B;
            color: #5A6452;
            border-left: 4px solid #95A18B;
        }
        
        /* Button styling */
        .btn-success {
            background-color: var(--secondary-sage);
            border-color: var(--secondary-sage);
            color: white;
        }
        
        .btn-success:hover, .btn-success:focus {
            background-color: var(--accent-sage-dark);
            border-color: var(--accent-sage-dark);
            color: white;
        }
        
        .btn-outline-primary {
            color: var(--secondary-sage);
            border-color: var(--secondary-sage);
        }
        
        .btn-outline-primary:hover, .btn-outline-primary:focus {
            background-color: var(--secondary-sage);
            border-color: var(--secondary-sage);
            color: white;
        }
        
        /* Form elements */
        .form-check-input:checked {
            background-color: var(--secondary-sage);
            border-color: var(--secondary-sage);
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--secondary-sage);
            box-shadow: 0 0 0 0.25rem rgba(169, 179, 160, 0.25);
        }
        
        .love-font-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #000;
        }

        /* Group summary styling */
        .group-summary {
            background-color: rgba(149, 161, 139, 0.1);
            border-color: var(--secondary-taupe) !important;
            border-radius: 6px;
        }
        
        .group-summary p {
            margin-bottom: 0.25rem;
            font-size: 0.95rem;
            color: #333;
        }
        
        .group-summary p strong {
            color: var(--secondary-taupe);
            font-weight: 600;
        }
        
        /* Toggle container styling */
        .toggle-container {
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }
        
        .toggle-container:hover {
            box-shadow: 0 0 10px rgba(149, 161, 139, 0.2);
        }
        
        .toggle-container .active-state {
            border-left: 4px solid #28a745;
            padding-left: 10px;
        }
        
        .toggle-container .inactive-state {
            border-left: 4px solid #6c757d;
            padding-left: 10px;
        }
        
        .badge.bg-success {
            background-color: var(--secondary-taupe) !important;
        }
        
        /* Checkbox styling */
        .form-check-input {
            border: 2px solid var(--secondary-taupe);
            box-shadow: none !important;
        }
        
        .form-check-input:checked {
            background-color: var(--secondary-taupe);
            border-color: var(--secondary-taupe);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
        }
        
        /* SVG Icon Fallbacks */
        .btn svg {
            vertical-align: text-bottom;
        }
    </style>
    
    <!-- External JavaScript -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>
    <script src="js/script.js"></script>
    </head>
<body>
    <!-- Main page content -->
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="form-container">
            <div class="text-center mb-4">
                        <img src="images/logo.png" alt="Vinos Laberinto" class="img-fluid" style="max-height: 100px;">
                        <h1 class="mt-3 mb-4 love-font-title" style="color: var(--primary-black);">Reserva de Experiencia</h1>
                        <div class="mx-auto" style="width: 50px; height: 3px; background-color: var(--secondary-taupe); margin-bottom: 2rem;"></div>
            </div>

            <div id="step-q1GJ" class="form-step">
                <div class="mb-3">
                    <label for="widget-oY8v" class="form-label fw-bold"><h4>Experiencias grupales</h4></label>
                    <select class="form-select select2-dropdown mb-2" id="widget-oY8v" style="width: 100%;" data-placeholder="Selecciona una de nuestras experiencas ya agendadas">
                        </select>
                    <button type="button" class="btn btn-secondary btn-sm mt-2" id="btn-request-other-date" style="background-color: var(--secondary-taupe); border-color: var(--secondary-taupe);">
                        Solicitar otra fecha
                    </button>
                 </div>
                <hr id="widget-2mrE">
                <div class="mb-3">
                    <h4>Experiencia Exclusiva</h4>
                    <p class="form-text mb-3">Reservar una experiencia privada solo para tu grupo.</p>
                    <a href="#" class="btn btn-outline-primary" id="link-solicitar-exclusiva" style="background-color: var(--secondary-taupe); border-color: var(--secondary-taupe); color: white;">
                        Reservar Experiencia Exclusiva
                    </a>
                </div>
            </div>

             <div id="step-request-start" class="form-step d-none">
                        <h4>Solicitar Nueva Fecha Grupal</h4>
                <hr>
                <div class="mb-3">
                    <label for="request-experience-type" class="form-label fw-bold">Tipo de Experiencia Grupal a Solicitar</label>
                    <select class="form-select select2-dropdown" id="request-experience-type" required style="width: 100%;" data-placeholder="Selecciona tipo de experiencia...">
                        </select>
                    <div class="invalid-feedback">Por favor selecciona un tipo de experiencia.</div>
                </div>
                        <div class="alert alert-info">
                            <h5 class="alert-heading">Reglas y Consideraciones</h5>
                            <div class="mb-3">
                                <strong>Días Disponibles:</strong>
                                <ul class="mb-0">
                                    <li>Solo Viernes, Sábados y Domingos</li>
                                    <li>Mínimo 10 días de anticipación</li>
                                    <li>Para otros días, reserva una Experiencia Exclusiva</li>
                    </ul>
                            </div>
                            <div>
                                <strong>Horarios y Comidas:</strong>
                                <ul class="mb-0">
                                    <li>Horarios recomendados: 11:00-12:00 o 15:00-16:00</li>
                                    <li>Si incluyes comida, reserva 60 minutos adicionales</li>
                                    <li>Considera que otros grupos podrían incluir comida en su experiencia</li>
                    </ul>
                            </div>
                </div>
                 <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-outline-secondary" id="btn-request-cancel">
                        Cancelar Solicitud
                    </button>
                    <button type="button" class="btn btn-primary" id="btn-request-select-datetime">
                        Seleccionar Fecha/Hora
                    </button>
                </div>
            </div>

            <div id="step-request-select-datetime" class="form-step d-none">
                        <h4>Seleccionar Fecha y Hora</h4>
                <hr>
                 <div class="alert alert-info small">Selecciona una fecha (Viernes-Domingo, 10+ días desde hoy) y hora de inicio.</div>
                 <div class="row g-3">
                    <div class="col-md-6 mb-3">
                        <label for="request-date" class="form-label fw-bold">Fecha<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="request-date" placeholder="Selecciona una fecha..." required>
                         <div class="invalid-feedback">Por favor selecciona una fecha válida.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Hora de Inicio deseada<span class="text-danger">*</span></label>
                         <div id="time-bubbles-container" class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="11:00">11:00 AM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="11:30">11:30 AM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="12:00">12:00 PM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="12:30">12:30 PM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="15:00">3:00 PM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="15:30">3:30 PM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="16:30">4:30 PM</button>
                         </div>
                         <input type="hidden" id="request-time-selected" required>
                         <div class="invalid-feedback">Por favor selecciona una hora de inicio.</div>
                         <div class="mt-2">
                                    <small class="text-muted">Hora de término estimada: <strong id="calculated-end-time">--:--</strong></small>
                         </div>
                    </div>
                 </div>
                 <div id="request-submission-error" class="alert alert-danger mt-3 d-none" role="alert"></div>
                 <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-outline-secondary" id="btn-request-datetime-back">Volver</button>
                    <button type="button" class="btn btn-success" id="submit-request-button">Enviar Solicitud</button>
                </div>
            </div>

            <div id="step-request-confirm" class="form-step d-none">
                 <div class="text-center p-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-calendar-check text-success mb-3" viewBox="0 0 16 16">
                       <path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                       <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                    </svg>
                            <h4>Solicitud Enviada</h4>
                            <p>Has agregado <strong id="confirm-request-details">...</strong></p>
                            <button class="btn btn-primary mt-4" id="btn-request-confirm-home">Continuar con la reserva</button>
                </div>
             </div>

            <div id="step-private-request-start" class="form-step d-none">
                <h4>Reserva de Experiencia Privada</h4>
                <hr>
                <div class="mb-3">
                    <label for="request-private-experience-type" class="form-label fw-bold">Tipo de Experiencia Privada</label>
                    <select class="form-select select2-dropdown mb-2" id="request-private-experience-type" style="width: 100%;" data-placeholder="Selecciona tipo de experiencia..."></select>
                    <div class="invalid-feedback">Por favor selecciona un tipo de experiencia.</div>
                </div>
                <div class="alert alert-info">
                    <h5 class="alert-heading">Reglas y Consideraciones</h5>
                    <div class="mb-3">
                        <strong>Días de anticipación:</strong>
                        <ul class="mb-0">
                            <li>Mínimo 2 días de anticipación</li>
                        </ul>
                    </div>
                    <div>
                        <strong>Horarios y Comidas:</strong>
                        <ul class="mb-0">
                            <li>Horarios recomendados: 11:00-12:00 o 15:00-16:00.</li>
                            <li>Si incluyes comida, considera que 60 minutos del tour serán utilizados para ello.</li>
                        </ul>
                    </div>
                </div>
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-outline-secondary" id="btn-private-request-back">Atrás</button>
                    <button type="button" class="btn btn-primary" id="btn-private-request-select-datetime">Seleccionar Fecha/Hora</button>
                </div>
            </div>

            <div id="step-private-request-select-datetime" class="form-step d-none">
                <h4>Seleccionar Fecha y Hora</h4>
                <hr>
                <div class="alert alert-info small">Selecciona una fecha con al menos 2 días de anticipación y hora de inicio.</div>
                <div class="row g-3">
                    <div class="col-md-6 mb-3">
                        <label for="private-request-date" class="form-label fw-bold">Fecha<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="private-request-date" placeholder="Selecciona una fecha..." required>
                        <div class="invalid-feedback">Por favor selecciona una fecha válida.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Hora de Inicio deseada<span class="text-danger">*</span></label>
                        <div id="private-time-bubbles-container" class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="11:00">11:00 AM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="11:30">11:30 AM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="12:00">12:00 PM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="12:30">12:30 PM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="15:00">3:00 PM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="15:30">3:30 PM</button>
                            <button type="button" class="btn btn-outline-primary btn-sm time-bubble" data-time="16:30">4:30 PM</button>
                        </div>
                        <input type="hidden" id="private-request-time-selected" required>
                        <div class="invalid-feedback">Por favor selecciona una hora de inicio.</div>
                        <div class="mt-2">
                            <small class="text-muted">Hora de término estimada: <strong id="private-calculated-end-time">--:--</strong></small>
                        </div>
                    </div>
                </div>
                <div id="private-request-submission-error" class="alert alert-danger mt-3 d-none" role="alert"></div>
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-outline-secondary" id="btn-private-request-datetime-back">Atrás</button>
                    <button type="button" class="btn btn-success" id="submit-private-request-button">Continuar</button>
                </div>
            </div>

            <div id="step-private-request-confirm" class="form-step d-none">
                <div class="text-center p-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-calendar-check text-success mb-3" viewBox="0 0 16 16">
                        <path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                    </svg>
                    <h4>Reserva Privada Enviada</h4>
                    <p>Has reservado <strong id="confirm-private-request-details">...</strong></p>
                    <button class="btn btn-primary mt-4" id="btn-private-request-confirm-home">Continuar con la reserva</button>
                </div>
            </div>

            <div id="step-bSoz" class="form-step d-none">
                        <h4>Reserva de experiencia - Grupo</h4>
                <hr>
                <div class="mb-3">
                    <label class="form-label fw-bold">Configuración del Grupo</label>
                    <p class="form-text">Te preguntaremos datos de la cantidad de personas y restricciones.</p>
                    <button type="button" id="btn-aZoD-add" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#groupConfigModal">Configurar grupo</button>
                    <button type="button" id="btn-aZoD-edit" class="btn btn-outline-secondary d-none">Editar grupo</button>
                            <div class="mt-2">
                                <small class="text-muted d-block mb-1">Estado de configuración:</small>
                                <div id="subform-aZoD-status" class="ps-2">Falta ingresar detalles del grupo</div>
                            </div>
                </div>
                 <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-outline-secondary" id="btn-bsoz-back">Volver</button>
                    <button type="button" class="btn btn-primary" id="btn-bsoz-continue">Siguiente: Comida</button>
                </div>
            </div>

             <div id="step-2sff" class="form-step d-none">
                        <h4>Reserva de experiencia - Almuerzo o Cena</h4>
                <hr>
                <p id="widget-nRxz" class="alert alert-info d-none">Cuando terminan nuestras experiencias grupales...</p>
                <p id="widget-kJ8C" class="alert alert-warning d-none">Para la experiencia exclusiva...</p>
                <p id="widget-5A7s" class="alert alert-warning d-none">De nuestra experiencia no es posible...</p>
                <div class="mb-3">
                    <label for="widget-3vTL" class="form-label fw-bold">Comida Adicional (Opcional)</label>
                    <select class="form-select select2-dropdown" id="widget-3vTL" style="width: 100%;" data-placeholder="Selecciona comida (opcional)...">
                    </select>
                     <small class="form-text">Selecciona si deseas agregar almuerzo o cena...</small>
                </div>
                <div class="mt-2">
                    <small class="text-muted">Hora de término estimada: <strong id="food-calculated-end-time">--:--</strong></small><br>
                    <small class="text-muted">Hora de término estimada con comida: <strong id="food-calculated-end-time-with-food">--:--</strong></small>
                </div>
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-outline-secondary" id="btn-2sff-back">Volver</button>
                            <button type="button" class="btn btn-primary" id="btn-2sff-continue">Ver Resumen</button>
                </div>
            </div>

            <div id="step-qf5J" class="form-step d-none">
                 <h4>Resumen de Reserva</h4>
                 <hr>
                 <div id="reservation-summary"><!-- populated by script.js --></div>
                 <div class="d-flex justify-content-between mt-4">
                     <button type="button" class="btn btn-outline-secondary" id="btn-qf5j-back">Editar</button>
                     <button type="button" class="btn btn-primary" id="btn-qf5j-continue">Continuar al Pago</button>
                 </div>
             </div>

            <div id="step-CuKL" class="form-step d-none">
                <!-- Existing content for extras section -->
                </div>

            <div id="edit-experience-section" class="form-step d-none">
                <h3>Editar Experiencia</h3>
                <div class="form-group">
                    <label for="widget-oY8v">Seleccionar Experiencia</label>
                    <select id="widget-oY8v" class="form-control">
                        <!-- Will be populated dynamically -->
                    </select>
                </div>
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" id="cancel-edit-experience" class="btn btn-secondary">Cancelar</button>
                    <button type="button" id="save-edit-experience" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </div>

            <div id="edit-group-section" class="form-step d-none">
                <h3>Editar Configuración del Grupo</h3>
                
                <div class="form-group">
                    <label for="edit-group-size">Tamaño del grupo</label>
                    <input type="number" id="edit-group-size" class="form-control" min="1" max="100">
                 </div>
                
                <div class="form-group">
                    <label for="edit-non-drinkers">Personas que no beben</label>
                    <input type="number" id="edit-non-drinkers" class="form-control" min="0">
                 </div>
                
                <div class="form-group">
                    <label for="edit-children">Niños menores de 12</label>
                    <input type="number" id="edit-children" class="form-control" min="0">
                 </div>
                
                <h4 class="mt-4">Datos del Organizador</h4>
                
                <div class="form-group">
                    <label for="edit-organizer-name">Nombre</label>
                    <input type="text" id="edit-organizer-name" class="form-control">
            </div>

                <div class="form-group">
                    <label for="edit-organizer-lastname">Apellido</label>
                    <input type="text" id="edit-organizer-lastname" class="form-control">
                 </div>
                
                <div class="form-group">
                    <label for="edit-organizer-email">Email</label>
                    <input type="email" id="edit-organizer-email" class="form-control">
             </div>

                <div class="form-group">
                    <label for="edit-organizer-phone">Teléfono</label>
                    <input type="tel" id="edit-organizer-phone" class="form-control">
                 </div>
                
                <div class="form-group">
                    <label for="edit-organizer-instagram">Instagram (opcional)</label>
                    <input type="text" id="edit-organizer-instagram" class="form-control">
            </div>

                <div class="form-group">
                    <label for="edit-organizer-country">País</label>
                    <select id="edit-organizer-country" class="form-control">
                        <!-- Will be populated dynamically -->
                        <option value="Chile">Chile</option>
                        <option value="Argentina">Argentina</option>
                        <option value="Brasil">Brasil</option>
                        <option value="Colombia">Colombia</option>
                        <option value="México">México</option>
                        <option value="Perú">Perú</option>
                        <option value="Uruguay">Uruguay</option>
                        <option value="Otro">Otro</option>
                    </select>
                </div>
                
                 <div class="d-flex justify-content-between mt-4">
                    <button type="button" id="cancel-edit-group" class="btn btn-secondary">Cancelar</button>
                    <button type="button" id="save-edit-group" class="btn btn-primary">Guardar Cambios</button>
                 </div>
            </div>

            <div id="edit-food-section" class="form-step d-none">
                <h3>Editar Opciones de Comida</h3>
                
                <div class="form-group">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="edit-food-option-1" name="edit-food-option" class="custom-control-input" value="Solo experiencia">
                        <label class="custom-control-label" for="edit-food-option-1">Solo experiencia</label>
                    </div>
                    <div class="custom-control custom-radio mt-2">
                        <input type="radio" id="edit-food-option-2" name="edit-food-option" class="custom-control-input" value="Con maridaje">
                        <label class="custom-control-label" for="edit-food-option-2">Con maridaje</label>
                    </div>
                </div>
                
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" id="cancel-edit-food" class="btn btn-secondary">Cancelar</button>
                    <button type="button" id="save-edit-food" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </div>

            <div id="summary-section" class="form-step d-none">
                <div class="alert alert-info mb-4">
                    <i class="bi bi-info-circle-fill me-2"></i>
                    Una prereserva ha sido creada. Si deseas cambiar algo haz click en editar.
                </div>
                
                <div class="mb-3 border p-3 rounded">
                    <div class="mb-3">
                        <h5 class="fw-bold">Evento</h5>
                        <div class="receipt-container bg-light p-3 rounded border">
                            <div class="receipt-section mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="fw-bold">ID Reserva:</span>
                                    <span id="summary-reserva-id">Pendiente</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span>Fecha y Hora:</span>
                                    <span id="summary-fecha">Pendiente</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span>Experiencia:</span>
                                    <span id="summary-experiencia">Pendiente</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span>Tamaño grupo:</span>
                                    <span id="summary-tamano">Pendiente</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Comida Adicional:</span>
                                    <span id="summary-comida">No seleccionada</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="mb-3">
                        <h5 class="fw-bold">Detalles de Precio</h5>
                        <div class="receipt-container bg-light p-3 rounded border">
                            <!-- Base Price Section -->
                            <div class="receipt-section mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="fw-bold">Precio por persona:</span>
                                    <span>$<span id="summary-precio-persona">0</span> CLP</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span>Tamaño del grupo:</span>
                                    <span id="summary-tamano-detail">0 personas</span>
                                </div>
                                <!-- Conditionally show Non-Drinkers -->
                                <div class="d-flex justify-content-between align-items-center mb-1 text-muted" id="summary-no-beben-container">
                                    <span class="ps-3">↳ Personas que no beben:</span> 
                                    <span id="summary-no-beben-detail">0 personas</span>
                                </div>
                                <!-- Conditionally show Kids -->
                                <div class="d-flex justify-content-between align-items-center mb-2 text-muted" id="summary-kids-container">
                                    <span class="ps-3">↳ Liberados:</span>
                                    <span id="summary-kids-detail">0 niños</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2 border-top pt-2">
                                    <span class="fw-bold">Subtotal Experiencia:</span>
                                    <span>
                                        <del id="summary-original-experiencia-precio" class="text-muted me-2 d-none"></del>
                                        $<span id="summary-experiencia-precio">0</span> CLP
                                    </span>
                                </div>
                            </div>

                            <!-- FOOD SECTION -->
                            <div id="food-section" class="receipt-section mb-3 d-none">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span>Comida Adicional:</span>
                                    <span id="summary-comida-detail">No seleccionada</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span>Precio comida (por persona):</span>
                                    <span>$<span id="summary-precio-comida-persona">0</span> CLP</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2 border-top pt-2">
                                    <span class="fw-bold">Subtotal Comida:</span>
                                    <span>
                                        <del id="summary-original-comida-precio" class="text-muted me-2 d-none"></del>
                                        $<span id="summary-comida-precio">0</span> CLP
                                    </span>
                                </div>
                            </div>

                            <!-- Total Section -->
                            <div class="receipt-section border-top pt-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="h5 mb-0">Total grupo:</span>
                                    <span class="h5 mb-0">
                                        <del id="summary-original-total-precio" class="text-muted me-2 d-none"></del>
                                        $<span id="summary-precio-total">0</span> CLP
                                    </span>
                                </div>
                                <!-- Discount Applied Info Message (Now always hidden) -->
                                <div class="alert alert-info py-1 px-2 mt-2 small d-none" id="discount-info-message">
                                    <!-- Content updated by JS -->
                                </div>
                                
                                <!-- Wrapper for Discount Breakdown and Total (Hidden by default) -->
                                <div id="discount-summary-section" class="discount-breakdown mt-2 border-top pt-2 d-none">
                                    <div class="small fw-bold mb-1">Descuentos Aplicados:</div>
                                    
                                    <!-- No Bebedores Discount (Hidden within parent) -->
                                    <div class="d-flex justify-content-between align-items-center text-danger small" id="discount-no-bebedores-container">
                                        <span>↳ No bebedores:</span>
                                        <span>-$<span id="summary-no-bebedores-discount">0</span> CLP</span>
                                    </div>
                                    
                                    <!-- Niños Experiencia Discount (Hidden within parent) -->
                                    <div class="d-flex justify-content-between align-items-center text-danger small" id="discount-ninos-exp-container">
                                        <span>↳ Experiencia niños:</span>
                                        <span>-$<span id="summary-ninos-exp-discount">0</span> CLP</span>
                                    </div>
                                    
                                    <!-- Niños Comida Discount (Hidden within parent) -->
                                    <div class="d-flex justify-content-between align-items-center text-danger small" id="discount-ninos-comida-container">
                                        <span>↳ Comida niños:</span>
                                        <span>-$<span id="summary-ninos-comida-discount">0</span> CLP</span>
                                    </div>
                                    
                                    <!-- Código/Club Discount (Hidden within parent) -->
                                    <div class="d-flex justify-content-between align-items-center text-danger small" id="discount-codigo-club-container">
                                        <span>↳ Código/Club:</span>
                                        <span>-$<span id="summary-codigo-club-discount">0</span> CLP</span>
                                    </div>

                                    <!-- Total Discount Line (Visible only when parent is shown) -->
                                    <div class="d-flex justify-content-between align-items-center text-danger border-top mt-1 pt-1">
                                        <span><strong>Total descuentos:</strong></span>
                                        <span>-$<span id="summary-descuento">0</span> CLP</span>
                                    </div>
                                </div> <!-- End of #discount-summary-section -->

                                <!-- Coupon Code Section - Always Visible -->
                                <div class="coupon-section mt-2 border-top pt-2">
                                    <button type="button" class="btn btn-link p-0 text-decoration-none d-flex align-items-center w-100" id="toggle-coupon" data-bs-toggle="collapse" data-bs-target="#coupon-form" aria-expanded="false" aria-controls="coupon-form">
                                        <i class="bi bi-tag me-2 small"></i>
                                        <span class="small">Tengo un código de descuento</span>
                                        <i class="bi bi-chevron-down ms-auto small"></i>
                                    </button>
                                    <div id="coupon-form" class="mt-2 collapse">
                                        <div class="input-group input-group-sm">
                                            <input type="text" class="form-control form-control-sm" id="coupon-code-input" placeholder="Ingresa tu código">
                                            <button class="btn btn-outline-secondary btn-sm" type="button" id="apply-coupon">Aplicar</button>
                                            <button class="btn btn-outline-danger btn-sm d-none" type="button" id="remove-coupon">Eliminar</button>
                                        </div>
                                        <div id="coupon-message" class="mt-1 small"></div>
                                        <div id="best-discount-message" class="mt-1 small text-muted d-none"></div>
                                    </div>
                                    
                                    <div class="d-flex justify-content-between mt-2 pt-2 border-top">
                                        <span class="h5 mb-0 text-primary">Por abonar hoy:</span>
                                        <span class="h5 mb-0 text-primary">$<span id="summary-abono">0</span> CLP</span>
                                    </div>
                </div>
                        </div> <!-- End of receipt-container for Price Details -->
                </div>
                </div> <!-- End of Main Summary Block -->

                <div class="d-flex justify-content-between mt-4">
                     <button id="btn-qf5j-back" class="btn btn-outline-secondary">
                        <i class="fas fa-edit mr-2"></i> Editar
                     </button>
                     <button id="btn-qf5j-continue" class="btn btn-primary">
                        Continuar a Pago <i class="fas fa-arrow-right ml-2"></i>
                     </button>
                </div>
            </div>

            <div id="step-edit-reservation" class="form-step d-none">
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header bg-dark text-white">
                                    <h3>Editar Reserva</h3>
                                </div>
                                <div class="card-body">
                                    <p class="lead">Selecciona qué información deseas modificar:</p>
                                    
                                    <div class="list-group my-4">
                                        <button id="btn-edit-experience" class="list-group-item list-group-item-action">
                                            <div class="d-flex w-100 justify-content-between">
                                                <h5 class="mb-1">Experiencia</h5>
                                                <small><i class="fas fa-chevron-right"></i></small>
                                            </div>
                                            <p class="mb-1">Modificar el tipo de experiencia, evento o fecha seleccionada</p>
                                        </button>
                                        
                                        <button id="btn-create-new-experience" class="list-group-item list-group-item-action">
                                            <div class="d-flex w-100 justify-content-between">
                                                <h5 class="mb-1">Solicitar Experiencia Personalizada</h5>
                                                <small><i class="fas fa-chevron-right"></i></small>
                                            </div>
                                            <p class="mb-1">Crear una solicitud para una experiencia a medida</p>
                                        </button>
                                        
                                        <button id="btn-edit-group" class="list-group-item list-group-item-action">
                                            <div class="d-flex w-100 justify-content-between">
                                                <h5 class="mb-1">Configuración del Grupo</h5>
                                                <small><i class="fas fa-chevron-right"></i></small>
                                            </div>
                                            <p class="mb-1">Modificar datos del organizador, tamaño del grupo o preferencias</p>
                                        </button>
                                        
                                        <button id="btn-edit-food" class="list-group-item list-group-item-action">
                                            <div class="d-flex w-100 justify-content-between">
                                                <h5 class="mb-1">Opciones de Comida</h5>
                                                <small><i class="fas fa-chevron-right"></i></small>
                                            </div>
                                            <p class="mb-1">Cambiar las opciones de maridaje o comida seleccionadas</p>
                                        </button>
                                    </div>
                                    
                                    <div class="d-flex justify-content-between mt-4">
                                        <button id="btn-edit-back-to-summary" class="btn btn-outline-secondary">
                                            <i class="fas fa-arrow-left mr-2"></i> Volver al Resumen
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="step-checkout-placeholder" class="form-step d-none">
                        <h4>Pago por Transferencia Bancaria</h4>
                        <hr>
                        <div class="card">
                          <div class="card-body">
                            <p><strong>Titular:</strong> VINOS LABERINTO LIMITADA</p>
                            <p><strong>RUT:</strong> 78855030-8</p>
                            <p><strong>Banco:</strong> Banco de Chile</p>
                            <p><strong>Tipo de cuenta:</strong> Cuenta Corriente</p>
                            <p><strong>Número de cuenta:</strong> 1930171506</p>
                            <p><strong>Email:</strong> info@laberintowines.com</p>
                            <button id="btn-copy-details" class="btn btn-outline-primary">Copiar datos</button>
                          </div>
                        </div>
                        <div class="d-flex justify-content-start mt-4">
                            <button type="button" class="btn btn-outline-secondary" id="btn-checkout-back">Volver</button>
                        </div>
             </div>

            <div id="step-gr5a" class="form-step d-none">
                 <div class="text-center p-4">
                            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-check-circle-fill text-success mb-3" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                            </svg>
                            <h4>¡Gracias por tu reserva!</h4>
                     <p>Hemos recibido y guardado tu información...</p>
                            <div class="mt-3 text-start border p-3 rounded bg-white">
                                <p><strong>ID de Reserva:</strong> <span id="final-summary-record-id">N/A</span></p>
                                <p><strong>Experiencia:</strong> <span id="final-summary-experiencia"></span></p>
                                <p><strong>Fecha:</strong> <span id="final-summary-fecha"></span></p>
                                <p><strong>Grupo:</strong> <span id="final-summary-grupo"></span></p>
                                <p><strong>Abono Pagado:</strong> $<span id="final-summary-abono"></span></p>
                            </div>
                     <button class="btn btn-primary mt-4" id="btn-gr5a-new-booking">Hacer otra reserva</button>
                 </div>
             </div>

             <div class="modal fade" id="groupConfigModal" tabindex="-1" aria-labelledby="groupConfigModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="groupConfigModalLabel">Configuración del Grupo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                  </div>
                  <div class="modal-body">
                    <h4>Configuración del Grupo</h4>
                    <hr>
                    <div id="group-config-validation-summary" class="alert alert-danger d-none mb-3" role="alert">
                        Por favor revisa los campos marcados en rojo.
                    </div>
                    <div class="alert alert-secondary small">
                        <p>Por favor completa la información del grupo para tu reserva.</p>
                    </div>
                    <input type="hidden" id="widget-kkTo" value="">
                    <!-- Organizer Information -->
                    <div class="mb-3 border p-3 rounded bg-light">
                        <label class="form-label fw-bold">Información del Organizador</label>
                        <p class="form-text small">Datos de la persona responsable de este grupo.</p>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="organizer-nombre" class="form-label">Nombre<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="organizer-nombre" required>
                                <div class="invalid-feedback">Por favor ingresa el nombre.</div>
                            </div>
                            <div class="col-md-6">
                                <label for="organizer-apellido" class="form-label">Apellido<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="organizer-apellido" required>
                                <div class="invalid-feedback">Por favor ingresa el apellido.</div>
                            </div>
                        </div>
                        <div class="row g-3 mt-1">
                            <div class="col-md-6">
                                <label for="organizer-email" class="form-label">Correo Electrónico<span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="organizer-email" required>
                                <div class="invalid-feedback">Por favor ingresa un correo electrónico válido.</div>
                            </div>
                            <div class="col-md-6">
                                <label for="organizer-telefono" class="form-label">Número de Teléfono<span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <select class="form-select flex-grow-0" style="width: auto;" id="organizer-phone-code" required>
                                        <option value="">Código...</option>
                                        <option value="+56" selected>+56 🇨🇱</option>
                                        <option value="+54">+54 🇦🇷</option>
                                        <option value="+55">+55 🇧🇷</option>
                                        <option value="+51">+51 🇵🇪</option>
                                        <option value="+591">+591 🇧🇴</option>
                                        <option value="+598">+598 🇺🇾</option>
                                        <option value="+595">+595 🇵🇾</option>
                                        <option value="+57">+57 🇨🇴</option>
                                        <option value="+58">+58 🇻🇪</option>
                                        <option value="+52">+52 🇲🇽</option>
                                        <option value="+1">+1 🇺🇸/🇨🇦</option>
                                        <option value="+34">+34 🇪🇸</option>
                                        <option value="+44">+44 🇬🇧</option>
                                        <option value="+49">+49 🇩🇪</option>
                                        <option value="+33">+33 🇫🇷</option>
                                        <option value="+39">+39 🇮🇹</option>
                                        <option value="+970">+970 🇵🇸</option>
                                        <option value="Other">Otro...</option>
                                    </select>
                                    <input type="tel" class="form-control" id="organizer-telefono" placeholder="Ej: 912345678" required>
                                </div>
                                <div id="organizer-phone-code-other-wrapper" class="mt-2 d-none">
                                    <label for="organizer-phone-code-other" class="form-label small">Ingresa código país:</label>
                                    <input type="text" class="form-control form-control-sm" style="width: 100px;" id="organizer-phone-code-other" placeholder="+XXX">
                                </div>
                                <div id="phone-invalid-feedback" class="invalid-feedback d-block"></div>
                            </div>
                        </div>
                        <!-- Additional group fields (size, members, restrictions) go here -->
                        <div class="d-flex justify-content-between mt-4">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="btn-group-config-cancel">Cancelar</button>
                            <button type="button" class="btn btn-primary" id="btn-group-config-save">Guardar cambios</button>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div id="subform-scheduling" class="form-step d-none">
                        <h4 id="scheduling-title">Agendar Experiencia</h4>
                        <hr>
                        <div class="alert alert-secondary small">
                            <p>Selecciona la fecha y hora para tu experiencia...</p>
                        </div>
                        <div class="mb-3">
                            <label for="scheduling-name" class="form-label">Nombre del organizador</label>
                            <input type="text" class="form-control" id="scheduling-name" required>
                        </div>
                        <div class="mb-3">
                            <label for="scheduling-email" class="form-label">Email del organizador</label>
                            <input type="email" class="form-control" id="scheduling-email" required>
                        </div>
                 <h4>Selecciona Fecha y Hora</h4>
                        <div class="alert alert-info">
                            <p>Por favor selecciona una fecha disponible...</p>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="scheduling-date" class="form-label">Fecha</label>
                                <input type="date" id="scheduling-date" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label for="scheduling-time" class="form-label">Hora</label>
                                <input type="time" id="scheduling-time" class="form-control" required>
                            </div>
                        </div>
                 <hr>
                 <h4>Tu información</h4>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label for="scheduling-name" class="form-label">Nombre completo</label>
                                <input type="text" class="form-control" id="scheduling-name" required>
                            </div>
                            <div class="col-md-6">
                                <label for="scheduling-email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="scheduling-email" required>
                            </div>
                        </div>
                 <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-outline-secondary" id="btn-scheduling-cancel">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btn-scheduling-confirm">Confirmar Horario</button>
                 </div>
            </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
