/*
Theme Name: Experiencia Travels Theme
Description: Tema a medida para el marketplace Experiencia Travels.
Version: 1.1.1
Author: Experiencia Travels Tech
Text Domain: experiencia-travels-theme
*/

/* =========================================
   1. VARIABLES DE MARCA (Tu ADN Visual)
   ========================================= */
:root {
    --brand-primary: #F79F1A;    /* Naranja del logo */
    --brand-secondary: #222222;  /* Negro/Gris oscuro */
    --brand-dark: #000000;       /* Negro puro */
    --brand-light: #f8f9fa;      /* Gris muy claro */
    --brand-white: #ffffff;
    --brand-success: #28a745;    /* Verde para mensajes de éxito */
    --brand-danger: #dc3545;     /* Rojo para errores */
}

/* =========================================
   2. ESTILOS GLOBALES BÁSICOS
   ========================================= */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #444;
    line-height: 1.6;
    background-color: var(--brand-white);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-secondary);
    font-weight: 700;
    margin-bottom: 0.8em;
}

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--brand-secondary);
}

/* =========================================
   3. COMPONENTES DEL MARKETPLACE
   ========================================= */

/* --- Botones Principales (Reservar, Buscar) --- */
.ete-booking-widget .button-reservar,
.ete-search-submit input[type="submit"],
.ete-search-submit-v2 input[type="submit"],
button.button-primary,
input[type="submit"].button-primary {
    background-color: var(--brand-primary) !important;
    color: var(--brand-dark) !important; /* Texto negro sobre naranja para mejor contraste */
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

.ete-booking-widget .button-reservar:hover,
.ete-search-submit input[type="submit"]:hover {
    background-color: var(--brand-secondary) !important;
    color: var(--brand-white) !important;
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}

/* --- Precios --- */
.ete-booking-widget .price,
.ete-viaje-card-precio,
.ete-ganancia-box .monto {
    color: var(--brand-primary) !important;
    font-weight: 800 !important;
}
.ete-booking-widget .price small {
    font-size: 0.5em;
    font-weight: 400;
    color: #777;
}

/* =========================================
   4. ESTILOS DE PLANTILLA (Layouts)
   ========================================= */

/* --- Cuadrícula de Archivos (archive-viaje.php, taxonomy.php, search.php) --- */
.ete-archive-header {
    text-align: center;
    padding: 2em 20px;
    background-color: var(--brand-light);
    border-bottom: 1px solid #eee;
}
.ete-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    margin: 2em auto;
}

/* --- Tarjetas de Viaje (content-viaje-card.php) --- */
.ete-viaje-card {
    border: none !important; /* Quitamos bordes duros */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important; /* Sombra más elegante */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease !important;
    border-radius: 8px;
    overflow: hidden;
}
.ete-viaje-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
}
.ete-viaje-card-imagen {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.ete-viaje-card-contenido {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.ete-viaje-card-titulo {
    font-size: 1.3em !important;
    color: var(--brand-secondary) !important;
    margin: 0 0 10px 0;
}
.ete-viaje-card-info {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-weight: 700;
}

/* --- Página de Viaje Individual (single-viaje.php) --- */
.ete-single-viaje-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    margin: 2em auto;
}
.ete-viaje-main-content {
    flex: 1;
    min-width: 0;
    flex-basis: 65%;
}
.ete-viaje-sidebar {
    flex-basis: 300px;
    flex-grow: 1;
}
.ete-booking-widget {
    border: none !important;
    padding: 20px;
    border-radius: 8px;
    background: var(--brand-white) !important;
    box-shadow: 0 5px 30px rgba(0,0,0,0.1) !important;
    position: sticky;
    top: 30px;
    border-top: 5px solid var(--brand-primary) !important;
}
.ete-booking-widget .form-field { margin-bottom: 15px; }
.ete-booking-widget label { display: block; font-weight: 700; margin-bottom: 5px; }
.ete-booking-widget select, .ete-booking-widget input[type=number] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}
.ete-booking-widget .total-price {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    font-size: 1.2em;
    font-weight: 700;
}
.ete-booking-widget .total-price-amount { float: right; }
.viaje-seccion { margin-top: 3em; }
.viaje-seccion h2 { border-bottom: 2px solid var(--brand-light); padding-bottom: 10px; }
#ete-comments-section {
    margin-top: 3em;
    border-top: 2px solid #eee;
    padding-top: 2em;
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

/* --- Buscador Avanzado --- */
.ete-search-form-v2, .ete-search-form {
    background: var(--brand-secondary) !important;
    padding: 3em !important;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.ete-search-field-v2 label, .ete-search-field label {
    color: var(--brand-white) !important;
}

/* ==================================================
   5. SELLO DE EMBAJADOR VERIFICADO (Color Corregido)
   ================================================== */
.ete-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9em;
    font-weight: 600;
    color: #1DA1F2; /* Color para el TEXTO "Verificado" */
    vertical-align: middle; 
}

.ete-verified-badge .ete-verified-icon {
    width: 1.1em;
    height: 1.1em;
    /* ¡LÍNEAS CORREGIDAS AÑADIDAS! */
    color: #1DA1F2 !important; /* Forzamos el color azul */
    fill: currentColor; /* Asegura que el SVG use el color definido */
    <?php
/**
 * La plantilla para mostrar un único Viaje (Versión V2.5 - Dual Buttons & Style Fixed).
 * @package Experiencia_Travels_Theme
 */

get_header();

// 1. Obtener Datos del Viaje
$precio_base = get_post_meta( get_the_ID(), '_ete_precio_viaje', true );
$dias = get_post_meta( get_the_ID(), '_ete_dias_viaje', true );
$noches = get_post_meta( get_the_ID(), '_ete_noches_viaje', true );

// ID del producto WooCommerce asociado (para el carrito)
$producto_wc_id = get_post_meta( get_the_ID(), 'producto_woocommerce_id', true );
$producto_wc_id = $producto_wc_id ? (int)$producto_wc_id : 0; 

// 2. Metadatos Extendidos (Contenido)
$itinerario = get_post_meta( get_the_ID(), '_ete_itinerario_viaje', true );
$incluye = get_post_meta( get_the_ID(), '_ete_incluye', true );
$no_incluye = get_post_meta( get_the_ID(), '_ete_no_incluye', true );
$info_importante = get_post_meta( get_the_ID(), '_ete_info_importante', true );
$faqs = get_post_meta( get_the_ID(), '_ete_faqs', true );
$disponibilidad = get_post_meta( get_the_ID(), '_ete_disponibilidad', true );

// 3. Wishlist (Corazón)
$is_in_wishlist = false;
if ( function_exists('ete_is_in_wishlist') ) { 
    $is_in_wishlist = ete_is_in_wishlist( get_the_ID() ); 
}
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            
            <header class="entry-header single-viaje-header" style="text-align:center; margin-bottom:2em; position: relative;">
                <?php the_title('<h1 class="entry-title">','</h1>'); ?>
                
                <span class="ete-wishlist-button <?php echo $is_in_wishlist ? 'is-active' : ''; ?>" data-viaje-id="<?php echo get_the_ID(); ?>" style="top: 0; right: 0; cursor: pointer;">
                    ❤
                </span>
                
                <?php if ( function_exists('ete_mostrar_promedio_calificaciones') ) { ete_mostrar_promedio_calificaciones(); } ?>
                
                <div class="ete-autor-verificado-wrapper" style="margin-top: 15px; font-size: 1.1em; color: #555;">
                    Organizado por: 
                    <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" style="font-weight: 700; color: #333; text-decoration: none;">
                        <?php the_author(); ?>
                        <?php 
                        // Sello de Verificación Azul
                        if ( function_exists('ete_get_verified_ambassador_badge') ) {
                            echo ete_get_verified_ambassador_badge( get_the_author_meta( 'ID' ), true ); 
                        }
                        ?>
                    </a>
                </div>
            </header>
            
            <div class="ete-single-viaje-wrapper">

                <div class="ete-viaje-main-content">
                    <?php if(has_post_thumbnail()): ?>
                        <div class="viaje-imagen-destacada" style="margin-bottom:20px;">
                            <?php the_post_thumbnail('full', ['style' => 'width:100%; height:auto; border-radius:8px;']); ?>
                        </div>
                    <?php endif; ?>
                    
                    <div class="entry-content">
                        <?php the_content(); ?>
                        
                        <?php if(is_array($itinerario)&&!empty($itinerario)): ?>
                            <div class="viaje-seccion" id="itinerario" style="margin-top:30px;">
                                <h2 style="border-bottom:2px solid #F79F1A; padding-bottom:10px; display:inline-block;">Itinerario Día por Día</h2>
                                <?php foreach($itinerario as $index=>$dia): ?>
                                    <div class="dia-item" style="border-bottom:1px solid #eee; padding:15px 0;">
                                        <h3 style="margin-top:0; color:#333;">Día <?php echo $index+1; ?>: <?php echo esc_html($dia['titulo']??''); ?></h3>
                                        <div><?php echo wpautop(esc_html($dia['descripcion']??'')); ?></div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>

                        <?php if(!empty($incluye)||!empty($no_incluye)): ?>
                            <div class="viaje-seccion" id="incluye" style="display:flex; flex-wrap:wrap; gap:30px; background:#f8f9fa; padding:25px; border-radius:8px; margin-top:30px;">
                                <?php if(!empty($incluye)): ?>
                                    <div class="columna" style="flex:1; min-width:250px;">
                                        <h4 style="color:#27ae60;">✅ Incluye</h4>
                                        <ul style="list-style-type:none; padding-left:0; margin:0;">
                                            <?php foreach(preg_split("/\r\n|\n|\r/",$incluye)as $item){ if(trim($item)) echo '<li style="margin-bottom:5px;">• '.esc_html(trim($item)).'</li>'; } ?>
                                        </ul>
                                    </div>
                                <?php endif; ?>
                                <?php if(!empty($no_incluye)): ?>
                                    <div class="columna" style="flex:1; min-width:250px;">
                                        <h4 style="color:#c0392b;">❌ No Incluye</h4>
                                        <ul style="list-style-type:none; padding-left:0; margin:0;">
                                            <?php foreach(preg_split("/\r\n|\n|\r/",$no_incluye)as $item){ if(trim($item)) echo '<li style="margin-bottom:5px;">• '.esc_html(trim($item)).'</li>'; } ?>
                                        </ul>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>

                        <?php if(!empty($info_importante)): ?>
                            <div class="viaje-seccion" id="info-importante" style="margin-top:30px;">
                                <h2>Información Importante</h2>
                                <div style="background:#fff3cd; border-left:5px solid #ffeeba; color:#856404; padding:20px; border-radius:4px;">
                                    <?php echo wpautop(esc_html($info_importante));?>
                                </div>
                            </div>
                        <?php endif; ?>

                        <?php if(is_array($faqs)&&!empty($faqs)): ?>
                            <div class="viaje-seccion" id="faq" style="margin-top:30px;">
                                <h2>Preguntas Frecuentes</h2>
                                <?php foreach($faqs as $faq): ?>
                                    <div class="faq-item" style="border:1px solid #eee; border-radius:5px; padding:15px; margin-bottom:10px;">
                                        <h3 style="font-size:1.1em; margin:0 0 10px 0; color:#333;"><?php echo esc_html($faq['pregunta']??'');?></h3>
                                        <div style="color:#666;"><?php echo wpautop(esc_html($faq['respuesta']??''));?></div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <aside class="ete-viaje-sidebar">
                    <div class="ete-booking-widget" data-product-id="<?php echo esc_attr($producto_wc_id); ?>" data-base-price="<?php echo esc_attr($precio_base); ?>" style="background:#fff; border:1px solid #e0e0e0; padding:25px; border-radius:12px; box-shadow:0 5px 20px rgba(0,0,0,0.05); position:sticky; top:20px;">
                        
                        <div class="price" style="margin-bottom:20px; border-bottom:1px solid #eee; padding-bottom:15px;">
                            <span style="font-size:1.8em; font-weight:800; color:#222;">$<?php echo esc_html(number_format((float)$precio_base,0,',','.'));?></span>
                            <small style="display:block; color:#777; font-size:0.9em;">ARS por persona</small>
                        </div>
                        
                        <div class="form-field" style="margin-bottom:15px;">
                            <label for="booking_date" style="font-weight:700; display:block; margin-bottom:5px; color:#333;">📅 Fecha de Inicio</label>
                            <select id="booking_date" name="booking_date" required style="width:100%; padding:12px; border:1px solid #ccc; border-radius:6px; background:#fff; font-size:1rem;">
                                <option value="">-- Seleccionar Fecha --</option>
                                <?php 
                                if ( is_array( $disponibilidad ) ) {
                                    foreach ( $disponibilidad as $item ) {
                                        if ( ! empty( $item['fecha'] ) && ! empty( $item['plazas'] ) ) {
                                            $fecha_obj = DateTime::createFromFormat('Y-m-d', $item['fecha']);
                                            $fecha_fmt = $fecha_obj ? $fecha_obj->format('d/m/Y') : $item['fecha'];
                                            // 'data-plazas' es CRÍTICO para validar stock en JS
                                            echo '<option value="' . esc_attr($item['fecha']) . '" data-plazas="' . esc_attr($item['plazas']) . '">' . esc_html($fecha_fmt) . ' (' . esc_html($item['plazas']) . ' cupos)</option>';
                                        }
                                    }
                                }
                                ?>
                            </select>
                        </div>
                        
                        <div class="form-field" style="margin-bottom:20px;">
                            <label for="booking_travelers" style="font-weight:700; display:block; margin-bottom:5px; color:#333;">👥 Pasajeros</label>
                            <input type="number" id="booking_travelers" name="booking_travelers" value="1" min="1" required style="width:100%; padding:12px; border:1px solid #ccc; border-radius:6px; font-size:1rem;">
                        </div>
                        
                        <div class="total-price" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; padding-top:15px; border-top:1px dashed #ddd; font-weight:800; font-size:1.3em; color:#222;">
                            <span>Total</span>
                            <span class="total-price-amount" id="total_price_display">$0</span>
                        </div>
                        
                        <div class="ete-actions-container" style="display:flex; flex-direction:column; gap:12px;">
                            
                            <button class="button-reservar ete-action-btn" data-action="checkout" style="
                                background: #F79F1A; 
                                color: #222; 
                                width: 100%; 
                                padding: 14px; 
                                border: none; 
                                border-radius: 8px; 
                                font-weight: 800; 
                                font-size: 1rem;
                                text-transform: uppercase;
                                letter-spacing: 0.5px;
                                cursor: pointer; 
                                transition: transform 0.2s, background 0.2s;
                                display: flex; align-items: center; justify-content: center; gap: 8px;
                                box-shadow: 0 4px 10px rgba(247, 159, 26, 0.3);
                            ">
                                <span class="btn-icon" style="font-size: 1.2em;">✈️</span>
                                <span class="btn-text">Reservar y Pagar</span>
                                <span class="btn-loader" style="display:none;">⏳ Procesando...</span>
                            </button>

                            <button class="button-reservar-secondary ete-action-btn" data-action="mochila" style="
                                background: #fff; 
                                border: 2px solid #F79F1A; 
                                color: #F79F1A; 
                                width: 100%; 
                                padding: 12px; 
                                border-radius: 8px; 
                                font-weight: 700; 
                                font-size: 1rem;
                                text-transform: uppercase;
                                letter-spacing: 0.5px;
                                cursor: pointer; 
                                transition: all 0.2s ease;
                                display: flex; align-items: center; justify-content: center; gap: 8px;
                            ">
                                <span class="btn-icon" style="font-size: 1.2em;">🧳</span>
                                <span class="btn-text">Agregar a mi Valija</span>
                                <span class="btn-loader" style="display:none;">⏳ Guardando...</span>
                            </button>

                        </div>

                        <div id="booking-feedback" style="margin-top:15px; font-size:0.9em; text-align:center; line-height:1.4; display:none;"></div>
                        
                        <div style="text-align:center; margin-top:20px; font-size:0.8em; color:#999;">
                            <span style="display:inline-block; margin-right:10px;">🔒 Pago Seguro</span>
                            <span>⚡ Confirmación Inmediata</span>
                        </div>
                    </div>
                </aside>
                
            </div>

            <div id="ete-comments-section" class="viaje-seccion" style="max-width:800px; margin:40px auto; padding:20px; background:#fff; border-radius:8px;">
                <?php if ( comments_open() || get_comments_number() ) : comments_template(); endif; ?>
            </div>

        </article>
        <?php endwhile; ?>
    </main>
</div>

<?php
get_footer();
?>
}