/**
 * Optimización para móviles: Invertir el orden de las columnas en tours.
 * Esto hace que el sidebar (formulario de reserva) aparezca ARRIBA del texto en móviles.
 */
@media (max-width: 991px) {
    /* La clase .content-tour-detail es la que envuelve las dos columnas en las plantillas single-tour.php */
    .row.content-tour-detail {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* Ajuste para que el sidebar no tenga margen inferior innecesario al estar arriba */
    .sidebar-single-tour {
        margin-bottom: 30px;
    }

    /* Asegurar que las columnas ocupen el 100% al estar invertidas */
    .content-tour-detail > [class*="col-"] {
        width: 100% !important;
    }
}

/* Booking date from */ 
#booking_date_from { 
    border: 2px solid #fb8f1c !important; 
}

/* Estilo del placeholder */
.tour-detail-booking_form input::placeholder {
    font-size: 14px !important;
    color: #888 !important;
}

/* Para navegadores antiguos */
.tour-detail-booking_form input::-webkit-input-placeholder {
    font-size: 14px !important;
}
.tour-detail-booking_form input::-moz-placeholder {
    font-size: 14px !important;
}

/**
 * Mejora de visibilidad del formulario de reserva.
 */
.tour-detail-booking_form .booking-form-block {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 15px !important;
}

.tour-detail-booking_form .booking_form_input_label {
    flex: 0 0 100% !important; /* Etiqueta arriba en toda la línea */
    max-width: 100% !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    color: #05073c !important;
}

.tour-detail-booking_form .booking-date,
.tour-detail-booking_form .booking-date-times,
.tour-detail-booking_form .booking-guests-block > div {
    flex: 0 0 100% !important; /* Contenedor del campo al 100% */
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.tour-detail-booking_form input.booking_date,
.tour-detail-booking_form .booking-form-block input[type="text"],
.tour-detail-booking_form .booking-form-block input[type="number"],
.tour-detail-booking_form .booking-form-block select {
    width: 100% !important; /* Campo al 100% de ancho */
    border: 2px solid #777 !important;
    border-radius: 8px !important;
    padding: 12px 15px 12px 40px !important; /* Espacio para el icono a la izquierda */
    background-color: #fff !important;
    color: #222 !important;
    font-size: 16px !important;
    height: 50px !important;
    transition: all 0.3s ease;
}

/* Posicionar el icono del calendario DENTRO del campo */
.tour-detail-booking_form .booking-date i {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #444 !important;
    z-index: 2 !important;
    margin: 0 !important;
}

/* Estilo cuando el usuario hace clic en el campo */
.tour-detail-booking_form input.booking_date:focus,
.tour-detail-booking_form .booking-form-block input:focus,
.tour-detail-booking_form .booking-form-block select:focus {
    border-color: #000 !important;
    box-shadow: 0 0 8px rgba(0,0,0,0.1) !important;
    outline: none !important;
}