/**
 * CSS Frontend de WooTourism
 *
 * @package WooTourism
 * @since 1.0.0
 */

/* Ocultar precio original de WooCommerce cuando hay booking */
.product.has-booking .price {
    display: none !important;
}

/* Contenedor del formulario de reserva */
.wootourism-booking-form {
    margin: 20px 0;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
}

/* Campos del formulario */
.wootourism-field {
    margin-bottom: 20px;
}

.wootourism-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

/* Contenedor para input + hints */
.wootourism-input-wrapper {
    width: 100%;
}

.wootourism-field input[type="text"],
.wootourism-field input[type="number"],
.wootourism-field select {
    width: 100%;
    max-width: 400px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.wootourism-field input[type="text"]:focus,
.wootourism-field input[type="number"]:focus,
.wootourism-field select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* Hints y mensajes de ayuda */
.wootourism-field small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
    font-weight: normal;
    line-height: 1.4;
    max-width: 400px;
}

.wootourism-field .wootourism-guests-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #666;
}

.wootourism-field .wootourism-guests-remaining,
.wootourism-field .wootourism-tour-remaining {
    margin-top: 6px;
    font-size: 12px;
    color: #0073aa;
    font-weight: 500;
}

/* Datepicker */
.wootourism-datepicker {
    cursor: pointer;
    background-color: #fff;
}

.wootourism-datepicker:read-only {
    background-color: #fff;
    cursor: pointer;
}

/* Días deshabilitados en el calendario */
.ui-datepicker .ui-state-disabled {
    opacity: 0.3;
    background: #f0f0f0 !important;
    color: #999 !important;
}

/* Resumen de precio */
.wootourism-price-summary {
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    border: 2px solid #0073aa;
    border-radius: 4px;
    text-align: center;
}

.wootourism-price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.wootourism-price-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.wootourism-price-amount {
    font-size: 32px;
    font-weight: 700;
    color: #0073aa;
}

.wootourism-price-amount .woocommerce-Price-amount {
    font-size: inherit;
    color: inherit;
}

/* Botón de agregar al carrito */
.wootourism-booking-form ~ .single_add_to_cart_button {
    margin-top: 20px;
}

/* Loading state */
.wootourism-loading {
    opacity: 0.6;
    pointer-events: none;
}

.wootourism-loading .wootourism-price-amount::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Fix para el datepicker */
.wootourism-field .ui-datepicker-trigger {
    display: none;
}

.wootourism-field input.wootourism-datepicker {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y10"></line></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 40px;
}

/* Estados de validación */
.wootourism-field input.error,
.wootourism-field select.error {
    border-color: #dc3232;
    background-color: #fff5f5;
}

.wootourism-field input.error:focus {
    border-color: #dc3232 !important;
    box-shadow: 0 0 0 1px #dc3232 !important;
}

.wootourism-error-message {
    display: block;
    margin-top: 5px;
    color: #dc3232;
    font-size: 12px;
}

/* Precio en lista de productos */
.wootourism-price-display {
    display: inline-block;
}

.wootourism-price-suffix {
    font-size: 0.8em;
    opacity: 0.8;
    font-weight: normal;
}

/* Asegurar que el precio formateado se muestre correctamente */
.wootourism-price-amount .woocommerce-Price-amount {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}

.wootourism-price-amount .woocommerce-Price-currencySymbol {
    font-size: inherit;
    color: inherit;
}

.wootourism-price-amount bdi {
    font-style: normal;
}

/* Responsive - DESKTOP */
@media screen and (min-width: 768px) {
    .wootourism-field {
        display: flex;
        flex-direction: column;
    }
    
    .wootourism-field label {
        margin-bottom: 8px;
    }
    
    .wootourism-input-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .wootourism-field input[type="text"],
    .wootourism-field input[type="number"],
    .wootourism-field select {
        width: 100%;
        max-width: 400px;
    }
    
    .wootourism-field small {
        max-width: 400px;
    }
}

/* Responsive - MOBILE */
@media screen and (max-width: 767px) {
    .wootourism-booking-form {
        padding: 15px;
    }
    
    .wootourism-field {
        display: flex;
        flex-direction: column;
    }
    
    .wootourism-field label {
        margin-bottom: 8px;
    }
    
    .wootourism-field input[type="text"],
    .wootourism-field input[type="number"],
    .wootourism-field select {
        width: 100%;
        max-width: 100%;
    }
    
    .wootourism-field small {
        width: 100%;
        max-width: 100%;
    }
    
    .wootourism-price-label {
        font-size: 14px;
    }
    
    .wootourism-price-amount {
        font-size: 24px;
    }
}

/* NUEVO: Estilos para rango de fechas preseleccionado */
.ui-datepicker .ui-state-highlight-range {
    background: #cfe8ff !important;
    border: 1px solid #4a9eff !important;
    color: #003d82 !important;
    font-weight: bold !important;
}

.ui-datepicker .ui-state-highlight-range:hover {
    background: #b3dcff !important;
    border: 1px solid #3a8eef !important;
}

/* Asegurar que los campos de fecha tengan suficiente ancho para rangos */
.wootourism-field input[type="text"].wootourism-datepicker {
    min-width: 250px;
}

/* Estilos responsive para móviles */
@media (max-width: 768px) {
    .wootourism-field input[type="text"].wootourism-datepicker {
        min-width: 100%;
    }
}